1 files changed, 107 insertions, 0 deletions

diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
new file mode 100644
index 000000000..7cbdb295b
--- /dev/null
+++ b/src/components/ui/ColorPickerInput.tsx
@@ -0,0 +1,107 @@
+import { ChangeEvent, Component } from 'react';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+import classnames from 'classnames';
+import { SliderPicker } from 'react-color';
+import { DEFAULT_APP_SETTINGS } from '../../config';
+
+interface IProps {
+  field: Field;
+  className?: string;
+  focus?: boolean;
+};
+
+interface IState {
+  background: string;
+}
+
+class ColorPickerInput extends Component<IProps, IState> {
+  static defaultProps = {
+    className: null,
+    focus: false,
+  };
+
+  state = {
+    background: DEFAULT_APP_SETTINGS.accentColor,
+  };
+
+  inputElement: HTMLInputElement | null | undefined;
+
+  componentDidMount() {
+    if (this.props.focus) {
+      this.focus();
+    }
+  }
+
+  onChange(e: ChangeEvent<HTMLInputElement>) {
+    const { field } = this.props;
+
+    field.onChange(e);
+  }
+
+  focus() {
+    this.inputElement?.focus();
+  }
+
+  handleChangeComplete = (color: { hex: string; }) => {
+    const { field } = this.props;
+    this.setState({ background: color.hex });
+    field.value = color.hex
+  };
+
+  render() {
+    const {
+      field,
+      className,
+    } = this.props;
+
+    let { type } = field;
+    type = 'text';
+
+    return (
+      <div
+        className={classnames({
+          'franz-form__field': true,
+          'has-error': field.error,
+          [`${className}`]: className,
+        })}
+      >
+        <SliderPicker
+          color={ this.state.background }
+          onChangeComplete={ this.handleChangeComplete }
+          id={field.id}
+          type={type}
+          className="franz-form__input"
+          name={field.name}
+          value={field.value}
+          placeholder={field.placeholder}
+          onBlur={field.onBlur}
+          onFocus={field.onFocus}
+          ref={(element: HTMLInputElement | null | undefined) => {
+            this.inputElement = element;
+          }}
+          disabled={field.disabled}
+        />
+        <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker">
+          <input
+            id={field.id}
+            type={type}
+            className="franz-form__input"
+            name={field.name}
+            value={field.value}
+            placeholder={field.placeholder}
+            onChange={e => this.onChange(e)}
+            onBlur={field.onBlur}
+            onFocus={field.onFocus}
+            ref={element => {
+              this.inputElement = element;
+            }}
+            disabled={field.disabled}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default observer(ColorPickerInput);