Disable table selection for Fabric/read-only (#1855)

* Disable table selection for Fabric/read-only

* Update unit tests

* Fix format

---------

Co-authored-by: Laurent Nguyen <languye@microsoft.com>
This commit is contained in:
Laurent Nguyen
2024-06-03 19:11:16 +02:00
committed by GitHub
parent 495296602a
commit b76d83d8e1
5 changed files with 1011 additions and 12 deletions

View File

@@ -41,6 +41,7 @@ export interface IDocumentsTableComponentProps {
size: { height: number; width: number };
columnHeaders: ColumnHeaders;
style?: React.CSSProperties;
isSelectionDisabled?: boolean;
}
interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -61,6 +62,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
style,
size,
columnHeaders,
isSelectionDisabled,
}: IDocumentsTableComponentProps) => {
const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
@@ -127,12 +129,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
const { item, selected, appearance, onClick, onKeyDown } = data[index];
return (
<TableRow aria-rowindex={index + 2} style={style} key={item.id} aria-selected={selected} appearance={appearance}>
<TableSelectionCell
checked={selected}
checkboxIndicator={{ "aria-label": "Select row" }}
onClick={onClick}
onKeyDown={onKeyDown}
/>
{!isSelectionDisabled && (
<TableSelectionCell
checked={selected}
checkboxIndicator={{ "aria-label": "Select row" }}
onClick={onClick}
onKeyDown={onKeyDown}
/>
)}
{columns.map((column) => (
<TableCell
key={column.columnId}
@@ -226,12 +230,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
<Table className="documentsTable" noNativeElements {...tableProps}>
<TableHeader className="documentsTableHeader">
<TableRow style={{ width: size ? size.width - 15 : "100%" }}>
<TableSelectionCell
checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
onClick={toggleAllRows}
onKeyDown={toggleAllKeydown}
checkboxIndicator={{ "aria-label": "Select all rows " }}
/>
{!isSelectionDisabled && (
<TableSelectionCell
checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
onClick={toggleAllRows}
onKeyDown={toggleAllKeydown}
checkboxIndicator={{ "aria-label": "Select all rows " }}
/>
)}
{columns.map((column /* index */) => (
<Menu openOnContext key={column.columnId}>
<MenuTrigger>