diff --git a/web/modals/threads/color-picker.react.js b/web/modals/threads/color-picker.react.js index 0fe9fef4f..f22f1254e 100644 --- a/web/modals/threads/color-picker.react.js +++ b/web/modals/threads/color-picker.react.js @@ -1,84 +1,80 @@ // @flow import * as React from 'react'; -import { ChromePicker } from 'react-color'; +import { type ColorResult, ChromePicker } from 'react-color'; import css from '../../style.css'; type Props = {| +id: string, +value: string, +disabled: boolean, +onChange: (hex: string) => void, |}; type State = {| +pickerOpen: boolean, |}; -type Color = { - +hex: string, - ... -}; class ColorPicker extends React.PureComponent { props: Props; state: State; constructor(props: Props) { super(props); this.state = { pickerOpen: false, }; } render() { let picker = null; if (this.state.pickerOpen && !this.props.disabled) { picker = (
); } const style = { backgroundColor: `#${this.props.value}` }; return (
{picker}
); } onPickerKeyDown = (event: SyntheticKeyboardEvent) => { if (event.keyCode === 27) { // Esc this.setState({ pickerOpen: false }); } }; - onChangeColor = (color: Color) => { + onChangeColor = (color: ColorResult) => { this.props.onChange(color.hex.substring(1, 7)); }; onClick = () => { this.setState({ pickerOpen: true }); }; onBlur = () => { this.setState({ pickerOpen: false }); }; } export default ColorPicker;