import * as React from 'react'; import { useOUIAProps, OUIAProps } from '@patternfly/react-core/dist/esm/helpers'; import styles from '@patternfly/react-styles/css/components/Table/table'; import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit'; import { css } from '@patternfly/react-styles'; import { TableContext } from './Table'; export interface TrProps extends Omit, 'onResize'>, OUIAProps { /** Content rendered inside the
row */ children?: React.ReactNode; /** Additional classes added to the
row */ className?: string; /** @hide Forwarded ref */ innerRef?: React.Ref; /** Flag indicating the Tr is hidden */ isHidden?: boolean; /** Only applicable to Tr within the Tbody: Makes the row expandable and determines if it's expanded or not. * To prevent column widths from responding automatically when expandable rows are toggled, the width prop must also be passed into either the th or td component */ isExpanded?: boolean; /** Only applicable to Tr within the Tbody: Whether the row is editable */ isEditable?: boolean; /** Flag which adds hover styles for the clickable table row */ isClickable?: boolean; /** Flag indicating the row is selected - adds selected styling */ isRowSelected?: boolean; /** Flag indicating the row is striped */ isStriped?: boolean; /** Flag indicating the row will act as a border. This is typically used for a table with a nested and sticky header. */ isBorderRow?: boolean; /** Flag indicating the row is controlling the expansion of another row. */ isControlRow?: boolean; /** An event handler for the row */ onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void; /** Flag indicating that the row is selectable */ isSelectable?: boolean; /** Flag indicating the spacing offset of the first cell should be reset */ resetOffset?: boolean; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ ouiaSafe?: boolean; } const TrBase: React.FunctionComponent = ({ children, className, isExpanded, isEditable, isHidden = false, isClickable = false, isRowSelected = false, isStriped = false, isBorderRow = false, isControlRow = false, innerRef, ouiaId, ouiaSafe = true, resetOffset = false, onRowClick, isSelectable, 'aria-label': passedAriaLabel, ...props }: TrProps) => { const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe); const [computedAriaLabel, setComputedAriaLabel] = React.useState(''); let onKeyDown = null; if (onRowClick) { onKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { onRowClick(e); e.preventDefault(); } }; } const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded); const { registerSelectableRow } = React.useContext(TableContext); React.useEffect(() => { if (isSelectable && !rowIsHidden) { setComputedAriaLabel(`${isRowSelected ? 'Row selected' : ''}`); registerSelectableRow(); } else { setComputedAriaLabel(undefined); } }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]); const ariaLabel = passedAriaLabel || computedAriaLabel; return ( <>