Merge pull request deriv-com#83 from jim-deriv/Jim/76891/input-field-…

…component-ts-migration Jim/76891/input field component ts migration
henry-deriv · Mar 8, 2023 · cb4c0cb · cb4c0cb
2 parents 4b349df + c646bb9
commit cb4c0cb
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 185 deletions.
diff --git a/...ponents/input-field/increment-buttons.jsx → ...ponents/input-field/increment-buttons.tsx b/...ponents/input-field/increment-buttons.jsx → ...ponents/input-field/increment-buttons.tsx
@@ -1,7 +1,24 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Button from '../button';
 import Icon from '../icon';
+import { TButtonType } from './input-field';
+
+type IncrementButtonsProps = {
+    decrementValue: (
+        ev?: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>,
+        long_press_step?: number
+    ) => void;
+    id?: string;
+    incrementValue: (
+        ev?: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>,
+        long_press_step?: number
+    ) => void;
+    onLongPressEnd: () => void;
+    is_incrementable_on_long_press?: boolean;
+    max_is_disabled: number | boolean;
+    min_is_disabled: number | boolean;
+    type?: TButtonType;
+};
 
 const IncrementButtons = ({
     decrementValue,
@@ -12,21 +29,28 @@ const IncrementButtons = ({
     is_incrementable_on_long_press,
     onLongPressEnd,
     type,
-}) => {
-    const interval_ref = React.useRef();
-    const timeout_ref = React.useRef();
-    const is_long_press_ref = React.useRef();
+}: IncrementButtonsProps) => {
+    const interval_ref = React.useRef<ReturnType<typeof setInterval>>();
+    const timeout_ref = React.useRef<ReturnType<typeof setTimeout>>();
+    const is_long_press_ref = React.useRef(false);
 
-    const handleButtonPress = onChange => ev => {
-        timeout_ref.current = setTimeout(() => {
-            is_long_press_ref.current = true;
-            let step = 1;
-            onChange(ev, step);
-            interval_ref.current = setInterval(() => {
-                onChange(ev, ++step);
-            }, 50);
-        }, 300);
-    };
+    const handleButtonPress =
+        (
+            onChange: (
+                e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>,
+                step: number
+            ) => void
+        ) =>
+        (ev: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => {
+            timeout_ref.current = setTimeout(() => {
+                is_long_press_ref.current = true;
+                let step = 1;
+                onChange(ev, step);
+                interval_ref.current = setInterval(() => {
+                    onChange(ev, ++step);
+                }, 50);
+            }, 300);
+        };
 
     const handleButtonRelease = () => {
         clearInterval(interval_ref.current);
@@ -37,10 +61,13 @@ const IncrementButtons = ({
         is_long_press_ref.current = false;
     };
 
-    const getPressEvents = onChange => {
+    const getPressEvents = (
+        onChange: (e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>, step: number) => void
+    ) => {
         if (!is_incrementable_on_long_press) return {};
         return {
-            onContextMenu: e => e.preventDefault(),
+            onContextMenu: (e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) =>
+                e.preventDefault(),
             onTouchStart: handleButtonPress(onChange),
             onTouchEnd: handleButtonRelease,
             onMouseDown: handleButtonPress(onChange),
@@ -53,9 +80,9 @@ const IncrementButtons = ({
             <Button
                 id={`${id}_add`}
                 className={'dc-input-wrapper__button dc-input-wrapper__button--increment'}
-                is_disabled={max_is_disabled}
+                is_disabled={!!max_is_disabled}
                 onClick={incrementValue}
-                tabIndex='-1'
+                tabIndex={-1}
                 aria-label={'Increment value'}
                 type={type}
                 {...getPressEvents(incrementValue)}
@@ -69,9 +96,9 @@ const IncrementButtons = ({
             <Button
                 id={`${id}_sub`}
                 className={'dc-input-wrapper__button dc-input-wrapper__button--decrement'}
-                is_disabled={min_is_disabled}
+                is_disabled={!!min_is_disabled}
                 onClick={decrementValue}
-                tabIndex='-1'
+                tabIndex={-1}
                 aria-label={'Decrement value'}
                 type={type}
                 {...getPressEvents(decrementValue)}
@@ -86,15 +113,4 @@ const IncrementButtons = ({
     );
 };
 
-IncrementButtons.propTypes = {
-    decrementValue: PropTypes.func,
-    id: PropTypes.string,
-    incrementValue: PropTypes.func,
-    onLongPressEnd: PropTypes.func,
-    is_incrementable_on_long_press: PropTypes.bool,
-    max_is_disabled: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    min_is_disabled: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    type: PropTypes.string,
-};
-
 export default IncrementButtons;
diff --git a/...nents/src/components/input-field/index.js → ...nents/src/components/input-field/index.ts b/...nents/src/components/input-field/index.js → ...nents/src/components/input-field/index.ts
@@ -1,4 +1,4 @@
-import InputField from './input-field.jsx';
+import InputField from './input-field';
 import './input-field.scss';
 
 export default InputField;