({
item,
children,
layoutInfo,
parent,
...otherProps
}: {
item: GridNode<unknown>;
children: ReactNode;
layoutInfo: LayoutInfo;
parent: LayoutInfo | null;
})
| 1270 | } |
| 1271 | |
| 1272 | function 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 | } |
nothing calls this directly
no test coverage detected