Merge pull request #4 from likhith-deriv/likhith/74996/migrated-compo…

…site-checkbox-to-ts Likhith/74996/migrated composite checkbox to ts
likhith-deriv · Nov 1, 2022 · 1af5be3 · 1af5be3
2 parents 1f1abf7 + 3d26844
commit 1af5be3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/...composite-checkbox/composite-checkbox.jsx → ...composite-checkbox/composite-checkbox.tsx b/...composite-checkbox/composite-checkbox.jsx → ...composite-checkbox/composite-checkbox.tsx
@@ -1,18 +1,37 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Checkbox from '../checkbox/checkbox';
 import Text from '../text';
 
-const CompositeCheckbox = ({ name, value, onChange, className, label, id, description, children, ...props }) => {
-    const onClickContainer = e => {
+type TCompositeCheckbox = {
+    name: string;
+    value: boolean;
+    onChange: (e: React.SyntheticEvent) => void;
+    className?: string;
+    label: string;
+    id?: string;
+    description: string;
+};
+
+const CompositeCheckbox = ({
+    name,
+    value,
+    onChange,
+    className,
+    label,
+    id,
+    description,
+    children,
+    ...props
+}: React.PropsWithChildren<TCompositeCheckbox>) => {
+    const onClickContainer = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
         onChange({
             target: {
                 value: !value,
             },
-        });
+        } as any);
     };
 
     return (
@@ -36,15 +55,4 @@ const CompositeCheckbox = ({ name, value, onChange, className, label, id, descri
     );
 };
 
-CompositeCheckbox.propTypes = {
-    name: PropTypes.string.isRequired,
-    value: PropTypes.bool.isRequired,
-    onChange: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    id: PropTypes.string,
-    description: PropTypes.string.isRequired,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-};
-
 export default CompositeCheckbox;
diff --git a/packages/components/src/components/composite-checkbox/index.js b/packages/components/src/components/composite-checkbox/index.js
@@ -1,4 +1,4 @@
-import CompositeCheckbox from './composite-checkbox.jsx';
+import CompositeCheckbox from './composite-checkbox';
 import './composite-checkbox.scss';
 
 export default CompositeCheckbox;
diff --git a/packages/components/stories/composite-checkbox/composite-checkbox.stories.js b/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
@@ -4,7 +4,7 @@ import { boolean, withKnobs } from '@storybook/addon-knobs';
 import { withInfo } from '@storybook/addon-info';
 import React from 'react';
 import Theme from '../shared/theme';
-import CompositeCheckbox from 'Components/composite-checkbox/composite-checkbox.jsx';
+import CompositeCheckbox from 'Components/composite-checkbox/composite-checkbox';
 import notes from './README.md';
 import 'Components/composite-checkbox/composite-checkbox.scss';
 import 'Components/checkbox/checkbox.scss';