@vuu-ui/vuu-table 0.13.7 → 0.13.9
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/cjs/index.js +5236 -61
- package/cjs/index.js.map +1 -1
- package/esm/index.js +5205 -26
- package/esm/index.js.map +1 -1
- package/package.json +10 -10
- package/cjs/CellFocusState.js +0 -45
- package/cjs/CellFocusState.js.map +0 -1
- package/cjs/Row.css.js +0 -6
- package/cjs/Row.css.js.map +0 -1
- package/cjs/Row.js +0 -151
- 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 -433
- package/cjs/Table.js.map +0 -1
- package/cjs/VirtualColSpan.js +0 -19
- package/cjs/VirtualColSpan.js.map +0 -1
- package/cjs/bulk-edit/BulkEditDialog.js +0 -57
- package/cjs/bulk-edit/BulkEditDialog.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 -72
- package/cjs/bulk-edit/BulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.css.js +0 -6
- package/cjs/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.js +0 -81
- package/cjs/bulk-edit/BulkEditRow.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +0 -101
- package/cjs/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditRow.js +0 -144
- package/cjs/bulk-edit/useBulkEditRow.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 -254
- 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 -68
- 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 -33
- 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 -52
- package/cjs/cell-renderers/input-cell/InputCell.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 -67
- 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/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 -120
- package/cjs/header-cell/HeaderCell.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 -95
- 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 -66
- package/cjs/table-cell/TableGroupCell.js.map +0 -1
- package/cjs/table-config.js +0 -35
- package/cjs/table-config.js.map +0 -1
- package/cjs/table-dom-utils.js +0 -202
- 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 -166
- package/cjs/table-header/TableHeader.js.map +0 -1
- package/cjs/table-header/useTableHeader.js +0 -85
- package/cjs/table-header/useTableHeader.js.map +0 -1
- package/cjs/useCell.js +0 -28
- package/cjs/useCell.js.map +0 -1
- package/cjs/useCellEditing.js +0 -79
- package/cjs/useCellEditing.js.map +0 -1
- package/cjs/useCellFocus.js +0 -115
- package/cjs/useCellFocus.js.map +0 -1
- package/cjs/useControlledTableNavigation.js +0 -46
- package/cjs/useControlledTableNavigation.js.map +0 -1
- package/cjs/useDataSource.js +0 -146
- package/cjs/useDataSource.js.map +0 -1
- package/cjs/useEditableCell.js +0 -32
- package/cjs/useEditableCell.js.map +0 -1
- package/cjs/useHighlighting.js +0 -33
- package/cjs/useHighlighting.js.map +0 -1
- package/cjs/useKeyboardNavigation.js +0 -318
- package/cjs/useKeyboardNavigation.js.map +0 -1
- package/cjs/useMeasuredHeight.js +0 -41
- 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 -74
- package/cjs/useSelection.js.map +0 -1
- package/cjs/useTable.js +0 -727
- package/cjs/useTable.js.map +0 -1
- package/cjs/useTableContextMenu.js +0 -59
- package/cjs/useTableContextMenu.js.map +0 -1
- package/cjs/useTableModel.js +0 -383
- package/cjs/useTableModel.js.map +0 -1
- package/cjs/useTableScroll.js +0 -446
- 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.css.js +0 -4
- package/esm/Row.css.js.map +0 -1
- package/esm/Row.js +0 -148
- 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 -431
- package/esm/Table.js.map +0 -1
- package/esm/VirtualColSpan.js +0 -17
- package/esm/VirtualColSpan.js.map +0 -1
- package/esm/bulk-edit/BulkEditDialog.js +0 -55
- package/esm/bulk-edit/BulkEditDialog.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 -70
- package/esm/bulk-edit/BulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.css.js +0 -4
- package/esm/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.js +0 -79
- package/esm/bulk-edit/BulkEditRow.js.map +0 -1
- package/esm/bulk-edit/useBulkEditPanel.js +0 -99
- package/esm/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/useBulkEditRow.js +0 -142
- package/esm/bulk-edit/useBulkEditRow.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 -252
- 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 -66
- 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 -31
- 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 -50
- package/esm/cell-renderers/input-cell/InputCell.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 -65
- 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/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 -118
- package/esm/header-cell/HeaderCell.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 -93
- 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 -64
- package/esm/table-cell/TableGroupCell.js.map +0 -1
- package/esm/table-config.js +0 -33
- package/esm/table-config.js.map +0 -1
- package/esm/table-dom-utils.js +0 -184
- 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 -164
- package/esm/table-header/TableHeader.js.map +0 -1
- package/esm/table-header/useTableHeader.js +0 -83
- package/esm/table-header/useTableHeader.js.map +0 -1
- package/esm/useCell.js +0 -26
- package/esm/useCell.js.map +0 -1
- package/esm/useCellEditing.js +0 -77
- package/esm/useCellEditing.js.map +0 -1
- package/esm/useCellFocus.js +0 -113
- package/esm/useCellFocus.js.map +0 -1
- package/esm/useControlledTableNavigation.js +0 -43
- package/esm/useControlledTableNavigation.js.map +0 -1
- package/esm/useDataSource.js +0 -144
- package/esm/useDataSource.js.map +0 -1
- package/esm/useEditableCell.js +0 -30
- package/esm/useEditableCell.js.map +0 -1
- package/esm/useHighlighting.js +0 -31
- package/esm/useHighlighting.js.map +0 -1
- package/esm/useKeyboardNavigation.js +0 -314
- package/esm/useKeyboardNavigation.js.map +0 -1
- package/esm/useMeasuredHeight.js +0 -39
- 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 -72
- package/esm/useSelection.js.map +0 -1
- package/esm/useTable.js +0 -725
- package/esm/useTable.js.map +0 -1
- package/esm/useTableContextMenu.js +0 -56
- package/esm/useTableContextMenu.js.map +0 -1
- package/esm/useTableModel.js +0 -381
- package/esm/useTableModel.js.map +0 -1
- package/esm/useTableScroll.js +0 -443
- package/esm/useTableScroll.js.map +0 -1
- package/esm/useTableViewport.js +0 -135
- package/esm/useTableViewport.js.map +0 -1
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var tableDomUtils = require('../table-dom-utils.js');
|
|
5
|
-
|
|
6
|
-
const isNullCellBox = ({ bottom, left, right, top }) => {
|
|
7
|
-
return bottom === -1 && left === -1 && right === -1 && top === -1;
|
|
8
|
-
};
|
|
9
|
-
const Hi = Number.MAX_SAFE_INTEGER;
|
|
10
|
-
const getEndCellDirection = (startBox, endBox) => {
|
|
11
|
-
const { bottom: sBottom, left: sLeft, right: sRight, top: sTop } = startBox;
|
|
12
|
-
const { bottom: eBottom, left: eLeft, right: eRight, top: eTop } = endBox;
|
|
13
|
-
const north = eTop < sTop;
|
|
14
|
-
const east = eRight > sRight;
|
|
15
|
-
const south = eBottom > sBottom;
|
|
16
|
-
const west = eLeft < sLeft;
|
|
17
|
-
if (north && east) return "ne";
|
|
18
|
-
else if (south && east) return "se";
|
|
19
|
-
else if (south && west) return "sw";
|
|
20
|
-
else if (north && west) return "nw";
|
|
21
|
-
else if (north) return "n";
|
|
22
|
-
else if (east) return "e";
|
|
23
|
-
else if (south) return "s";
|
|
24
|
-
else if (west) return "w";
|
|
25
|
-
else return "self";
|
|
26
|
-
};
|
|
27
|
-
const setElementBox = (el, box) => {
|
|
28
|
-
const { bottom, left, right, top } = el.getBoundingClientRect();
|
|
29
|
-
box.bottom = bottom;
|
|
30
|
-
box.left = left;
|
|
31
|
-
box.right = right;
|
|
32
|
-
box.top = top;
|
|
33
|
-
};
|
|
34
|
-
const outsideBox = ({ bottom, left, right, top }, x, y) => x < left || x > right || y < top || y > bottom;
|
|
35
|
-
const getRowIndex = (cell) => tableDomUtils.getAriaRowIndex(vuuUtils.queryClosest(cell, ".vuuTableRow"));
|
|
36
|
-
const getTableCellBlock = (startCell, endCell) => {
|
|
37
|
-
const colStart = tableDomUtils.getAriaColIndex(startCell);
|
|
38
|
-
const colEnd = tableDomUtils.getAriaColIndex(endCell);
|
|
39
|
-
const rowStart = getRowIndex(startCell);
|
|
40
|
-
const rowEnd = getRowIndex(endCell);
|
|
41
|
-
const columnRange = {
|
|
42
|
-
from: Math.min(colStart, colEnd),
|
|
43
|
-
to: Math.max(colStart, colEnd)
|
|
44
|
-
};
|
|
45
|
-
const rowRange = {
|
|
46
|
-
from: Math.min(rowStart, rowEnd),
|
|
47
|
-
to: Math.max(rowStart, rowEnd)
|
|
48
|
-
};
|
|
49
|
-
return {
|
|
50
|
-
columnRange,
|
|
51
|
-
rowRange
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
const refState = {
|
|
55
|
-
cellBlock: null,
|
|
56
|
-
cellBlockClassName: "",
|
|
57
|
-
dragState: "pending",
|
|
58
|
-
endBox: { bottom: -1, left: Hi, right: -1, top: Hi },
|
|
59
|
-
endCell: null,
|
|
60
|
-
endPos: [-1, -1],
|
|
61
|
-
mousePosX: -1,
|
|
62
|
-
mousePosY: -1,
|
|
63
|
-
mouseStartX: -1,
|
|
64
|
-
mouseStartY: -1,
|
|
65
|
-
startBox: { bottom: -1, left: -1, right: -1, top: -1 },
|
|
66
|
-
startCell: null,
|
|
67
|
-
startPos: [-1, -1]
|
|
68
|
-
};
|
|
69
|
-
const updateCellBlockClassName = (state) => {
|
|
70
|
-
const { cellBlock, cellBlockClassName, startBox, endBox } = state;
|
|
71
|
-
const endBlockDirection = getEndCellDirection(startBox, endBox);
|
|
72
|
-
const newCellBlockClassName = `cellblock-direction-${endBlockDirection}`;
|
|
73
|
-
if (newCellBlockClassName !== cellBlockClassName) {
|
|
74
|
-
if (cellBlockClassName) {
|
|
75
|
-
cellBlock?.classList.replace(cellBlockClassName, newCellBlockClassName);
|
|
76
|
-
} else {
|
|
77
|
-
cellBlock?.classList.add(newCellBlockClassName);
|
|
78
|
-
}
|
|
79
|
-
state.cellBlockClassName = newCellBlockClassName;
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
const getTextFromCells = (startCell, endCell) => {
|
|
83
|
-
const tableBody = vuuUtils.queryClosest(
|
|
84
|
-
startCell,
|
|
85
|
-
".vuuTable-body",
|
|
86
|
-
true
|
|
87
|
-
);
|
|
88
|
-
const [startRow, startCol] = tableDomUtils.getAriaCellPos(startCell);
|
|
89
|
-
const [endRow, endCol] = tableDomUtils.getAriaCellPos(endCell);
|
|
90
|
-
const rowRange = {
|
|
91
|
-
from: Math.min(startRow, endRow),
|
|
92
|
-
to: Math.max(startRow, endRow)
|
|
93
|
-
};
|
|
94
|
-
const colRange = {
|
|
95
|
-
from: Math.min(startCol, endCol),
|
|
96
|
-
to: Math.max(startCol, endCol)
|
|
97
|
-
};
|
|
98
|
-
const results = [];
|
|
99
|
-
for (let rowIdx = rowRange.from; rowIdx <= rowRange.to; rowIdx++) {
|
|
100
|
-
const row = tableBody.querySelector(
|
|
101
|
-
`.vuuTableRow[aria-rowindex='${rowIdx}']`
|
|
102
|
-
);
|
|
103
|
-
const rowData = [];
|
|
104
|
-
for (let colIdx = colRange.from; colIdx <= colRange.to; colIdx++) {
|
|
105
|
-
const cell = row?.querySelector(
|
|
106
|
-
`.vuuTableCell[aria-colindex='${colIdx}']`
|
|
107
|
-
);
|
|
108
|
-
if (cell) {
|
|
109
|
-
rowData.push(cell.textContent ?? "");
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
results.push(rowData);
|
|
113
|
-
}
|
|
114
|
-
return results.map((r) => r.join(" ")).join("\n");
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
exports.getEndCellDirection = getEndCellDirection;
|
|
118
|
-
exports.getTableCellBlock = getTableCellBlock;
|
|
119
|
-
exports.getTextFromCells = getTextFromCells;
|
|
120
|
-
exports.isNullCellBox = isNullCellBox;
|
|
121
|
-
exports.outsideBox = outsideBox;
|
|
122
|
-
exports.refState = refState;
|
|
123
|
-
exports.setElementBox = setElementBox;
|
|
124
|
-
exports.updateCellBlockClassName = updateCellBlockClassName;
|
|
125
|
-
//# sourceMappingURL=cellblock-utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cellblock-utils.js","sources":["../../src/cell-block/cellblock-utils.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n getAriaCellPos,\n getAriaColIndex,\n getAriaRowIndex,\n} from \"../table-dom-utils\";\n\nexport type TableCellBlock = {\n columnRange: VuuRange;\n rowRange: VuuRange;\n};\n\nexport type CellBox = {\n bottom: number;\n left: number;\n right: number;\n top: number;\n};\n\nexport const isNullCellBox = ({ bottom, left, right, top }: CellBox) => {\n return bottom === -1 && left === -1 && right === -1 && top === -1;\n};\n\nconst Hi = Number.MAX_SAFE_INTEGER;\n\ntype EndCellDirection =\n | \"self\"\n | \"n\"\n | \"ne\"\n | \"e\"\n | \"se\"\n | \"s\"\n | \"sw\"\n | \"w\"\n | \"nw\";\n\nexport const getEndCellDirection = (\n startBox: CellBox,\n endBox: CellBox,\n): EndCellDirection => {\n const { bottom: sBottom, left: sLeft, right: sRight, top: sTop } = startBox;\n const { bottom: eBottom, left: eLeft, right: eRight, top: eTop } = endBox;\n const north = eTop < sTop;\n const east = eRight > sRight;\n const south = eBottom > sBottom;\n const west = eLeft < sLeft;\n\n if (north && east) return \"ne\";\n else if (south && east) return \"se\";\n else if (south && west) return \"sw\";\n else if (north && west) return \"nw\";\n else if (north) return \"n\";\n else if (east) return \"e\";\n else if (south) return \"s\";\n else if (west) return \"w\";\n else return \"self\";\n};\n\nexport const setElementBox = (el: HTMLElement, box: CellBox) => {\n const { bottom, left, right, top } = el.getBoundingClientRect();\n box.bottom = bottom;\n box.left = left;\n box.right = right;\n box.top = top;\n};\n\nexport const outsideBox = (\n { bottom, left, right, top }: CellBox,\n x: number,\n y: number,\n) => x < left || x > right || y < top || y > bottom;\n\nconst getRowIndex = (cell: HTMLDivElement) =>\n getAriaRowIndex(queryClosest<HTMLDivElement>(cell, \".vuuTableRow\"));\n\nexport const getTableCellBlock = (\n startCell: HTMLDivElement,\n endCell: HTMLDivElement,\n): TableCellBlock => {\n const colStart = getAriaColIndex(startCell);\n const colEnd = getAriaColIndex(endCell);\n const rowStart = getRowIndex(startCell);\n const rowEnd = getRowIndex(endCell);\n\n const columnRange = {\n from: Math.min(colStart, colEnd),\n to: Math.max(colStart, colEnd),\n };\n const rowRange = {\n from: Math.min(rowStart, rowEnd),\n to: Math.max(rowStart, rowEnd),\n };\n\n return {\n columnRange,\n rowRange,\n };\n};\n\nexport type RefState = {\n dragState: \"pending\" | \"active\";\n cellBlock: HTMLDivElement | null;\n cellBlockClassName: string;\n endBox: CellBox;\n endCell: HTMLDivElement | null;\n endPos: PosTuple; // used during keyboard operation\n mousePosX: number;\n mousePosY: number;\n mouseStartX: number;\n mouseStartY: number;\n startCell: HTMLDivElement | null;\n startBox: CellBox;\n startPos: PosTuple; // used during keyboard operation\n};\n\nexport type PosTuple = [number, number];\n\nexport const refState: RefState = {\n cellBlock: null,\n cellBlockClassName: \"\",\n dragState: \"pending\",\n endBox: { bottom: -1, left: Hi, right: -1, top: Hi },\n endCell: null,\n endPos: [-1, -1],\n mousePosX: -1,\n mousePosY: -1,\n mouseStartX: -1,\n mouseStartY: -1,\n startBox: { bottom: -1, left: -1, right: -1, top: -1 },\n startCell: null,\n startPos: [-1, -1],\n} as const;\n\nexport const updateCellBlockClassName = (state: RefState) => {\n const { cellBlock, cellBlockClassName, startBox, endBox } = state;\n const endBlockDirection = getEndCellDirection(startBox, endBox);\n const newCellBlockClassName = `cellblock-direction-${endBlockDirection}`;\n if (newCellBlockClassName !== cellBlockClassName) {\n if (cellBlockClassName) {\n cellBlock?.classList.replace(cellBlockClassName, newCellBlockClassName);\n } else {\n cellBlock?.classList.add(newCellBlockClassName);\n }\n state.cellBlockClassName = newCellBlockClassName;\n }\n};\n\nexport const getTextFromCells = (\n startCell: HTMLDivElement,\n endCell: HTMLDivElement,\n) => {\n const tableBody = queryClosest<HTMLDivElement>(\n startCell,\n \".vuuTable-body\",\n true,\n );\n const [startRow, startCol] = getAriaCellPos(startCell);\n const [endRow, endCol] = getAriaCellPos(endCell);\n\n const rowRange = {\n from: Math.min(startRow, endRow),\n to: Math.max(startRow, endRow),\n };\n\n const colRange = {\n from: Math.min(startCol, endCol),\n to: Math.max(startCol, endCol),\n };\n\n const results: string[][] = [];\n for (let rowIdx = rowRange.from; rowIdx <= rowRange.to; rowIdx++) {\n const row = tableBody.querySelector(\n `.vuuTableRow[aria-rowindex='${rowIdx}']`,\n );\n const rowData = [];\n for (let colIdx = colRange.from; colIdx <= colRange.to; colIdx++) {\n const cell = row?.querySelector(\n `.vuuTableCell[aria-colindex='${colIdx}']`,\n );\n if (cell) {\n rowData.push(cell.textContent ?? \"\");\n }\n }\n results.push(rowData);\n }\n return results.map((r) => r.join(\"\\t\")).join(\"\\n\");\n};\n"],"names":["getAriaRowIndex","queryClosest","getAriaColIndex","getAriaCellPos"],"mappings":"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"}
|
|
@@ -1,254 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
var tableDomUtils = require('../table-dom-utils.js');
|
|
7
|
-
var CellBlock = require('./CellBlock.js');
|
|
8
|
-
var cellblockUtils = require('./cellblock-utils.js');
|
|
9
|
-
|
|
10
|
-
const clone = (posTuple) => posTuple.slice();
|
|
11
|
-
const NullHandler = () => console.error("no handler installed");
|
|
12
|
-
const mouseHandlers = {
|
|
13
|
-
mouseMove: NullHandler,
|
|
14
|
-
mouseMovePreDrag: NullHandler,
|
|
15
|
-
mouseUp: NullHandler,
|
|
16
|
-
mouseUpPreDrag: NullHandler
|
|
17
|
-
};
|
|
18
|
-
const mouseType = (name) => name.startsWith("mouseMove") ? "mousemove" : "mouseup";
|
|
19
|
-
const DRAG_THRESHOLD = 5;
|
|
20
|
-
const useCellBlockSelection = ({
|
|
21
|
-
allowCellBlockSelection,
|
|
22
|
-
columnCount = 0,
|
|
23
|
-
containerRef,
|
|
24
|
-
onSelectCellBlock,
|
|
25
|
-
rowCount = 0
|
|
26
|
-
}) => {
|
|
27
|
-
const [cellBlock, setCellBlock] = react.useState(null);
|
|
28
|
-
const stateRef = react.useRef(cellblockUtils.refState);
|
|
29
|
-
const handlersRef = react.useRef(mouseHandlers);
|
|
30
|
-
const handleCopy = react.useCallback(async () => {
|
|
31
|
-
const { startCell, endCell } = stateRef.current;
|
|
32
|
-
if (startCell && endCell) {
|
|
33
|
-
const tsvText = cellblockUtils.getTextFromCells(startCell, endCell);
|
|
34
|
-
const type = "text/plain";
|
|
35
|
-
const blob = new Blob([tsvText], { type });
|
|
36
|
-
const data = [new ClipboardItem({ [type]: blob })];
|
|
37
|
-
await navigator.clipboard.write(data);
|
|
38
|
-
}
|
|
39
|
-
}, []);
|
|
40
|
-
const cellBlockRef = react.useCallback((el) => {
|
|
41
|
-
stateRef.current.cellBlock = el;
|
|
42
|
-
}, []);
|
|
43
|
-
const createCellBlock = react.useCallback(
|
|
44
|
-
(method = "mouse") => {
|
|
45
|
-
const { startBox, startCell } = stateRef.current;
|
|
46
|
-
if (startCell) {
|
|
47
|
-
const table = vuuUtils.queryClosest(startCell, ".vuuTable");
|
|
48
|
-
if (table) {
|
|
49
|
-
table.classList.add(`vuu-cellblock-select-in-progress-${method}`);
|
|
50
|
-
}
|
|
51
|
-
cellblockUtils.setElementBox(startCell, startBox);
|
|
52
|
-
startCell.classList.add("vuu-cellblock-start");
|
|
53
|
-
setCellBlock(/* @__PURE__ */ jsxRuntime.jsx(CellBlock.CellBlock, { onCopy: handleCopy, ref: cellBlockRef }));
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
[cellBlockRef, handleCopy]
|
|
57
|
-
);
|
|
58
|
-
const initializeStateRef = react.useCallback(() => {
|
|
59
|
-
const { cellBlock: cellBlock2, cellBlockClassName, startCell, endCell } = stateRef.current;
|
|
60
|
-
if (startCell) {
|
|
61
|
-
startCell.classList.remove("vuu-cellblock-start");
|
|
62
|
-
}
|
|
63
|
-
if (endCell) {
|
|
64
|
-
endCell.classList.remove("vuu-cellblock-end");
|
|
65
|
-
}
|
|
66
|
-
if (cellBlock2?.classList.contains(cellBlockClassName)) {
|
|
67
|
-
cellBlock2.classList.remove(cellBlockClassName);
|
|
68
|
-
}
|
|
69
|
-
const { endBox, startBox } = cellblockUtils.refState;
|
|
70
|
-
stateRef.current = {
|
|
71
|
-
...cellblockUtils.refState,
|
|
72
|
-
cellBlock: cellBlock2,
|
|
73
|
-
endBox: { ...endBox },
|
|
74
|
-
endPos: [-1, -1],
|
|
75
|
-
startBox: { ...startBox },
|
|
76
|
-
startPos: [-1, -1]
|
|
77
|
-
};
|
|
78
|
-
}, []);
|
|
79
|
-
const addMouseListener = react.useCallback(
|
|
80
|
-
(mouseOperation, handler) => {
|
|
81
|
-
window.addEventListener(mouseType(mouseOperation), handler);
|
|
82
|
-
handlersRef.current[mouseOperation] = handler;
|
|
83
|
-
},
|
|
84
|
-
[]
|
|
85
|
-
);
|
|
86
|
-
const removeMouseListener = react.useCallback((name) => {
|
|
87
|
-
window.removeEventListener(mouseType(name), handlersRef.current[name]);
|
|
88
|
-
}, []);
|
|
89
|
-
handlersRef.current.mouseMove = react.useCallback((evt) => {
|
|
90
|
-
const { clientX: x, clientY: y } = evt;
|
|
91
|
-
const { endBox, startBox } = stateRef.current;
|
|
92
|
-
if (cellblockUtils.outsideBox(startBox, x, y) && cellblockUtils.outsideBox(endBox, x, y)) {
|
|
93
|
-
const cell = vuuUtils.queryClosest(
|
|
94
|
-
evt.target,
|
|
95
|
-
".vuuTableCell, .vuuCellBlock"
|
|
96
|
-
);
|
|
97
|
-
if (cell?.classList.contains("vuuTableCell")) {
|
|
98
|
-
cellblockUtils.setElementBox(cell, endBox);
|
|
99
|
-
stateRef.current.endCell = cell;
|
|
100
|
-
cellblockUtils.updateCellBlockClassName(stateRef.current);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}, []);
|
|
104
|
-
handlersRef.current.mouseUp = react.useCallback(
|
|
105
|
-
(evt) => {
|
|
106
|
-
removeMouseListener("mouseMove");
|
|
107
|
-
removeMouseListener("mouseUp");
|
|
108
|
-
const { cellBlock: cellBlock2, endCell, startCell } = stateRef.current;
|
|
109
|
-
const table = vuuUtils.queryClosest(evt.target, ".vuuTable");
|
|
110
|
-
endCell?.classList.add("vuu-cellblock-end");
|
|
111
|
-
if (table) {
|
|
112
|
-
table.classList.remove("vuu-cellblock-select-in-progress-mouse");
|
|
113
|
-
}
|
|
114
|
-
if (startCell && endCell) {
|
|
115
|
-
const tableCellBlock = cellblockUtils.getTableCellBlock(startCell, endCell);
|
|
116
|
-
onSelectCellBlock?.(tableCellBlock);
|
|
117
|
-
}
|
|
118
|
-
if (cellBlock2) {
|
|
119
|
-
cellBlock2.focus();
|
|
120
|
-
}
|
|
121
|
-
},
|
|
122
|
-
[onSelectCellBlock, removeMouseListener]
|
|
123
|
-
);
|
|
124
|
-
handlersRef.current.mouseMovePreDrag = react.useCallback(
|
|
125
|
-
(evt) => {
|
|
126
|
-
const { current: state } = stateRef;
|
|
127
|
-
const { mouseStartX, mouseStartY } = state;
|
|
128
|
-
const x = state.mousePosX = evt.clientX;
|
|
129
|
-
const y = state.mousePosY = evt.clientY;
|
|
130
|
-
const distance = Math.max(
|
|
131
|
-
Math.abs(x - mouseStartX),
|
|
132
|
-
Math.abs(y - mouseStartY)
|
|
133
|
-
);
|
|
134
|
-
if (distance > DRAG_THRESHOLD) {
|
|
135
|
-
createCellBlock("mouse");
|
|
136
|
-
const { mouseMove, mouseUp } = handlersRef.current;
|
|
137
|
-
removeMouseListener("mouseMovePreDrag");
|
|
138
|
-
removeMouseListener("mouseUpPreDrag");
|
|
139
|
-
addMouseListener("mouseMove", mouseMove);
|
|
140
|
-
addMouseListener("mouseUp", mouseUp);
|
|
141
|
-
}
|
|
142
|
-
},
|
|
143
|
-
[addMouseListener, createCellBlock, removeMouseListener]
|
|
144
|
-
);
|
|
145
|
-
handlersRef.current.mouseUpPreDrag = react.useCallback(() => {
|
|
146
|
-
removeMouseListener("mouseMovePreDrag");
|
|
147
|
-
removeMouseListener("mouseUpPreDrag");
|
|
148
|
-
}, [removeMouseListener]);
|
|
149
|
-
const handleNativeMouseOver = react.useCallback((evt) => {
|
|
150
|
-
const cell = vuuUtils.queryClosest(evt.target, ".vuuTableCell");
|
|
151
|
-
if (cell) {
|
|
152
|
-
stateRef.current.endPos = tableDomUtils.getAriaCellPos(cell);
|
|
153
|
-
stateRef.current.endCell?.classList.remove("vuu-cellblock-end");
|
|
154
|
-
stateRef.current.endCell = cell;
|
|
155
|
-
cellblockUtils.setElementBox(cell, stateRef.current.endBox);
|
|
156
|
-
cellblockUtils.updateCellBlockClassName(stateRef.current);
|
|
157
|
-
cell?.classList.add("vuu-cellblock-end");
|
|
158
|
-
}
|
|
159
|
-
}, []);
|
|
160
|
-
const handleNativeMouseUp = react.useCallback(() => {
|
|
161
|
-
window.removeEventListener("mouseover", handleNativeMouseOver);
|
|
162
|
-
}, [handleNativeMouseOver]);
|
|
163
|
-
const handleMouseDown = react.useCallback(
|
|
164
|
-
(evt) => {
|
|
165
|
-
if (evt.button === 0) {
|
|
166
|
-
initializeStateRef();
|
|
167
|
-
const { current: state } = stateRef;
|
|
168
|
-
const cell = vuuUtils.queryClosest(evt.target, ".vuuTableCell");
|
|
169
|
-
if (cell) {
|
|
170
|
-
state.startCell = cell;
|
|
171
|
-
state.mouseStartX = evt.clientX;
|
|
172
|
-
state.mouseStartY = evt.clientY;
|
|
173
|
-
const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;
|
|
174
|
-
addMouseListener("mouseMovePreDrag", mouseMovePreDrag);
|
|
175
|
-
addMouseListener("mouseUpPreDrag", mouseUpPreDrag);
|
|
176
|
-
console.log("register mouse enter");
|
|
177
|
-
window.addEventListener("mouseover", handleNativeMouseOver);
|
|
178
|
-
window.addEventListener("mouseup", handleNativeMouseUp);
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
[
|
|
183
|
-
addMouseListener,
|
|
184
|
-
handleNativeMouseOver,
|
|
185
|
-
handleNativeMouseUp,
|
|
186
|
-
initializeStateRef
|
|
187
|
-
]
|
|
188
|
-
);
|
|
189
|
-
const nativeKeyDownHandlerRef = react.useRef(NullHandler);
|
|
190
|
-
const handleNativeKeyUp = react.useCallback((evt) => {
|
|
191
|
-
if (evt.key === "Shift") {
|
|
192
|
-
const { endCell } = stateRef.current;
|
|
193
|
-
const table = vuuUtils.queryClosest(evt.target, ".vuuTable");
|
|
194
|
-
endCell?.classList.add("vuu-cellblock-end");
|
|
195
|
-
if (table) {
|
|
196
|
-
table.classList.remove("vuu-cellblock-select-in-progress-keyboard");
|
|
197
|
-
}
|
|
198
|
-
window.removeEventListener("keydown", nativeKeyDownHandlerRef.current, {
|
|
199
|
-
capture: true
|
|
200
|
-
});
|
|
201
|
-
window.removeEventListener("keyup", handleNativeKeyUp, {
|
|
202
|
-
capture: true
|
|
203
|
-
});
|
|
204
|
-
}
|
|
205
|
-
}, []);
|
|
206
|
-
const handleNativeKeyDown = nativeKeyDownHandlerRef.current = react.useCallback(
|
|
207
|
-
({ key }) => {
|
|
208
|
-
if (vuuUtils.isArrowKey(key)) {
|
|
209
|
-
const { endBox, endPos, startBox } = stateRef.current;
|
|
210
|
-
if (cellblockUtils.isNullCellBox(startBox)) {
|
|
211
|
-
createCellBlock("keyboard");
|
|
212
|
-
}
|
|
213
|
-
const nextCell = tableDomUtils.getNextCellPos(key, endPos, columnCount, rowCount);
|
|
214
|
-
stateRef.current.endPos = nextCell;
|
|
215
|
-
const cell = tableDomUtils.getTableCell(containerRef, nextCell);
|
|
216
|
-
stateRef.current.endCell = cell;
|
|
217
|
-
cellblockUtils.setElementBox(cell, endBox);
|
|
218
|
-
cellblockUtils.updateCellBlockClassName(stateRef.current);
|
|
219
|
-
}
|
|
220
|
-
},
|
|
221
|
-
[columnCount, containerRef, createCellBlock, rowCount]
|
|
222
|
-
);
|
|
223
|
-
const handleKeyDown = react.useCallback(
|
|
224
|
-
(evt) => {
|
|
225
|
-
if (evt.key === "Shift") {
|
|
226
|
-
initializeStateRef();
|
|
227
|
-
const cell = vuuUtils.queryClosest(evt.target, ".vuuTableCell");
|
|
228
|
-
if (cell) {
|
|
229
|
-
const startPos = tableDomUtils.getAriaCellPos(cell);
|
|
230
|
-
stateRef.current.startPos = startPos;
|
|
231
|
-
stateRef.current.endPos = clone(startPos);
|
|
232
|
-
const { current: state } = stateRef;
|
|
233
|
-
state.startCell = cell;
|
|
234
|
-
window.addEventListener("keydown", handleNativeKeyDown, {
|
|
235
|
-
capture: true
|
|
236
|
-
});
|
|
237
|
-
window.addEventListener("keyup", handleNativeKeyUp, {
|
|
238
|
-
capture: true
|
|
239
|
-
});
|
|
240
|
-
evt.preventDefault();
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
},
|
|
244
|
-
[handleNativeKeyDown, handleNativeKeyUp, initializeStateRef]
|
|
245
|
-
);
|
|
246
|
-
return {
|
|
247
|
-
cellBlock,
|
|
248
|
-
onKeyDown: allowCellBlockSelection ? handleKeyDown : void 0,
|
|
249
|
-
onMouseDown: allowCellBlockSelection ? handleMouseDown : void 0
|
|
250
|
-
};
|
|
251
|
-
};
|
|
252
|
-
|
|
253
|
-
exports.useCellBlockSelection = useCellBlockSelection;
|
|
254
|
-
//# sourceMappingURL=useCellBlockSelection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCellBlockSelection.js","sources":["../../src/cell-block/useCellBlockSelection.tsx"],"sourcesContent":["import { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n RefCallback,\n RefObject,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n getAriaCellPos,\n getNextCellPos,\n getTableCell,\n} from \"../table-dom-utils\";\nimport { CellBlock } from \"./CellBlock\";\nimport {\n PosTuple,\n RefState,\n TableCellBlock,\n getTableCellBlock,\n getTextFromCells,\n isNullCellBox,\n outsideBox,\n refState,\n setElementBox,\n updateCellBlockClassName,\n} from \"./cellblock-utils\";\n\nconst clone = (posTuple: PosTuple) => posTuple.slice() as PosTuple;\n\ntype NativeKeyboardHandler = (evt: KeyboardEvent) => void;\ntype NativeMouseHandler = (evt: MouseEvent) => void;\ntype MouseHandlers = {\n mouseMove: NativeMouseHandler;\n mouseMovePreDrag: NativeMouseHandler;\n mouseUp: NativeMouseHandler;\n mouseUpPreDrag: NativeMouseHandler;\n};\n\nconst NullHandler = () => console.error(\"no handler installed\");\nconst mouseHandlers: MouseHandlers = {\n mouseMove: NullHandler,\n mouseMovePreDrag: NullHandler,\n mouseUp: NullHandler,\n mouseUpPreDrag: NullHandler,\n};\n\ntype MouseOperation = keyof typeof mouseHandlers;\n\nconst mouseType = (name: string) =>\n name.startsWith(\"mouseMove\") ? \"mousemove\" : \"mouseup\";\n\nconst DRAG_THRESHOLD = 5;\n\nexport interface CellblockSelectionHookProps {\n allowCellBlockSelection?: boolean;\n columnCount?: number;\n containerRef: RefObject<HTMLElement | null>;\n onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n rowCount?: number;\n}\n\nexport const useCellBlockSelection = ({\n allowCellBlockSelection,\n columnCount = 0,\n containerRef,\n onSelectCellBlock,\n rowCount = 0,\n}: CellblockSelectionHookProps) => {\n const [cellBlock, setCellBlock] = useState<ReactElement | null>(null);\n const stateRef = useRef<RefState>(refState);\n const handlersRef = useRef<MouseHandlers>(mouseHandlers);\n\n const handleCopy = useCallback(async () => {\n const { startCell, endCell } = stateRef.current;\n if (startCell && endCell) {\n const tsvText = getTextFromCells(startCell, endCell);\n const type = \"text/plain\";\n const blob = new Blob([tsvText], { type });\n const data = [new ClipboardItem({ [type]: blob })];\n await navigator.clipboard.write(data);\n }\n }, []);\n\n const cellBlockRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n stateRef.current.cellBlock = el;\n }, []);\n\n const createCellBlock = useCallback(\n (method: \"mouse\" | \"keyboard\" = \"mouse\") => {\n const { startBox, startCell } = stateRef.current;\n if (startCell) {\n const table = queryClosest<HTMLDivElement>(startCell, \".vuuTable\");\n if (table) {\n table.classList.add(`vuu-cellblock-select-in-progress-${method}`);\n }\n setElementBox(startCell, startBox);\n startCell.classList.add(\"vuu-cellblock-start\");\n setCellBlock(<CellBlock onCopy={handleCopy} ref={cellBlockRef} />);\n }\n },\n [cellBlockRef, handleCopy],\n );\n\n const initializeStateRef = useCallback(() => {\n const { cellBlock, cellBlockClassName, startCell, endCell } =\n stateRef.current;\n if (startCell) {\n startCell.classList.remove(\"vuu-cellblock-start\");\n }\n if (endCell) {\n endCell.classList.remove(\"vuu-cellblock-end\");\n }\n if (cellBlock?.classList.contains(cellBlockClassName)) {\n cellBlock.classList.remove(cellBlockClassName);\n }\n\n const { endBox, startBox } = refState;\n\n stateRef.current = {\n ...refState,\n cellBlock,\n endBox: { ...endBox },\n endPos: [-1, -1],\n startBox: { ...startBox },\n startPos: [-1, -1],\n };\n }, []);\n\n const addMouseListener = useCallback(\n (mouseOperation: MouseOperation, handler: NativeMouseHandler) => {\n window.addEventListener(mouseType(mouseOperation), handler);\n handlersRef.current[mouseOperation] = handler;\n },\n [],\n );\n\n const removeMouseListener = useCallback((name: MouseOperation) => {\n window.removeEventListener(mouseType(name), handlersRef.current[name]);\n }, []);\n\n handlersRef.current.mouseMove = useCallback((evt: MouseEvent) => {\n const { clientX: x, clientY: y } = evt;\n const { endBox, startBox } = stateRef.current;\n if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {\n const cell = queryClosest<HTMLDivElement>(\n evt.target,\n \".vuuTableCell, .vuuCellBlock\",\n );\n if (cell?.classList.contains(\"vuuTableCell\")) {\n setElementBox(cell, endBox);\n stateRef.current.endCell = cell;\n updateCellBlockClassName(stateRef.current);\n }\n }\n }, []);\n\n handlersRef.current.mouseUp = useCallback(\n (evt: MouseEvent) => {\n removeMouseListener(\"mouseMove\");\n removeMouseListener(\"mouseUp\");\n\n const { cellBlock, endCell, startCell } = stateRef.current;\n\n const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n endCell?.classList.add(\"vuu-cellblock-end\");\n if (table) {\n table.classList.remove(\"vuu-cellblock-select-in-progress-mouse\");\n }\n\n if (startCell && endCell) {\n const tableCellBlock = getTableCellBlock(startCell, endCell);\n onSelectCellBlock?.(tableCellBlock);\n }\n\n if (cellBlock) {\n cellBlock.focus();\n }\n },\n [onSelectCellBlock, removeMouseListener],\n );\n\n handlersRef.current.mouseMovePreDrag = useCallback(\n (evt: MouseEvent) => {\n const { current: state } = stateRef;\n const { mouseStartX, mouseStartY } = state;\n\n const x = (state.mousePosX = evt.clientX);\n const y = (state.mousePosY = evt.clientY);\n\n const distance = Math.max(\n Math.abs(x - mouseStartX),\n Math.abs(y - mouseStartY),\n );\n\n if (distance > DRAG_THRESHOLD) {\n createCellBlock(\"mouse\");\n\n const { mouseMove, mouseUp } = handlersRef.current;\n removeMouseListener(\"mouseMovePreDrag\");\n removeMouseListener(\"mouseUpPreDrag\");\n addMouseListener(\"mouseMove\", mouseMove);\n addMouseListener(\"mouseUp\", mouseUp);\n }\n },\n [addMouseListener, createCellBlock, removeMouseListener],\n );\n\n handlersRef.current.mouseUpPreDrag = useCallback(() => {\n removeMouseListener(\"mouseMovePreDrag\");\n removeMouseListener(\"mouseUpPreDrag\");\n }, [removeMouseListener]);\n\n const handleNativeMouseOver = useCallback((evt: MouseEvent) => {\n const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n if (cell) {\n stateRef.current.endPos = getAriaCellPos(cell);\n stateRef.current.endCell?.classList.remove(\"vuu-cellblock-end\");\n stateRef.current.endCell = cell;\n setElementBox(cell, stateRef.current.endBox);\n updateCellBlockClassName(stateRef.current);\n\n cell?.classList.add(\"vuu-cellblock-end\");\n }\n }, []);\n\n const handleNativeMouseUp = useCallback(() => {\n window.removeEventListener(\"mouseover\", handleNativeMouseOver);\n }, [handleNativeMouseOver]);\n\n const handleMouseDown = useCallback<MouseEventHandler>(\n (evt) => {\n if (evt.button === 0) {\n initializeStateRef();\n const { current: state } = stateRef;\n const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n if (cell) {\n state.startCell = cell;\n state.mouseStartX = evt.clientX;\n state.mouseStartY = evt.clientY;\n\n const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;\n addMouseListener(\"mouseMovePreDrag\", mouseMovePreDrag);\n addMouseListener(\"mouseUpPreDrag\", mouseUpPreDrag);\n console.log(\"register mouse enter\");\n window.addEventListener(\"mouseover\", handleNativeMouseOver);\n window.addEventListener(\"mouseup\", handleNativeMouseUp);\n }\n }\n },\n [\n addMouseListener,\n handleNativeMouseOver,\n handleNativeMouseUp,\n initializeStateRef,\n ],\n );\n\n const nativeKeyDownHandlerRef = useRef<NativeKeyboardHandler>(NullHandler);\n\n const handleNativeKeyUp = useCallback((evt: KeyboardEvent) => {\n if (evt.key === \"Shift\") {\n const { endCell } = stateRef.current;\n const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n endCell?.classList.add(\"vuu-cellblock-end\");\n if (table) {\n table.classList.remove(\"vuu-cellblock-select-in-progress-keyboard\");\n }\n\n window.removeEventListener(\"keydown\", nativeKeyDownHandlerRef.current, {\n capture: true,\n });\n window.removeEventListener(\"keyup\", handleNativeKeyUp, {\n capture: true,\n });\n }\n }, []);\n\n const handleNativeKeyDown = (nativeKeyDownHandlerRef.current = useCallback(\n ({ key }: KeyboardEvent) => {\n if (isArrowKey(key)) {\n const { endBox, endPos, startBox } = stateRef.current;\n if (isNullCellBox(startBox)) {\n createCellBlock(\"keyboard\");\n }\n const nextCell = getNextCellPos(key, endPos, columnCount, rowCount);\n stateRef.current.endPos = nextCell;\n const cell = getTableCell(containerRef, nextCell);\n stateRef.current.endCell = cell as HTMLDivElement;\n setElementBox(cell, endBox);\n updateCellBlockClassName(stateRef.current);\n }\n },\n [columnCount, containerRef, createCellBlock, rowCount],\n ));\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (evt) => {\n if (evt.key === \"Shift\") {\n initializeStateRef();\n const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n if (cell) {\n const startPos = getAriaCellPos(cell);\n stateRef.current.startPos = startPos;\n stateRef.current.endPos = clone(startPos);\n const { current: state } = stateRef;\n state.startCell = cell;\n\n window.addEventListener(\"keydown\", handleNativeKeyDown, {\n capture: true,\n });\n window.addEventListener(\"keyup\", handleNativeKeyUp, {\n capture: true,\n });\n\n evt.preventDefault();\n }\n }\n },\n [handleNativeKeyDown, handleNativeKeyUp, initializeStateRef],\n );\n\n return {\n cellBlock,\n onKeyDown: allowCellBlockSelection ? handleKeyDown : undefined,\n onMouseDown: allowCellBlockSelection ? handleMouseDown : undefined,\n };\n};\n"],"names":["useState","useRef","refState","useCallback","getTextFromCells","queryClosest","setElementBox","CellBlock","cellBlock","outsideBox","updateCellBlockClassName","getTableCellBlock","getAriaCellPos","isArrowKey","isNullCellBox","getNextCellPos","getTableCell"],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var checkboxCellCss = ".vuuCheckboxCell-checkbox {\n border: solid 2px transparent;\n input:focus-visible + .saltCheckboxIcon {\n outline: none;\n }\n}\n\n.vuuTableCell-editable .vuuCheckboxCell-checkbox:focus-within {\n border: solid 2px var(--salt-focused-outlineColor);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = checkboxCellCss;
|
|
6
|
-
//# sourceMappingURL=CheckboxCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
-
var styles = require('@salt-ds/styles');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var CheckboxCell$1 = require('./CheckboxCell.css.js');
|
|
10
|
-
|
|
11
|
-
const classBase = "vuuCheckboxCell";
|
|
12
|
-
const CheckboxCell = react.memo(
|
|
13
|
-
({ column, columnMap, onEdit, row }) => {
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "vuu-checkbox-cell",
|
|
17
|
-
css: CheckboxCell$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
const dataIdx = columnMap[column.name];
|
|
21
|
-
const isChecked = !!row[dataIdx];
|
|
22
|
-
const handleCommit = react.useCallback(
|
|
23
|
-
(value) => async (evt) => {
|
|
24
|
-
const res = await onEdit?.(
|
|
25
|
-
{ previousValue: isChecked, value },
|
|
26
|
-
"commit"
|
|
27
|
-
);
|
|
28
|
-
if (res === true) {
|
|
29
|
-
vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
|
|
30
|
-
}
|
|
31
|
-
return res;
|
|
32
|
-
},
|
|
33
|
-
[isChecked, onEdit]
|
|
34
|
-
);
|
|
35
|
-
const handleKeyDown = react.useCallback(
|
|
36
|
-
async (evt) => {
|
|
37
|
-
if (evt.key === "Enter") {
|
|
38
|
-
const res = await onEdit?.(
|
|
39
|
-
{ previousValue: isChecked, value: !isChecked },
|
|
40
|
-
"commit"
|
|
41
|
-
);
|
|
42
|
-
if (res === true) {
|
|
43
|
-
vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
[isChecked, onEdit]
|
|
48
|
-
);
|
|
49
|
-
const className = `${classBase}-checkbox`;
|
|
50
|
-
return column.editable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
51
|
-
core.Checkbox,
|
|
52
|
-
{
|
|
53
|
-
checked: isChecked,
|
|
54
|
-
className,
|
|
55
|
-
onClick: handleCommit(!isChecked),
|
|
56
|
-
onKeyDown: handleKeyDown
|
|
57
|
-
}
|
|
58
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, { checked: isChecked, className, disabled: true });
|
|
59
|
-
},
|
|
60
|
-
vuuUtils.dataColumnAndKeyUnchanged
|
|
61
|
-
);
|
|
62
|
-
CheckboxCell.displayName = "CheckboxCell";
|
|
63
|
-
vuuUtils.registerComponent("checkbox-cell", CheckboxCell, "cell-renderer", {
|
|
64
|
-
serverDataType: "boolean"
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
exports.CheckboxCell = CheckboxCell;
|
|
68
|
-
//# sourceMappingURL=CheckboxCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxCell.js","sources":["../../../src/cell-renderers/checkbox-cell/CheckboxCell.tsx"],"sourcesContent":["import { MouseEvent, KeyboardEventHandler, memo, useCallback } from \"react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxCellCss from \"./CheckboxCell.css\";\n\nconst classBase = \"vuuCheckboxCell\";\n\nexport const CheckboxCell = memo(\n ({ column, columnMap, onEdit, row }: TableCellRendererProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-cell\",\n css: checkboxCellCss,\n window: targetWindow,\n });\n\n const dataIdx = columnMap[column.name];\n const isChecked = !!row[dataIdx];\n\n const handleCommit = useCallback(\n (value: boolean) => async (evt: MouseEvent) => {\n const res = await onEdit?.(\n { previousValue: isChecked, value },\n \"commit\",\n );\n if (res === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n return res;\n },\n [isChecked, onEdit],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n async (evt) => {\n if (evt.key === \"Enter\") {\n const res = await onEdit?.(\n { previousValue: isChecked, value: !isChecked },\n \"commit\",\n );\n if (res === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [isChecked, onEdit],\n );\n\n const className = `${classBase}-checkbox`;\n\n return column.editable ? (\n <Checkbox\n checked={isChecked}\n className={className}\n onClick={handleCommit(!isChecked)}\n onKeyDown={handleKeyDown}\n />\n ) : (\n <Checkbox checked={isChecked} className={className} disabled={true} />\n );\n },\n dataColumnAndKeyUnchanged,\n);\nCheckboxCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\"checkbox-cell\", CheckboxCell, \"cell-renderer\", {\n serverDataType: \"boolean\",\n});\n"],"names":["memo","useWindow","useComponentCssInjection","checkboxCellCss","useCallback","dispatchCustomEvent","jsx","Checkbox","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;AAaA,MAAM,SAAY,GAAA,iBAAA;AAEX,MAAM,YAAe,GAAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,MAAA,EAAQ,SAAW,EAAA,MAAA,EAAQ,KAAkC,KAAA;AAC9D,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,IAAA,MAAM,SAAY,GAAA,CAAC,CAAC,GAAA,CAAI,OAAO,CAAA;AAE/B,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,KAAmB,KAAA,OAAO,GAAoB,KAAA;AAC7C,QAAA,MAAM,MAAM,MAAM,MAAA;AAAA,UAChB,EAAE,aAAe,EAAA,SAAA,EAAW,KAAM,EAAA;AAAA,UAClC;AAAA,SACF;AACA,QAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,UAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,QAAO,OAAA,GAAA;AAAA,OACT;AAAA,MACA,CAAC,WAAW,MAAM;AAAA,KACpB;AAEA,IAAA,MAAM,aAAgB,GAAAD,iBAAA;AAAA,MACpB,OAAO,GAAQ,KAAA;AACb,QAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,UAAA,MAAM,MAAM,MAAM,MAAA;AAAA,YAChB,EAAE,aAAA,EAAe,SAAW,EAAA,KAAA,EAAO,CAAC,SAAU,EAAA;AAAA,YAC9C;AAAA,WACF;AACA,UAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,YAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAC7D;AACF,OACF;AAAA,MACA,CAAC,WAAW,MAAM;AAAA,KACpB;AAEA,IAAM,MAAA,SAAA,GAAY,GAAG,SAAS,CAAA,SAAA,CAAA;AAE9B,IAAA,OAAO,OAAO,QACZ,mBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,SAAA;AAAA,QACT,SAAA;AAAA,QACA,OAAA,EAAS,YAAa,CAAA,CAAC,SAAS,CAAA;AAAA,QAChC,SAAW,EAAA;AAAA;AAAA,wBAGZD,cAAA,CAAAC,aAAA,EAAA,EAAS,SAAS,SAAW,EAAA,SAAA,EAAsB,UAAU,IAAM,EAAA,CAAA;AAAA,GAExE;AAAA,EACAC;AACF;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;AAE3BC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,cAAgB,EAAA;AAClB,CAAC,CAAA;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var checkboxRowSelectorCss = ".vuuTableCell {\n .vuuCheckboxRowSelector {\n align-items: center;\n height: 100%;\n\n .saltCheckboxIcon {\n margin-top: 0;\n }\n }\n .vuuCheckboxRowSelectorIcon {\n margin-top: calc(var(--row-height) / 2 - 6px);\n }\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = checkboxRowSelectorCss;
|
|
6
|
-
//# sourceMappingURL=CheckboxRowSelectorCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxRowSelectorCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
var styles = require('@salt-ds/styles');
|
|
7
|
-
var window = require('@salt-ds/window');
|
|
8
|
-
var CheckboxRowSelectorCell$1 = require('./CheckboxRowSelectorCell.css.js');
|
|
9
|
-
|
|
10
|
-
const CheckboxRowSelectorCell = ({
|
|
11
|
-
row
|
|
12
|
-
}) => {
|
|
13
|
-
const targetWindow = window.useWindow();
|
|
14
|
-
styles.useComponentCssInjection({
|
|
15
|
-
testId: "vuu-checkbox-row-selector-cell",
|
|
16
|
-
css: CheckboxRowSelectorCell$1,
|
|
17
|
-
window: targetWindow
|
|
18
|
-
});
|
|
19
|
-
const isChecked = vuuUtils.isRowSelected(row);
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, { checked: isChecked, className: "vuuCheckboxRowSelector" });
|
|
21
|
-
};
|
|
22
|
-
CheckboxRowSelectorCell.displayName = "CheckboxCell";
|
|
23
|
-
vuuUtils.registerComponent(
|
|
24
|
-
"checkbox-row-selector-cell",
|
|
25
|
-
CheckboxRowSelectorCell,
|
|
26
|
-
"cell-renderer",
|
|
27
|
-
{
|
|
28
|
-
serverDataType: "boolean"
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
exports.CheckboxRowSelectorCell = CheckboxRowSelectorCell;
|
|
33
|
-
//# sourceMappingURL=CheckboxRowSelectorCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxRowSelectorCell.js","sources":["../../../src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { isRowSelected, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxRowSelectorCss from \"./CheckboxRowSelectorCell.css\";\n\nexport const CheckboxRowSelectorCell: React.FC<TableCellRendererProps> = ({\n row,\n}) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-row-selector-cell\",\n css: checkboxRowSelectorCss,\n window: targetWindow,\n });\n\n const isChecked = isRowSelected(row);\n\n return <Checkbox checked={isChecked} className=\"vuuCheckboxRowSelector\" />;\n};\nCheckboxRowSelectorCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\n \"checkbox-row-selector-cell\",\n CheckboxRowSelectorCell,\n \"cell-renderer\",\n {\n serverDataType: \"boolean\",\n },\n);\n"],"names":["useWindow","useComponentCssInjection","checkboxRowSelectorCss","isRowSelected","jsx","Checkbox","registerComponent"],"mappings":";;;;;;;;;AAQO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gCAAA;AAAA,IACR,GAAK,EAAAC,yBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAYC,uBAAc,GAAG,CAAA;AAEnC,EAAA,uBAAQC,cAAA,CAAAC,aAAA,EAAA,EAAS,OAAS,EAAA,SAAA,EAAW,WAAU,wBAAyB,EAAA,CAAA;AAC1E;AACA,uBAAA,CAAwB,WAAc,GAAA,cAAA;AAEtCC,0BAAA;AAAA,EACE,4BAAA;AAAA,EACA,uBAAA;AAAA,EACA,eAAA;AAAA,EACA;AAAA,IACE,cAAgB,EAAA;AAAA;AAEpB,CAAA;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var inputCellCss = ".vuuTableCell.vuuTableCell-editable {\n .vuuTableInputCell.saltInput-primary {\n --salt-focused-outlineStyle: none;\n --saltInput-height: var(--vuu-table-embedded-control-height);\n --saltInput-minHeight: var(--saltInput-height);\n border-radius: 2px;\n font-weight: 500;\n }\n}\n\n.vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n}\n\n.vuuTableCell-editable:focus-within\n .vuuTableInputCell.saltInput-primary:focus-within,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: dotted 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n}\n\n.vuuTableInputCell-icon {\n --vuu-icon-height: 13px;\n --vuu-icon-left: 0;\n --vuu-icon-size: 15px;\n --vuu-icon-width: 12px;\n border-radius: 10px;\n}\n\n.vuuTableInputCell-error {\n .saltInput-startAdornmentContainer {\n .vuuTableInputCell-icon {\n --vuu-icon-color: red;\n }\n }\n .saltInput-endAdornmentContainer {\n .vuuTableInputCell-icon {\n --vuu-icon-color: red;\n }\n }\n}\n\n.vuuTableCell-right {\n .saltInput-input {\n text-align: right;\n }\n}\n\n.vuuTableCell-error {\n .vuuTableInputCell {\n outline: var(--vuuTableCell-outline, solid red 2px);\n outline-offset: -2px;\n }\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = inputCellCss;
|
|
6
|
-
//# sourceMappingURL=InputCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InputCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
7
|
-
var styles = require('@salt-ds/styles');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var cx = require('clsx');
|
|
10
|
-
var InputCell$1 = require('./InputCell.css.js');
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuTableInputCell";
|
|
13
|
-
const InputCell = ({
|
|
14
|
-
column,
|
|
15
|
-
columnMap,
|
|
16
|
-
onEdit,
|
|
17
|
-
row
|
|
18
|
-
}) => {
|
|
19
|
-
const targetWindow = window.useWindow();
|
|
20
|
-
styles.useComponentCssInjection({
|
|
21
|
-
testId: "vuu-input-cell",
|
|
22
|
-
css: InputCell$1,
|
|
23
|
-
window: targetWindow
|
|
24
|
-
});
|
|
25
|
-
const dataIdx = columnMap[column.name];
|
|
26
|
-
const dataValue = row[dataIdx];
|
|
27
|
-
const { align = "left", clientSideEditValidationCheck } = column;
|
|
28
|
-
const { warningMessage, ...editProps } = vuuUiControls.useEditableText({
|
|
29
|
-
value: dataValue,
|
|
30
|
-
onEdit,
|
|
31
|
-
clientSideEditValidationCheck
|
|
32
|
-
});
|
|
33
|
-
const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
|
|
34
|
-
const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
|
|
35
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
36
|
-
core.Input,
|
|
37
|
-
{
|
|
38
|
-
...editProps,
|
|
39
|
-
className: cx(classBase, {
|
|
40
|
-
[`${classBase}-error`]: warningMessage !== void 0
|
|
41
|
-
}),
|
|
42
|
-
endAdornment,
|
|
43
|
-
startAdornment
|
|
44
|
-
}
|
|
45
|
-
);
|
|
46
|
-
};
|
|
47
|
-
vuuUtils.registerComponent("input-cell", InputCell, "cell-renderer", {
|
|
48
|
-
userCanAssign: false
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
exports.InputCell = InputCell;
|
|
52
|
-
//# sourceMappingURL=InputCell.js.map
|