@vuu-ui/vuu-table-extras 0.13.6 → 0.13.8
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 +4254 -65
- package/cjs/index.js.map +1 -1
- package/esm/index.js +4221 -28
- package/esm/index.js.map +1 -1
- package/package.json +12 -13
- package/cjs/cell-edit-validators/CaseValidator.js +0 -25
- package/cjs/cell-edit-validators/CaseValidator.js.map +0 -1
- package/cjs/cell-edit-validators/PatternValidator.js +0 -31
- package/cjs/cell-edit-validators/PatternValidator.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundCell.css.js +0 -6
- package/cjs/cell-renderers/background-cell/BackgroundCell.css.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundCell.js +0 -76
- package/cjs/cell-renderers/background-cell/BackgroundCell.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +0 -6
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +0 -67
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js +0 -6
- package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +0 -1
- package/cjs/cell-renderers/background-cell/useDirection.js +0 -20
- package/cjs/cell-renderers/background-cell/useDirection.js.map +0 -1
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js +0 -6
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js.map +0 -1
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +0 -94
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +0 -1
- package/cjs/cell-renderers/lookup-cell/LookupCell.js +0 -23
- package/cjs/cell-renderers/lookup-cell/LookupCell.js.map +0 -1
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js +0 -6
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +0 -1
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js +0 -62
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js.map +0 -1
- package/cjs/cell-renderers/progress-cell/ProgressCell.css.js +0 -6
- package/cjs/cell-renderers/progress-cell/ProgressCell.css.js.map +0 -1
- package/cjs/cell-renderers/progress-cell/ProgressCell.js +0 -69
- package/cjs/cell-renderers/progress-cell/ProgressCell.js.map +0 -1
- package/cjs/column-expression-input/ColumnExpressionInput.css.js +0 -6
- package/cjs/column-expression-input/ColumnExpressionInput.css.js.map +0 -1
- package/cjs/column-expression-input/ColumnExpressionInput.js +0 -39
- package/cjs/column-expression-input/ColumnExpressionInput.js.map +0 -1
- package/cjs/column-expression-input/column-function-descriptors.js +0 -307
- package/cjs/column-expression-input/column-function-descriptors.js.map +0 -1
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +0 -28
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +0 -1
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +0 -465
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +0 -1
- package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js +0 -61
- package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +0 -1
- package/cjs/column-expression-input/column-language-parser/generated/column-parser.js +0 -21
- package/cjs/column-expression-input/column-language-parser/generated/column-parser.js.map +0 -1
- package/cjs/column-expression-input/functionDocInfo.js +0 -39
- package/cjs/column-expression-input/functionDocInfo.js.map +0 -1
- package/cjs/column-expression-input/highlighting.js +0 -16
- package/cjs/column-expression-input/highlighting.js.map +0 -1
- package/cjs/column-expression-input/theme.js +0 -63
- package/cjs/column-expression-input/theme.js.map +0 -1
- package/cjs/column-expression-input/useColumnAutoComplete.js +0 -358
- package/cjs/column-expression-input/useColumnAutoComplete.js.map +0 -1
- package/cjs/column-expression-input/useColumnExpressionEditor.js +0 -131
- package/cjs/column-expression-input/useColumnExpressionEditor.js.map +0 -1
- package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js +0 -213
- package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js.map +0 -1
- package/cjs/column-expression-panel/ColumnExpressionPanel.js +0 -85
- package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
- package/cjs/column-expression-panel/useColumnExpression.js +0 -69
- package/cjs/column-expression-panel/useColumnExpression.js.map +0 -1
- package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +0 -97
- package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +0 -1
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js +0 -104
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +0 -1
- package/cjs/column-formatting-settings/DateTimeFormattingSettings.js +0 -99
- package/cjs/column-formatting-settings/DateTimeFormattingSettings.js.map +0 -1
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js +0 -6
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js.map +0 -1
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.js +0 -49
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.js.map +0 -1
- package/cjs/column-list/ColumnList.css.js +0 -6
- package/cjs/column-list/ColumnList.css.js.map +0 -1
- package/cjs/column-list/ColumnList.js +0 -174
- package/cjs/column-list/ColumnList.js.map +0 -1
- package/cjs/column-menu/ColumnMenu.css.js +0 -6
- package/cjs/column-menu/ColumnMenu.css.js.map +0 -1
- package/cjs/column-menu/ColumnMenu.js +0 -116
- package/cjs/column-menu/ColumnMenu.js.map +0 -1
- package/cjs/column-menu/column-menu-utils.js +0 -489
- package/cjs/column-menu/column-menu-utils.js.map +0 -1
- package/cjs/column-menu/useColumnActions.js +0 -75
- package/cjs/column-menu/useColumnActions.js.map +0 -1
- package/cjs/datasource-stats/DatasourceStats.css.js +0 -6
- package/cjs/datasource-stats/DatasourceStats.css.js.map +0 -1
- package/cjs/datasource-stats/DatasourceStats.js +0 -52
- package/cjs/datasource-stats/DatasourceStats.js.map +0 -1
- package/cjs/table-column-settings/ColumnNameLabel.css.js +0 -6
- package/cjs/table-column-settings/ColumnNameLabel.css.js.map +0 -1
- package/cjs/table-column-settings/ColumnNameLabel.js +0 -45
- package/cjs/table-column-settings/ColumnNameLabel.js.map +0 -1
- package/cjs/table-column-settings/ColumnSettingsPanel.css.js +0 -6
- package/cjs/table-column-settings/ColumnSettingsPanel.css.js.map +0 -1
- package/cjs/table-column-settings/ColumnSettingsPanel.js +0 -202
- package/cjs/table-column-settings/ColumnSettingsPanel.js.map +0 -1
- package/cjs/table-column-settings/TableSettingsPanel.css.js +0 -6
- package/cjs/table-column-settings/TableSettingsPanel.css.js.map +0 -1
- package/cjs/table-column-settings/TableSettingsPanel.js +0 -139
- package/cjs/table-column-settings/TableSettingsPanel.js.map +0 -1
- package/cjs/table-column-settings/useColumnSettings.js +0 -224
- package/cjs/table-column-settings/useColumnSettings.js.map +0 -1
- package/cjs/table-column-settings/useTableAndColumnSettings.js +0 -126
- package/cjs/table-column-settings/useTableAndColumnSettings.js.map +0 -1
- package/cjs/table-column-settings/useTableSettings.js +0 -172
- package/cjs/table-column-settings/useTableSettings.js.map +0 -1
- package/cjs/table-provider/TableProvider.js +0 -48
- package/cjs/table-provider/TableProvider.js.map +0 -1
- package/esm/cell-edit-validators/CaseValidator.js +0 -23
- package/esm/cell-edit-validators/CaseValidator.js.map +0 -1
- package/esm/cell-edit-validators/PatternValidator.js +0 -29
- package/esm/cell-edit-validators/PatternValidator.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundCell.css.js +0 -4
- package/esm/cell-renderers/background-cell/BackgroundCell.css.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundCell.js +0 -74
- package/esm/cell-renderers/background-cell/BackgroundCell.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +0 -4
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +0 -65
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js +0 -4
- package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +0 -1
- package/esm/cell-renderers/background-cell/useDirection.js +0 -18
- package/esm/cell-renderers/background-cell/useDirection.js.map +0 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js +0 -4
- package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js.map +0 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js +0 -92
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +0 -1
- package/esm/cell-renderers/lookup-cell/LookupCell.js +0 -21
- package/esm/cell-renderers/lookup-cell/LookupCell.js.map +0 -1
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js +0 -4
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +0 -1
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js +0 -60
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js.map +0 -1
- package/esm/cell-renderers/progress-cell/ProgressCell.css.js +0 -4
- package/esm/cell-renderers/progress-cell/ProgressCell.css.js.map +0 -1
- package/esm/cell-renderers/progress-cell/ProgressCell.js +0 -67
- package/esm/cell-renderers/progress-cell/ProgressCell.js.map +0 -1
- package/esm/column-expression-input/ColumnExpressionInput.css.js +0 -4
- package/esm/column-expression-input/ColumnExpressionInput.css.js.map +0 -1
- package/esm/column-expression-input/ColumnExpressionInput.js +0 -37
- package/esm/column-expression-input/ColumnExpressionInput.js.map +0 -1
- package/esm/column-expression-input/column-function-descriptors.js +0 -305
- package/esm/column-expression-input/column-function-descriptors.js.map +0 -1
- package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +0 -26
- package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +0 -1
- package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +0 -463
- package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +0 -1
- package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js +0 -56
- package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +0 -1
- package/esm/column-expression-input/column-language-parser/generated/column-parser.js +0 -19
- package/esm/column-expression-input/column-language-parser/generated/column-parser.js.map +0 -1
- package/esm/column-expression-input/functionDocInfo.js +0 -37
- package/esm/column-expression-input/functionDocInfo.js.map +0 -1
- package/esm/column-expression-input/highlighting.js +0 -14
- package/esm/column-expression-input/highlighting.js.map +0 -1
- package/esm/column-expression-input/theme.js +0 -61
- package/esm/column-expression-input/theme.js.map +0 -1
- package/esm/column-expression-input/useColumnAutoComplete.js +0 -356
- package/esm/column-expression-input/useColumnAutoComplete.js.map +0 -1
- package/esm/column-expression-input/useColumnExpressionEditor.js +0 -129
- package/esm/column-expression-input/useColumnExpressionEditor.js.map +0 -1
- package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js +0 -211
- package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js.map +0 -1
- package/esm/column-expression-panel/ColumnExpressionPanel.js +0 -83
- package/esm/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
- package/esm/column-expression-panel/useColumnExpression.js +0 -67
- package/esm/column-expression-panel/useColumnExpression.js.map +0 -1
- package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +0 -95
- package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +0 -1
- package/esm/column-formatting-settings/ColumnFormattingPanel.js +0 -102
- package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +0 -1
- package/esm/column-formatting-settings/DateTimeFormattingSettings.js +0 -97
- package/esm/column-formatting-settings/DateTimeFormattingSettings.js.map +0 -1
- package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js +0 -4
- package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js.map +0 -1
- package/esm/column-formatting-settings/LongTypeFormattingSettings.js +0 -47
- package/esm/column-formatting-settings/LongTypeFormattingSettings.js.map +0 -1
- package/esm/column-list/ColumnList.css.js +0 -4
- package/esm/column-list/ColumnList.css.js.map +0 -1
- package/esm/column-list/ColumnList.js +0 -172
- package/esm/column-list/ColumnList.js.map +0 -1
- package/esm/column-menu/ColumnMenu.css.js +0 -4
- package/esm/column-menu/ColumnMenu.css.js.map +0 -1
- package/esm/column-menu/ColumnMenu.js +0 -114
- package/esm/column-menu/ColumnMenu.js.map +0 -1
- package/esm/column-menu/column-menu-utils.js +0 -480
- package/esm/column-menu/column-menu-utils.js.map +0 -1
- package/esm/column-menu/useColumnActions.js +0 -73
- package/esm/column-menu/useColumnActions.js.map +0 -1
- package/esm/datasource-stats/DatasourceStats.css.js +0 -4
- package/esm/datasource-stats/DatasourceStats.css.js.map +0 -1
- package/esm/datasource-stats/DatasourceStats.js +0 -50
- package/esm/datasource-stats/DatasourceStats.js.map +0 -1
- package/esm/table-column-settings/ColumnNameLabel.css.js +0 -4
- package/esm/table-column-settings/ColumnNameLabel.css.js.map +0 -1
- package/esm/table-column-settings/ColumnNameLabel.js +0 -43
- package/esm/table-column-settings/ColumnNameLabel.js.map +0 -1
- package/esm/table-column-settings/ColumnSettingsPanel.css.js +0 -4
- package/esm/table-column-settings/ColumnSettingsPanel.css.js.map +0 -1
- package/esm/table-column-settings/ColumnSettingsPanel.js +0 -200
- package/esm/table-column-settings/ColumnSettingsPanel.js.map +0 -1
- package/esm/table-column-settings/TableSettingsPanel.css.js +0 -4
- package/esm/table-column-settings/TableSettingsPanel.css.js.map +0 -1
- package/esm/table-column-settings/TableSettingsPanel.js +0 -136
- package/esm/table-column-settings/TableSettingsPanel.js.map +0 -1
- package/esm/table-column-settings/useColumnSettings.js +0 -222
- package/esm/table-column-settings/useColumnSettings.js.map +0 -1
- package/esm/table-column-settings/useTableAndColumnSettings.js +0 -122
- package/esm/table-column-settings/useTableAndColumnSettings.js.map +0 -1
- package/esm/table-column-settings/useTableSettings.js +0 -170
- package/esm/table-column-settings/useTableSettings.js.map +0 -1
- package/esm/table-provider/TableProvider.js +0 -44
- package/esm/table-provider/TableProvider.js.map +0 -1
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuTable = require('@vuu-ui/vuu-table');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
|
|
7
|
-
const buildColumnItems = (availableColumns, configuredColumns) => {
|
|
8
|
-
return availableColumns.map(({ name, serverDataType }) => {
|
|
9
|
-
const configuredColumn = configuredColumns.find((col) => col.name === name);
|
|
10
|
-
return {
|
|
11
|
-
hidden: configuredColumn?.hidden,
|
|
12
|
-
isCalculated: vuuUtils.isCalculatedColumn(name),
|
|
13
|
-
label: configuredColumn?.label ?? name,
|
|
14
|
-
name,
|
|
15
|
-
serverDataType,
|
|
16
|
-
subscribed: configuredColumn !== void 0
|
|
17
|
-
};
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
const useTableSettings = ({
|
|
21
|
-
availableColumns: availableColumnsProp,
|
|
22
|
-
onConfigChange,
|
|
23
|
-
onDataSourceConfigChange,
|
|
24
|
-
tableConfig: tableConfigProp
|
|
25
|
-
}) => {
|
|
26
|
-
const [{ availableColumns, tableConfig }, setColumnState] = react.useState({
|
|
27
|
-
availableColumns: availableColumnsProp,
|
|
28
|
-
tableConfig: tableConfigProp
|
|
29
|
-
});
|
|
30
|
-
const columnItems = react.useMemo(
|
|
31
|
-
() => buildColumnItems(availableColumns, tableConfig.columns),
|
|
32
|
-
[availableColumns, tableConfig.columns]
|
|
33
|
-
);
|
|
34
|
-
const handleReorderColumnItems = react.useCallback(
|
|
35
|
-
(columnItems2) => {
|
|
36
|
-
const orderedNames = columnItems2.map((c) => c.name);
|
|
37
|
-
setColumnState((state) => {
|
|
38
|
-
const newAvailableColumns = vuuUtils.reorderColumnItems(
|
|
39
|
-
state.availableColumns,
|
|
40
|
-
orderedNames
|
|
41
|
-
);
|
|
42
|
-
const newColumns = vuuUtils.reorderColumnItems(
|
|
43
|
-
tableConfig.columns,
|
|
44
|
-
orderedNames
|
|
45
|
-
);
|
|
46
|
-
return {
|
|
47
|
-
availableColumns: newAvailableColumns,
|
|
48
|
-
tableConfig: {
|
|
49
|
-
...state.tableConfig,
|
|
50
|
-
columns: newColumns
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
});
|
|
54
|
-
},
|
|
55
|
-
[tableConfig.columns]
|
|
56
|
-
);
|
|
57
|
-
const handleColumnChange = react.useCallback(
|
|
58
|
-
(name, property, value) => {
|
|
59
|
-
const columnItem = columnItems.find((col) => col.name === name);
|
|
60
|
-
if (property === "subscribed") {
|
|
61
|
-
if (columnItem?.subscribed) {
|
|
62
|
-
const subscribedColumns = tableConfig.columns.filter((col) => col.name !== name).map((col) => col.name);
|
|
63
|
-
setColumnState((state) => ({
|
|
64
|
-
...state,
|
|
65
|
-
tableConfig: {
|
|
66
|
-
...tableConfig,
|
|
67
|
-
columns: tableConfig.columns.filter(
|
|
68
|
-
vuuUtils.subscribedOnly(subscribedColumns)
|
|
69
|
-
)
|
|
70
|
-
}
|
|
71
|
-
}));
|
|
72
|
-
onDataSourceConfigChange({
|
|
73
|
-
columns: subscribedColumns
|
|
74
|
-
});
|
|
75
|
-
} else {
|
|
76
|
-
const newConfig = {
|
|
77
|
-
...tableConfig,
|
|
78
|
-
columns: vuuUtils.addColumnToSubscribedColumns(
|
|
79
|
-
tableConfig.columns,
|
|
80
|
-
availableColumns,
|
|
81
|
-
name
|
|
82
|
-
)
|
|
83
|
-
};
|
|
84
|
-
setColumnState((state) => ({
|
|
85
|
-
...state,
|
|
86
|
-
tableConfig: newConfig
|
|
87
|
-
}));
|
|
88
|
-
const subscribedColumns = newConfig.columns.map((col) => col.name);
|
|
89
|
-
onDataSourceConfigChange({
|
|
90
|
-
columns: subscribedColumns
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
} else if (columnItem?.subscribed) {
|
|
94
|
-
const column = tableConfig.columns.find((col) => col.name === name);
|
|
95
|
-
if (column) {
|
|
96
|
-
const newConfig = vuuTable.updateTableConfig(tableConfig, {
|
|
97
|
-
type: "column-prop",
|
|
98
|
-
property,
|
|
99
|
-
column,
|
|
100
|
-
value
|
|
101
|
-
});
|
|
102
|
-
setColumnState((state) => ({
|
|
103
|
-
...state,
|
|
104
|
-
tableConfig: newConfig
|
|
105
|
-
}));
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
[availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
|
|
110
|
-
);
|
|
111
|
-
const handleChangeColumnLabels = react.useCallback((evt) => {
|
|
112
|
-
const button = vuuUtils.queryClosest(evt.target, "button");
|
|
113
|
-
if (button) {
|
|
114
|
-
const value = parseInt(button.value);
|
|
115
|
-
const columnFormatHeader = value === 0 ? void 0 : value === 1 ? "capitalize" : "uppercase";
|
|
116
|
-
setColumnState((state) => ({
|
|
117
|
-
...state,
|
|
118
|
-
tableConfig: {
|
|
119
|
-
...state.tableConfig,
|
|
120
|
-
columnFormatHeader
|
|
121
|
-
}
|
|
122
|
-
}));
|
|
123
|
-
}
|
|
124
|
-
}, []);
|
|
125
|
-
const handleChangeTableAttribute = react.useCallback(
|
|
126
|
-
(evt) => {
|
|
127
|
-
const button = vuuUtils.queryClosest(evt.target, "button");
|
|
128
|
-
if (button) {
|
|
129
|
-
const { ariaPressed, value } = button;
|
|
130
|
-
setColumnState((state) => ({
|
|
131
|
-
...state,
|
|
132
|
-
tableConfig: {
|
|
133
|
-
...state.tableConfig,
|
|
134
|
-
[value]: ariaPressed !== "true"
|
|
135
|
-
}
|
|
136
|
-
}));
|
|
137
|
-
}
|
|
138
|
-
},
|
|
139
|
-
[]
|
|
140
|
-
);
|
|
141
|
-
const handleCommitColumnWidth = react.useCallback((_, value) => {
|
|
142
|
-
if (typeof value === "string") {
|
|
143
|
-
const columnDefaultWidth = parseInt(value);
|
|
144
|
-
if (!isNaN(columnDefaultWidth)) {
|
|
145
|
-
setColumnState((state) => ({
|
|
146
|
-
...state,
|
|
147
|
-
tableConfig: {
|
|
148
|
-
...state.tableConfig,
|
|
149
|
-
columnDefaultWidth
|
|
150
|
-
}
|
|
151
|
-
}));
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}, []);
|
|
155
|
-
vuuUtils.useLayoutEffectSkipFirst(() => {
|
|
156
|
-
onConfigChange?.(tableConfig);
|
|
157
|
-
}, [onConfigChange, tableConfig]);
|
|
158
|
-
const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
|
|
159
|
-
return {
|
|
160
|
-
columnItems,
|
|
161
|
-
columnLabelsValue,
|
|
162
|
-
onChangeColumnLabels: handleChangeColumnLabels,
|
|
163
|
-
onChangeTableAttribute: handleChangeTableAttribute,
|
|
164
|
-
onColumnChange: handleColumnChange,
|
|
165
|
-
onCommitColumnWidth: handleCommitColumnWidth,
|
|
166
|
-
onReorderColumnItems: handleReorderColumnItems,
|
|
167
|
-
tableConfig
|
|
168
|
-
};
|
|
169
|
-
};
|
|
170
|
-
|
|
171
|
-
exports.useTableSettings = useTableSettings;
|
|
172
|
-
//# sourceMappingURL=useTableSettings.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTableSettings.js","sources":["../../src/table-column-settings/useTableSettings.ts"],"sourcesContent":["import { SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { updateTableConfig } from \"@vuu-ui/vuu-table\";\nimport {\n ColumnDescriptor,\n TableConfig,\n TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n addColumnToSubscribedColumns,\n queryClosest,\n isCalculatedColumn,\n subscribedOnly,\n useLayoutEffectSkipFirst,\n CommitHandler,\n reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n MouseEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { ColumnChangeHandler } from \"../column-list\";\n\nexport type ColumnLike = {\n name: string;\n};\n\nexport type ColumnItem = Pick<\n ColumnDescriptor,\n \"hidden\" | \"label\" | \"name\" | \"serverDataType\"\n> & {\n isCalculated: boolean;\n subscribed: boolean;\n};\n\nconst buildColumnItems = (\n availableColumns: SchemaColumn[],\n configuredColumns: ColumnDescriptor[],\n): ColumnItem[] => {\n return availableColumns.map<ColumnItem>(({ name, serverDataType }) => {\n const configuredColumn = configuredColumns.find((col) => col.name === name);\n return {\n hidden: configuredColumn?.hidden,\n isCalculated: isCalculatedColumn(name),\n label: configuredColumn?.label ?? name,\n name,\n serverDataType,\n subscribed: configuredColumn !== undefined,\n };\n });\n};\n\ntype ColumnState = {\n availableColumns: SchemaColumn[];\n tableConfig: TableConfig;\n};\n\nexport const useTableSettings = ({\n availableColumns: availableColumnsProp,\n onConfigChange,\n onDataSourceConfigChange,\n tableConfig: tableConfigProp,\n}: Omit<TableSettingsProps, \"onAddCalculatedColumn\">) => {\n const [{ availableColumns, tableConfig }, setColumnState] =\n useState<ColumnState>({\n availableColumns: availableColumnsProp,\n tableConfig: tableConfigProp,\n });\n\n const columnItems = useMemo(\n () => buildColumnItems(availableColumns, tableConfig.columns),\n [availableColumns, tableConfig.columns],\n );\n\n const handleReorderColumnItems = useCallback(\n (columnItems: ColumnItem[]) => {\n const orderedNames = columnItems.map((c) => c.name);\n setColumnState((state) => {\n const newAvailableColumns = reorderColumnItems(\n state.availableColumns,\n orderedNames,\n );\n const newColumns = reorderColumnItems(\n tableConfig.columns,\n orderedNames,\n );\n return {\n availableColumns: newAvailableColumns,\n tableConfig: {\n ...state.tableConfig,\n columns: newColumns,\n },\n };\n });\n },\n [tableConfig.columns],\n );\n\n const handleColumnChange = useCallback<ColumnChangeHandler>(\n (name, property, value) => {\n // to be applied immediately\n const columnItem = columnItems.find((col) => col.name === name);\n if (property === \"subscribed\") {\n if (columnItem?.subscribed) {\n const subscribedColumns = tableConfig.columns\n .filter((col) => col.name !== name)\n .map((col) => col.name);\n setColumnState((state) => ({\n ...state,\n tableConfig: {\n ...tableConfig,\n columns: tableConfig.columns.filter(\n subscribedOnly(subscribedColumns),\n ),\n },\n }));\n onDataSourceConfigChange({\n columns: subscribedColumns,\n });\n } else {\n const newConfig = {\n ...tableConfig,\n columns: addColumnToSubscribedColumns(\n tableConfig.columns,\n availableColumns,\n name,\n ),\n };\n setColumnState((state) => ({\n ...state,\n tableConfig: newConfig,\n }));\n\n const subscribedColumns = newConfig.columns.map((col) => col.name);\n\n onDataSourceConfigChange({\n columns: subscribedColumns,\n });\n }\n } else if (columnItem?.subscribed) {\n const column = tableConfig.columns.find((col) => col.name === name);\n if (column) {\n const newConfig = updateTableConfig(tableConfig, {\n type: \"column-prop\",\n property,\n column,\n value,\n });\n setColumnState((state) => ({\n ...state,\n tableConfig: newConfig,\n }));\n }\n }\n },\n [availableColumns, columnItems, onDataSourceConfigChange, tableConfig],\n );\n\n const handleChangeColumnLabels = useCallback((evt: SyntheticEvent) => {\n const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n if (button) {\n const value = parseInt(button.value);\n const columnFormatHeader =\n value === 0 ? undefined : value === 1 ? \"capitalize\" : \"uppercase\";\n setColumnState((state) => ({\n ...state,\n tableConfig: {\n ...state.tableConfig,\n columnFormatHeader,\n },\n }));\n }\n }, []);\n\n const handleChangeTableAttribute = useCallback(\n (evt: MouseEvent<HTMLButtonElement>) => {\n const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n if (button) {\n const { ariaPressed, value } = button;\n setColumnState((state) => ({\n ...state,\n tableConfig: {\n ...state.tableConfig,\n [value]: ariaPressed !== \"true\",\n },\n }));\n }\n },\n [],\n );\n\n const handleCommitColumnWidth = useCallback<CommitHandler>((_, value) => {\n if (typeof value === \"string\") {\n const columnDefaultWidth = parseInt(value);\n if (!isNaN(columnDefaultWidth)) {\n setColumnState((state) => ({\n ...state,\n tableConfig: {\n ...state.tableConfig,\n columnDefaultWidth,\n },\n }));\n }\n }\n }, []);\n\n useLayoutEffectSkipFirst(() => {\n onConfigChange?.(tableConfig);\n }, [onConfigChange, tableConfig]);\n\n const columnLabelsValue =\n tableConfig.columnFormatHeader === undefined\n ? 0\n : tableConfig.columnFormatHeader === \"capitalize\"\n ? 1\n : 2;\n\n return {\n columnItems,\n columnLabelsValue,\n onChangeColumnLabels: handleChangeColumnLabels,\n onChangeTableAttribute: handleChangeTableAttribute,\n onColumnChange: handleColumnChange,\n onCommitColumnWidth: handleCommitColumnWidth,\n onReorderColumnItems: handleReorderColumnItems,\n tableConfig,\n };\n};\n"],"names":["isCalculatedColumn","useState","useMemo","useCallback","columnItems","reorderColumnItems","subscribedOnly","addColumnToSubscribedColumns","updateTableConfig","queryClosest","useLayoutEffectSkipFirst"],"mappings":"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"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const NullMenuActionHandler = (menuItemId) => {
|
|
7
|
-
console.log(
|
|
8
|
-
`[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`
|
|
9
|
-
);
|
|
10
|
-
return false;
|
|
11
|
-
};
|
|
12
|
-
const NullDataSource = {};
|
|
13
|
-
const TableContext = react.createContext({
|
|
14
|
-
dataSource: NullDataSource,
|
|
15
|
-
menuActionHandler: NullMenuActionHandler
|
|
16
|
-
});
|
|
17
|
-
const TableProvider = ({
|
|
18
|
-
children,
|
|
19
|
-
dataSource,
|
|
20
|
-
menuActionHandler
|
|
21
|
-
}) => {
|
|
22
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
23
|
-
TableContext.Provider,
|
|
24
|
-
{
|
|
25
|
-
value: {
|
|
26
|
-
dataSource,
|
|
27
|
-
menuActionHandler
|
|
28
|
-
},
|
|
29
|
-
children
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
};
|
|
33
|
-
function useTableContext(throwIfNoDataSource = false) {
|
|
34
|
-
const { dataSource, menuActionHandler } = react.useContext(TableContext);
|
|
35
|
-
if (dataSource === NullDataSource && menuActionHandler == NullMenuActionHandler && throwIfNoDataSource) {
|
|
36
|
-
throw Error(`[TableProvider] no DataSourceProvider has been declared`);
|
|
37
|
-
} else {
|
|
38
|
-
return {
|
|
39
|
-
dataSource,
|
|
40
|
-
menuActionHandler
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
exports.TableContext = TableContext;
|
|
46
|
-
exports.TableProvider = TableProvider;
|
|
47
|
-
exports.useTableContext = useTableContext;
|
|
48
|
-
//# sourceMappingURL=TableProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableProvider.js","sources":["../../src/table-provider/TableProvider.tsx"],"sourcesContent":["import { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactNode, useContext } from \"react\";\nimport { ColumnMenuActionType } from \"../column-menu/column-menu-utils\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport interface TableContextProps {\n dataSource: DataSource;\n menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n}\n\nconst NullMenuActionHandler = (menuItemId: string) => {\n console.log(\n `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`,\n );\n return false;\n};\nconst NullDataSource = {} as DataSource;\n\nexport const TableContext = createContext<TableContextProps>({\n dataSource: NullDataSource,\n menuActionHandler: NullMenuActionHandler,\n});\n\nexport const TableProvider = ({\n children,\n dataSource,\n menuActionHandler,\n}: TableContextProps & {\n children: ReactNode;\n}) => {\n return (\n <TableContext.Provider\n value={{\n dataSource,\n menuActionHandler,\n }}\n >\n {children}\n </TableContext.Provider>\n );\n};\n\nexport function useTableContext(throwIfNoDataSource = false) {\n const { dataSource, menuActionHandler } = useContext(TableContext);\n if (\n dataSource === NullDataSource &&\n menuActionHandler == NullMenuActionHandler &&\n throwIfNoDataSource\n ) {\n throw Error(`[TableProvider] no DataSourceProvider has been declared`);\n } else {\n return {\n dataSource,\n menuActionHandler,\n };\n }\n}\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAWA,MAAM,qBAAA,GAAwB,CAAC,UAAuB,KAAA;AACpD,EAAQ,OAAA,CAAA,GAAA;AAAA,IACN,iFAAiF,UAAU,CAAA,CAAA;AAAA,GAC7F;AACA,EAAO,OAAA,KAAA;AACT,CAAA;AACA,MAAM,iBAAiB,EAAC;AAEjB,MAAM,eAAeA,mBAAiC,CAAA;AAAA,EAC3D,UAAY,EAAA,cAAA;AAAA,EACZ,iBAAmB,EAAA;AACrB,CAAC;AAEM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAEM,KAAA;AACJ,EACE,uBAAAC,cAAA;AAAA,IAAC,YAAa,CAAA,QAAA;AAAA,IAAb;AAAA,MACC,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEgB,SAAA,eAAA,CAAgB,sBAAsB,KAAO,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAIC,iBAAW,YAAY,CAAA;AACjE,EAAA,IACE,UAAe,KAAA,cAAA,IACf,iBAAqB,IAAA,qBAAA,IACrB,mBACA,EAAA;AACA,IAAA,MAAM,MAAM,CAAyD,uDAAA,CAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA;AAAA,KACF;AAAA;AAEJ;;;;;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { registerComponent } from '@vuu-ui/vuu-utils';
|
|
2
|
-
import { OK } from '@vuu-ui/vuu-data-react';
|
|
3
|
-
|
|
4
|
-
const isString = (value) => typeof value === "string";
|
|
5
|
-
const CaseValidator = (rule, value) => {
|
|
6
|
-
if (isString(value)) {
|
|
7
|
-
if (value === "") {
|
|
8
|
-
return OK;
|
|
9
|
-
} else if (rule.value === "lower" && value.toLowerCase() !== value) {
|
|
10
|
-
return { ok: false, message: "value must be all lowercase" };
|
|
11
|
-
} else if (rule.value === "upper" && value.toUpperCase() !== value) {
|
|
12
|
-
return { ok: false, message: "value must be all uppercase" };
|
|
13
|
-
} else {
|
|
14
|
-
return OK;
|
|
15
|
-
}
|
|
16
|
-
} else {
|
|
17
|
-
return { ok: false, message: "value must be a string" };
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
registerComponent("vuu-case", CaseValidator, "data-edit-validator", {});
|
|
21
|
-
|
|
22
|
-
export { CaseValidator };
|
|
23
|
-
//# sourceMappingURL=CaseValidator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseValidator.js","sources":["../../src/cell-edit-validators/CaseValidator.ts"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { EditRuleValidator } from \"@vuu-ui/vuu-data-types\";\nimport { OK } from \"@vuu-ui/vuu-data-react\";\n\nconst isString = (value?: VuuRowDataItemType): value is string =>\n typeof value === \"string\";\n\nexport const CaseValidator: EditRuleValidator = (rule, value) => {\n if (isString(value)) {\n if (value === \"\") {\n return OK;\n } else if (rule.value === \"lower\" && value.toLowerCase() !== value) {\n return { ok: false, message: \"value must be all lowercase\" };\n } else if (rule.value === \"upper\" && value.toUpperCase() !== value) {\n return { ok: false, message: \"value must be all uppercase\" };\n } else {\n return OK;\n }\n } else {\n return { ok: false, message: \"value must be a string\" };\n }\n};\n\nregisterComponent(\"vuu-case\", CaseValidator, \"data-edit-validator\", {});\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA;AAEN,MAAA,aAAA,GAAmC,CAAC,IAAA,EAAM,KAAU,KAAA;AAC/D,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAA,IAAI,UAAU,EAAI,EAAA;AAChB,MAAO,OAAA,EAAA;AAAA,eACE,IAAK,CAAA,KAAA,KAAU,WAAW,KAAM,CAAA,WAAA,OAAkB,KAAO,EAAA;AAClE,MAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,6BAA8B,EAAA;AAAA,eAClD,IAAK,CAAA,KAAA,KAAU,WAAW,KAAM,CAAA,WAAA,OAAkB,KAAO,EAAA;AAClE,MAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,6BAA8B,EAAA;AAAA,KACtD,MAAA;AACL,MAAO,OAAA,EAAA;AAAA;AACT,GACK,MAAA;AACL,IAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,wBAAyB,EAAA;AAAA;AAE1D;AAEA,iBAAA,CAAkB,UAAY,EAAA,aAAA,EAAe,qBAAuB,EAAA,EAAE,CAAA;;;;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { registerComponent } from '@vuu-ui/vuu-utils';
|
|
2
|
-
import { OK } from '@vuu-ui/vuu-data-react';
|
|
3
|
-
|
|
4
|
-
const isString = (value) => typeof value === "string";
|
|
5
|
-
const defaultMessage = "value does not match expected pattern";
|
|
6
|
-
const PatternValidator = (rule, value) => {
|
|
7
|
-
if (typeof rule.value !== "string") {
|
|
8
|
-
throw Error("Pattern validation rule must provide pattern");
|
|
9
|
-
}
|
|
10
|
-
if (isString(value)) {
|
|
11
|
-
if (value === "") {
|
|
12
|
-
return OK;
|
|
13
|
-
} else {
|
|
14
|
-
const { message = defaultMessage } = rule;
|
|
15
|
-
const pattern = new RegExp(rule.value);
|
|
16
|
-
if (pattern.test(value)) {
|
|
17
|
-
return OK;
|
|
18
|
-
} else {
|
|
19
|
-
return { ok: false, message };
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
} else {
|
|
23
|
-
return { ok: false, message: "value must be a string" };
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
registerComponent("vuu-pattern", PatternValidator, "data-edit-validator", {});
|
|
27
|
-
|
|
28
|
-
export { PatternValidator };
|
|
29
|
-
//# sourceMappingURL=PatternValidator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PatternValidator.js","sources":["../../src/cell-edit-validators/PatternValidator.ts"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { EditRuleValidator } from \"@vuu-ui/vuu-data-types\";\nimport { OK } from \"@vuu-ui/vuu-data-react\";\n\nconst isString = (value?: VuuRowDataItemType): value is string =>\n typeof value === \"string\";\n\nconst defaultMessage = \"value does not match expected pattern\";\n\nexport const PatternValidator: EditRuleValidator = (rule, value) => {\n if (typeof rule.value !== \"string\") {\n throw Error(\"Pattern validation rule must provide pattern\");\n }\n if (isString(value)) {\n if (value === \"\") {\n return OK;\n } else {\n const { message = defaultMessage } = rule;\n const pattern = new RegExp(rule.value);\n if (pattern.test(value)) {\n return OK;\n } else {\n return { ok: false, message };\n }\n }\n } else {\n return { ok: false, message: \"value must be a string\" };\n }\n};\n\nregisterComponent(\"vuu-pattern\", PatternValidator, \"data-edit-validator\", {});\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA;AAEnB,MAAM,cAAiB,GAAA,uCAAA;AAEV,MAAA,gBAAA,GAAsC,CAAC,IAAA,EAAM,KAAU,KAAA;AAClE,EAAI,IAAA,OAAO,IAAK,CAAA,KAAA,KAAU,QAAU,EAAA;AAClC,IAAA,MAAM,MAAM,8CAA8C,CAAA;AAAA;AAE5D,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAA,IAAI,UAAU,EAAI,EAAA;AAChB,MAAO,OAAA,EAAA;AAAA,KACF,MAAA;AACL,MAAM,MAAA,EAAE,OAAU,GAAA,cAAA,EAAmB,GAAA,IAAA;AACrC,MAAA,MAAM,OAAU,GAAA,IAAI,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA;AACrC,MAAI,IAAA,OAAA,CAAQ,IAAK,CAAA,KAAK,CAAG,EAAA;AACvB,QAAO,OAAA,EAAA;AAAA,OACF,MAAA;AACL,QAAO,OAAA,EAAE,EAAI,EAAA,KAAA,EAAO,OAAQ,EAAA;AAAA;AAC9B;AACF,GACK,MAAA;AACL,IAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,wBAAyB,EAAA;AAAA;AAE1D;AAEA,iBAAA,CAAkB,aAAe,EAAA,gBAAA,EAAkB,qBAAuB,EAAA,EAAE,CAAA;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var backgroundCellCss = "\n.vuuBackgroundCell {\n --background-animation-duration: 10s;\n color: var(--vuuBackgroundCell-color, var(--vuu-color-gray-80));\n padding-right: var(--salt-size-unit);\n position: relative;\n z-index: -1;\n}\n\n.vuuBackgroundCell-arrowBackground,\n.vuuBackgroundCell-arrowOnly {\n padding-left: 14px;\n}\n\n.vuuBackgroundCell-arrow {\n background-color: var(--background-cell-background);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: -1;\n}\n\n.vuuBackgroundCell-arrow {\n text-align: left;\n}\n.vuuBackgroundCell-arrow + .num {\n padding-left: 8px;\n}\n\n.right .vuuBackgroundCell-arrow {\n text-align: right;\n}\n.right .vuuBackgroundCell-arrow + .num {\n padding-right: 8px;\n}\n\n.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n background-color: transparent;\n}\n\n.vuuBackgroundCell-backgroundOnly.up1,\n.vuuBackgroundCell-arrowBackground.up1 {\n animation-duration: var(--background-animation-duration);\n animation-name: vuubgup1;\n}\n\n.vuuBackgroundCell-backgroundOnly.up2,\n.vuuBackgroundCell-arrowBackground.up2 {\n animation-duration: var(--background-animation-duration);\n animation-name: vuubgup2;\n}\n\n.vuuBackgroundCell-backgroundOnly.down1,\n.vuuBackgroundCell-arrowBackground.down1 {\n animation-duration: var(--background-animation-duration);\n animation-name: vuubgdown1;\n}\n\n.vuuBackgroundCell-backgroundOnly.down2,\n.vuuBackgroundCell-arrowBackground.down2 {\n animation-duration: var(--background-animation-duration);\n animation-name: vuubgdown2;\n}\n\n.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n animation-duration: 30s;\n animation-name: vuuarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n animation-duration: 30s;\n animation-name: vuuarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n animation-duration: 30s;\n animation-name: vuuarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n animation-duration: 30s;\n animation-name: vuuarrowdown2;\n}\n\n.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n animation-duration: 30s;\n animation-name: vuubgarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n animation-duration: 30s;\n animation-name: vuubgarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n animation-duration: 30s;\n animation-name: vuubgarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n animation-duration: 30s;\n animation-name: vuubgarrowdown2;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { backgroundCellCss as default };
|
|
4
|
-
//# sourceMappingURL=BackgroundCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BackgroundCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { dataAndColumnUnchanged, registerComponent, metadataKeys, isTypeDescriptor, UP1, UP2, DOWN1, DOWN2 } from '@vuu-ui/vuu-utils';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import cx from 'clsx';
|
|
6
|
-
import { memo } from 'react';
|
|
7
|
-
import { useDirection } from './useDirection.js';
|
|
8
|
-
import backgroundCellCss from './BackgroundCell.css.js';
|
|
9
|
-
import backgroundKeyFramesCss from './BackgroundKeyframes.css.js';
|
|
10
|
-
|
|
11
|
-
const CHAR_ARROW_UP = String.fromCharCode(11014);
|
|
12
|
-
const CHAR_ARROW_DOWN = String.fromCharCode(11015);
|
|
13
|
-
const { KEY } = metadataKeys;
|
|
14
|
-
const classBase = "vuuBackgroundCell";
|
|
15
|
-
const FlashStyle = {
|
|
16
|
-
ArrowOnly: "arrow",
|
|
17
|
-
BackgroundOnly: "bg-only",
|
|
18
|
-
ArrowBackground: "arrow-bg"
|
|
19
|
-
};
|
|
20
|
-
const getFlashStyle = (colType) => {
|
|
21
|
-
if (isTypeDescriptor(colType) && colType.renderer) {
|
|
22
|
-
if ("flashStyle" in colType.renderer) {
|
|
23
|
-
return colType.renderer["flashStyle"];
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
return FlashStyle.BackgroundOnly;
|
|
27
|
-
};
|
|
28
|
-
const BackgroundCell = memo(function BackgroundCell2({
|
|
29
|
-
column,
|
|
30
|
-
columnMap,
|
|
31
|
-
row
|
|
32
|
-
}) {
|
|
33
|
-
const targetWindow = useWindow();
|
|
34
|
-
useComponentCssInjection({
|
|
35
|
-
testId: "vuu-background-cell",
|
|
36
|
-
css: backgroundCellCss,
|
|
37
|
-
window: targetWindow
|
|
38
|
-
});
|
|
39
|
-
useComponentCssInjection({
|
|
40
|
-
testId: "vuu-background-keyframes",
|
|
41
|
-
css: backgroundKeyFramesCss,
|
|
42
|
-
window: targetWindow
|
|
43
|
-
});
|
|
44
|
-
const { name, type, valueFormatter } = column;
|
|
45
|
-
const dataIdx = columnMap[name];
|
|
46
|
-
const value = row[dataIdx];
|
|
47
|
-
const flashStyle = getFlashStyle(type);
|
|
48
|
-
const direction = useDirection(row[KEY], value, column);
|
|
49
|
-
const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === UP1 || direction === UP2 ? CHAR_ARROW_UP : direction === DOWN1 || direction === DOWN2 ? CHAR_ARROW_DOWN : null : null;
|
|
50
|
-
const dirClass = direction ? ` ` + direction : "";
|
|
51
|
-
const className = cx(classBase, dirClass, {
|
|
52
|
-
[`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
|
|
53
|
-
[`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
|
|
54
|
-
[`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
|
|
55
|
-
});
|
|
56
|
-
return /* @__PURE__ */ jsxs("div", { className, tabIndex: -1, children: [
|
|
57
|
-
/* @__PURE__ */ jsx("div", { className: `${classBase}-arrow`, children: arrow }),
|
|
58
|
-
valueFormatter(row[dataIdx])
|
|
59
|
-
] });
|
|
60
|
-
}, dataAndColumnUnchanged);
|
|
61
|
-
registerComponent(
|
|
62
|
-
"vuu.price-move-background",
|
|
63
|
-
BackgroundCell,
|
|
64
|
-
"cell-renderer",
|
|
65
|
-
{
|
|
66
|
-
description: "Change background color of cell when value changes",
|
|
67
|
-
configEditor: "BackgroundCellConfigurationEditor",
|
|
68
|
-
label: "Background Flash",
|
|
69
|
-
serverDataType: ["long", "int", "double"]
|
|
70
|
-
}
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
export { BackgroundCell };
|
|
74
|
-
//# sourceMappingURL=BackgroundCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BackgroundCell.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataAndColumnUnchanged,\n DOWN1,\n DOWN2,\n isTypeDescriptor,\n metadataKeys,\n registerComponent,\n UP1,\n UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport { DataValueType } from \"@vuu-ui/vuu-data-types\";\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst { KEY } = metadataKeys;\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n ArrowOnly: \"arrow\",\n BackgroundOnly: \"bg-only\",\n ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: DataValueType) => {\n if (isTypeDescriptor(colType) && colType.renderer) {\n if (\"flashStyle\" in colType.renderer) {\n return colType.renderer[\"flashStyle\"];\n }\n }\n return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n column,\n columnMap,\n row,\n}: TableCellRendererProps) {\n //TODO what about click handling\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-background-cell\",\n css: backgroundCellCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"vuu-background-keyframes\",\n css: backgroundKeyFramesCss,\n window: targetWindow,\n });\n\n const { name, type, valueFormatter } = column;\n const dataIdx = columnMap[name];\n const value = row[dataIdx];\n const flashStyle = getFlashStyle(type);\n const direction = useDirection(row[KEY], value, column);\n const arrow =\n flashStyle === FlashStyle.ArrowOnly ||\n flashStyle === FlashStyle.ArrowBackground\n ? direction === UP1 || direction === UP2\n ? CHAR_ARROW_UP\n : direction === DOWN1 || direction === DOWN2\n ? CHAR_ARROW_DOWN\n : null\n : null;\n\n const dirClass = direction ? ` ` + direction : \"\";\n\n const className = cx(classBase, dirClass, {\n [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n });\n\n return (\n <div className={className} tabIndex={-1}>\n <div className={`${classBase}-arrow`}>{arrow}</div>\n {valueFormatter(row[dataIdx])}\n </div>\n );\n}, dataAndColumnUnchanged);\n\nregisterComponent(\n \"vuu.price-move-background\",\n BackgroundCell,\n \"cell-renderer\",\n {\n description: \"Change background color of cell when value changes\",\n configEditor: \"BackgroundCellConfigurationEditor\",\n label: \"Background Flash\",\n serverDataType: [\"long\", \"int\", \"double\"],\n },\n);\n"],"names":["BackgroundCell"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BackgroundCellConfigurationEditor.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { registerConfigurationEditor } from '@vuu-ui/vuu-utils';
|
|
3
|
-
import { FormField, FormFieldLabel, Dropdown, Option } from '@salt-ds/core';
|
|
4
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
|
-
import { useWindow } from '@salt-ds/window';
|
|
6
|
-
import { useState, useCallback } from 'react';
|
|
7
|
-
import backgroundCellConfigurationEditorCss from './BackgroundCellConfigurationEditor.css.js';
|
|
8
|
-
|
|
9
|
-
const classBase = "vuuBackgroundCellConfiguration";
|
|
10
|
-
const flashOptions = [
|
|
11
|
-
{ label: "Background Only", value: "bg-only" },
|
|
12
|
-
{ label: "Background and Arrow", value: "arrow-bg" },
|
|
13
|
-
{ label: "Arrow Only", value: "arrow" }
|
|
14
|
-
];
|
|
15
|
-
const [defaultFlashOption] = flashOptions;
|
|
16
|
-
const valueFromColumn = (column) => {
|
|
17
|
-
const { flashStyle } = column.type.renderer;
|
|
18
|
-
return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;
|
|
19
|
-
};
|
|
20
|
-
const BackgroundCellConfigurationEditor = ({
|
|
21
|
-
column,
|
|
22
|
-
onChangeRendering
|
|
23
|
-
}) => {
|
|
24
|
-
const targetWindow = useWindow();
|
|
25
|
-
useComponentCssInjection({
|
|
26
|
-
testId: "vuu-background-cell-configuration-editor",
|
|
27
|
-
css: backgroundCellConfigurationEditorCss,
|
|
28
|
-
window: targetWindow
|
|
29
|
-
});
|
|
30
|
-
console.log({ type: column.type });
|
|
31
|
-
const [flashStyle, setFlashStyle] = useState(
|
|
32
|
-
valueFromColumn(column)
|
|
33
|
-
);
|
|
34
|
-
const handleSelectionChange = useCallback(
|
|
35
|
-
(_, [flashOption]) => {
|
|
36
|
-
setFlashStyle(flashOption);
|
|
37
|
-
const renderProps = column.type.renderer;
|
|
38
|
-
onChangeRendering({
|
|
39
|
-
...renderProps,
|
|
40
|
-
flashStyle: flashOption?.value ?? defaultFlashOption.value
|
|
41
|
-
});
|
|
42
|
-
},
|
|
43
|
-
[column.type, onChangeRendering]
|
|
44
|
-
);
|
|
45
|
-
return /* @__PURE__ */ jsxs(FormField, { children: [
|
|
46
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Flash Style" }),
|
|
47
|
-
/* @__PURE__ */ jsx(
|
|
48
|
-
Dropdown,
|
|
49
|
-
{
|
|
50
|
-
className: `${classBase}-flashStyle`,
|
|
51
|
-
onSelectionChange: handleSelectionChange,
|
|
52
|
-
selected: flashStyle ? [flashStyle] : [],
|
|
53
|
-
value: flashStyle?.label,
|
|
54
|
-
children: flashOptions.map((flashOption, i) => /* @__PURE__ */ jsx(Option, { value: flashOption, children: flashOption.label }, i))
|
|
55
|
-
}
|
|
56
|
-
)
|
|
57
|
-
] });
|
|
58
|
-
};
|
|
59
|
-
registerConfigurationEditor(
|
|
60
|
-
"BackgroundCellConfigurationEditor",
|
|
61
|
-
BackgroundCellConfigurationEditor
|
|
62
|
-
);
|
|
63
|
-
|
|
64
|
-
export { BackgroundCellConfigurationEditor };
|
|
65
|
-
//# sourceMappingURL=BackgroundCellConfigurationEditor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BackgroundCellConfigurationEditor.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx"],"sourcesContent":["import type { ColumnDescriptorCustomRenderer } from \"@vuu-ui/vuu-table-types\";\nimport {\n ConfigurationEditorProps,\n registerConfigurationEditor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { SyntheticEvent, useCallback, useState } from \"react\";\n\nimport backgroundCellConfigurationEditorCss from \"./BackgroundCellConfigurationEditor.css\";\n\nconst classBase = \"vuuBackgroundCellConfiguration\";\n\ntype FlashOption = {\n label: string;\n value: \"arrow\" | \"bg-only\" | \"arrow-bg\";\n};\n\nconst flashOptions: FlashOption[] = [\n { label: \"Background Only\", value: \"bg-only\" },\n { label: \"Background and Arrow\", value: \"arrow-bg\" },\n { label: \"Arrow Only\", value: \"arrow\" },\n];\n\nconst [defaultFlashOption] = flashOptions;\n\nconst valueFromColumn = (column: ColumnDescriptorCustomRenderer) => {\n const { flashStyle } = column.type.renderer;\n return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;\n};\n\nexport const BackgroundCellConfigurationEditor = ({\n column,\n onChangeRendering,\n}: ConfigurationEditorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-background-cell-configuration-editor\",\n css: backgroundCellConfigurationEditorCss,\n window: targetWindow,\n });\n\n console.log({ type: column.type });\n\n const [flashStyle, setFlashStyle] = useState<FlashOption | undefined>(\n valueFromColumn(column),\n );\n const handleSelectionChange = useCallback(\n (_: SyntheticEvent, [flashOption]: FlashOption[]) => {\n setFlashStyle(flashOption);\n const renderProps = column.type.renderer;\n onChangeRendering({\n ...renderProps,\n flashStyle: flashOption?.value ?? defaultFlashOption.value,\n });\n },\n [column.type, onChangeRendering],\n );\n\n return (\n <FormField>\n <FormFieldLabel>Flash Style</FormFieldLabel>\n <Dropdown<FlashOption>\n className={`${classBase}-flashStyle`}\n onSelectionChange={handleSelectionChange}\n selected={flashStyle ? [flashStyle] : []}\n value={flashStyle?.label}\n >\n {flashOptions.map((flashOption, i) => (\n <Option key={i} value={flashOption}>\n {flashOption.label}\n </Option>\n ))}\n </Dropdown>\n </FormField>\n );\n};\n\nregisterConfigurationEditor(\n \"BackgroundCellConfigurationEditor\",\n BackgroundCellConfigurationEditor,\n);\n"],"names":[],"mappings":";;;;;;;;AAYA,MAAM,SAAY,GAAA,gCAAA;AAOlB,MAAM,YAA8B,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,iBAAmB,EAAA,KAAA,EAAO,SAAU,EAAA;AAAA,EAC7C,EAAE,KAAA,EAAO,sBAAwB,EAAA,KAAA,EAAO,UAAW,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,OAAQ;AACxC,CAAA;AAEA,MAAM,CAAC,kBAAkB,CAAI,GAAA,YAAA;AAE7B,MAAM,eAAA,GAAkB,CAAC,MAA2C,KAAA;AAClE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,MAAA,CAAO,IAAK,CAAA,QAAA;AACnC,EAAA,OAAO,aAAa,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,UAAU,CAAK,IAAA,kBAAA;AAC7D,CAAA;AAEO,MAAM,oCAAoC,CAAC;AAAA,EAChD,MAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0CAAA;AAAA,IACR,GAAK,EAAA,oCAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAM,CAAA;AAEjC,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA;AAAA,IAClC,gBAAgB,MAAM;AAAA,GACxB;AACA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,CAAA,EAAmB,CAAC,WAAW,CAAqB,KAAA;AACnD,MAAA,aAAA,CAAc,WAAW,CAAA;AACzB,MAAM,MAAA,WAAA,GAAc,OAAO,IAAK,CAAA,QAAA;AAChC,MAAkB,iBAAA,CAAA;AAAA,QAChB,GAAG,WAAA;AAAA,QACH,UAAA,EAAY,WAAa,EAAA,KAAA,IAAS,kBAAmB,CAAA;AAAA,OACtD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAO,CAAA,IAAA,EAAM,iBAAiB;AAAA,GACjC;AAEA,EAAA,4BACG,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBAC3B,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,QACvB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,QAAU,EAAA,UAAA,GAAa,CAAC,UAAU,IAAI,EAAC;AAAA,QACvC,OAAO,UAAY,EAAA,KAAA;AAAA,QAElB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,WAAA,EAAa,CAC9B,qBAAA,GAAA,CAAC,MAAe,EAAA,EAAA,KAAA,EAAO,WACpB,EAAA,QAAA,EAAA,WAAA,CAAY,KADF,EAAA,EAAA,CAEb,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;AAEA,2BAAA;AAAA,EACE,mCAAA;AAAA,EACA;AACF,CAAA;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var backgroundKeyFramesCss = "\n@keyframes vuubgup1 {\n 0% {\n background-color: var(--vuu-color-green-50);\n color: white;\n }\n\n 30% {\n color: white;\n } \n 33% {\n color: var(--vuu-color-gray-80);\n } \n\n 100% {\n background-color: transparent;\n color: var(--vuu-color-gray-80);\n }\n }\n \n @keyframes vuubgup2 {\n 0% {\n background-color: var(--vuu-color-green-50);\n color: white;\n }\n\n 30% {\n color: white;\n } \n 33% {\n color: var(--vuu-color-gray-80);\n } \n\n 100% {\n background-color: transparent;\n color: var(--vuu-color-gray-80);\n }\n }\n \n @keyframes vuubgdown1 {\n 0% {\n background-color: var(--vuu-color-red-50);\n color: white;\n }\n 30% {\n color: white;\n } \n 33% {\n color: var(--vuu-color-gray-80);\n } \n 100% {\n background-color: transparent;\n color: var(--vuu-color-gray-80);\n }\n }\n \n @keyframes vuubgdown2 {\n 0% {\n background-color: var(--vuu-color-red-50);\n color: white;\n }\n 30% {\n color: white;\n } \n 33% {\n color: var(--vuu-color-gray-80);\n } \n 100% {\n background-color: transparent;\n color: var(--vuu-color-gray-80);\n }\n }\n \n @keyframes vuuarrowup1 {\n from {\n color: var(--salt-differential-positive-foreground);\n }\n to {\n color: transparent;\n }\n }\n \n @keyframes vuuarrowup2 {\n from {\n color: var(--salt-differential-positive-foreground);\n }\n to {\n color: transparent;\n }\n }\n \n @keyframes vuuarrowdown1 {\n from {\n color: var(--salt-differential-negative-foreground);\n }\n to {\n color: transparent;\n }\n }\n \n @keyframes vuuarrowdown2 {\n from {\n color: var(--salt-differential-negative-foreground);\n }\n to {\n color: transparent;\n }\n }\n \n @keyframes vuubgarrowup1 {\n 0% {\n color: var(--salt-differential-positive-foreground);\n background-color: var(--vuu-color-green-50);\n }\n 20% {\n color: var(--salt-differential-positive-foreground);\n background-color: transparent;\n }\n 100% {\n color: transparent;\n background-color: transparent;\n }\n }\n \n @keyframes vuubgarrowup2 {\n 0% {\n color: var(--salt-differential-positive-foreground);\n background-color: var(--vuu-color-green-50);\n }\n 20% {\n color: var(--salt-differential-positive-foreground);\n background-color: transparent;\n }\n 100% {\n color: transparent;\n background-color: transparent;\n }\n }\n \n @keyframes vuubgarrowdown1 {\n 0% {\n color: var(--salt-differential-negative-foreground);\n background-color: var(--vuu-color-red-50);\n }\n 20% {\n color: var(--salt-differential-negative-foreground);\n background-color: transparent;\n }\n 100% {\n color: transparent;\n background-color: transparent;\n }\n }\n \n @keyframes vuubgarrowdown2 {\n 0% {\n color: var(--salt-differential-negative-foreground);\n background-color: var(--vuu-color-red-50);\n }\n 20% {\n color: var(--salt-differential-negative-foreground);\n background-color: transparent;\n }\n 100% {\n color: transparent;\n background-color: transparent;\n }\n }\n ";
|
|
2
|
-
|
|
3
|
-
export { backgroundKeyFramesCss as default };
|
|
4
|
-
//# sourceMappingURL=BackgroundKeyframes.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BackgroundKeyframes.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { isTypeDescriptor, isValidNumber, getMovingValueDirection } from '@vuu-ui/vuu-utils';
|
|
2
|
-
import { useRef, useEffect } from 'react';
|
|
3
|
-
|
|
4
|
-
const INITIAL_VALUE = [void 0, void 0, void 0, void 0];
|
|
5
|
-
function useDirection(key, value, column) {
|
|
6
|
-
const ref = useRef(void 0);
|
|
7
|
-
const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
|
|
8
|
-
const { type: dataType } = column;
|
|
9
|
-
const decimals = isTypeDescriptor(dataType) ? dataType.formatting?.decimals : void 0;
|
|
10
|
-
const direction = key === prevKey && isValidNumber(value) && isValidNumber(prevValue) && column === prevColumn ? getMovingValueDirection(value, prevDirection, prevValue, decimals) : "";
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
ref.current = [key, value, column, direction];
|
|
13
|
-
});
|
|
14
|
-
return direction;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export { useDirection };
|
|
18
|
-
//# sourceMappingURL=useDirection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDirection.js","sources":["../../../src/cell-renderers/background-cell/useDirection.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n getMovingValueDirection,\n isTypeDescriptor,\n isValidNumber,\n valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { useEffect, useRef } from \"react\";\n\nconst INITIAL_VALUE = [undefined, undefined, undefined, undefined];\n\ntype State = [string, unknown, RuntimeColumnDescriptor, valueChangeDirection];\n\nexport function useDirection(\n key: string,\n value: unknown,\n column: RuntimeColumnDescriptor,\n) {\n const ref = useRef<State>(undefined);\n const [prevKey, prevValue, prevColumn, prevDirection] =\n ref.current || INITIAL_VALUE;\n\n const { type: dataType } = column;\n const decimals = isTypeDescriptor(dataType)\n ? dataType.formatting?.decimals\n : undefined;\n\n const direction =\n key === prevKey &&\n isValidNumber(value) &&\n isValidNumber(prevValue) &&\n column === prevColumn\n ? getMovingValueDirection(value, prevDirection, prevValue, decimals)\n : \"\";\n\n useEffect(() => {\n ref.current = [key, value, column, direction];\n });\n\n return direction;\n}\n"],"names":[],"mappings":";;;AASA,MAAM,aAAgB,GAAA,CAAC,KAAW,CAAA,EAAA,KAAA,CAAA,EAAW,QAAW,KAAS,CAAA,CAAA;AAIjD,SAAA,YAAA,CACd,GACA,EAAA,KAAA,EACA,MACA,EAAA;AACA,EAAM,MAAA,GAAA,GAAM,OAAc,KAAS,CAAA,CAAA;AACnC,EAAA,MAAM,CAAC,OAAS,EAAA,SAAA,EAAW,YAAY,aAAa,CAAA,GAClD,IAAI,OAAW,IAAA,aAAA;AAEjB,EAAM,MAAA,EAAE,IAAM,EAAA,QAAA,EAAa,GAAA,MAAA;AAC3B,EAAA,MAAM,WAAW,gBAAiB,CAAA,QAAQ,CACtC,GAAA,QAAA,CAAS,YAAY,QACrB,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,YACJ,GAAQ,KAAA,OAAA,IACR,aAAc,CAAA,KAAK,KACnB,aAAc,CAAA,SAAS,CACvB,IAAA,MAAA,KAAW,aACP,uBAAwB,CAAA,KAAA,EAAO,aAAe,EAAA,SAAA,EAAW,QAAQ,CACjE,GAAA,EAAA;AAEN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,GAAA,CAAI,OAAU,GAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,SAAS,CAAA;AAAA,GAC7C,CAAA;AAED,EAAO,OAAA,SAAA;AACT;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - 20px);\n --vuu-icon-size: 8px;\n --vuu-icon-top: -2px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 2px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 2px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n &.saltDropdown:focus {\n outline: none;\n }\n }\n\n .vuuTableDropdownCell:focus {\n border: solid 2px var(--salt-focused-outlineColor);\n }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n} */\n";
|
|
2
|
-
|
|
3
|
-
export { dropdownCellCss as default };
|
|
4
|
-
//# sourceMappingURL=DropdownCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|