Closed juanca closed 5 years ago
Here is how the low-level API looks like now:
<DataGrid refs={[]}>
<GridRow>
<GridCell>{() => 'I am the'}</GridCell>
<GridCell>{() => 'first row'}</GridCell>
</GridRow>
<GridRow>
<GridCell>{() => 'I am the'}</GridCell>
<GridCell>{() => 'second row'}</GridCell>
</GridRow>
</DataGrid>
Here is how the low-level API would look like with render properties:
<DataGrid refs={[]}>
{(activeRow, cellIndex) => (
<GridRow active={activeRow} cellIndex={cellIndex}>
{activeCell => <GridCell active={activeCell}>{() => 'I am the'}</GridCell>}
{activeCell => <GridCell active={activeCell}>{() => 'first row'}</GridCell>}
</GridRow>
)}
{(activeRow, cellIndex) => (
<GridRow active={activeRow} cellIndex={cellIndex}>
{activeCell => <GridCell active={activeCell}>{() => 'I am the'}</GridCell>}
{activeCell => <GridCell active={activeCell}>{() => 'second row'}</GridCell>}
</GridRow>
)}
</DataGrid>
Here is how the low-level API could look like with context components:
<DataGrid refs={[]}>
<GridRow index={0}>
<GridCell index={0}>{() => 'I am the'}</GridCell>
<GridCell index={1}>{() => 'first row'}</GridCell>
</GridRow>
<GridRow index={1}>
<GridCell index={0}>{() => 'I am the'}</GridCell>
<GridCell index={1}>{() => 'second row'}</GridCell>
</GridRow>
</DataGrid>
Context-based solution looked the nicest but I foresee performance issues. If we completely avoid React.cloneElement
then each cell will need to always ask if its row is active (Y-coordinate) and whether itself is active (X-coordinate). I am not sure how we can be lazy about the rendering since it is reacting to context changes.
@ahuth Let me know what you think about my above findings ^
I am hoping to extend usages of Cursor
to other components that manage their own keyboard navigation.
Closes https://github.com/juanca/react-aria-components/issues/60
Note: Normally, I would prefer each test to also render an end-to-end Grid but it seems to be too noisy. I wonder if we can extrapolate this pattern?