Migrate ColorInput component to typescript (mattermost#3589)

* Migrate ColorInput component to typescript

* Being specific about the @types/react-color version

* Changing ColorInput to PureComponent.

Co-Authored-By: Michael Kochell <[email protected]>

components/color_input.test.jsx → components/color_input.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import ColorInput from 'components/color_input.jsx';
+import ColorInput from 'components/color_input';
 
 describe('components/ColorInput', () => {
  test('should match snapshot, init', () => {

components/color_input.jsx → components/color_input.tsx

@@ -2,37 +2,30 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import ReactDom from 'react-dom';
-import PropTypes from 'prop-types';
-import {ChromePicker} from 'react-color';
+import {ChromePicker, ColorResult} from 'react-color';
 
-class ColorInput extends React.Component {
- static propTypes = {
-
- /*
- * The id of setting that we will change
- */
- id: PropTypes.string.isRequired,
+type Props = {
+ id: string;
+ color: string;
+ onChange?: (hex: string) => void;
+}
 
- /*
- * Selected color
- */
- color: PropTypes.string.isRequired,
+type State = {
+ isOpened: boolean;
+}
 
- /*
- * Function called when color changed. Takes hex format of color Ex: #ffeec0
- */
- onChange: PropTypes.func,
- };
+class ColorInput extends React.PureComponent<Props, State> {
+ private colorPicker: React.RefObject<HTMLDivElement>;
 
- constructor(props) {
+ public constructor(props: Props) {
  super(props);
+ this.colorPicker = React.createRef();
  this.state = {
- idOpened: false,
+ isOpened: false,
  };
  }
 
- componentDidUpdate(prevProps, prevState) {
+ public componentDidUpdate(prevProps: Props, prevState: State) {
  const {isOpened: prevIsOpened} = prevState;
  const {isOpened} = this.state;
 
@@ -45,18 +38,17 @@ class ColorInput extends React.Component {
  }
  }
 
- checkClick = (e) => {
- const colorPickerDOMNode = ReactDom.findDOMNode(this.colorPicker);
- if (!colorPickerDOMNode || !colorPickerDOMNode.contains(e.target)) {
+ private checkClick = (e: MouseEvent): void => {
+ if (!this.colorPicker.current || !this.colorPicker.current.contains(e.target as Element)) {
  this.setState({isOpened: false});
  }
  };
 
- togglePicker = () => {
+ private togglePicker = () => {
  this.setState({isOpened: !this.state.isOpened});
  };
 
- handleChange = (newColorData) => {
+ private handleChange = (newColorData: ColorResult) => {
  const {hex} = newColorData;
  const {onChange: handleChange} = this.props;
 
@@ -65,11 +57,7 @@ class ColorInput extends React.Component {
  }
  };
 
- getColorPicker = (node) => {
- this.colorPicker = node;
- };
-
- render() {
+ public render() {
  const {color, id} = this.props;
  const {isOpened} = this.state;
 
@@ -97,7 +85,7 @@ class ColorInput extends React.Component {
  </span>
  {isOpened && (
  <div
- ref={this.getColorPicker}
+ ref={this.colorPicker}
  className='color-popover'
  id={`${id}-ChromePickerModal`}
  >

package.json

@@ -90,6 +90,7 @@
  "@storybook/addon-notes": "5.1.11",
  "@storybook/addons": "5.1.11",
  "@storybook/react": "5.1.11",
+ "@types/react-color": "3.0.1",
  "@types/react-intl": "2.3.18",
  "@typescript-eslint/eslint-plugin": "1.13.0",
  "babel-eslint": "10.0.2",