From 924ffe81d477a8cf890c8117efb94b908760bccc Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 23 Dec 2017 22:16:45 -0800 Subject: WIPgit status Refactor; ed. --- .../flavours/glitch/features/composer/index.js | 440 +++++++++++++++++++++ .../features/composer/options/dropdown/index.js | 243 ++++++++++++ .../composer/options/dropdown/item/index.js | 126 ++++++ .../glitch/features/composer/options/index.js | 321 +++++++++++++++ .../glitch/features/composer/publisher/index.js | 119 ++++++ .../glitch/features/composer/reply/index.js | 106 +++++ .../glitch/features/composer/spoiler/index.js | 92 +++++ .../glitch/features/composer/textarea/index.js | 297 ++++++++++++++ .../composer/textarea/suggestions/index.js | 41 ++ .../composer/textarea/suggestions/item/index.js | 101 +++++ .../glitch/features/composer/upload_form/index.js | 54 +++ .../features/composer/upload_form/item/index.js | 176 +++++++++ .../composer/upload_form/progress/index.js | 52 +++ .../glitch/features/composer/warning/index.js | 54 +++ 14 files changed, 2222 insertions(+) create mode 100644 app/javascript/flavours/glitch/features/composer/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/options/dropdown/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/options/dropdown/item/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/options/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/publisher/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/reply/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/spoiler/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/textarea/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/upload_form/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/upload_form/item/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/upload_form/progress/index.js create mode 100644 app/javascript/flavours/glitch/features/composer/warning/index.js (limited to 'app/javascript/flavours/glitch/features/composer') diff --git a/app/javascript/flavours/glitch/features/composer/index.js b/app/javascript/flavours/glitch/features/composer/index.js new file mode 100644 index 000000000..25c2622d8 --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/index.js @@ -0,0 +1,440 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { injectIntl } from 'react-intl'; +import { connect } from 'react-redux'; +import { withRouter } from 'react-router'; + +// Actions. +import { + cancelReplyCompose, + changeCompose, + changeComposeSensitivity, + changeComposeSpoilerText, + changeComposeSpoilerness, + changeComposeVisibility, + changeUploadCompose, + clearComposeSuggestions, + fetchComposeSuggestions, + insertEmojiCompose, + selectComposeSuggestion, + submitCompose, + toggleComposeAdvancedOption, + undoUploadCompose, + uploadCompose, +} from 'flavours/glitch/actions/compose'; +import { + closeModal, + openModal, +} from 'flavours/glitch/actions/modal'; + +// Components. +import ComposerOptions from './options'; +import ComposerPublisher from './publisher'; +import ComposerReply from './reply'; +import ComposerSpoiler from './spoiler'; +import ComposerTextarea from './textarea'; +import ComposerUploadForm from './upload_form'; +import ComposerWarning from './warning'; + +// Utils. +import { countableText } from 'flavours/glitch/util/counter'; +import { me } from 'flavours/glitch/util/initial_state'; +import { isMobile } from 'flavours/glitch/util/is_mobile'; +import { assignHandlers } from 'flavours/glitch/util/react_helpers'; +import { mergeProps } from 'flavours/glitch/util/redux_helpers'; + +// State mapping. +function mapStateToProps (state) { + const inReplyTo = state.getIn(['compose', 'in_reply_to']); + return { + acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray().join(','), + amUnlocked: !state.getIn(['accounts', me, 'locked']), + doNotFederate: state.getIn(['compose', 'advanced_options', 'do_not_federate']), + focusDate: state.getIn(['compose', 'focusDate']), + isSubmitting: state.getIn(['compose', 'is_submitting']), + isUploading: state.getIn(['compose', 'is_uploading']), + media: state.getIn(['compose', 'media_attachments']), + preselectDate: state.getIn(['compose', 'preselectDate']), + privacy: state.getIn(['compose', 'privacy']), + progress: state.getIn(['compose', 'progress']), + replyAccount: inReplyTo ? state.getIn(['accounts', state.getIn(['statuses', inReplyTo, 'account'])]) : null, + replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null, + resetFileKey: state.getIn(['compose', 'resetFileKey']), + sideArm: state.getIn(['local_settings', 'side_arm']), + sensitive: state.getIn(['compose', 'sensitive']), + showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), + spoiler: state.getIn(['compose', 'spoiler']), + spoilerText: state.getIn(['compose', 'spoiler_text']), + suggestionToken: state.getIn(['compose', 'suggestion_token']), + suggestions: state.getIn(['compose', 'suggestions']), + text: state.getIn(['compose', 'text']), + }; +}; + +// Dispatch mapping. +const mapDispatchToProps = dispatch => ({ + cancelReply () { + dispatch(cancelReplyCompose()); + }, + changeDescription (mediaId, description) { + dispatch(changeUploadCompose(mediaId, description)); + }, + changeSensitivity () { + dispatch(changeComposeSensitivity()); + }, + changeSpoilerText (checked) { + dispatch(changeComposeSpoilerText(checked)); + }, + changeSpoilerness () { + dispatch(changeComposeSpoilerness()); + }, + changeText (text) { + dispatch(changeCompose(text)); + }, + changeVisibility (value) { + dispatch(changeComposeVisibility(value)); + }, + clearSuggestions () { + dispatch(clearComposeSuggestions()); + }, + closeModal () { + dispatch(closeModal()); + }, + fetchSuggestions (token) { + dispatch(fetchComposeSuggestions(token)); + }, + insertEmoji (position, data) { + dispatch(insertEmojiCompose(position, data)); + }, + openActionsModal (data) { + dispatch(openModal('ACTIONS', data)); + }, + openDoodleModal () { + dispatch(openModal('DOODLE', { noEsc: true })); + }, + selectSuggestion (position, token, accountId) { + dispatch(selectComposeSuggestion(position, token, accountId)); + }, + submit () { + dispatch(submitCompose()); + }, + toggleAdvancedOption (option) { + dispatch(toggleComposeAdvancedOption(option)); + }, + undoUpload (mediaId) { + dispatch(undoUploadCompose(mediaId)); + }, + upload (files) { + dispatch(uploadCompose(files)); + }, +}); + +// Handlers. +const handlers = { + + // Changes the text value of the spoiler. + changeSpoiler ({ target: { value } }) { + const { dispatch: { changeSpoilerText } } = this.props; + if (changeSpoilerText) { + changeSpoilerText(value); + } + }, + + // Inserts an emoji at the caret. + emoji (data) { + const { textarea: { selectionStart } } = this; + const { dispatch: { insertEmoji } } = this.props; + this.caretPos = selectionStart + data.native.length + 1; + if (insertEmoji) { + insertEmoji(selectionStart, data); + } + }, + + // Handles the secondary submit button. + secondarySubmit () { + const { submit } = this.handlers; + const { + dispatch: { changeVisibility }, + side_arm, + } = this.props; + if (changeVisibility) { + changeVisibility(side_arm); + } + submit(); + }, + + // Selects a suggestion from the autofill. + select (tokenStart, token, value) { + const { dispatch: { selectSuggestion } } = this.props; + this.caretPos = null; + if (selectSuggestion) { + selectSuggestion(tokenStart, token, value); + } + }, + + // Submits the status. + submit () { + const { textarea: { value } } = this; + const { + dispatch: { + changeText, + submit, + }, + state: { text }, + } = this.props; + + // If something changes inside the textarea, then we update the + // state before submitting. + if (changeText && text !== value) { + changeText(value); + } + + // Submits the status. + if (submit) { + submit(); + } + }, + + // Sets a reference to the textarea. + refTextarea ({ textarea }) { + this.textarea = textarea; + }, +}; + +// The component. +@injectIntl +@connect(mapStateToProps, mapDispatchToProps, mergeProps) +export default class Composer extends React.Component { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + + // Instance variables. + this.caretPos = null; + this.textarea = null; + } + + // If this is the update where we've finished uploading, + // save the last caret position so we can restore it below! + componentWillReceiveProps (nextProps) { + const { textarea: { selectionStart } } = this; + const { state: { isUploading } } = this.props; + if (isUploading && !nextProps.state.isUploading) { + this.caretPos = selectionStart; + } + } + + // This statement does several things: + // - If we're beginning a reply, and, + // - Replying to zero or one users, places the cursor at the end + // of the textbox. + // - Replying to more than one user, selects any usernames past + // the first; this provides a convenient shortcut to drop + // everyone else from the conversation. + // - If we've just finished uploading an image, and have a saved + // caret position, restores the cursor to that position after the + // text changes. + componentDidUpdate (prevProps) { + const { + caretPos, + textarea, + } = this; + const { + state: { + focusDate, + isUploading, + isSubmitting, + preselectDate, + text, + }, + } = this.props; + let selectionEnd, selectionStart; + + // Caret/selection handling. + if (focusDate !== prevProps.state.focusDate || (prevProps.state.isUploading && !isUploading && !isNaN(caretPos) && caretPos !== null)) { + switch (true) { + case preselectDate !== prevProps.state.preselectDate: + selectionStart = text.search(/\s/) + 1; + selectionEnd = text.length; + break; + case !isNaN(caretPos) && caretPos !== null: + selectionStart = selectionEnd = caretPos; + break; + default: + selectionStart = selectionEnd = text.length; + } + textarea.setSelectionRange(selectionStart, selectionEnd); + textarea.focus(); + + // Refocuses the textarea after submitting. + } else if (prevProps.state.isSubmitting && !isSubmitting) { + textarea.focus(); + } + } + + render () { + const { + changeSpoiler, + emoji, + secondarySubmit, + select, + submit, + refTextarea, + } = this.handlers; + const { history } = this.context; + const { + dispatch: { + cancelReply, + changeDescription, + changeSensitivity, + changeText, + changeVisibility, + clearSuggestions, + closeModal, + fetchSuggestions, + openActionsModal, + openDoodleModal, + toggleAdvancedOption, + undoUpload, + upload, + }, + intl, + state: { + acceptContentTypes, + amUnlocked, + doNotFederate, + isSubmitting, + isUploading, + media, + privacy, + progress, + replyAccount, + replyContent, + resetFileKey, + sensitive, + showSearch, + sideArm, + spoiler, + spoilerText, + suggestions, + text, + }, + } = this.props; + + return ( +
+
+ ); + } + +} + +// Context +Composer.contextTypes = { + history: PropTypes.object, +} + +// Props. +Composer.propTypes = { + dispatch: PropTypes.objectOf(PropTypes.func).isRequired, + intl: PropTypes.object.isRequired, + state: PropTypes.shape({ + acceptContentTypes: PropTypes.string, + amUnlocked: PropTypes.bool, + doNotFederate: PropTypes.bool, + focusDate: PropTypes.instanceOf(Date), + isSubmitting: PropTypes.bool, + isUploading: PropTypes.bool, + media: PropTypes.list, + preselectDate: PropTypes.instanceOf(Date), + privacy: PropTypes.string, + progress: PropTypes.number, + replyAccount: ImmutablePropTypes.map, + replyContent: PropTypes.string, + resetFileKey: PropTypes.string, + sideArm: PropTypes.string, + sensitive: PropTypes.bool, + showSearch: PropTypes.bool, + spoiler: PropTypes.bool, + spoilerText: PropTypes.string, + suggestionToken: PropTypes.string, + suggestions: ImmutablePropTypes.list, + text: PropTypes.string, + }).isRequired, +}; diff --git a/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js b/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js new file mode 100644 index 000000000..0f304bc88 --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js @@ -0,0 +1,243 @@ +// Package imports. +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import spring from 'react-motion/lib/spring'; +import Overlay from 'react-overlays/lib/Overlay'; + +// Components. +import IconButton from 'flavours/glitch/components/icon_button'; +import ComposerOptionsDropdownItem from './item'; + +// Utils. +import { withPassive } from 'flavours/glitch/util/dom_helpers'; +import { isUserTouching } from 'flavours/glitch/util/is_mobile'; +import Motion from 'flavours/glitch/util/optional_motion'; +import { assignHandlers } from 'flavours/glitch/util/react_helpers'; + +// We'll use this to define our various transitions. +const springMotion = spring(1, { + damping: 35, + stiffness: 400, +}); + +// Handlers. +const handlers = { + + // Closes the dropdown. + close () { + this.setState({ open: false }); + }, + + // When the document is clicked elsewhere, we close the dropdown. + documentClick ({ target }) { + const { node } = this; + const { onClose } = this.props; + if (onClose && node && !node.contains(target)) { + onClose(); + } + }, + + // The enter key toggles the dropdown's open state, and the escape + // key closes it. + keyDown ({ key }) { + const { + close, + toggle, + } = this.handlers; + switch (key) { + case 'Enter': + toggle(); + break; + case 'Escape': + close(); + break; + } + }, + + // Toggles opening and closing the dropdown. + toggle () { + const { + items, + onChange, + onModalClose, + onModalOpen, + value, + } = this.props; + const { open } = this.state; + + // If this is a touch device, we open a modal instead of the + // dropdown. + if (onModalClose && isUserTouching()) { + if (open) { + onModalClose() + } else if (onChange && onModalOpen) { + onModalOpen({ + actions: items.map( + ({ + name, + ...rest + }) => ({ + ...rest, + active: value && name === value, + onClick (e) { + e.preventDefault(); // Prevents focus from changing + onModalClose(); + onChange(name); + }, + }) + ), + }); + } + + // Otherwise, we just set our state to open. + } else { + this.setState({ open: !open }); + } + }, + + // Stores our node in `this.node`. + ref (node) { + this.node = node; + }, +}; + +// The component. +export default class ComposerOptionsDropdown extends React.PureComponent { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + this.state = { open: false }; + + // Instance variables. + this.node = null; + } + + // On mounting, we add our listeners. + componentDidMount () { + const { documentClick } = this.handlers; + document.addEventListener('click', documentClick, false); + document.addEventListener('touchend', documentClick, withPassive); + } + + // On unmounting, we remove our listeners. + componentWillUnmount () { + const { documentClick } = this.handlers; + document.removeEventListener('click', documentClick, false); + document.removeEventListener('touchend', documentClick, withPassive); + } + + // Rendering. + render () { + const { + close, + keyDown, + ref, + toggle, + } = this.handlers; + const { + active, + disabled, + title, + icon, + items, + onChange, + value, + } = this.props; + const { open } = this.state; + const computedClass = classNames('composer--options--dropdown', { + active, + open: open || active, + }); + + // The result. + return ( +
+ + + + {({ opacity, scaleX, scaleY }) => ( +
+ {items.map( + ({ + name, + ...rest + }) => ( + + ) + )} +
+ )} + + +
+ ); + } + +} + +// Props. +ComposerOptionsDropdown.propTypes = { + active: PropTypes.bool, + disabled: PropTypes.bool, + icon: PropTypes.string, + items: PropTypes.arrayOf(PropTypes.shape({ + icon: PropTypes.string, + meta: PropTypes.node, + name: PropTypes.string.isRequired, + on: PropTypes.bool, + text: PropTypes.node, + })).isRequired, + onChange: PropTypes.func, + onModalClose: PropTypes.func, + onModalOpen: PropTypes.func, + title: PropTypes.string, + value: PropTypes.string, +}; diff --git a/app/javascript/flavours/glitch/features/composer/options/dropdown/item/index.js b/app/javascript/flavours/glitch/features/composer/options/dropdown/item/index.js new file mode 100644 index 000000000..ca4ee393e --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/options/dropdown/item/index.js @@ -0,0 +1,126 @@ +// Package imports. +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import Toggle from 'react-toggle'; + +// Components. +import Icon from 'flavours/glitch/components/icon'; + +// Utils. +import { assignHandlers } from 'flavours/glitch/util/react_helpers'; + +// Handlers. +const handlers = { + + // This function activates the dropdown item. + activate (e) { + const { + name, + onChange, + onClose, + options: { on }, + } = this.props; + + // If the escape key was pressed, we close the dropdown. + if (e.key === 'Escape' && onClose) { + onClose(); + + // Otherwise, we both close the dropdown and change the value. + } else if (onChange && (!e.key || e.key === 'Enter')) { + e.preventDefault(); // Prevents change in focus on click + if ((on === null || typeof on === 'undefined') && onClose) { + onClose(); + } + onChange(name); + } + }, + +}; + +// The component. +export default class ComposerOptionsDropdownItem extends React.PureComponent { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + } + + // Rendering. + render () { + const { activate } = this.handlers; + const { + active, + options: { + icon, + meta, + on, + text, + }, + } = this.props; + const computedClass = classNames('composer--options--dropdown_item', { + active, + lengthy: meta, + 'toggled-off': !on && on !== null && typeof on !== 'undefined', + 'toggled-on': on, + 'with-icon': icon, + }); + + // The result. + return ( +
+ {function () { + + // We render a `` if we were provided an `on` + // property, and otherwise show an `` if available. + switch (true) { + case on !== null && typeof on !== 'undefined': + return ( + + ); + case !!icon: + return ( + + ); + default: + return null; + } + }()} + {meta ? ( +
+ {text} + {meta} +
+ ) :
{text}
} +
+ ); + } + +}; + +// Props. +ComposerOptionsDropdownItem.propTypes = { + active: PropTypes.bool, + name: PropTypes.string, + onChange: PropTypes.func, + onClose: PropTypes.func, + options: PropTypes.shape({ + icon: PropTypes.string, + meta: PropTypes.node, + on: PropTypes.bool, + text: PropTypes.node, + }), +}; diff --git a/app/javascript/flavours/glitch/features/composer/options/index.js b/app/javascript/flavours/glitch/features/composer/options/index.js new file mode 100644 index 000000000..ee633e865 --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/options/index.js @@ -0,0 +1,321 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import { + FormattedMessage, + defineMessages, +} from 'react-intl'; +import spring from 'react-motion/lib/spring'; + +// Components. +import IconButton from 'flavours/glitch/components/icon_button'; +import TextIconButton from 'flavours/glitch/components/text_icon_button'; +import Dropdown from './dropdown'; + +// Utils. +import Motion from 'flavours/glitch/util/optional_motion'; +import { + assignHandlers, + hiddenComponent, +} from 'flavours/glitch/util/react_helpers'; + +// Messages. +const messages = defineMessages({ + advanced_options_icon_title: { + defaultMessage: 'Advanced options', + id: 'advanced_options.icon_title', + }, + attach: { + defaultMessage: 'Attach...', + id: 'compose.attach', + }, + change_privacy: { + defaultMessage: 'Adjust status privacy', + id: 'privacy.change', + }, + direct_long: { + defaultMessage: 'Post to mentioned users only', + id: 'privacy.direct.long', + }, + direct_short: { + defaultMessage: 'Direct', + id: 'privacy.direct.short', + }, + doodle: { + defaultMessage: 'Draw something', + id: 'compose.attach.doodle', + }, + local_only_long: { + defaultMessage: 'Do not post to other instances', + id: 'advanced-options.local-only.long', + }, + local_only_short: { + defaultMessage: 'Local-only', + id: 'advanced-options.local-only.short', + }, + private_long: { + defaultMessage: 'Post to followers only', + id: 'privacy.private.long', + }, + private_short: { + defaultMessage: 'Followers-only', + id: 'privacy.private.short', + }, + public_long: { + defaultMessage: 'Post to public timelines', + id: 'privacy.public.long', + }, + public_short: { + defaultMessage: 'Public', + id: 'privacy.public.short', + }, + sensitive: { + defaultMessage: 'Mark media as sensitive', + id: 'compose_form.sensitive', + }, + spoiler: { + defaultMessage: 'Hide text behind warning', + id: 'compose_form.spoiler', + }, + unlisted_long: { + defaultMessage: 'Do not show in public timelines', + id: 'privacy.unlisted.long', + }, + unlisted_short: { + defaultMessage: 'Unlisted', + id: 'privacy.unlisted.short', + }, + upload: { + defaultMessage: 'Upload a file', + id: 'compose.attach.upload', + }, +}); + +// Handlers. +const handlers = { + + // Handles file selection. + changeFiles ({ target: { files } }) { + const { onUpload } = this.props; + if (files.length && onUpload) { + onUpload(files); + } + }, + + // Handles attachment clicks. + clickAttach (name) { + const { fileElement } = this; + const { onDoodleOpen } = this.props; + + // We switch over the name of the option. + switch (name) { + case 'upload': + if (fileElement) { + fileElement.click(); + } + return; + case 'doodle': + if (onDoodleOpen) { + onDoodleOpen(); + } + return; + } + }, + + // Handles a ref to the file input. + refFileElement (fileElement) { + this.fileElement = fileElement; + }, +}; + +// The component. +export default class ComposerOptions extends React.PureComponent { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + + // Instance variables. + this.fileElement = null; + } + + // Rendering. + render () { + const { + changeFiles, + clickAttach, + refFileElement, + } = this.handlers; + const { + acceptContentTypes, + disabled, + doNotFederate, + full, + hasMedia, + intl, + onChangeSensitivity, + onChangeVisibility, + onModalClose, + onModalOpen, + onToggleAdvancedOption, + privacy, + resetFileKey, + sensitive, + spoiler, + } = this.props; + + // We predefine our privacy items so that we can easily pick the + // dropdown icon later. + const privacyItems = { + direct: { + icon: 'envelope', + meta: , + name: 'direct', + text: , + }, + private: { + icon: 'lock', + meta: , + name: 'private', + text: , + }, + public: { + icon: 'globe', + meta: , + name: 'public', + text: , + }, + unlisted: { + icon: 'unlock-alt', + meta: , + name: 'unlisted', + text: , + }, + }; + + // The result. + return ( +
+ + , + }, + { + icon: 'paint-brush', + name: 'doodle', + text: , + }, + ]} + onChange={clickAttach} + onModalClose={onModalClose} + onModalOpen={onModalOpen} + title={messages.attach} + /> + + {({ scale }) => ( +
+ +
+ )} + +
+ + + , + name: 'do_not_federate', + on: doNotFederate, + text: , + }, + ]} + onChange={onToggleAdvancedOption} + onModalClose={onModalClose} + onModalOpen={onModalOpen} + title={intl.formatMessage(messages.advanced_options_icon_title)} + /> +
+ ); + } + +} + +// Props. +ComposerOptions.propTypes = { + acceptContentTypes: PropTypes.string, + disabled: PropTypes.bool, + doNotFederate: PropTypes.bool, + full: PropTypes.bool, + hasMedia: PropTypes.bool, + intl: PropTypes.object.isRequired, + onChangeSensitivity: PropTypes.func, + onChangeVisibility: PropTypes.func, + onDoodleOpen: PropTypes.func, + onModalClose: PropTypes.func, + onModalOpen: PropTypes.func, + onToggleAdvancedOption: PropTypes.func, + onUpload: PropTypes.func, + privacy: PropTypes.string, + resetFileKey: PropTypes.string, + sensitive: PropTypes.bool, + spoiler: PropTypes.bool, +}; diff --git a/app/javascript/flavours/glitch/features/composer/publisher/index.js b/app/javascript/flavours/glitch/features/composer/publisher/index.js new file mode 100644 index 000000000..85de80a9f --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/publisher/index.js @@ -0,0 +1,119 @@ +// 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 ( +
+ {diff} + {sideArm && sideArm !== 'none' ? ( +
+ ); +} + +// 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']), +}; diff --git a/app/javascript/flavours/glitch/features/composer/reply/index.js b/app/javascript/flavours/glitch/features/composer/reply/index.js new file mode 100644 index 000000000..2823415d2 --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/reply/index.js @@ -0,0 +1,106 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages } from 'react-intl'; + +// Components. +import Avatar from 'flavours/glitch/components/avatar'; +import DisplayName from 'flavours/glitch/components/display_name'; +import IconButton from 'flavours/glitch/components/icon_button'; + +// Utils. +import { assignHandlers } from 'flavours/glitch/util/react_helpers'; +import { isRtl } from 'flavours/glitch/util/rtl'; + +// Messages. +const messages = defineMessages({ + cancel: { + defaultMessage: 'Cancel', + id: 'reply_indicator.cancel', + }, +}); + +// Handlers. +const handlers = { + + // Handles a click on the "close" button. + click () { + const { onCancel } = this.props; + if (onCancel) { + onCancel(); + } + }, + + // Handles a click on the status's account. + clickAccount () { + const { + account, + history, + } = this.props; + if (history) { + history.push(`/accounts/${account.get('id')}`); + } + }, +}; + +// The component. +export default class ComposerReply extends React.PureComponent { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + } + + // Rendering. + render () { + const { + click, + clickAccount, + } = this.handlers; + const { + account, + content, + intl, + } = this.props; + + // The result. + return ( +
+
+ + {account ? ( + + + + + ) : null} +
+
+
+ ); + } + +} + +ComposerReply.propTypes = { + account: ImmutablePropTypes.map, + content: PropTypes.string, + history: PropTypes.object, + intl: PropTypes.object.isRequired, + onCancel: PropTypes.func, +}; diff --git a/app/javascript/flavours/glitch/features/composer/spoiler/index.js b/app/javascript/flavours/glitch/features/composer/spoiler/index.js new file mode 100644 index 000000000..730ab2205 --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/spoiler/index.js @@ -0,0 +1,92 @@ +// Package imports. +import React from 'react'; +import PropTypes from 'prop-types'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +// Components. +import Collapsable from 'flavours/glitch/components/collapsable'; + +// 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. + keyDown ({ + ctrlKey, + keyCode, + metaKey, + }) { + const { onSubmit } = this.props; + + // We submit the status on control/meta + enter. + if (onSubmit && keyCode === 13 && (ctrlKey || metaKey)) { + onSubmit(); + } + }, +}; + +// The component. +export default class ComposerSpoiler extends React.PureComponent { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + } + + // Rendering. + render () { + const { keyDown } = this.handlers; + const { + hidden, + intl, + onChange, + text, + } = this.props; + + // The result. + return ( + + + + ); + } + +} + +// Props. +ComposerSpoiler.propTypes = { + hidden: PropTypes.bool, + intl: PropTypes.object.isRequired, + onChange: PropTypes.func, + onSubmit: PropTypes.func, + text: PropTypes.string, +}; diff --git a/app/javascript/flavours/glitch/features/composer/textarea/index.js b/app/javascript/flavours/glitch/features/composer/textarea/index.js new file mode 100644 index 000000000..ad0a35d7f --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/textarea/index.js @@ -0,0 +1,297 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { + defineMessages, + FormattedMessage, +} from 'react-intl'; +import Textarea from 'react-textarea-autosize'; + +// Components. +import EmojiPicker from 'flavours/glitch/features/emoji_picker'; +import ComposerTextareaSuggestions from './suggestions'; + +// Utils. +import { isRtl } from 'flavours/glitch/util/rtl'; +import { + assignHandlers, + hiddenComponent, +} from 'flavours/glitch/util/react_helpers'; + +// Messages. +const messages = defineMessages({ + placeholder: { + defaultMessage: 'What is on your mind?', + id: 'compose_form.placeholder', + }, +}); + +// Handlers. +const handlers = { + + // When blurring the textarea, suggestions are hidden. + blur () { + this.setState({ suggestionsHidden: true }); + }, + + // When the contents of the textarea change, we have to pull up new + // autosuggest suggestions if applicable, and also change the value + // of the textarea in our store. + change ({ + target: { + selectionStart, + value, + }, + }) { + const { + onChange, + onSuggestionsFetchRequested, + onSuggestionsClearRequested, + } = this.props; + const { lastToken } = this.state; + + // This gets the token at the caret location, if it begins with an + // `@` (mentions) or `:` (shortcodes). + const left = value.slice(0, selectionStart).search(/[^\s\u200B]+$/); + const right = value.slice(selectionStart).search(/[\s\u200B]/); + const token = function () { + switch (true) { + case left < 0 || /[@:]/.test(!value[left]): + return null; + case right < 0: + return value.slice(left); + default: + return value.slice(left, right + selectionStart).trim().toLowerCase(); + } + }(); + + // We only request suggestions for tokens which are at least 3 + // characters long. + if (onSuggestionsFetchRequested && token && token.length >= 3) { + if (lastToken !== token) { + this.setState({ + lastToken: token, + selectedSuggestion: 0, + tokenStart: left, + }); + onSuggestionsFetchRequested(token); + } + } else { + this.setState({ lastToken: null }); + if (onSuggestionsClearRequested) { + onSuggestionsClearRequested(); + } + } + + // Updates the value of the textarea. + if (onChange) { + onChange(value); + } + }, + + // Handles a click on an autosuggestion. + clickSuggestion (index) { + const { textarea } = this; + const { + onSuggestionSelected, + suggestions, + } = this.props; + const { + lastToken, + tokenStart, + } = this.state; + onSuggestionSelected(tokenStart, lastToken, suggestions.get(index)); + textarea.focus(); + }, + + // Handles a keypress. If the autosuggestions are visible, we need + // to allow keypresses to navigate and sleect them. + keyDown (e) { + const { + disabled, + onSubmit, + onSuggestionSelected, + suggestions, + } = this.props; + const { + lastToken, + suggestionsHidden, + selectedSuggestion, + tokenStart, + } = this.state; + + // Keypresses do nothing if the composer is disabled. + if (disabled) { + e.preventDefault(); + return; + } + + // Switches over the pressed key. + switch(e.key) { + + // On arrow down, we pick the next suggestion. + case 'ArrowDown': + if (suggestions && suggestions.size > 0 && !suggestionsHidden) { + e.preventDefault(); + this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) }); + } + return; + + // On arrow up, we pick the previous suggestion. + case 'ArrowUp': + if (suggestions && suggestions.size > 0 && !suggestionsHidden) { + e.preventDefault(); + this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) }); + } + return; + + // On enter or tab, we select the suggestion. + case 'Enter': + case 'Tab': + if (onSuggestionSelected && lastToken !== null && suggestions && suggestions.size > 0 && !suggestionsHidden) { + e.preventDefault(); + e.stopPropagation(); + onSuggestionSelected(tokenStart, lastToken, suggestions.get(selectedSuggestion)); + } + return; + } + + // We submit the status on control/meta + enter. + if (onSubmit && e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { + onSubmit(); + } + }, + + // When the escape key is released, we either close the suggestions + // window or focus the UI. + keyUp ({ key }) { + const { suggestionsHidden } = this.state; + if (key === 'Escape') { + if (!suggestionsHidden) { + this.setState({ suggestionsHidden: true }); + } else { + document.querySelector('.ui').parentElement.focus(); + } + } + }, + + // Handles the pasting of images into the composer. + paste (e) { + const { onPaste } = this.props; + let d; + if (onPaste && (d = e.clipboardData) && (d = d.files).length === 1) { + onPaste(d); + e.preventDefault(); + } + }, + + // Saves a reference to the textarea. + refTextarea (textarea) { + this.textarea = textarea; + }, +}; + +// The component. +export default class ComposerTextarea extends React.Component { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + this.state = { + suggestionsHidden: false, + selectedSuggestion: 0, + lastToken: null, + tokenStart: 0, + }; + + // Instance variables. + this.textarea = null; + } + + // When we receive new suggestions, we unhide the suggestions window + // if we didn't have any suggestions before. + componentWillReceiveProps (nextProps) { + const { suggestions } = this.props; + const { suggestionsHidden } = this.state; + if (nextProps.suggestions && nextProps.suggestions !== suggestions && nextProps.suggestions.size > 0 && suggestionsHidden) { + this.setState({ suggestionsHidden: false }); + } + } + + // Rendering. + render () { + const { + blur, + change, + clickSuggestion, + keyDown, + keyUp, + paste, + refTextarea, + } = this.handlers; + const { + autoFocus, + disabled, + intl, + onPickEmoji, + suggestions, + value, + } = this.props; + const { + selectedSuggestion, + suggestionsHidden, + } = this.state; + + // The result. + return ( +
+