juanca / react-aria-components

React ARIA-compliant Components
https://juanca.github.io/react-aria-components
MIT License
6 stars 3 forks source link

Fix prop-type validation errors on Grid example #62

Closed juanca closed 5 years ago

juanca commented 5 years ago

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?

juanca commented 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>
juanca commented 5 years ago

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.

juanca commented 5 years ago

@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.