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
+ }
+
+ 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 {