@fluentui/react-table 9.8.8 → 9.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +177 -1
- package/CHANGELOG.md +47 -2
- package/dist/index.d.ts +7 -2
- package/lib/components/DataGrid/useDataGrid.js +2 -2
- package/lib/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib/components/DataGridHeaderCell/DataGridHeaderCell.types.js.map +1 -1
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js +13 -3
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
- package/lib/components/DataGridRow/useDataGridRow.js +4 -4
- package/lib/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js +2 -2
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
- package/lib/components/TableHeaderCell/TableHeaderCell.types.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCell.js +2 -1
- package/lib/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib/components/TableResizeHandle/useTableResizeHandle.js +2 -2
- package/lib/components/TableResizeHandle/useTableResizeHandle.js.map +1 -1
- package/lib/contexts/columnIdContext.js +4 -2
- package/lib/contexts/columnIdContext.js.map +1 -1
- package/lib/contexts/rowIdContext.js +4 -2
- package/lib/contexts/rowIdContext.js.map +1 -1
- package/lib/contexts/tableContext.js +4 -2
- package/lib/contexts/tableContext.js.map +1 -1
- package/lib/hooks/types.js.map +1 -1
- package/lib/hooks/useKeyboardResizing.js +4 -4
- package/lib/hooks/useKeyboardResizing.js.map +1 -1
- package/lib/hooks/useMeasureElement.js +1 -4
- package/lib/hooks/useMeasureElement.js.map +1 -1
- package/lib/hooks/useTableColumnResizeMouseHandler.js +11 -17
- package/lib/hooks/useTableColumnResizeMouseHandler.js.map +1 -1
- package/lib/hooks/useTableColumnSizing.js +3 -4
- package/lib/hooks/useTableColumnSizing.js.map +1 -1
- package/lib/hooks/useTableFeatures.js +2 -3
- package/lib/hooks/useTableFeatures.js.map +1 -1
- package/lib/hooks/useTableSelection.js +3 -5
- package/lib/hooks/useTableSelection.js.map +1 -1
- package/lib/hooks/useTableSort.js +3 -6
- package/lib/hooks/useTableSort.js.map +1 -1
- package/lib/utils/columnResizeUtils.js +2 -4
- package/lib/utils/columnResizeUtils.js.map +1 -1
- package/lib/utils/isColumnSortable.js +3 -0
- package/lib/utils/isColumnSortable.js.map +1 -0
- package/lib-commonjs/components/DataGrid/useDataGrid.js +2 -2
- package/lib-commonjs/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js +13 -3
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js +4 -4
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js +2 -2
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js +2 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandle.js +2 -2
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandle.js.map +1 -1
- package/lib-commonjs/contexts/columnIdContext.js +4 -2
- package/lib-commonjs/contexts/columnIdContext.js.map +1 -1
- package/lib-commonjs/contexts/rowIdContext.js +4 -2
- package/lib-commonjs/contexts/rowIdContext.js.map +1 -1
- package/lib-commonjs/contexts/tableContext.js +4 -2
- package/lib-commonjs/contexts/tableContext.js.map +1 -1
- package/lib-commonjs/hooks/useKeyboardResizing.js +4 -4
- package/lib-commonjs/hooks/useKeyboardResizing.js.map +1 -1
- package/lib-commonjs/hooks/useMeasureElement.js +1 -4
- package/lib-commonjs/hooks/useMeasureElement.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js +11 -17
- package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnSizing.js +3 -4
- package/lib-commonjs/hooks/useTableColumnSizing.js.map +1 -1
- package/lib-commonjs/hooks/useTableFeatures.js +2 -3
- package/lib-commonjs/hooks/useTableFeatures.js.map +1 -1
- package/lib-commonjs/hooks/useTableSelection.js +3 -5
- package/lib-commonjs/hooks/useTableSelection.js.map +1 -1
- package/lib-commonjs/hooks/useTableSort.js +3 -6
- package/lib-commonjs/hooks/useTableSort.js.map +1 -1
- package/lib-commonjs/utils/columnResizeUtils.js +2 -4
- package/lib-commonjs/utils/columnResizeUtils.js.map +1 -1
- package/lib-commonjs/utils/isColumnSortable.js +13 -0
- package/lib-commonjs/utils/isColumnSortable.js.map +1 -0
- package/package.json +13 -13
|
@@ -6,5 +6,7 @@ export const tableContextDefaultValue = {
|
|
|
6
6
|
sortable: false
|
|
7
7
|
};
|
|
8
8
|
export const TableContextProvider = tableContext.Provider;
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
export const useTableContext = ()=>{
|
|
10
|
+
var _React_useContext;
|
|
11
|
+
return (_React_useContext = React.useContext(tableContext)) !== null && _React_useContext !== void 0 ? _React_useContext : tableContextDefaultValue;
|
|
12
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["tableContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n size: 'medium',\n noNativeElements: false,\n sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = () => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAgCC;AAExE,OAAO,MAAMC,2BAA8C;IACzDC,MAAM;IACNC,kBAAkB;IAClBC,UAAU;AACZ,EAAE;AAEF,OAAO,MAAMC,uBAAuBP,aAAaQ,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"sources":["tableContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n size: 'medium',\n noNativeElements: false,\n sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = () => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAgCC;AAExE,OAAO,MAAMC,2BAA8C;IACzDC,MAAM;IACNC,kBAAkB;IAClBC,UAAU;AACZ,EAAE;AAEF,OAAO,MAAMC,uBAAuBP,aAAaQ,QAAQ,CAAC;AAC1D,OAAO,MAAMC,kBAAkB;QAAMV;WAAAA,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,2BAAjBD,+BAAAA,oBAAkCI;AAAuB,EAAE"}
|
package/lib/hooks/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n sortColumn: TableColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n columnId: TableColumnId;\n compare: (a: TItem, b: TItem) => number;\n renderHeaderCell: () => React.ReactNode;\n renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: TableColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: (e: React.SyntheticEvent) => void;\n /**\n * Selects single row\n */\n selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: (e: React.SyntheticEvent) => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<TableRowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: TableRowId) => boolean;\n\n selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: TableColumnDefinition<TItem>[];\n /**\n * State and actions to manage column resizing\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: TableColumnSizingState;\n /**\n * A React.Ref object to be set as a ref for the table.\n * Used with column resizing.\n */\n tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n columns: TableColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n columnId: TableColumnId;\n width: number;\n minWidth: number;\n idealWidth: number;\n padding: number;\n}\n\nexport type ColumnSizingTableProps = Partial<TableProps>;\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n getColumnWidths: () => ColumnWidthState[];\n getTableProps: (props?: Partial<TableProps>) => ColumnSizingTableProps;\n getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n enableKeyboardMode: (\n columnId: TableColumnId,\n onChange?: EnableKeyboardModeOnChangeCallback,\n ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n getColumnWidth: (columnId: TableColumnId) => number;\n setColumnWidth: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n TableColumnId,\n Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n columnSizingOptions?: TableColumnSizingOptions;\n onColumnResize?: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n containerWidthOffset?: number;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n sortColumn: TableColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n columnId: TableColumnId;\n compare: (a: TItem, b: TItem) => number;\n renderHeaderCell: () => React.ReactNode;\n renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: TableColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: (e: React.SyntheticEvent) => void;\n /**\n * Selects single row\n */\n selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: (e: React.SyntheticEvent) => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<TableRowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: TableRowId) => boolean;\n\n selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: TableColumnDefinition<TItem>[];\n /**\n * State and actions to manage column resizing\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: TableColumnSizingState;\n /**\n * A React.Ref object to be set as a ref for the table.\n * Used with column resizing.\n */\n tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n columns: TableColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n columnId: TableColumnId;\n width: number;\n minWidth: number;\n idealWidth: number;\n padding: number;\n}\n\nexport type ColumnSizingTableProps = Partial<TableProps>;\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n getColumnWidths: () => ColumnWidthState[];\n getTableProps: (props?: Partial<TableProps>) => ColumnSizingTableProps;\n getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n enableKeyboardMode: (\n columnId: TableColumnId,\n onChange?: EnableKeyboardModeOnChangeCallback,\n ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n getColumnWidth: (columnId: TableColumnId) => number;\n setColumnWidth: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n TableColumnId,\n Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n columnSizingOptions?: TableColumnSizingOptions;\n onColumnResize?: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n containerWidthOffset?: number;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -52,9 +52,9 @@ export function useKeyboardResizing(columnResizeState) {
|
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
54
|
const enableInteractiveMode = React.useCallback((colId)=>{
|
|
55
|
-
var _onChangeRef_current,
|
|
55
|
+
var _onChangeRef_current, _resizeHandleRefs_get;
|
|
56
56
|
setColumnId(colId);
|
|
57
|
-
(_onChangeRef_current =
|
|
57
|
+
(_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);
|
|
58
58
|
const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
|
|
59
59
|
if (handle) {
|
|
60
60
|
handle.setAttribute('tabindex', '-1');
|
|
@@ -66,11 +66,11 @@ export function useKeyboardResizing(columnResizeState) {
|
|
|
66
66
|
]);
|
|
67
67
|
const disableInteractiveMode = React.useCallback(()=>{
|
|
68
68
|
var // Notify the onChange listener that we are disabling interactive mode.
|
|
69
|
-
_onChangeRef_current,
|
|
69
|
+
_onChangeRef_current, _resizeHandleRefs_get;
|
|
70
70
|
if (!columnId) {
|
|
71
71
|
return;
|
|
72
72
|
}
|
|
73
|
-
(_onChangeRef_current =
|
|
73
|
+
(_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
|
|
74
74
|
// Find the previous focusable element (table header button) and focus it.
|
|
75
75
|
const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
|
|
76
76
|
if (el) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n const [columnId, setColumnId] = React.useState<TableColumnId>();\n const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n const { findPrevFocusable } = useFocusFinders();\n\n const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n React.useEffect(() => {\n columnResizeStateRef.current = columnResizeState;\n }, [columnResizeState]);\n\n const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n if (!columnId) {\n return;\n }\n\n const width = columnResizeStateRef.current.getColumnWidth(columnId);\n const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n const stopEvent = () => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n switch (event.key) {\n case ArrowLeft:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case ArrowRight:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case Space:\n case Enter:\n case Escape:\n stopEvent();\n // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n resizeHandleRefs.get(columnId)?.current?.blur();\n break;\n }\n });\n\n const enableInteractiveMode = React.useCallback(\n (colId: TableColumnId) => {\n setColumnId(colId);\n onChangeRef.current?.(colId, true);\n\n const handle = resizeHandleRefs.get(colId)?.current;\n if (handle) {\n handle.setAttribute('tabindex', '-1');\n handle.tabIndex = -1;\n handle.focus();\n }\n },\n [resizeHandleRefs],\n );\n\n const disableInteractiveMode = React.useCallback(() => {\n if (!columnId) {\n return;\n }\n // Notify the onChange listener that we are disabling interactive mode.\n onChangeRef.current?.(columnId, false);\n // Find the previous focusable element (table header button) and focus it.\n const el = resizeHandleRefs.get(columnId)?.current;\n if (el) {\n findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n el.removeAttribute('tabindex');\n }\n\n setColumnId(undefined);\n }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n onChangeRef.current = onChange;\n if (!columnId) {\n enableInteractiveMode(colId);\n } else if (colId && columnId !== colId) {\n enableInteractiveMode(colId);\n setColumnId(colId);\n } else {\n disableInteractiveMode();\n }\n };\n\n const getKeyboardResizingRef = React.useCallback(\n (colId: TableColumnId) => {\n const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n resizeHandleRefs.set(colId, ref);\n return ref;\n },\n [resizeHandleRefs],\n );\n\n // This makes sure the left and right arrow keys are ignored in tabster,\n // so that they can be used for resizing.\n const tabsterAttrs = useTabsterAttributes({\n focusable: {\n ignoreKeydown: {\n ArrowLeft: true,\n ArrowRight: true,\n },\n },\n });\n\n return {\n toggleInteractiveMode,\n columnId,\n getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n onKeyDown: keyboardHandler,\n onBlur: disableInteractiveMode,\n ref: getKeyboardResizingRef(colId),\n role: 'separator',\n 'aria-label': 'Resize column',\n 'aria-valuetext': `${currentWidth} pixels`,\n 'aria-hidden': colId === columnId ? false : true,\n tabIndex: colId === columnId ? 0 : undefined,\n ...tabsterAttrs,\n }),\n };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,EAAEC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAC7F,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,EAAEC,oBAAoB,QAAQ,0BAA0B;AAEhF,MAAMC,OAAO;AACb,MAAMC,qBAAqBN;AAC3B,MAAMO,mBAAmB,IAAI;AAE7B,OAAO,SAASC,oBAAoBC,iBAAoC;IACtE,MAAM,CAACC,UAAUC,YAAY,GAAGhB,MAAMiB,QAAQ;IAC9C,MAAMC,cAAclB,MAAMmB,MAAM;IAChC,MAAM,EAAEC,iBAAiB,EAAE,GAAGZ;IAE9B,MAAMa,uBAAuBrB,MAAMmB,MAAM,CAAoBL;IAC7Dd,MAAMsB,SAAS,CAAC;QACdD,qBAAqBE,OAAO,GAAGT;IACjC,GAAG;QAACA;KAAkB;IAEtB,MAAM,CAACU,iBAAiB,GAAGxB,MAAMiB,QAAQ,CAAC,IAAM,IAAIQ;IAEpD,MAAMC,kBAAkBnB,iBAAiB,CAACoB;QACxC,IAAI,CAACZ,UAAU;YACb;QACF;QAEA,MAAMa,QAAQP,qBAAqBE,OAAO,CAACM,cAAc,CAACd;QAC1D,MAAMe,oBAAoBH,MAAMI,gBAAgB,CAACpB;QAEjD,MAAMqB,YAAY;YAChBL,MAAMM,cAAc;YACpBN,MAAMO,eAAe;QACvB;QAEA,OAAQP,MAAMQ,GAAG;YACf,KAAKlC;gBACH+B;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DtB;oBACAa,OAAOA,QAASE,CAAAA,oBAAoBpB,OAAOE,mBAAmBF,IAAG;gBACnE;gBACA;YAEF,KAAKR;gBACH8B;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DtB;oBACAa,OAAOA,QAASE,CAAAA,oBAAoBpB,OAAOE,mBAAmBF,IAAG;gBACnE;gBACA;YAEF,KAAKJ;YACL,KAAKH;YACL,KAAKC;oBAEH,0FAA0F;gBAC1FoB,+BAAAA;gBAFAQ;iBAEAR,wBAAAA,iBAAiBc,GAAG,CAACvB,uBAArBS,6CAAAA,gCAAAA,sBAAgCD,OAAO,cAAvCC,oDAAAA,8BAAyCe,IAAI;gBAC7C;QACJ;IACF;IAEA,MAAMC,wBAAwBxC,MAAMyC,WAAW,CAC7C,CAACC;YAECxB,
|
|
1
|
+
{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n const [columnId, setColumnId] = React.useState<TableColumnId>();\n const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n const { findPrevFocusable } = useFocusFinders();\n\n const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n React.useEffect(() => {\n columnResizeStateRef.current = columnResizeState;\n }, [columnResizeState]);\n\n const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n if (!columnId) {\n return;\n }\n\n const width = columnResizeStateRef.current.getColumnWidth(columnId);\n const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n const stopEvent = () => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n switch (event.key) {\n case ArrowLeft:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case ArrowRight:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case Space:\n case Enter:\n case Escape:\n stopEvent();\n // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n resizeHandleRefs.get(columnId)?.current?.blur();\n break;\n }\n });\n\n const enableInteractiveMode = React.useCallback(\n (colId: TableColumnId) => {\n setColumnId(colId);\n onChangeRef.current?.(colId, true);\n\n const handle = resizeHandleRefs.get(colId)?.current;\n if (handle) {\n handle.setAttribute('tabindex', '-1');\n handle.tabIndex = -1;\n handle.focus();\n }\n },\n [resizeHandleRefs],\n );\n\n const disableInteractiveMode = React.useCallback(() => {\n if (!columnId) {\n return;\n }\n // Notify the onChange listener that we are disabling interactive mode.\n onChangeRef.current?.(columnId, false);\n // Find the previous focusable element (table header button) and focus it.\n const el = resizeHandleRefs.get(columnId)?.current;\n if (el) {\n findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n el.removeAttribute('tabindex');\n }\n\n setColumnId(undefined);\n }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n onChangeRef.current = onChange;\n if (!columnId) {\n enableInteractiveMode(colId);\n } else if (colId && columnId !== colId) {\n enableInteractiveMode(colId);\n setColumnId(colId);\n } else {\n disableInteractiveMode();\n }\n };\n\n const getKeyboardResizingRef = React.useCallback(\n (colId: TableColumnId) => {\n const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n resizeHandleRefs.set(colId, ref);\n return ref;\n },\n [resizeHandleRefs],\n );\n\n // This makes sure the left and right arrow keys are ignored in tabster,\n // so that they can be used for resizing.\n const tabsterAttrs = useTabsterAttributes({\n focusable: {\n ignoreKeydown: {\n ArrowLeft: true,\n ArrowRight: true,\n },\n },\n });\n\n return {\n toggleInteractiveMode,\n columnId,\n getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n onKeyDown: keyboardHandler,\n onBlur: disableInteractiveMode,\n ref: getKeyboardResizingRef(colId),\n role: 'separator',\n 'aria-label': 'Resize column',\n 'aria-valuetext': `${currentWidth} pixels`,\n 'aria-hidden': colId === columnId ? false : true,\n tabIndex: colId === columnId ? 0 : undefined,\n ...tabsterAttrs,\n }),\n };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}
|
|
@@ -39,10 +39,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
39
39
|
handleResize
|
|
40
40
|
]);
|
|
41
41
|
React.useEffect(()=>{
|
|
42
|
-
return ()=>
|
|
43
|
-
var _resizeObserver;
|
|
44
|
-
return (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
|
|
45
|
-
};
|
|
42
|
+
return ()=>resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
46
43
|
}, [
|
|
47
44
|
resizeObserver
|
|
48
45
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n const [width, setWidth] = React.useState(0);\n const container = React.useRef<HTMLElement | undefined>(undefined);\n\n const { targetDocument } = useFluent();\n\n // the handler for resize observer\n const handleResize = React.useCallback(() => {\n const containerWidth = container.current?.getBoundingClientRect().width;\n setWidth(containerWidth || 0);\n }, []);\n\n // Keep the reference of ResizeObserver in the state, as it should live through renders\n const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n const measureElementRef = React.useCallback(\n (el: TElement | null) => {\n if (!targetDocument || !resizeObserver) {\n return;\n }\n\n // cleanup previous container\n if (container.current) {\n resizeObserver.unobserve(container.current);\n container.current.remove();\n }\n\n if (el) {\n container.current = targetDocument.createElement('div');\n el.insertAdjacentElement('beforebegin', container.current);\n resizeObserver.observe(container.current);\n handleResize();\n }\n },\n [targetDocument, resizeObserver, handleResize],\n );\n\n React.useEffect(() => {\n return () => resizeObserver?.disconnect();\n }, [resizeObserver]);\n\n return { width, measureElementRef };\n}\n"],"names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,4BAA4B;AACtD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC;IACd,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IACzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAE3B,kCAAkC;IAClC,MAAMS,eAAeX,MAAMY,WAAW,CAAC;YACdL;QAAvB,MAAMM,kBAAiBN,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBQ,qBAAqB,GAAGX,KAAK;QACvEC,SAASQ,kBAAkB;IAC7B,GAAG,EAAE;IAEL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGhB,MAAMM,QAAQ,CAACP,cAAc,IAAIkB,eAAeN,gBAAgBF;IACzF,MAAMS,oBAAoBlB,MAAMY,WAAW,CACzC,CAACO;QACC,IAAI,CAACT,kBAAkB,CAACM,gBAAgB;YACtC;QACF;QAEA,6BAA6B;QAC7B,IAAIT,UAAUO,OAAO,EAAE;YACrBE,eAAeI,SAAS,CAACb,UAAUO,OAAO;YAC1CP,UAAUO,OAAO,CAACO,MAAM;QAC1B;QAEA,IAAIF,IAAI;YACNZ,UAAUO,OAAO,GAAGJ,eAAeY,aAAa,CAAC;YACjDH,GAAGI,qBAAqB,CAAC,eAAehB,UAAUO,OAAO;YACzDE,eAAeQ,OAAO,CAACjB,UAAUO,OAAO;YACxCH;QACF;IACF,GACA;QAACD;QAAgBM;QAAgBL;KAAa;IAGhDX,MAAMyB,SAAS,CAAC;QACd,OAAO
|
|
1
|
+
{"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n const [width, setWidth] = React.useState(0);\n const container = React.useRef<HTMLElement | undefined>(undefined);\n\n const { targetDocument } = useFluent();\n\n // the handler for resize observer\n const handleResize = React.useCallback(() => {\n const containerWidth = container.current?.getBoundingClientRect().width;\n setWidth(containerWidth || 0);\n }, []);\n\n // Keep the reference of ResizeObserver in the state, as it should live through renders\n const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n const measureElementRef = React.useCallback(\n (el: TElement | null) => {\n if (!targetDocument || !resizeObserver) {\n return;\n }\n\n // cleanup previous container\n if (container.current) {\n resizeObserver.unobserve(container.current);\n container.current.remove();\n }\n\n if (el) {\n container.current = targetDocument.createElement('div');\n el.insertAdjacentElement('beforebegin', container.current);\n resizeObserver.observe(container.current);\n handleResize();\n }\n },\n [targetDocument, resizeObserver, handleResize],\n );\n\n React.useEffect(() => {\n return () => resizeObserver?.disconnect();\n }, [resizeObserver]);\n\n return { width, measureElementRef };\n}\n"],"names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,4BAA4B;AACtD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC;IACd,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IACzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAE3B,kCAAkC;IAClC,MAAMS,eAAeX,MAAMY,WAAW,CAAC;YACdL;QAAvB,MAAMM,kBAAiBN,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBQ,qBAAqB,GAAGX,KAAK;QACvEC,SAASQ,kBAAkB;IAC7B,GAAG,EAAE;IAEL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGhB,MAAMM,QAAQ,CAACP,cAAc,IAAIkB,eAAeN,gBAAgBF;IACzF,MAAMS,oBAAoBlB,MAAMY,WAAW,CACzC,CAACO;QACC,IAAI,CAACT,kBAAkB,CAACM,gBAAgB;YACtC;QACF;QAEA,6BAA6B;QAC7B,IAAIT,UAAUO,OAAO,EAAE;YACrBE,eAAeI,SAAS,CAACb,UAAUO,OAAO;YAC1CP,UAAUO,OAAO,CAACO,MAAM;QAC1B;QAEA,IAAIF,IAAI;YACNZ,UAAUO,OAAO,GAAGJ,eAAeY,aAAa,CAAC;YACjDH,GAAGI,qBAAqB,CAAC,eAAehB,UAAUO,OAAO;YACzDE,eAAeQ,OAAO,CAACjB,UAAUO,OAAO;YACxCH;QACF;IACF,GACA;QAACD;QAAgBM;QAAgBL;KAAa;IAGhDX,MAAMyB,SAAS,CAAC;QACd,OAAO,IAAMT,2BAAAA,qCAAAA,eAAgBU,UAAU;IACzC,GAAG;QAACV;KAAe;IAEnB,OAAO;QAAEZ;QAAOc;IAAkB;AACpC"}
|
|
@@ -2,12 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { getEventClientCoords, isMouseEvent, isTouchEvent } from '@fluentui/react-utilities';
|
|
4
4
|
export function useTableColumnResizeMouseHandler(columnResizeState) {
|
|
5
|
-
var _targetDocument, _globalWin;
|
|
6
5
|
const mouseX = React.useRef(0);
|
|
7
6
|
const currentWidth = React.useRef(0);
|
|
8
7
|
const colId = React.useRef(undefined);
|
|
9
8
|
const { targetDocument } = useFluent();
|
|
10
|
-
const globalWin =
|
|
9
|
+
const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
|
|
11
10
|
const recalculatePosition = React.useCallback((e)=>{
|
|
12
11
|
const { clientX } = getEventClientCoords(e);
|
|
13
12
|
const dx = clientX - mouseX.current;
|
|
@@ -22,27 +21,24 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
|
|
|
22
21
|
columnResizeState
|
|
23
22
|
]);
|
|
24
23
|
const onDrag = React.useCallback((e)=>{
|
|
25
|
-
var _globalWin;
|
|
26
24
|
// Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
|
|
27
|
-
if (typeof (
|
|
25
|
+
if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
|
|
28
26
|
requestAnimationFrame(()=>recalculatePosition(e));
|
|
29
27
|
} else {
|
|
30
28
|
recalculatePosition(e);
|
|
31
29
|
}
|
|
32
30
|
}, [
|
|
33
|
-
|
|
31
|
+
globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame,
|
|
34
32
|
recalculatePosition
|
|
35
33
|
]);
|
|
36
34
|
const onDragEnd = React.useCallback((event)=>{
|
|
37
35
|
if (isMouseEvent(event)) {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
(_targetDocument1 = targetDocument) === null || _targetDocument1 === void 0 ? void 0 : _targetDocument1.removeEventListener('mousemove', onDrag);
|
|
36
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);
|
|
37
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);
|
|
41
38
|
}
|
|
42
39
|
if (isTouchEvent(event)) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
(_targetDocument3 = targetDocument) === null || _targetDocument3 === void 0 ? void 0 : _targetDocument3.removeEventListener('touchmove', onDrag);
|
|
40
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);
|
|
41
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);
|
|
46
42
|
}
|
|
47
43
|
}, [
|
|
48
44
|
onDrag,
|
|
@@ -55,18 +51,16 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
|
|
|
55
51
|
mouseX.current = getEventClientCoords(event).clientX;
|
|
56
52
|
colId.current = columnId;
|
|
57
53
|
if (isMouseEvent(event)) {
|
|
58
|
-
var _targetDocument, _targetDocument1;
|
|
59
54
|
// ignore other buttons than primary mouse button
|
|
60
55
|
if (event.target !== event.currentTarget || event.button !== 0) {
|
|
61
56
|
return;
|
|
62
57
|
}
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);
|
|
59
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);
|
|
65
60
|
}
|
|
66
61
|
if (isTouchEvent(event)) {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
(_targetDocument3 = targetDocument) === null || _targetDocument3 === void 0 ? void 0 : _targetDocument3.addEventListener('touchmove', onDrag);
|
|
62
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
|
|
63
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
|
|
70
64
|
}
|
|
71
65
|
};
|
|
72
66
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n NativeTouchOrMouseEvent,\n ReactTouchOrMouseEvent,\n getEventClientCoords,\n isMouseEvent,\n isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n const { targetDocument } = useFluent();\n const globalWin = targetDocument?.defaultView;\n\n const recalculatePosition = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n const { clientX } = getEventClientCoords(e);\n const dx = clientX - mouseX.current;\n\n // Update the local width for the column and set it\n currentWidth.current += dx;\n colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n mouseX.current = clientX;\n },\n [columnResizeState],\n );\n\n const onDrag = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n if (typeof globalWin?.requestAnimationFrame === 'function') {\n requestAnimationFrame(() => recalculatePosition(e));\n } else {\n recalculatePosition(e);\n }\n },\n [globalWin?.requestAnimationFrame, recalculatePosition],\n );\n\n const onDragEnd = React.useCallback(\n (event: NativeTouchOrMouseEvent) => {\n if (isMouseEvent(event)) {\n targetDocument?.removeEventListener('mouseup', onDragEnd);\n targetDocument?.removeEventListener('mousemove', onDrag);\n }\n if (isTouchEvent(event)) {\n targetDocument?.removeEventListener('touchend', onDragEnd);\n targetDocument?.removeEventListener('touchmove', onDrag);\n }\n },\n [onDrag, targetDocument],\n );\n\n const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n // Keep the width locally so that we decouple the calculation of the next with from rendering.\n // This makes the whole experience much faster and more precise\n currentWidth.current = columnResizeState.getColumnWidth(columnId);\n mouseX.current = getEventClientCoords(event).clientX;\n colId.current = columnId;\n\n if (isMouseEvent(event)) {\n // ignore other buttons than primary mouse button\n if (event.target !== event.currentTarget || event.button !== 0) {\n return;\n }\n targetDocument?.addEventListener('mouseup', onDragEnd);\n targetDocument?.addEventListener('mousemove', onDrag);\n }\n\n if (isTouchEvent(event)) {\n targetDocument?.addEventListener('touchend', onDragEnd);\n targetDocument?.addEventListener('touchmove', onDrag);\n }\n };\n\n return {\n getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","
|
|
1
|
+
{"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n NativeTouchOrMouseEvent,\n ReactTouchOrMouseEvent,\n getEventClientCoords,\n isMouseEvent,\n isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n const { targetDocument } = useFluent();\n const globalWin = targetDocument?.defaultView;\n\n const recalculatePosition = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n const { clientX } = getEventClientCoords(e);\n const dx = clientX - mouseX.current;\n\n // Update the local width for the column and set it\n currentWidth.current += dx;\n colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n mouseX.current = clientX;\n },\n [columnResizeState],\n );\n\n const onDrag = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n if (typeof globalWin?.requestAnimationFrame === 'function') {\n requestAnimationFrame(() => recalculatePosition(e));\n } else {\n recalculatePosition(e);\n }\n },\n [globalWin?.requestAnimationFrame, recalculatePosition],\n );\n\n const onDragEnd = React.useCallback(\n (event: NativeTouchOrMouseEvent) => {\n if (isMouseEvent(event)) {\n targetDocument?.removeEventListener('mouseup', onDragEnd);\n targetDocument?.removeEventListener('mousemove', onDrag);\n }\n if (isTouchEvent(event)) {\n targetDocument?.removeEventListener('touchend', onDragEnd);\n targetDocument?.removeEventListener('touchmove', onDrag);\n }\n },\n [onDrag, targetDocument],\n );\n\n const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n // Keep the width locally so that we decouple the calculation of the next with from rendering.\n // This makes the whole experience much faster and more precise\n currentWidth.current = columnResizeState.getColumnWidth(columnId);\n mouseX.current = getEventClientCoords(event).clientX;\n colId.current = columnId;\n\n if (isMouseEvent(event)) {\n // ignore other buttons than primary mouse button\n if (event.target !== event.currentTarget || event.button !== 0) {\n return;\n }\n targetDocument?.addEventListener('mouseup', onDragEnd);\n targetDocument?.addEventListener('mousemove', onDrag);\n }\n\n if (isTouchEvent(event)) {\n targetDocument?.addEventListener('touchend', onDragEnd);\n targetDocument?.addEventListener('touchmove', onDrag);\n }\n };\n\n return {\n getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,QACP,4BAA4B;AAEnC,OAAO,SAASC,iCAAiCC,iBAAoC;IACnF,MAAMC,SAASR,MAAMS,MAAM,CAAC;IAC5B,MAAMC,eAAeV,MAAMS,MAAM,CAAC;IAClC,MAAME,QAAQX,MAAMS,MAAM,CAA4BG;IAEtD,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAMY,YAAYD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAE7C,MAAMC,sBAAsBhB,MAAMiB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGhB,qBAAqBe;QACzC,MAAME,KAAKD,UAAUX,OAAOa,OAAO;QAEnC,mDAAmD;QACnDX,aAAaW,OAAO,IAAID;QACxBT,MAAMU,OAAO,IAAId,kBAAkBe,cAAc,CAACJ,GAAG;YAAEK,UAAUZ,MAAMU,OAAO;YAAEG,OAAOd,aAAaW,OAAO;QAAC;QAC5Gb,OAAOa,OAAO,GAAGF;IACnB,GACA;QAACZ;KAAkB;IAGrB,MAAMkB,SAASzB,MAAMiB,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3F,IAAI,QAAOJ,sBAAAA,gCAAAA,UAAWY,qBAAqB,MAAK,YAAY;YAC1DA,sBAAsB,IAAMV,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB;IACF,GACA;QAACJ,sBAAAA,gCAAAA,UAAWY,qBAAqB;QAAEV;KAAoB;IAGzD,MAAMW,YAAY3B,MAAMiB,WAAW,CACjC,CAACW;QACC,IAAIxB,aAAawB,QAAQ;YACvBf,2BAAAA,qCAAAA,eAAgBgB,mBAAmB,CAAC,WAAWF;YAC/Cd,2BAAAA,qCAAAA,eAAgBgB,mBAAmB,CAAC,aAAaJ;QACnD;QACA,IAAIpB,aAAauB,QAAQ;YACvBf,2BAAAA,qCAAAA,eAAgBgB,mBAAmB,CAAC,YAAYF;YAChDd,2BAAAA,qCAAAA,eAAgBgB,mBAAmB,CAAC,aAAaJ;QACnD;IACF,GACA;QAACA;QAAQZ;KAAe;IAG1B,MAAMiB,iBAAiB,CAACP,WAA4B,CAACK;YACnD,8FAA8F;YAC9F,+DAA+D;YAC/DlB,aAAaW,OAAO,GAAGd,kBAAkBwB,cAAc,CAACR;YACxDf,OAAOa,OAAO,GAAGlB,qBAAqByB,OAAOT,OAAO;YACpDR,MAAMU,OAAO,GAAGE;YAEhB,IAAInB,aAAawB,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMI,MAAM,KAAKJ,MAAMK,aAAa,IAAIL,MAAMM,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACArB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,WAAWR;gBAC5Cd,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaV;YAChD;YAEA,IAAIpB,aAAauB,QAAQ;gBACvBf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,YAAYR;gBAC7Cd,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaV;YAChD;QACF;IAEA,OAAO;QACLK,gBAAgB,CAACP,WAA4BO,eAAeP;IAC9D;AACF"}
|
|
@@ -35,12 +35,11 @@ function getColumnStyles(column) {
|
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
37
|
function useTableColumnSizingState(tableState, params) {
|
|
38
|
-
var _params;
|
|
39
38
|
const { columns } = tableState;
|
|
40
39
|
// Gets the container width
|
|
41
40
|
const { width, measureElementRef } = useMeasureElement();
|
|
42
41
|
// Creates the state based on columns and available containerWidth
|
|
43
|
-
const columnResizeState = useTableColumnResizeState(columns, width + ((
|
|
42
|
+
const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);
|
|
44
43
|
// Creates the mouse handler and attaches the state to it
|
|
45
44
|
const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);
|
|
46
45
|
// Creates the keyboard handler for resizing columns
|
|
@@ -73,13 +72,13 @@ function useTableColumnSizingState(tableState, params) {
|
|
|
73
72
|
};
|
|
74
73
|
},
|
|
75
74
|
getTableHeaderCellProps: (columnId)=>{
|
|
76
|
-
var _columns_
|
|
75
|
+
var _columns_;
|
|
77
76
|
const col = columnResizeState.getColumnById(columnId);
|
|
78
77
|
const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;
|
|
79
78
|
const aside = isLastColumn ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {
|
|
80
79
|
onMouseDown: mouseHandler.getOnMouseDown(columnId),
|
|
81
80
|
onTouchStart: mouseHandler.getOnMouseDown(columnId),
|
|
82
|
-
...getKeyboardResizingProps(columnId, (
|
|
81
|
+
...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
|
|
83
82
|
});
|
|
84
83
|
return col ? {
|
|
85
84
|
style: getColumnStyles(col),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n ColumnWidthState,\n EnableKeyboardModeOnChangeCallback,\n TableColumnId,\n TableColumnSizingState,\n TableFeaturesState,\n UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n getColumnWidths: () => [],\n getOnMouseDown: () => () => null,\n setColumnWidth: () => null,\n getTableProps: () => ({}),\n getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n getTableCellProps: () => ({ style: {}, columnId: '' }),\n enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n const width = column.width;\n\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width,\n };\n}\n\nfunction useTableColumnSizingState<TItem>(\n tableState: TableFeaturesState<TItem>,\n params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n\n // Gets the container width\n const { width, measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n const enableKeyboardMode = React.useCallback(\n (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n (e: React.MouseEvent | React.TouchEvent) => {\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n },\n [toggleInteractiveMode],\n );\n\n return {\n ...tableState,\n tableRef: measureElementRef,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: {\n getOnMouseDown: mouseHandler.getOnMouseDown,\n setColumnWidth: (columnId: TableColumnId, w: number) =>\n columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n getColumnWidths: columnResizeState.getColumns,\n getTableProps: (props = {}) => {\n return {\n ...props,\n style: {\n minWidth: 'fit-content',\n ...(props.style || {}),\n },\n };\n },\n getTableHeaderCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n const aside = isLastColumn ? null : (\n <TableResizeHandle\n onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n {...getKeyboardResizingProps(columnId, col?.width || 0)}\n />\n );\n\n return col\n ? {\n style: getColumnStyles(col),\n aside,\n }\n : {};\n },\n getTableCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n return col ? { style: getColumnStyles(col) } : {};\n },\n enableKeyboardMode,\n },\n };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","props","col","getColumnById","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,uBAAuB;AAUzD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,OAAO,MAAMC,2BAAmD;IAC9DC,iBAAiB,IAAM,EAAE;IACzBC,gBAAgB,IAAM,IAAM;IAC5BC,gBAAgB,IAAM;IACtBC,eAAe,IAAO,CAAA,CAAC,CAAA;IACvBC,yBAAyB,IAAO,CAAA;YAAEC,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IAC1DC,mBAAmB,IAAO,CAAA;YAAEF,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IACpDE,oBAAoB,IAAM,IAAM;AAClC,EAAE;AAEF,OAAO,SAASC,8BAAqCC,MAAmC;IACtF,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,0BAA0BD,YAAYD;AAC1F;AAEA,SAASG,gBAAgBC,MAAwB;IAC/C,MAAMC,QAAQD,OAAOC,KAAK;IAE1B,OAAO;QACL,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACZ;AACF;AAEA,SAASH,0BACPD,UAAqC,EACrCD,MAAmC;
|
|
1
|
+
{"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n ColumnWidthState,\n EnableKeyboardModeOnChangeCallback,\n TableColumnId,\n TableColumnSizingState,\n TableFeaturesState,\n UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n getColumnWidths: () => [],\n getOnMouseDown: () => () => null,\n setColumnWidth: () => null,\n getTableProps: () => ({}),\n getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n getTableCellProps: () => ({ style: {}, columnId: '' }),\n enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n const width = column.width;\n\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width,\n };\n}\n\nfunction useTableColumnSizingState<TItem>(\n tableState: TableFeaturesState<TItem>,\n params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n\n // Gets the container width\n const { width, measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n const enableKeyboardMode = React.useCallback(\n (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n (e: React.MouseEvent | React.TouchEvent) => {\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n },\n [toggleInteractiveMode],\n );\n\n return {\n ...tableState,\n tableRef: measureElementRef,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: {\n getOnMouseDown: mouseHandler.getOnMouseDown,\n setColumnWidth: (columnId: TableColumnId, w: number) =>\n columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n getColumnWidths: columnResizeState.getColumns,\n getTableProps: (props = {}) => {\n return {\n ...props,\n style: {\n minWidth: 'fit-content',\n ...(props.style || {}),\n },\n };\n },\n getTableHeaderCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n const aside = isLastColumn ? null : (\n <TableResizeHandle\n onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n {...getKeyboardResizingProps(columnId, col?.width || 0)}\n />\n );\n\n return col\n ? {\n style: getColumnStyles(col),\n aside,\n }\n : {};\n },\n getTableCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n return col ? { style: getColumnStyles(col) } : {};\n },\n enableKeyboardMode,\n },\n };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","props","col","getColumnById","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}
|
|
@@ -16,12 +16,11 @@ export const defaultTableState = {
|
|
|
16
16
|
};
|
|
17
17
|
export function useTableFeatures(options, plugins = []) {
|
|
18
18
|
const { items, getRowId, columns } = options;
|
|
19
|
-
var _getRowId;
|
|
20
19
|
const getRows = (rowEnhancer = defaultRowEnhancer)=>items.map((item, i)=>{
|
|
21
|
-
var
|
|
20
|
+
var _getRowId;
|
|
22
21
|
return rowEnhancer({
|
|
23
22
|
item,
|
|
24
|
-
rowId: (_getRowId =
|
|
23
|
+
rowId: (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i
|
|
25
24
|
});
|
|
26
25
|
});
|
|
27
26
|
const initialState = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n UseTableFeaturesOptions,\n TableFeaturesState,\n TableRowData,\n RowEnhancer,\n TableFeaturePlugin,\n TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n selection: defaultTableSelectionState,\n sort: defaultTableSortState,\n getRows: () => [],\n getRowId: () => '',\n items: [],\n columns: [],\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: defaultColumnSizingState,\n tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n options: UseTableFeaturesOptions<TItem>,\n plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n const { items, getRowId, columns } = options;\n\n const getRows = <TRowState extends TableRowData<TItem>>(\n rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n const initialState: TableFeaturesState<TItem> = {\n getRowId,\n items,\n columns,\n getRows,\n selection: defaultTableSelectionState,\n sort: defaultTableSortState as TableSortState<TItem>,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: defaultColumnSizingState,\n tableRef: React.createRef(),\n };\n\n return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,MAAMC,qBAAkEC,CAAAA,MAAOA;AAE/E,OAAO,MAAMC,oBAAiD;IAC5DC,WAAWN;IACXO,MAAMN;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV;IACvBW,UAAUd,MAAMe,SAAS;AAC3B,EAAE;AAEF,OAAO,SAASC,iBACdC,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;
|
|
1
|
+
{"version":3,"sources":["useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n UseTableFeaturesOptions,\n TableFeaturesState,\n TableRowData,\n RowEnhancer,\n TableFeaturePlugin,\n TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n selection: defaultTableSelectionState,\n sort: defaultTableSortState,\n getRows: () => [],\n getRowId: () => '',\n items: [],\n columns: [],\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: defaultColumnSizingState,\n tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n options: UseTableFeaturesOptions<TItem>,\n plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n const { items, getRowId, columns } = options;\n\n const getRows = <TRowState extends TableRowData<TItem>>(\n rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n const initialState: TableFeaturesState<TItem> = {\n getRowId,\n items,\n columns,\n getRows,\n selection: defaultTableSelectionState,\n sort: defaultTableSortState as TableSortState<TItem>,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: defaultColumnSizingState,\n tableRef: React.createRef(),\n };\n\n return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,MAAMC,qBAAkEC,CAAAA,MAAOA;AAE/E,OAAO,MAAMC,oBAAiD;IAC5DC,WAAWN;IACXO,MAAMN;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV;IACvBW,UAAUd,MAAMe,SAAS;AAC3B,EAAE;AAEF,OAAO,SAASC,iBACdC,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;IAErC,MAAMR,UAAU,CACdU,cAAcf,kBAAmD,GAC9DO,MAAMS,GAAG,CAAC,CAACC,MAAMC;gBAAiCZ;mBAA3BS,YAAY;gBAAEE;gBAAME,OAAOb,CAAAA,YAAAA,qBAAAA,+BAAAA,SAAWW,mBAAXX,uBAAAA,YAAoBY;YAAE;QAAC;IAE9E,MAAME,eAA0C;QAC9Cd;QACAC;QACAC;QACAH;QACAF,WAAWN;QACXO,MAAMN;QACN,gEAAgE;QAChEW,uBAAuBV;QACvBW,UAAUd,MAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQO,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D"}
|
|
@@ -32,8 +32,7 @@ export function useTableSelectionState(tableState, options) {
|
|
|
32
32
|
const rowIds = new Set();
|
|
33
33
|
for(let i = 0; i < items.length; i++){
|
|
34
34
|
var _getRowId;
|
|
35
|
-
|
|
36
|
-
rowIds.add((_getRowId1 = (_getRowId = getRowId) === null || _getRowId === void 0 ? void 0 : _getRowId(items[i])) !== null && _getRowId1 !== void 0 ? _getRowId1 : i);
|
|
35
|
+
rowIds.add((_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(items[i])) !== null && _getRowId !== void 0 ? _getRowId : i);
|
|
37
36
|
}
|
|
38
37
|
return rowIds;
|
|
39
38
|
}, [
|
|
@@ -77,10 +76,9 @@ export function useTableSelectionState(tableState, options) {
|
|
|
77
76
|
selected
|
|
78
77
|
]);
|
|
79
78
|
const toggleAllRows = useEventCallback((e)=>{
|
|
80
|
-
var _getRowId;
|
|
81
79
|
selectionMethods.toggleAllItems(e, items.map((item, i)=>{
|
|
82
|
-
var
|
|
83
|
-
return (_getRowId =
|
|
80
|
+
var _getRowId;
|
|
81
|
+
return (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i;
|
|
84
82
|
}));
|
|
85
83
|
});
|
|
86
84
|
const toggleRow = useEventCallback((e, rowId)=>selectionMethods.toggleItem(e, rowId));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableSelection.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionHookParams, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport type { TableRowId, TableSelectionState, TableFeaturesState } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n allRowsSelected: false,\n clearRows: noop,\n deselectRow: noop,\n isRowSelected: () => false,\n selectRow: noop,\n selectedRows: new Set(),\n someRowsSelected: false,\n toggleAllRows: noop,\n toggleRow: noop,\n selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(options: SelectionHookParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n tableState: TableFeaturesState<TItem>,\n options: SelectionHookParams,\n): TableFeaturesState<TItem> {\n const { items, getRowId } = tableState;\n const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n const [selected, selectionMethods] = useSelection({\n selectionMode,\n defaultSelectedItems,\n selectedItems,\n onSelectionChange,\n });\n\n // Selection state can contain obselete items (i.e. rows that are removed)\n const selectableRowIds = React.useMemo(() => {\n const rowIds = new Set<TableRowId>();\n for (let i = 0; i < items.length; i++) {\n rowIds.add(getRowId?.(items[i]) ?? i);\n }\n\n return rowIds;\n }, [items, getRowId]);\n\n const allRowsSelected = React.useMemo(() => {\n if (selectionMode === 'single') {\n const selectedRow = Array.from(selected)[0];\n return selectableRowIds.has(selectedRow);\n }\n\n // multiselect case\n if (selected.size < selectableRowIds.size) {\n return false;\n }\n\n let res = true;\n selectableRowIds.forEach(selectableRowId => {\n if (!selected.has(selectableRowId)) {\n res = false;\n }\n });\n\n return res;\n }, [selectableRowIds, selected, selectionMode]);\n\n const someRowsSelected = React.useMemo(() => {\n if (selected.size <= 0) {\n return false;\n }\n\n let res = false;\n selectableRowIds.forEach(selectableRowId => {\n if (selected.has(selectableRowId)) {\n res = true;\n }\n });\n\n return res;\n }, [selectableRowIds, selected]);\n\n const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n selectionMethods.toggleAllItems(\n e,\n items.map((item, i) => getRowId?.(item) ?? i),\n );\n });\n\n const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: TableRowId) =>\n selectionMethods.toggleItem(e, rowId),\n );\n\n const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: TableRowId) =>\n selectionMethods.deselectItem(e, rowId),\n );\n\n const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: TableRowId) =>\n selectionMethods.selectItem(e, rowId),\n );\n\n const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: TableRowId) => selectionMethods.isSelected(rowId);\n\n const clearRows: TableSelectionState['clearRows'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n return {\n ...tableState,\n selection: {\n selectionMode,\n someRowsSelected,\n allRowsSelected,\n selectedRows: selected,\n toggleRow,\n toggleAllRows,\n clearRows,\n deselectRow,\n selectRow,\n isRowSelected,\n },\n };\n}\n"],"names":["React","useEventCallback","useSelection","noop","undefined","defaultTableSelectionState","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","useTableSelection","options","tableState","useTableSelectionState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","selectableRowIds","useMemo","rowIds","i","length","add","selectedRow","Array","from","has","size","res","forEach","selectableRowId","e","toggleAllItems","map","item","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AAGhG,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,6BAAkD;IAC7DC,iBAAiB;IACjBC,WAAWJ;IACXK,aAAaL;IACbM,eAAe,IAAM;IACrBC,WAAWP;IACXQ,cAAc,IAAIC;IAClBC,kBAAkB;IAClBC,eAAeX;IACfY,WAAWZ;IACXa,eAAe;AACjB,EAAE;AAEF,OAAO,SAASC,kBAAyBC,OAA4B;IACnE,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,uBAAuBD,YAAYD;AACvF;AAEA,OAAO,SAASE,uBACdD,UAAqC,EACrCD,OAA4B;IAE5B,MAAM,EAAEG,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAC5B,MAAM,EAAEH,eAAeA,aAAa,EAAEO,oBAAoB,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGP;IAEjG,MAAM,CAACQ,UAAUC,iBAAiB,GAAGzB,aAAa;QAChDc;QACAO;QACAC;QACAC;IACF;IAEA,0EAA0E;IAC1E,MAAMG,mBAAmB5B,MAAM6B,OAAO,CAAC;QACrC,MAAMC,SAAS,IAAIlB;QACnB,IAAK,IAAImB,IAAI,GAAGA,IAAIV,MAAMW,MAAM,EAAED,IAAK;gBAC1BT;
|
|
1
|
+
{"version":3,"sources":["useTableSelection.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionHookParams, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport type { TableRowId, TableSelectionState, TableFeaturesState } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n allRowsSelected: false,\n clearRows: noop,\n deselectRow: noop,\n isRowSelected: () => false,\n selectRow: noop,\n selectedRows: new Set(),\n someRowsSelected: false,\n toggleAllRows: noop,\n toggleRow: noop,\n selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(options: SelectionHookParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n tableState: TableFeaturesState<TItem>,\n options: SelectionHookParams,\n): TableFeaturesState<TItem> {\n const { items, getRowId } = tableState;\n const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n const [selected, selectionMethods] = useSelection({\n selectionMode,\n defaultSelectedItems,\n selectedItems,\n onSelectionChange,\n });\n\n // Selection state can contain obselete items (i.e. rows that are removed)\n const selectableRowIds = React.useMemo(() => {\n const rowIds = new Set<TableRowId>();\n for (let i = 0; i < items.length; i++) {\n rowIds.add(getRowId?.(items[i]) ?? i);\n }\n\n return rowIds;\n }, [items, getRowId]);\n\n const allRowsSelected = React.useMemo(() => {\n if (selectionMode === 'single') {\n const selectedRow = Array.from(selected)[0];\n return selectableRowIds.has(selectedRow);\n }\n\n // multiselect case\n if (selected.size < selectableRowIds.size) {\n return false;\n }\n\n let res = true;\n selectableRowIds.forEach(selectableRowId => {\n if (!selected.has(selectableRowId)) {\n res = false;\n }\n });\n\n return res;\n }, [selectableRowIds, selected, selectionMode]);\n\n const someRowsSelected = React.useMemo(() => {\n if (selected.size <= 0) {\n return false;\n }\n\n let res = false;\n selectableRowIds.forEach(selectableRowId => {\n if (selected.has(selectableRowId)) {\n res = true;\n }\n });\n\n return res;\n }, [selectableRowIds, selected]);\n\n const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n selectionMethods.toggleAllItems(\n e,\n items.map((item, i) => getRowId?.(item) ?? i),\n );\n });\n\n const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: TableRowId) =>\n selectionMethods.toggleItem(e, rowId),\n );\n\n const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: TableRowId) =>\n selectionMethods.deselectItem(e, rowId),\n );\n\n const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: TableRowId) =>\n selectionMethods.selectItem(e, rowId),\n );\n\n const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: TableRowId) => selectionMethods.isSelected(rowId);\n\n const clearRows: TableSelectionState['clearRows'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n return {\n ...tableState,\n selection: {\n selectionMode,\n someRowsSelected,\n allRowsSelected,\n selectedRows: selected,\n toggleRow,\n toggleAllRows,\n clearRows,\n deselectRow,\n selectRow,\n isRowSelected,\n },\n };\n}\n"],"names":["React","useEventCallback","useSelection","noop","undefined","defaultTableSelectionState","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","useTableSelection","options","tableState","useTableSelectionState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","selectableRowIds","useMemo","rowIds","i","length","add","selectedRow","Array","from","has","size","res","forEach","selectableRowId","e","toggleAllItems","map","item","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection"],"mappings":"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"}
|
|
@@ -30,7 +30,6 @@ export function useTableSortState(tableState, options) {
|
|
|
30
30
|
const { sortColumn, sortDirection } = sorted;
|
|
31
31
|
const toggleColumnSort = (e, columnId)=>{
|
|
32
32
|
setSorted((s)=>{
|
|
33
|
-
var _onSortChange;
|
|
34
33
|
const newState = {
|
|
35
34
|
...s,
|
|
36
35
|
sortColumn: columnId
|
|
@@ -40,24 +39,22 @@ export function useTableSortState(tableState, options) {
|
|
|
40
39
|
} else {
|
|
41
40
|
newState.sortDirection = 'ascending';
|
|
42
41
|
}
|
|
43
|
-
|
|
42
|
+
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
|
|
44
43
|
return newState;
|
|
45
44
|
});
|
|
46
45
|
};
|
|
47
46
|
const setColumnSort = (e, nextSortColumn, nextSortDirection)=>{
|
|
48
|
-
var _onSortChange;
|
|
49
47
|
const newState = {
|
|
50
48
|
sortColumn: nextSortColumn,
|
|
51
49
|
sortDirection: nextSortDirection
|
|
52
50
|
};
|
|
53
|
-
|
|
51
|
+
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
|
|
54
52
|
setSorted(newState);
|
|
55
53
|
};
|
|
56
54
|
const sort = (rows)=>{
|
|
57
55
|
return rows.slice().sort((a, b)=>{
|
|
58
|
-
var _sortColumnDef;
|
|
59
56
|
const sortColumnDef = columns.find((column)=>column.columnId === sortColumn);
|
|
60
|
-
if (!(
|
|
57
|
+
if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {
|
|
61
58
|
return 0;
|
|
62
59
|
}
|
|
63
60
|
const mod = sortDirection === 'ascending' ? 1 : -1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableSort.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type {\n TableColumnId,\n TableRowData,\n SortState,\n TableSortState,\n TableFeaturesState,\n UseTableSortOptions,\n} from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n getSortDirection: () => 'ascending',\n setColumnSort: noop,\n sort: <TRowState extends TableRowData<unknown>>(rows: TRowState[]) => [...rows],\n sortColumn: undefined,\n sortDirection: 'ascending',\n toggleColumnSort: noop,\n};\n\nexport function useTableSort<TItem>(options: UseTableSortOptions) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableSortState(tableState, options);\n}\n\nexport function useTableSortState<TItem>(\n tableState: TableFeaturesState<TItem>,\n options: UseTableSortOptions,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n const { sortState, defaultSortState, onSortChange } = options;\n\n const [sorted, setSorted] = useControllableState<SortState>({\n initialState: {\n sortDirection: 'ascending' as const,\n sortColumn: undefined,\n },\n defaultState: defaultSortState,\n state: sortState,\n });\n\n const { sortColumn, sortDirection } = sorted;\n\n const toggleColumnSort = (e: React.SyntheticEvent, columnId: TableColumnId | undefined) => {\n setSorted(s => {\n const newState = { ...s, sortColumn: columnId };\n if (s.sortColumn === columnId) {\n newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n } else {\n newState.sortDirection = 'ascending';\n }\n\n onSortChange?.(e, newState);\n return newState;\n });\n };\n\n const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n onSortChange?.(e, newState);\n setSorted(newState);\n };\n\n const sort = <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => {\n return rows.slice().sort((a, b) => {\n const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n if (!sortColumnDef?.compare) {\n return 0;\n }\n\n const mod = sortDirection === 'ascending' ? 1 : -1;\n return sortColumnDef.compare(a.item, b.item) * mod;\n });\n };\n\n const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: TableColumnId) => {\n return sortColumn === columnId ? sortDirection : undefined;\n };\n\n return {\n ...tableState,\n sort: {\n sort,\n sortColumn,\n sortDirection,\n setColumnSort,\n toggleColumnSort,\n getSortDirection,\n },\n };\n}\n"],"names":["React","useControllableState","noop","undefined","defaultTableSortState","getSortDirection","setColumnSort","sort","rows","sortColumn","sortDirection","toggleColumnSort","useTableSort","options","tableState","useTableSortState","columns","sortState","defaultSortState","onSortChange","sorted","setSorted","initialState","defaultState","state","e","columnId","s","newState","nextSortColumn","nextSortDirection","slice","a","b","sortColumnDef","find","column","compare","mod","item"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,4BAA4B;AAUjE,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,wBAAiD;IAC5DC,kBAAkB,IAAM;IACxBC,eAAeJ;IACfK,MAAM,CAA0CC,OAAsB;eAAIA;SAAK;IAC/EC,YAAYN;IACZO,eAAe;IACfC,kBAAkBT;AACpB,EAAE;AAEF,OAAO,SAASU,aAAoBC,OAA4B;IAC9D,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,kBAAkBD,YAAYD;AAClF;AAEA,OAAO,SAASE,kBACdD,UAAqC,EACrCD,OAA4B;IAE5B,MAAM,EAAEG,OAAO,EAAE,GAAGF;IACpB,MAAM,EAAEG,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGN;IAEtD,MAAM,CAACO,QAAQC,UAAU,GAAGpB,qBAAgC;QAC1DqB,cAAc;YACZZ,eAAe;YACfD,YAAYN;QACd;QACAoB,cAAcL;QACdM,OAAOP;IACT;IAEA,MAAM,EAAER,UAAU,EAAEC,aAAa,EAAE,GAAGU;IAEtC,MAAMT,mBAAmB,CAACc,GAAyBC;QACjDL,UAAUM,CAAAA;
|
|
1
|
+
{"version":3,"sources":["useTableSort.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type {\n TableColumnId,\n TableRowData,\n SortState,\n TableSortState,\n TableFeaturesState,\n UseTableSortOptions,\n} from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n getSortDirection: () => 'ascending',\n setColumnSort: noop,\n sort: <TRowState extends TableRowData<unknown>>(rows: TRowState[]) => [...rows],\n sortColumn: undefined,\n sortDirection: 'ascending',\n toggleColumnSort: noop,\n};\n\nexport function useTableSort<TItem>(options: UseTableSortOptions) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableSortState(tableState, options);\n}\n\nexport function useTableSortState<TItem>(\n tableState: TableFeaturesState<TItem>,\n options: UseTableSortOptions,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n const { sortState, defaultSortState, onSortChange } = options;\n\n const [sorted, setSorted] = useControllableState<SortState>({\n initialState: {\n sortDirection: 'ascending' as const,\n sortColumn: undefined,\n },\n defaultState: defaultSortState,\n state: sortState,\n });\n\n const { sortColumn, sortDirection } = sorted;\n\n const toggleColumnSort = (e: React.SyntheticEvent, columnId: TableColumnId | undefined) => {\n setSorted(s => {\n const newState = { ...s, sortColumn: columnId };\n if (s.sortColumn === columnId) {\n newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n } else {\n newState.sortDirection = 'ascending';\n }\n\n onSortChange?.(e, newState);\n return newState;\n });\n };\n\n const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n onSortChange?.(e, newState);\n setSorted(newState);\n };\n\n const sort = <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => {\n return rows.slice().sort((a, b) => {\n const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n if (!sortColumnDef?.compare) {\n return 0;\n }\n\n const mod = sortDirection === 'ascending' ? 1 : -1;\n return sortColumnDef.compare(a.item, b.item) * mod;\n });\n };\n\n const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: TableColumnId) => {\n return sortColumn === columnId ? sortDirection : undefined;\n };\n\n return {\n ...tableState,\n sort: {\n sort,\n sortColumn,\n sortDirection,\n setColumnSort,\n toggleColumnSort,\n getSortDirection,\n },\n };\n}\n"],"names":["React","useControllableState","noop","undefined","defaultTableSortState","getSortDirection","setColumnSort","sort","rows","sortColumn","sortDirection","toggleColumnSort","useTableSort","options","tableState","useTableSortState","columns","sortState","defaultSortState","onSortChange","sorted","setSorted","initialState","defaultState","state","e","columnId","s","newState","nextSortColumn","nextSortDirection","slice","a","b","sortColumnDef","find","column","compare","mod","item"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,4BAA4B;AAUjE,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,wBAAiD;IAC5DC,kBAAkB,IAAM;IACxBC,eAAeJ;IACfK,MAAM,CAA0CC,OAAsB;eAAIA;SAAK;IAC/EC,YAAYN;IACZO,eAAe;IACfC,kBAAkBT;AACpB,EAAE;AAEF,OAAO,SAASU,aAAoBC,OAA4B;IAC9D,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,kBAAkBD,YAAYD;AAClF;AAEA,OAAO,SAASE,kBACdD,UAAqC,EACrCD,OAA4B;IAE5B,MAAM,EAAEG,OAAO,EAAE,GAAGF;IACpB,MAAM,EAAEG,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGN;IAEtD,MAAM,CAACO,QAAQC,UAAU,GAAGpB,qBAAgC;QAC1DqB,cAAc;YACZZ,eAAe;YACfD,YAAYN;QACd;QACAoB,cAAcL;QACdM,OAAOP;IACT;IAEA,MAAM,EAAER,UAAU,EAAEC,aAAa,EAAE,GAAGU;IAEtC,MAAMT,mBAAmB,CAACc,GAAyBC;QACjDL,UAAUM,CAAAA;YACR,MAAMC,WAAW;gBAAE,GAAGD,CAAC;gBAAElB,YAAYiB;YAAS;YAC9C,IAAIC,EAAElB,UAAU,KAAKiB,UAAU;gBAC7BE,SAASlB,aAAa,GAAGiB,EAAEjB,aAAa,KAAK,cAAc,eAAe;YAC5E,OAAO;gBACLkB,SAASlB,aAAa,GAAG;YAC3B;YAEAS,yBAAAA,mCAAAA,aAAeM,GAAGG;YAClB,OAAOA;QACT;IACF;IAEA,MAAMtB,gBAAwD,CAACmB,GAAGI,gBAAgBC;QAChF,MAAMF,WAAW;YAAEnB,YAAYoB;YAAgBnB,eAAeoB;QAAkB;QAChFX,yBAAAA,mCAAAA,aAAeM,GAAGG;QAClBP,UAAUO;IACZ;IAEA,MAAMrB,OAAO,CAAwCC;QACnD,OAAOA,KAAKuB,KAAK,GAAGxB,IAAI,CAAC,CAACyB,GAAGC;YAC3B,MAAMC,gBAAgBlB,QAAQmB,IAAI,CAACC,CAAAA,SAAUA,OAAOV,QAAQ,KAAKjB;YACjE,IAAI,EAACyB,0BAAAA,oCAAAA,cAAeG,OAAO,GAAE;gBAC3B,OAAO;YACT;YAEA,MAAMC,MAAM5B,kBAAkB,cAAc,IAAI,CAAC;YACjD,OAAOwB,cAAcG,OAAO,CAACL,EAAEO,IAAI,EAAEN,EAAEM,IAAI,IAAID;QACjD;IACF;IAEA,MAAMjC,mBAA8D,CAACqB;QACnE,OAAOjB,eAAeiB,WAAWhB,gBAAgBP;IACnD;IAEA,OAAO;QACL,GAAGW,UAAU;QACbP,MAAM;YACJA;YACAE;YACAC;YACAJ;YACAK;YACAN;QACF;IACF;AACF"}
|
|
@@ -69,10 +69,9 @@ export function getLength(state) {
|
|
|
69
69
|
return state.length;
|
|
70
70
|
}
|
|
71
71
|
export function getColumnWidth(state, columnId) {
|
|
72
|
-
var _column;
|
|
73
72
|
const column = getColumnById(state, columnId);
|
|
74
73
|
var _column_width;
|
|
75
|
-
return (_column_width =
|
|
74
|
+
return (_column_width = column === null || column === void 0 ? void 0 : column.width) !== null && _column_width !== void 0 ? _column_width : 0;
|
|
76
75
|
}
|
|
77
76
|
/**
|
|
78
77
|
* This function takes the current state and returns an updated state, so that it can be set.
|
|
@@ -86,9 +85,8 @@ export function getColumnWidth(state, columnId) {
|
|
|
86
85
|
* @param value
|
|
87
86
|
* @returns
|
|
88
87
|
*/ export function setColumnProperty(localState, columnId, property, value) {
|
|
89
|
-
var _currentColumn;
|
|
90
88
|
const currentColumn = getColumnById(localState, columnId);
|
|
91
|
-
if (!currentColumn || (
|
|
89
|
+
if (!currentColumn || (currentColumn === null || currentColumn === void 0 ? void 0 : currentColumn[property]) === value) {
|
|
92
90
|
return localState;
|
|
93
91
|
}
|
|
94
92
|
const updatedColumn = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["columnResizeUtils.ts"],"sourcesContent":["import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n * - It uses existing state for existing columns.\n * - It removes any state for columns no longer present.\n * - It checks if any column has been replaced and returns updated state if so\n * - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n columns: TableColumnDefinition<T>[],\n state: ColumnWidthState[] = [],\n columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n let updated = false;\n const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n const updatedState = columns.map(column => {\n const existingColumnState = stateMap.get(column.columnId);\n\n if (existingColumnState) {\n const {\n idealWidth = existingColumnState.idealWidth,\n minWidth = existingColumnState.minWidth,\n padding = existingColumnState.padding,\n } = columnSizingOptions[column.columnId] ?? {};\n\n if (\n idealWidth !== existingColumnState.idealWidth ||\n minWidth !== existingColumnState.minWidth ||\n padding !== existingColumnState.padding\n ) {\n updated = true;\n return {\n ...existingColumnState,\n idealWidth,\n width: idealWidth,\n minWidth,\n padding,\n };\n }\n return existingColumnState;\n }\n\n const {\n defaultWidth,\n idealWidth = DEFAULT_WIDTH,\n minWidth = DEFAULT_MIN_WIDTH,\n padding,\n } = columnSizingOptions[column.columnId] ?? {};\n\n updated = true;\n return {\n columnId: column.columnId,\n width: Math.max(defaultWidth ?? idealWidth, minWidth),\n minWidth,\n idealWidth: Math.max(defaultWidth ?? idealWidth, minWidth),\n padding: padding ?? 16,\n };\n });\n\n // If the length of the new state changed (column was added or removed) or any of\n // the individual states has a new reference (column was replaced),\n // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n if (updatedState.length !== state.length || updated) {\n const column = updatedState.find(col => col.width > col.idealWidth);\n if (column) {\n column.width = column.idealWidth;\n }\n\n updated = true;\n }\n\n return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId) {\n return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number) {\n return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]) {\n return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n const column = getColumnById(state, columnId);\n return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n localState: ColumnWidthState[],\n columnId: TableColumnId,\n property: keyof ColumnWidthState,\n value: number,\n) {\n const currentColumn = getColumnById(localState, columnId);\n\n if (!currentColumn || currentColumn?.[property] === value) {\n return localState;\n }\n\n const updatedColumn = { ...currentColumn, [property]: value };\n\n const newState = localState.reduce((acc, current) => {\n if (current.columnId === updatedColumn.columnId) {\n return [...acc, updatedColumn];\n }\n return [...acc, current];\n }, [] as ColumnWidthState[]);\n\n return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(state: ColumnWidthState[], containerWidth: number) {\n let newState = state;\n const totalWidth = getTotalWidth(newState);\n\n // The total width is smaller, we are expanding columns\n if (totalWidth < containerWidth) {\n let difference = containerWidth - totalWidth;\n let i = 0;\n // We start at the beginning and assign the columns their ideal width\n while (i < newState.length && difference > 0) {\n const currentCol = getColumnByIndex(newState, i);\n const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n difference -= colAdjustment;\n\n // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n if (i === newState.length - 1 && difference !== 0) {\n const lastCol = getColumnByIndex(newState, i);\n newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n }\n\n i++;\n }\n }\n\n // The total width is larger than container, we need to squash the columns\n else if (totalWidth >= containerWidth) {\n let difference = totalWidth - containerWidth;\n // We start with the last column\n let j = newState.length - 1;\n while (j >= 0 && difference > 0) {\n const currentCol = getColumnByIndex(newState, j);\n if (currentCol.width > currentCol.minWidth) {\n const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n difference -= colAdjustment;\n newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n }\n j--;\n }\n }\n\n return newState;\n}\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","Math","max","length","find","col","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","min","lastCol","j"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["columnResizeUtils.ts"],"sourcesContent":["import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n * - It uses existing state for existing columns.\n * - It removes any state for columns no longer present.\n * - It checks if any column has been replaced and returns updated state if so\n * - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n columns: TableColumnDefinition<T>[],\n state: ColumnWidthState[] = [],\n columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n let updated = false;\n const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n const updatedState = columns.map(column => {\n const existingColumnState = stateMap.get(column.columnId);\n\n if (existingColumnState) {\n const {\n idealWidth = existingColumnState.idealWidth,\n minWidth = existingColumnState.minWidth,\n padding = existingColumnState.padding,\n } = columnSizingOptions[column.columnId] ?? {};\n\n if (\n idealWidth !== existingColumnState.idealWidth ||\n minWidth !== existingColumnState.minWidth ||\n padding !== existingColumnState.padding\n ) {\n updated = true;\n return {\n ...existingColumnState,\n idealWidth,\n width: idealWidth,\n minWidth,\n padding,\n };\n }\n return existingColumnState;\n }\n\n const {\n defaultWidth,\n idealWidth = DEFAULT_WIDTH,\n minWidth = DEFAULT_MIN_WIDTH,\n padding,\n } = columnSizingOptions[column.columnId] ?? {};\n\n updated = true;\n return {\n columnId: column.columnId,\n width: Math.max(defaultWidth ?? idealWidth, minWidth),\n minWidth,\n idealWidth: Math.max(defaultWidth ?? idealWidth, minWidth),\n padding: padding ?? 16,\n };\n });\n\n // If the length of the new state changed (column was added or removed) or any of\n // the individual states has a new reference (column was replaced),\n // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n if (updatedState.length !== state.length || updated) {\n const column = updatedState.find(col => col.width > col.idealWidth);\n if (column) {\n column.width = column.idealWidth;\n }\n\n updated = true;\n }\n\n return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId) {\n return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number) {\n return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]) {\n return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n const column = getColumnById(state, columnId);\n return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n localState: ColumnWidthState[],\n columnId: TableColumnId,\n property: keyof ColumnWidthState,\n value: number,\n) {\n const currentColumn = getColumnById(localState, columnId);\n\n if (!currentColumn || currentColumn?.[property] === value) {\n return localState;\n }\n\n const updatedColumn = { ...currentColumn, [property]: value };\n\n const newState = localState.reduce((acc, current) => {\n if (current.columnId === updatedColumn.columnId) {\n return [...acc, updatedColumn];\n }\n return [...acc, current];\n }, [] as ColumnWidthState[]);\n\n return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(state: ColumnWidthState[], containerWidth: number) {\n let newState = state;\n const totalWidth = getTotalWidth(newState);\n\n // The total width is smaller, we are expanding columns\n if (totalWidth < containerWidth) {\n let difference = containerWidth - totalWidth;\n let i = 0;\n // We start at the beginning and assign the columns their ideal width\n while (i < newState.length && difference > 0) {\n const currentCol = getColumnByIndex(newState, i);\n const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n difference -= colAdjustment;\n\n // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n if (i === newState.length - 1 && difference !== 0) {\n const lastCol = getColumnByIndex(newState, i);\n newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n }\n\n i++;\n }\n }\n\n // The total width is larger than container, we need to squash the columns\n else if (totalWidth >= containerWidth) {\n let difference = totalWidth - containerWidth;\n // We start with the last column\n let j = newState.length - 1;\n while (j >= 0 && difference > 0) {\n const currentCol = getColumnByIndex(newState, j);\n if (currentCol.width > currentCol.minWidth) {\n const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n difference -= colAdjustment;\n newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n }\n j--;\n }\n }\n\n return newState;\n}\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","Math","max","length","find","col","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","min","lastCol","j"],"mappings":"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"}
|