@vuu-ui/vuu-table-extras 0.13.9 → 0.13.11
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/cell-edit-validators/CaseValidator.js +25 -0
- package/cjs/cell-edit-validators/CaseValidator.js.map +1 -0
- package/cjs/cell-edit-validators/PatternValidator.js +31 -0
- package/cjs/cell-edit-validators/PatternValidator.js.map +1 -0
- package/cjs/cell-renderers/background-cell/BackgroundCell.css.js +6 -0
- package/cjs/cell-renderers/background-cell/BackgroundCell.css.js.map +1 -0
- package/cjs/cell-renderers/background-cell/BackgroundCell.js +76 -0
- package/cjs/cell-renderers/background-cell/BackgroundCell.js.map +1 -0
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +6 -0
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +1 -0
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +67 -0
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +1 -0
- package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js +6 -0
- package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +1 -0
- package/cjs/cell-renderers/background-cell/useDirection.js +20 -0
- package/cjs/cell-renderers/background-cell/useDirection.js.map +1 -0
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js +6 -0
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js.map +1 -0
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +94 -0
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -0
- package/cjs/cell-renderers/lookup-cell/LookupCell.js +23 -0
- package/cjs/cell-renderers/lookup-cell/LookupCell.js.map +1 -0
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js +6 -0
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +1 -0
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js +62 -0
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js.map +1 -0
- package/cjs/cell-renderers/progress-cell/ProgressCell.css.js +6 -0
- package/cjs/cell-renderers/progress-cell/ProgressCell.css.js.map +1 -0
- package/cjs/cell-renderers/progress-cell/ProgressCell.js +69 -0
- package/cjs/cell-renderers/progress-cell/ProgressCell.js.map +1 -0
- package/cjs/column-expression-input/ColumnExpressionInput.css.js +6 -0
- package/cjs/column-expression-input/ColumnExpressionInput.css.js.map +1 -0
- package/cjs/column-expression-input/ColumnExpressionInput.js +39 -0
- package/cjs/column-expression-input/ColumnExpressionInput.js.map +1 -0
- package/cjs/column-expression-input/column-function-descriptors.js +307 -0
- package/cjs/column-expression-input/column-function-descriptors.js.map +1 -0
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +28 -0
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +1 -0
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +465 -0
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +1 -0
- package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js +61 -0
- package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +1 -0
- package/cjs/column-expression-input/column-language-parser/generated/column-parser.js +21 -0
- package/cjs/column-expression-input/column-language-parser/generated/column-parser.js.map +1 -0
- package/cjs/column-expression-input/functionDocInfo.js +39 -0
- package/cjs/column-expression-input/functionDocInfo.js.map +1 -0
- package/cjs/column-expression-input/highlighting.js +16 -0
- package/cjs/column-expression-input/highlighting.js.map +1 -0
- package/cjs/column-expression-input/theme.js +63 -0
- package/cjs/column-expression-input/theme.js.map +1 -0
- package/cjs/column-expression-input/useColumnAutoComplete.js +358 -0
- package/cjs/column-expression-input/useColumnAutoComplete.js.map +1 -0
- package/cjs/column-expression-input/useColumnExpressionEditor.js +131 -0
- package/cjs/column-expression-input/useColumnExpressionEditor.js.map +1 -0
- package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js +213 -0
- package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js.map +1 -0
- package/cjs/column-expression-panel/ColumnExpressionPanel.js +85 -0
- package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +1 -0
- package/cjs/column-expression-panel/useColumnExpression.js +69 -0
- package/cjs/column-expression-panel/useColumnExpression.js.map +1 -0
- package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +97 -0
- package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -0
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js +104 -0
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +1 -0
- package/cjs/column-formatting-settings/DateTimeFormattingSettings.js +99 -0
- package/cjs/column-formatting-settings/DateTimeFormattingSettings.js.map +1 -0
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js +6 -0
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js.map +1 -0
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.js +49 -0
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.js.map +1 -0
- package/cjs/column-list/ColumnList.css.js +6 -0
- package/cjs/column-list/ColumnList.css.js.map +1 -0
- package/cjs/column-list/ColumnList.js +172 -0
- package/cjs/column-list/ColumnList.js.map +1 -0
- package/cjs/column-menu/ColumnMenu.css.js +6 -0
- package/cjs/column-menu/ColumnMenu.css.js.map +1 -0
- package/cjs/column-menu/ColumnMenu.js +116 -0
- package/cjs/column-menu/ColumnMenu.js.map +1 -0
- package/cjs/column-menu/column-menu-utils.js +489 -0
- package/cjs/column-menu/column-menu-utils.js.map +1 -0
- package/cjs/column-menu/useColumnActions.js +75 -0
- package/cjs/column-menu/useColumnActions.js.map +1 -0
- package/cjs/datasource-stats/DatasourceStats.css.js +6 -0
- package/cjs/datasource-stats/DatasourceStats.css.js.map +1 -0
- package/cjs/datasource-stats/DatasourceStats.js +52 -0
- package/cjs/datasource-stats/DatasourceStats.js.map +1 -0
- package/cjs/index.js +65 -4254
- package/cjs/index.js.map +1 -1
- package/cjs/table-column-settings/ColumnNameLabel.css.js +6 -0
- package/cjs/table-column-settings/ColumnNameLabel.css.js.map +1 -0
- package/cjs/table-column-settings/ColumnNameLabel.js +45 -0
- package/cjs/table-column-settings/ColumnNameLabel.js.map +1 -0
- package/cjs/table-column-settings/ColumnSettingsPanel.css.js +6 -0
- package/cjs/table-column-settings/ColumnSettingsPanel.css.js.map +1 -0
- package/cjs/table-column-settings/ColumnSettingsPanel.js +202 -0
- package/cjs/table-column-settings/ColumnSettingsPanel.js.map +1 -0
- package/cjs/table-column-settings/TableSettingsPanel.css.js +6 -0
- package/cjs/table-column-settings/TableSettingsPanel.css.js.map +1 -0
- package/cjs/table-column-settings/TableSettingsPanel.js +139 -0
- package/cjs/table-column-settings/TableSettingsPanel.js.map +1 -0
- package/cjs/table-column-settings/useColumnSettings.js +224 -0
- package/cjs/table-column-settings/useColumnSettings.js.map +1 -0
- package/cjs/table-column-settings/useTableAndColumnSettings.js +126 -0
- package/cjs/table-column-settings/useTableAndColumnSettings.js.map +1 -0
- package/cjs/table-column-settings/useTableSettings.js +172 -0
- package/cjs/table-column-settings/useTableSettings.js.map +1 -0
- package/cjs/table-provider/TableProvider.js +48 -0
- package/cjs/table-provider/TableProvider.js.map +1 -0
- package/esm/cell-edit-validators/CaseValidator.js +23 -0
- package/esm/cell-edit-validators/CaseValidator.js.map +1 -0
- package/esm/cell-edit-validators/PatternValidator.js +29 -0
- package/esm/cell-edit-validators/PatternValidator.js.map +1 -0
- package/esm/cell-renderers/background-cell/BackgroundCell.css.js +4 -0
- package/esm/cell-renderers/background-cell/BackgroundCell.css.js.map +1 -0
- package/esm/cell-renderers/background-cell/BackgroundCell.js +74 -0
- package/esm/cell-renderers/background-cell/BackgroundCell.js.map +1 -0
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +4 -0
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +1 -0
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +65 -0
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +1 -0
- package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js +4 -0
- package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +1 -0
- package/esm/cell-renderers/background-cell/useDirection.js +18 -0
- package/esm/cell-renderers/background-cell/useDirection.js.map +1 -0
- package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js +4 -0
- package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js.map +1 -0
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js +92 -0
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -0
- package/esm/cell-renderers/lookup-cell/LookupCell.js +21 -0
- package/esm/cell-renderers/lookup-cell/LookupCell.js.map +1 -0
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js +4 -0
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +1 -0
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js +60 -0
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js.map +1 -0
- package/esm/cell-renderers/progress-cell/ProgressCell.css.js +4 -0
- package/esm/cell-renderers/progress-cell/ProgressCell.css.js.map +1 -0
- package/esm/cell-renderers/progress-cell/ProgressCell.js +67 -0
- package/esm/cell-renderers/progress-cell/ProgressCell.js.map +1 -0
- package/esm/column-expression-input/ColumnExpressionInput.css.js +4 -0
- package/esm/column-expression-input/ColumnExpressionInput.css.js.map +1 -0
- package/esm/column-expression-input/ColumnExpressionInput.js +37 -0
- package/esm/column-expression-input/ColumnExpressionInput.js.map +1 -0
- package/esm/column-expression-input/column-function-descriptors.js +305 -0
- package/esm/column-expression-input/column-function-descriptors.js.map +1 -0
- package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +26 -0
- package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +1 -0
- package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +463 -0
- package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +1 -0
- package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js +56 -0
- package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +1 -0
- package/esm/column-expression-input/column-language-parser/generated/column-parser.js +19 -0
- package/esm/column-expression-input/column-language-parser/generated/column-parser.js.map +1 -0
- package/esm/column-expression-input/functionDocInfo.js +37 -0
- package/esm/column-expression-input/functionDocInfo.js.map +1 -0
- package/esm/column-expression-input/highlighting.js +14 -0
- package/esm/column-expression-input/highlighting.js.map +1 -0
- package/esm/column-expression-input/theme.js +61 -0
- package/esm/column-expression-input/theme.js.map +1 -0
- package/esm/column-expression-input/useColumnAutoComplete.js +356 -0
- package/esm/column-expression-input/useColumnAutoComplete.js.map +1 -0
- package/esm/column-expression-input/useColumnExpressionEditor.js +129 -0
- package/esm/column-expression-input/useColumnExpressionEditor.js.map +1 -0
- package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js +211 -0
- package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js.map +1 -0
- package/esm/column-expression-panel/ColumnExpressionPanel.js +83 -0
- package/esm/column-expression-panel/ColumnExpressionPanel.js.map +1 -0
- package/esm/column-expression-panel/useColumnExpression.js +67 -0
- package/esm/column-expression-panel/useColumnExpression.js.map +1 -0
- package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +95 -0
- package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -0
- package/esm/column-formatting-settings/ColumnFormattingPanel.js +102 -0
- package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +1 -0
- package/esm/column-formatting-settings/DateTimeFormattingSettings.js +97 -0
- package/esm/column-formatting-settings/DateTimeFormattingSettings.js.map +1 -0
- package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js +4 -0
- package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js.map +1 -0
- package/esm/column-formatting-settings/LongTypeFormattingSettings.js +47 -0
- package/esm/column-formatting-settings/LongTypeFormattingSettings.js.map +1 -0
- package/esm/column-list/ColumnList.css.js +4 -0
- package/esm/column-list/ColumnList.css.js.map +1 -0
- package/esm/column-list/ColumnList.js +170 -0
- package/esm/column-list/ColumnList.js.map +1 -0
- package/esm/column-menu/ColumnMenu.css.js +4 -0
- package/esm/column-menu/ColumnMenu.css.js.map +1 -0
- package/esm/column-menu/ColumnMenu.js +114 -0
- package/esm/column-menu/ColumnMenu.js.map +1 -0
- package/esm/column-menu/column-menu-utils.js +480 -0
- package/esm/column-menu/column-menu-utils.js.map +1 -0
- package/esm/column-menu/useColumnActions.js +73 -0
- package/esm/column-menu/useColumnActions.js.map +1 -0
- package/esm/datasource-stats/DatasourceStats.css.js +4 -0
- package/esm/datasource-stats/DatasourceStats.css.js.map +1 -0
- package/esm/datasource-stats/DatasourceStats.js +50 -0
- package/esm/datasource-stats/DatasourceStats.js.map +1 -0
- package/esm/index.js +28 -4221
- package/esm/index.js.map +1 -1
- package/esm/table-column-settings/ColumnNameLabel.css.js +4 -0
- package/esm/table-column-settings/ColumnNameLabel.css.js.map +1 -0
- package/esm/table-column-settings/ColumnNameLabel.js +43 -0
- package/esm/table-column-settings/ColumnNameLabel.js.map +1 -0
- package/esm/table-column-settings/ColumnSettingsPanel.css.js +4 -0
- package/esm/table-column-settings/ColumnSettingsPanel.css.js.map +1 -0
- package/esm/table-column-settings/ColumnSettingsPanel.js +200 -0
- package/esm/table-column-settings/ColumnSettingsPanel.js.map +1 -0
- package/esm/table-column-settings/TableSettingsPanel.css.js +4 -0
- package/esm/table-column-settings/TableSettingsPanel.css.js.map +1 -0
- package/esm/table-column-settings/TableSettingsPanel.js +136 -0
- package/esm/table-column-settings/TableSettingsPanel.js.map +1 -0
- package/esm/table-column-settings/useColumnSettings.js +222 -0
- package/esm/table-column-settings/useColumnSettings.js.map +1 -0
- package/esm/table-column-settings/useTableAndColumnSettings.js +122 -0
- package/esm/table-column-settings/useTableAndColumnSettings.js.map +1 -0
- package/esm/table-column-settings/useTableSettings.js +170 -0
- package/esm/table-column-settings/useTableSettings.js.map +1 -0
- package/esm/table-provider/TableProvider.js +44 -0
- package/esm/table-provider/TableProvider.js.map +1 -0
- package/package.json +11 -11
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
const integerCellRenderers = [
|
|
7
|
+
{
|
|
8
|
+
description: "Default formatter for columns with data type integer",
|
|
9
|
+
label: "Default Renderer (int, long)",
|
|
10
|
+
name: "default-int"
|
|
11
|
+
}
|
|
12
|
+
];
|
|
13
|
+
const doubleCellRenderers = [
|
|
14
|
+
{
|
|
15
|
+
description: "Default formatter for columns with data type double",
|
|
16
|
+
label: "Default Renderer (double)",
|
|
17
|
+
name: "default-double"
|
|
18
|
+
}
|
|
19
|
+
];
|
|
20
|
+
const stringCellRenderers = [
|
|
21
|
+
{
|
|
22
|
+
description: "Default formatter for columns with data type string",
|
|
23
|
+
label: "Default Renderer (string)",
|
|
24
|
+
name: "default-string"
|
|
25
|
+
}
|
|
26
|
+
];
|
|
27
|
+
const booleanCellRenderers = [];
|
|
28
|
+
const getAvailableCellRenderers = (column) => {
|
|
29
|
+
switch (column.serverDataType) {
|
|
30
|
+
case "char":
|
|
31
|
+
case "string":
|
|
32
|
+
return stringCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("string"));
|
|
33
|
+
case "int":
|
|
34
|
+
case "long":
|
|
35
|
+
return integerCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("int"));
|
|
36
|
+
case "double":
|
|
37
|
+
return doubleCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("double"));
|
|
38
|
+
case "boolean":
|
|
39
|
+
return booleanCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("boolean"));
|
|
40
|
+
default:
|
|
41
|
+
return stringCellRenderers;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
const getColumn = (columns, column) => {
|
|
45
|
+
if (column.name === "::") {
|
|
46
|
+
return column;
|
|
47
|
+
} else {
|
|
48
|
+
const col = columns.find((col2) => col2.name === column.name);
|
|
49
|
+
if (col) {
|
|
50
|
+
return col;
|
|
51
|
+
}
|
|
52
|
+
throw Error(`columns does not contain column ${name}`);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const replaceColumn = (tableConfig, column) => ({
|
|
56
|
+
...tableConfig,
|
|
57
|
+
columns: tableConfig.columns.map(
|
|
58
|
+
(col) => col.name === column.name ? column : col
|
|
59
|
+
)
|
|
60
|
+
});
|
|
61
|
+
const useColumnSettings = ({
|
|
62
|
+
column: columnProp,
|
|
63
|
+
onCancelCreateColumn,
|
|
64
|
+
onConfigChange,
|
|
65
|
+
onCreateCalculatedColumn,
|
|
66
|
+
tableConfig
|
|
67
|
+
}) => {
|
|
68
|
+
const [column, setColumn] = react.useState(
|
|
69
|
+
getColumn(tableConfig.columns, columnProp)
|
|
70
|
+
);
|
|
71
|
+
const columnRef = react.useRef(column);
|
|
72
|
+
const [inEditMode, setEditMode] = react.useState(column.name === "::");
|
|
73
|
+
const handleEditCalculatedcolumn = react.useCallback(() => {
|
|
74
|
+
columnRef.current = column;
|
|
75
|
+
setEditMode(true);
|
|
76
|
+
}, [column]);
|
|
77
|
+
react.useEffect(() => {
|
|
78
|
+
setColumn(columnProp);
|
|
79
|
+
setEditMode(columnProp.name === "::");
|
|
80
|
+
}, [columnProp]);
|
|
81
|
+
const availableRenderers = react.useMemo(() => {
|
|
82
|
+
return getAvailableCellRenderers(column);
|
|
83
|
+
}, [column]);
|
|
84
|
+
const handleInputCommit = react.useCallback(() => {
|
|
85
|
+
onConfigChange(replaceColumn(tableConfig, column));
|
|
86
|
+
}, [column, onConfigChange, tableConfig]);
|
|
87
|
+
const handleChangeToggleButton = react.useCallback(
|
|
88
|
+
(evt) => {
|
|
89
|
+
const button = vuuUtils.queryClosest(evt.target, "button");
|
|
90
|
+
if (button) {
|
|
91
|
+
const fieldName = vuuUtils.getFieldName(button);
|
|
92
|
+
const { value } = button;
|
|
93
|
+
switch (fieldName) {
|
|
94
|
+
case "column-alignment":
|
|
95
|
+
if (vuuUtils.isValidColumnAlignment(value)) {
|
|
96
|
+
const newColumn = {
|
|
97
|
+
...column,
|
|
98
|
+
align: value || void 0
|
|
99
|
+
};
|
|
100
|
+
setColumn(newColumn);
|
|
101
|
+
onConfigChange(replaceColumn(tableConfig, newColumn));
|
|
102
|
+
}
|
|
103
|
+
break;
|
|
104
|
+
case "column-pin":
|
|
105
|
+
if (vuuUtils.isValidPinLocation(value)) {
|
|
106
|
+
const newColumn = {
|
|
107
|
+
...column,
|
|
108
|
+
pin: value || void 0
|
|
109
|
+
};
|
|
110
|
+
setColumn(newColumn);
|
|
111
|
+
onConfigChange(replaceColumn(tableConfig, newColumn));
|
|
112
|
+
break;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
[column, onConfigChange, tableConfig]
|
|
118
|
+
);
|
|
119
|
+
const handleChange = react.useCallback((evt) => {
|
|
120
|
+
const input = evt.target;
|
|
121
|
+
const fieldName = vuuUtils.getFieldName(input);
|
|
122
|
+
const { value } = input;
|
|
123
|
+
switch (fieldName) {
|
|
124
|
+
case "column-label":
|
|
125
|
+
setColumn((state) => ({ ...state, label: value }));
|
|
126
|
+
break;
|
|
127
|
+
case "column-name":
|
|
128
|
+
setColumn((state) => vuuUtils.setCalculatedColumnName(state, value));
|
|
129
|
+
break;
|
|
130
|
+
case "column-width":
|
|
131
|
+
setColumn((state) => ({ ...state, width: parseInt(value) }));
|
|
132
|
+
break;
|
|
133
|
+
}
|
|
134
|
+
}, []);
|
|
135
|
+
const handleChangeCalculatedColumnName = react.useCallback((name2) => {
|
|
136
|
+
setColumn((state) => ({ ...state, name: name2 }));
|
|
137
|
+
}, []);
|
|
138
|
+
const handleChangeFormatting = react.useCallback(
|
|
139
|
+
(formatting) => {
|
|
140
|
+
const newColumn = vuuUtils.updateColumnFormatting(column, formatting);
|
|
141
|
+
setColumn(newColumn);
|
|
142
|
+
onConfigChange(replaceColumn(tableConfig, newColumn));
|
|
143
|
+
},
|
|
144
|
+
[column, onConfigChange, tableConfig]
|
|
145
|
+
);
|
|
146
|
+
const handleChangeType = react.useCallback(
|
|
147
|
+
(type) => {
|
|
148
|
+
const updatedColumn = vuuUtils.updateColumnType(column, type);
|
|
149
|
+
setColumn(updatedColumn);
|
|
150
|
+
onConfigChange(replaceColumn(tableConfig, updatedColumn));
|
|
151
|
+
},
|
|
152
|
+
[column, onConfigChange, tableConfig]
|
|
153
|
+
);
|
|
154
|
+
const handleChangeServerDataType = react.useCallback(
|
|
155
|
+
(serverDataType) => {
|
|
156
|
+
setColumn((col) => ({ ...col, serverDataType }));
|
|
157
|
+
},
|
|
158
|
+
[]
|
|
159
|
+
);
|
|
160
|
+
const handleChangeRendering = react.useCallback(
|
|
161
|
+
(renderProps) => {
|
|
162
|
+
if (renderProps) {
|
|
163
|
+
const newColumn = vuuUtils.updateColumnRenderProps(
|
|
164
|
+
column,
|
|
165
|
+
renderProps
|
|
166
|
+
);
|
|
167
|
+
setColumn(newColumn);
|
|
168
|
+
onConfigChange(replaceColumn(tableConfig, newColumn));
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
[column, onConfigChange, tableConfig]
|
|
172
|
+
);
|
|
173
|
+
const navigateColumn = react.useCallback(
|
|
174
|
+
({ moveBy }) => {
|
|
175
|
+
const { columns } = tableConfig;
|
|
176
|
+
const index = columns.indexOf(column) + moveBy;
|
|
177
|
+
const newColumn = columns[index];
|
|
178
|
+
if (newColumn) {
|
|
179
|
+
setColumn(newColumn);
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
[column, tableConfig]
|
|
183
|
+
);
|
|
184
|
+
const navigateNextColumn = react.useCallback(() => {
|
|
185
|
+
navigateColumn({ moveBy: 1 });
|
|
186
|
+
}, [navigateColumn]);
|
|
187
|
+
const navigatePrevColumn = react.useCallback(() => {
|
|
188
|
+
navigateColumn({ moveBy: -1 });
|
|
189
|
+
}, [navigateColumn]);
|
|
190
|
+
const handleSaveCalculatedColumn = react.useCallback(() => {
|
|
191
|
+
onCreateCalculatedColumn(column);
|
|
192
|
+
}, [column, onCreateCalculatedColumn]);
|
|
193
|
+
const handleCancelEdit = react.useCallback(() => {
|
|
194
|
+
if (columnProp.name === "::") {
|
|
195
|
+
onCancelCreateColumn();
|
|
196
|
+
} else {
|
|
197
|
+
if (columnRef.current !== void 0 && columnRef.current !== column) {
|
|
198
|
+
setColumn(columnRef.current);
|
|
199
|
+
}
|
|
200
|
+
setEditMode(false);
|
|
201
|
+
}
|
|
202
|
+
}, [column, columnProp.name, onCancelCreateColumn]);
|
|
203
|
+
return {
|
|
204
|
+
availableRenderers,
|
|
205
|
+
editCalculatedColumn: inEditMode,
|
|
206
|
+
column,
|
|
207
|
+
navigateNextColumn,
|
|
208
|
+
navigatePrevColumn,
|
|
209
|
+
onCancel: handleCancelEdit,
|
|
210
|
+
onChange: handleChange,
|
|
211
|
+
onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
|
|
212
|
+
onChangeFormatting: handleChangeFormatting,
|
|
213
|
+
onChangeRendering: handleChangeRendering,
|
|
214
|
+
onChangeServerDataType: handleChangeServerDataType,
|
|
215
|
+
onChangeToggleButton: handleChangeToggleButton,
|
|
216
|
+
onChangeType: handleChangeType,
|
|
217
|
+
onEditCalculatedColumn: handleEditCalculatedcolumn,
|
|
218
|
+
onInputCommit: handleInputCommit,
|
|
219
|
+
onSave: handleSaveCalculatedColumn
|
|
220
|
+
};
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
exports.useColumnSettings = useColumnSettings;
|
|
224
|
+
//# sourceMappingURL=useColumnSettings.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useColumnSettings.js","sources":["../../src/table-column-settings/useColumnSettings.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n TableConfig,\n ColumnTypeFormatting,\n ColumnSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\n\nimport {\n CellRendererDescriptor,\n ColumnRenderPropsChangeHandler,\n getFieldName,\n getRegisteredCellRenderers,\n isValidColumnAlignment,\n isValidPinLocation,\n setCalculatedColumnName,\n updateColumnRenderProps,\n updateColumnFormatting,\n updateColumnType,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n FormEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DataValueTypeSimple } from \"@vuu-ui/vuu-data-types\";\n\nconst integerCellRenderers: CellRendererDescriptor[] = [\n {\n description: \"Default formatter for columns with data type integer\",\n label: \"Default Renderer (int, long)\",\n name: \"default-int\",\n },\n];\nconst doubleCellRenderers: CellRendererDescriptor[] = [\n {\n description: \"Default formatter for columns with data type double\",\n label: \"Default Renderer (double)\",\n name: \"default-double\",\n },\n];\n\nconst stringCellRenderers: CellRendererDescriptor[] = [\n {\n description: \"Default formatter for columns with data type string\",\n label: \"Default Renderer (string)\",\n name: \"default-string\",\n },\n];\n\nconst booleanCellRenderers: CellRendererDescriptor[] = [];\n\nconst getAvailableCellRenderers = (\n column: ColumnDescriptor,\n): CellRendererDescriptor[] => {\n switch (column.serverDataType) {\n case \"char\":\n case \"string\":\n return stringCellRenderers.concat(getRegisteredCellRenderers(\"string\"));\n case \"int\":\n case \"long\":\n return integerCellRenderers.concat(getRegisteredCellRenderers(\"int\"));\n case \"double\":\n return doubleCellRenderers.concat(getRegisteredCellRenderers(\"double\"));\n case \"boolean\":\n return booleanCellRenderers.concat(getRegisteredCellRenderers(\"boolean\"));\n default:\n return stringCellRenderers;\n }\n};\n\nconst getColumn = (columns: ColumnDescriptor[], column: ColumnDescriptor) => {\n if (column.name === \"::\") {\n // this is a new calculated column\n return column;\n } else {\n const col = columns.find((col) => col.name === column.name);\n if (col) {\n return col;\n }\n throw Error(`columns does not contain column ${name}`);\n }\n};\n\nconst replaceColumn = (\n tableConfig: TableConfig,\n column: ColumnDescriptor,\n): TableConfig => ({\n ...tableConfig,\n columns: tableConfig.columns.map((col) =>\n col.name === column.name ? column : col,\n ),\n});\n\nexport const useColumnSettings = ({\n column: columnProp,\n onCancelCreateColumn,\n onConfigChange,\n onCreateCalculatedColumn,\n tableConfig,\n}: Omit<ColumnSettingsProps, \"vuuTable\">) => {\n const [column, setColumn] = useState<ColumnDescriptor>(\n getColumn(tableConfig.columns, columnProp),\n );\n const columnRef = useRef<ColumnDescriptor>(column);\n const [inEditMode, setEditMode] = useState(column.name === \"::\");\n\n const handleEditCalculatedcolumn = useCallback(() => {\n columnRef.current = column;\n setEditMode(true);\n }, [column]);\n\n useEffect(() => {\n setColumn(columnProp);\n setEditMode(columnProp.name === \"::\");\n }, [columnProp]);\n\n const availableRenderers = useMemo(() => {\n return getAvailableCellRenderers(column);\n }, [column]);\n\n const handleInputCommit = useCallback(() => {\n onConfigChange(replaceColumn(tableConfig, column));\n }, [column, onConfigChange, tableConfig]);\n\n const handleChangeToggleButton = useCallback<FormEventHandler>(\n (evt) => {\n const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n if (button) {\n const fieldName = getFieldName(button);\n const { value } = button;\n switch (fieldName) {\n case \"column-alignment\":\n if (isValidColumnAlignment(value)) {\n const newColumn: ColumnDescriptor = {\n ...column,\n align: value || undefined,\n };\n setColumn(newColumn);\n onConfigChange(replaceColumn(tableConfig, newColumn));\n }\n break;\n case \"column-pin\":\n if (isValidPinLocation(value)) {\n const newColumn: ColumnDescriptor = {\n ...column,\n pin: value || undefined,\n };\n setColumn(newColumn);\n onConfigChange(replaceColumn(tableConfig, newColumn));\n\n break;\n }\n }\n }\n },\n [column, onConfigChange, tableConfig],\n );\n\n const handleChange = useCallback<FormEventHandler>((evt) => {\n const input = evt.target as HTMLInputElement;\n const fieldName = getFieldName(input);\n const { value } = input;\n switch (fieldName) {\n case \"column-label\":\n setColumn((state) => ({ ...state, label: value }));\n break;\n case \"column-name\":\n setColumn((state) => setCalculatedColumnName(state, value));\n break;\n case \"column-width\":\n setColumn((state) => ({ ...state, width: parseInt(value) }));\n break;\n }\n }, []);\n\n const handleChangeCalculatedColumnName = useCallback((name: string) => {\n setColumn((state) => ({ ...state, name }));\n }, []);\n\n const handleChangeFormatting = useCallback(\n (formatting: ColumnTypeFormatting) => {\n const newColumn = updateColumnFormatting(column, formatting);\n setColumn(newColumn);\n onConfigChange(replaceColumn(tableConfig, newColumn));\n },\n [column, onConfigChange, tableConfig],\n );\n\n const handleChangeType = useCallback(\n (type: DataValueTypeSimple) => {\n const updatedColumn = updateColumnType(column, type);\n setColumn(updatedColumn);\n onConfigChange(replaceColumn(tableConfig, updatedColumn));\n },\n [column, onConfigChange, tableConfig],\n );\n\n // Changing the server data type applies only to calculated columns\n const handleChangeServerDataType = useCallback(\n (serverDataType: VuuColumnDataType) => {\n setColumn((col) => ({ ...col, serverDataType }));\n },\n [],\n );\n\n const handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(\n (renderProps) => {\n if (renderProps) {\n const newColumn: ColumnDescriptor = updateColumnRenderProps(\n column,\n renderProps,\n );\n setColumn(newColumn);\n onConfigChange(replaceColumn(tableConfig, newColumn));\n }\n },\n [column, onConfigChange, tableConfig],\n );\n\n const navigateColumn = useCallback(\n ({ moveBy }: { moveBy: number }) => {\n const { columns } = tableConfig;\n const index = columns.indexOf(column) + moveBy;\n const newColumn = columns[index];\n if (newColumn) {\n setColumn(newColumn);\n }\n },\n [column, tableConfig],\n );\n const navigateNextColumn = useCallback(() => {\n navigateColumn({ moveBy: 1 });\n }, [navigateColumn]);\n\n const navigatePrevColumn = useCallback(() => {\n navigateColumn({ moveBy: -1 });\n }, [navigateColumn]);\n\n const handleSaveCalculatedColumn = useCallback(() => {\n // TODO validate expression, unique name\n onCreateCalculatedColumn(column);\n }, [column, onCreateCalculatedColumn]);\n\n const handleCancelEdit = useCallback(() => {\n if (columnProp.name === \"::\") {\n onCancelCreateColumn();\n } else {\n if (columnRef.current !== undefined && columnRef.current !== column) {\n setColumn(columnRef.current);\n }\n setEditMode(false);\n }\n }, [column, columnProp.name, onCancelCreateColumn]);\n\n return {\n availableRenderers,\n editCalculatedColumn: inEditMode,\n column,\n navigateNextColumn,\n navigatePrevColumn,\n onCancel: handleCancelEdit,\n onChange: handleChange,\n onChangeCalculatedColumnName: handleChangeCalculatedColumnName,\n onChangeFormatting: handleChangeFormatting,\n onChangeRendering: handleChangeRendering,\n onChangeServerDataType: handleChangeServerDataType,\n onChangeToggleButton: handleChangeToggleButton,\n onChangeType: handleChangeType,\n onEditCalculatedColumn: handleEditCalculatedcolumn,\n onInputCommit: handleInputCommit,\n onSave: handleSaveCalculatedColumn,\n };\n};\n"],"names":["getRegisteredCellRenderers","col","useState","useRef","useCallback","useEffect","useMemo","queryClosest","getFieldName","isValidColumnAlignment","isValidPinLocation","setCalculatedColumnName","name","updateColumnFormatting","updateColumnType","updateColumnRenderProps"],"mappings":"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"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
|
+
var TableSettingsPanel = require('./TableSettingsPanel.js');
|
|
7
|
+
|
|
8
|
+
const columnSettingsFromColumnMenuPermissions = (settings) => typeof settings === void 0 ? true : typeof settings === "boolean" ? settings : settings?.allowColumnSettings ?? true;
|
|
9
|
+
const tableSettingsFromColumnMenuPermissions = (settings) => typeof settings === void 0 ? TableSettingsPanel.defaultTableSettingsPermissions : typeof settings === "boolean" ? settings : settings?.allowTableSettings ?? TableSettingsPanel.defaultTableSettingsPermissions;
|
|
10
|
+
const useTableAndColumnSettings = ({
|
|
11
|
+
availableColumns: availableColumnsProps,
|
|
12
|
+
settingsPermissions,
|
|
13
|
+
onAvailableColumnsChange,
|
|
14
|
+
onConfigChange,
|
|
15
|
+
onCreateCalculatedColumn,
|
|
16
|
+
onDataSourceConfigChange,
|
|
17
|
+
tableConfig
|
|
18
|
+
}) => {
|
|
19
|
+
const showTableSettingsRef = react.useRef(void 0);
|
|
20
|
+
const [availableColumns, setAvailableColumns] = react.useState(
|
|
21
|
+
availableColumnsProps
|
|
22
|
+
);
|
|
23
|
+
const showContextPanel = vuuUiControls.useContextPanel();
|
|
24
|
+
const handleCancelCreateColumn = react.useCallback(() => {
|
|
25
|
+
requestAnimationFrame(() => {
|
|
26
|
+
showTableSettingsRef.current?.();
|
|
27
|
+
});
|
|
28
|
+
}, []);
|
|
29
|
+
const handleCreateCalculatedColumn = react.useCallback(
|
|
30
|
+
(column) => {
|
|
31
|
+
const { serverDataType } = vuuUtils.getCalculatedColumnDetails(column);
|
|
32
|
+
if (serverDataType) {
|
|
33
|
+
const newAvailableColumns = availableColumns.concat({
|
|
34
|
+
name: column.name,
|
|
35
|
+
serverDataType
|
|
36
|
+
});
|
|
37
|
+
setAvailableColumns(newAvailableColumns);
|
|
38
|
+
onAvailableColumnsChange?.(newAvailableColumns);
|
|
39
|
+
requestAnimationFrame(() => {
|
|
40
|
+
showTableSettingsRef.current?.();
|
|
41
|
+
});
|
|
42
|
+
onCreateCalculatedColumn(column);
|
|
43
|
+
} else {
|
|
44
|
+
throw Error(
|
|
45
|
+
"Cannot create calculatec columns without valis serverDataType"
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
[availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
|
|
50
|
+
);
|
|
51
|
+
const showColumnSettingsPanel = react.useCallback(
|
|
52
|
+
(action) => {
|
|
53
|
+
showContextPanel("ColumnSettings", "Column Settings", {
|
|
54
|
+
column: action.column,
|
|
55
|
+
onCancelCreateColumn: handleCancelCreateColumn,
|
|
56
|
+
onConfigChange,
|
|
57
|
+
onCreateCalculatedColumn: handleCreateCalculatedColumn,
|
|
58
|
+
tableConfig,
|
|
59
|
+
vuuTable: action.vuuTable
|
|
60
|
+
});
|
|
61
|
+
},
|
|
62
|
+
[
|
|
63
|
+
handleCancelCreateColumn,
|
|
64
|
+
handleCreateCalculatedColumn,
|
|
65
|
+
onConfigChange,
|
|
66
|
+
showContextPanel,
|
|
67
|
+
tableConfig
|
|
68
|
+
]
|
|
69
|
+
);
|
|
70
|
+
const handleAddCalculatedColumn = react.useCallback(() => {
|
|
71
|
+
showColumnSettingsPanel({
|
|
72
|
+
column: {
|
|
73
|
+
name: "::",
|
|
74
|
+
serverDataType: "string"
|
|
75
|
+
},
|
|
76
|
+
type: "column-settings",
|
|
77
|
+
vuuTable: { module: "SIMUL", table: "instruments" }
|
|
78
|
+
});
|
|
79
|
+
}, [showColumnSettingsPanel]);
|
|
80
|
+
const handleNavigateToColumn = react.useCallback(
|
|
81
|
+
(columnName) => {
|
|
82
|
+
const column = tableConfig.columns.find((c) => c.name === columnName);
|
|
83
|
+
if (column) {
|
|
84
|
+
showColumnSettingsPanel({
|
|
85
|
+
type: "column-settings",
|
|
86
|
+
column,
|
|
87
|
+
//TODO where do we get this from
|
|
88
|
+
vuuTable: { module: "SIMUL", table: "instruments" }
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
[showColumnSettingsPanel, tableConfig.columns]
|
|
93
|
+
);
|
|
94
|
+
showTableSettingsRef.current = react.useCallback(() => {
|
|
95
|
+
showContextPanel("TableSettings", "DataGrid Settings", {
|
|
96
|
+
availableColumns: availableColumns ?? tableConfig.columns.map(({ name, serverDataType }) => ({
|
|
97
|
+
name,
|
|
98
|
+
serverDataType
|
|
99
|
+
})),
|
|
100
|
+
onAddCalculatedColumn: handleAddCalculatedColumn,
|
|
101
|
+
onConfigChange,
|
|
102
|
+
onDataSourceConfigChange,
|
|
103
|
+
onNavigateToColumn: handleNavigateToColumn,
|
|
104
|
+
permissions: settingsPermissions?.allowTableSettings,
|
|
105
|
+
tableConfig
|
|
106
|
+
});
|
|
107
|
+
}, [
|
|
108
|
+
availableColumns,
|
|
109
|
+
handleAddCalculatedColumn,
|
|
110
|
+
handleNavigateToColumn,
|
|
111
|
+
onConfigChange,
|
|
112
|
+
onDataSourceConfigChange,
|
|
113
|
+
settingsPermissions,
|
|
114
|
+
showContextPanel,
|
|
115
|
+
tableConfig
|
|
116
|
+
]);
|
|
117
|
+
return {
|
|
118
|
+
showColumnSettingsPanel,
|
|
119
|
+
showTableSettingsPanel: showTableSettingsRef.current
|
|
120
|
+
};
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
exports.columnSettingsFromColumnMenuPermissions = columnSettingsFromColumnMenuPermissions;
|
|
124
|
+
exports.tableSettingsFromColumnMenuPermissions = tableSettingsFromColumnMenuPermissions;
|
|
125
|
+
exports.useTableAndColumnSettings = useTableAndColumnSettings;
|
|
126
|
+
//# sourceMappingURL=useTableAndColumnSettings.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableAndColumnSettings.js","sources":["../../src/table-column-settings/useTableAndColumnSettings.ts"],"sourcesContent":["import { DataSourceConfig, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n ColumnDescriptor,\n ColumnMenuPermissions,\n ColumnSettingsProps,\n SettingsPermissions,\n TableConfig,\n TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { DisplayColumnSettingsAction } from \"@vuu-ui/vuu-table-extras/src/column-menu/column-action-types\";\nimport { useContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { defaultTableSettingsPermissions } from \"./TableSettingsPanel\";\n\nexport interface TableAndColumnSettingsHookProps {\n availableColumns: SchemaColumn[];\n onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n onConfigChange: (config: TableConfig) => void;\n onCreateCalculatedColumn: (column: ColumnDescriptor) => void;\n onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;\n settingsPermissions?: SettingsPermissions;\n tableConfig: TableConfig;\n}\n\nexport const columnSettingsFromColumnMenuPermissions = (\n settings?: boolean | ColumnMenuPermissions,\n) =>\n typeof settings === undefined\n ? true\n : typeof settings === \"boolean\"\n ? settings\n : (settings?.allowColumnSettings ?? true);\nexport const tableSettingsFromColumnMenuPermissions = (\n settings?: boolean | ColumnMenuPermissions,\n) =>\n typeof settings === undefined\n ? defaultTableSettingsPermissions\n : typeof settings === \"boolean\"\n ? settings\n : (settings?.allowTableSettings ?? defaultTableSettingsPermissions);\n\nexport const useTableAndColumnSettings = ({\n availableColumns: availableColumnsProps,\n settingsPermissions,\n onAvailableColumnsChange,\n onConfigChange,\n onCreateCalculatedColumn,\n onDataSourceConfigChange,\n tableConfig,\n}: TableAndColumnSettingsHookProps) => {\n const showTableSettingsRef = useRef<() => void>(undefined);\n\n const [availableColumns, setAvailableColumns] = useState<SchemaColumn[]>(\n availableColumnsProps,\n );\n\n const showContextPanel = useContextPanel();\n\n const handleCancelCreateColumn = useCallback(() => {\n requestAnimationFrame(() => {\n showTableSettingsRef.current?.();\n });\n }, []);\n\n const handleCreateCalculatedColumn = useCallback(\n (column: ColumnDescriptor) => {\n const { serverDataType } = getCalculatedColumnDetails(column);\n if (serverDataType) {\n const newAvailableColumns = availableColumns.concat({\n name: column.name,\n serverDataType,\n });\n setAvailableColumns(newAvailableColumns);\n onAvailableColumnsChange?.(newAvailableColumns);\n requestAnimationFrame(() => {\n showTableSettingsRef.current?.();\n });\n onCreateCalculatedColumn(column);\n } else {\n throw Error(\n \"Cannot create calculatec columns without valis serverDataType\",\n );\n }\n },\n [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn],\n );\n\n const showColumnSettingsPanel = useCallback(\n (action: DisplayColumnSettingsAction) => {\n showContextPanel(\"ColumnSettings\", \"Column Settings\", {\n column: action.column,\n onCancelCreateColumn: handleCancelCreateColumn,\n onConfigChange,\n onCreateCalculatedColumn: handleCreateCalculatedColumn,\n tableConfig,\n vuuTable: action.vuuTable,\n } as ColumnSettingsProps);\n },\n [\n handleCancelCreateColumn,\n handleCreateCalculatedColumn,\n onConfigChange,\n showContextPanel,\n tableConfig,\n ],\n );\n\n const handleAddCalculatedColumn = useCallback(() => {\n showColumnSettingsPanel({\n column: {\n name: \"::\",\n serverDataType: \"string\",\n },\n type: \"column-settings\",\n vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n });\n }, [showColumnSettingsPanel]);\n\n const handleNavigateToColumn = useCallback(\n (columnName: string) => {\n const column = tableConfig.columns.find((c) => c.name === columnName);\n if (column) {\n showColumnSettingsPanel({\n type: \"column-settings\",\n column,\n //TODO where do we get this from\n vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n });\n }\n },\n [showColumnSettingsPanel, tableConfig.columns],\n );\n\n showTableSettingsRef.current = useCallback(() => {\n showContextPanel(\"TableSettings\", \"DataGrid Settings\", {\n availableColumns:\n availableColumns ??\n tableConfig.columns.map(({ name, serverDataType }) => ({\n name,\n serverDataType,\n })),\n onAddCalculatedColumn: handleAddCalculatedColumn,\n onConfigChange,\n onDataSourceConfigChange,\n onNavigateToColumn: handleNavigateToColumn,\n permissions: settingsPermissions?.allowTableSettings,\n tableConfig,\n } as TableSettingsProps);\n }, [\n availableColumns,\n handleAddCalculatedColumn,\n handleNavigateToColumn,\n onConfigChange,\n onDataSourceConfigChange,\n settingsPermissions,\n showContextPanel,\n tableConfig,\n ]);\n\n return {\n showColumnSettingsPanel,\n showTableSettingsPanel: showTableSettingsRef.current,\n };\n};\n"],"names":["defaultTableSettingsPermissions","useRef","useState","useContextPanel","useCallback","getCalculatedColumnDetails"],"mappings":"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"}
|
|
@@ -0,0 +1,172 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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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"}
|
|
@@ -0,0 +1,48 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;;;"}
|