refactor: changed the jsx to tsx and added interface

carbon-design-system · Oct 21, 2024 · cfb3c7a · cfb3c7a
1 parent 1a9d6cf
commit cfb3c7a
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 219 deletions.
diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.tsx b/packages/react/src/components/InlineCheckbox/InlineCheckbox.tsx
@@ -4,87 +4,151 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { useMergedRefs } from '../../internal/useMergedRefs';
 
-/** @type any */
-const InlineCheckbox = React.forwardRef(function InlineCheckbox(
-  props,
-  forwardRef
-) {
-  const {
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
-    checked = false,
-    disabled,
-    id,
-    indeterminate,
-    name,
-    onChange = () => {},
-    onClick,
-    onKeyDown,
-    title,
-  } = props;
-  const prefix = usePrefix();
-  const inputRef = useRef(null);
-  const ref = useMergedRefs([inputRef, forwardRef]);
-  const inputProps = {
-    checked,
-    className: `${prefix}--checkbox`,
-    disabled,
-    id,
-    name,
-    onClick: onClick ? onClickCheckBoxInput : onClick,
-    onChange: (evt) => {
-      onChange(evt.target.checked, id, evt);
-    },
-    onKeyDown,
-    ref,
-    type: 'checkbox',
-  };
-
-  if (indeterminate) {
-    inputProps.checked = false;
-  }
+interface InlineCheckboxProps {
+  /*
+   * Specify the label for the control
+   */
+  'aria-label': string;
 
-  useEffect(() => {
-    if (inputRef?.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify the label for the control
+   */
+  ariaLabel?: string;
+
+  /**
+   * Specify whether the underlying control is checked,
+   * or not
+   * @default false
+   * */
+  checked?: boolean;
+
+  /**
+   * Specify whether the underlying input control should be disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Provide an `id` for the underlying input control
+   */
+  id: string;
+
+  /**
+   * Specify whether the control is in an indeterminate state
+   */
+  indeterminate?: boolean;
+
+  /**
+   * Provide a `name` for the underlying input control
+   */
+  name: string;
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange?: (
+    checked: boolean,
+    id: string,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
+  /**
+   * Provide an optional tooltip for the InlineCheckbox
+   */
+  title?: string;
+}
+
+const InlineCheckbox = React.forwardRef<HTMLInputElement, InlineCheckboxProps>(
+  function InlineCheckbox(props, forwardRef) {
+    const {
+      ['aria-label']: ariaLabel,
+      ariaLabel: deprecatedAriaLabel,
+      checked = false,
+      disabled,
+      id,
+      indeterminate,
+      name,
+      onChange = () => {},
+      onClick,
+      onKeyDown,
+      title,
+    } = props;
+    const prefix = usePrefix();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const ref = useMergedRefs([inputRef, forwardRef]);
+
+    const inputProps: React.InputHTMLAttributes<HTMLInputElement> & {
+      ref: React.Ref<HTMLInputElement>;
+    } = {
+      checked,
+      className: `${prefix}--checkbox`,
+      disabled,
+      id,
+      name,
+      onClick: onClick ? onClickCheckBoxInput : onClick,
+      onChange: (evt: React.ChangeEvent<HTMLInputElement>) => {
+        onChange(evt.target.checked, id, evt);
+      },
+      onKeyDown,
+      ref,
+      type: 'checkbox',
+    };
 
-  function onClickCheckBoxInput(evt) {
-    // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll`
     if (indeterminate) {
-      evt.target.checked = false;
+      inputProps.checked = false;
     }
-    onClick(evt);
-  }
 
-  return (
-    <div className={`${prefix}--checkbox--inline`}>
-      <input {...inputProps} />
-      {
-        /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
-        <label
-          htmlFor={id}
-          className={`${prefix}--checkbox-label`}
-          title={title}
-          onClick={(evt) => {
-            evt.stopPropagation();
-          }}>
-          <span className={`${prefix}--visually-hidden`}>
-            {deprecatedAriaLabel || ariaLabel}
-          </span>
-        </label>
+    useEffect(() => {
+      if (inputRef?.current) {
+        inputRef.current.indeterminate = indeterminate || false;
+      }
+    }, [indeterminate]);
+
+    function onClickCheckBoxInput(evt: React.MouseEvent<HTMLInputElement>) {
+      if (indeterminate) {
+        (evt.target as HTMLInputElement).checked = false;
       }
-    </div>
-  );
-});
+      onClick?.(evt);
+    }
+
+    return (
+      <div className={`${prefix}--checkbox--inline`}>
+        <input {...inputProps} />
+        {
+          /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+          <label
+            htmlFor={id}
+            className={`${prefix}--checkbox-label`}
+            title={title}
+            onClick={(evt: React.MouseEvent) => {
+              evt.stopPropagation();
+            }}>
+            <span className={`${prefix}--visually-hidden`}>
+              {deprecatedAriaLabel || ariaLabel}
+            </span>
+          </label>
+        }
+      </div>
+    );
+  }
+);
 
 InlineCheckbox.propTypes = {
   /**