diff --git a/packages/@react-facet/core/src/components/Map.spec.tsx b/packages/@react-facet/core/src/components/Map.spec.tsx index 14d43ddd..c42982a9 100644 --- a/packages/@react-facet/core/src/components/Map.spec.tsx +++ b/packages/@react-facet/core/src/components/Map.spec.tsx @@ -145,3 +145,21 @@ it('updates only items that have changed', () => { expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith({ a: '6' }) }) + +it('provides the length of the array', () => { + const data = createFacet({ + initialValue: [{ a: '1' }, { a: '2' }, { a: '3' }], + }) + + const ExampleContent = ({ index, length }: { index: number; length: number }) => { + return <>{length === index + 1 &&
{length}
} + } + + const Example = () => { + return {(_, index, length) => } + } + + const { getByTestId } = render() + + expect(getByTestId('length')).toHaveTextContent('3') +}) diff --git a/packages/@react-facet/core/src/components/Map.tsx b/packages/@react-facet/core/src/components/Map.tsx index 0710419b..96533960 100644 --- a/packages/@react-facet/core/src/components/Map.tsx +++ b/packages/@react-facet/core/src/components/Map.tsx @@ -6,12 +6,13 @@ import { EqualityCheck, Facet, NO_VALUE } from '../types' export type MapProps = { array: Facet - children: (item: Facet, index: number) => ReactElement | null + children: (item: Facet, index: number, length: number) => ReactElement | null equalityCheck?: EqualityCheck } export const Map = ({ array, children, equalityCheck }: MapProps) => { - const countValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array])) ?? 0 + const lengthValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array])) + const lengthNumber = lengthValue !== NO_VALUE ? lengthValue : 0 return ( <> @@ -22,13 +23,14 @@ export const Map = ({ array, children, equalityCheck }: MapProps) => { key={index} arrayFacet={array} index={index} + length={lengthNumber} equalityCheck={equalityCheck} children={children} /> ) : ( - key={index} arrayFacet={array} index={index} children={children} /> + key={index} arrayFacet={array} index={index} length={lengthNumber} children={children} /> ), - countValue !== NO_VALUE ? countValue : 0, + lengthNumber, )} ) @@ -37,11 +39,12 @@ export const Map = ({ array, children, equalityCheck }: MapProps) => { type MapChildMemoProps = { arrayFacet: Facet index: number - children: (item: Facet, index: number) => ReactElement | null + length: number + children: (item: Facet, index: number, length: number) => ReactElement | null equalityCheck: EqualityCheck } -const MapChildMemo = ({ arrayFacet, index, children, equalityCheck }: MapChildMemoProps) => { +const MapChildMemo = ({ arrayFacet, index, length, children, equalityCheck }: MapChildMemoProps) => { const childFacet = useFacetMemo( (array) => { if (index < array.length) return array[index] @@ -51,16 +54,17 @@ const MapChildMemo = ({ arrayFacet, index, children, equalityCheck }: MapChi [arrayFacet], equalityCheck, ) - return children(childFacet, index) + return children(childFacet, index, length) } type MapChildProps = { arrayFacet: Facet index: number - children: (item: Facet, index: number) => ReactElement | null + length: number + children: (item: Facet, index: number, length: number) => ReactElement | null } -const MapChild = ({ arrayFacet, index, children }: MapChildProps) => { +const MapChild = ({ arrayFacet, index, length, children }: MapChildProps) => { const childFacet = useFacetMap( (array) => { if (index < array.length) return array[index] @@ -70,7 +74,7 @@ const MapChild = ({ arrayFacet, index, children }: MapChildProps) => { [arrayFacet], ) - return children(childFacet, index) + return children(childFacet, index, length) } interface TimesFn {