diff options
Diffstat (limited to 'app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js')
-rw-r--r-- | app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js | 133 |
1 files changed, 0 insertions, 133 deletions
diff --git a/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js b/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js deleted file mode 100644 index ac7863ed3..000000000 --- a/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import Toggle from 'react-toggle'; -import AsyncSelect from 'react-select/async'; -import { NonceProvider } from 'react-select'; -import SettingToggle from '../../notifications/components/setting_toggle'; - -const messages = defineMessages({ - placeholder: { id: 'hashtag.column_settings.select.placeholder', defaultMessage: 'Enter hashtags…' }, - noOptions: { id: 'hashtag.column_settings.select.no_options_message', defaultMessage: 'No suggestions found' }, -}); - -export default @injectIntl -class ColumnSettings extends React.PureComponent { - - static propTypes = { - settings: ImmutablePropTypes.map.isRequired, - onChange: PropTypes.func.isRequired, - onLoad: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - state = { - open: this.hasTags(), - }; - - hasTags () { - return ['all', 'any', 'none'].map(mode => this.tags(mode).length > 0).includes(true); - } - - tags (mode) { - let tags = this.props.settings.getIn(['tags', mode]) || []; - - if (tags.toJS) { - return tags.toJS(); - } else { - return tags; - } - } - - onSelect = mode => value => { - const oldValue = this.tags(mode); - - // Prevent changes that add more than 4 tags, but allow removing - // tags that were already added before - if ((value.length > 4) && !(value < oldValue)) { - return; - } - - this.props.onChange(['tags', mode], value); - }; - - onToggle = () => { - if (this.state.open && this.hasTags()) { - this.props.onChange('tags', {}); - } - - this.setState({ open: !this.state.open }); - }; - - noOptionsMessage = () => this.props.intl.formatMessage(messages.noOptions); - - modeSelect (mode) { - return ( - <div className='column-settings__row'> - <span className='column-settings__section'> - {this.modeLabel(mode)} - </span> - - <NonceProvider nonce={document.querySelector('meta[name=style-nonce]').content} cacheKey='tags'> - <AsyncSelect - isMulti - autoFocus - value={this.tags(mode)} - onChange={this.onSelect(mode)} - loadOptions={this.props.onLoad} - className='column-select__container' - classNamePrefix='column-select' - name='tags' - placeholder={this.props.intl.formatMessage(messages.placeholder)} - noOptionsMessage={this.noOptionsMessage} - /> - </NonceProvider> - </div> - ); - } - - modeLabel (mode) { - switch(mode) { - case 'any': - return <FormattedMessage id='hashtag.column_settings.tag_mode.any' defaultMessage='Any of these' />; - case 'all': - return <FormattedMessage id='hashtag.column_settings.tag_mode.all' defaultMessage='All of these' />; - case 'none': - return <FormattedMessage id='hashtag.column_settings.tag_mode.none' defaultMessage='None of these' />; - default: - return ''; - } - } - - render () { - const { settings, onChange } = this.props; - - return ( - <div> - <div className='column-settings__row'> - <div className='setting-toggle'> - <Toggle id='hashtag.column_settings.tag_toggle' onChange={this.onToggle} checked={this.state.open} /> - - <span className='setting-toggle__label'> - <FormattedMessage id='hashtag.column_settings.tag_toggle' defaultMessage='Include additional tags in this column' /> - </span> - </div> - </div> - - {this.state.open && ( - <div className='column-settings__hashtags'> - {this.modeSelect('any')} - {this.modeSelect('all')} - {this.modeSelect('none')} - </div> - )} - - <div className='column-settings__row'> - <SettingToggle settings={settings} settingPath={['local']} onChange={onChange} label={<FormattedMessage id='community.column_settings.local_only' defaultMessage='Local only' />} /> - </div> - </div> - ); - } - -} |