import {
Component,
createRef,
InputHTMLAttributes,
ReactElement,
RefObject,
} from 'react';
import { observer } from 'mobx-react';
import classnames from 'classnames';
import { SliderPicker } from 'react-color';
import { noop } from 'lodash';
import { FormFields } from '../../../@types/mobx-form.types';
interface IProps extends InputHTMLAttributes, FormFields {
className?: string;
focus?: boolean;
onColorChange?: () => void;
error: string;
}
@observer
class ColorPickerInput extends Component {
private inputElement: RefObject =
createRef();
componentDidMount(): void {
const { focus = false } = this.props;
if (focus && this.inputElement && this.inputElement.current) {
this.inputElement.current.focus();
}
}
onChange({ hex }: { hex: string }): void {
const { onColorChange = noop, onChange = noop } = this.props;
onColorChange();
onChange(hex);
}
render(): ReactElement {
const {
id,
name,
value = '',
placeholder = '',
disabled = false,
className = null,
type = 'text',
error = '',
onChange = noop,
} = this.props;
return (
);
}
}
export default ColorPickerInput;