@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.
Files changed (217) hide show
  1. package/cjs/cell-edit-validators/CaseValidator.js +25 -0
  2. package/cjs/cell-edit-validators/CaseValidator.js.map +1 -0
  3. package/cjs/cell-edit-validators/PatternValidator.js +31 -0
  4. package/cjs/cell-edit-validators/PatternValidator.js.map +1 -0
  5. package/cjs/cell-renderers/background-cell/BackgroundCell.css.js +6 -0
  6. package/cjs/cell-renderers/background-cell/BackgroundCell.css.js.map +1 -0
  7. package/cjs/cell-renderers/background-cell/BackgroundCell.js +76 -0
  8. package/cjs/cell-renderers/background-cell/BackgroundCell.js.map +1 -0
  9. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +6 -0
  10. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +1 -0
  11. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +67 -0
  12. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +1 -0
  13. package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js +6 -0
  14. package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +1 -0
  15. package/cjs/cell-renderers/background-cell/useDirection.js +20 -0
  16. package/cjs/cell-renderers/background-cell/useDirection.js.map +1 -0
  17. package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js +6 -0
  18. package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js.map +1 -0
  19. package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +94 -0
  20. package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -0
  21. package/cjs/cell-renderers/lookup-cell/LookupCell.js +23 -0
  22. package/cjs/cell-renderers/lookup-cell/LookupCell.js.map +1 -0
  23. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js +6 -0
  24. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +1 -0
  25. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js +62 -0
  26. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js.map +1 -0
  27. package/cjs/cell-renderers/progress-cell/ProgressCell.css.js +6 -0
  28. package/cjs/cell-renderers/progress-cell/ProgressCell.css.js.map +1 -0
  29. package/cjs/cell-renderers/progress-cell/ProgressCell.js +69 -0
  30. package/cjs/cell-renderers/progress-cell/ProgressCell.js.map +1 -0
  31. package/cjs/column-expression-input/ColumnExpressionInput.css.js +6 -0
  32. package/cjs/column-expression-input/ColumnExpressionInput.css.js.map +1 -0
  33. package/cjs/column-expression-input/ColumnExpressionInput.js +39 -0
  34. package/cjs/column-expression-input/ColumnExpressionInput.js.map +1 -0
  35. package/cjs/column-expression-input/column-function-descriptors.js +307 -0
  36. package/cjs/column-expression-input/column-function-descriptors.js.map +1 -0
  37. package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +28 -0
  38. package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +1 -0
  39. package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +465 -0
  40. package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +1 -0
  41. package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js +61 -0
  42. package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +1 -0
  43. package/cjs/column-expression-input/column-language-parser/generated/column-parser.js +21 -0
  44. package/cjs/column-expression-input/column-language-parser/generated/column-parser.js.map +1 -0
  45. package/cjs/column-expression-input/functionDocInfo.js +39 -0
  46. package/cjs/column-expression-input/functionDocInfo.js.map +1 -0
  47. package/cjs/column-expression-input/highlighting.js +16 -0
  48. package/cjs/column-expression-input/highlighting.js.map +1 -0
  49. package/cjs/column-expression-input/theme.js +63 -0
  50. package/cjs/column-expression-input/theme.js.map +1 -0
  51. package/cjs/column-expression-input/useColumnAutoComplete.js +358 -0
  52. package/cjs/column-expression-input/useColumnAutoComplete.js.map +1 -0
  53. package/cjs/column-expression-input/useColumnExpressionEditor.js +131 -0
  54. package/cjs/column-expression-input/useColumnExpressionEditor.js.map +1 -0
  55. package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js +213 -0
  56. package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js.map +1 -0
  57. package/cjs/column-expression-panel/ColumnExpressionPanel.js +85 -0
  58. package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +1 -0
  59. package/cjs/column-expression-panel/useColumnExpression.js +69 -0
  60. package/cjs/column-expression-panel/useColumnExpression.js.map +1 -0
  61. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +97 -0
  62. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -0
  63. package/cjs/column-formatting-settings/ColumnFormattingPanel.js +104 -0
  64. package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +1 -0
  65. package/cjs/column-formatting-settings/DateTimeFormattingSettings.js +99 -0
  66. package/cjs/column-formatting-settings/DateTimeFormattingSettings.js.map +1 -0
  67. package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js +6 -0
  68. package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js.map +1 -0
  69. package/cjs/column-formatting-settings/LongTypeFormattingSettings.js +49 -0
  70. package/cjs/column-formatting-settings/LongTypeFormattingSettings.js.map +1 -0
  71. package/cjs/column-list/ColumnList.css.js +6 -0
  72. package/cjs/column-list/ColumnList.css.js.map +1 -0
  73. package/cjs/column-list/ColumnList.js +172 -0
  74. package/cjs/column-list/ColumnList.js.map +1 -0
  75. package/cjs/column-menu/ColumnMenu.css.js +6 -0
  76. package/cjs/column-menu/ColumnMenu.css.js.map +1 -0
  77. package/cjs/column-menu/ColumnMenu.js +116 -0
  78. package/cjs/column-menu/ColumnMenu.js.map +1 -0
  79. package/cjs/column-menu/column-menu-utils.js +489 -0
  80. package/cjs/column-menu/column-menu-utils.js.map +1 -0
  81. package/cjs/column-menu/useColumnActions.js +75 -0
  82. package/cjs/column-menu/useColumnActions.js.map +1 -0
  83. package/cjs/datasource-stats/DatasourceStats.css.js +6 -0
  84. package/cjs/datasource-stats/DatasourceStats.css.js.map +1 -0
  85. package/cjs/datasource-stats/DatasourceStats.js +52 -0
  86. package/cjs/datasource-stats/DatasourceStats.js.map +1 -0
  87. package/cjs/index.js +65 -4254
  88. package/cjs/index.js.map +1 -1
  89. package/cjs/table-column-settings/ColumnNameLabel.css.js +6 -0
  90. package/cjs/table-column-settings/ColumnNameLabel.css.js.map +1 -0
  91. package/cjs/table-column-settings/ColumnNameLabel.js +45 -0
  92. package/cjs/table-column-settings/ColumnNameLabel.js.map +1 -0
  93. package/cjs/table-column-settings/ColumnSettingsPanel.css.js +6 -0
  94. package/cjs/table-column-settings/ColumnSettingsPanel.css.js.map +1 -0
  95. package/cjs/table-column-settings/ColumnSettingsPanel.js +202 -0
  96. package/cjs/table-column-settings/ColumnSettingsPanel.js.map +1 -0
  97. package/cjs/table-column-settings/TableSettingsPanel.css.js +6 -0
  98. package/cjs/table-column-settings/TableSettingsPanel.css.js.map +1 -0
  99. package/cjs/table-column-settings/TableSettingsPanel.js +139 -0
  100. package/cjs/table-column-settings/TableSettingsPanel.js.map +1 -0
  101. package/cjs/table-column-settings/useColumnSettings.js +224 -0
  102. package/cjs/table-column-settings/useColumnSettings.js.map +1 -0
  103. package/cjs/table-column-settings/useTableAndColumnSettings.js +126 -0
  104. package/cjs/table-column-settings/useTableAndColumnSettings.js.map +1 -0
  105. package/cjs/table-column-settings/useTableSettings.js +172 -0
  106. package/cjs/table-column-settings/useTableSettings.js.map +1 -0
  107. package/cjs/table-provider/TableProvider.js +48 -0
  108. package/cjs/table-provider/TableProvider.js.map +1 -0
  109. package/esm/cell-edit-validators/CaseValidator.js +23 -0
  110. package/esm/cell-edit-validators/CaseValidator.js.map +1 -0
  111. package/esm/cell-edit-validators/PatternValidator.js +29 -0
  112. package/esm/cell-edit-validators/PatternValidator.js.map +1 -0
  113. package/esm/cell-renderers/background-cell/BackgroundCell.css.js +4 -0
  114. package/esm/cell-renderers/background-cell/BackgroundCell.css.js.map +1 -0
  115. package/esm/cell-renderers/background-cell/BackgroundCell.js +74 -0
  116. package/esm/cell-renderers/background-cell/BackgroundCell.js.map +1 -0
  117. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +4 -0
  118. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +1 -0
  119. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +65 -0
  120. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +1 -0
  121. package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js +4 -0
  122. package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +1 -0
  123. package/esm/cell-renderers/background-cell/useDirection.js +18 -0
  124. package/esm/cell-renderers/background-cell/useDirection.js.map +1 -0
  125. package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js +4 -0
  126. package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js.map +1 -0
  127. package/esm/cell-renderers/dropdown-cell/DropdownCell.js +92 -0
  128. package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -0
  129. package/esm/cell-renderers/lookup-cell/LookupCell.js +21 -0
  130. package/esm/cell-renderers/lookup-cell/LookupCell.js.map +1 -0
  131. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js +4 -0
  132. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +1 -0
  133. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js +60 -0
  134. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js.map +1 -0
  135. package/esm/cell-renderers/progress-cell/ProgressCell.css.js +4 -0
  136. package/esm/cell-renderers/progress-cell/ProgressCell.css.js.map +1 -0
  137. package/esm/cell-renderers/progress-cell/ProgressCell.js +67 -0
  138. package/esm/cell-renderers/progress-cell/ProgressCell.js.map +1 -0
  139. package/esm/column-expression-input/ColumnExpressionInput.css.js +4 -0
  140. package/esm/column-expression-input/ColumnExpressionInput.css.js.map +1 -0
  141. package/esm/column-expression-input/ColumnExpressionInput.js +37 -0
  142. package/esm/column-expression-input/ColumnExpressionInput.js.map +1 -0
  143. package/esm/column-expression-input/column-function-descriptors.js +305 -0
  144. package/esm/column-expression-input/column-function-descriptors.js.map +1 -0
  145. package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +26 -0
  146. package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +1 -0
  147. package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +463 -0
  148. package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +1 -0
  149. package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js +56 -0
  150. package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +1 -0
  151. package/esm/column-expression-input/column-language-parser/generated/column-parser.js +19 -0
  152. package/esm/column-expression-input/column-language-parser/generated/column-parser.js.map +1 -0
  153. package/esm/column-expression-input/functionDocInfo.js +37 -0
  154. package/esm/column-expression-input/functionDocInfo.js.map +1 -0
  155. package/esm/column-expression-input/highlighting.js +14 -0
  156. package/esm/column-expression-input/highlighting.js.map +1 -0
  157. package/esm/column-expression-input/theme.js +61 -0
  158. package/esm/column-expression-input/theme.js.map +1 -0
  159. package/esm/column-expression-input/useColumnAutoComplete.js +356 -0
  160. package/esm/column-expression-input/useColumnAutoComplete.js.map +1 -0
  161. package/esm/column-expression-input/useColumnExpressionEditor.js +129 -0
  162. package/esm/column-expression-input/useColumnExpressionEditor.js.map +1 -0
  163. package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js +211 -0
  164. package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js.map +1 -0
  165. package/esm/column-expression-panel/ColumnExpressionPanel.js +83 -0
  166. package/esm/column-expression-panel/ColumnExpressionPanel.js.map +1 -0
  167. package/esm/column-expression-panel/useColumnExpression.js +67 -0
  168. package/esm/column-expression-panel/useColumnExpression.js.map +1 -0
  169. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +95 -0
  170. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -0
  171. package/esm/column-formatting-settings/ColumnFormattingPanel.js +102 -0
  172. package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +1 -0
  173. package/esm/column-formatting-settings/DateTimeFormattingSettings.js +97 -0
  174. package/esm/column-formatting-settings/DateTimeFormattingSettings.js.map +1 -0
  175. package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js +4 -0
  176. package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js.map +1 -0
  177. package/esm/column-formatting-settings/LongTypeFormattingSettings.js +47 -0
  178. package/esm/column-formatting-settings/LongTypeFormattingSettings.js.map +1 -0
  179. package/esm/column-list/ColumnList.css.js +4 -0
  180. package/esm/column-list/ColumnList.css.js.map +1 -0
  181. package/esm/column-list/ColumnList.js +170 -0
  182. package/esm/column-list/ColumnList.js.map +1 -0
  183. package/esm/column-menu/ColumnMenu.css.js +4 -0
  184. package/esm/column-menu/ColumnMenu.css.js.map +1 -0
  185. package/esm/column-menu/ColumnMenu.js +114 -0
  186. package/esm/column-menu/ColumnMenu.js.map +1 -0
  187. package/esm/column-menu/column-menu-utils.js +480 -0
  188. package/esm/column-menu/column-menu-utils.js.map +1 -0
  189. package/esm/column-menu/useColumnActions.js +73 -0
  190. package/esm/column-menu/useColumnActions.js.map +1 -0
  191. package/esm/datasource-stats/DatasourceStats.css.js +4 -0
  192. package/esm/datasource-stats/DatasourceStats.css.js.map +1 -0
  193. package/esm/datasource-stats/DatasourceStats.js +50 -0
  194. package/esm/datasource-stats/DatasourceStats.js.map +1 -0
  195. package/esm/index.js +28 -4221
  196. package/esm/index.js.map +1 -1
  197. package/esm/table-column-settings/ColumnNameLabel.css.js +4 -0
  198. package/esm/table-column-settings/ColumnNameLabel.css.js.map +1 -0
  199. package/esm/table-column-settings/ColumnNameLabel.js +43 -0
  200. package/esm/table-column-settings/ColumnNameLabel.js.map +1 -0
  201. package/esm/table-column-settings/ColumnSettingsPanel.css.js +4 -0
  202. package/esm/table-column-settings/ColumnSettingsPanel.css.js.map +1 -0
  203. package/esm/table-column-settings/ColumnSettingsPanel.js +200 -0
  204. package/esm/table-column-settings/ColumnSettingsPanel.js.map +1 -0
  205. package/esm/table-column-settings/TableSettingsPanel.css.js +4 -0
  206. package/esm/table-column-settings/TableSettingsPanel.css.js.map +1 -0
  207. package/esm/table-column-settings/TableSettingsPanel.js +136 -0
  208. package/esm/table-column-settings/TableSettingsPanel.js.map +1 -0
  209. package/esm/table-column-settings/useColumnSettings.js +222 -0
  210. package/esm/table-column-settings/useColumnSettings.js.map +1 -0
  211. package/esm/table-column-settings/useTableAndColumnSettings.js +122 -0
  212. package/esm/table-column-settings/useTableAndColumnSettings.js.map +1 -0
  213. package/esm/table-column-settings/useTableSettings.js +170 -0
  214. package/esm/table-column-settings/useTableSettings.js.map +1 -0
  215. package/esm/table-provider/TableProvider.js +44 -0
  216. package/esm/table-provider/TableProvider.js.map +1 -0
  217. 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;;;;;;"}