refactor(TileGroup): add TypeScript types

packages/react/src/components/TileGroup/TileGroup.tsx

@@ -0,0 +1,185 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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, { ReactElementLike, ReactNodeLike } from 'prop-types';
+import React, { useState } from 'react';
+import RadioTile from '../RadioTile';
+import { warning } from '../../internal/warning';
+import { usePrefix } from '../../internal/usePrefix';
+import { ReactAttr } from '../../types/common';
+import { noopFn } from '../../internal/noopFn';
+
+type ExcludedAttributes = 'onChange';
+
+export interface TileGroupProps
+  extends Omit<ReactAttr<HTMLFieldSetElement>, ExcludedAttributes> {
+  /**
+   * Provide a collection of <RadioTile> components to render in the group
+   */
+  children?: ReactNodeLike;
+
+  /**
+   * Provide an optional className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify the the value of <RadioTile> to be selected by default
+   */
+  defaultSelected?: string | number;
+
+  /**
+   * Specify whether the group is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Provide an optional legend for this group
+   */
+  legend?: string;
+
+  /**
+   * Specify the name of the underlying `<input>` nodes
+   */
+  name: string;
+
+  /**
+   * Provide an optional `onChange` hook that is called whenever the value of the group changes
+   */
+  onChange?: (selection: unknown, name: string, evt: unknown) => void;
+
+  /**
+   * Specify the value that is currently selected in the group
+   */
+  valueSelected?: string | number;
+}
+
+const TileGroup =
+  (props) => {
+    const {
+      children,
+      className,
+      defaultSelected,
+      disabled,
+      legend,
+      name,
+      onChange = noopFn,
+      valueSelected,
+    } = props;
+    const prefix = usePrefix();
+
+    const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
+    const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
+
+    /**
+     * prop + state alignment - getDerivedStateFromProps
+     * only update if selected prop changes
+     */
+    if (valueSelected !== prevValueSelected) {
+      setSelected(valueSelected);
+      setPrevValueSelected(valueSelected);
+    }
+
+    const getRadioTiles = () => {
+      const childrenArray = React.Children.toArray(children);
+      const radioTiles = childrenArray.map((tileRadio) => {
+        const tileRadioProps =
+          (tileRadio as ReactElementLike).props ?? undefined;
+        const { value, ...other } = tileRadioProps;
+        /* istanbul ignore if */
+        if (typeof tileRadioProps.checked !== 'undefined') {
+          warning(
+            false,
+            `Instead of using the checked property on the RadioTile, set
+            the defaultSelected property or valueSelected property on the TileGroup.`
+          );
+        }
+
+        return (
+          <RadioTile
+            {...other}
+            name={name}
+            key={value}
+            value={value}
+            onChange={handleChange}
+            checked={value === selected}
+          />
+        );
+      });
+
+      return radioTiles;
+    };
+
+    const handleChange = (newSelection, value, evt) => {
+      if (newSelection !== selected) {
+        setSelected(newSelection);
+        onChange(newSelection, name, evt);
+      }
+    };
+
+    const renderLegend = (legend) => {
+      if (legend) {
+        return <legend className={`${prefix}--label`}>{legend}</legend>;
+      }
+    };
+
+    return (
+      <fieldset
+        className={className ?? `${prefix}--tile-group`}
+        disabled={disabled}>
+        {renderLegend(legend)}
+        <div>{getRadioTiles()}</div>
+      </fieldset>
+    );
+  };
+
+TileGroup.propTypes = {
+  /**
+   * Provide a collection of <RadioTile> components to render in the group
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the the value of <RadioTile> to be selected by default
+   */
+  defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the group is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide an optional legend for this group
+   */
+  legend: PropTypes.string,
+
+  /**
+   * Specify the name of the underlying `<input>` nodes
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional `onChange` hook that is called whenever the value of
+   * the group changes
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify the value that is currently selected in the group
+   */
+  valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+TileGroup.displayName = 'TileGroup';
+
+export default TileGroup;