From 011e73f24f8ae15091d41781c93c313d0167d887 Mon Sep 17 00:00:00 2001
From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>
Date: Mon, 31 Oct 2022 05:20:17 +0530
Subject: Convert LoginScreen component tree to typescript (#721)

---
 src/components/ui/ColorPickerInput.tsx | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

(limited to 'src/components/ui/ColorPickerInput.tsx')

diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
index 710d05586..7e3965331 100644
--- a/src/components/ui/ColorPickerInput.tsx
+++ b/src/components/ui/ColorPickerInput.tsx
@@ -1,8 +1,8 @@
-import { ChangeEvent, Component } from 'react';
+import { ChangeEvent, Component, createRef, RefObject } from 'react';
 import { observer } from 'mobx-react';
-import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 import { SliderPicker } from 'react-color';
+import { Field } from '../../@types/mobx-form.types';
 
 interface IProps {
   field: Field;
@@ -11,27 +11,27 @@ interface IProps {
 }
 
 class ColorPickerInput extends Component<IProps> {
-  static defaultProps = {
-    className: null,
-    focus: false,
-  };
-
-  inputElement: HTMLInputElement | null | undefined;
+  private inputElement: RefObject<HTMLInputElement> =
+    createRef<HTMLInputElement>();
 
   componentDidMount() {
-    if (this.props.focus) {
+    const { focus = false } = this.props;
+    if (focus) {
       this.focus();
     }
   }
 
   onChange(e: ChangeEvent<HTMLInputElement>) {
     const { field } = this.props;
-
-    field.onChange(e);
+    if (field.onChange) {
+      field.onChange(e);
+    }
   }
 
   focus() {
-    this.inputElement?.focus();
+    if (this.inputElement && this.inputElement.current) {
+      this.inputElement.current.focus();
+    }
   }
 
   handleChangeComplete = (color: { hex: string }) => {
@@ -40,7 +40,7 @@ class ColorPickerInput extends Component<IProps> {
   };
 
   render() {
-    const { field, className } = this.props;
+    const { field, className = null } = this.props;
 
     let { type } = field;
     type = 'text';
@@ -64,9 +64,7 @@ class ColorPickerInput extends Component<IProps> {
           placeholder={field.placeholder}
           onBlur={field.onBlur}
           onFocus={field.onFocus}
-          ref={(element: HTMLInputElement | null | undefined) => {
-            this.inputElement = element;
-          }}
+          ref={this.inputElement}
           disabled={field.disabled}
         />
         <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker">
@@ -80,9 +78,7 @@ class ColorPickerInput extends Component<IProps> {
             onChange={e => this.onChange(e)}
             onBlur={field.onBlur}
             onFocus={field.onFocus}
-            ref={element => {
-              this.inputElement = element;
-            }}
+            ref={this.inputElement}
             disabled={field.disabled}
           />
         </div>
-- 
cgit v1.2.3-70-g09d2