53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
|
|
|
import { ColumnContext } from '../contexts/ColumnContext';
|
|
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
|
|
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
|
|
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
|
|
|
|
import { CheckboxCell } from './CheckboxCell';
|
|
import { DataTableCell } from './DataTableCell';
|
|
|
|
const StyledRow = styled.tr<{ selected: boolean }>`
|
|
background: ${(props) =>
|
|
props.selected ? props.theme.accent.quaternary : 'none'};
|
|
`;
|
|
|
|
type DataTableRowProps = {
|
|
rowId: string;
|
|
};
|
|
|
|
export const DataTableRow = forwardRef<HTMLTableRowElement, DataTableRowProps>(
|
|
({ rowId }, ref) => {
|
|
const visibleTableColumns = useRecoilScopedValue(
|
|
visibleTableColumnsScopedSelector,
|
|
TableRecoilScopeContext,
|
|
);
|
|
const { currentRowSelected } = useCurrentRowSelected();
|
|
|
|
return (
|
|
<StyledRow
|
|
ref={ref}
|
|
data-testid={`row-id-${rowId}`}
|
|
selected={currentRowSelected}
|
|
data-selectable-id={rowId}
|
|
>
|
|
<td>
|
|
<CheckboxCell />
|
|
</td>
|
|
{visibleTableColumns.map((column, columnIndex) => {
|
|
return (
|
|
<ColumnContext.Provider value={column} key={column.key}>
|
|
<DataTableCell cellIndex={columnIndex} />
|
|
</ColumnContext.Provider>
|
|
);
|
|
})}
|
|
<td></td>
|
|
</StyledRow>
|
|
);
|
|
},
|
|
);
|