diff --git a/packages/clay-core/src/tree-view/Collection.tsx b/packages/clay-core/src/tree-view/Collection.tsx index 79c1eb90f6..006ad19457 100644 --- a/packages/clay-core/src/tree-view/Collection.tsx +++ b/packages/clay-core/src/tree-view/Collection.tsx @@ -5,14 +5,16 @@ import React from 'react'; +import { + ChildrenFunction as ChildrenFunctionBase, + Collection as CollectionBase, + excludeProps, +} from '../collection'; import {Expand, Selection, useAPI} from './context'; import {ItemContextProvider, useItem} from './useItem'; -export type ChildrenFunction = ( - item: Omit, - selection: Selection, - expand: Expand -) => React.ReactElement; +export type ChildrenFunction> = + ChildrenFunctionBase; export interface ICollectionProps { children: React.ReactNode | ChildrenFunction; @@ -28,72 +30,37 @@ export interface ICollectionProps { items?: Array; } -export function getKey( - index: number, - key?: React.Key | null, - parentKey?: React.Key -) { - if ( - key != null && - (!String(key).startsWith('.') || String(key).startsWith('.$')) - ) { - return key; - } +const exclude = new Set([ + 'index', + 'indexes', + 'itemRef', + 'key', + 'parentItemRef', +]); - return parentKey ? `${parentKey}.${index}` : `$.${index}`; -} - -export function removeItemInternalProps>(props: T) { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const {index, indexes, itemRef, key, parentItemRef, ...item} = props; - - return item; -} - -export function Collection>({ +export function Collection>({ children, items, }: ICollectionProps) { - const api = useAPI(); const {key: parentKey} = useItem(); return ( - <> - {typeof children === 'function' && items - ? items.map((item, index) => { - const child = children( - removeItemInternalProps(item), - ...api - ); - - const key = getKey( - index, - item.id ?? child.key, - parentKey - ); - - return ( - - {child} - - ); - }) - : React.Children.map(children, (child, index) => { - if (!React.isValidElement(child)) { - return null; - } - - const key = getKey(index, child.key, parentKey); - - return ( - - {child} - - ); - })} - + ( + + {children} + + )} + items={items} + parentKey={parentKey} + publicApi={useAPI()} + > + {children} + ); } + +export function removeItemInternalProps>(props: T) { + return excludeProps(props, exclude); +} diff --git a/packages/clay-core/src/tree-view/context.ts b/packages/clay-core/src/tree-view/context.ts index 73b82e9479..3745c83b3e 100644 --- a/packages/clay-core/src/tree-view/context.ts +++ b/packages/clay-core/src/tree-view/context.ts @@ -48,7 +48,7 @@ export type Expand = { has: (key: Key) => boolean; }; -export function useAPI() { +export function useAPI(): [Selection, Expand] { const {expandedKeys, selection, toggle} = useTreeViewContext(); const hasKey = useCallback( @@ -69,5 +69,5 @@ export function useAPI() { toggle: selection.toggleSelection, }, {has: hasExpandedKey, toggle}, - ] as const; + ]; } diff --git a/packages/clay-core/src/tree-view/useMultipleSelection.tsx b/packages/clay-core/src/tree-view/useMultipleSelection.tsx index 68cfa1b5f6..08f20f28e5 100644 --- a/packages/clay-core/src/tree-view/useMultipleSelection.tsx +++ b/packages/clay-core/src/tree-view/useMultipleSelection.tsx @@ -6,7 +6,7 @@ import {useInternalState} from '@clayui/shared'; import {Key, useCallback, useMemo, useRef} from 'react'; -import {getKey} from './Collection'; +import {getKey} from '../collection'; import {ITreeProps, createImmutableTree} from './useTree'; import type {ICollectionProps} from './Collection';