Function Row

packages/react-aria/stories/grid/example.tsx:68–105

({state, item, focusMode})

}

function Row({state, item, focusMode}) {
  let rowRef = React.useRef(null);
  let cellRef = React.useRef(null);
  let cellNode = [...item.childNodes][0];
  let {rowProps} = useGridRow({node: item}, state, rowRef);
  let {gridCellProps} = useGridCell(
    {
      node: cellNode,
      focusMode
    },
    state,
    cellRef
  );

  let [isRowFocused, setRowFocused] = React.useState(false);
  let {focusProps: rowFocusProps} = useFocus({
    onFocusChange: setRowFocused
  });

  let [isCellFocused, setCellFocused] = React.useState(false);
  let {focusProps: cellFocusProps} = useFocus({
    onFocusChange: setCellFocused
  });

  return (
    <div
      {...mergeProps(rowProps, rowFocusProps)}
      ref={rowRef}
      style={{outline: isRowFocused ? '2px solid red' : undefined}}>
      <div
        {...mergeProps(gridCellProps, cellFocusProps)}
        ref={cellRef}
        style={{outline: isCellFocused ? '2px solid green' : undefined}}>
        {cellNode.rendered}
      </div>
    </div>
  );
}