@vuu-ui/vuu-table 0.8.34 → 0.8.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -10
- package/cjs/Row.css +0 -115
- package/cjs/Row.js +0 -115
- package/cjs/Row.js.map +0 -1
- package/cjs/Table.css +0 -151
- package/cjs/Table.js +0 -276
- package/cjs/Table.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css +0 -5
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +0 -33
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.css +0 -31
- package/cjs/cell-renderers/input-cell/InputCell.js +0 -49
- package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css +0 -32
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js +0 -59
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.css +0 -30
- package/cjs/column-header-pill/ColumnHeaderPill.js +0 -44
- package/cjs/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.css +0 -7
- package/cjs/column-header-pill/GroupColumnPill.js +0 -20
- package/cjs/column-header-pill/GroupColumnPill.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.css +0 -7
- package/cjs/column-header-pill/SortIndicator.js +0 -18
- package/cjs/column-header-pill/SortIndicator.js.map +0 -1
- package/cjs/column-menu/ColumnMenu.css +0 -21
- package/cjs/column-menu/ColumnMenu.js +0 -21
- package/cjs/column-menu/ColumnMenu.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.css +0 -28
- package/cjs/column-resizing/ColumnResizer.js +0 -63
- 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/context-menu/buildContextMenuDescriptors.js +0 -214
- package/cjs/context-menu/buildContextMenuDescriptors.js.map +0 -1
- package/cjs/context-menu/useHandleTableContextMenu.js +0 -81
- package/cjs/context-menu/useHandleTableContextMenu.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.css +0 -65
- package/cjs/header-cell/GroupHeaderCell.js +0 -108
- package/cjs/header-cell/GroupHeaderCell.js.map +0 -1
- package/cjs/header-cell/HeaderCell.css +0 -146
- package/cjs/header-cell/HeaderCell.js +0 -100
- package/cjs/header-cell/HeaderCell.js.map +0 -1
- package/cjs/index.js.map +0 -1
- package/cjs/moving-window.js +0 -61
- package/cjs/moving-window.js.map +0 -1
- package/cjs/table-cell/TableCell.css +0 -41
- package/cjs/table-cell/TableCell.js +0 -63
- package/cjs/table-cell/TableCell.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.css +0 -26
- package/cjs/table-cell/TableGroupCell.js +0 -45
- package/cjs/table-cell/TableGroupCell.js.map +0 -1
- package/cjs/table-config.js +0 -25
- package/cjs/table-config.js.map +0 -1
- package/cjs/table-dom-utils.js +0 -60
- package/cjs/table-dom-utils.js.map +0 -1
- package/cjs/table-header/TableHeader.js +0 -87
- package/cjs/table-header/TableHeader.js.map +0 -1
- package/cjs/table-header/useTableHeader.js +0 -72
- 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/useControlledTableNavigation.js +0 -43
- package/cjs/useControlledTableNavigation.js.map +0 -1
- package/cjs/useDataSource.js +0 -104
- package/cjs/useDataSource.js.map +0 -1
- package/cjs/useInitialValue.js +0 -11
- package/cjs/useInitialValue.js.map +0 -1
- package/cjs/useKeyboardNavigation.js +0 -304
- package/cjs/useKeyboardNavigation.js.map +0 -1
- package/cjs/useRowClassNameGenerators.js +0 -34
- package/cjs/useRowClassNameGenerators.js.map +0 -1
- package/cjs/useRowHeight.js +0 -43
- package/cjs/useRowHeight.js.map +0 -1
- package/cjs/useSelection.js +0 -64
- package/cjs/useSelection.js.map +0 -1
- package/cjs/useTable.js +0 -553
- package/cjs/useTable.js.map +0 -1
- package/cjs/useTableAndColumnSettings.js +0 -128
- package/cjs/useTableAndColumnSettings.js.map +0 -1
- package/cjs/useTableContextMenu.js +0 -42
- package/cjs/useTableContextMenu.js.map +0 -1
- package/cjs/useTableModel.js +0 -297
- package/cjs/useTableModel.js.map +0 -1
- package/cjs/useTableScroll.js +0 -396
- package/cjs/useTableScroll.js.map +0 -1
- package/cjs/useTableViewport.js +0 -122
- package/cjs/useTableViewport.js.map +0 -1
- package/esm/Row.css +0 -115
- package/esm/Row.js +0 -112
- package/esm/Row.js.map +0 -1
- package/esm/Table.css +0 -151
- package/esm/Table.js +0 -274
- package/esm/Table.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css +0 -5
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +0 -31
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.css +0 -31
- package/esm/cell-renderers/input-cell/InputCell.js +0 -47
- package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.css +0 -32
- package/esm/cell-renderers/toggle-cell/ToggleCell.js +0 -57
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.css +0 -30
- package/esm/column-header-pill/ColumnHeaderPill.js +0 -42
- package/esm/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.css +0 -7
- package/esm/column-header-pill/GroupColumnPill.js +0 -18
- package/esm/column-header-pill/GroupColumnPill.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.css +0 -7
- package/esm/column-header-pill/SortIndicator.js +0 -16
- package/esm/column-header-pill/SortIndicator.js.map +0 -1
- package/esm/column-menu/ColumnMenu.css +0 -21
- package/esm/column-menu/ColumnMenu.js +0 -19
- package/esm/column-menu/ColumnMenu.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.css +0 -28
- package/esm/column-resizing/ColumnResizer.js +0 -61
- 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/context-menu/buildContextMenuDescriptors.js +0 -212
- package/esm/context-menu/buildContextMenuDescriptors.js.map +0 -1
- package/esm/context-menu/useHandleTableContextMenu.js +0 -79
- package/esm/context-menu/useHandleTableContextMenu.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.css +0 -65
- package/esm/header-cell/GroupHeaderCell.js +0 -106
- package/esm/header-cell/GroupHeaderCell.js.map +0 -1
- package/esm/header-cell/HeaderCell.css +0 -146
- package/esm/header-cell/HeaderCell.js +0 -98
- package/esm/header-cell/HeaderCell.js.map +0 -1
- package/esm/index.js +0 -14
- package/esm/index.js.map +0 -1
- package/esm/moving-window.js +0 -59
- package/esm/moving-window.js.map +0 -1
- package/esm/table-cell/TableCell.css +0 -41
- package/esm/table-cell/TableCell.js +0 -61
- package/esm/table-cell/TableCell.js.map +0 -1
- package/esm/table-cell/TableGroupCell.css +0 -26
- package/esm/table-cell/TableGroupCell.js +0 -43
- package/esm/table-cell/TableGroupCell.js.map +0 -1
- package/esm/table-config.js +0 -23
- package/esm/table-config.js.map +0 -1
- package/esm/table-dom-utils.js +0 -51
- package/esm/table-dom-utils.js.map +0 -1
- package/esm/table-header/TableHeader.js +0 -85
- package/esm/table-header/TableHeader.js.map +0 -1
- package/esm/table-header/useTableHeader.js +0 -70
- 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/useControlledTableNavigation.js +0 -41
- package/esm/useControlledTableNavigation.js.map +0 -1
- package/esm/useDataSource.js +0 -101
- package/esm/useDataSource.js.map +0 -1
- package/esm/useInitialValue.js +0 -9
- package/esm/useInitialValue.js.map +0 -1
- package/esm/useKeyboardNavigation.js +0 -300
- package/esm/useKeyboardNavigation.js.map +0 -1
- package/esm/useRowClassNameGenerators.js +0 -32
- package/esm/useRowClassNameGenerators.js.map +0 -1
- package/esm/useRowHeight.js +0 -41
- package/esm/useRowHeight.js.map +0 -1
- package/esm/useSelection.js +0 -62
- package/esm/useSelection.js.map +0 -1
- package/esm/useTable.js +0 -551
- package/esm/useTable.js.map +0 -1
- package/esm/useTableAndColumnSettings.js +0 -126
- package/esm/useTableAndColumnSettings.js.map +0 -1
- package/esm/useTableContextMenu.js +0 -40
- package/esm/useTableContextMenu.js.map +0 -1
- package/esm/useTableModel.js +0 -293
- package/esm/useTableModel.js.map +0 -1
- package/esm/useTableScroll.js +0 -393
- package/esm/useTableScroll.js.map +0 -1
- package/esm/useTableViewport.js +0 -120
- package/esm/useTableViewport.js.map +0 -1
package/cjs/Table.js
DELETED
|
@@ -1,276 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuPopups = require('@vuu-ui/vuu-popups');
|
|
5
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var cx = require('clsx');
|
|
9
|
-
var react = require('react');
|
|
10
|
-
var Row = require('./Row.js');
|
|
11
|
-
var TableHeader = require('./table-header/TableHeader.js');
|
|
12
|
-
var useTable = require('./useTable.js');
|
|
13
|
-
var useRowHeight = require('./useRowHeight.js');
|
|
14
|
-
|
|
15
|
-
const classBase = "vuuTable";
|
|
16
|
-
const { IDX, RENDER_IDX } = vuuUtils.metadataKeys;
|
|
17
|
-
const TableCore = ({
|
|
18
|
-
Row: Row$1 = Row.Row,
|
|
19
|
-
allowDragDrop,
|
|
20
|
-
availableColumns,
|
|
21
|
-
config,
|
|
22
|
-
containerRef,
|
|
23
|
-
dataSource,
|
|
24
|
-
disableFocus = false,
|
|
25
|
-
highlightedIndex: highlightedIndexProp,
|
|
26
|
-
id: idProp,
|
|
27
|
-
navigationStyle = "cell",
|
|
28
|
-
onAvailableColumnsChange,
|
|
29
|
-
onConfigChange,
|
|
30
|
-
onDragStart,
|
|
31
|
-
onDrop,
|
|
32
|
-
onFeatureInvocation,
|
|
33
|
-
onHighlight,
|
|
34
|
-
onRowClick: onRowClickProp,
|
|
35
|
-
onSelect,
|
|
36
|
-
onSelectionChange,
|
|
37
|
-
renderBufferSize = 5,
|
|
38
|
-
rowHeight,
|
|
39
|
-
scrollingApiRef,
|
|
40
|
-
selectionModel = "extended",
|
|
41
|
-
showColumnHeaders = true,
|
|
42
|
-
showColumnHeaderMenus = true,
|
|
43
|
-
headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,
|
|
44
|
-
size
|
|
45
|
-
}) => {
|
|
46
|
-
const id = vuuUtils.useId(idProp);
|
|
47
|
-
const {
|
|
48
|
-
columnMap,
|
|
49
|
-
columns,
|
|
50
|
-
data,
|
|
51
|
-
draggableRow,
|
|
52
|
-
getRowOffset,
|
|
53
|
-
handleContextMenuAction,
|
|
54
|
-
headings,
|
|
55
|
-
highlightedIndex,
|
|
56
|
-
menuBuilder,
|
|
57
|
-
onDataEdited,
|
|
58
|
-
onMoveColumn,
|
|
59
|
-
onMoveGroupColumn,
|
|
60
|
-
onRemoveGroupColumn,
|
|
61
|
-
onResizeColumn,
|
|
62
|
-
onRowClick,
|
|
63
|
-
onSortColumn,
|
|
64
|
-
onToggleGroup,
|
|
65
|
-
rowClassNameGenerator,
|
|
66
|
-
scrollProps,
|
|
67
|
-
tableAttributes,
|
|
68
|
-
tableConfig,
|
|
69
|
-
viewportMeasurements,
|
|
70
|
-
...tableProps
|
|
71
|
-
} = useTable.useTable({
|
|
72
|
-
allowDragDrop,
|
|
73
|
-
availableColumns,
|
|
74
|
-
config,
|
|
75
|
-
containerRef,
|
|
76
|
-
dataSource,
|
|
77
|
-
disableFocus,
|
|
78
|
-
headerHeight,
|
|
79
|
-
highlightedIndex: highlightedIndexProp,
|
|
80
|
-
id,
|
|
81
|
-
navigationStyle,
|
|
82
|
-
onAvailableColumnsChange,
|
|
83
|
-
onConfigChange,
|
|
84
|
-
onDragStart,
|
|
85
|
-
onDrop,
|
|
86
|
-
onFeatureInvocation,
|
|
87
|
-
onHighlight,
|
|
88
|
-
onRowClick: onRowClickProp,
|
|
89
|
-
onSelect,
|
|
90
|
-
onSelectionChange,
|
|
91
|
-
renderBufferSize: Math.max(5, renderBufferSize),
|
|
92
|
-
rowHeight,
|
|
93
|
-
scrollingApiRef,
|
|
94
|
-
selectionModel,
|
|
95
|
-
size
|
|
96
|
-
});
|
|
97
|
-
const contentContainerClassName = cx(`${classBase}-contentContainer`, {
|
|
98
|
-
[`${classBase}-colLines`]: tableAttributes.columnSeparators,
|
|
99
|
-
[`${classBase}-rowLines`]: tableAttributes.rowSeparators,
|
|
100
|
-
[`${classBase}-zebra`]: tableAttributes.zebraStripes
|
|
101
|
-
});
|
|
102
|
-
const cssVariables = {
|
|
103
|
-
"--content-height": `${viewportMeasurements.contentHeight}px`,
|
|
104
|
-
"--content-width": `${viewportMeasurements.contentWidth}px`,
|
|
105
|
-
"--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
|
|
106
|
-
"--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
|
|
107
|
-
"--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
|
|
108
|
-
"--header-height": `${headerHeight}px`,
|
|
109
|
-
"--row-height-prop": `${rowHeight}px`,
|
|
110
|
-
"--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
|
|
111
|
-
"--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
|
|
112
|
-
"--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
|
|
113
|
-
};
|
|
114
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
115
|
-
vuuPopups.ContextMenuProvider,
|
|
116
|
-
{
|
|
117
|
-
menuActionHandler: handleContextMenuAction,
|
|
118
|
-
menuBuilder,
|
|
119
|
-
children: [
|
|
120
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
121
|
-
"div",
|
|
122
|
-
{
|
|
123
|
-
className: `${classBase}-scrollbarContainer`,
|
|
124
|
-
ref: scrollProps.scrollbarContainerRef,
|
|
125
|
-
style: cssVariables,
|
|
126
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-scrollbarContent` })
|
|
127
|
-
}
|
|
128
|
-
),
|
|
129
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
130
|
-
"div",
|
|
131
|
-
{
|
|
132
|
-
className: contentContainerClassName,
|
|
133
|
-
ref: scrollProps.contentContainerRef,
|
|
134
|
-
style: cssVariables,
|
|
135
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
136
|
-
"div",
|
|
137
|
-
{
|
|
138
|
-
...tableProps,
|
|
139
|
-
className: `${classBase}-table`,
|
|
140
|
-
role: "table",
|
|
141
|
-
tabIndex: disableFocus ? void 0 : -1,
|
|
142
|
-
children: [
|
|
143
|
-
showColumnHeaders ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
144
|
-
TableHeader.TableHeader,
|
|
145
|
-
{
|
|
146
|
-
columns: scrollProps.columnsWithinViewport,
|
|
147
|
-
headings,
|
|
148
|
-
onMoveColumn,
|
|
149
|
-
onMoveGroupColumn,
|
|
150
|
-
onRemoveGroupColumn,
|
|
151
|
-
onResizeColumn,
|
|
152
|
-
onSortColumn,
|
|
153
|
-
showColumnHeaderMenus,
|
|
154
|
-
tableConfig,
|
|
155
|
-
tableId: id,
|
|
156
|
-
virtualColSpan: scrollProps.virtualColSpan
|
|
157
|
-
}
|
|
158
|
-
) : null,
|
|
159
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-body`, children: data.map((data2) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
160
|
-
Row$1,
|
|
161
|
-
{
|
|
162
|
-
"aria-rowindex": data2[0] + 1,
|
|
163
|
-
classNameGenerator: rowClassNameGenerator,
|
|
164
|
-
columnMap,
|
|
165
|
-
columns: scrollProps.columnsWithinViewport,
|
|
166
|
-
highlighted: highlightedIndex === data2[IDX],
|
|
167
|
-
onClick: onRowClick,
|
|
168
|
-
onDataEdited,
|
|
169
|
-
row: data2,
|
|
170
|
-
offset: getRowOffset(data2),
|
|
171
|
-
onToggleGroup,
|
|
172
|
-
virtualColSpan: scrollProps.virtualColSpan,
|
|
173
|
-
zebraStripes: tableAttributes.zebraStripes
|
|
174
|
-
},
|
|
175
|
-
data2[RENDER_IDX]
|
|
176
|
-
)) })
|
|
177
|
-
]
|
|
178
|
-
}
|
|
179
|
-
)
|
|
180
|
-
}
|
|
181
|
-
),
|
|
182
|
-
draggableRow
|
|
183
|
-
]
|
|
184
|
-
}
|
|
185
|
-
);
|
|
186
|
-
};
|
|
187
|
-
const Table = react.forwardRef(function TableNext({
|
|
188
|
-
Row: Row$1,
|
|
189
|
-
allowDragDrop,
|
|
190
|
-
availableColumns,
|
|
191
|
-
className: classNameProp,
|
|
192
|
-
config,
|
|
193
|
-
dataSource,
|
|
194
|
-
disableFocus,
|
|
195
|
-
highlightedIndex,
|
|
196
|
-
id,
|
|
197
|
-
navigationStyle,
|
|
198
|
-
onAvailableColumnsChange,
|
|
199
|
-
onConfigChange,
|
|
200
|
-
onDragStart,
|
|
201
|
-
onDrop,
|
|
202
|
-
onFeatureInvocation,
|
|
203
|
-
onHighlight,
|
|
204
|
-
onRowClick,
|
|
205
|
-
onSelect,
|
|
206
|
-
onSelectionChange,
|
|
207
|
-
renderBufferSize,
|
|
208
|
-
rowHeight: rowHeightProp,
|
|
209
|
-
scrollingApiRef,
|
|
210
|
-
selectionModel,
|
|
211
|
-
showColumnHeaders,
|
|
212
|
-
showColumnHeaderMenus,
|
|
213
|
-
headerHeight,
|
|
214
|
-
style: styleProp,
|
|
215
|
-
...htmlAttributes
|
|
216
|
-
}, forwardedRef) {
|
|
217
|
-
const containerRef = react.useRef(null);
|
|
218
|
-
const [size, setSize] = react.useState();
|
|
219
|
-
const { rowHeight, rowRef } = useRowHeight.useRowHeight({ rowHeight: rowHeightProp });
|
|
220
|
-
if (config === void 0) {
|
|
221
|
-
throw Error(
|
|
222
|
-
"vuu Table requires config prop. Minimum config is list of Column Descriptors"
|
|
223
|
-
);
|
|
224
|
-
}
|
|
225
|
-
if (dataSource === void 0) {
|
|
226
|
-
throw Error("vuu Table requires dataSource prop");
|
|
227
|
-
}
|
|
228
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
229
|
-
vuuUiControls.MeasuredContainer,
|
|
230
|
-
{
|
|
231
|
-
...htmlAttributes,
|
|
232
|
-
className: cx(classBase, classNameProp),
|
|
233
|
-
id,
|
|
234
|
-
onResize: setSize,
|
|
235
|
-
ref: core.useForkRef(containerRef, forwardedRef),
|
|
236
|
-
children: [
|
|
237
|
-
/* @__PURE__ */ jsxRuntime.jsx(Row.RowProxy, { ref: rowRef, height: rowHeightProp }),
|
|
238
|
-
size && rowHeight ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
239
|
-
TableCore,
|
|
240
|
-
{
|
|
241
|
-
Row: Row$1,
|
|
242
|
-
allowDragDrop,
|
|
243
|
-
availableColumns,
|
|
244
|
-
config,
|
|
245
|
-
containerRef,
|
|
246
|
-
dataSource,
|
|
247
|
-
disableFocus,
|
|
248
|
-
headerHeight,
|
|
249
|
-
highlightedIndex,
|
|
250
|
-
id,
|
|
251
|
-
navigationStyle,
|
|
252
|
-
onAvailableColumnsChange,
|
|
253
|
-
onConfigChange,
|
|
254
|
-
onDragStart,
|
|
255
|
-
onDrop,
|
|
256
|
-
onFeatureInvocation,
|
|
257
|
-
onHighlight,
|
|
258
|
-
onRowClick,
|
|
259
|
-
onSelect,
|
|
260
|
-
onSelectionChange,
|
|
261
|
-
renderBufferSize,
|
|
262
|
-
rowHeight,
|
|
263
|
-
scrollingApiRef,
|
|
264
|
-
selectionModel,
|
|
265
|
-
showColumnHeaders,
|
|
266
|
-
showColumnHeaderMenus,
|
|
267
|
-
size
|
|
268
|
-
}
|
|
269
|
-
) : null
|
|
270
|
-
]
|
|
271
|
-
}
|
|
272
|
-
);
|
|
273
|
-
});
|
|
274
|
-
|
|
275
|
-
exports.Table = Table;
|
|
276
|
-
//# sourceMappingURL=Table.js.map
|
package/cjs/Table.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n DataSource,\n SchemaColumn,\n SelectionChangeHandler,\n VuuFeatureInvocationMessage,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n TableConfig,\n TableConfigChangeHandler,\n TableRowClickHandler,\n TableRowSelectHandler,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n DragStartHandler,\n dragStrategy,\n MeasuredContainer,\n MeasuredContainerProps,\n MeasuredSize,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n CSSProperties,\n FC,\n ForwardedRef,\n forwardRef,\n RefObject,\n useRef,\n useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProps, RowProxy } from \"./Row\";\nimport { TableHeader } from \"./table-header/TableHeader\";\nimport { useTable } from \"./useTable\";\n\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport \"./Table.css\";\nimport { ScrollingAPI } from \"./useTableScroll\";\nimport { useRowHeight } from \"./useRowHeight\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n Row?: FC<RowProps>;\n allowConfigEditing?: boolean;\n allowDragDrop?: boolean | dragStrategy;\n /**\n * required if a fully featured column picker is to be available\n */\n availableColumns?: SchemaColumn[];\n /**\n * Provide configuration settings for Table. At minimun, column\n * descriptors must be provided.\n */\n config: TableConfig;\n dataSource: DataSource;\n disableFocus?: boolean;\n /**\n * Pixel height of headers. If specified here, this will take precedence over CSS\n * values and Table will not respond to density changes. Default value is 125% of\n * rowHeight, whether set vis rowHeight prop or CSS.\n */\n headerHeight?: number;\n /**\n * Defined how focus navigation within data cells will be handled by table.\n * Default is cell.\n */\n highlightedIndex?: number;\n navigationStyle?: TableNavigationStyle;\n /**\n * required if a fully featured column picker is to be available.\n * Available columns can be changed by the addition or removal of\n * one or more calculated columns.\n */\n onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n /**\n * This callback will be invoked any time a config attribute of TableConfig\n * is changed. By persisting this value and providing it to the Table as a\n * prop, table state can be persisted across sessions.\n */\n onConfigChange?: TableConfigChangeHandler;\n onDragStart?: DragStartHandler;\n onDrop?: (dragDropState: DragDropState) => void;\n /**\n * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server\n * response must be handled. This callback provides that response.\n */\n onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;\n\n onHighlight?: (idx: number) => void;\n /**\n * callback invoked when user 'clicks' a table row. CLick triggered either\n * via mouse click or keyboard (default ENTER);\n */\n onRowClick?: TableRowClickHandler;\n onSelect?: TableRowSelectHandler;\n onSelectionChange?: SelectionChangeHandler;\n renderBufferSize?: number;\n /**\n * Pixel height of rows. If specified here, this will take precedence over CSS\n * values and Table will not respond to density changes.\n */\n rowHeight?: number;\n /**\n * imperative API for scrolling table\n */\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n /**\n * Selection Bookends style the left and right edge of a selection block.\n * They are optional, value defaults to zero.\n * TODO this should just live in CSS\n */\n selectionBookendWidth?: number;\n selectionModel?: TableSelectionModel;\n /**\n * if false, table rendered without headers. Useful when table is being included in a\n * composite component.\n */\n showColumnHeaders?: boolean;\n /**\n * if false, column headers will not display menu icon. Menu items are still available\n * from contexct menu\n */\n showColumnHeaderMenus?: boolean;\n}\n\nconst TableCore = ({\n Row = DefaultRow,\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n dataSource,\n disableFocus = false,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n navigationStyle = \"cell\",\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectionChange,\n renderBufferSize = 5,\n rowHeight,\n scrollingApiRef,\n selectionModel = \"extended\",\n showColumnHeaders = true,\n showColumnHeaderMenus = true,\n headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,\n size,\n}: Omit<TableProps, \"rowHeight\"> & {\n containerRef: RefObject<HTMLDivElement>;\n rowHeight: number;\n size: MeasuredSize;\n}) => {\n const id = useId(idProp);\n const {\n columnMap,\n columns,\n data,\n draggableRow,\n getRowOffset,\n handleContextMenuAction,\n headings,\n highlightedIndex,\n menuBuilder,\n onDataEdited,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onRowClick,\n onSortColumn,\n onToggleGroup,\n rowClassNameGenerator,\n scrollProps,\n tableAttributes,\n tableConfig,\n viewportMeasurements,\n ...tableProps\n } = useTable({\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n dataSource,\n disableFocus,\n headerHeight,\n highlightedIndex: highlightedIndexProp,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectionChange,\n renderBufferSize: Math.max(5, renderBufferSize),\n rowHeight,\n scrollingApiRef,\n selectionModel,\n size,\n });\n\n const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n });\n\n const cssVariables = {\n \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n \"--header-height\": `${headerHeight}px`,\n \"--row-height-prop\": `${rowHeight}px`,\n \"--total-header-height\": `${viewportMeasurements.totalHeaderHeight}px`,\n \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n } as CSSProperties;\n\n return (\n <ContextMenuProvider\n menuActionHandler={handleContextMenuAction}\n menuBuilder={menuBuilder}\n >\n <div\n className={`${classBase}-scrollbarContainer`}\n ref={scrollProps.scrollbarContainerRef}\n style={cssVariables}\n >\n <div className={`${classBase}-scrollbarContent`} />\n </div>\n <div\n className={contentContainerClassName}\n ref={scrollProps.contentContainerRef}\n style={cssVariables}\n >\n <div\n {...tableProps}\n className={`${classBase}-table`}\n role=\"table\"\n tabIndex={disableFocus ? undefined : -1}\n >\n {showColumnHeaders ? (\n <TableHeader\n columns={scrollProps.columnsWithinViewport}\n headings={headings}\n onMoveColumn={onMoveColumn}\n onMoveGroupColumn={onMoveGroupColumn}\n onRemoveGroupColumn={onRemoveGroupColumn}\n onResizeColumn={onResizeColumn}\n onSortColumn={onSortColumn}\n showColumnHeaderMenus={showColumnHeaderMenus}\n tableConfig={tableConfig}\n tableId={id}\n virtualColSpan={scrollProps.virtualColSpan}\n />\n ) : null}\n <div className={`${classBase}-body`}>\n {data.map((data) => (\n <Row\n aria-rowindex={data[0] + 1}\n classNameGenerator={rowClassNameGenerator}\n columnMap={columnMap}\n columns={scrollProps.columnsWithinViewport}\n highlighted={highlightedIndex === data[IDX]}\n key={data[RENDER_IDX]}\n onClick={onRowClick}\n onDataEdited={onDataEdited}\n row={data}\n offset={getRowOffset(data)}\n onToggleGroup={onToggleGroup}\n virtualColSpan={scrollProps.virtualColSpan}\n zebraStripes={tableAttributes.zebraStripes}\n />\n ))}\n </div>\n </div>\n </div>\n {draggableRow}\n </ContextMenuProvider>\n );\n};\n\nexport const Table = forwardRef(function TableNext(\n {\n Row,\n allowDragDrop,\n availableColumns,\n className: classNameProp,\n config,\n dataSource,\n disableFocus,\n highlightedIndex,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick,\n onSelect,\n onSelectionChange,\n renderBufferSize,\n rowHeight: rowHeightProp,\n scrollingApiRef,\n selectionModel,\n showColumnHeaders,\n showColumnHeaderMenus,\n headerHeight,\n style: styleProp,\n ...htmlAttributes\n }: TableProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [size, setSize] = useState<MeasuredSize>();\n\n const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });\n\n if (config === undefined) {\n throw Error(\n \"vuu Table requires config prop. Minimum config is list of Column Descriptors\"\n );\n }\n if (dataSource === undefined) {\n throw Error(\"vuu Table requires dataSource prop\");\n }\n\n return (\n <MeasuredContainer\n {...htmlAttributes}\n className={cx(classBase, classNameProp)}\n id={id}\n onResize={setSize}\n ref={useForkRef(containerRef, forwardedRef)}\n >\n <RowProxy ref={rowRef} height={rowHeightProp} />\n\n {size && rowHeight ? (\n <TableCore\n Row={Row}\n allowDragDrop={allowDragDrop}\n availableColumns={availableColumns}\n config={config}\n containerRef={containerRef}\n dataSource={dataSource}\n disableFocus={disableFocus}\n headerHeight={headerHeight}\n highlightedIndex={highlightedIndex}\n id={id}\n navigationStyle={navigationStyle}\n onAvailableColumnsChange={onAvailableColumnsChange}\n onConfigChange={onConfigChange}\n onDragStart={onDragStart}\n onDrop={onDrop}\n onFeatureInvocation={onFeatureInvocation}\n onHighlight={onHighlight}\n onRowClick={onRowClick}\n onSelect={onSelect}\n onSelectionChange={onSelectionChange}\n renderBufferSize={renderBufferSize}\n rowHeight={rowHeight}\n scrollingApiRef={scrollingApiRef}\n selectionModel={selectionModel}\n showColumnHeaders={showColumnHeaders}\n showColumnHeaderMenus={showColumnHeaderMenus}\n size={size}\n />\n ) : null}\n </MeasuredContainer>\n );\n});\n"],"names":["metadataKeys","Row","DefaultRow","useId","useTable","jsxs","ContextMenuProvider","jsx","TableHeader","data","forwardRef","useRef","useState","useRowHeight","MeasuredContainer","useForkRef","RowProxy"],"mappings":"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"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
8
|
-
|
|
9
|
-
const CheckboxCell = react.memo(
|
|
10
|
-
({ column, columnMap, onCommit = vuuUiControls.WarnCommit, row }) => {
|
|
11
|
-
const dataIdx = columnMap[column.name];
|
|
12
|
-
const isChecked = !!row[dataIdx];
|
|
13
|
-
const handleCommit = react.useCallback(
|
|
14
|
-
(value) => async (evt) => {
|
|
15
|
-
const res = await onCommit(value);
|
|
16
|
-
if (res === true) {
|
|
17
|
-
vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
|
|
18
|
-
}
|
|
19
|
-
return res;
|
|
20
|
-
},
|
|
21
|
-
[onCommit]
|
|
22
|
-
);
|
|
23
|
-
return column.editable ? /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.CheckboxIcon, { checked: isChecked, disabled: true });
|
|
24
|
-
},
|
|
25
|
-
vuuUtils.dataColumnAndKeyUnchanged
|
|
26
|
-
);
|
|
27
|
-
CheckboxCell.displayName = "CheckboxCell";
|
|
28
|
-
vuuUtils.registerComponent("checkbox-cell", CheckboxCell, "cell-renderer", {
|
|
29
|
-
serverDataType: "boolean"
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
exports.CheckboxCell = CheckboxCell;
|
|
33
|
-
//# sourceMappingURL=CheckboxCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxCell.js","sources":["../../../src/cell-renderers/checkbox-cell/CheckboxCell.tsx"],"sourcesContent":["import React, { memo, useCallback } from \"react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { CheckboxIcon, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\n\nimport \"./CheckboxCell.css\";\n\nexport const CheckboxCell: React.FC<TableCellRendererProps> = memo(\n ({ column, columnMap, onCommit = WarnCommit, row }) => {\n const dataIdx = columnMap[column.name];\n const isChecked = !!row[dataIdx];\n\n const handleCommit = useCallback(\n (value) => async (evt: React.MouseEvent) => {\n const res = await onCommit(value);\n if (res === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n return res;\n },\n [onCommit]\n );\n\n return column.editable ? (\n <Checkbox checked={isChecked} onClick={handleCommit(!isChecked)} />\n ) : (\n <CheckboxIcon checked={isChecked} disabled={true} />\n );\n },\n dataColumnAndKeyUnchanged\n);\nCheckboxCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\"checkbox-cell\", CheckboxCell, \"cell-renderer\", {\n serverDataType: \"boolean\",\n});\n"],"names":["memo","WarnCommit","useCallback","dispatchCustomEvent","jsx","Checkbox","CheckboxIcon","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;AAYO,MAAM,YAAiD,GAAAA,UAAA;AAAA,EAC5D,CAAC,EAAE,MAAA,EAAQ,WAAW,QAAW,GAAAC,wBAAA,EAAY,KAAU,KAAA;AACrD,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAA,MAAM,SAAY,GAAA,CAAC,CAAC,GAAA,CAAI,OAAO,CAAA,CAAA;AAE/B,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,KAAU,KAAA,OAAO,GAA0B,KAAA;AAC1C,QAAM,MAAA,GAAA,GAAM,MAAM,QAAA,CAAS,KAAK,CAAA,CAAA;AAChC,QAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,UAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,SAC7D;AACA,QAAO,OAAA,GAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,OAAO,QACZ,mBAAAC,cAAA,CAACC,aAAS,EAAA,EAAA,OAAA,EAAS,WAAW,OAAS,EAAA,YAAA,CAAa,CAAC,SAAS,GAAG,CAEjE,mBAAAD,cAAA,CAACE,8BAAa,OAAS,EAAA,SAAA,EAAW,UAAU,IAAM,EAAA,CAAA,CAAA;AAAA,GAEtD;AAAA,EACAC,kCAAA;AACF,EAAA;AACA,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;AAE3BC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,cAAgB,EAAA,SAAA;AAClB,CAAC,CAAA;;;;"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
.vuuTableInputCell.saltInput-primary {
|
|
3
|
-
--salt-focused-outlineStyle: none;
|
|
4
|
-
--saltInput-height: var(--vuu-table-embedded-control-height);
|
|
5
|
-
--saltInput-minHeight: var(--saltInput-height);
|
|
6
|
-
border-radius: 4px;
|
|
7
|
-
font-weight: 500;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.vuuTableCell:focus .vuuTableInputCell.saltInput-primary,
|
|
11
|
-
.vuuTableInputCell.saltInput-primary.saltInput-focused {
|
|
12
|
-
border: solid 2px var(--salt-focused-outlineColor);
|
|
13
|
-
padding: 0 3px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.vuuTableInputCell-icon {
|
|
17
|
-
--vuu-icon-height: 13px;
|
|
18
|
-
--vuu-icon-size: 15px;
|
|
19
|
-
--vuu-icon-width: 12px;
|
|
20
|
-
border-radius: 10px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.vuuTableCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,
|
|
24
|
-
.vuuTableInputCell.saltInput-primary.saltInput-focused.vuuTableInputCell-error {
|
|
25
|
-
border: solid 2px var(--vuu-color-red-50);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
.vuuTableInputCell-error.saltInput-primary {
|
|
30
|
-
border: solid 1px var(--vuu-color-red-50);
|
|
31
|
-
}
|
|
@@ -1,49 +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 cx = require('clsx');
|
|
8
|
-
|
|
9
|
-
const classBase = "vuuTableInputCell";
|
|
10
|
-
const WarnCommit = () => {
|
|
11
|
-
console.warn(
|
|
12
|
-
"onCommit handler has not been provided to InputCell cell renderer"
|
|
13
|
-
);
|
|
14
|
-
return Promise.resolve(true);
|
|
15
|
-
};
|
|
16
|
-
const InputCell = ({
|
|
17
|
-
column,
|
|
18
|
-
columnMap,
|
|
19
|
-
onCommit = WarnCommit,
|
|
20
|
-
row
|
|
21
|
-
}) => {
|
|
22
|
-
const dataIdx = columnMap[column.name];
|
|
23
|
-
const dataValue = row[dataIdx];
|
|
24
|
-
const { align = "left", clientSideEditValidationCheck } = column;
|
|
25
|
-
const { warningMessage, ...editProps } = vuuUiControls.useEditableText({
|
|
26
|
-
initialValue: dataValue,
|
|
27
|
-
onCommit,
|
|
28
|
-
clientSideEditValidationCheck
|
|
29
|
-
});
|
|
30
|
-
const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
|
|
31
|
-
const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
|
|
32
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
33
|
-
core.Input,
|
|
34
|
-
{
|
|
35
|
-
...editProps,
|
|
36
|
-
className: cx(classBase, {
|
|
37
|
-
[`${classBase}-error`]: warningMessage !== void 0
|
|
38
|
-
}),
|
|
39
|
-
endAdornment,
|
|
40
|
-
startAdornment
|
|
41
|
-
}
|
|
42
|
-
);
|
|
43
|
-
};
|
|
44
|
-
vuuUtils.registerComponent("input-cell", InputCell, "cell-renderer", {
|
|
45
|
-
userCanAssign: false
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
exports.InputCell = InputCell;
|
|
49
|
-
//# sourceMappingURL=InputCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InputCell.js","sources":["../../../src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\n\nimport \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nconst WarnCommit = (): Promise<true> => {\n console.warn(\n \"onCommit handler has not been provided to InputCell cell renderer\"\n );\n return Promise.resolve(true);\n};\nexport const InputCell = ({\n column,\n columnMap,\n onCommit = WarnCommit,\n row,\n}: TableCellRendererProps) => {\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as number | string;\n const { align = \"left\", clientSideEditValidationCheck } = column;\n\n const { warningMessage, ...editProps } = useEditableText({\n initialValue: dataValue,\n onCommit,\n clientSideEditValidationCheck,\n });\n\n const endAdornment =\n warningMessage && align === \"left\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n const startAdornment =\n warningMessage && align === \"right\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n return (\n <Input\n {...editProps}\n className={cx(classBase, {\n [`${classBase}-error`]: warningMessage !== undefined,\n })}\n endAdornment={endAdornment}\n startAdornment={startAdornment}\n />\n );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["useEditableText","jsx","Input","registerComponent"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAElB,MAAM,aAAa,MAAqB;AACtC,EAAQ,OAAA,CAAA,IAAA;AAAA,IACN,mEAAA;AAAA,GACF,CAAA;AACA,EAAO,OAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA,CAAA;AAC7B,CAAA,CAAA;AACO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,UAAA;AAAA,EACX,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA,CAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAcA,6BAAgB,CAAA;AAAA,IACvD,YAAc,EAAA,SAAA;AAAA,IACd,QAAA;AAAA,IACA,6BAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzBC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA,CAAA;AAEN,EACE,uBAAAA,cAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA,CAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA,cAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAEAC,0BAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
.vuuTableToggleCell {
|
|
3
|
-
--saltButton-borderRadius: 4px;
|
|
4
|
-
--saltButton-height: 16px;
|
|
5
|
-
font-weight: 500;
|
|
6
|
-
position: relative;
|
|
7
|
-
top: 1px;;
|
|
8
|
-
}
|
|
9
|
-
.vuuTableToggleCell-side {
|
|
10
|
-
--saltButton-minWidth: 40px;
|
|
11
|
-
}
|
|
12
|
-
.vuuTableToggleCell.vuuCycleStateButton-buy {
|
|
13
|
-
background-color: var(--vuu-color-green-50);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.vuuTableToggleCell.vuuCycleStateButton-sell {
|
|
17
|
-
background-color: var(--vuu-color-red-50);
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.vuuTableCell .vuuTableToggleCell:focus {
|
|
22
|
-
/* TODO fix use of important */
|
|
23
|
-
border: solid 2px var(--vuu-color-purple-10) !important;
|
|
24
|
-
color: white !important;
|
|
25
|
-
height: 18px !important;
|
|
26
|
-
top: 0px !important;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
5
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
6
|
-
var cx = require('clsx');
|
|
7
|
-
var react = require('react');
|
|
8
|
-
|
|
9
|
-
const classBase = "vuuTableToggleCell";
|
|
10
|
-
const getValueList = ({ name, type }) => {
|
|
11
|
-
if (vuuUtils.isTypeDescriptor(type) && vuuUtils.isValueListRenderer(type.renderer)) {
|
|
12
|
-
return type.renderer.values;
|
|
13
|
-
} else {
|
|
14
|
-
throw Error(
|
|
15
|
-
`useLookupValues column ${name} has not been configured with a values list`
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
const ToggleCell = react.memo(
|
|
20
|
-
function ToggleCell2({
|
|
21
|
-
column,
|
|
22
|
-
columnMap,
|
|
23
|
-
onCommit = vuuUiControls.WarnCommit,
|
|
24
|
-
row
|
|
25
|
-
}) {
|
|
26
|
-
const values = getValueList(column);
|
|
27
|
-
const dataIdx = columnMap[column.name];
|
|
28
|
-
const value = row[dataIdx];
|
|
29
|
-
const handleCommit = react.useCallback(
|
|
30
|
-
(evt, value2) => {
|
|
31
|
-
return onCommit(value2).then((response) => {
|
|
32
|
-
if (response === true) {
|
|
33
|
-
vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
|
|
34
|
-
}
|
|
35
|
-
return response;
|
|
36
|
-
});
|
|
37
|
-
},
|
|
38
|
-
[onCommit]
|
|
39
|
-
);
|
|
40
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
-
vuuUiControls.CycleStateButton,
|
|
42
|
-
{
|
|
43
|
-
className: cx(classBase, `${classBase}-${column.name}`),
|
|
44
|
-
onCommit: handleCommit,
|
|
45
|
-
value,
|
|
46
|
-
values,
|
|
47
|
-
variant: "cta",
|
|
48
|
-
children: value
|
|
49
|
-
}
|
|
50
|
-
);
|
|
51
|
-
},
|
|
52
|
-
vuuUtils.dataColumnAndKeyUnchanged
|
|
53
|
-
);
|
|
54
|
-
vuuUtils.registerComponent("toggle-cell", ToggleCell, "cell-renderer", {
|
|
55
|
-
userCanAssign: false
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
exports.ToggleCell = ToggleCell;
|
|
59
|
-
//# sourceMappingURL=ToggleCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { CycleStateCommitHandler, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n isTypeDescriptor,\n isValueListRenderer,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n return type.renderer.values;\n } else {\n throw Error(\n `useLookupValues column ${name} has not been configured with a values list`\n );\n }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n column,\n columnMap,\n onCommit = WarnCommit,\n row,\n}: TableCellRendererProps) {\n const values = getValueList(column);\n const dataIdx = columnMap[column.name];\n const value = row[dataIdx] as string;\n\n const handleCommit = useCallback<CycleStateCommitHandler>(\n (evt, value) => {\n return onCommit(value).then((response) => {\n if (response === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n return response;\n });\n },\n [onCommit]\n );\n\n return (\n <CycleStateButton\n className={cx(classBase, `${classBase}-${column.name}`)}\n onCommit={handleCommit}\n value={value}\n values={values}\n variant=\"cta\"\n >\n {value}\n </CycleStateButton>\n );\n},\ndataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["isTypeDescriptor","isValueListRenderer","memo","ToggleCell","WarnCommit","useCallback","value","dispatchCustomEvent","jsx","CycleStateButton","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;AAmBA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAIA,0BAAiB,IAAI,CAAA,IAAKC,4BAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA,CAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA,CAAA;AAAA,KAChC,CAAA;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,UAAa,GAAAC,UAAA;AAAA,EAAK,SAASC,WAAW,CAAA;AAAA,IACjD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAAC,wBAAA;AAAA,IACX,GAAA;AAAA,GACyB,EAAA;AACzB,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA,CAAA;AAEzB,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,KAAKC,MAAU,KAAA;AACd,QAAA,OAAO,QAASA,CAAAA,MAAK,CAAE,CAAA,IAAA,CAAK,CAAC,QAAa,KAAA;AACxC,UAAA,IAAI,aAAa,IAAM,EAAA;AACrB,YAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,WAC7D;AACA,UAAO,OAAA,QAAA,CAAA;AAAA,SACR,CAAA,CAAA;AAAA,OACH;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,8BAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,QACtD,QAAU,EAAA,YAAA;AAAA,QACV,KAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAQ,EAAA,KAAA;AAAA,QAEP,QAAA,EAAA,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AAAA,EACAC,kCAAA;AAAyB,EAAA;AAEzBC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
.vuuColumnHeaderPill {
|
|
2
|
-
--vuu-icon-size: 14px;
|
|
3
|
-
--menu-item-icon-color: black;
|
|
4
|
-
--vuu-icon-color: var(--salt-actionable-primary-foreground);
|
|
5
|
-
--vuu-icon-height: 12px;
|
|
6
|
-
--vuu-icon-width: 12px;
|
|
7
|
-
align-items: center;
|
|
8
|
-
background: var(--salt-actionable-primary-background);
|
|
9
|
-
color: var(--salt-actionable-primary-foreground);
|
|
10
|
-
border-radius: 4px;
|
|
11
|
-
flex: var(--vuuColumnHeaderPill-flex, none);
|
|
12
|
-
font-size: 11px;
|
|
13
|
-
gap: 4px;
|
|
14
|
-
height: 16px;
|
|
15
|
-
display: flex;
|
|
16
|
-
margin: var(--vuuColumnHeaderPill-margin, 0);
|
|
17
|
-
padding: 0 6px;
|
|
18
|
-
position: relative;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.vuuColumnHeaderPill:hover {
|
|
22
|
-
--vuu-icon-color: var(--salt-actionable-primary-foreground-hover);
|
|
23
|
-
background-color: var(--salt-actionable-primary-background-hover);
|
|
24
|
-
color: var(--salt-actionable-primary-foreground-hover);
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.vuuColumnHeaderPill-removeButton {
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var cx = require('clsx');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
|
|
7
|
-
const classBase = "vuuColumnHeaderPill";
|
|
8
|
-
const ColumnHeaderPill = ({
|
|
9
|
-
children,
|
|
10
|
-
className,
|
|
11
|
-
column,
|
|
12
|
-
onRemove,
|
|
13
|
-
removable,
|
|
14
|
-
...htmlAttributes
|
|
15
|
-
}) => {
|
|
16
|
-
if (removable && typeof onRemove !== "function") {
|
|
17
|
-
throw Error(
|
|
18
|
-
"ColumnHeaderPill onRemove prop must be provided if Pill is removable"
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
const handleClickRemove = react.useCallback(
|
|
22
|
-
(evt) => {
|
|
23
|
-
evt.preventDefault();
|
|
24
|
-
evt.stopPropagation();
|
|
25
|
-
onRemove?.(column);
|
|
26
|
-
},
|
|
27
|
-
[column, onRemove]
|
|
28
|
-
);
|
|
29
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
|
|
30
|
-
children,
|
|
31
|
-
removable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
|
-
"span",
|
|
33
|
-
{
|
|
34
|
-
className: `${classBase}-removeButton`,
|
|
35
|
-
role: "button",
|
|
36
|
-
"data-icon": "cross",
|
|
37
|
-
onClick: handleClickRemove
|
|
38
|
-
}
|
|
39
|
-
) : null
|
|
40
|
-
] });
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
exports.ColumnHeaderPill = ColumnHeaderPill;
|
|
44
|
-
//# sourceMappingURL=ColumnHeaderPill.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnHeaderPill.js","sources":["../../src/column-header-pill/ColumnHeaderPill.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { HTMLAttributes, MouseEvent, useCallback } from \"react\";\n\nimport \"./ColumnHeaderPill.css\";\n\nexport interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {\n column: RuntimeColumnDescriptor;\n removable?: boolean;\n onRemove?: (column: RuntimeColumnDescriptor) => void;\n}\n\nconst classBase = \"vuuColumnHeaderPill\";\n\nexport const ColumnHeaderPill = ({\n children,\n className,\n column,\n onRemove,\n removable,\n ...htmlAttributes\n}: ColumnHeaderPillProps) => {\n if (removable && typeof onRemove !== \"function\") {\n throw Error(\n \"ColumnHeaderPill onRemove prop must be provided if Pill is removable\"\n );\n }\n\n const handleClickRemove = useCallback(\n (evt: MouseEvent<HTMLSpanElement>) => {\n evt.preventDefault();\n evt.stopPropagation();\n onRemove?.(column);\n },\n [column, onRemove]\n );\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n {children}\n {removable ? (\n <span\n className={`${classBase}-removeButton`}\n role=\"button\"\n data-icon=\"cross\"\n onClick={handleClickRemove}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useCallback","jsxs","jsx"],"mappings":";;;;;;AAYA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAEX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAA6B,KAAA;AAC3B,EAAI,IAAA,SAAA,IAAa,OAAO,QAAA,KAAa,UAAY,EAAA;AAC/C,IAAM,MAAA,KAAA;AAAA,MACJ,sEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,iBAAoB,GAAAA,iBAAA;AAAA,IACxB,CAAC,GAAqC,KAAA;AACpC,MAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,MAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,MAAA,QAAA,GAAW,MAAM,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,QAAQ,QAAQ,CAAA;AAAA,GACnB,CAAA;AAEA,EACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,mBAAAC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,IAAK,EAAA,QAAA;AAAA,QACL,WAAU,EAAA,OAAA;AAAA,QACV,OAAS,EAAA,iBAAA;AAAA,OAAA;AAAA,KAET,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
|