Move react-color into soapbox_config, reduce initial bundle size, fixes #427

app/soapbox/features/forms/index.js

@@ -3,12 +3,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
-import { SketchPicker } from 'react-color';
-import Overlay from 'react-overlays/lib/Overlay';
-import { isMobile } from '../../is_mobile';
-import detectPassiveEvents from 'detect-passive-events';
 
-const FormPropTypes = {
+export const FormPropTypes = {
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
@@ -16,8 +12,6 @@ const FormPropTypes = {
   ]),
 };
 
-const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
-
 export const InputContainer = (props) => {
   const containerClass = classNames('input', {
     'with_label': props.label,
@@ -192,98 +186,6 @@ export class RadioGroup extends ImmutablePureComponent {
 
 }
 
-export class ColorPicker extends React.PureComponent {
-
-  static propTypes = {
-    style: PropTypes.object,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onClose: PropTypes.func,
-  }
-
-  handleDocumentClick = e => {
-    if (this.node && !this.node.contains(e.target)) {
-      this.props.onClose();
-    }
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  render() {
-    const { style, value, onChange } = this.props;
-    let margin_left_picker = isMobile(window.innerWidth) ? '20px' : '12px';
-
-    return (
-      <div id='SketchPickerContainer' ref={this.setRef} style={{ ...style, marginLeft: margin_left_picker, position: 'absolute', zIndex: 1000 }}>
-        <SketchPicker color={value} disableAlpha onChange={onChange} />
-      </div>
-    );
-  }
-
-}
-
-export class ColorWithPicker extends ImmutablePureComponent {
-
-  static propTypes = {
-    buttonId: PropTypes.string.isRequired,
-    label: FormPropTypes.label,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  onToggle = (e) => {
-    if (!e.key || e.key === 'Enter') {
-      if (this.state.active) {
-        this.onHidePicker();
-      } else {
-        this.onShowPicker(e);
-      }
-    }
-  }
-
-  state = {
-    active: false,
-    placement: null,
-  }
-
-  onHidePicker = () => {
-    this.setState({ active: false });
-  }
-
-  onShowPicker = ({ target }) => {
-    this.setState({ active: true });
-    this.setState({ placement: isMobile(window.innerWidth) ? 'bottom' : 'right' });
-  }
-
-  render() {
-    const { buttonId, label, value, onChange } = this.props;
-    const { active, placement } = this.state;
-
-    return (
-      <div className='label_input__color'>
-        <label>{label}</label>
-        <div id={buttonId} className='color-swatch' role='presentation' style={{ background: value }} title={value} value={value} onClick={this.onToggle} />
-        <Overlay show={active} placement={placement} target={this}>
-          <ColorPicker value={value} onChange={onChange} onClose={this.onHidePicker} />
-        </Overlay>
-      </div>
-    );
-  }
-
-}
-
 export class RadioItem extends ImmutablePureComponent {
 
   static propTypes = {

app/soapbox/features/soapbox_config/index.js

@@ -12,14 +12,18 @@ import {
   Checkbox,
   FileChooser,
   SimpleTextarea,
-  ColorWithPicker,
   FileChooserLogo,
+  FormPropTypes,
 } from 'soapbox/features/forms';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import { updateAdminConfig } from 'soapbox/actions/admin';
 import Icon from 'soapbox/components/icon';
 import { defaultConfig } from 'soapbox/actions/soapbox';
 import { uploadMedia } from 'soapbox/actions/media';
+import { SketchPicker } from 'react-color';
+import Overlay from 'react-overlays/lib/Overlay';
+import { isMobile } from 'soapbox/is_mobile';
+import detectPassiveEvents from 'detect-passive-events';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@@ -34,6 +38,8 @@ const messages = defineMessages({
   rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly.' },
 });
 
+const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
+
 const templates = {
   promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
   footerItem: ImmutableMap({ title: '', url: '' }),
@@ -363,3 +369,95 @@ class SoapboxConfig extends ImmutablePureComponent {
   }
 
 }
+
+class ColorPicker extends React.PureComponent {
+
+  static propTypes = {
+    style: PropTypes.object,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onClose: PropTypes.func,
+  }
+
+  handleDocumentClick = e => {
+    if (this.node && !this.node.contains(e.target)) {
+      this.props.onClose();
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleDocumentClick, false);
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleDocumentClick, false);
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+  }
+
+  setRef = c => {
+    this.node = c;
+  }
+
+  render() {
+    const { style, value, onChange } = this.props;
+    let margin_left_picker = isMobile(window.innerWidth) ? '20px' : '12px';
+
+    return (
+      <div id='SketchPickerContainer' ref={this.setRef} style={{ ...style, marginLeft: margin_left_picker, position: 'absolute', zIndex: 1000 }}>
+        <SketchPicker color={value} disableAlpha onChange={onChange} />
+      </div>
+    );
+  }
+
+}
+
+class ColorWithPicker extends ImmutablePureComponent {
+
+  static propTypes = {
+    buttonId: PropTypes.string.isRequired,
+    label: FormPropTypes.label,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  onToggle = (e) => {
+    if (!e.key || e.key === 'Enter') {
+      if (this.state.active) {
+        this.onHidePicker();
+      } else {
+        this.onShowPicker(e);
+      }
+    }
+  }
+
+  state = {
+    active: false,
+    placement: null,
+  }
+
+  onHidePicker = () => {
+    this.setState({ active: false });
+  }
+
+  onShowPicker = ({ target }) => {
+    this.setState({ active: true });
+    this.setState({ placement: isMobile(window.innerWidth) ? 'bottom' : 'right' });
+  }
+
+  render() {
+    const { buttonId, label, value, onChange } = this.props;
+    const { active, placement } = this.state;
+
+    return (
+      <div className='label_input__color'>
+        <label>{label}</label>
+        <div id={buttonId} className='color-swatch' role='presentation' style={{ background: value }} title={value} value={value} onClick={this.onToggle} />
+        <Overlay show={active} placement={placement} target={this}>
+          <ColorPicker value={value} onChange={onChange} onClose={this.onHidePicker} />
+        </Overlay>
+      </div>
+    );
+  }
+
+}