@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.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/package.json +12 -14
- package/types/VirtualColSpan.d.ts +2 -2
- package/types/cell-renderers/toggle-cell/ToggleCell.d.ts +1 -1
- package/types/useTable.d.ts +3 -3
- package/cjs/CellFocusState.js +0 -45
- package/cjs/CellFocusState.js.map +0 -1
- package/cjs/Row.js +0 -116
- package/cjs/Row.js.map +0 -1
- package/cjs/Table.css.js +0 -6
- package/cjs/Table.css.js.map +0 -1
- package/cjs/Table.js +0 -455
- package/cjs/Table.js.map +0 -1
- package/cjs/VirtualColSpan.js +0 -19
- package/cjs/VirtualColSpan.js.map +0 -1
- package/cjs/applyHighlighting.js +0 -33
- package/cjs/applyHighlighting.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.css.js +0 -6
- package/cjs/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.js +0 -107
- package/cjs/bulk-edit/BulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js +0 -6
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +0 -1
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js +0 -80
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js.map +0 -1
- package/cjs/bulk-edit/InsertNewRowEditor.css.js +0 -6
- package/cjs/bulk-edit/InsertNewRowEditor.css.js.map +0 -1
- package/cjs/bulk-edit/InsertNewRowEditor.js +0 -80
- package/cjs/bulk-edit/InsertNewRowEditor.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +0 -70
- package/cjs/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/useColumnCascadingEditor.js +0 -143
- package/cjs/bulk-edit/useColumnCascadingEditor.js.map +0 -1
- package/cjs/cell-block/CellBlock.css.js +0 -6
- package/cjs/cell-block/CellBlock.css.js.map +0 -1
- package/cjs/cell-block/CellBlock.js +0 -45
- package/cjs/cell-block/CellBlock.js.map +0 -1
- package/cjs/cell-block/cellblock-utils.js +0 -125
- package/cjs/cell-block/cellblock-utils.js.map +0 -1
- package/cjs/cell-block/useCellBlockSelection.js +0 -257
- package/cjs/cell-block/useCellBlockSelection.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +0 -67
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -51
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.css.js +0 -6
- package/cjs/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.js +0 -63
- package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/useInputCell.js +0 -211
- package/cjs/cell-renderers/input-cell/useInputCell.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js +0 -6
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js +0 -66
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.css.js +0 -6
- package/cjs/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.js +0 -53
- package/cjs/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.css.js +0 -6
- package/cjs/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.js +0 -29
- package/cjs/column-header-pill/GroupColumnPill.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.css.js +0 -6
- package/cjs/column-header-pill/SortIndicator.css.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.js +0 -27
- package/cjs/column-header-pill/SortIndicator.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.css.js +0 -6
- package/cjs/column-resizing/ColumnResizer.css.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.js +0 -82
- package/cjs/column-resizing/ColumnResizer.js.map +0 -1
- package/cjs/column-resizing/useTableColumnResize.js +0 -55
- package/cjs/column-resizing/useTableColumnResize.js.map +0 -1
- package/cjs/data-row/DataRow.js +0 -262
- package/cjs/data-row/DataRow.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.css.js +0 -6
- package/cjs/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.js +0 -127
- package/cjs/header-cell/GroupHeaderCell.js.map +0 -1
- package/cjs/header-cell/HeaderCell.css.js +0 -6
- package/cjs/header-cell/HeaderCell.css.js.map +0 -1
- package/cjs/header-cell/HeaderCell.js +0 -139
- package/cjs/header-cell/HeaderCell.js.map +0 -1
- package/cjs/index.js +0 -64
- package/cjs/index.js.map +0 -1
- package/cjs/pagination/PaginationControl.css.js +0 -6
- package/cjs/pagination/PaginationControl.css.js.map +0 -1
- package/cjs/pagination/PaginationControl.js +0 -38
- package/cjs/pagination/PaginationControl.js.map +0 -1
- package/cjs/pagination/usePagination.js +0 -36
- package/cjs/pagination/usePagination.js.map +0 -1
- package/cjs/table-cell/TableCell.css.js +0 -6
- package/cjs/table-cell/TableCell.css.js.map +0 -1
- package/cjs/table-cell/TableCell.js +0 -75
- package/cjs/table-cell/TableCell.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.css.js +0 -6
- package/cjs/table-cell/TableGroupCell.css.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.js +0 -65
- package/cjs/table-cell/TableGroupCell.js.map +0 -1
- package/cjs/table-config/useTableConfig.js +0 -67
- package/cjs/table-config/useTableConfig.js.map +0 -1
- package/cjs/table-config.js +0 -35
- package/cjs/table-config.js.map +0 -1
- package/cjs/table-data-source/DataRowMovingWindow.js +0 -99
- package/cjs/table-data-source/DataRowMovingWindow.js.map +0 -1
- package/cjs/table-data-source/useDataSource.js +0 -236
- package/cjs/table-data-source/useDataSource.js.map +0 -1
- package/cjs/table-dom-utils.js +0 -206
- package/cjs/table-dom-utils.js.map +0 -1
- package/cjs/table-header/HeaderProvider.js +0 -18
- package/cjs/table-header/HeaderProvider.js.map +0 -1
- package/cjs/table-header/TableHeader.js +0 -180
- package/cjs/table-header/TableHeader.js.map +0 -1
- package/cjs/table-header/useTableHeader.js +0 -87
- package/cjs/table-header/useTableHeader.js.map +0 -1
- package/cjs/useCell.js +0 -26
- package/cjs/useCell.js.map +0 -1
- package/cjs/useCellEditing.js +0 -77
- package/cjs/useCellEditing.js.map +0 -1
- package/cjs/useCellFocus.js +0 -119
- package/cjs/useCellFocus.js.map +0 -1
- package/cjs/useControlledTableNavigation.js +0 -46
- package/cjs/useControlledTableNavigation.js.map +0 -1
- package/cjs/useEditableCell.js +0 -27
- package/cjs/useEditableCell.js.map +0 -1
- package/cjs/useKeyboardNavigation.js +0 -323
- package/cjs/useKeyboardNavigation.js.map +0 -1
- package/cjs/useMeasuredHeight.js +0 -51
- package/cjs/useMeasuredHeight.js.map +0 -1
- package/cjs/useRowClassNameGenerators.js +0 -34
- package/cjs/useRowClassNameGenerators.js.map +0 -1
- package/cjs/useSelection.js +0 -130
- package/cjs/useSelection.js.map +0 -1
- package/cjs/useTable.js +0 -742
- package/cjs/useTable.js.map +0 -1
- package/cjs/useTableContextMenu.js +0 -76
- package/cjs/useTableContextMenu.js.map +0 -1
- package/cjs/useTableModel.js +0 -421
- package/cjs/useTableModel.js.map +0 -1
- package/cjs/useTableScroll.js +0 -464
- package/cjs/useTableScroll.js.map +0 -1
- package/cjs/useTableViewport.js +0 -137
- package/cjs/useTableViewport.js.map +0 -1
- package/esm/CellFocusState.js +0 -43
- package/esm/CellFocusState.js.map +0 -1
- package/esm/Row.js +0 -114
- package/esm/Row.js.map +0 -1
- package/esm/Table.css.js +0 -4
- package/esm/Table.css.js.map +0 -1
- package/esm/Table.js +0 -453
- package/esm/Table.js.map +0 -1
- package/esm/VirtualColSpan.js +0 -17
- package/esm/VirtualColSpan.js.map +0 -1
- package/esm/applyHighlighting.js +0 -31
- package/esm/applyHighlighting.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.css.js +0 -4
- package/esm/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.js +0 -105
- package/esm/bulk-edit/BulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js +0 -4
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +0 -1
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.js +0 -78
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.js.map +0 -1
- package/esm/bulk-edit/InsertNewRowEditor.css.js +0 -4
- package/esm/bulk-edit/InsertNewRowEditor.css.js.map +0 -1
- package/esm/bulk-edit/InsertNewRowEditor.js +0 -78
- package/esm/bulk-edit/InsertNewRowEditor.js.map +0 -1
- package/esm/bulk-edit/useBulkEditPanel.js +0 -68
- package/esm/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/useColumnCascadingEditor.js +0 -141
- package/esm/bulk-edit/useColumnCascadingEditor.js.map +0 -1
- package/esm/cell-block/CellBlock.css.js +0 -4
- package/esm/cell-block/CellBlock.css.js.map +0 -1
- package/esm/cell-block/CellBlock.js +0 -43
- package/esm/cell-block/CellBlock.js.map +0 -1
- package/esm/cell-block/cellblock-utils.js +0 -116
- package/esm/cell-block/cellblock-utils.js.map +0 -1
- package/esm/cell-block/useCellBlockSelection.js +0 -255
- package/esm/cell-block/useCellBlockSelection.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +0 -65
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -49
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.css.js +0 -4
- package/esm/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.js +0 -61
- package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/useInputCell.js +0 -209
- package/esm/cell-renderers/input-cell/useInputCell.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js +0 -4
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.js +0 -64
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.css.js +0 -4
- package/esm/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.js +0 -51
- package/esm/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.css.js +0 -4
- package/esm/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.js +0 -27
- package/esm/column-header-pill/GroupColumnPill.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.css.js +0 -4
- package/esm/column-header-pill/SortIndicator.css.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.js +0 -25
- package/esm/column-header-pill/SortIndicator.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.css.js +0 -4
- package/esm/column-resizing/ColumnResizer.css.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.js +0 -80
- package/esm/column-resizing/ColumnResizer.js.map +0 -1
- package/esm/column-resizing/useTableColumnResize.js +0 -53
- package/esm/column-resizing/useTableColumnResize.js.map +0 -1
- package/esm/data-row/DataRow.js +0 -260
- package/esm/data-row/DataRow.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.css.js +0 -4
- package/esm/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.js +0 -125
- package/esm/header-cell/GroupHeaderCell.js.map +0 -1
- package/esm/header-cell/HeaderCell.css.js +0 -4
- package/esm/header-cell/HeaderCell.css.js.map +0 -1
- package/esm/header-cell/HeaderCell.js +0 -137
- package/esm/header-cell/HeaderCell.js.map +0 -1
- package/esm/index.js +0 -27
- package/esm/index.js.map +0 -1
- package/esm/pagination/PaginationControl.css.js +0 -4
- package/esm/pagination/PaginationControl.css.js.map +0 -1
- package/esm/pagination/PaginationControl.js +0 -36
- package/esm/pagination/PaginationControl.js.map +0 -1
- package/esm/pagination/usePagination.js +0 -34
- package/esm/pagination/usePagination.js.map +0 -1
- package/esm/table-cell/TableCell.css.js +0 -4
- package/esm/table-cell/TableCell.css.js.map +0 -1
- package/esm/table-cell/TableCell.js +0 -73
- package/esm/table-cell/TableCell.js.map +0 -1
- package/esm/table-cell/TableGroupCell.css.js +0 -4
- package/esm/table-cell/TableGroupCell.css.js.map +0 -1
- package/esm/table-cell/TableGroupCell.js +0 -63
- package/esm/table-cell/TableGroupCell.js.map +0 -1
- package/esm/table-config/useTableConfig.js +0 -65
- package/esm/table-config/useTableConfig.js.map +0 -1
- package/esm/table-config.js +0 -33
- package/esm/table-config.js.map +0 -1
- package/esm/table-data-source/DataRowMovingWindow.js +0 -97
- package/esm/table-data-source/DataRowMovingWindow.js.map +0 -1
- package/esm/table-data-source/useDataSource.js +0 -234
- package/esm/table-data-source/useDataSource.js.map +0 -1
- package/esm/table-dom-utils.js +0 -188
- package/esm/table-dom-utils.js.map +0 -1
- package/esm/table-header/HeaderProvider.js +0 -15
- package/esm/table-header/HeaderProvider.js.map +0 -1
- package/esm/table-header/TableHeader.js +0 -178
- package/esm/table-header/TableHeader.js.map +0 -1
- package/esm/table-header/useTableHeader.js +0 -85
- package/esm/table-header/useTableHeader.js.map +0 -1
- package/esm/useCell.js +0 -24
- package/esm/useCell.js.map +0 -1
- package/esm/useCellEditing.js +0 -75
- package/esm/useCellEditing.js.map +0 -1
- package/esm/useCellFocus.js +0 -117
- package/esm/useCellFocus.js.map +0 -1
- package/esm/useControlledTableNavigation.js +0 -43
- package/esm/useControlledTableNavigation.js.map +0 -1
- package/esm/useEditableCell.js +0 -25
- package/esm/useEditableCell.js.map +0 -1
- package/esm/useKeyboardNavigation.js +0 -319
- package/esm/useKeyboardNavigation.js.map +0 -1
- package/esm/useMeasuredHeight.js +0 -49
- package/esm/useMeasuredHeight.js.map +0 -1
- package/esm/useRowClassNameGenerators.js +0 -32
- package/esm/useRowClassNameGenerators.js.map +0 -1
- package/esm/useSelection.js +0 -128
- package/esm/useSelection.js.map +0 -1
- package/esm/useTable.js +0 -740
- package/esm/useTable.js.map +0 -1
- package/esm/useTableContextMenu.js +0 -73
- package/esm/useTableContextMenu.js.map +0 -1
- package/esm/useTableModel.js +0 -419
- package/esm/useTableModel.js.map +0 -1
- package/esm/useTableScroll.js +0 -461
- package/esm/useTableScroll.js.map +0 -1
- package/esm/useTableViewport.js +0 -135
- package/esm/useTableViewport.js.map +0 -1
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var styles = require('@salt-ds/styles');
|
|
5
|
-
var window = require('@salt-ds/window');
|
|
6
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
-
var react = require('react');
|
|
8
|
-
var GroupHeaderCell = require('../header-cell/GroupHeaderCell.js');
|
|
9
|
-
var HeaderCell$1 = require('../header-cell/HeaderCell.js');
|
|
10
|
-
var HeaderProvider = require('./HeaderProvider.js');
|
|
11
|
-
var useTableHeader = require('./useTableHeader.js');
|
|
12
|
-
var HeaderCell = require('../header-cell/HeaderCell.css.js');
|
|
13
|
-
|
|
14
|
-
const isHeaderElement = (h) => react.isValidElement(h);
|
|
15
|
-
const classBase = "vuuTableHeader";
|
|
16
|
-
const TableHeader = react.memo(
|
|
17
|
-
({
|
|
18
|
-
HeaderCell: HeaderCell$2 = HeaderCell$1.HeaderCell,
|
|
19
|
-
allowDragColumnHeader,
|
|
20
|
-
allowSelectAll,
|
|
21
|
-
allRowsSelected,
|
|
22
|
-
columns,
|
|
23
|
-
customHeader,
|
|
24
|
-
headings,
|
|
25
|
-
onCheckBoxColumnHeaderClick,
|
|
26
|
-
onHeightMeasured,
|
|
27
|
-
onMoveColumn,
|
|
28
|
-
onMoveGroupColumn,
|
|
29
|
-
onRemoveGroupColumn,
|
|
30
|
-
onResizeColumn,
|
|
31
|
-
onSortColumn,
|
|
32
|
-
showBookends,
|
|
33
|
-
showColumnHeaderMenus,
|
|
34
|
-
tableConfig,
|
|
35
|
-
tableId,
|
|
36
|
-
virtualColSpan = 0
|
|
37
|
-
}) => {
|
|
38
|
-
const targetWindow = window.useWindow();
|
|
39
|
-
styles.useComponentCssInjection({
|
|
40
|
-
testId: "vuu-table-header-cell",
|
|
41
|
-
css: HeaderCell,
|
|
42
|
-
window: targetWindow
|
|
43
|
-
});
|
|
44
|
-
const [customHeaders, customHeaderCount] = react.useMemo(() => {
|
|
45
|
-
const offset = headings.length;
|
|
46
|
-
const createElement = (Component, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
-
Component,
|
|
48
|
-
{
|
|
49
|
-
ariaRowIndex: offset + index + 2,
|
|
50
|
-
ariaRole: "row",
|
|
51
|
-
columns,
|
|
52
|
-
virtualColSpan
|
|
53
|
-
},
|
|
54
|
-
index
|
|
55
|
-
);
|
|
56
|
-
const enrichElementWithAria = (el, rowIndex) => {
|
|
57
|
-
const offset2 = headings.length;
|
|
58
|
-
return react.cloneElement(el, {
|
|
59
|
-
"aria-rowindex": rowIndex + offset2 + 2,
|
|
60
|
-
ariaRole: "row"
|
|
61
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
62
|
-
});
|
|
63
|
-
};
|
|
64
|
-
if (customHeader === void 0) {
|
|
65
|
-
return [null, 0];
|
|
66
|
-
} else if (Array.isArray(customHeader)) {
|
|
67
|
-
const header = /* @__PURE__ */ jsxRuntime.jsx(HeaderProvider.HeaderProvider, { columns, virtualColSpan, children: customHeader.map(
|
|
68
|
-
(header2, i) => isHeaderElement(header2) ? enrichElementWithAria(header2, i) : createElement(header2, i)
|
|
69
|
-
) });
|
|
70
|
-
return [header, customHeader.length];
|
|
71
|
-
} else if (isHeaderElement(customHeader)) {
|
|
72
|
-
const header = /* @__PURE__ */ jsxRuntime.jsx(HeaderProvider.HeaderProvider, { columns, virtualColSpan, children: enrichElementWithAria(customHeader, 0) });
|
|
73
|
-
return [header, 1];
|
|
74
|
-
} else {
|
|
75
|
-
return [createElement(customHeader, 0), 1];
|
|
76
|
-
}
|
|
77
|
-
}, [columns, customHeader, headings.length, virtualColSpan]);
|
|
78
|
-
const { dragColumn, onClick, onDragEnd, onDragStart, setContainerRef } = useTableHeader.useTableHeader({
|
|
79
|
-
columns,
|
|
80
|
-
customHeaderCount,
|
|
81
|
-
headings,
|
|
82
|
-
onHeightMeasured,
|
|
83
|
-
onMoveColumn,
|
|
84
|
-
onSortColumn,
|
|
85
|
-
tableConfig
|
|
86
|
-
});
|
|
87
|
-
const visibleColumns = columns.filter(vuuUtils.isNotHidden);
|
|
88
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, ref: setContainerRef, role: "rowgroup", children: [
|
|
89
|
-
headings.map((colHeaders, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
90
|
-
"div",
|
|
91
|
-
{
|
|
92
|
-
className: "vuuTable-heading",
|
|
93
|
-
role: "row",
|
|
94
|
-
"aria-rowindex": i + 1,
|
|
95
|
-
children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j))
|
|
96
|
-
},
|
|
97
|
-
i
|
|
98
|
-
)),
|
|
99
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
100
|
-
vuuUtils.DragDropProvider,
|
|
101
|
-
{
|
|
102
|
-
onDragEnd,
|
|
103
|
-
onDragStart,
|
|
104
|
-
modifiers: [vuuUtils.RestrictToHorizontalAxis],
|
|
105
|
-
sensors: [
|
|
106
|
-
vuuUtils.KeyboardSensor.configure({
|
|
107
|
-
keyboardCodes: {
|
|
108
|
-
start: ["Space"],
|
|
109
|
-
cancel: ["Escape"],
|
|
110
|
-
end: ["Space", "Enter"],
|
|
111
|
-
left: ["ArrowLeft"],
|
|
112
|
-
right: ["ArrowRight"],
|
|
113
|
-
up: [],
|
|
114
|
-
down: []
|
|
115
|
-
}
|
|
116
|
-
}),
|
|
117
|
-
vuuUtils.PointerSensor
|
|
118
|
-
],
|
|
119
|
-
children: [
|
|
120
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
121
|
-
"div",
|
|
122
|
-
{
|
|
123
|
-
className: "vuuTableColHeaderRow",
|
|
124
|
-
role: "row",
|
|
125
|
-
"aria-rowindex": headings.length + 1,
|
|
126
|
-
children: [
|
|
127
|
-
showBookends ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuSelectionDecorator vuuStickyLeft" }) : null,
|
|
128
|
-
visibleColumns.map((col, i) => {
|
|
129
|
-
const allowDragDrop = allowDragColumnHeader && !col.pin ? true : false;
|
|
130
|
-
return vuuUtils.isGroupColumn(col) ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
131
|
-
GroupHeaderCell.GroupHeaderCell,
|
|
132
|
-
{
|
|
133
|
-
column: col,
|
|
134
|
-
id: `${tableId}-${col.name}`,
|
|
135
|
-
onMoveColumn: onMoveGroupColumn,
|
|
136
|
-
onRemoveColumn: onRemoveGroupColumn,
|
|
137
|
-
onResize: onResizeColumn
|
|
138
|
-
},
|
|
139
|
-
col.name
|
|
140
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
141
|
-
HeaderCell$2,
|
|
142
|
-
{
|
|
143
|
-
allowDragColumnHeader: allowDragDrop,
|
|
144
|
-
allowSelectAll,
|
|
145
|
-
allRowsSelected,
|
|
146
|
-
column: col,
|
|
147
|
-
index: i,
|
|
148
|
-
id: `${tableId}-${col.name}`,
|
|
149
|
-
onCheckBoxColumnHeaderClick,
|
|
150
|
-
onClick,
|
|
151
|
-
onResize: onResizeColumn,
|
|
152
|
-
showColumnHeaderMenus
|
|
153
|
-
},
|
|
154
|
-
`${col.name}-${allowDragDrop}`
|
|
155
|
-
);
|
|
156
|
-
}),
|
|
157
|
-
showBookends ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuSelectionDecorator vuuStickyRight" }) : null
|
|
158
|
-
]
|
|
159
|
-
}
|
|
160
|
-
),
|
|
161
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUtils.DragOverlay, { children: dragColumn ? /* @__PURE__ */ jsxRuntime.jsx("div", { id: dragColumn.id, className: "DragColumn", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
162
|
-
HeaderCell$2,
|
|
163
|
-
{
|
|
164
|
-
column: dragColumn.column,
|
|
165
|
-
className: "vuuDragging",
|
|
166
|
-
id: `${tableId}-${dragColumn.id}-dragging`,
|
|
167
|
-
index: -1
|
|
168
|
-
}
|
|
169
|
-
) }) : null })
|
|
170
|
-
]
|
|
171
|
-
}
|
|
172
|
-
),
|
|
173
|
-
customHeaders
|
|
174
|
-
] });
|
|
175
|
-
}
|
|
176
|
-
);
|
|
177
|
-
TableHeader.displayName = "TableHeader";
|
|
178
|
-
|
|
179
|
-
exports.TableHeader = TableHeader;
|
|
180
|
-
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../../../packages/vuu-table/src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport {\n DragDropProvider,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n RestrictToHorizontalAxis,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n ColumnDescriptor,\n ColumnMoveHandler,\n CustomHeader,\n CustomHeaderComponent,\n CustomHeaderElement,\n HeaderCellProps,\n RuntimeColumnDescriptor,\n TableColumnResizeHandler,\n TableConfig,\n TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport {\n cloneElement,\n FC,\n isValidElement,\n memo,\n ReactElement,\n useMemo,\n} from \"react\";\nimport {\n GroupHeaderCell,\n HeaderCell as DefaultHeaderCell,\n} from \"../header-cell\";\nimport { HeaderProvider } from \"./HeaderProvider\";\nimport { useTableHeader } from \"./useTableHeader\";\n\n// We import headercell css once here so it is available to custom\n// headercell implementations.\nimport headerCellCss from \"../header-cell/HeaderCell.css\";\n\nexport type ColumnSortHandler = (\n column: ColumnDescriptor,\n addToExistingSort: boolean,\n sortType?: VuuSortType,\n) => void;\n\nconst isHeaderElement = (h: CustomHeader): h is CustomHeaderElement =>\n isValidElement(h);\n\nconst classBase = \"vuuTableHeader\";\n\nexport interface TableHeaderProps\n extends Pick<\n HeaderCellProps,\n | \"allRowsSelected\"\n | \"allowDragColumnHeader\"\n | \"allowSelectAll\"\n | \"onCheckBoxColumnHeaderClick\"\n | \"showColumnHeaderMenus\"\n > {\n HeaderCell?: FC<HeaderCellProps>;\n columns: RuntimeColumnDescriptor[];\n customHeader?: CustomHeader | CustomHeader[];\n headings: TableHeadings;\n onHeightMeasured: (height: number, count: number) => void;\n onResizeColumn: TableColumnResizeHandler;\n onMoveColumn: ColumnMoveHandler;\n onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n onSortColumn: ColumnSortHandler;\n showBookends?: boolean;\n tableConfig: TableConfig;\n tableId: string;\n virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n ({\n HeaderCell = DefaultHeaderCell,\n allowDragColumnHeader,\n allowSelectAll,\n allRowsSelected,\n columns,\n customHeader,\n headings,\n onCheckBoxColumnHeaderClick,\n onHeightMeasured,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onSortColumn,\n showBookends,\n showColumnHeaderMenus,\n tableConfig,\n tableId,\n virtualColSpan = 0,\n }: TableHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const [customHeaders, customHeaderCount] = useMemo<\n [ReactElement | ReactElement[] | null, number]\n >(() => {\n const offset = headings.length;\n const createElement = (\n Component: CustomHeaderComponent,\n index: number,\n ) => (\n <Component\n ariaRowIndex={offset + index + 2}\n ariaRole=\"row\"\n columns={columns}\n key={index}\n virtualColSpan={virtualColSpan}\n />\n );\n\n const enrichElementWithAria = (el: ReactElement, rowIndex: number) => {\n const offset = headings.length;\n return cloneElement(el, {\n \"aria-rowindex\": rowIndex + offset + 2,\n ariaRole: \"row\",\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } as any);\n };\n\n if (customHeader === undefined) {\n return [null, 0];\n } else if (Array.isArray(customHeader)) {\n const header = (\n <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n {customHeader.map((header, i) =>\n isHeaderElement(header)\n ? enrichElementWithAria(header, i)\n : createElement(header, i),\n )}\n </HeaderProvider>\n );\n return [header, customHeader.length];\n } else if (isHeaderElement(customHeader)) {\n // TODO rowIndex and role\n const header = (\n <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n {enrichElementWithAria(customHeader, 0)}\n </HeaderProvider>\n );\n return [header, 1];\n } else {\n return [createElement(customHeader, 0), 1];\n }\n }, [columns, customHeader, headings.length, virtualColSpan]);\n\n const { dragColumn, onClick, onDragEnd, onDragStart, setContainerRef } =\n useTableHeader({\n columns,\n customHeaderCount,\n headings,\n onHeightMeasured,\n onMoveColumn,\n onSortColumn,\n tableConfig,\n });\n\n const visibleColumns = columns.filter(isNotHidden);\n\n return (\n <div className={classBase} ref={setContainerRef} role=\"rowgroup\">\n {headings.map((colHeaders, i) => (\n <div\n className=\"vuuTable-heading\"\n key={i}\n role=\"row\"\n aria-rowindex={i + 1}\n >\n {colHeaders.map(({ label, width }, j) => (\n <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n {label}\n </div>\n ))}\n </div>\n ))}\n <DragDropProvider // whats the difference between this and DnDContext\n onDragEnd={onDragEnd}\n onDragStart={onDragStart}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore typing error from dnd-kit\n modifiers={[RestrictToHorizontalAxis]}\n sensors={[\n KeyboardSensor.configure({\n keyboardCodes: {\n start: [\"Space\"],\n cancel: [\"Escape\"],\n end: [\"Space\", \"Enter\"],\n left: [\"ArrowLeft\"],\n right: [\"ArrowRight\"],\n up: [],\n down: [],\n },\n }),\n PointerSensor,\n ]}\n >\n <div\n className=\"vuuTableColHeaderRow\"\n role=\"row\"\n aria-rowindex={headings.length + 1}\n >\n {showBookends ? (\n <div className=\"vuuSelectionDecorator vuuStickyLeft\" />\n ) : null}\n\n {visibleColumns.map((col, i) => {\n const allowDragDrop =\n allowDragColumnHeader && !col.pin ? true : false;\n return isGroupColumn(col) ? (\n <GroupHeaderCell\n column={col}\n id={`${tableId}-${col.name}`}\n key={col.name}\n onMoveColumn={onMoveGroupColumn}\n onRemoveColumn={onRemoveGroupColumn}\n onResize={onResizeColumn}\n />\n ) : (\n <HeaderCell\n allowDragColumnHeader={allowDragDrop}\n allowSelectAll={allowSelectAll}\n allRowsSelected={allRowsSelected}\n column={col}\n index={i}\n id={`${tableId}-${col.name}`}\n key={`${col.name}-${allowDragDrop}`}\n onCheckBoxColumnHeaderClick={onCheckBoxColumnHeaderClick}\n onClick={onClick}\n onResize={onResizeColumn}\n showColumnHeaderMenus={showColumnHeaderMenus}\n />\n );\n })}\n {showBookends ? (\n <div className=\"vuuSelectionDecorator vuuStickyRight\" />\n ) : null}\n </div>\n\n <DragOverlay>\n {dragColumn ? (\n <div id={dragColumn.id} className=\"DragColumn\">\n <HeaderCell\n column={dragColumn.column}\n className=\"vuuDragging\"\n id={`${tableId}-${dragColumn.id}-dragging`}\n index={-1}\n />\n </div>\n ) : null}\n </DragOverlay>\n </DragDropProvider>\n {customHeaders}\n </div>\n );\n },\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":["isValidElement","memo","HeaderCell","DefaultHeaderCell","useWindow","useComponentCssInjection","headerCellCss","useMemo","jsx","offset","cloneElement","HeaderProvider","header","useTableHeader","isNotHidden","jsxs","DragDropProvider","RestrictToHorizontalAxis","KeyboardSensor","PointerSensor","isGroupColumn","GroupHeaderCell","DragOverlay"],"mappings":"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"}
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var useMeasuredHeight = require('../useMeasuredHeight.js');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
|
|
8
|
-
const useTableHeader = ({
|
|
9
|
-
columns,
|
|
10
|
-
customHeaderCount,
|
|
11
|
-
headings,
|
|
12
|
-
onHeightMeasured,
|
|
13
|
-
onMoveColumn,
|
|
14
|
-
onSortColumn
|
|
15
|
-
}) => {
|
|
16
|
-
const containerRef = react.useRef(null);
|
|
17
|
-
const scrollingContainerRef = react.useRef(null);
|
|
18
|
-
const [dragColumn, setDragColumn] = react.useState(null);
|
|
19
|
-
const handleHeightMeasured = react.useCallback(
|
|
20
|
-
(height) => {
|
|
21
|
-
onHeightMeasured(height, customHeaderCount + headings.length + 1);
|
|
22
|
-
},
|
|
23
|
-
[customHeaderCount, headings, onHeightMeasured]
|
|
24
|
-
);
|
|
25
|
-
const { measuredRef: rowRef } = useMeasuredHeight.useMeasuredHeight({
|
|
26
|
-
onHeightMeasured: handleHeightMeasured
|
|
27
|
-
});
|
|
28
|
-
const setContainerRef = react.useCallback((el) => {
|
|
29
|
-
containerRef.current = el;
|
|
30
|
-
if (el) {
|
|
31
|
-
scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
|
|
32
|
-
} else {
|
|
33
|
-
scrollingContainerRef.current = null;
|
|
34
|
-
}
|
|
35
|
-
}, []);
|
|
36
|
-
const handleDragStart = react.useCallback(
|
|
37
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
38
|
-
(evt) => {
|
|
39
|
-
const element = evt.operation.source;
|
|
40
|
-
const columnName = element.id.split("-").at(-1);
|
|
41
|
-
const column = columns.find((col) => col.name === columnName);
|
|
42
|
-
if (column === void 0) {
|
|
43
|
-
throw Error(`[useTableHeader] No column '${columnName}'`);
|
|
44
|
-
}
|
|
45
|
-
setDragColumn({ column, id: element.id });
|
|
46
|
-
},
|
|
47
|
-
[columns]
|
|
48
|
-
);
|
|
49
|
-
const handleDragEnd = react.useCallback(() => {
|
|
50
|
-
setTimeout(() => {
|
|
51
|
-
const listItems = containerRef.current?.querySelectorAll(
|
|
52
|
-
".vuuTableHeaderCell"
|
|
53
|
-
);
|
|
54
|
-
if (listItems && dragColumn?.column) {
|
|
55
|
-
const orderedColumnNames = Array.from(listItems).map(
|
|
56
|
-
({ dataset }) => dataset.columnName
|
|
57
|
-
);
|
|
58
|
-
onMoveColumn(
|
|
59
|
-
dragColumn?.column.name,
|
|
60
|
-
vuuUtils.reorderColumnItems(columns, orderedColumnNames)
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
}, 300);
|
|
64
|
-
}, [columns, dragColumn, onMoveColumn]);
|
|
65
|
-
const handleColumnHeaderClick = react.useCallback(
|
|
66
|
-
(evt) => {
|
|
67
|
-
const headerCell = vuuUtils.queryClosest(evt.target, ".vuuTableHeaderCell");
|
|
68
|
-
const colIdx = parseInt(headerCell?.dataset.index ?? "-1");
|
|
69
|
-
const column = vuuUtils.visibleColumnAtIndex(columns, colIdx);
|
|
70
|
-
if (column && column.sortable !== false) {
|
|
71
|
-
const isAdditive = evt.shiftKey;
|
|
72
|
-
onSortColumn(column, isAdditive);
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
[columns, onSortColumn]
|
|
76
|
-
);
|
|
77
|
-
return {
|
|
78
|
-
dragColumn,
|
|
79
|
-
onClick: handleColumnHeaderClick,
|
|
80
|
-
onDragEnd: handleDragEnd,
|
|
81
|
-
onDragStart: handleDragStart,
|
|
82
|
-
setContainerRef: core.useForkRef(setContainerRef, rowRef)
|
|
83
|
-
};
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
exports.useTableHeader = useTableHeader;
|
|
87
|
-
//# sourceMappingURL=useTableHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTableHeader.js","sources":["../../../../packages/vuu-table/src/table-header/useTableHeader.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n queryClosest,\n reorderColumnItems,\n visibleColumnAtIndex,\n} from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useRef, useState } from \"react\";\nimport { TableHeaderProps } from \"./TableHeader\";\nimport { useMeasuredHeight } from \"../useMeasuredHeight\";\nimport { useForkRef } from \"@salt-ds/core\";\n\nexport interface TableHeaderHookProps\n extends Pick<\n TableHeaderProps,\n \"columns\" | \"onMoveColumn\" | \"onSortColumn\" | \"tableConfig\"\n > {\n customHeaderCount: number;\n headings: TableHeadings;\n label?: string;\n onHeightMeasured: (height: number, customHeaderCount: number) => void;\n onMoveColumn: (columnName: string, columns: ColumnDescriptor[]) => void;\n onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport type DragColumn = {\n id: string;\n column: RuntimeColumnDescriptor;\n};\n\nexport const useTableHeader = ({\n columns,\n customHeaderCount,\n headings,\n onHeightMeasured,\n onMoveColumn,\n onSortColumn,\n}: TableHeaderHookProps) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\n const [dragColumn, setDragColumn] = useState<DragColumn | null>(null);\n\n const handleHeightMeasured = useCallback(\n (height: number) => {\n onHeightMeasured(height, customHeaderCount + headings.length + 1);\n },\n [customHeaderCount, headings, onHeightMeasured],\n );\n\n const { measuredRef: rowRef } = useMeasuredHeight({\n onHeightMeasured: handleHeightMeasured,\n });\n\n const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n containerRef.current = el;\n if (el) {\n scrollingContainerRef.current = el.closest(\".vuuTable-contentContainer\");\n } else {\n scrollingContainerRef.current = null;\n }\n }, []);\n\n // const handleDropColumnHeader = useCallback(\n // ({ fromIndex: moveFrom, toIndex: moveTo }: DropOptions) => {\n // const column = columns[moveFrom];\n // // columns are what get rendered, so these are the columns that\n // // the drop operation relates to. We must translate these into\n // // columns within the table config. Grouping complicates this\n // // as the group columns are not present in columns but ARE in\n // // config.columns\n // const orderedColumns = moveColumnTo(columns, column, moveTo);\n\n // const ofColumn =\n // ({ name }: ColumnDescriptor) =>\n // (col: ColumnDescriptor) =>\n // col.name === name;\n\n // const targetIndex = orderedColumns.findIndex(ofColumn(column));\n // const nextColumn = orderedColumns[targetIndex + 1];\n // const insertPos = nextColumn\n // ? tableConfig.columns.findIndex(ofColumn(nextColumn))\n // : -1;\n\n // if (moveTo > moveFrom && insertPos !== -1) {\n // onMoveColumn(\n // dragColumn?.column?.name,\n // moveColumnTo(tableConfig.columns, column, insertPos - 1),\n // );\n // } else {\n // onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));\n // }\n // },\n // [columns, onMoveColumn, tableConfig.columns],\n // );\n\n const handleDragStart = useCallback(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (evt: any) => {\n const element = evt.operation.source as HTMLDivElement;\n const columnName = element.id.split(\"-\").at(-1);\n const column = columns.find((col) => col.name === columnName);\n if (column === undefined) {\n throw Error(`[useTableHeader] No column '${columnName}'`);\n }\n setDragColumn({ column, id: element.id });\n },\n [columns],\n );\n\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems = containerRef.current?.querySelectorAll<HTMLDivElement>(\n \".vuuTableHeaderCell\",\n );\n\n if (listItems && dragColumn?.column) {\n const orderedColumnNames = Array.from<HTMLDivElement>(listItems).map(\n ({ dataset }) => dataset.columnName as string,\n );\n onMoveColumn(\n dragColumn?.column.name,\n reorderColumnItems(columns, orderedColumnNames),\n );\n }\n }, 300);\n }, [columns, dragColumn, onMoveColumn]);\n\n const handleColumnHeaderClick = useCallback(\n (evt: React.MouseEvent | React.KeyboardEvent) => {\n const headerCell = queryClosest(evt.target, \".vuuTableHeaderCell\");\n const colIdx = parseInt(headerCell?.dataset.index ?? \"-1\");\n const column = visibleColumnAtIndex(columns, colIdx);\n if (column && column.sortable !== false) {\n const isAdditive = evt.shiftKey;\n onSortColumn(column, isAdditive);\n }\n },\n [columns, onSortColumn],\n );\n\n return {\n dragColumn,\n onClick: handleColumnHeaderClick,\n onDragEnd: handleDragEnd,\n onDragStart: handleDragStart,\n setContainerRef: useForkRef(setContainerRef, rowRef),\n };\n};\n"],"names":["useRef","useState","useCallback","useMeasuredHeight","reorderColumnItems","queryClosest","visibleColumnAtIndex","useForkRef"],"mappings":"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"}
|
package/cjs/useCell.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var cx = require('clsx');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
|
|
7
|
-
const useCell = (column, classBase, isHeader) => (
|
|
8
|
-
// TODO measure perf without the memo, might not be worth the cost
|
|
9
|
-
react.useMemo(() => {
|
|
10
|
-
const className = cx(classBase, column.className, {
|
|
11
|
-
vuuPinLeft: column.pin === "left",
|
|
12
|
-
vuuPinRight: column.pin === "right",
|
|
13
|
-
vuuEndPin: isHeader && column.pinnedWidth,
|
|
14
|
-
[`${classBase}-editable`]: column.editable,
|
|
15
|
-
[`${classBase}-right`]: column.align === "right"
|
|
16
|
-
});
|
|
17
|
-
const style = vuuUtils.getColumnStyle(column);
|
|
18
|
-
return {
|
|
19
|
-
className,
|
|
20
|
-
style
|
|
21
|
-
};
|
|
22
|
-
}, [classBase, column, isHeader])
|
|
23
|
-
);
|
|
24
|
-
|
|
25
|
-
exports.useCell = useCell;
|
|
26
|
-
//# sourceMappingURL=useCell.js.map
|
package/cjs/useCell.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCell.js","sources":["../../../packages/vuu-table/src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n column: RuntimeColumnDescriptor,\n classBase: string,\n isHeader?: boolean,\n) =>\n // TODO measure perf without the memo, might not be worth the cost\n useMemo(() => {\n const className = cx(classBase, column.className, {\n vuuPinLeft: column.pin === \"left\",\n vuuPinRight: column.pin === \"right\",\n vuuEndPin: isHeader && column.pinnedWidth,\n [`${classBase}-editable`]: column.editable,\n [`${classBase}-right`]: column.align === \"right\",\n });\n\n const style = getColumnStyle(column);\n return {\n className,\n style,\n };\n }, [classBase, column, isHeader]);\n"],"names":["useMemo","getColumnStyle"],"mappings":";;;;;;AAKa,MAAA,OAAA,GAAU,CACrB,MAAA,EACA,SACA,EAAA,QAAA;AAAA;AAAA,EAGAA,cAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,WAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA;AAAA,KAC1C,CAAA;AAED,IAAM,MAAA,KAAA,GAAQC,wBAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,MAAA,EAAQ,QAAQ,CAAC;AAAA;;;;"}
|
package/cjs/useCellEditing.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var tableDomUtils = require('./table-dom-utils.js');
|
|
6
|
-
|
|
7
|
-
const useCellEditing = ({ navigate }) => {
|
|
8
|
-
const commitHandler = react.useCallback(() => {
|
|
9
|
-
navigate();
|
|
10
|
-
}, [navigate]);
|
|
11
|
-
const editInput = react.useCallback(
|
|
12
|
-
(evt) => {
|
|
13
|
-
const cellEl = evt.target;
|
|
14
|
-
const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
|
|
15
|
-
if (input) {
|
|
16
|
-
input.focus();
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
[]
|
|
20
|
-
);
|
|
21
|
-
const focusInput = react.useCallback(
|
|
22
|
-
(evt) => {
|
|
23
|
-
const cellEl = evt.target;
|
|
24
|
-
const input = cellEl.querySelector("input");
|
|
25
|
-
if (input) {
|
|
26
|
-
input.focus();
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
[]
|
|
30
|
-
);
|
|
31
|
-
const handleKeyDown = react.useCallback(
|
|
32
|
-
(e) => {
|
|
33
|
-
const el = e.target;
|
|
34
|
-
if (tableDomUtils.cellIsTextInput(el)) {
|
|
35
|
-
if (vuuUtils.isCharacterKey(e.key)) {
|
|
36
|
-
editInput(e);
|
|
37
|
-
} else if (e.key === "Enter") {
|
|
38
|
-
focusInput(e);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
[editInput, focusInput]
|
|
43
|
-
);
|
|
44
|
-
const handleDoubleClick = react.useCallback(
|
|
45
|
-
(e) => {
|
|
46
|
-
const el = e.target;
|
|
47
|
-
if (el.matches("input") || el.querySelector("input")) {
|
|
48
|
-
editInput(e);
|
|
49
|
-
e.stopPropagation();
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
[editInput]
|
|
53
|
-
);
|
|
54
|
-
const handleBlur = react.useCallback(
|
|
55
|
-
(e) => {
|
|
56
|
-
const el = e.target;
|
|
57
|
-
el.removeEventListener("vuu-commit", commitHandler, true);
|
|
58
|
-
},
|
|
59
|
-
[commitHandler]
|
|
60
|
-
);
|
|
61
|
-
const handleFocus = react.useCallback(
|
|
62
|
-
(e) => {
|
|
63
|
-
const el = e.target;
|
|
64
|
-
el.addEventListener("vuu-commit", commitHandler, true);
|
|
65
|
-
},
|
|
66
|
-
[commitHandler]
|
|
67
|
-
);
|
|
68
|
-
return {
|
|
69
|
-
onBlur: handleBlur,
|
|
70
|
-
onDoubleClick: handleDoubleClick,
|
|
71
|
-
onFocus: handleFocus,
|
|
72
|
-
onKeyDown: handleKeyDown
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
exports.useCellEditing = useCellEditing;
|
|
77
|
-
//# sourceMappingURL=useCellEditing.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCellEditing.js","sources":["../../../packages/vuu-table/src/useCellEditing.ts"],"sourcesContent":["import { isCharacterKey } from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n KeyboardEvent as ReactKeyboardEvent,\n MouseEvent,\n useCallback,\n} from \"react\";\nimport { cellIsTextInput } from \"./table-dom-utils\";\n\nexport interface CellEditingHookProps {\n navigate: () => void;\n}\n\nexport const useCellEditing = ({ navigate }: CellEditingHookProps) => {\n const commitHandler = useCallback(() => {\n navigate();\n }, [navigate]);\n\n const editInput = useCallback(\n (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n const cellEl = evt.target as HTMLDivElement;\n const input = cellEl.matches(\"input\")\n ? (cellEl as HTMLInputElement)\n : cellEl.querySelector(\"input\");\n\n if (input) {\n input.focus();\n }\n },\n [],\n );\n\n const focusInput = useCallback(\n (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n const cellEl = evt.target as HTMLDivElement;\n const input = cellEl.querySelector(\"input\");\n if (input) {\n input.focus();\n }\n },\n [],\n );\n\n const handleKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLElement>) => {\n const el = e.target as HTMLElement;\n if (cellIsTextInput(el)) {\n if (isCharacterKey(e.key)) {\n editInput(e);\n } else if (e.key === \"Enter\") {\n focusInput(e);\n }\n }\n },\n [editInput, focusInput],\n );\n\n const handleDoubleClick = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n const el = e.target as HTMLElement;\n if (el.matches(\"input\") || el.querySelector(\"input\")) {\n editInput(e);\n e.stopPropagation();\n }\n },\n [editInput],\n );\n\n const handleBlur = useCallback<FocusEventHandler>(\n (e) => {\n const el = e.target as HTMLElement;\n el.removeEventListener(\"vuu-commit\", commitHandler, true);\n },\n [commitHandler],\n );\n\n const handleFocus = useCallback<FocusEventHandler>(\n (e) => {\n const el = e.target as HTMLElement;\n el.addEventListener(\"vuu-commit\", commitHandler, true);\n },\n [commitHandler],\n );\n\n return {\n onBlur: handleBlur,\n onDoubleClick: handleDoubleClick,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n };\n};\n"],"names":["useCallback","cellIsTextInput","isCharacterKey"],"mappings":";;;;;;AAaO,MAAM,cAAiB,GAAA,CAAC,EAAE,QAAA,EAAqC,KAAA;AACpE,EAAM,MAAA,aAAA,GAAgBA,kBAAY,MAAM;AACtC,IAAS,QAAA,EAAA;AAAA,GACX,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,SAAY,GAAAA,iBAAA;AAAA,IAChB,CAAC,GAAmE,KAAA;AAClE,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,KAAA,GAAQ,OAAO,OAAQ,CAAA,OAAO,IAC/B,MACD,GAAA,MAAA,CAAO,cAAc,OAAO,CAAA;AAEhC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAM,EAAA;AAAA;AACd,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,GAAmE,KAAA;AAClE,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,aAAA,CAAc,OAAO,CAAA;AAC1C,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAM,EAAA;AAAA;AACd,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,CAAuC,KAAA;AACtC,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAI,IAAAC,6BAAA,CAAgB,EAAE,CAAG,EAAA;AACvB,QAAI,IAAAC,uBAAA,CAAe,CAAE,CAAA,GAAG,CAAG,EAAA;AACzB,UAAA,SAAA,CAAU,CAAC,CAAA;AAAA,SACb,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,OAAS,EAAA;AAC5B,UAAA,UAAA,CAAW,CAAC,CAAA;AAAA;AACd;AACF,KACF;AAAA,IACA,CAAC,WAAW,UAAU;AAAA,GACxB;AAEA,EAAA,MAAM,iBAAoB,GAAAF,iBAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAA,IAAI,GAAG,OAAQ,CAAA,OAAO,KAAK,EAAG,CAAA,aAAA,CAAc,OAAO,CAAG,EAAA;AACpD,QAAA,SAAA,CAAU,CAAC,CAAA;AACX,QAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AACpB,KACF;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAG,EAAA,CAAA,mBAAA,CAAoB,YAAc,EAAA,aAAA,EAAe,IAAI,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,WAAc,GAAAA,iBAAA;AAAA,IAClB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAG,EAAA,CAAA,gBAAA,CAAiB,YAAc,EAAA,aAAA,EAAe,IAAI,CAAA;AAAA,KACvD;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAO,OAAA;AAAA,IACL,MAAQ,EAAA,UAAA;AAAA,IACR,aAAe,EAAA,iBAAA;AAAA,IACf,OAAS,EAAA,WAAA;AAAA,IACT,SAAW,EAAA;AAAA,GACb;AACF;;;;"}
|
package/cjs/useCellFocus.js
DELETED
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
var tableDomUtils = require('./table-dom-utils.js');
|
|
5
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
6
|
-
|
|
7
|
-
const getCellPosition = (el) => {
|
|
8
|
-
const top = parseInt(el.parentElement?.style.top ?? "-1");
|
|
9
|
-
return { top };
|
|
10
|
-
};
|
|
11
|
-
const isDifferentCellPosition = (currentPos, newPos) => {
|
|
12
|
-
if (currentPos === void 0) {
|
|
13
|
-
return true;
|
|
14
|
-
}
|
|
15
|
-
return currentPos[0] !== newPos[0] || currentPos[1] !== newPos[1];
|
|
16
|
-
};
|
|
17
|
-
const useCellFocus = ({
|
|
18
|
-
cellFocusStateRef,
|
|
19
|
-
containerRef,
|
|
20
|
-
disableFocus = false,
|
|
21
|
-
requestScroll
|
|
22
|
-
}) => {
|
|
23
|
-
const focusCellPlaceholderRef = react.useCallback(
|
|
24
|
-
(el) => {
|
|
25
|
-
cellFocusStateRef.current.placeholderEl = el;
|
|
26
|
-
},
|
|
27
|
-
[cellFocusStateRef]
|
|
28
|
-
);
|
|
29
|
-
const focusCell = react.useCallback(
|
|
30
|
-
(cellPos) => {
|
|
31
|
-
if (containerRef.current) {
|
|
32
|
-
const { current: state } = cellFocusStateRef;
|
|
33
|
-
if (isDifferentCellPosition(state.cellPos, cellPos)) {
|
|
34
|
-
const activeCell = tableDomUtils.getTableCell(containerRef, cellPos);
|
|
35
|
-
if (activeCell) {
|
|
36
|
-
if (activeCell !== state.el) {
|
|
37
|
-
state.el?.removeAttribute("tabindex");
|
|
38
|
-
activeCell.setAttribute("tabindex", "0");
|
|
39
|
-
state.el = activeCell;
|
|
40
|
-
state.pos = getCellPosition(activeCell);
|
|
41
|
-
state.outsideViewport = false;
|
|
42
|
-
if (state.placeholderEl) {
|
|
43
|
-
state.placeholderEl.style.top = `${state.pos.top}px`;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
state.cellPos = cellPos;
|
|
47
|
-
requestScroll?.({ type: "scroll-row", rowIndex: cellPos[0] });
|
|
48
|
-
activeCell.focus({ preventScroll: true });
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
[cellFocusStateRef, containerRef, requestScroll]
|
|
54
|
-
);
|
|
55
|
-
const setTableBodyRef = react.useCallback(
|
|
56
|
-
(el) => {
|
|
57
|
-
if (el) {
|
|
58
|
-
const { current: state } = cellFocusStateRef;
|
|
59
|
-
const table = vuuUtils.queryClosest(el, ".vuuTable");
|
|
60
|
-
if (table) {
|
|
61
|
-
if (state.el === null && !disableFocus) {
|
|
62
|
-
const headerCell = table.querySelector(
|
|
63
|
-
tableDomUtils.headerCellQuery(1)
|
|
64
|
-
);
|
|
65
|
-
if (headerCell) {
|
|
66
|
-
headerCell.setAttribute("tabindex", "0");
|
|
67
|
-
state.cellPos = [1, 1];
|
|
68
|
-
state.el = headerCell;
|
|
69
|
-
state.pos = { top: -20 };
|
|
70
|
-
if (state.placeholderEl) {
|
|
71
|
-
state.placeholderEl.style.top = `-20px`;
|
|
72
|
-
}
|
|
73
|
-
} else {
|
|
74
|
-
const cell = table.querySelector(
|
|
75
|
-
tableDomUtils.dataCellQuery(0, 0)
|
|
76
|
-
);
|
|
77
|
-
if (cell) {
|
|
78
|
-
cell.setAttribute("tabindex", "0");
|
|
79
|
-
state.cellPos = [1, 1];
|
|
80
|
-
state.el = cell;
|
|
81
|
-
state.pos = { top: 0 };
|
|
82
|
-
if (state.placeholderEl) {
|
|
83
|
-
state.placeholderEl.style.top = `0px`;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
},
|
|
91
|
-
[cellFocusStateRef, disableFocus]
|
|
92
|
-
);
|
|
93
|
-
const focusCellPlaceholderKeyDown = react.useCallback(
|
|
94
|
-
(evt) => {
|
|
95
|
-
const { outsideViewport, pos } = cellFocusStateRef.current;
|
|
96
|
-
if (pos && vuuUtils.isArrowKey(evt.key)) {
|
|
97
|
-
if (outsideViewport === "above") {
|
|
98
|
-
requestScroll?.({ type: "scroll-top", scrollPos: pos.top });
|
|
99
|
-
} else if (outsideViewport === "below") {
|
|
100
|
-
requestScroll?.({ type: "scroll-bottom", scrollPos: pos.top });
|
|
101
|
-
} else {
|
|
102
|
-
throw Error(
|
|
103
|
-
`cellFocusPlaceholder should not have focus if inside viewport`
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
[cellFocusStateRef, requestScroll]
|
|
109
|
-
);
|
|
110
|
-
return {
|
|
111
|
-
focusCell,
|
|
112
|
-
focusCellPlaceholderKeyDown,
|
|
113
|
-
focusCellPlaceholderRef,
|
|
114
|
-
setTableBodyRef
|
|
115
|
-
};
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
exports.useCellFocus = useCellFocus;
|
|
119
|
-
//# sourceMappingURL=useCellFocus.js.map
|
package/cjs/useCellFocus.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCellFocus.js","sources":["../../../packages/vuu-table/src/useCellFocus.ts"],"sourcesContent":["import {\n KeyboardEventHandler,\n RefCallback,\n RefObject,\n useCallback,\n} from \"react\";\nimport {\n dataCellQuery,\n getTableCell,\n headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport type { ICellFocusState } from \"./CellFocusState\";\n\nexport interface CellFocusHookProps {\n cellFocusStateRef: RefObject<ICellFocusState>;\n containerRef: RefObject<HTMLElement | null>;\n disableFocus?: boolean;\n requestScroll?: ScrollRequestHandler;\n}\n\nconst getCellPosition = (el: HTMLElement) => {\n const top = parseInt(el.parentElement?.style.top ?? \"-1\");\n return { top };\n};\n\nconst isDifferentCellPosition = (\n currentPos: CellPos | undefined,\n newPos: CellPos,\n) => {\n if (currentPos === undefined) {\n return true;\n }\n return currentPos[0] !== newPos[0] || currentPos[1] !== newPos[1];\n};\n\nexport type FocusCell = (cellPos: CellPos, fromKeyboard?: boolean) => void;\n\nexport const useCellFocus = ({\n cellFocusStateRef,\n containerRef,\n disableFocus = false,\n requestScroll,\n}: CellFocusHookProps) => {\n const focusCellPlaceholderRef = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n cellFocusStateRef.current.placeholderEl = el;\n },\n [cellFocusStateRef],\n );\n\n const focusCell = useCallback<FocusCell>(\n (cellPos) => {\n if (containerRef.current) {\n const { current: state } = cellFocusStateRef;\n if (isDifferentCellPosition(state.cellPos, cellPos)) {\n const activeCell = getTableCell(containerRef, cellPos);\n if (activeCell) {\n if (activeCell !== state.el) {\n state.el?.removeAttribute(\"tabindex\");\n activeCell.setAttribute(\"tabindex\", \"0\");\n\n // TODO no need to measure if we're navigating horizontally\n // state.cellPos = cellPos;\n state.el = activeCell;\n state.pos = getCellPosition(activeCell);\n state.outsideViewport = false;\n\n if (state.placeholderEl) {\n state.placeholderEl.style.top = `${state.pos.top}px`;\n }\n }\n state.cellPos = cellPos;\n\n requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n // if (activeCell.classList.contains(\"vuuTableCell-editable\")) {\n // const input = activeCell.querySelector(\"input\");\n // if (input) {\n // input.focus({ preventScroll: true });\n // } else {\n // activeCell.focus({ preventScroll: true });\n // }\n // } else {\n activeCell.focus({ preventScroll: true });\n // }\n }\n }\n }\n },\n [cellFocusStateRef, containerRef, requestScroll],\n );\n\n const setTableBodyRef = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el) {\n const { current: state } = cellFocusStateRef;\n const table = queryClosest<HTMLDivElement>(el, \".vuuTable\");\n if (table) {\n if (state.el === null && !disableFocus) {\n const headerCell = table.querySelector<HTMLDivElement>(\n headerCellQuery(1),\n );\n if (headerCell) {\n headerCell.setAttribute(\"tabindex\", \"0\");\n state.cellPos = [1, 1];\n state.el = headerCell;\n state.pos = { top: -20 };\n if (state.placeholderEl) {\n state.placeholderEl.style.top = `-20px`;\n }\n } else {\n const cell = table.querySelector<HTMLDivElement>(\n dataCellQuery(0, 0),\n );\n if (cell) {\n cell.setAttribute(\"tabindex\", \"0\");\n state.cellPos = [1, 1];\n state.el = cell;\n state.pos = { top: 0 };\n if (state.placeholderEl) {\n state.placeholderEl.style.top = `0px`;\n }\n }\n }\n }\n }\n }\n },\n [cellFocusStateRef, disableFocus],\n );\n\n const focusCellPlaceholderKeyDown = useCallback<KeyboardEventHandler>(\n (evt) => {\n const { outsideViewport, pos } = cellFocusStateRef.current;\n if (pos && isArrowKey(evt.key)) {\n // TODO depends on whether we're scrolling up or down\n if (outsideViewport === \"above\") {\n requestScroll?.({ type: \"scroll-top\", scrollPos: pos.top });\n } else if (outsideViewport === \"below\") {\n requestScroll?.({ type: \"scroll-bottom\", scrollPos: pos.top });\n } else {\n throw Error(\n `cellFocusPlaceholder should not have focus if inside viewport`,\n );\n }\n }\n },\n [cellFocusStateRef, requestScroll],\n );\n\n return {\n focusCell,\n focusCellPlaceholderKeyDown,\n focusCellPlaceholderRef,\n setTableBodyRef,\n };\n};\n"],"names":["useCallback","getTableCell","queryClosest","headerCellQuery","dataCellQuery","isArrowKey"],"mappings":"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"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const isRowSelectionKey = (key) => key === "Enter" || key === " ";
|
|
7
|
-
const useControlledTableNavigation = (initialValue, rowCount) => {
|
|
8
|
-
const tableRef = react.useRef(null);
|
|
9
|
-
const [highlightedIndexRef, setHighlightedIndex] = vuuUtils.useStateRef(initialValue);
|
|
10
|
-
const handleKeyDown = react.useCallback(
|
|
11
|
-
(e) => {
|
|
12
|
-
if (e.key === "ArrowDown") {
|
|
13
|
-
setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));
|
|
14
|
-
} else if (e.key === "ArrowUp") {
|
|
15
|
-
setHighlightedIndex((index = -1) => Math.max(0, index - 1));
|
|
16
|
-
} else if (isRowSelectionKey(e.key)) {
|
|
17
|
-
const { current: rowIdx } = highlightedIndexRef;
|
|
18
|
-
if (typeof rowIdx === "number") {
|
|
19
|
-
const rowEl = tableRef.current?.querySelector(
|
|
20
|
-
`[aria-rowindex="${rowIdx + 1}"]`
|
|
21
|
-
);
|
|
22
|
-
if (rowEl) {
|
|
23
|
-
vuuUtils.dispatchMouseEvent(rowEl, "click");
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
[highlightedIndexRef, rowCount, setHighlightedIndex]
|
|
29
|
-
);
|
|
30
|
-
const handleHighlight = react.useCallback(
|
|
31
|
-
(idx) => {
|
|
32
|
-
setHighlightedIndex(idx);
|
|
33
|
-
},
|
|
34
|
-
[setHighlightedIndex]
|
|
35
|
-
);
|
|
36
|
-
return {
|
|
37
|
-
highlightedIndexRef,
|
|
38
|
-
onHighlight: handleHighlight,
|
|
39
|
-
onKeyDown: handleKeyDown,
|
|
40
|
-
tableRef
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
exports.isRowSelectionKey = isRowSelectionKey;
|
|
45
|
-
exports.useControlledTableNavigation = useControlledTableNavigation;
|
|
46
|
-
//# sourceMappingURL=useControlledTableNavigation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useControlledTableNavigation.js","sources":["../../../packages/vuu-table/src/useControlledTableNavigation.ts"],"sourcesContent":["import { dispatchMouseEvent, useStateRef } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const isRowSelectionKey = (key: string) =>\n key === \"Enter\" || key === \" \";\n\nexport const useControlledTableNavigation = (\n initialValue: number,\n rowCount: number,\n) => {\n const tableRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n number | undefined\n >(initialValue);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"ArrowDown\") {\n setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n } else if (e.key === \"ArrowUp\") {\n setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n } else if (isRowSelectionKey(e.key)) {\n const { current: rowIdx } = highlightedIndexRef;\n // induce an onSelect event by 'clicking' the row\n if (typeof rowIdx === \"number\") {\n const rowEl = tableRef.current?.querySelector(\n `[aria-rowindex=\"${rowIdx + 1}\"]`,\n ) as HTMLElement;\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n }\n },\n [highlightedIndexRef, rowCount, setHighlightedIndex],\n );\n\n const handleHighlight = useCallback(\n (idx: number) => {\n setHighlightedIndex(idx);\n },\n [setHighlightedIndex],\n );\n\n return {\n highlightedIndexRef,\n onHighlight: handleHighlight,\n onKeyDown: handleKeyDown,\n tableRef,\n };\n};\n"],"names":["useRef","useStateRef","useCallback","dispatchMouseEvent"],"mappings":";;;;;AAGO,MAAM,iBAAoB,GAAA,CAAC,GAChC,KAAA,GAAA,KAAQ,WAAW,GAAQ,KAAA;AAEhB,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAWA,aAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAIC,qBAEjD,YAAY,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA;AAAA,OACjD,MAAA,IAAA,iBAAA,CAAkB,CAAE,CAAA,GAAG,CAAG,EAAA;AACnC,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA;AAAA,WAC/B;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA;AAAA;AACnC;AACF;AACF,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB;AAAA,GACrD;AAEA,EAAA,MAAM,eAAkB,GAAAD,iBAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB;AAAA,GACtB;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX;AAAA,GACF;AACF;;;;;"}
|