Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added property count to Map to make length of provided array available #138

Merged
merged 5 commits into from
Jul 25, 2024
Merged

Added property count to Map to make length of provided array available #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c0ae36
Added property count to Map, to make length of provided array available
hebbeh Jul 23, 2024
3023084
Remove unused code
hebbeh Jul 23, 2024
69c2972
Revert unwanted changes to count returns length of provided array
hebbeh Jul 23, 2024
f99036b
Rename count to length
pirelenito Jul 25, 2024
db91fda
Change "count" to "length" in test as well
pirelenito Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/@react-facet/core/src/components/Map.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && <div data-testid={'length'}>{length}</div>}</>
}

const Example = () => {
return <Map array={data}>{(_, index, length) => <ExampleContent index={index} length={length} />}</Map>
}

const { getByTestId } = render(<Example />)

expect(getByTestId('length')).toHaveTextContent('3')
})
24 changes: 14 additions & 10 deletions packages/@react-facet/core/src/components/Map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@ import { EqualityCheck, Facet, NO_VALUE } from '../types'

export type MapProps<T> = {
array: Facet<T[]>
children: (item: Facet<T>, index: number) => ReactElement | null
children: (item: Facet<T>, index: number, length: number) => ReactElement | null
equalityCheck?: EqualityCheck<T>
}

export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
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 (
<>
Expand All @@ -22,13 +23,14 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
key={index}
arrayFacet={array}
index={index}
length={lengthNumber}
equalityCheck={equalityCheck}
children={children}
/>
) : (
<MapChild<T> key={index} arrayFacet={array} index={index} children={children} />
<MapChild<T> key={index} arrayFacet={array} index={index} length={lengthNumber} children={children} />
),
countValue !== NO_VALUE ? countValue : 0,
lengthNumber,
)}
</>
)
Expand All @@ -37,11 +39,12 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
type MapChildMemoProps<T> = {
arrayFacet: Facet<T[]>
index: number
children: (item: Facet<T>, index: number) => ReactElement | null
length: number
children: (item: Facet<T>, index: number, length: number) => ReactElement | null
equalityCheck: EqualityCheck<T>
}

const MapChildMemo = <T,>({ arrayFacet, index, children, equalityCheck }: MapChildMemoProps<T>) => {
const MapChildMemo = <T,>({ arrayFacet, index, length, children, equalityCheck }: MapChildMemoProps<T>) => {
const childFacet = useFacetMemo(
(array) => {
if (index < array.length) return array[index]
Expand All @@ -51,16 +54,17 @@ const MapChildMemo = <T,>({ arrayFacet, index, children, equalityCheck }: MapChi
[arrayFacet],
equalityCheck,
)
return children(childFacet, index)
return children(childFacet, index, length)
}

type MapChildProps<T> = {
arrayFacet: Facet<T[]>
index: number
children: (item: Facet<T>, index: number) => ReactElement | null
length: number
children: (item: Facet<T>, index: number, length: number) => ReactElement | null
}

const MapChild = <T,>({ arrayFacet, index, children }: MapChildProps<T>) => {
const MapChild = <T,>({ arrayFacet, index, length, children }: MapChildProps<T>) => {
const childFacet = useFacetMap(
(array) => {
if (index < array.length) return array[index]
Expand All @@ -70,7 +74,7 @@ const MapChild = <T,>({ arrayFacet, index, children }: MapChildProps<T>) => {
[arrayFacet],
)

return children(childFacet, index)
return children(childFacet, index, length)
}

interface TimesFn<T> {
Expand Down
Loading