about summary refs log tree commit diff
path: root/app/javascript/glitch
diff options
context:
space:
mode:
authorSurinna Curtis <ekiru.0@gmail.com>2017-07-12 00:50:50 -0500
committerkibigo! <marrus-sh@users.noreply.github.com>2017-07-12 02:14:17 -0700
commite53fbb4a09ef0b53236840352f3a800b76b2f961 (patch)
tree0484e75c0b8e4e29638138dcf703773e177274e3 /app/javascript/glitch
parent79d898ae0ad8c0e66bd63ec3e0904e9e5e7894e8 (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.js51
-rw-r--r--app/javascript/glitch/containers/compose/advanced_options.js4
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));
   },
 
 });