@vuu-ui/vuu-table-extras 1.0.3 → 2.0.0-alpha.1

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 (187) hide show
  1. package/cjs/{column-expression-panel/ColumnExpressionPanel.js → calculated-column/CalculatedColumnPanel.js} +13 -13
  2. package/cjs/calculated-column/CalculatedColumnPanel.js.map +1 -0
  3. package/cjs/{column-expression-panel/useColumnExpression.js → calculated-column/useCalculatedColumnPanel.js} +12 -10
  4. package/cjs/calculated-column/useCalculatedColumnPanel.js.map +1 -0
  5. package/cjs/calculated-column/useEditCalculatedColumn.js +138 -0
  6. package/cjs/calculated-column/useEditCalculatedColumn.js.map +1 -0
  7. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +1 -0
  8. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -1
  9. package/cjs/column-formatting-settings/ColumnFormattingPanel.js +1 -0
  10. package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +1 -1
  11. package/cjs/column-menu/ColumnMenu.js +2 -3
  12. package/cjs/column-menu/ColumnMenu.js.map +1 -1
  13. package/cjs/column-menu/column-menu-utils.js +3 -18
  14. package/cjs/column-menu/column-menu-utils.js.map +1 -1
  15. package/cjs/column-menu/useColumnActions.js +0 -2
  16. package/cjs/column-menu/useColumnActions.js.map +1 -1
  17. package/cjs/column-picker/ColumnModel.js +58 -0
  18. package/cjs/column-picker/ColumnModel.js.map +1 -1
  19. package/cjs/column-picker/ColumnPicker.css.js +1 -1
  20. package/cjs/column-picker/ColumnPicker.js +37 -14
  21. package/cjs/column-picker/ColumnPicker.js.map +1 -1
  22. package/cjs/column-picker/ColumnPickerAction.js +34 -0
  23. package/cjs/column-picker/ColumnPickerAction.js.map +1 -0
  24. package/cjs/column-picker/useColumnPicker.js +2 -1
  25. package/cjs/column-picker/useColumnPicker.js.map +1 -1
  26. package/cjs/column-picker/useTableColumnPicker.js +35 -0
  27. package/cjs/column-picker/useTableColumnPicker.js.map +1 -0
  28. package/cjs/column-settings-panel/ColumnNameLabel.js.map +1 -0
  29. package/cjs/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js +1 -1
  30. package/cjs/column-settings-panel/ColumnSettingsPanel.js +161 -0
  31. package/cjs/column-settings-panel/ColumnSettingsPanel.js.map +1 -0
  32. package/cjs/{table-column-settings → column-settings-panel}/useColumnSettings.js +42 -79
  33. package/cjs/column-settings-panel/useColumnSettings.js.map +1 -0
  34. package/cjs/column-settings-panel/useTableAndColumnSettings.js +37 -0
  35. package/cjs/column-settings-panel/useTableAndColumnSettings.js.map +1 -0
  36. package/cjs/datasource-stats/DatasourceStats.css.js +1 -1
  37. package/cjs/index.js +22 -17
  38. package/cjs/index.js.map +1 -1
  39. package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.css.js +6 -0
  40. package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.css.js.map +1 -0
  41. package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.js +90 -0
  42. package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.js.map +1 -0
  43. package/cjs/tabbed-table-config-panel/TabbedTableSettingsAction.js +44 -0
  44. package/cjs/tabbed-table-config-panel/TabbedTableSettingsAction.js.map +1 -0
  45. package/cjs/tabbed-table-config-panel/useTabbedTableConfigPanel.js +49 -0
  46. package/cjs/tabbed-table-config-panel/useTabbedTableConfigPanel.js.map +1 -0
  47. package/cjs/table-footer/TableFooter.css.js +6 -0
  48. package/cjs/table-footer/TableFooter.css.js.map +1 -0
  49. package/cjs/table-footer/TableFooter.js +47 -0
  50. package/cjs/table-footer/TableFooter.js.map +1 -0
  51. package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js +1 -1
  52. package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.js +12 -47
  53. package/cjs/table-settings-panel/TableSettingsPanel.js.map +1 -0
  54. package/cjs/table-settings-panel/useTableSettings.js +60 -0
  55. package/cjs/table-settings-panel/useTableSettings.js.map +1 -0
  56. package/esm/{column-expression-panel/ColumnExpressionPanel.js → calculated-column/CalculatedColumnPanel.js} +13 -13
  57. package/esm/calculated-column/CalculatedColumnPanel.js.map +1 -0
  58. package/esm/{column-expression-panel/useColumnExpression.js → calculated-column/useCalculatedColumnPanel.js} +12 -10
  59. package/esm/calculated-column/useCalculatedColumnPanel.js.map +1 -0
  60. package/esm/calculated-column/useEditCalculatedColumn.js +136 -0
  61. package/esm/calculated-column/useEditCalculatedColumn.js.map +1 -0
  62. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +1 -0
  63. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -1
  64. package/esm/column-formatting-settings/ColumnFormattingPanel.js +1 -0
  65. package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +1 -1
  66. package/esm/column-menu/ColumnMenu.js +2 -3
  67. package/esm/column-menu/ColumnMenu.js.map +1 -1
  68. package/esm/column-menu/column-menu-utils.js +3 -18
  69. package/esm/column-menu/column-menu-utils.js.map +1 -1
  70. package/esm/column-menu/useColumnActions.js +0 -2
  71. package/esm/column-menu/useColumnActions.js.map +1 -1
  72. package/esm/column-picker/ColumnModel.js +58 -0
  73. package/esm/column-picker/ColumnModel.js.map +1 -1
  74. package/esm/column-picker/ColumnPicker.css.js +1 -1
  75. package/esm/column-picker/ColumnPicker.js +39 -16
  76. package/esm/column-picker/ColumnPicker.js.map +1 -1
  77. package/esm/column-picker/ColumnPickerAction.js +32 -0
  78. package/esm/column-picker/ColumnPickerAction.js.map +1 -0
  79. package/esm/column-picker/useColumnPicker.js +2 -1
  80. package/esm/column-picker/useColumnPicker.js.map +1 -1
  81. package/esm/column-picker/useTableColumnPicker.js +33 -0
  82. package/esm/column-picker/useTableColumnPicker.js.map +1 -0
  83. package/esm/column-settings-panel/ColumnNameLabel.js.map +1 -0
  84. package/esm/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js +1 -1
  85. package/esm/column-settings-panel/ColumnSettingsPanel.js +159 -0
  86. package/esm/column-settings-panel/ColumnSettingsPanel.js.map +1 -0
  87. package/esm/{table-column-settings → column-settings-panel}/useColumnSettings.js +44 -81
  88. package/esm/column-settings-panel/useColumnSettings.js.map +1 -0
  89. package/esm/column-settings-panel/useTableAndColumnSettings.js +33 -0
  90. package/esm/column-settings-panel/useTableAndColumnSettings.js.map +1 -0
  91. package/esm/datasource-stats/DatasourceStats.css.js +1 -1
  92. package/esm/index.js +10 -7
  93. package/esm/index.js.map +1 -1
  94. package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js +4 -0
  95. package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js.map +1 -0
  96. package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.js +88 -0
  97. package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.js.map +1 -0
  98. package/esm/tabbed-table-config-panel/TabbedTableSettingsAction.js +42 -0
  99. package/esm/tabbed-table-config-panel/TabbedTableSettingsAction.js.map +1 -0
  100. package/esm/tabbed-table-config-panel/useTabbedTableConfigPanel.js +47 -0
  101. package/esm/tabbed-table-config-panel/useTabbedTableConfigPanel.js.map +1 -0
  102. package/esm/table-footer/TableFooter.css.js +4 -0
  103. package/esm/table-footer/TableFooter.css.js.map +1 -0
  104. package/esm/table-footer/TableFooter.js +44 -0
  105. package/esm/table-footer/TableFooter.js.map +1 -0
  106. package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js +1 -1
  107. package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.js +13 -48
  108. package/esm/table-settings-panel/TableSettingsPanel.js.map +1 -0
  109. package/esm/table-settings-panel/useTableSettings.js +58 -0
  110. package/esm/table-settings-panel/useTableSettings.js.map +1 -0
  111. package/package.json +12 -11
  112. package/types/calculated-column/CalculatedColumnPanel.d.ts +12 -0
  113. package/types/calculated-column/useCalculatedColumnPanel.d.ts +10 -0
  114. package/types/calculated-column/useEditCalculatedColumn.d.ts +13 -0
  115. package/types/column-menu/column-action-types.d.ts +1 -4
  116. package/types/column-menu/column-menu-utils.d.ts +4 -4
  117. package/types/column-picker/ColumnModel.d.ts +26 -3
  118. package/types/column-picker/ColumnPicker.d.ts +7 -3
  119. package/types/column-picker/ColumnPickerAction.d.ts +5 -0
  120. package/types/column-picker/useColumnPicker.d.ts +5 -4
  121. package/types/column-picker/useTableColumnPicker.d.ts +7 -0
  122. package/types/column-picker/useTableColumnPickerDeprecated.d.ts +14 -0
  123. package/types/{table-column-settings → column-settings-panel}/ColumnNameLabel.d.ts +1 -1
  124. package/types/column-settings-panel/ColumnSettingsPanel.d.ts +5 -0
  125. package/types/{table-column-settings → column-settings-panel}/useColumnSettings.d.ts +14 -7
  126. package/types/column-settings-panel/useTableAndColumnSettings.d.ts +13 -0
  127. package/types/index.d.ts +11 -9
  128. package/types/tabbed-table-config-panel/TabbedTableConfigPanel.d.ts +17 -0
  129. package/types/tabbed-table-config-panel/TabbedTableSettingsAction.d.ts +7 -0
  130. package/types/tabbed-table-config-panel/useTabbedTableConfigPanel.d.ts +13 -0
  131. package/types/table-footer/TableFooter.d.ts +9 -0
  132. package/types/table-settings-panel/TableSettingsPanel.d.ts +22 -0
  133. package/types/table-settings-panel/useTableSettings.d.ts +14 -0
  134. package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
  135. package/cjs/column-expression-panel/useColumnExpression.js.map +0 -1
  136. package/cjs/column-list/ColumnList.css.js +0 -6
  137. package/cjs/column-list/ColumnList.css.js.map +0 -1
  138. package/cjs/column-list/ColumnList.js +0 -218
  139. package/cjs/column-list/ColumnList.js.map +0 -1
  140. package/cjs/column-list/useColumnList.js +0 -66
  141. package/cjs/column-list/useColumnList.js.map +0 -1
  142. package/cjs/table-column-settings/ColumnNameLabel.js.map +0 -1
  143. package/cjs/table-column-settings/ColumnSettingsPanel.js +0 -202
  144. package/cjs/table-column-settings/ColumnSettingsPanel.js.map +0 -1
  145. package/cjs/table-column-settings/TableSettingsPanel.js.map +0 -1
  146. package/cjs/table-column-settings/useColumnSettings.js.map +0 -1
  147. package/cjs/table-column-settings/useTableAndColumnSettings.js +0 -129
  148. package/cjs/table-column-settings/useTableAndColumnSettings.js.map +0 -1
  149. package/cjs/table-column-settings/useTableSettings.js +0 -176
  150. package/cjs/table-column-settings/useTableSettings.js.map +0 -1
  151. package/esm/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
  152. package/esm/column-expression-panel/useColumnExpression.js.map +0 -1
  153. package/esm/column-list/ColumnList.css.js +0 -4
  154. package/esm/column-list/ColumnList.css.js.map +0 -1
  155. package/esm/column-list/ColumnList.js +0 -214
  156. package/esm/column-list/ColumnList.js.map +0 -1
  157. package/esm/column-list/useColumnList.js +0 -64
  158. package/esm/column-list/useColumnList.js.map +0 -1
  159. package/esm/table-column-settings/ColumnNameLabel.js.map +0 -1
  160. package/esm/table-column-settings/ColumnSettingsPanel.js +0 -200
  161. package/esm/table-column-settings/ColumnSettingsPanel.js.map +0 -1
  162. package/esm/table-column-settings/TableSettingsPanel.js.map +0 -1
  163. package/esm/table-column-settings/useColumnSettings.js.map +0 -1
  164. package/esm/table-column-settings/useTableAndColumnSettings.js +0 -125
  165. package/esm/table-column-settings/useTableAndColumnSettings.js.map +0 -1
  166. package/esm/table-column-settings/useTableSettings.js +0 -174
  167. package/esm/table-column-settings/useTableSettings.js.map +0 -1
  168. package/types/column-expression-panel/ColumnExpressionPanel.d.ts +0 -13
  169. package/types/column-expression-panel/index.d.ts +0 -1
  170. package/types/column-expression-panel/useColumnExpression.d.ts +0 -10
  171. package/types/column-list/ColumnList.d.ts +0 -11
  172. package/types/column-list/index.d.ts +0 -2
  173. package/types/column-list/useColumnList.d.ts +0 -22
  174. package/types/table-column-settings/ColumnSettingsPanel.d.ts +0 -2
  175. package/types/table-column-settings/TableSettingsPanel.d.ts +0 -9
  176. package/types/table-column-settings/useTableAndColumnSettings.d.ts +0 -18
  177. package/types/table-column-settings/useTableSettings.d.ts +0 -18
  178. /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js +0 -0
  179. /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js.map +0 -0
  180. /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.js +0 -0
  181. /package/cjs/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js.map +0 -0
  182. /package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js.map +0 -0
  183. /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js +0 -0
  184. /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js.map +0 -0
  185. /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.js +0 -0
  186. /package/esm/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js.map +0 -0
  187. /package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js.map +0 -0
@@ -1,174 +0,0 @@
1
- import { updateTableConfig } from '@vuu-ui/vuu-table';
2
- import { reorderColumnItems, subscribedOnly, addColumnToSubscribedColumns, queryClosest, useLayoutEffectSkipFirst, isCalculatedColumn } from '@vuu-ui/vuu-utils';
3
- import { useState, useMemo, useCallback } from 'react';
4
-
5
- const buildColumnItems = (availableColumns, configuredColumns) => {
6
- return availableColumns.map(
7
- ({ name, label = name, serverDataType }) => {
8
- const configuredColumn = configuredColumns.find(
9
- (col) => col.name === name
10
- );
11
- return {
12
- hidden: configuredColumn?.hidden,
13
- isCalculated: isCalculatedColumn(name),
14
- label: configuredColumn?.label ?? label,
15
- name,
16
- serverDataType,
17
- subscribed: configuredColumn !== void 0
18
- };
19
- }
20
- );
21
- };
22
- const useTableSettings = ({
23
- availableColumns: availableColumnsProp,
24
- onConfigChange,
25
- onDataSourceConfigChange,
26
- tableConfig: tableConfigProp
27
- }) => {
28
- const [{ availableColumns, tableConfig }, setColumnState] = useState({
29
- availableColumns: availableColumnsProp,
30
- tableConfig: tableConfigProp
31
- });
32
- const columnItems = useMemo(
33
- () => buildColumnItems(availableColumns, tableConfig.columns),
34
- [availableColumns, tableConfig.columns]
35
- );
36
- const handleReorderColumnItems = useCallback(
37
- (columnItems2) => {
38
- const orderedNames = columnItems2.map((c) => c.name);
39
- setColumnState((state) => {
40
- const newAvailableColumns = reorderColumnItems(
41
- state.availableColumns,
42
- orderedNames
43
- );
44
- const newColumns = reorderColumnItems(
45
- tableConfig.columns,
46
- orderedNames
47
- );
48
- return {
49
- availableColumns: newAvailableColumns,
50
- tableConfig: {
51
- ...state.tableConfig,
52
- columns: newColumns
53
- }
54
- };
55
- });
56
- },
57
- [tableConfig.columns]
58
- );
59
- const handleColumnChange = useCallback(
60
- (name, property, value) => {
61
- const columnItem = columnItems.find((col) => col.name === name);
62
- if (property === "subscribed") {
63
- if (columnItem?.subscribed) {
64
- const subscribedColumns = tableConfig.columns.filter((col) => col.name !== name).map((col) => col.name);
65
- setColumnState((state) => ({
66
- ...state,
67
- tableConfig: {
68
- ...tableConfig,
69
- columns: tableConfig.columns.filter(
70
- subscribedOnly(subscribedColumns)
71
- )
72
- }
73
- }));
74
- onDataSourceConfigChange({
75
- columns: subscribedColumns
76
- });
77
- } else {
78
- const newConfig = {
79
- ...tableConfig,
80
- columns: addColumnToSubscribedColumns(
81
- tableConfig.columns,
82
- availableColumns,
83
- name
84
- )
85
- };
86
- setColumnState((state) => ({
87
- ...state,
88
- tableConfig: newConfig
89
- }));
90
- const subscribedColumns = newConfig.columns.map((col) => col.name);
91
- onDataSourceConfigChange({
92
- columns: subscribedColumns
93
- });
94
- }
95
- } else if (columnItem?.subscribed) {
96
- const column = tableConfig.columns.find((col) => col.name === name);
97
- if (column) {
98
- const newConfig = updateTableConfig(tableConfig, {
99
- type: "column-prop",
100
- property,
101
- column,
102
- value
103
- });
104
- setColumnState((state) => ({
105
- ...state,
106
- tableConfig: newConfig
107
- }));
108
- }
109
- }
110
- },
111
- [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
112
- );
113
- const handleChangeColumnLabels = useCallback((evt) => {
114
- const button = queryClosest(evt.target, "button");
115
- if (button) {
116
- const value = parseInt(button.value);
117
- const columnFormatHeader = value === 0 ? void 0 : value === 1 ? "capitalize" : "uppercase";
118
- setColumnState((state) => ({
119
- ...state,
120
- tableConfig: {
121
- ...state.tableConfig,
122
- columnFormatHeader
123
- }
124
- }));
125
- }
126
- }, []);
127
- const handleChangeTableAttribute = useCallback(
128
- (evt) => {
129
- const button = queryClosest(evt.target, "button");
130
- if (button) {
131
- const { ariaPressed, value } = button;
132
- setColumnState((state) => ({
133
- ...state,
134
- tableConfig: {
135
- ...state.tableConfig,
136
- [value]: ariaPressed !== "true"
137
- }
138
- }));
139
- }
140
- },
141
- []
142
- );
143
- const handleCommitColumnWidth = useCallback((_, value) => {
144
- if (typeof value === "string") {
145
- const columnDefaultWidth = parseInt(value);
146
- if (!isNaN(columnDefaultWidth)) {
147
- setColumnState((state) => ({
148
- ...state,
149
- tableConfig: {
150
- ...state.tableConfig,
151
- columnDefaultWidth
152
- }
153
- }));
154
- }
155
- }
156
- }, []);
157
- useLayoutEffectSkipFirst(() => {
158
- onConfigChange?.(tableConfig);
159
- }, [onConfigChange, tableConfig]);
160
- const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
161
- return {
162
- columnItems,
163
- columnLabelsValue,
164
- onChangeColumnLabels: handleChangeColumnLabels,
165
- onChangeTableAttribute: handleChangeTableAttribute,
166
- onColumnChange: handleColumnChange,
167
- onCommitColumnWidth: handleCommitColumnWidth,
168
- onReorderColumnItems: handleReorderColumnItems,
169
- tableConfig
170
- };
171
- };
172
-
173
- export { useTableSettings };
174
- //# sourceMappingURL=useTableSettings.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTableSettings.js","sources":["../../../../packages/vuu-table-extras/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\";\nimport { ColumnItem } from \"../column-list/useColumnList\";\n\nexport type ColumnLike = {\n name: string;\n};\n\nconst buildColumnItems = (\n availableColumns: ReadonlyArray<SchemaColumn & { label?: string }>,\n configuredColumns: readonly ColumnDescriptor[],\n): ColumnItem[] => {\n return availableColumns.map<ColumnItem>(\n ({ name, label = name, serverDataType }) => {\n const configuredColumn = configuredColumns.find(\n (col) => col.name === name,\n );\n return {\n hidden: configuredColumn?.hidden,\n isCalculated: isCalculatedColumn(name),\n label: configuredColumn?.label ?? label,\n name,\n serverDataType,\n subscribed: configuredColumn !== undefined,\n };\n },\n );\n};\n\ntype ColumnState = {\n availableColumns: readonly 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":["columnItems"],"mappings":"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"}
@@ -1,13 +0,0 @@
1
- import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
2
- import { ColumnDescriptor, ColumnSettingsProps } from "@vuu-ui/vuu-table-types";
3
- import { HTMLAttributes } from "react";
4
- export interface ColumnExpressionPanelProps extends HTMLAttributes<HTMLDivElement>, Pick<ColumnSettingsProps, "tableConfig" | "vuuTable"> {
5
- column: ColumnDescriptor;
6
- /**
7
- * Callback prop, invoked on every change to calculated column definition
8
- * @param calculatedColumnName the full calculated column name
9
- */
10
- onChangeName?: (name: string) => void;
11
- onChangeServerDataType?: (name: VuuColumnDataType) => void;
12
- }
13
- export declare const ColumnExpressionPanel: ({ column: columnProp, onChangeName: onChangeNameProp, onChangeServerDataType: onChangeServerDataTypeProp, tableConfig, vuuTable, }: ColumnExpressionPanelProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export * from "./ColumnExpressionPanel";
@@ -1,10 +0,0 @@
1
- import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
2
- import { FormEventHandler, SyntheticEvent } from "react";
3
- import { ColumnExpressionPanelProps } from "./ColumnExpressionPanel";
4
- export type ColumnExpressionHookProps = Pick<ColumnExpressionPanelProps, "column" | "onChangeName" | "onChangeServerDataType">;
5
- export declare const useColumnExpression: ({ column: columnProp, onChangeName: onChangeNameProp, onChangeServerDataType: onChangeServerDataTypeProp, }: ColumnExpressionHookProps) => {
6
- column: ColumnDescriptor;
7
- onChangeExpression: (value: string) => void;
8
- onChangeName: FormEventHandler;
9
- onChangeServerDataType: (_e: SyntheticEvent, [serverDataType]: string[]) => void;
10
- };
@@ -1,11 +0,0 @@
1
- import { ColumnListPermissions } from "@vuu-ui/vuu-table-types";
2
- import { HTMLAttributes } from "react";
3
- import { type ColumnItem, type ColumnSearchProps } from "./useColumnList";
4
- export declare const classBase = "vuuColumnList";
5
- export declare const classBaseListItem = "vuuColumnListItem";
6
- export interface ColumnListProps extends Pick<ColumnSearchProps, "columnItems" | "onChange">, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
7
- onNavigateToColumn?: (columnName: string) => void;
8
- onReorderColumnItems?: (columnItems: ColumnItem[]) => void;
9
- permissions?: ColumnListPermissions;
10
- }
11
- export declare const ColumnList: ({ className, columnItems, onChange, onNavigateToColumn, onReorderColumnItems, permissions: { allowColumnSearch, allowHideColumns, allowRemoveColumns, allowReorderColumns, }, ...htmlAttributes }: ColumnListProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- export * from "./ColumnList";
2
- export type { ColumnChangeHandler, ColumnItem } from "./useColumnList";
@@ -1,22 +0,0 @@
1
- import { ColumnDescriptor, ColumnListPermissions } from "@vuu-ui/vuu-table-types";
2
- import { FormEventHandler, SyntheticEvent } from "react";
3
- export type ColumnChangeHandler = (columnName: string, propertyName: keyof ColumnDescriptor | "subscribed", value: string | number | boolean) => void;
4
- export type ColumnItem = Pick<ColumnDescriptor, "hidden" | "label" | "name" | "serverDataType"> & {
5
- isCalculated: boolean;
6
- subscribed: boolean;
7
- };
8
- export interface ColumnSearchProps {
9
- classBase: string;
10
- classBaseListItem: string;
11
- columnItems: ColumnItem[];
12
- onChange: ColumnChangeHandler;
13
- permissions: ColumnListPermissions;
14
- }
15
- export declare const useColumnList: ({ classBase, classBaseListItem, columnItems, onChange, permissions: { allowHideColumns, allowRemoveColumns }, }: ColumnSearchProps) => {
16
- onChangeSearchInput: FormEventHandler;
17
- onChangeListItem: ({ target }: SyntheticEvent) => void;
18
- searchState: {
19
- searchText: string;
20
- };
21
- visibleColumnItems: ColumnItem[];
22
- };
@@ -1,2 +0,0 @@
1
- import { ColumnSettingsProps } from "@vuu-ui/vuu-table-types";
2
- export declare const ColumnSettingsPanel: ({ column: columnProp, onCancelCreateColumn, onConfigChange, onCreateCalculatedColumn, tableConfig, vuuTable, }: ColumnSettingsProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,9 +0,0 @@
1
- import { TableSettingsPermissions, TableSettingsProps } from "@vuu-ui/vuu-table-types";
2
- export declare const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions>;
3
- export declare const noTableSettingsPermissions: Readonly<TableSettingsPermissions>;
4
- /**
5
- The TableSettingsPanel assumes 'ownership' of the tableSettings.
6
- It updates the settings in state locally and notifies caller of
7
- every change via onChange callback
8
- */
9
- export declare const TableSettingsPanel: ({ availableColumns, onAddCalculatedColumn, onConfigChange, onDataSourceConfigChange, onNavigateToColumn, tableConfig: tableConfigProp, permissions: permissionsProp, }: TableSettingsProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,18 +0,0 @@
1
- import { DataSourceConfig, SchemaColumn } from "@vuu-ui/vuu-data-types";
2
- import { ColumnDescriptor, ColumnMenuPermissions, SettingsPermissions, TableConfig } from "@vuu-ui/vuu-table-types";
3
- import { DisplayColumnSettingsAction } from "@vuu-ui/vuu-table-extras/src/column-menu/column-action-types";
4
- export interface TableAndColumnSettingsHookProps {
5
- availableColumns: readonly SchemaColumn[];
6
- onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;
7
- onConfigChange: (config: TableConfig) => void;
8
- onCreateCalculatedColumn: (column: ColumnDescriptor) => void;
9
- onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;
10
- settingsPermissions?: SettingsPermissions;
11
- tableConfig: TableConfig;
12
- }
13
- export declare const columnSettingsFromColumnMenuPermissions: (settings?: boolean | ColumnMenuPermissions) => boolean;
14
- export declare const tableSettingsFromColumnMenuPermissions: (settings?: boolean | ColumnMenuPermissions) => boolean | Readonly<import("@vuu-ui/vuu-table-types").TableSettingsPermissions>;
15
- export declare const useTableAndColumnSettings: ({ availableColumns: availableColumnsProps, settingsPermissions, onAvailableColumnsChange, onConfigChange, onCreateCalculatedColumn, onDataSourceConfigChange, tableConfig, }: TableAndColumnSettingsHookProps) => {
16
- showColumnSettingsPanel: (action: DisplayColumnSettingsAction) => void;
17
- showTableSettingsPanel: () => void;
18
- };
@@ -1,18 +0,0 @@
1
- import { TableConfig, TableSettingsProps } from "@vuu-ui/vuu-table-types";
2
- import { CommitHandler } from "@vuu-ui/vuu-utils";
3
- import { MouseEvent, SyntheticEvent } from "react";
4
- import { ColumnChangeHandler } from "../column-list";
5
- import { ColumnItem } from "../column-list/useColumnList";
6
- export type ColumnLike = {
7
- name: string;
8
- };
9
- export declare const useTableSettings: ({ availableColumns: availableColumnsProp, onConfigChange, onDataSourceConfigChange, tableConfig: tableConfigProp, }: Omit<TableSettingsProps, "onAddCalculatedColumn">) => {
10
- columnItems: ColumnItem[];
11
- columnLabelsValue: number;
12
- onChangeColumnLabels: (evt: SyntheticEvent) => void;
13
- onChangeTableAttribute: (evt: MouseEvent<HTMLButtonElement>) => void;
14
- onColumnChange: ColumnChangeHandler;
15
- onCommitColumnWidth: CommitHandler;
16
- onReorderColumnItems: (columnItems: ColumnItem[]) => void;
17
- tableConfig: TableConfig;
18
- };