Color picker for admin config

app/soapbox/features/forms/index.js

@@ -3,6 +3,10 @@ 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 = {
   label: PropTypes.oneOfType([
@@ -12,6 +16,8 @@ const FormPropTypes = {
   ]),
 };
 
+const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
+
 export const InputContainer = (props) => {
   const containerClass = classNames('input', {
     'with_label': props.label,
@@ -153,6 +159,98 @@ 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>
+        <button id={buttonId} className='color-swatch' style={{ background: 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 = {