diff options
| -rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/compose_form.js | 51 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/features/composer/spoiler/index.js | 107 |
2 files changed, 38 insertions, 120 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index 10b51d920..fdc4401f6 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -7,7 +7,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; // Components. import ComposerOptions from '../../composer/options'; import ComposerPublisher from '../../composer/publisher'; -import ComposerSpoiler from '../../composer/spoiler'; import ComposerTextarea from '../../composer/textarea'; import ComposerUploadForm from '../../composer/upload_form'; import ComposerPollForm from '../../composer/poll_form'; @@ -23,6 +22,7 @@ const messages = defineMessages({ defaultMessage: 'At least one media attachment is lacking a description. Consider describing all media attachments for the visually impaired before sending your toot.' }, missingDescriptionConfirm: { id: 'confirmations.missing_media_description.confirm', defaultMessage: 'Send anyway' }, + spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' }, }); export default @injectIntl @@ -124,6 +124,25 @@ class ComposeForm extends ImmutablePureComponent { } } + handleKeyDown = ({ ctrlKey, keyCode, metaKey, altKey }) => { + // We submit the status on control/meta + enter. + if (keyCode === 13 && (ctrlKey || metaKey)) { + handleSubmit(); + } + + // Submit the status with secondary visibility on alt + enter. + if (keyCode === 13 && altKey) { + handleSecondarySubmit(); + } + } + + // When the escape key is released, we focus the UI. + handleKeyUp = ({ key }) => { + if (key === 'Escape') { + document.querySelector('.ui').parentElement.focus(); + } + } + // Submits the status. handleSubmit = () => { const { textarea: { value }, uploadForm } = this; @@ -181,7 +200,7 @@ class ComposeForm extends ImmutablePureComponent { // Sets a reference to the CW field. handleRefSpoilerText = (spoilerComponent) => { if (spoilerComponent) { - this.spoilerText = spoilerComponent.spoilerText; + this.spoilerText = spoilerComponent; } } @@ -260,14 +279,12 @@ class ComposeForm extends ImmutablePureComponent { render () { const { - handleChangeSpoiler, handleEmoji, handleSecondarySubmit, handleSelect, handleSubmit, handleRefUploadForm, handleRefTextarea, - handleRefSpoilerText, } = this; const { acceptContentTypes, @@ -317,15 +334,23 @@ class ComposeForm extends ImmutablePureComponent { <ReplyIndicatorContainer /> - <ComposerSpoiler - hidden={!spoiler} - intl={intl} - onChange={handleChangeSpoiler} - onSubmit={handleSubmit} - onSecondarySubmit={handleSecondarySubmit} - text={spoilerText} - ref={handleRefSpoilerText} - /> + <div className={`composer--spoiler ${spoiler ? 'composer--spoiler--visible' : ''}`}> + <label> + <span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span> + <input + id='glitch.composer.spoiler.input' + placeholder={intl.formatMessage(messages.spoiler_placeholder)} + value={spoilerText} + onChange={this.handleChangeSpoiler} + onKeyDown={this.handleKeyDown} + onKeyUp={this.handleKeyUp} + disabled={!spoiler} + type='text' + className='spoiler-input__input' + ref={this.handleRefSpoilerText} + /> + </label> + </div> <ComposerTextarea advancedOptions={advancedOptions} diff --git a/app/javascript/flavours/glitch/features/composer/spoiler/index.js b/app/javascript/flavours/glitch/features/composer/spoiler/index.js deleted file mode 100644 index e2f9c7021..000000000 --- a/app/javascript/flavours/glitch/features/composer/spoiler/index.js +++ /dev/null @@ -1,107 +0,0 @@ -// Package imports. -import React from 'react'; -import PropTypes from 'prop-types'; -import { defineMessages, FormattedMessage } from 'react-intl'; - -// Utils. -import { - assignHandlers, - hiddenComponent, -} from 'flavours/glitch/util/react_helpers'; - -// Messages. -const messages = defineMessages({ - placeholder: { - defaultMessage: 'Write your warning here', - id: 'compose_form.spoiler_placeholder', - }, -}); - -// Handlers. -const handlers = { - - // Handles a keypress. - handleKeyDown ({ - ctrlKey, - keyCode, - metaKey, - altKey, - }) { - const { onSubmit, onSecondarySubmit } = this.props; - - // We submit the status on control/meta + enter. - if (onSubmit && keyCode === 13 && (ctrlKey || metaKey)) { - onSubmit(); - } - - // Submit the status with secondary visibility on alt + enter. - if (onSecondarySubmit && keyCode === 13 && altKey) { - onSecondarySubmit(); - } - }, - - handleRefSpoilerText (spoilerText) { - this.spoilerText = spoilerText; - }, - - // When the escape key is released, we focus the UI. - handleKeyUp ({ key }) { - if (key === 'Escape') { - document.querySelector('.ui').parentElement.focus(); - } - }, -}; - -// The component. -export default class ComposerSpoiler extends React.PureComponent { - - // Constructor. - constructor (props) { - super(props); - assignHandlers(this, handlers); - } - - // Rendering. - render () { - const { handleKeyDown, handleKeyUp, handleRefSpoilerText } = this.handlers; - const { - hidden, - intl, - onChange, - text, - } = this.props; - - // The result. - return ( - <div className={`composer--spoiler ${hidden ? '' : 'composer--spoiler--visible'}`}> - <label> - <span {...hiddenComponent}> - <FormattedMessage {...messages.placeholder} /> - </span> - <input - id='glitch.composer.spoiler.input' - onChange={onChange} - onKeyDown={handleKeyDown} - onKeyUp={handleKeyUp} - placeholder={intl.formatMessage(messages.placeholder)} - type='text' - value={text} - ref={handleRefSpoilerText} - disabled={hidden} - /> - </label> - </div> - ); - } - -} - -// Props. -ComposerSpoiler.propTypes = { - hidden: PropTypes.bool, - intl: PropTypes.object.isRequired, - onChange: PropTypes.func, - onSubmit: PropTypes.func, - onSecondarySubmit: PropTypes.func, - text: PropTypes.string, -}; |