MCPcopy Index your code
hub / github.com/adobe/react-spectrum / TableRow

Function TableRow

packages/@adobe/react-spectrum/src/table/TableViewBase.tsx:1272–1420  ·  view source on GitHub ↗
({
  item,
  children,
  layoutInfo,
  parent,
  ...otherProps
}: {
  item: GridNode<unknown>;
  children: ReactNode;
  layoutInfo: LayoutInfo;
  parent: LayoutInfo | null;
})

Source from the content-addressed store, hash-verified

1270}
1271
1272function TableRow({
1273 item,
1274 children,
1275 layoutInfo,
1276 parent,
1277 ...otherProps
1278}: {
1279 item: GridNode<unknown>;
1280 children: ReactNode;
1281 layoutInfo: LayoutInfo;
1282 parent: LayoutInfo | null;
1283}) {
1284 let ref = useRef<HTMLDivElement | null>(null);
1285 let {state, layout, dragAndDropHooks, isTableDraggable, isTableDroppable, dragState, dropState} =
1286 useTableContext();
1287 let isSelected = state.selectionManager.isSelected(item.key);
1288 let {rowProps, hasAction, allowsSelection} = useTableRow(
1289 {
1290 node: item,
1291 isVirtualized: true,
1292 shouldSelectOnPressUp: isTableDraggable
1293 },
1294 state,
1295 ref
1296 );
1297
1298 let isDisabled = state.selectionManager.isDisabled(item.key);
1299 let isInteractive = !isDisabled && (hasAction || allowsSelection || isTableDraggable);
1300 let {pressProps, isPressed} = usePress({isDisabled: !isInteractive});
1301
1302 // The row should show the focus background style when any cell inside it is focused.
1303 // If the row itself is focused, then it should have a blue focus indicator on the left.
1304 let {isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps} = useFocusRing({
1305 within: true
1306 });
1307 let {isFocusVisible, focusProps} = useFocusRing();
1308 let {hoverProps, isHovered} = useHover({isDisabled: !isInteractive});
1309 let isFirstRow =
1310 state.collection.rows.find(row => row.type === 'item' && row.level === 0)?.key === item.key;
1311 let isLastRow = item.nextKey == null;
1312 // Figure out if the TableView content is equal or greater in height to the container. If so, we'll need to round the bottom
1313 // border corners of the last row when selected.
1314 let isFlushWithContainerBottom = false;
1315 if (isLastRow) {
1316 if (layout.getContentSize()?.height >= (layout.virtualizer?.visibleRect.height ?? 0)) {
1317 isFlushWithContainerBottom = true;
1318 }
1319 }
1320
1321 let draggableItem: DraggableItemResult | null = null;
1322 if (isTableDraggable && dragAndDropHooks && dragState) {
1323 draggableItem = dragAndDropHooks.useDraggableItem!(
1324 {key: item.key, hasDragButton: true},
1325 dragState
1326 );
1327 if (isDisabled) {
1328 draggableItem = null;
1329 }

Callers

nothing calls this directly

Calls 14

useTableRowFunction · 0.90
usePressFunction · 0.90
useFocusRingFunction · 0.90
useHoverFunction · 0.90
useButtonFunction · 0.90
mergePropsFunction · 0.90
useVisuallyHiddenFunction · 0.90
classNamesFunction · 0.90
useTableContextFunction · 0.85
useStyleFunction · 0.85
isDropTargetMethod · 0.80
isSelectedMethod · 0.65

Tested by

no test coverage detected