From 302d595f7c289387e53a0ef7df4d574ed4e25d70 Mon Sep 17 00:00:00 2001
From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>
Date: Wed, 2 Nov 2022 06:31:36 +0530
Subject: Transform to TS and refactored components w.r.t deletion if
 duplicated Input component (#729)

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

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

diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
index 7e3965331..da1fffb71 100644
--- a/src/components/ui/ColorPickerInput.tsx
+++ b/src/components/ui/ColorPickerInput.tsx
@@ -1,15 +1,25 @@
-import { ChangeEvent, Component, createRef, RefObject } from 'react';
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  Component,
+  createRef,
+  RefObject,
+} from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { SliderPicker } from 'react-color';
+import { noop } from 'lodash';
 import { Field } from '../../@types/mobx-form.types';
 
 interface IProps {
   field: Field;
   className?: string;
   focus?: boolean;
+  onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
+// TODO - [TS DEBT] check if field can be spread instead of having it single field attribute in interface
+@observer
 class ColorPickerInput extends Component<IProps> {
   private inputElement: RefObject<HTMLInputElement> =
     createRef<HTMLInputElement>();
@@ -22,7 +32,9 @@ class ColorPickerInput extends Component<IProps> {
   }
 
   onChange(e: ChangeEvent<HTMLInputElement>) {
-    const { field } = this.props;
+    const { field, onChange = noop } = this.props;
+
+    onChange(e);
     if (field.onChange) {
       field.onChange(e);
     }
@@ -87,4 +99,4 @@ class ColorPickerInput extends Component<IProps> {
   }
 }
 
-export default observer(ColorPickerInput);
+export default ColorPickerInput;
-- 
cgit v1.2.3-70-g09d2