@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,72 +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 cx = require('clsx');
|
|
7
|
-
var react = require('react');
|
|
8
|
-
var Table = require('../Table.js');
|
|
9
|
-
var BulkEditRow = require('./BulkEditRow.js');
|
|
10
|
-
var useBulkEditPanel = require('./useBulkEditPanel.js');
|
|
11
|
-
var BulkEditPanel$1 = require('./BulkEditPanel.css.js');
|
|
12
|
-
|
|
13
|
-
const classBase = "vuuBulkEditPanel";
|
|
14
|
-
const BulkEditPanel = ({
|
|
15
|
-
className,
|
|
16
|
-
columns,
|
|
17
|
-
dataSource,
|
|
18
|
-
parentDs,
|
|
19
|
-
onValidationStatusChange,
|
|
20
|
-
...htmlAttributes
|
|
21
|
-
}) => {
|
|
22
|
-
const targetWindow = window.useWindow();
|
|
23
|
-
styles.useComponentCssInjection({
|
|
24
|
-
testId: "vuu-checkbox-cell",
|
|
25
|
-
css: BulkEditPanel$1,
|
|
26
|
-
window: targetWindow
|
|
27
|
-
});
|
|
28
|
-
const { onBulkChange, onDataEdited, onRowChange, tableConfig } = useBulkEditPanel.useBulkEditPanel({
|
|
29
|
-
columns,
|
|
30
|
-
dataSource,
|
|
31
|
-
onValidationStatusChange
|
|
32
|
-
});
|
|
33
|
-
const bulkEditRow = react.useMemo(() => {
|
|
34
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
35
|
-
BulkEditRow.BulkEditRow,
|
|
36
|
-
{
|
|
37
|
-
dataSource: parentDs,
|
|
38
|
-
onBulkChange,
|
|
39
|
-
onRowChange
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
}, [onBulkChange, onRowChange, parentDs]);
|
|
43
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
44
|
-
"div",
|
|
45
|
-
{
|
|
46
|
-
...htmlAttributes,
|
|
47
|
-
className: cx(classBase, className),
|
|
48
|
-
style: { display: "flex", flexDirection: "column" },
|
|
49
|
-
children: [
|
|
50
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-toolbar` }),
|
|
51
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-table`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
52
|
-
Table.Table,
|
|
53
|
-
{
|
|
54
|
-
allowDragColumnHeader: false,
|
|
55
|
-
config: tableConfig,
|
|
56
|
-
customHeader: bulkEditRow,
|
|
57
|
-
dataSource,
|
|
58
|
-
height: 380,
|
|
59
|
-
width: 600,
|
|
60
|
-
showColumnHeaderMenus: false,
|
|
61
|
-
selectionModel: "none",
|
|
62
|
-
onDataEdited,
|
|
63
|
-
maxViewportRowLimit: 10
|
|
64
|
-
}
|
|
65
|
-
) })
|
|
66
|
-
]
|
|
67
|
-
}
|
|
68
|
-
);
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
exports.BulkEditPanel = BulkEditPanel;
|
|
72
|
-
//# sourceMappingURL=BulkEditPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BulkEditPanel.js","sources":["../../src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactElement, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { BulkEditRow } from \"./BulkEditRow\";\nimport { useBulkEditPanel } from \"./useBulkEditPanel\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\nexport interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {\n columns?: ColumnDescriptor[];\n dataSource: DataSource;\n response?: RpcResponse;\n mainTableName?: string;\n parentDs: DataSource;\n onValidationStatusChange: (isValid: boolean) => void;\n}\n\nexport const BulkEditPanel = ({\n className,\n columns,\n dataSource,\n parentDs,\n onValidationStatusChange,\n ...htmlAttributes\n}: BulkEditPanelProps): ReactElement => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-cell\",\n css: bulkEditPanelCss,\n window: targetWindow,\n });\n\n const { onBulkChange, onDataEdited, onRowChange, tableConfig } =\n useBulkEditPanel({\n columns,\n dataSource,\n onValidationStatusChange,\n });\n\n const bulkEditRow = useMemo(() => {\n return (\n <BulkEditRow\n dataSource={parentDs}\n onBulkChange={onBulkChange}\n onRowChange={onRowChange}\n />\n );\n }, [onBulkChange, onRowChange, parentDs]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n style={{ display: \"flex\", flexDirection: \"column\" }}\n >\n <div className={`${classBase}-toolbar`} />\n <div className={`${classBase}-table`}>\n <Table\n allowDragColumnHeader={false}\n config={tableConfig}\n customHeader={bulkEditRow}\n dataSource={dataSource}\n height={380}\n width={600}\n showColumnHeaderMenus={false}\n selectionModel=\"none\"\n onDataEdited={onDataEdited}\n maxViewportRowLimit={10}\n />\n </div>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditPanelCss","useBulkEditPanel","useMemo","jsx","BulkEditRow","jsxs","Table"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,kBAAA;AAWX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,wBAAA;AAAA,EACA,GAAG;AACL,CAAwC,KAAA;AACtC,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAc,EAAA,YAAA,EAAc,WAAa,EAAA,WAAA,KAC/CC,iCAAiB,CAAA;AAAA,IACf,OAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM;AAChC,IACE,uBAAAC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,UAAY,EAAA,QAAA;AAAA,QACZ,YAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,GAED,EAAA,CAAC,YAAc,EAAA,WAAA,EAAa,QAAQ,CAAC,CAAA;AAExC,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAElD,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvCA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAACG,WAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAQ,EAAA,WAAA;AAAA,YACR,YAAc,EAAA,WAAA;AAAA,YACd,UAAA;AAAA,YACA,MAAQ,EAAA,GAAA;AAAA,YACR,KAAO,EAAA,GAAA;AAAA,YACP,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,YACf,YAAA;AAAA,YACA,mBAAqB,EAAA;AAAA;AAAA,SAEzB,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var bulkEditRowCss = ".vuuBulkEditRow {\n --filter-borderColor: var(--salt-separable-secondary-borderColor);\n --filter-color: var(--salt-content-primary-foreground-disabled);\n --filter-padding: 1px 1px 1px 0;\n --item-content-height: 22px;\n height: var(--salt-size-base);\n\n .vuuBulkEditRowCell:has(input:focus) {\n --filter-borderColor: transparent;\n --item-content-height: 20px;\n\n outline-width: 2px;\n outline-offset: -2px;\n outline-style: dotted;\n outline-color: var(--salt-focused-outlineColor);\n\n /* the padding ensures the outline is not clipped */\n --filter-padding: 0 2px;\n /* prevents shift when we apply the padding */\n --saltInput-paddingLeft: 2px;\n\n .saltInput-input {\n outline: none;\n }\n .saltInput-focused {\n border: none;\n outline: none;\n }\n\n .saltComboBox-focused {\n outline: none;\n }\n }\n\n .vuuBulkEditRowCell:focus {\n --filter-borderColor: transparent;\n --item-content-height: 20px;\n /* the padding ensures the outline is not clipped */\n --filter-padding: 0 2px;\n /* prevents shift when we apply the padding */\n --saltInput-paddingLeft: 2px;\n }\n\n .vuuBulkEditRowCell {\n --saltInput-minHeight: var(--item-content-height);\n --saltPillInput-minHeight: var(--item-content-height);\n\n align-items: center;\n display: inline-flex;\n height: 100%;\n padding: var(--filter-padding);\n\n .vuuTypeaheadInput {\n border-style: solid;\n border-color: var(--filter-borderColor);\n border-width: 1px;\n border-radius: 0;\n height: var(--item-content-height);\n input::placeholder {\n color: var(--filter-color);\n }\n }\n\n\n .saltInput-primary.vuuInput {\n border-style: solid;\n border-color: var(--filter-borderColor);\n border-width: 1px;\n border-radius: 0;\n height: var(--item-content-height);\n min-height: var(--item-content-height);\n input::placeholder {\n color: var(--filter-color);\n }\n }\n }\n\n .vuuBulkEditRow-virtualColSpan {\n display: inline-block;\n }\n}\n\n.vuuBulkEditRow:focus-within {\n --filter-borderColor: var(--salt-separable-primary-borderColor);\n --filter-color: var(--salt-content-primary-foreground);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = bulkEditRowCss;
|
|
6
|
-
//# sourceMappingURL=BulkEditRow.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BulkEditRow.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,81 +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 vuuDataReact = require('@vuu-ui/vuu-data-react');
|
|
7
|
-
var cx = require('clsx');
|
|
8
|
-
var VirtualColSpan = require('../VirtualColSpan.js');
|
|
9
|
-
var HeaderProvider = require('../table-header/HeaderProvider.js');
|
|
10
|
-
require('../table-header/TableHeader.js');
|
|
11
|
-
var useBulkEditRow = require('./useBulkEditRow.js');
|
|
12
|
-
var BulkEditRow$1 = require('./BulkEditRow.css.js');
|
|
13
|
-
|
|
14
|
-
const classBase = "vuuBulkEditRow";
|
|
15
|
-
const BulkEditRow = ({
|
|
16
|
-
ariaRole,
|
|
17
|
-
dataSource,
|
|
18
|
-
onBulkChange,
|
|
19
|
-
onRowChange,
|
|
20
|
-
...htmlAttributes
|
|
21
|
-
}) => {
|
|
22
|
-
const targetWindow = window.useWindow();
|
|
23
|
-
styles.useComponentCssInjection({
|
|
24
|
-
testId: "vuu-bulk-edit-row",
|
|
25
|
-
css: BulkEditRow$1,
|
|
26
|
-
window: targetWindow
|
|
27
|
-
});
|
|
28
|
-
const { columns, virtualColSpan = 0 } = HeaderProvider.useHeaderProps();
|
|
29
|
-
const {
|
|
30
|
-
errorMessages,
|
|
31
|
-
formFieldsContainerRef,
|
|
32
|
-
InputProps,
|
|
33
|
-
onCommit,
|
|
34
|
-
onFocus,
|
|
35
|
-
onKeyDown
|
|
36
|
-
} = useBulkEditRow.useBulkEditRow({
|
|
37
|
-
descriptors: columns,
|
|
38
|
-
onBulkChange,
|
|
39
|
-
onRowChange
|
|
40
|
-
});
|
|
41
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
42
|
-
"div",
|
|
43
|
-
{
|
|
44
|
-
...htmlAttributes,
|
|
45
|
-
className: classBase,
|
|
46
|
-
onFocus,
|
|
47
|
-
onKeyDown,
|
|
48
|
-
ref: formFieldsContainerRef,
|
|
49
|
-
role: ariaRole,
|
|
50
|
-
children: [
|
|
51
|
-
/* @__PURE__ */ jsxRuntime.jsx(VirtualColSpan.VirtualColSpan, { width: virtualColSpan }),
|
|
52
|
-
columns.map((column, i) => {
|
|
53
|
-
const errorMessage = errorMessages[column.name];
|
|
54
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
55
|
-
"div",
|
|
56
|
-
{
|
|
57
|
-
"aria-colindex": i + 1,
|
|
58
|
-
className: cx(`${classBase}Cell`, "vuuTableCell", {
|
|
59
|
-
"vuuTableCell-right": column.align === "right"
|
|
60
|
-
}),
|
|
61
|
-
"data-field": column.name,
|
|
62
|
-
role: "cell",
|
|
63
|
-
style: { width: column.width },
|
|
64
|
-
children: column.editable ? vuuDataReact.getDataItemEditControl({
|
|
65
|
-
InputProps,
|
|
66
|
-
dataDescriptor: column,
|
|
67
|
-
errorMessage,
|
|
68
|
-
onCommit,
|
|
69
|
-
table: dataSource.table
|
|
70
|
-
}) : null
|
|
71
|
-
},
|
|
72
|
-
column.name
|
|
73
|
-
);
|
|
74
|
-
})
|
|
75
|
-
]
|
|
76
|
-
}
|
|
77
|
-
);
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
exports.BulkEditRow = BulkEditRow;
|
|
81
|
-
//# sourceMappingURL=BulkEditRow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps, ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport { useBulkEditRow } from \"./useBulkEditRow\";\n\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: VuuRowDataItemType,\n) => void;\nexport interface BulkEditProps\n extends Partial<BaseRowProps>,\n Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n dataSource: DataSource;\n onBulkChange: EditValueChangeHandler;\n onRowChange: (isValid: boolean) => void;\n}\n\nexport const BulkEditRow = ({\n ariaRole,\n dataSource,\n onBulkChange,\n onRowChange,\n ...htmlAttributes\n}: BulkEditProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-bulk-edit-row\",\n css: bulkEditRowCss,\n window: targetWindow,\n });\n\n const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n const {\n errorMessages,\n formFieldsContainerRef,\n InputProps,\n onCommit,\n onFocus,\n onKeyDown,\n } = useBulkEditRow({\n descriptors: columns,\n onBulkChange,\n onRowChange,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={classBase}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={formFieldsContainerRef}\n role={ariaRole}\n >\n <VirtualColSpan width={virtualColSpan} />\n {columns.map((column, i) => {\n const errorMessage = errorMessages[column.name];\n return (\n <div\n aria-colindex={i + 1}\n className={cx(`${classBase}Cell`, \"vuuTableCell\", {\n \"vuuTableCell-right\": column.align === \"right\",\n })}\n data-field={column.name}\n key={column.name}\n role=\"cell\"\n style={{ width: column.width }}\n >\n {column.editable\n ? getDataItemEditControl({\n InputProps,\n dataDescriptor: column,\n errorMessage,\n onCommit,\n table: dataSource.table,\n })\n : null}\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditRowCss","useHeaderProps","useBulkEditRow","jsxs","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,gBAAA;AAcX,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAMC,6BAAe,EAAA;AAEvD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,MACEC,6BAAe,CAAA;AAAA,IACjB,WAAa,EAAA,OAAA;AAAA,IACb,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,SAAA;AAAA,MACX,OAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAK,EAAA,sBAAA;AAAA,MACL,IAAM,EAAA,QAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,6BAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,QACtC,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CAAM,KAAA;AAC1B,UAAM,MAAA,YAAA,GAAe,aAAc,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,UACE,uBAAAD,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,iBAAe,CAAI,GAAA,CAAA;AAAA,cACnB,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,QAAQ,cAAgB,EAAA;AAAA,gBAChD,oBAAA,EAAsB,OAAO,KAAU,KAAA;AAAA,eACxC,CAAA;AAAA,cACD,cAAY,MAAO,CAAA,IAAA;AAAA,cAEnB,IAAK,EAAA,MAAA;AAAA,cACL,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,cAE5B,QAAA,EAAA,MAAA,CAAO,WACJE,mCAAuB,CAAA;AAAA,gBACrB,UAAA;AAAA,gBACA,cAAgB,EAAA,MAAA;AAAA,gBAChB,YAAA;AAAA,gBACA,QAAA;AAAA,gBACA,OAAO,UAAW,CAAA;AAAA,eACnB,CACD,GAAA;AAAA,aAAA;AAAA,YAZC,MAAO,CAAA;AAAA,WAad;AAAA,SAEH;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuDataReact = require('@vuu-ui/vuu-data-react');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
|
|
7
|
-
const addRenderer = (colType, rendererName) => {
|
|
8
|
-
return {
|
|
9
|
-
name: colType.name,
|
|
10
|
-
rules: colType.rules,
|
|
11
|
-
formatting: colType.formatting,
|
|
12
|
-
renderer: { name: rendererName }
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
const { IDX } = vuuUtils.metadataKeys;
|
|
16
|
-
const isRecorded = (index, record) => {
|
|
17
|
-
for (const r of record) {
|
|
18
|
-
if (isSameArray(r, index)) {
|
|
19
|
-
return true;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
return false;
|
|
23
|
-
};
|
|
24
|
-
const isSameArray = (arr1, arr2) => {
|
|
25
|
-
return arr1[0] == arr2[0] && arr1[1] == arr2[1];
|
|
26
|
-
};
|
|
27
|
-
const useBulkEditPanel = ({
|
|
28
|
-
columns,
|
|
29
|
-
dataSource,
|
|
30
|
-
onValidationStatusChange
|
|
31
|
-
}) => {
|
|
32
|
-
const errorsRef = react.useRef([]);
|
|
33
|
-
const [rowState, setRowState] = react.useState(true);
|
|
34
|
-
const tableConfig = react.useMemo(() => {
|
|
35
|
-
return {
|
|
36
|
-
columns: columns ? columns.map((col) => {
|
|
37
|
-
return {
|
|
38
|
-
editable: col.editableBulk === "bulk",
|
|
39
|
-
hidden: col.editableBulk === false,
|
|
40
|
-
name: col.name,
|
|
41
|
-
serverDataType: col.serverDataType ?? "string",
|
|
42
|
-
type: vuuUtils.isTypeDescriptor(col.type) ? addRenderer(col.type, "input-cell") : "string",
|
|
43
|
-
clientSideEditValidationCheck: vuuUtils.hasValidationRules(col.type) ? vuuDataReact.buildValidationChecker(col.type.rules) : void 0
|
|
44
|
-
};
|
|
45
|
-
}) : dataSource.columns.map((name) => ({
|
|
46
|
-
editable: true,
|
|
47
|
-
name,
|
|
48
|
-
serverDataType: "string"
|
|
49
|
-
})),
|
|
50
|
-
columnLayout: "fit",
|
|
51
|
-
columnDefaultWidth: 100,
|
|
52
|
-
rowSeparators: true
|
|
53
|
-
};
|
|
54
|
-
}, [columns, dataSource.columns]);
|
|
55
|
-
const handleDataEdited = react.useCallback(
|
|
56
|
-
({ isValid = true, row, columnName }) => {
|
|
57
|
-
if (!isValid && !isRecorded([row[IDX], columnName], errorsRef.current)) {
|
|
58
|
-
errorsRef.current.push([row[IDX], columnName]);
|
|
59
|
-
} else if (isValid && isRecorded([row[IDX], columnName], errorsRef.current)) {
|
|
60
|
-
errorsRef.current = errorsRef.current.filter(
|
|
61
|
-
(error) => !isSameArray(error, [row[IDX], columnName])
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
if (rowState === true && errorsRef.current.length === 0) {
|
|
65
|
-
onValidationStatusChange(true);
|
|
66
|
-
} else {
|
|
67
|
-
onValidationStatusChange(false);
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
[onValidationStatusChange, rowState]
|
|
71
|
-
);
|
|
72
|
-
const handleRowChange = react.useCallback(
|
|
73
|
-
(isValid) => {
|
|
74
|
-
if (isValid !== rowState) {
|
|
75
|
-
setRowState(isValid);
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
[rowState]
|
|
79
|
-
);
|
|
80
|
-
const handleBulkChange = react.useCallback(
|
|
81
|
-
async (column, value) => {
|
|
82
|
-
const response = await dataSource.rpcCall?.({
|
|
83
|
-
namedParams: { column: column.name, value },
|
|
84
|
-
params: [],
|
|
85
|
-
rpcName: "VP_BULK_EDIT_COLUMN_CELLS_RPC",
|
|
86
|
-
type: "VIEW_PORT_RPC_CALL"
|
|
87
|
-
});
|
|
88
|
-
console.log({ response });
|
|
89
|
-
},
|
|
90
|
-
[dataSource]
|
|
91
|
-
);
|
|
92
|
-
return {
|
|
93
|
-
tableConfig,
|
|
94
|
-
onBulkChange: handleBulkChange,
|
|
95
|
-
onDataEdited: handleDataEdited,
|
|
96
|
-
onRowChange: handleRowChange
|
|
97
|
-
};
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
exports.useBulkEditPanel = useBulkEditPanel;
|
|
101
|
-
//# sourceMappingURL=useBulkEditPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useBulkEditPanel.js","sources":["../../src/bulk-edit/useBulkEditPanel.ts"],"sourcesContent":["import { buildValidationChecker } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRpcViewportRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n DataCellEditNotification,\n DataValueTypeDescriptor,\n TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n hasValidationRules,\n isTypeDescriptor,\n metadataKeys,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { BulkEditPanelProps } from \"./BulkEditPanel\";\nimport { EditValueChangeHandler } from \"./useBulkEditRow\";\n\nconst addRenderer = (\n colType: DataValueTypeDescriptor,\n rendererName: string,\n): DataValueTypeDescriptor => {\n return {\n name: colType.name,\n rules: colType.rules,\n formatting: colType.formatting,\n renderer: { name: rendererName },\n };\n};\n\nconst { IDX } = metadataKeys;\n\ntype ErrorTuple = [number, string];\n\nconst isRecorded = (index: ErrorTuple, record: ErrorTuple[]) => {\n for (const r of record) {\n if (isSameArray(r, index)) {\n return true;\n }\n }\n return false;\n};\n\nconst isSameArray = (arr1: ErrorTuple, arr2: ErrorTuple) => {\n return arr1[0] == arr2[0] && arr1[1] == arr2[1];\n};\n\nexport type BulkEditPanelHookProps = Pick<\n BulkEditPanelProps,\n \"columns\" | \"dataSource\" | \"onValidationStatusChange\"\n>;\n\nexport const useBulkEditPanel = ({\n columns,\n dataSource,\n onValidationStatusChange,\n}: BulkEditPanelHookProps) => {\n const errorsRef = useRef<ErrorTuple[]>([]);\n const [rowState, setRowState] = useState(true);\n\n const tableConfig: TableConfig = useMemo(() => {\n return {\n columns: columns\n ? columns.map((col) => {\n return {\n editable: col.editableBulk === \"bulk\",\n hidden: col.editableBulk === false,\n name: col.name,\n serverDataType: col.serverDataType ?? \"string\",\n type: isTypeDescriptor(col.type)\n ? addRenderer(col.type, \"input-cell\")\n : \"string\",\n clientSideEditValidationCheck: hasValidationRules(col.type)\n ? buildValidationChecker(col.type.rules)\n : undefined,\n };\n })\n : dataSource.columns.map((name) => ({\n editable: true,\n name,\n serverDataType: \"string\",\n })),\n columnLayout: \"fit\",\n columnDefaultWidth: 100,\n rowSeparators: true,\n };\n }, [columns, dataSource.columns]);\n\n const handleDataEdited = useCallback<DataCellEditNotification>(\n ({ isValid = true, row, columnName }) => {\n if (!isValid && !isRecorded([row[IDX], columnName], errorsRef.current)) {\n errorsRef.current.push([row[IDX], columnName]);\n } else if (\n isValid &&\n isRecorded([row[IDX], columnName], errorsRef.current)\n ) {\n errorsRef.current = errorsRef.current.filter(\n (error) => !isSameArray(error, [row[IDX], columnName]),\n );\n }\n if (rowState === true && errorsRef.current.length === 0) {\n onValidationStatusChange(true);\n } else {\n onValidationStatusChange(false);\n }\n },\n [onValidationStatusChange, rowState],\n );\n\n const handleRowChange = useCallback(\n (isValid: boolean) => {\n if (isValid !== rowState) {\n setRowState(isValid);\n }\n },\n [rowState],\n );\n\n const handleBulkChange: EditValueChangeHandler = useCallback(\n async (column, value) => {\n const response = await dataSource.rpcCall?.({\n namedParams: { column: column.name, value },\n params: [],\n rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n type: \"VIEW_PORT_RPC_CALL\",\n } as Omit<VuuRpcViewportRequest, \"vpId\">);\n console.log({ response });\n },\n [dataSource],\n );\n\n return {\n tableConfig,\n onBulkChange: handleBulkChange,\n onDataEdited: handleDataEdited,\n onRowChange: handleRowChange,\n };\n};\n"],"names":["metadataKeys","useRef","useState","useMemo","isTypeDescriptor","hasValidationRules","buildValidationChecker","useCallback"],"mappings":"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"}
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuDataReact = require('@vuu-ui/vuu-data-react');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
var useEditableCell = require('../useEditableCell.js');
|
|
7
|
-
|
|
8
|
-
const getValidationChecker = (descriptor, editPhase) => {
|
|
9
|
-
const rules = vuuDataReact.getEditValidationRules(descriptor, editPhase);
|
|
10
|
-
return vuuDataReact.buildValidationChecker(rules);
|
|
11
|
-
};
|
|
12
|
-
const nextValidationState = (state, dataDescriptor, value) => {
|
|
13
|
-
const check = getValidationChecker(dataDescriptor, "change");
|
|
14
|
-
const result = check(value, "change");
|
|
15
|
-
const { name } = dataDescriptor;
|
|
16
|
-
const { ok: wasOk, messages: existingMessages } = state;
|
|
17
|
-
if (result.ok) {
|
|
18
|
-
if (!wasOk) {
|
|
19
|
-
const fieldsInError = Object.keys(existingMessages);
|
|
20
|
-
if (fieldsInError.includes(name)) {
|
|
21
|
-
if (fieldsInError.length === 1) {
|
|
22
|
-
return { ok: true, messages: {} };
|
|
23
|
-
} else {
|
|
24
|
-
const messages = { ...existingMessages };
|
|
25
|
-
delete messages[name];
|
|
26
|
-
return { ok: false, messages };
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
} else {
|
|
31
|
-
return {
|
|
32
|
-
ok: false,
|
|
33
|
-
messages: {
|
|
34
|
-
...existingMessages,
|
|
35
|
-
[name]: result.messages.join("\n")
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
return state;
|
|
40
|
-
};
|
|
41
|
-
function find(descriptors, fieldname) {
|
|
42
|
-
const d = descriptors.find(({ name }) => name === fieldname);
|
|
43
|
-
if (d) {
|
|
44
|
-
return d;
|
|
45
|
-
}
|
|
46
|
-
throw Error(`DataValueDescriptor not found for field ${fieldname}`);
|
|
47
|
-
}
|
|
48
|
-
const getField = (target) => {
|
|
49
|
-
const fieldElement = vuuUtils.queryClosest(target, "[data-field]");
|
|
50
|
-
if (fieldElement) {
|
|
51
|
-
return fieldElement.dataset.field;
|
|
52
|
-
} else {
|
|
53
|
-
throw Error("no field ");
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
const useBulkEditRow = ({
|
|
57
|
-
descriptors,
|
|
58
|
-
onBulkChange,
|
|
59
|
-
onRowChange
|
|
60
|
-
}) => {
|
|
61
|
-
const formFieldsContainerRef = react.useRef(null);
|
|
62
|
-
const focusedFieldRef = react.useRef("");
|
|
63
|
-
const [, forceUpdate] = react.useState({});
|
|
64
|
-
const validationStateRef = react.useRef({
|
|
65
|
-
ok: true,
|
|
66
|
-
messages: {}
|
|
67
|
-
});
|
|
68
|
-
const bulkRowValidationState = react.useCallback(
|
|
69
|
-
(state) => {
|
|
70
|
-
validationStateRef.current = state;
|
|
71
|
-
onRowChange(state.ok);
|
|
72
|
-
forceUpdate({});
|
|
73
|
-
},
|
|
74
|
-
[onRowChange]
|
|
75
|
-
);
|
|
76
|
-
const handleFocus = react.useCallback((evt) => {
|
|
77
|
-
if (formFieldsContainerRef.current?.contains(evt.target)) {
|
|
78
|
-
const fieldName = getField(evt.target);
|
|
79
|
-
if (fieldName) {
|
|
80
|
-
if (fieldName) {
|
|
81
|
-
focusedFieldRef.current = fieldName;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}, []);
|
|
86
|
-
const handleChange = react.useCallback(
|
|
87
|
-
(evt) => {
|
|
88
|
-
const { current: fieldName } = focusedFieldRef;
|
|
89
|
-
if (fieldName) {
|
|
90
|
-
const input = vuuUtils.queryClosest(evt.target, "input", true);
|
|
91
|
-
const dataDescriptor = find(descriptors, fieldName);
|
|
92
|
-
const value = input.value;
|
|
93
|
-
const { current: state } = validationStateRef;
|
|
94
|
-
const newState = nextValidationState(state, dataDescriptor, value);
|
|
95
|
-
if (newState !== state) {
|
|
96
|
-
bulkRowValidationState(newState);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
[descriptors, bulkRowValidationState]
|
|
101
|
-
);
|
|
102
|
-
const {
|
|
103
|
-
current: { messages: errorMessages }
|
|
104
|
-
} = validationStateRef;
|
|
105
|
-
const handleCommit = react.useCallback(
|
|
106
|
-
(evt, value) => {
|
|
107
|
-
if (typeof value === "string" && value.trim() !== "") {
|
|
108
|
-
const columnName = focusedFieldRef.current;
|
|
109
|
-
if (columnName) {
|
|
110
|
-
const column = descriptors.find((c) => c.name === columnName);
|
|
111
|
-
if (column && errorMessages[columnName] === void 0) {
|
|
112
|
-
console.log("apply BulkChange on", columnName);
|
|
113
|
-
const { serverDataType = "string" } = column;
|
|
114
|
-
const typedValue = vuuUtils.getTypedValue(value, serverDataType, true);
|
|
115
|
-
onBulkChange(column, typedValue);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
|
-
[descriptors, errorMessages, onBulkChange]
|
|
121
|
-
);
|
|
122
|
-
const InputProps2 = react.useMemo(
|
|
123
|
-
() => ({
|
|
124
|
-
inputProps: {
|
|
125
|
-
placeholder: "Enter value"
|
|
126
|
-
},
|
|
127
|
-
onChange: handleChange,
|
|
128
|
-
variant: "primary"
|
|
129
|
-
}),
|
|
130
|
-
[handleChange]
|
|
131
|
-
);
|
|
132
|
-
const { onKeyDown } = useEditableCell.useEditableCell();
|
|
133
|
-
return {
|
|
134
|
-
errorMessages,
|
|
135
|
-
formFieldsContainerRef,
|
|
136
|
-
InputProps: InputProps2,
|
|
137
|
-
onCommit: handleCommit,
|
|
138
|
-
onFocus: handleFocus,
|
|
139
|
-
onKeyDown
|
|
140
|
-
};
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
exports.useBulkEditRow = useBulkEditRow;
|
|
144
|
-
//# sourceMappingURL=useBulkEditRow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useBulkEditRow.js","sources":["../../src/bulk-edit/useBulkEditRow.tsx"],"sourcesContent":["import {\n buildValidationChecker,\n getEditValidationRules,\n} from \"@vuu-ui/vuu-data-react\";\nimport { DataValueDescriptor, EditPhase } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, getTypedValue, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport {\n FocusEventHandler,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useEditableCell } from \"../useEditableCell\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: VuuRowDataItemType,\n) => void;\n\nexport interface EditableBulkHookProps {\n descriptors: DataValueDescriptor[];\n onBulkChange: EditValueChangeHandler;\n onRowChange: (isValid: boolean) => void;\n}\ntype ValidationState = {\n ok: boolean;\n messages: Record<string, string>;\n};\n\nconst getValidationChecker = (\n descriptor: DataValueDescriptor,\n editPhase: EditPhase | \"*\",\n) => {\n const rules = getEditValidationRules(descriptor, editPhase);\n return buildValidationChecker(rules);\n};\n\nconst nextValidationState = (\n state: ValidationState,\n dataDescriptor: DataValueDescriptor,\n value: VuuRowDataItemType,\n): ValidationState => {\n const check = getValidationChecker(dataDescriptor, \"change\");\n const result = check(value, \"change\");\n const { name } = dataDescriptor;\n\n const { ok: wasOk, messages: existingMessages } = state;\n\n if (result.ok) {\n if (!wasOk) {\n // if this field was the only one in error, the overall state\n // will now be ok, but not if there is still one or more other\n // field still in error.\n const fieldsInError = Object.keys(existingMessages);\n if (fieldsInError.includes(name)) {\n if (fieldsInError.length === 1) {\n return { ok: true, messages: {} };\n } else {\n const messages = { ...existingMessages };\n delete messages[name];\n return { ok: false, messages };\n }\n }\n }\n } else {\n return {\n ok: false,\n messages: {\n ...existingMessages,\n [name]: result.messages.join(\"\\n\"),\n },\n };\n }\n\n return state;\n};\n\nfunction find(descriptors: DataValueDescriptor[], fieldname: string) {\n const d = descriptors.find(({ name }) => name === fieldname);\n if (d) {\n return d;\n }\n throw Error(`DataValueDescriptor not found for field ${fieldname}`);\n}\n\nconst getField = (target: EventTarget | HTMLElement) => {\n const fieldElement = queryClosest(target, \"[data-field]\");\n if (fieldElement) {\n return fieldElement.dataset.field as string;\n } else {\n throw Error(\"no field \");\n }\n};\n\nexport const useBulkEditRow = ({\n descriptors,\n onBulkChange,\n onRowChange,\n}: EditableBulkHookProps) => {\n const formFieldsContainerRef = useRef<HTMLDivElement>(null);\n const focusedFieldRef = useRef(\"\");\n const [, forceUpdate] = useState({});\n const validationStateRef = useRef<ValidationState>({\n ok: true,\n messages: {},\n });\n\n const bulkRowValidationState = useCallback(\n (state: ValidationState) => {\n validationStateRef.current = state;\n onRowChange(state.ok);\n forceUpdate({});\n },\n [onRowChange],\n );\n\n const handleFocus = useCallback<FocusEventHandler>((evt) => {\n // Ignore focus on popup Calendars, Lists etc\n if (formFieldsContainerRef.current?.contains(evt.target)) {\n const fieldName = getField(evt.target);\n if (fieldName) {\n if (fieldName) {\n focusedFieldRef.current = fieldName;\n }\n }\n }\n }, []);\n\n const handleChange = useCallback(\n (evt: SyntheticEvent<HTMLInputElement>) => {\n const { current: fieldName } = focusedFieldRef;\n if (fieldName) {\n const input = queryClosest<HTMLInputElement>(evt.target, \"input\", true);\n const dataDescriptor = find(descriptors, fieldName);\n const value = input.value as string;\n const { current: state } = validationStateRef;\n const newState = nextValidationState(state, dataDescriptor, value);\n if (newState !== state) {\n bulkRowValidationState(newState);\n }\n }\n },\n [descriptors, bulkRowValidationState],\n );\n\n const {\n current: { messages: errorMessages },\n } = validationStateRef;\n\n const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n (evt, value) => {\n if (typeof value === \"string\" && value.trim() !== \"\") {\n const columnName = focusedFieldRef.current;\n if (columnName) {\n const column = descriptors.find((c) => c.name === columnName);\n if (column && errorMessages[columnName] === undefined) {\n console.log(\"apply BulkChange on\", columnName);\n const { serverDataType = \"string\" } = column;\n const typedValue = getTypedValue(value, serverDataType, true);\n onBulkChange(column, typedValue);\n }\n }\n }\n },\n [descriptors, errorMessages, onBulkChange],\n );\n\n const InputProps = useMemo<Partial<InputProps>>(\n () => ({\n inputProps: {\n placeholder: \"Enter value\",\n },\n onChange: handleChange,\n variant: \"primary\",\n }),\n [handleChange],\n );\n\n const { onKeyDown } = useEditableCell();\n\n return {\n errorMessages,\n formFieldsContainerRef,\n InputProps,\n onCommit: handleCommit,\n onFocus: handleFocus,\n onKeyDown,\n };\n};\n"],"names":["getEditValidationRules","buildValidationChecker","queryClosest","useRef","useState","useCallback","getTypedValue","InputProps","useMemo","useEditableCell"],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var cellBlockCss = ".vuuCellBlock {\n background-color: #00bdff;\n opacity: 0.3;\n border: solid blue 1px;\n position: absolute;\n\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-start top);\n\n &.cellblock-direction-n {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-end top);\n }\n\n &.cellblock-direction-ne {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-end right);\n top: anchor(--cellblock-end top);\n }\n\n &.cellblock-direction-e {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-end right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-se {\n bottom: anchor(--cellblock-end bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-end right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-s {\n bottom: anchor(--cellblock-end bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-sw {\n bottom: anchor(--cellblock-end bottom);\n left: anchor(--cellblock-end left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-w {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-end left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-nw {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-end left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-end top);\n }\n}\n\n.vuu-cellblock-start {\n anchor-name: --cellblock-start;\n}\n\n.vuuTable.vuu-cellblock-select-in-progress-keyboard {\n .vuuTableCell:focus {\n anchor-name: --cellblock-end;\n }\n .vuuCellBlock {\n pointer-events: none;\n }\n}\n.vuuTable.vuu-cellblock-select-in-progress-mouse {\n .vuuCellBlock {\n pointer-events: none;\n }\n}\n.vuu-cellblock-end {\n anchor-name: --cellblock-end;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = cellBlockCss;
|
|
6
|
-
//# sourceMappingURL=CellBlock.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CellBlock.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var cx = require('clsx');
|
|
6
|
-
var styles = require('@salt-ds/styles');
|
|
7
|
-
var window = require('@salt-ds/window');
|
|
8
|
-
var CellBlock$1 = require('./CellBlock.css.js');
|
|
9
|
-
|
|
10
|
-
const classBase = "vuuCellBlock";
|
|
11
|
-
const CellBlock = react.forwardRef(
|
|
12
|
-
function CellBlock2({ className, onCopy, ...htmlAttributes }, forwardedRef) {
|
|
13
|
-
const targetWindow = window.useWindow();
|
|
14
|
-
styles.useComponentCssInjection({
|
|
15
|
-
testId: "vuu-cell-block",
|
|
16
|
-
css: CellBlock$1,
|
|
17
|
-
window: targetWindow
|
|
18
|
-
});
|
|
19
|
-
const handleKeyDown = react.useCallback(
|
|
20
|
-
async (evt) => {
|
|
21
|
-
if (evt.metaKey && evt.key === "c") {
|
|
22
|
-
onCopy?.();
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
[onCopy]
|
|
26
|
-
);
|
|
27
|
-
const onContextMenu = react.useCallback(() => {
|
|
28
|
-
console.log("on cvontext menu");
|
|
29
|
-
}, []);
|
|
30
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
31
|
-
"div",
|
|
32
|
-
{
|
|
33
|
-
...htmlAttributes,
|
|
34
|
-
className: cx(classBase, className),
|
|
35
|
-
ref: forwardedRef,
|
|
36
|
-
onContextMenu,
|
|
37
|
-
onKeyDown: handleKeyDown,
|
|
38
|
-
tabIndex: 0
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
exports.CellBlock = CellBlock;
|
|
45
|
-
//# sourceMappingURL=CellBlock.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CellBlock.js","sources":["../../src/cell-block/CellBlock.tsx"],"sourcesContent":["import {\n HTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n forwardRef,\n useCallback,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cellBlockCss from \"./CellBlock.css\";\n\nconst classBase = \"vuuCellBlock\";\n\nexport interface CellBlockProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onCopy\"> {\n debugName?: string;\n onCopy?: () => void;\n}\n\nexport const CellBlock = forwardRef<HTMLDivElement, CellBlockProps>(\n function CellBlock({ className, onCopy, ...htmlAttributes }, forwardedRef) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-cell-block\",\n css: cellBlockCss,\n window: targetWindow,\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n async (evt) => {\n if (evt.metaKey && evt.key === \"c\") {\n onCopy?.();\n }\n },\n [onCopy],\n );\n\n const onContextMenu = useCallback<MouseEventHandler>(() => {\n console.log(\"on cvontext menu\");\n }, []);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={forwardedRef}\n onContextMenu={onContextMenu}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n />\n );\n },\n);\n"],"names":["forwardRef","CellBlock","useWindow","useComponentCssInjection","cellBlockCss","useCallback","jsx"],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAQX,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,WAAU,EAAE,SAAA,EAAW,QAAQ,GAAG,cAAA,IAAkB,YAAc,EAAA;AACzE,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,MACpB,OAAO,GAAQ,KAAA;AACb,QAAA,IAAI,GAAI,CAAA,OAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,UAAS,MAAA,IAAA;AAAA;AACX,OACF;AAAA,MACA,CAAC,MAAM;AAAA,KACT;AAEA,IAAM,MAAA,aAAA,GAAgBA,kBAA+B,MAAM;AACzD,MAAA,OAAA,CAAQ,IAAI,kBAAkB,CAAA;AAAA,KAChC,EAAG,EAAE,CAAA;AAEL,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,QACL,aAAA;AAAA,QACA,SAAW,EAAA,aAAA;AAAA,QACX,QAAU,EAAA;AAAA;AAAA,KACZ;AAAA;AAGN;;;;"}
|