You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

214 lines
8.6 KiB

  1. import React from 'react';
  2. import CharacterCounter from './character_counter';
  3. import Button from '../../../components/button';
  4. import ImmutablePropTypes from 'react-immutable-proptypes';
  5. import PropTypes from 'prop-types';
  6. import ReplyIndicatorContainer from '../containers/reply_indicator_container';
  7. import AutosuggestTextarea from '../../../components/autosuggest_textarea';
  8. import UploadButtonContainer from '../containers/upload_button_container';
  9. import { defineMessages, injectIntl } from 'react-intl';
  10. import Collapsable from '../../../components/collapsable';
  11. import SpoilerButtonContainer from '../containers/spoiler_button_container';
  12. import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
  13. import SensitiveButtonContainer from '../containers/sensitive_button_container';
  14. import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
  15. import UploadFormContainer from '../containers/upload_form_container';
  16. import WarningContainer from '../containers/warning_container';
  17. import { isMobile } from '../../../is_mobile';
  18. import ImmutablePureComponent from 'react-immutable-pure-component';
  19. import { length } from 'stringz';
  20. import { countableText } from '../util/counter';
  21. const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
  22. const messages = defineMessages({
  23. placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
  24. spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
  25. publish: { id: 'compose_form.publish', defaultMessage: 'Toot' },
  26. publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
  27. });
  28. @injectIntl
  29. export default class ComposeForm extends ImmutablePureComponent {
  30. static propTypes = {
  31. intl: PropTypes.object.isRequired,
  32. text: PropTypes.string.isRequired,
  33. suggestion_token: PropTypes.string,
  34. suggestions: ImmutablePropTypes.list,
  35. spoiler: PropTypes.bool,
  36. privacy: PropTypes.string,
  37. spoiler_text: PropTypes.string,
  38. focusDate: PropTypes.instanceOf(Date),
  39. caretPosition: PropTypes.number,
  40. preselectDate: PropTypes.instanceOf(Date),
  41. is_submitting: PropTypes.bool,
  42. is_uploading: PropTypes.bool,
  43. onChange: PropTypes.func.isRequired,
  44. onSubmit: PropTypes.func.isRequired,
  45. onClearSuggestions: PropTypes.func.isRequired,
  46. onFetchSuggestions: PropTypes.func.isRequired,
  47. onSuggestionSelected: PropTypes.func.isRequired,
  48. onChangeSpoilerText: PropTypes.func.isRequired,
  49. onPaste: PropTypes.func.isRequired,
  50. onPickEmoji: PropTypes.func.isRequired,
  51. showSearch: PropTypes.bool,
  52. anyMedia: PropTypes.bool,
  53. };
  54. static defaultProps = {
  55. showSearch: false,
  56. };
  57. handleChange = (e) => {
  58. this.props.onChange(e.target.value);
  59. }
  60. handleKeyDown = (e) => {
  61. if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
  62. this.handleSubmit();
  63. }
  64. }
  65. handleSubmit = () => {
  66. if (this.props.text !== this.autosuggestTextarea.textarea.value) {
  67. // Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
  68. // Update the state to match the current text
  69. this.props.onChange(this.autosuggestTextarea.textarea.value);
  70. }
  71. // Submit disabled:
  72. const { is_submitting, is_uploading, anyMedia } = this.props;
  73. const fulltext = [this.props.spoiler_text, countableText(this.props.text)].join('');
  74. if (is_submitting || is_uploading || length(fulltext) > 500 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
  75. return;
  76. }
  77. this.props.onSubmit();
  78. }
  79. onSuggestionsClearRequested = () => {
  80. this.props.onClearSuggestions();
  81. }
  82. onSuggestionsFetchRequested = (token) => {
  83. this.props.onFetchSuggestions(token);
  84. }
  85. onSuggestionSelected = (tokenStart, token, value) => {
  86. this.props.onSuggestionSelected(tokenStart, token, value);
  87. }
  88. handleChangeSpoilerText = (e) => {
  89. this.props.onChangeSpoilerText(e.target.value);
  90. }
  91. componentDidUpdate (prevProps) {
  92. // This statement does several things:
  93. // - If we're beginning a reply, and,
  94. // - Replying to zero or one users, places the cursor at the end of the textbox.
  95. // - Replying to more than one user, selects any usernames past the first;
  96. // this provides a convenient shortcut to drop everyone else from the conversation.
  97. if (this.props.focusDate !== prevProps.focusDate) {
  98. let selectionEnd, selectionStart;
  99. if (this.props.preselectDate !== prevProps.preselectDate) {
  100. selectionEnd = this.props.text.length;
  101. selectionStart = this.props.text.search(/\s/) + 1;
  102. } else if (typeof this.props.caretPosition === 'number') {
  103. selectionStart = this.props.caretPosition;
  104. selectionEnd = this.props.caretPosition;
  105. } else {
  106. selectionEnd = this.props.text.length;
  107. selectionStart = selectionEnd;
  108. }
  109. this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd);
  110. this.autosuggestTextarea.textarea.focus();
  111. } else if(prevProps.is_submitting && !this.props.is_submitting) {
  112. this.autosuggestTextarea.textarea.focus();
  113. }
  114. }
  115. setAutosuggestTextarea = (c) => {
  116. this.autosuggestTextarea = c;
  117. }
  118. handleEmojiPick = (data) => {
  119. const { text } = this.props;
  120. const position = this.autosuggestTextarea.textarea.selectionStart;
  121. const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
  122. this.props.onPickEmoji(position, data, needsSpace);
  123. }
  124. render () {
  125. const { intl, onPaste, showSearch, anyMedia } = this.props;
  126. const disabled = this.props.is_submitting;
  127. const text = [this.props.spoiler_text, countableText(this.props.text)].join('');
  128. const disabledButton = disabled || this.props.is_uploading || length(text) > 500 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
  129. let publishText = '';
  130. if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
  131. publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
  132. } else {
  133. publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
  134. }
  135. return (
  136. <div className='compose-form'>
  137. <WarningContainer />
  138. <Collapsable isVisible={this.props.spoiler} fullHeight={50}>
  139. <div className='spoiler-input'>
  140. <label>
  141. <span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
  142. <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input' id='cw-spoiler-input' />
  143. </label>
  144. </div>
  145. </Collapsable>
  146. <ReplyIndicatorContainer />
  147. <div className='compose-form__autosuggest-wrapper'>
  148. <AutosuggestTextarea
  149. ref={this.setAutosuggestTextarea}
  150. placeholder={intl.formatMessage(messages.placeholder)}
  151. disabled={disabled}
  152. value={this.props.text}
  153. onChange={this.handleChange}
  154. suggestions={this.props.suggestions}
  155. onKeyDown={this.handleKeyDown}
  156. onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
  157. onSuggestionsClearRequested={this.onSuggestionsClearRequested}
  158. onSuggestionSelected={this.onSuggestionSelected}
  159. onPaste={onPaste}
  160. autoFocus={!showSearch && !isMobile(window.innerWidth)}
  161. />
  162. <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
  163. </div>
  164. <div className='compose-form__modifiers'>
  165. <UploadFormContainer />
  166. </div>
  167. <div className='compose-form__buttons-wrapper'>
  168. <div className='compose-form__buttons'>
  169. <UploadButtonContainer />
  170. <PrivacyDropdownContainer />
  171. <SensitiveButtonContainer />
  172. <SpoilerButtonContainer />
  173. </div>
  174. <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
  175. </div>
  176. <div className='compose-form__publish'>
  177. <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
  178. </div>
  179. </div>
  180. );
  181. }
  182. }