fix: DefinitionListでFragmentの子要素を適切に処理するよう修正

[matamatanot]

関連URL

None

概要

Deprecatedなitems propsから置き換えようとしたらうまく動作しないケースが有ることに気が付きました。
以下のように条件分岐でDefinitionListItemを複数セットしたいケースがありますがこの場合にうまく動作しません。

			<DefinitionListItem term="入社日">
				{enteredDate}
			</DefinitionListItem>
			<DefinitionListItem term="退職日">
				{resignedDate}
			</DefinitionListItem>
			{isActive && (
				<>
					<DefinitionListItem term="加入者口座コード（21桁）">
						{hoge}
					</DefinitionListItem>
					<DefinitionListItem term="部店コード">
						{fuga}
					</DefinitionListItem>
				</>
			)}

変更内容

Fragmentか確認してchildrenを取り出して今までの処理を通すようにしました

備考

以下ならこのままでも動きます

			<DefinitionListItem term="入社日">
				{enteredDate}
			</DefinitionListItem>
			<DefinitionListItem term="退職日">
				{resignedDate}
			</DefinitionListItem>
			{isActive && (
				<DefinitionListItem term="口座コード">
					{hoge}
				</DefinitionListItem>
			)}
			{isActive && (
				<DefinitionListItem term="部店コード">
					{fuga}
				</DefinitionListItem>
			)}

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5839

commit: 1b9186e

[AtsushiM]

flatMap -> mapで配列を2回転している & 内容でisValidElementのチェックが2重でかかっている & Fragmentが複数ネストしている場合に対応できていないので以下の感じはどうっすかね？
(動作確認自体は未対応ですが...)

const childrenToItems = (children: ReactNode) => (
  Children.toArray(children)
    .reduce((prev, child) => {
      if (isValidElement(child)) {
        if (child.type === Fragment) {
          prev = prev.concat(childrenToItems(child.props.children))
        }

        prev.push(cloneElement(child as ReactElement, {
          maxColumns,
          termStyleType,
        }))
      } else {
        prev.push(child)
      }

      return prev
    }, [] as ReactElement)
)

...

{childrenToItems(children)}

[matamatanot]

@AtsushiM
2回転とisValidElementの二重チェックを避けつつもう少し厳格にしました！
e1110ef