diff options
author | Surinna Curtis <ekiru.0@gmail.com> | 2017-07-12 00:50:50 -0500 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2017-07-12 02:14:17 -0700 |
commit | e53fbb4a09ef0b53236840352f3a800b76b2f961 (patch) | |
tree | 0484e75c0b8e4e29638138dcf703773e177274e3 /app/javascript/glitch | |
parent | 79d898ae0ad8c0e66bd63ec3e0904e9e5e7894e8 (diff) |
local-only/compose advanced options tweaks.
Squashed commit of the following: commit b9877e37f72fdd8134936e1014033b07cb6c3671 Author: Surinna Curtis <ekiru.0@gmail.com> Date: Wed Jul 12 00:50:10 2017 -0500 account for the eye in the chars left count for local-only toots commit 56ebfa96542e16daa1986cc45e07974801ee12dc Author: Surinna Curtis <ekiru.0@gmail.com> Date: Wed Jul 12 00:21:02 2017 -0500 factor out an AdvancedOptionsToggle to avoid unnecessary re-renders commit 04cec44ab8744e4e0f52da488c9ec24b1b1422ef Author: Surinna Curtis <ekiru.0@gmail.com> Date: Wed Jul 12 00:20:24 2017 -0500 s/changeComposeAdvancedOption/toggleComposeAdvancedOption/g commit af5815dee750d1aa8b797a9305e5ab3ce6774e3f Author: Surinna Curtis <ekiru.0@gmail.com> Date: Tue Jul 11 23:55:19 2017 -0500 clicking anywhere on the whole advanced option toggles
Diffstat (limited to 'app/javascript/glitch')
-rw-r--r-- | app/javascript/glitch/components/compose/advanced_options.js | 51 | ||||
-rw-r--r-- | app/javascript/glitch/containers/compose/advanced_options.js | 4 |
2 files changed, 39 insertions, 16 deletions
diff --git a/app/javascript/glitch/components/compose/advanced_options.js b/app/javascript/glitch/components/compose/advanced_options.js index 0e72bd053..0d22f2546 100644 --- a/app/javascript/glitch/components/compose/advanced_options.js +++ b/app/javascript/glitch/components/compose/advanced_options.js @@ -19,6 +19,35 @@ const iconStyle = { lineHeight: '27px', }; +class AdvancedOptionToggle extends React.PureComponent { + static PropTypes = { + onChange: PropTypes.func.isRequired, + active: PropTypes.bool.isRequired, + key: PropTypes.string.isRequired, + shortText: PropTypes.string.isRequired, + longText: PropTypes.string.isRequired, + } + + onToggle = () => { + this.props.onChange(this.props.name); + } + + render() { + const { active, shortText, longText } = this.props; + return ( + <div role='button' className='advanced-options-dropdown__option' onClick={this.onToggle}> + <div className='advanced-options-dropdown__option__toggle'> + <Toggle checked={active} onChange={this.onToggle} /> + </div> + <div className='advanced-options-dropdown__option__content'> + <strong>{shortText}</strong> + {longText} + </div> + </div> + ); + } +} + @injectIntl export default class ComposeAdvancedOptions extends React.PureComponent { @@ -60,10 +89,6 @@ export default class ComposeAdvancedOptions extends React.PureComponent { this.props.onChange(option); } - toggleHandler(option) { - return () => this.props.onChange(option); - } - setRef = (c) => { this.node = c; } @@ -78,17 +103,15 @@ export default class ComposeAdvancedOptions extends React.PureComponent { const anyEnabled = values.some((enabled) => enabled); const optionElems = options.map((option) => { - const active = values.get(option.key); return ( - <div role='button' className='advanced-options-dropdown__option' key={option.key} > - <div className='advanced-options-dropdown__option__toggle'> - <Toggle checked={active} onChange={this.toggleHandler(option.key)} /> - </div> - <div className='advanced-options-dropdown__option__content'> - <strong>{intl.formatMessage(option.shortText)}</strong> - {intl.formatMessage(option.longText)} - </div> - </div> + <AdvancedOptionToggle + onChange={this.props.onChange} + active={values.get(option.key)} + key={option.key} + name={option.key} + shortText={intl.formatMessage(option.shortText)} + longText={intl.formatMessage(option.longText)} + /> ); }); diff --git a/app/javascript/glitch/containers/compose/advanced_options.js b/app/javascript/glitch/containers/compose/advanced_options.js index f8b7354ff..92b989052 100644 --- a/app/javascript/glitch/containers/compose/advanced_options.js +++ b/app/javascript/glitch/containers/compose/advanced_options.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; // Mastodon imports // -import { changeComposeAdvancedOption } from '../../../mastodon/actions/compose'; +import { toggleComposeAdvancedOption } from '../../../mastodon/actions/compose'; // Our imports // import ComposeAdvancedOptions from '../../components/compose/advanced_options'; @@ -14,7 +14,7 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ onChange (option) { - dispatch(changeComposeAdvancedOption(option)); + dispatch(toggleComposeAdvancedOption(option)); }, }); |