Function Grid

packages/react-aria/stories/grid/example.tsx:24–66

(props: any)

import {useListState} from 'react-stately/useListState';

export function Grid(props: any): JSX.Element {
  let {gridFocusMode = 'row', cellFocusMode = 'child'} = props;
  let state = useListState(props);
  let gridState = useGridState({
    ...props,
    selectionMode: 'multiple',
    collection: React.useMemo(
      () =>
        new GridCollection({
          columnCount: 1,
          items: [...state.collection].map(item => ({
            type: 'item',
            childNodes: [
              {
                ...item,
                index: 0,
                type: 'cell'
              }
            ]
          }))
        }),
      [state.collection]
    )
  });

  let ref = React.useRef(null);
  let {gridProps} = useGrid(
    {
      'aria-label': 'Grid',
      focusMode: gridFocusMode
    },
    gridState,
    ref
  );

  return (
    <div {...gridProps} ref={ref}>
      {[...gridState.collection].map(item => (
        <Row key={item.key} state={gridState} item={item} focusMode={cellFocusMode} />
      ))}
    </div>
  );
}

function Row({state, item, focusMode}) {
  let rowRef = React.useRef(null);