From a6d910eb88f2b328f07465ff7661d71dda29dd84 Mon Sep 17 00:00:00 2001 From: KMY Date: Mon, 21 Aug 2023 08:56:14 +0900 Subject: [PATCH] Change antenna accounts and domains to radio selection --- .../components/radio_panel.jsx | 47 +++++++ .../features/antenna_setting/index.jsx | 49 ++++--- .../styles/mastodon/components.scss | 124 ++++++++++++++++++ 3 files changed, 204 insertions(+), 16 deletions(-) create mode 100644 app/javascript/mastodon/features/antenna_setting/components/radio_panel.jsx diff --git a/app/javascript/mastodon/features/antenna_setting/components/radio_panel.jsx b/app/javascript/mastodon/features/antenna_setting/components/radio_panel.jsx new file mode 100644 index 0000000000..64f7db0660 --- /dev/null +++ b/app/javascript/mastodon/features/antenna_setting/components/radio_panel.jsx @@ -0,0 +1,47 @@ +import PropTypes from 'prop-types'; +import { PureComponent } from 'react'; + +import { injectIntl } from 'react-intl'; + +import classNames from 'classnames'; + + +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { connect } from 'react-redux'; + +class RadioPanel extends PureComponent { + + static propTypes = { + values: ImmutablePropTypes.list.isRequired, + value: PropTypes.string.isRequired, + intl: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + }; + + handleChange = e => { + const value = e.currentTarget.getAttribute('data-value'); + console.dir(value); + + if (value !== this.props.value.get('value')) { + this.props.onChange(value); + } + }; + + render () { + const { values, value } = this.props; + + return ( +
+ {values.map((val) => ( +
+ {val.get('label')} +
+ ))} +
+ ); + } + +} + +export default connect()(injectIntl(RadioPanel)); diff --git a/app/javascript/mastodon/features/antenna_setting/index.jsx b/app/javascript/mastodon/features/antenna_setting/index.jsx index f98abb6409..2d137457e8 100644 --- a/app/javascript/mastodon/features/antenna_setting/index.jsx +++ b/app/javascript/mastodon/features/antenna_setting/index.jsx @@ -5,7 +5,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Helmet } from 'react-helmet'; -import { List as ImmutableList } from 'immutable'; +import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; @@ -23,6 +23,7 @@ import { Icon } from 'mastodon/components/icon'; import { LoadingIndicator } from 'mastodon/components/loading_indicator'; import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error'; +import RadioPanel from './components/radio_panel'; import TextList from './components/text_list'; const messages = defineMessages({ @@ -35,6 +36,8 @@ const messages = defineMessages({ addKeywordLabel: { id: 'antennas.add_keyword_placeholder', defaultMessage: 'New keyword' }, addDomainTitle: { id: 'antennas.add_domain', defaultMessage: 'Add domain' }, addKeywordTitle: { id: 'antennas.add_keyword', defaultMessage: 'Add keyword' }, + accounts: { id: 'antennas.accounts', defaultMessage: '{count} accounts' }, + domains: { id: 'antennas.domains', defaultMessage: '{count} domains' }, }); const mapStateToProps = (state, props) => ({ @@ -65,6 +68,7 @@ class AntennaSetting extends PureComponent { state = { domainName: '', keywordName: '', + rangeRadioValue: null, }; handlePin = () => { @@ -183,6 +187,8 @@ class AntennaSetting extends PureComponent { noOptionsMessage = () => this.props.intl.formatMessage(messages.noOptions); + onRangeRadioChanged = (value) => this.setState({ rangeRadioValue: value }); + onDomainNameChanged = (value) => this.setState({ domainName: value }); onDomainAdd = () => { @@ -255,6 +261,13 @@ class AntennaSetting extends PureComponent { ); } + const rangeRadioValues = ImmutableList([ + ImmutableMap({ value: 'accounts', label: intl.formatMessage(messages.accounts, { count: antenna.get('accounts_count') }) }), + ImmutableMap({ value: 'domains', label: intl.formatMessage(messages.domains, { count: antenna.get('domains_count') }) }), + ]); + const rangeRadioValue = ImmutableMap({ value: this.state.rangeRadioValue || (antenna.get('accounts_count') > 0 ? 'accounts' : 'domains') }); + const rangeRadioAlert = antenna.get(rangeRadioValue.get('value') === 'accounts' ? 'domains_count' : 'accounts_count') > 0; + const listOptions = lists.toArray().map((list) => { return { value: list[1].get('id'), label: list[1].get('title') } }); @@ -317,8 +330,8 @@ class AntennaSetting extends PureComponent { options={listOptions} noOptionsMessage={this.noOptionsMessage} onChange={this.onSelect} - className='column-select__container' - classNamePrefix='column-select' + className='column-content-select__container' + classNamePrefix='column-content-select' name='lists' placeholder={this.props.intl.formatMessage(messages.placeholder)} defaultOptions @@ -329,20 +342,24 @@ class AntennaSetting extends PureComponent { {!isStl && ( <> -

-