parent
df951c319c
commit
faff152ae5
@ -0,0 +1,115 @@ |
||||
// Package imports.
|
||||
import classNames from 'classnames'; |
||||
import PropTypes from 'prop-types'; |
||||
import React from 'react'; |
||||
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; |
||||
import { length } from 'stringz'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
|
||||
// Components.
|
||||
import Button from 'flavours/glitch/components/button'; |
||||
import Icon from 'flavours/glitch/components/icon'; |
||||
|
||||
// Utils.
|
||||
import { maxChars } from 'flavours/glitch/util/initial_state'; |
||||
|
||||
// Messages.
|
||||
const messages = defineMessages({ |
||||
publish: { |
||||
defaultMessage: 'Toot', |
||||
id: 'compose_form.publish', |
||||
}, |
||||
publishLoud: { |
||||
defaultMessage: '{publish}!', |
||||
id: 'compose_form.publish_loud', |
||||
}, |
||||
}); |
||||
|
||||
export default @injectIntl |
||||
class Publisher extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
countText: PropTypes.string, |
||||
disabled: PropTypes.bool, |
||||
intl: PropTypes.object.isRequired, |
||||
onSecondarySubmit: PropTypes.func, |
||||
onSubmit: PropTypes.func, |
||||
privacy: PropTypes.oneOf(['direct', 'private', 'unlisted', 'public']), |
||||
sideArm: PropTypes.oneOf(['none', 'direct', 'private', 'unlisted', 'public']), |
||||
}; |
||||
|
||||
render () { |
||||
const { countText, disabled, intl, onSecondarySubmit, onSubmit, privacy, sideArm } = this.props; |
||||
|
||||
const diff = maxChars - length(countText || ''); |
||||
const computedClass = classNames('composer--publisher', { |
||||
disabled: disabled || diff < 0, |
||||
over: diff < 0, |
||||
}); |
||||
|
||||
return ( |
||||
<div className={computedClass}> |
||||
<span className='count'>{diff}</span> |
||||
{sideArm && sideArm !== 'none' ? ( |
||||
<Button |
||||
className='side_arm' |
||||
disabled={disabled || diff < 0} |
||||
onClick={onSecondarySubmit} |
||||
style={{ padding: null }} |
||||
text={ |
||||
<span> |
||||
<Icon |
||||
icon={{ |
||||
public: 'globe', |
||||
unlisted: 'unlock', |
||||
private: 'lock', |
||||
direct: 'envelope', |
||||
}[sideArm]} |
||||
/> |
||||
</span> |
||||
} |
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`} |
||||
/> |
||||
) : null} |
||||
<Button |
||||
className='primary' |
||||
text={function () { |
||||
switch (true) { |
||||
case !!sideArm && sideArm !== 'none': |
||||
case privacy === 'direct': |
||||
case privacy === 'private': |
||||
return ( |
||||
<span> |
||||
<Icon |
||||
icon={{ |
||||
direct: 'envelope', |
||||
private: 'lock', |
||||
public: 'globe', |
||||
unlisted: 'unlock', |
||||
}[privacy]} |
||||
/> |
||||
{' '} |
||||
<FormattedMessage {...messages.publish} /> |
||||
</span> |
||||
); |
||||
case privacy === 'public': |
||||
return ( |
||||
<span> |
||||
<FormattedMessage |
||||
{...messages.publishLoud} |
||||
values={{ publish: <FormattedMessage {...messages.publish} /> }} |
||||
/> |
||||
</span> |
||||
); |
||||
default: |
||||
return <span><FormattedMessage {...messages.publish} /></span>; |
||||
} |
||||
}()} |
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`} |
||||
onClick={onSubmit} |
||||
disabled={disabled || diff < 0} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
} |
@ -1,122 +0,0 @@ |
||||
// Package imports.
|
||||
import classNames from 'classnames'; |
||||
import PropTypes from 'prop-types'; |
||||
import React from 'react'; |
||||
import { |
||||
defineMessages, |
||||
FormattedMessage, |
||||
} from 'react-intl'; |
||||
import { length } from 'stringz'; |
||||
|
||||
// Components.
|
||||
import Button from 'flavours/glitch/components/button'; |
||||
import Icon from 'flavours/glitch/components/icon'; |
||||
|
||||
// Utils.
|
||||
import { maxChars } from 'flavours/glitch/util/initial_state'; |
||||
|
||||
// Messages.
|
||||
const messages = defineMessages({ |
||||
publish: { |
||||
defaultMessage: 'Toot', |
||||
id: 'compose_form.publish', |
||||
}, |
||||
publishLoud: { |
||||
defaultMessage: '{publish}!', |
||||
id: 'compose_form.publish_loud', |
||||
}, |
||||
}); |
||||
|
||||
// The component.
|
||||
export default function ComposerPublisher ({ |
||||
countText, |
||||
disabled, |
||||
intl, |
||||
onSecondarySubmit, |
||||
onSubmit, |
||||
privacy, |
||||
sideArm, |
||||
}) { |
||||
const diff = maxChars - length(countText || ''); |
||||
const computedClass = classNames('composer--publisher', { |
||||
disabled: disabled || diff < 0, |
||||
over: diff < 0, |
||||
}); |
||||
|
||||
// The result.
|
||||
return ( |
||||
<div className={computedClass}> |
||||
<span className='count'>{diff}</span> |
||||
{sideArm && sideArm !== 'none' ? ( |
||||
<Button |
||||
className='side_arm' |
||||
disabled={disabled || diff < 0} |
||||
onClick={onSecondarySubmit} |
||||
style={{ padding: null }} |
||||
text={ |
||||
<span> |
||||
<Icon |
||||
icon={{ |
||||
public: 'globe', |
||||
unlisted: 'unlock', |
||||
private: 'lock', |
||||
direct: 'envelope', |
||||
}[sideArm]} |
||||
/> |
||||
</span> |
||||
} |
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`} |
||||
/> |
||||
) : null} |
||||
<Button |
||||
className='primary' |
||||
text={function () { |
||||
switch (true) { |
||||
case !!sideArm && sideArm !== 'none': |
||||
case privacy === 'direct': |
||||
case privacy === 'private': |
||||
return ( |
||||
<span> |
||||
<Icon |
||||
icon={{ |
||||
direct: 'envelope', |
||||
private: 'lock', |
||||
public: 'globe', |
||||
unlisted: 'unlock', |
||||
}[privacy]} |
||||
/> |
||||
{' '} |
||||
<FormattedMessage {...messages.publish} /> |
||||
</span> |
||||
); |
||||
case privacy === 'public': |
||||
return ( |
||||
<span> |
||||
<FormattedMessage |
||||
{...messages.publishLoud} |
||||
values={{ publish: <FormattedMessage {...messages.publish} /> }} |
||||
/> |
||||
</span> |
||||
); |
||||
default: |
||||
return <span><FormattedMessage {...messages.publish} /></span>; |
||||
} |
||||
}()} |
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`} |
||||
onClick={onSubmit} |
||||
disabled={disabled || diff < 0} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
// Props.
|
||||
ComposerPublisher.propTypes = { |
||||
countText: PropTypes.string, |
||||
disabled: PropTypes.bool, |
||||
intl: PropTypes.object.isRequired, |
||||
onSecondarySubmit: PropTypes.func, |
||||
onSubmit: PropTypes.func, |
||||
privacy: PropTypes.oneOf(['direct', 'private', 'unlisted', 'public']), |
||||
sideArm: PropTypes.oneOf(['none', 'direct', 'private', 'unlisted', 'public']), |
||||
}; |
Loading…
Reference in new issue