From 4b9181d6279a6cd7bfb19c34a0655e82a0de0a6d Mon Sep 17 00:00:00 2001 From: Gururajj77 Date: Thu, 14 Mar 2024 14:08:23 +0530 Subject: [PATCH 1/3] fix: fixes the default withOverlay prop --- packages/react/src/components/Loading/Loading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Loading/Loading.tsx b/packages/react/src/components/Loading/Loading.tsx index 3739d7e08fe0..191065ac10cd 100644 --- a/packages/react/src/components/Loading/Loading.tsx +++ b/packages/react/src/components/Loading/Loading.tsx @@ -41,7 +41,7 @@ export interface LoadingProps extends ReactAttr { /** * Specify whether you want the loader to be applied with an overlay */ - withOverlay: boolean; + withOverlay?: boolean; } function Loading({ From a45ffb27e0aa7e98784b2f968f2bc9e780cf5a90 Mon Sep 17 00:00:00 2001 From: Gururajj77 Date: Tue, 19 Mar 2024 14:54:29 +0530 Subject: [PATCH 2/3] fix: fixed the tilegroup to accept wrappers around the radiotile --- .../src/components/RadioTile/RadioTile.js | 2 + .../src/components/TileGroup/TileGroup.tsx | 107 +++++++++++++----- 2 files changed, 79 insertions(+), 30 deletions(-) diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js index 9ea9a8a9b31a..3d6cf803d90b 100644 --- a/packages/react/src/components/RadioTile/RadioTile.js +++ b/packages/react/src/components/RadioTile/RadioTile.js @@ -97,6 +97,8 @@ const RadioTile = React.forwardRef(function RadioTile( ); }); +RadioTile.displayName = 'RadioTile'; + RadioTile.propTypes = { /** * `true` if this tile should be selected. diff --git a/packages/react/src/components/TileGroup/TileGroup.tsx b/packages/react/src/components/TileGroup/TileGroup.tsx index 09a78bac9df7..2bfe9a8a8fca 100644 --- a/packages/react/src/components/TileGroup/TileGroup.tsx +++ b/packages/react/src/components/TileGroup/TileGroup.tsx @@ -5,10 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -import PropTypes, { ReactElementLike, ReactNodeLike } from 'prop-types'; +import PropTypes, { 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'; @@ -83,33 +82,36 @@ const TileGroup = (props) => { 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 ( - - ); - }); - - return radioTiles; + const getRadioTilesWithWrappers = (children) => { + const traverseAndModifyChildren = (children) => { + return React.Children.map(children, (child) => { + // If RadioTile found, return it with necessary props + if (child.type === RadioTile) { + const { value, ...otherProps } = child.props; + return ( + + ); + } else if (child.props && child.props.children) { + // If the child is not RadioTile and has children, recheck the children + return React.cloneElement(child, { + ...child.props, + children: traverseAndModifyChildren(child.props.children), + }); + } else { + // If the child is neither a RadioTile nor has children, return it as is + return child; + } + }); + }; + + return <>{traverseAndModifyChildren(children)}; }; const handleChange = (newSelection, value, evt) => { @@ -119,6 +121,51 @@ const TileGroup = (props) => { } }; + // const handleChange = useCallback((newSelection, value, evt) => { + // if (newSelection !== selected) { + // setSelected(newSelection); + // if (onChange) { + // onChange(value, name, evt); + // } + // } + // }, [selected, setSelected, onChange, name]); + + // const getRadioTilesWithWrappers = useMemo(() => { + // const traverseAndModifyChildren = (children, depth = 0) => { + // if (depth > 3) { + // return children + // } // Limiting depth to avoid deep recursion + + // return React.Children.map(children, (child) => { + // if (React.isValidElement(child) && child.type === getDisplayName(RadioTile)) { + // const { value, ...otherProps } = child.props; + // return ( + // + // ); + // } else if (child.props && child.props.children) { + // return React.cloneElement(child, { + // ...child.props, + // children: traverseAndModifyChildren(child.props.children, depth + 1), + // }); + // } else { + // return child; + // } + // }); + // }; + + // return ( + // <> + // {traverseAndModifyChildren(children)} + // + // ); + // }, [children, name, handleChange, selected]); const renderLegend = (legend) => { if (legend) { return {legend}; @@ -130,7 +177,7 @@ const TileGroup = (props) => { className={className ?? `${prefix}--tile-group`} disabled={disabled}> {renderLegend(legend)} -
{getRadioTiles()}
+
{getRadioTilesWithWrappers(children)}
); }; From 8ad1efdaff991ffcbbef7dc4e0583e96c55c07a0 Mon Sep 17 00:00:00 2001 From: Gururajj77 Date: Tue, 19 Mar 2024 15:25:17 +0530 Subject: [PATCH 3/3] fix: removed comments --- .../src/components/TileGroup/TileGroup.tsx | 45 ------------------- 1 file changed, 45 deletions(-) diff --git a/packages/react/src/components/TileGroup/TileGroup.tsx b/packages/react/src/components/TileGroup/TileGroup.tsx index 2bfe9a8a8fca..a5da20ceeeb2 100644 --- a/packages/react/src/components/TileGroup/TileGroup.tsx +++ b/packages/react/src/components/TileGroup/TileGroup.tsx @@ -121,51 +121,6 @@ const TileGroup = (props) => { } }; - // const handleChange = useCallback((newSelection, value, evt) => { - // if (newSelection !== selected) { - // setSelected(newSelection); - // if (onChange) { - // onChange(value, name, evt); - // } - // } - // }, [selected, setSelected, onChange, name]); - - // const getRadioTilesWithWrappers = useMemo(() => { - // const traverseAndModifyChildren = (children, depth = 0) => { - // if (depth > 3) { - // return children - // } // Limiting depth to avoid deep recursion - - // return React.Children.map(children, (child) => { - // if (React.isValidElement(child) && child.type === getDisplayName(RadioTile)) { - // const { value, ...otherProps } = child.props; - // return ( - // - // ); - // } else if (child.props && child.props.children) { - // return React.cloneElement(child, { - // ...child.props, - // children: traverseAndModifyChildren(child.props.children, depth + 1), - // }); - // } else { - // return child; - // } - // }); - // }; - - // return ( - // <> - // {traverseAndModifyChildren(children)} - // - // ); - // }, [children, name, handleChange, selected]); const renderLegend = (legend) => { if (legend) { return {legend};