@vuu-ui/vuu-table-extras 0.8.35 → 0.8.36

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 (167) hide show
  1. package/README.md +0 -0
  2. package/cjs/cell-edit-validators/CaseValidator.js +24 -0
  3. package/cjs/cell-edit-validators/CaseValidator.js.map +1 -0
  4. package/cjs/cell-edit-validators/PatternValidator.js +26 -0
  5. package/cjs/cell-edit-validators/PatternValidator.js.map +1 -0
  6. package/cjs/cell-renderers/background-cell/BackgroundCell.css +105 -0
  7. package/cjs/cell-renderers/background-cell/BackgroundCell.js +64 -0
  8. package/cjs/cell-renderers/background-cell/BackgroundCell.js.map +1 -0
  9. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css +4 -0
  10. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +58 -0
  11. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +1 -0
  12. package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css +169 -0
  13. package/cjs/cell-renderers/background-cell/useDirection.js +20 -0
  14. package/cjs/cell-renderers/background-cell/useDirection.js.map +1 -0
  15. package/cjs/cell-renderers/dropdown-cell/DropdownCell.css +18 -0
  16. package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +56 -0
  17. package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -0
  18. package/cjs/cell-renderers/lookup-cell/LookupCell.js +26 -0
  19. package/cjs/cell-renderers/lookup-cell/LookupCell.js.map +1 -0
  20. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css +30 -0
  21. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js +53 -0
  22. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js.map +1 -0
  23. package/cjs/cell-renderers/progress-cell/ProgressCell.css +39 -0
  24. package/cjs/cell-renderers/progress-cell/ProgressCell.js +60 -0
  25. package/cjs/cell-renderers/progress-cell/ProgressCell.js.map +1 -0
  26. package/cjs/column-expression-input/ColumnExpressionInput.css +92 -0
  27. package/cjs/column-expression-input/ColumnExpressionInput.js +30 -0
  28. package/cjs/column-expression-input/ColumnExpressionInput.js.map +1 -0
  29. package/cjs/column-expression-input/column-function-descriptors.js +307 -0
  30. package/cjs/column-expression-input/column-function-descriptors.js.map +1 -0
  31. package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +29 -0
  32. package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +1 -0
  33. package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +469 -0
  34. package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +1 -0
  35. package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js +61 -0
  36. package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +1 -0
  37. package/cjs/column-expression-input/column-language-parser/generated/column-parser.js +21 -0
  38. package/cjs/column-expression-input/column-language-parser/generated/column-parser.js.map +1 -0
  39. package/cjs/column-expression-input/functionDocInfo.js +39 -0
  40. package/cjs/column-expression-input/functionDocInfo.js.map +1 -0
  41. package/cjs/column-expression-input/highlighting.js +16 -0
  42. package/cjs/column-expression-input/highlighting.js.map +1 -0
  43. package/cjs/column-expression-input/theme.js +63 -0
  44. package/cjs/column-expression-input/theme.js.map +1 -0
  45. package/cjs/column-expression-input/useColumnAutoComplete.js +358 -0
  46. package/cjs/column-expression-input/useColumnAutoComplete.js.map +1 -0
  47. package/cjs/column-expression-input/useColumnExpressionEditor.js +131 -0
  48. package/cjs/column-expression-input/useColumnExpressionEditor.js.map +1 -0
  49. package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js +212 -0
  50. package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js.map +1 -0
  51. package/cjs/column-expression-panel/ColumnExpressionPanel.js +87 -0
  52. package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +1 -0
  53. package/cjs/column-expression-panel/useColumnExpression.js +69 -0
  54. package/cjs/column-expression-panel/useColumnExpression.js.map +1 -0
  55. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +97 -0
  56. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -0
  57. package/cjs/column-formatting-settings/ColumnFormattingPanel.js +107 -0
  58. package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +1 -0
  59. package/cjs/column-formatting-settings/DateTimeFormattingSettings.js +90 -0
  60. package/cjs/column-formatting-settings/DateTimeFormattingSettings.js.map +1 -0
  61. package/cjs/column-formatting-settings/LongTypeFormattingSettings.css +6 -0
  62. package/cjs/column-formatting-settings/LongTypeFormattingSettings.js +40 -0
  63. package/cjs/column-formatting-settings/LongTypeFormattingSettings.js.map +1 -0
  64. package/cjs/column-list/ColumnList.css +60 -0
  65. package/cjs/column-list/ColumnList.js +106 -0
  66. package/cjs/column-list/ColumnList.js.map +1 -0
  67. package/cjs/column-settings/ColumnNameLabel.css +13 -0
  68. package/cjs/column-settings/ColumnNameLabel.js +36 -0
  69. package/cjs/column-settings/ColumnNameLabel.js.map +1 -0
  70. package/cjs/column-settings/ColumnSettingsPanel.css +77 -0
  71. package/cjs/column-settings/ColumnSettingsPanel.js +186 -0
  72. package/cjs/column-settings/ColumnSettingsPanel.js.map +1 -0
  73. package/cjs/column-settings/useColumnSettings.js +235 -0
  74. package/cjs/column-settings/useColumnSettings.js.map +1 -0
  75. package/cjs/datasource-stats/DatasourceStats.css +11 -0
  76. package/cjs/datasource-stats/DatasourceStats.js +39 -0
  77. package/cjs/datasource-stats/DatasourceStats.js.map +1 -0
  78. package/cjs/index.js.map +1 -0
  79. package/cjs/table-settings/TableSettingsPanel.css +64 -0
  80. package/cjs/table-settings/TableSettingsPanel.js +114 -0
  81. package/cjs/table-settings/TableSettingsPanel.js.map +1 -0
  82. package/cjs/table-settings/useTableSettings.js +182 -0
  83. package/cjs/table-settings/useTableSettings.js.map +1 -0
  84. package/esm/cell-edit-validators/CaseValidator.js +22 -0
  85. package/esm/cell-edit-validators/CaseValidator.js.map +1 -0
  86. package/esm/cell-edit-validators/PatternValidator.js +24 -0
  87. package/esm/cell-edit-validators/PatternValidator.js.map +1 -0
  88. package/esm/cell-renderers/background-cell/BackgroundCell.css +105 -0
  89. package/esm/cell-renderers/background-cell/BackgroundCell.js +62 -0
  90. package/esm/cell-renderers/background-cell/BackgroundCell.js.map +1 -0
  91. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css +4 -0
  92. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +56 -0
  93. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +1 -0
  94. package/esm/cell-renderers/background-cell/BackgroundKeyframes.css +169 -0
  95. package/esm/cell-renderers/background-cell/useDirection.js +18 -0
  96. package/esm/cell-renderers/background-cell/useDirection.js.map +1 -0
  97. package/esm/cell-renderers/dropdown-cell/DropdownCell.css +18 -0
  98. package/esm/cell-renderers/dropdown-cell/DropdownCell.js +54 -0
  99. package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -0
  100. package/esm/cell-renderers/lookup-cell/LookupCell.js +24 -0
  101. package/esm/cell-renderers/lookup-cell/LookupCell.js.map +1 -0
  102. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css +30 -0
  103. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js +51 -0
  104. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js.map +1 -0
  105. package/esm/cell-renderers/progress-cell/ProgressCell.css +39 -0
  106. package/esm/cell-renderers/progress-cell/ProgressCell.js +58 -0
  107. package/esm/cell-renderers/progress-cell/ProgressCell.js.map +1 -0
  108. package/esm/column-expression-input/ColumnExpressionInput.css +92 -0
  109. package/esm/column-expression-input/ColumnExpressionInput.js +28 -0
  110. package/esm/column-expression-input/ColumnExpressionInput.js.map +1 -0
  111. package/esm/column-expression-input/column-function-descriptors.js +305 -0
  112. package/esm/column-expression-input/column-function-descriptors.js.map +1 -0
  113. package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +27 -0
  114. package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +1 -0
  115. package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +467 -0
  116. package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +1 -0
  117. package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js +56 -0
  118. package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +1 -0
  119. package/esm/column-expression-input/column-language-parser/generated/column-parser.js +19 -0
  120. package/esm/column-expression-input/column-language-parser/generated/column-parser.js.map +1 -0
  121. package/esm/column-expression-input/functionDocInfo.js +37 -0
  122. package/esm/column-expression-input/functionDocInfo.js.map +1 -0
  123. package/esm/column-expression-input/highlighting.js +14 -0
  124. package/esm/column-expression-input/highlighting.js.map +1 -0
  125. package/esm/column-expression-input/theme.js +61 -0
  126. package/esm/column-expression-input/theme.js.map +1 -0
  127. package/esm/column-expression-input/useColumnAutoComplete.js +356 -0
  128. package/esm/column-expression-input/useColumnAutoComplete.js.map +1 -0
  129. package/esm/column-expression-input/useColumnExpressionEditor.js +129 -0
  130. package/esm/column-expression-input/useColumnExpressionEditor.js.map +1 -0
  131. package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js +210 -0
  132. package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js.map +1 -0
  133. package/esm/column-expression-panel/ColumnExpressionPanel.js +85 -0
  134. package/esm/column-expression-panel/ColumnExpressionPanel.js.map +1 -0
  135. package/esm/column-expression-panel/useColumnExpression.js +67 -0
  136. package/esm/column-expression-panel/useColumnExpression.js.map +1 -0
  137. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +95 -0
  138. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -0
  139. package/esm/column-formatting-settings/ColumnFormattingPanel.js +105 -0
  140. package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +1 -0
  141. package/esm/column-formatting-settings/DateTimeFormattingSettings.js +88 -0
  142. package/esm/column-formatting-settings/DateTimeFormattingSettings.js.map +1 -0
  143. package/esm/column-formatting-settings/LongTypeFormattingSettings.css +6 -0
  144. package/esm/column-formatting-settings/LongTypeFormattingSettings.js +38 -0
  145. package/esm/column-formatting-settings/LongTypeFormattingSettings.js.map +1 -0
  146. package/esm/column-list/ColumnList.css +60 -0
  147. package/esm/column-list/ColumnList.js +104 -0
  148. package/esm/column-list/ColumnList.js.map +1 -0
  149. package/esm/column-settings/ColumnNameLabel.css +13 -0
  150. package/esm/column-settings/ColumnNameLabel.js +34 -0
  151. package/esm/column-settings/ColumnNameLabel.js.map +1 -0
  152. package/esm/column-settings/ColumnSettingsPanel.css +77 -0
  153. package/esm/column-settings/ColumnSettingsPanel.js +184 -0
  154. package/esm/column-settings/ColumnSettingsPanel.js.map +1 -0
  155. package/esm/column-settings/useColumnSettings.js +233 -0
  156. package/esm/column-settings/useColumnSettings.js.map +1 -0
  157. package/esm/datasource-stats/DatasourceStats.css +11 -0
  158. package/esm/datasource-stats/DatasourceStats.js +37 -0
  159. package/esm/datasource-stats/DatasourceStats.js.map +1 -0
  160. package/esm/index.js +24 -0
  161. package/esm/index.js.map +1 -0
  162. package/esm/table-settings/TableSettingsPanel.css +64 -0
  163. package/esm/table-settings/TableSettingsPanel.js +112 -0
  164. package/esm/table-settings/TableSettingsPanel.js.map +1 -0
  165. package/esm/table-settings/useTableSettings.js +180 -0
  166. package/esm/table-settings/useTableSettings.js.map +1 -0
  167. package/package.json +14 -12
@@ -0,0 +1,77 @@
1
+ .vuuColumnSettingsPanel {
2
+ --vuu-svg-align-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.33333 10H2.66667C2.3 10 2 10.3 2 10.6667C2 11.0333 2.3 11.3333 2.66667 11.3333H9.33333C9.7 11.3333 10 11.0333 10 10.6667C10 10.3 9.7 10 9.33333 10ZM9.33333 4.66667H2.66667C2.3 4.66667 2 4.96667 2 5.33333C2 5.7 2.3 6 2.66667 6H9.33333C9.7 6 10 5.7 10 5.33333C10 4.96667 9.7 4.66667 9.33333 4.66667ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z" /></svg>');
3
+ --vuu-svg-align-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM6.66667 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H6.66667C6.3 10 6 10.3 6 10.6667C6 11.0333 6.3 11.3333 6.66667 11.3333ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM6.66667 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H6.66667C6.3 4.66667 6 4.96667 6 5.33333C6 5.7 6.3 6 6.66667 6ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z" /></svg>');
4
+ --vuu-svg-pin-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.33333 9.86V8.66666H13.3333C13.7 8.66666 14 8.36666 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333L7.33333 7.33333V6.14C7.33333 5.84 6.97333 5.69333 6.76667 5.90666L4.90667 7.76666C4.77333 7.89999 4.77333 8.10666 4.90667 8.24L6.76667 10.1C6.97333 10.3067 7.33333 10.16 7.33333 9.86ZM2.66667 13.3333C3.03333 13.3333 3.33333 13.0333 3.33333 12.6667L3.33333 3.33333C3.33333 2.96666 3.03333 2.66666 2.66667 2.66666C2.3 2.66666 2 2.96666 2 3.33333L2 12.6667C2 13.0333 2.3 13.3333 2.66667 13.3333Z" /></svg>');
5
+ --vuu-svg-pin-float: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 4.66667H4.66667V6H6V4.66667ZM6 7.33333H4.66667V8.66667H6V7.33333ZM6 2C5.26 2 4.66667 2.6 4.66667 3.33333H6V2ZM8.66667 10H7.33333V11.3333H8.66667V10ZM12.6667 2V3.33333H14C14 2.6 13.4 2 12.6667 2ZM8.66667 2H7.33333V3.33333H8.66667V2ZM6 11.3333V10H4.66667C4.66667 10.7333 5.26 11.3333 6 11.3333ZM12.6667 8.66667H14V7.33333H12.6667V8.66667ZM12.6667 6H14V4.66667H12.6667V6ZM12.6667 11.3333C13.4 11.3333 14 10.7333 14 10H12.6667V11.3333ZM2.66667 4.66667C2.3 4.66667 2 4.96667 2 5.33333V12.6667C2 13.4 2.6 14 3.33333 14H10.6667C11.0333 14 11.3333 13.7 11.3333 13.3333C11.3333 12.9667 11.0333 12.6667 10.6667 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V5.33333C3.33333 4.96667 3.03333 4.66667 2.66667 4.66667ZM10 3.33333H11.3333V2H10V3.33333ZM10 11.3333H11.3333V10H10V11.3333Z" /></svg>');
6
+ --vuu-svg-pin-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.66667 6.14V7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36666 2.3 8.66666 2.66667 8.66666H8.66667V9.86C8.66667 10.16 9.02667 10.3067 9.23333 10.0933L11.0933 8.23333C11.2267 8.1 11.2267 7.89333 11.0933 7.76L9.23333 5.9C9.02667 5.69333 8.66667 5.84 8.66667 6.14ZM13.3333 13.3333C13.7 13.3333 14 13.0333 14 12.6667V3.33333C14 2.96666 13.7 2.66666 13.3333 2.66666C12.9667 2.66666 12.6667 2.96666 12.6667 3.33333V12.6667C12.6667 13.0333 12.9667 13.3333 13.3333 13.3333Z"/></svg>');
7
+ --vuuDropdown-height: 24px;
8
+ --vuuDropdown-width: 100%;
9
+
10
+ display: flex;
11
+ flex-direction: column;
12
+ gap: 24px;
13
+ height: 100%;
14
+ padding-top: 24px;
15
+ }
16
+
17
+ .vuuColumnSettingsPanel-header {
18
+ border-top: solid 2px var(--vuu-color-gray-30);
19
+ font-size: 14px;
20
+ font-weight: 600;
21
+ padding: 24px 2px 0 2px;
22
+ }
23
+
24
+
25
+ .vuuColumnSettingsPanel-buttonBar {
26
+ align-items: center;
27
+ display: flex;
28
+ justify-content: space-between;
29
+ margin-top: auto;
30
+ }
31
+
32
+ .vuuColumnSettingsPanel-buttonBar[data-align="right"]{
33
+ gap: 6px;
34
+ justify-content: flex-end;
35
+ }
36
+
37
+ .vuuColumnSettingsPanel-buttonNavPrev {
38
+ --vuu-icon-left: 6px;
39
+ padding-left: 24px
40
+ }
41
+
42
+ .vuuColumnSettingsPanel-buttonNavNext {
43
+ --vuu-icon-left: calc(100% - 18px);
44
+ padding-right: 24px
45
+ }
46
+
47
+
48
+
49
+ [data-icon='align-left'] {
50
+ --vuu-icon-svg: var(--vuu-svg-align-left);
51
+ }
52
+
53
+ [data-icon='align-right'] {
54
+ --vuu-icon-svg: var(--vuu-svg-align-right);
55
+ }
56
+
57
+ [data-icon='pin-left'] {
58
+ --vuu-icon-svg: var(--vuu-svg-pin-left);
59
+ }
60
+ [data-icon='pin-float'] {
61
+ --vuu-icon-svg: var(--vuu-svg-pin-float);
62
+ }
63
+ [data-icon='pin-right'] {
64
+ --vuu-icon-svg: var(--vuu-svg-pin-right);
65
+ }
66
+
67
+ .vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {
68
+ display: none;
69
+ }
70
+
71
+
72
+
73
+
74
+
75
+
76
+
77
+
@@ -0,0 +1,184 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
3
+ import { getDefaultAlignment, isCalculatedColumn, getCalculatedColumnName } from '@vuu-ui/vuu-utils';
4
+ import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
5
+ import cx from 'clsx';
6
+ import { ColumnExpressionPanel } from '../column-expression-panel/ColumnExpressionPanel.js';
7
+ import { ColumnFormattingPanel } from '../column-formatting-settings/ColumnFormattingPanel.js';
8
+ import 'react';
9
+ import { ColumnNameLabel } from './ColumnNameLabel.js';
10
+ import { useColumnSettings } from './useColumnSettings.js';
11
+
12
+ const classBase = "vuuColumnSettingsPanel";
13
+ const getColumnLabel = (column) => {
14
+ const { name, label } = column;
15
+ if (isCalculatedColumn(name)) {
16
+ return label ?? getCalculatedColumnName(column);
17
+ } else {
18
+ return label ?? name;
19
+ }
20
+ };
21
+ const ColumnSettingsPanel = ({
22
+ column: columnProp,
23
+ onCancelCreateColumn,
24
+ onConfigChange,
25
+ onCreateCalculatedColumn,
26
+ tableConfig,
27
+ vuuTable
28
+ }) => {
29
+ const isNewCalculatedColumn = columnProp.name === "::";
30
+ const {
31
+ availableRenderers,
32
+ editCalculatedColumn,
33
+ column,
34
+ navigateNextColumn,
35
+ navigatePrevColumn,
36
+ onCancel,
37
+ onChange,
38
+ onChangeCalculatedColumnName,
39
+ onChangeFormatting,
40
+ onChangeRendering,
41
+ onChangeServerDataType,
42
+ onChangeToggleButton,
43
+ onChangeType,
44
+ onEditCalculatedColumn,
45
+ onInputCommit,
46
+ onSave
47
+ } = useColumnSettings({
48
+ column: columnProp,
49
+ onCancelCreateColumn,
50
+ onConfigChange,
51
+ onCreateCalculatedColumn,
52
+ tableConfig
53
+ });
54
+ const {
55
+ serverDataType,
56
+ align = getDefaultAlignment(serverDataType),
57
+ pin,
58
+ width
59
+ } = column;
60
+ return /* @__PURE__ */ jsxs(
61
+ "div",
62
+ {
63
+ className: cx(classBase, {
64
+ [`${classBase}-editing`]: editCalculatedColumn
65
+ }),
66
+ children: [
67
+ /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
68
+ editCalculatedColumn ? /* @__PURE__ */ jsx(
69
+ ColumnExpressionPanel,
70
+ {
71
+ column,
72
+ onChangeName: onChangeCalculatedColumnName,
73
+ onChangeServerDataType,
74
+ tableConfig,
75
+ vuuTable
76
+ }
77
+ ) : null,
78
+ /* @__PURE__ */ jsxs(FormField, { "data-field": "column-label", children: [
79
+ /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Label" }),
80
+ /* @__PURE__ */ jsx(
81
+ VuuInput,
82
+ {
83
+ className: "vuuInput",
84
+ "data-embedded": true,
85
+ onChange,
86
+ onCommit: onInputCommit,
87
+ value: getColumnLabel(column)
88
+ }
89
+ )
90
+ ] }),
91
+ /* @__PURE__ */ jsxs(FormField, { "data-field": "column-width", children: [
92
+ /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
93
+ /* @__PURE__ */ jsx(
94
+ VuuInput,
95
+ {
96
+ className: "vuuInput",
97
+ "data-embedded": true,
98
+ onChange,
99
+ value: width,
100
+ onCommit: onInputCommit
101
+ }
102
+ )
103
+ ] }),
104
+ /* @__PURE__ */ jsxs(FormField, { "data-field": "column-alignment", children: [
105
+ /* @__PURE__ */ jsx(FormFieldLabel, { children: "Alignment" }),
106
+ /* @__PURE__ */ jsxs(ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
107
+ /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "align-left", size: 16 }) }),
108
+ /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "align-right", size: 16 }) })
109
+ ] })
110
+ ] }),
111
+ /* @__PURE__ */ jsxs(FormField, { "data-field": "column-pin", children: [
112
+ /* @__PURE__ */ jsx(FormFieldLabel, { children: "Pin Column" }),
113
+ /* @__PURE__ */ jsxs(ToggleButtonGroup, { onChange: onChangeToggleButton, value: pin ?? "", children: [
114
+ /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "pin-left", size: 16 }) }),
115
+ /* @__PURE__ */ jsx(ToggleButton, { value: "floating", children: /* @__PURE__ */ jsx(Icon, { name: "pin-float", size: 16 }) }),
116
+ /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "pin-right", size: 16 }) }),
117
+ /* @__PURE__ */ jsx(ToggleButton, { value: "", children: /* @__PURE__ */ jsx(Icon, { name: "cross-circle", size: 16 }) })
118
+ ] })
119
+ ] }),
120
+ /* @__PURE__ */ jsx(
121
+ ColumnFormattingPanel,
122
+ {
123
+ availableRenderers,
124
+ column,
125
+ onChangeFormatting,
126
+ onChangeRendering,
127
+ onChangeColumnType: onChangeType
128
+ }
129
+ ),
130
+ editCalculatedColumn ? /* @__PURE__ */ jsxs("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
131
+ /* @__PURE__ */ jsx(
132
+ Button,
133
+ {
134
+ className: `${classBase}-buttonCancel`,
135
+ onClick: onCancel,
136
+ tabIndex: -1,
137
+ children: "cancel"
138
+ }
139
+ ),
140
+ /* @__PURE__ */ jsx(
141
+ Button,
142
+ {
143
+ className: `${classBase}-buttonSave`,
144
+ onClick: onSave,
145
+ variant: "cta",
146
+ children: "save"
147
+ }
148
+ )
149
+ ] }) : /* @__PURE__ */ jsxs(
150
+ "div",
151
+ {
152
+ className: `${classBase}-buttonBar`,
153
+ "data-align": isNewCalculatedColumn ? "right" : void 0,
154
+ children: [
155
+ /* @__PURE__ */ jsx(
156
+ Button,
157
+ {
158
+ className: `${classBase}-buttonNavPrev`,
159
+ variant: "secondary",
160
+ "data-icon": "arrow-left",
161
+ onClick: navigatePrevColumn,
162
+ children: "PREVIOUS"
163
+ }
164
+ ),
165
+ /* @__PURE__ */ jsx(
166
+ Button,
167
+ {
168
+ className: `${classBase}-buttonNavNext`,
169
+ variant: "secondary",
170
+ "data-icon": "arrow-right",
171
+ onClick: navigateNextColumn,
172
+ children: "NEXT"
173
+ }
174
+ )
175
+ ]
176
+ }
177
+ )
178
+ ]
179
+ }
180
+ );
181
+ };
182
+
183
+ export { ColumnSettingsPanel };
184
+ //# sourceMappingURL=ColumnSettingsPanel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColumnSettingsPanel.js","sources":["../../src/column-settings/ColumnSettingsPanel.tsx"],"sourcesContent":["import { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n getCalculatedColumnName,\n getDefaultAlignment,\n isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n Button,\n FormField,\n FormFieldLabel,\n ToggleButton,\n ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { ColumnExpressionPanel } from \"../column-expression-panel\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { useColumnSettings } from \"./useColumnSettings\";\n\nimport \"./ColumnSettingsPanel.css\";\n\nconst classBase = \"vuuColumnSettingsPanel\";\n\nconst getColumnLabel = (column: ColumnDescriptor) => {\n const { name, label } = column;\n if (isCalculatedColumn(name)) {\n return label ?? getCalculatedColumnName(column);\n } else {\n return label ?? name;\n }\n};\n\nexport const ColumnSettingsPanel = ({\n column: columnProp,\n onCancelCreateColumn,\n onConfigChange,\n onCreateCalculatedColumn,\n tableConfig,\n vuuTable,\n}: ColumnSettingsProps) => {\n const isNewCalculatedColumn = columnProp.name === \"::\";\n const {\n availableRenderers,\n editCalculatedColumn,\n column,\n navigateNextColumn,\n navigatePrevColumn,\n onCancel,\n onChange,\n onChangeCalculatedColumnName,\n onChangeFormatting,\n onChangeRendering,\n onChangeServerDataType,\n onChangeToggleButton,\n onChangeType,\n onEditCalculatedColumn,\n onInputCommit,\n onSave,\n } = useColumnSettings({\n column: columnProp,\n onCancelCreateColumn,\n onConfigChange,\n onCreateCalculatedColumn,\n tableConfig,\n });\n\n const {\n serverDataType,\n align = getDefaultAlignment(serverDataType),\n pin,\n width,\n } = column;\n\n return (\n <div\n className={cx(classBase, {\n [`${classBase}-editing`]: editCalculatedColumn,\n })}\n >\n <div className={`${classBase}-header`}>\n <ColumnNameLabel column={column} onClick={onEditCalculatedColumn} />\n </div>\n\n {editCalculatedColumn ? (\n <ColumnExpressionPanel\n column={column}\n onChangeName={onChangeCalculatedColumnName}\n onChangeServerDataType={onChangeServerDataType}\n tableConfig={tableConfig}\n vuuTable={vuuTable}\n />\n ) : null}\n\n <FormField data-field=\"column-label\">\n <FormFieldLabel>Column Label</FormFieldLabel>\n <VuuInput\n className=\"vuuInput\"\n data-embedded\n onChange={onChange}\n onCommit={onInputCommit}\n value={getColumnLabel(column)}\n />\n </FormField>\n\n <FormField data-field=\"column-width\">\n <FormFieldLabel>Column Width</FormFieldLabel>\n <VuuInput\n className=\"vuuInput\"\n data-embedded\n onChange={onChange}\n value={width}\n onCommit={onInputCommit}\n />\n </FormField>\n <FormField data-field=\"column-alignment\">\n <FormFieldLabel>Alignment</FormFieldLabel>\n <ToggleButtonGroup onChange={onChangeToggleButton} value={align}>\n <ToggleButton value=\"left\">\n <Icon name=\"align-left\" size={16} />\n </ToggleButton>\n <ToggleButton value=\"right\">\n <Icon name=\"align-right\" size={16} />\n </ToggleButton>\n </ToggleButtonGroup>\n </FormField>\n <FormField data-field=\"column-pin\">\n <FormFieldLabel>Pin Column</FormFieldLabel>\n <ToggleButtonGroup onChange={onChangeToggleButton} value={pin ?? \"\"}>\n <ToggleButton value=\"left\">\n <Icon name=\"pin-left\" size={16} />\n </ToggleButton>\n <ToggleButton value=\"floating\">\n <Icon name=\"pin-float\" size={16} />\n </ToggleButton>\n <ToggleButton value=\"right\">\n <Icon name=\"pin-right\" size={16} />\n </ToggleButton>\n <ToggleButton value=\"\">\n <Icon name=\"cross-circle\" size={16} />\n </ToggleButton>\n </ToggleButtonGroup>\n </FormField>\n <ColumnFormattingPanel\n availableRenderers={availableRenderers}\n column={column}\n onChangeFormatting={onChangeFormatting}\n onChangeRendering={onChangeRendering}\n onChangeColumnType={onChangeType}\n />\n\n {editCalculatedColumn ? (\n <div className=\"vuuColumnSettingsPanel-buttonBar\" data-align=\"right\">\n <Button\n className={`${classBase}-buttonCancel`}\n onClick={onCancel}\n tabIndex={-1}\n >\n cancel\n </Button>\n <Button\n className={`${classBase}-buttonSave`}\n onClick={onSave}\n variant=\"cta\"\n >\n save\n </Button>\n </div>\n ) : (\n <div\n className={`${classBase}-buttonBar`}\n data-align={isNewCalculatedColumn ? \"right\" : undefined}\n >\n <Button\n className={`${classBase}-buttonNavPrev`}\n variant=\"secondary\"\n data-icon=\"arrow-left\"\n onClick={navigatePrevColumn}\n >\n PREVIOUS\n </Button>\n <Button\n className={`${classBase}-buttonNavNext`}\n variant=\"secondary\"\n data-icon=\"arrow-right\"\n onClick={navigateNextColumn}\n >\n NEXT\n </Button>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsBA,MAAM,SAAY,GAAA,wBAAA,CAAA;AAElB,MAAM,cAAA,GAAiB,CAAC,MAA6B,KAAA;AACnD,EAAM,MAAA,EAAE,IAAM,EAAA,KAAA,EAAU,GAAA,MAAA,CAAA;AACxB,EAAI,IAAA,kBAAA,CAAmB,IAAI,CAAG,EAAA;AAC5B,IAAO,OAAA,KAAA,IAAS,wBAAwB,MAAM,CAAA,CAAA;AAAA,GACzC,MAAA;AACL,IAAA,OAAO,KAAS,IAAA,IAAA,CAAA;AAAA,GAClB;AACF,CAAA,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,MAAQ,EAAA,UAAA;AAAA,EACR,oBAAA;AAAA,EACA,cAAA;AAAA,EACA,wBAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AACF,CAA2B,KAAA;AACzB,EAAM,MAAA,qBAAA,GAAwB,WAAW,IAAS,KAAA,IAAA,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,kBAAA;AAAA,IACA,oBAAA;AAAA,IACA,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,4BAAA;AAAA,IACA,kBAAA;AAAA,IACA,iBAAA;AAAA,IACA,sBAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,sBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,MACE,iBAAkB,CAAA;AAAA,IACpB,MAAQ,EAAA,UAAA;AAAA,IACR,oBAAA;AAAA,IACA,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,KAAA,GAAQ,oBAAoB,cAAc,CAAA;AAAA,IAC1C,GAAA;AAAA,IACA,KAAA;AAAA,GACE,GAAA,MAAA,CAAA;AAEJ,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,oBAAA;AAAA,OAC3B,CAAA;AAAA,MAED,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,OAAA,CAAA,EAC1B,8BAAC,eAAgB,EAAA,EAAA,MAAA,EAAgB,OAAS,EAAA,sBAAA,EAAwB,CACpE,EAAA,CAAA;AAAA,QAEC,oBACC,mBAAA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,YAAc,EAAA,4BAAA;AAAA,YACd,sBAAA;AAAA,YACA,WAAA;AAAA,YACA,QAAA;AAAA,WAAA;AAAA,SAEA,GAAA,IAAA;AAAA,wBAEJ,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,cACpB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAY,EAAA,cAAA,EAAA,CAAA;AAAA,0BAC5B,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,UAAA;AAAA,cACV,eAAa,EAAA,IAAA;AAAA,cACb,QAAA;AAAA,cACA,QAAU,EAAA,aAAA;AAAA,cACV,KAAA,EAAO,eAAe,MAAM,CAAA;AAAA,aAAA;AAAA,WAC9B;AAAA,SACF,EAAA,CAAA;AAAA,wBAEA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,cACpB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAY,EAAA,cAAA,EAAA,CAAA;AAAA,0BAC5B,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,UAAA;AAAA,cACV,eAAa,EAAA,IAAA;AAAA,cACb,QAAA;AAAA,cACA,KAAO,EAAA,KAAA;AAAA,cACP,QAAU,EAAA,aAAA;AAAA,aAAA;AAAA,WACZ;AAAA,SACF,EAAA,CAAA;AAAA,wBACA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,kBACpB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,0BACxB,IAAA,CAAA,iBAAA,EAAA,EAAkB,QAAU,EAAA,oBAAA,EAAsB,OAAO,KACxD,EAAA,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,YAAA,EAAA,EAAa,OAAM,MAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,YAAA,EAAa,IAAM,EAAA,EAAA,EAAI,CACpC,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,OAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,aAAA,EAAc,IAAM,EAAA,EAAA,EAAI,CACrC,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,YACpB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,+BACzB,iBAAkB,EAAA,EAAA,QAAA,EAAU,oBAAsB,EAAA,KAAA,EAAO,OAAO,EAC/D,EAAA,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,YAAA,EAAA,EAAa,OAAM,MAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,UAAA,EAAW,IAAM,EAAA,EAAA,EAAI,CAClC,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,UAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,WAAA,EAAY,IAAM,EAAA,EAAA,EAAI,CACnC,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,OAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,WAAA,EAAY,IAAM,EAAA,EAAA,EAAI,CACnC,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,EAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,cAAA,EAAe,IAAM,EAAA,EAAA,EAAI,CACtC,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,kBAAA;AAAA,YACA,MAAA;AAAA,YACA,kBAAA;AAAA,YACA,iBAAA;AAAA,YACA,kBAAoB,EAAA,YAAA;AAAA,WAAA;AAAA,SACtB;AAAA,QAEC,uCACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,kCAAA,EAAmC,cAAW,OAC3D,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,cACvB,OAAS,EAAA,QAAA;AAAA,cACT,QAAU,EAAA,CAAA,CAAA;AAAA,cACX,QAAA,EAAA,QAAA;AAAA,aAAA;AAAA,WAED;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,cACvB,OAAS,EAAA,MAAA;AAAA,cACT,OAAQ,EAAA,KAAA;AAAA,cACT,QAAA,EAAA,MAAA;AAAA,aAAA;AAAA,WAED;AAAA,SAAA,EACF,CAEA,mBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,YACvB,YAAA,EAAY,wBAAwB,OAAU,GAAA,KAAA,CAAA;AAAA,YAE9C,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,kBACvB,OAAQ,EAAA,WAAA;AAAA,kBACR,WAAU,EAAA,YAAA;AAAA,kBACV,OAAS,EAAA,kBAAA;AAAA,kBACV,QAAA,EAAA,UAAA;AAAA,iBAAA;AAAA,eAED;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,kBACvB,OAAQ,EAAA,WAAA;AAAA,kBACR,WAAU,EAAA,aAAA;AAAA,kBACV,OAAS,EAAA,kBAAA;AAAA,kBACV,QAAA,EAAA,MAAA;AAAA,iBAAA;AAAA,eAED;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}
@@ -0,0 +1,233 @@
1
+ import { queryClosest, isValidPinLocation, isValidColumnAlignment, setCalculatedColumnName, updateColumnFormatting, updateColumnType, updateColumnRenderProps, getRegisteredCellRenderers } from '@vuu-ui/vuu-utils';
2
+ import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
3
+
4
+ const integerCellRenderers = [
5
+ {
6
+ description: "Default formatter for columns with data type integer",
7
+ label: "Default Renderer (int, long)",
8
+ name: "default-int"
9
+ }
10
+ ];
11
+ const doubleCellRenderers = [
12
+ {
13
+ description: "Default formatter for columns with data type double",
14
+ label: "Default Renderer (double)",
15
+ name: "default-double"
16
+ }
17
+ ];
18
+ const stringCellRenderers = [
19
+ {
20
+ description: "Default formatter for columns with data type string",
21
+ label: "Default Renderer (string)",
22
+ name: "default-string"
23
+ }
24
+ ];
25
+ const booleanCellRenderers = [];
26
+ const getAvailableCellRenderers = (column) => {
27
+ switch (column.serverDataType) {
28
+ case "char":
29
+ case "string":
30
+ return stringCellRenderers.concat(getRegisteredCellRenderers("string"));
31
+ case "int":
32
+ case "long":
33
+ return integerCellRenderers.concat(getRegisteredCellRenderers("int"));
34
+ case "double":
35
+ return doubleCellRenderers.concat(getRegisteredCellRenderers("double"));
36
+ case "boolean":
37
+ return booleanCellRenderers.concat(getRegisteredCellRenderers("boolean"));
38
+ default:
39
+ return stringCellRenderers;
40
+ }
41
+ };
42
+ const getFieldName = (input) => {
43
+ const saltFormField = input.closest(".saltFormField");
44
+ if (saltFormField && saltFormField.dataset.field) {
45
+ const {
46
+ dataset: { field }
47
+ } = saltFormField;
48
+ return field;
49
+ } else {
50
+ throw Error("named form field not found");
51
+ }
52
+ };
53
+ const getColumn = (columns, column) => {
54
+ if (column.name === "::") {
55
+ return column;
56
+ } else {
57
+ const col = columns.find((col2) => col2.name === column.name);
58
+ if (col) {
59
+ return col;
60
+ }
61
+ throw Error(`columns does not contain column ${name}`);
62
+ }
63
+ };
64
+ const replaceColumn = (tableConfig, column) => ({
65
+ ...tableConfig,
66
+ columns: tableConfig.columns.map(
67
+ (col) => col.name === column.name ? column : col
68
+ )
69
+ });
70
+ const useColumnSettings = ({
71
+ column: columnProp,
72
+ onCancelCreateColumn,
73
+ onConfigChange,
74
+ onCreateCalculatedColumn,
75
+ tableConfig
76
+ }) => {
77
+ const [column, setColumn] = useState(
78
+ getColumn(tableConfig.columns, columnProp)
79
+ );
80
+ const columnRef = useRef(column);
81
+ const [inEditMode, setEditMode] = useState(column.name === "::");
82
+ const handleEditCalculatedcolumn = useCallback(() => {
83
+ columnRef.current = column;
84
+ setEditMode(true);
85
+ }, [column]);
86
+ useEffect(() => {
87
+ setColumn(columnProp);
88
+ setEditMode(columnProp.name === "::");
89
+ }, [columnProp]);
90
+ const availableRenderers = useMemo(() => {
91
+ return getAvailableCellRenderers(column);
92
+ }, [column]);
93
+ const handleInputCommit = useCallback(() => {
94
+ onConfigChange(replaceColumn(tableConfig, column));
95
+ }, [column, onConfigChange, tableConfig]);
96
+ const handleChangeToggleButton = useCallback(
97
+ (evt) => {
98
+ const button = queryClosest(evt.target, "button");
99
+ if (button) {
100
+ const fieldName = getFieldName(button);
101
+ const { value } = button;
102
+ switch (fieldName) {
103
+ case "column-alignment":
104
+ if (isValidColumnAlignment(value)) {
105
+ const newColumn = {
106
+ ...column,
107
+ align: value || void 0
108
+ };
109
+ setColumn(newColumn);
110
+ onConfigChange(replaceColumn(tableConfig, newColumn));
111
+ }
112
+ break;
113
+ case "column-pin":
114
+ if (isValidPinLocation(value)) {
115
+ const newColumn = {
116
+ ...column,
117
+ pin: value || void 0
118
+ };
119
+ setColumn(newColumn);
120
+ onConfigChange(replaceColumn(tableConfig, newColumn));
121
+ break;
122
+ }
123
+ }
124
+ }
125
+ },
126
+ [column, onConfigChange, tableConfig]
127
+ );
128
+ const handleChange = useCallback((evt) => {
129
+ const input = evt.target;
130
+ const fieldName = getFieldName(input);
131
+ const { value } = input;
132
+ switch (fieldName) {
133
+ case "column-label":
134
+ setColumn((state) => ({ ...state, label: value }));
135
+ break;
136
+ case "column-name":
137
+ setColumn((state) => setCalculatedColumnName(state, value));
138
+ break;
139
+ case "column-width":
140
+ setColumn((state) => ({ ...state, width: parseInt(value) }));
141
+ break;
142
+ }
143
+ }, []);
144
+ const handleChangeCalculatedColumnName = useCallback((name2) => {
145
+ setColumn((state) => ({ ...state, name: name2 }));
146
+ }, []);
147
+ const handleChangeFormatting = useCallback(
148
+ (formatting) => {
149
+ const newColumn = updateColumnFormatting(column, formatting);
150
+ setColumn(newColumn);
151
+ onConfigChange(replaceColumn(tableConfig, newColumn));
152
+ },
153
+ [column, onConfigChange, tableConfig]
154
+ );
155
+ const handleChangeType = useCallback(
156
+ (type) => {
157
+ const updatedColumn = updateColumnType(column, type);
158
+ setColumn(updatedColumn);
159
+ onConfigChange(replaceColumn(tableConfig, updatedColumn));
160
+ },
161
+ [column, onConfigChange, tableConfig]
162
+ );
163
+ const handleChangeServerDataType = useCallback(
164
+ (serverDataType) => {
165
+ setColumn((col) => ({ ...col, serverDataType }));
166
+ },
167
+ []
168
+ );
169
+ const handleChangeRendering = useCallback(
170
+ (renderProps) => {
171
+ if (renderProps) {
172
+ const newColumn = updateColumnRenderProps(
173
+ column,
174
+ renderProps
175
+ );
176
+ setColumn(newColumn);
177
+ onConfigChange(replaceColumn(tableConfig, newColumn));
178
+ }
179
+ },
180
+ [column, onConfigChange, tableConfig]
181
+ );
182
+ const navigateColumn = useCallback(
183
+ ({ moveBy }) => {
184
+ const { columns } = tableConfig;
185
+ const index = columns.indexOf(column) + moveBy;
186
+ const newColumn = columns[index];
187
+ if (newColumn) {
188
+ setColumn(newColumn);
189
+ }
190
+ },
191
+ [column, tableConfig]
192
+ );
193
+ const navigateNextColumn = useCallback(() => {
194
+ navigateColumn({ moveBy: 1 });
195
+ }, [navigateColumn]);
196
+ const navigatePrevColumn = useCallback(() => {
197
+ navigateColumn({ moveBy: -1 });
198
+ }, [navigateColumn]);
199
+ const handleSaveCalculatedColumn = useCallback(() => {
200
+ onCreateCalculatedColumn(column);
201
+ }, [column, onCreateCalculatedColumn]);
202
+ const handleCancelEdit = useCallback(() => {
203
+ if (columnProp.name === "::") {
204
+ onCancelCreateColumn();
205
+ } else {
206
+ if (columnRef.current !== void 0 && columnRef.current !== column) {
207
+ setColumn(columnRef.current);
208
+ }
209
+ setEditMode(false);
210
+ }
211
+ }, [column, columnProp.name, onCancelCreateColumn]);
212
+ return {
213
+ availableRenderers,
214
+ editCalculatedColumn: inEditMode,
215
+ column,
216
+ navigateNextColumn,
217
+ navigatePrevColumn,
218
+ onCancel: handleCancelEdit,
219
+ onChange: handleChange,
220
+ onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
221
+ onChangeFormatting: handleChangeFormatting,
222
+ onChangeRendering: handleChangeRendering,
223
+ onChangeServerDataType: handleChangeServerDataType,
224
+ onChangeToggleButton: handleChangeToggleButton,
225
+ onChangeType: handleChangeType,
226
+ onEditCalculatedColumn: handleEditCalculatedcolumn,
227
+ onInputCommit: handleInputCommit,
228
+ onSave: handleSaveCalculatedColumn
229
+ };
230
+ };
231
+
232
+ export { useColumnSettings };
233
+ //# sourceMappingURL=useColumnSettings.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useColumnSettings.js","sources":["../../src/column-settings/useColumnSettings.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n TableConfig,\n ColumnTypeFormatting,\n ColumnSettingsProps,\n ColumnTypeSimple,\n} from \"@vuu-ui/vuu-table-types\";\n\nimport {\n CellRendererDescriptor,\n ColumnRenderPropsChangeHandler,\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\";\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 getFieldName = (input: HTMLInputElement | HTMLButtonElement): string => {\n const saltFormField = input.closest(\".saltFormField\") as HTMLElement;\n if (saltFormField && saltFormField.dataset.field) {\n const {\n dataset: { field },\n } = saltFormField;\n return field;\n } else {\n throw Error(\"named form field not found\");\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: ColumnTypeSimple) => {\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":["col","name"],"mappings":";;;AA8BA,MAAM,oBAAiD,GAAA;AAAA,EACrD;AAAA,IACE,WAAa,EAAA,sDAAA;AAAA,IACb,KAAO,EAAA,8BAAA;AAAA,IACP,IAAM,EAAA,aAAA;AAAA,GACR;AACF,CAAA,CAAA;AACA,MAAM,mBAAgD,GAAA;AAAA,EACpD;AAAA,IACE,WAAa,EAAA,qDAAA;AAAA,IACb,KAAO,EAAA,2BAAA;AAAA,IACP,IAAM,EAAA,gBAAA;AAAA,GACR;AACF,CAAA,CAAA;AAEA,MAAM,mBAAgD,GAAA;AAAA,EACpD;AAAA,IACE,WAAa,EAAA,qDAAA;AAAA,IACb,KAAO,EAAA,2BAAA;AAAA,IACP,IAAM,EAAA,gBAAA;AAAA,GACR;AACF,CAAA,CAAA;AAEA,MAAM,uBAAiD,EAAC,CAAA;AAExD,MAAM,yBAAA,GAA4B,CAChC,MAC6B,KAAA;AAC7B,EAAA,QAAQ,OAAO,cAAgB;AAAA,IAC7B,KAAK,MAAA,CAAA;AAAA,IACL,KAAK,QAAA;AACH,MAAA,OAAO,mBAAoB,CAAA,MAAA,CAAO,0BAA2B,CAAA,QAAQ,CAAC,CAAA,CAAA;AAAA,IACxE,KAAK,KAAA,CAAA;AAAA,IACL,KAAK,MAAA;AACH,MAAA,OAAO,oBAAqB,CAAA,MAAA,CAAO,0BAA2B,CAAA,KAAK,CAAC,CAAA,CAAA;AAAA,IACtE,KAAK,QAAA;AACH,MAAA,OAAO,mBAAoB,CAAA,MAAA,CAAO,0BAA2B,CAAA,QAAQ,CAAC,CAAA,CAAA;AAAA,IACxE,KAAK,SAAA;AACH,MAAA,OAAO,oBAAqB,CAAA,MAAA,CAAO,0BAA2B,CAAA,SAAS,CAAC,CAAA,CAAA;AAAA,IAC1E;AACE,MAAO,OAAA,mBAAA,CAAA;AAAA,GACX;AACF,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,CAAC,KAAwD,KAAA;AAC5E,EAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,OAAA,CAAQ,gBAAgB,CAAA,CAAA;AACpD,EAAI,IAAA,aAAA,IAAiB,aAAc,CAAA,OAAA,CAAQ,KAAO,EAAA;AAChD,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,KAAM,EAAA;AAAA,KACf,GAAA,aAAA,CAAA;AACJ,IAAO,OAAA,KAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAA,MAAM,MAAM,4BAA4B,CAAA,CAAA;AAAA,GAC1C;AACF,CAAA,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,OAAA,EAA6B,MAA6B,KAAA;AAC3E,EAAI,IAAA,MAAA,CAAO,SAAS,IAAM,EAAA;AAExB,IAAO,OAAA,MAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,GAAA,GAAM,QAAQ,IAAK,CAAA,CAACA,SAAQA,IAAI,CAAA,IAAA,KAAS,OAAO,IAAI,CAAA,CAAA;AAC1D,IAAA,IAAI,GAAK,EAAA;AACP,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AACA,IAAM,MAAA,KAAA,CAAM,CAAmC,gCAAA,EAAA,IAAI,CAAE,CAAA,CAAA,CAAA;AAAA,GACvD;AACF,CAAA,CAAA;AAEA,MAAM,aAAA,GAAgB,CACpB,WAAA,EACA,MACiB,MAAA;AAAA,EACjB,GAAG,WAAA;AAAA,EACH,OAAA,EAAS,YAAY,OAAQ,CAAA,GAAA;AAAA,IAAI,CAAC,GAChC,KAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,OAAO,MAAS,GAAA,GAAA;AAAA,GACtC;AACF,CAAA,CAAA,CAAA;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC,MAAQ,EAAA,UAAA;AAAA,EACR,oBAAA;AAAA,EACA,cAAA;AAAA,EACA,wBAAA;AAAA,EACA,WAAA;AACF,CAA6C,KAAA;AAC3C,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA;AAAA,IAC1B,SAAA,CAAU,WAAY,CAAA,OAAA,EAAS,UAAU,CAAA;AAAA,GAC3C,CAAA;AACA,EAAM,MAAA,SAAA,GAAY,OAAyB,MAAM,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,UAAY,EAAA,WAAW,IAAI,QAAS,CAAA,MAAA,CAAO,SAAS,IAAI,CAAA,CAAA;AAE/D,EAAM,MAAA,0BAAA,GAA6B,YAAY,MAAM;AACnD,IAAA,SAAA,CAAU,OAAU,GAAA,MAAA,CAAA;AACpB,IAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,GAClB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,UAAU,CAAA,CAAA;AACpB,IAAY,WAAA,CAAA,UAAA,CAAW,SAAS,IAAI,CAAA,CAAA;AAAA,GACtC,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAM,MAAA,kBAAA,GAAqB,QAAQ,MAAM;AACvC,IAAA,OAAO,0BAA0B,MAAM,CAAA,CAAA;AAAA,GACzC,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAe,cAAA,CAAA,aAAA,CAAc,WAAa,EAAA,MAAM,CAAC,CAAA,CAAA;AAAA,GAChD,EAAA,CAAC,MAAQ,EAAA,cAAA,EAAgB,WAAW,CAAC,CAAA,CAAA;AAExC,EAAA,MAAM,wBAA2B,GAAA,WAAA;AAAA,IAC/B,CAAC,GAAQ,KAAA;AACP,MAAA,MAAM,MAAS,GAAA,YAAA,CAAgC,GAAI,CAAA,MAAA,EAAQ,QAAQ,CAAA,CAAA;AACnE,MAAA,IAAI,MAAQ,EAAA;AACV,QAAM,MAAA,SAAA,GAAY,aAAa,MAAM,CAAA,CAAA;AACrC,QAAM,MAAA,EAAE,OAAU,GAAA,MAAA,CAAA;AAClB,QAAA,QAAQ,SAAW;AAAA,UACjB,KAAK,kBAAA;AACH,YAAI,IAAA,sBAAA,CAAuB,KAAK,CAAG,EAAA;AACjC,cAAA,MAAM,SAA8B,GAAA;AAAA,gBAClC,GAAG,MAAA;AAAA,gBACH,OAAO,KAAS,IAAA,KAAA,CAAA;AAAA,eAClB,CAAA;AACA,cAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,cAAe,cAAA,CAAA,aAAA,CAAc,WAAa,EAAA,SAAS,CAAC,CAAA,CAAA;AAAA,aACtD;AACA,YAAA,MAAA;AAAA,UACF,KAAK,YAAA;AACH,YAAI,IAAA,kBAAA,CAAmB,KAAK,CAAG,EAAA;AAC7B,cAAA,MAAM,SAA8B,GAAA;AAAA,gBAClC,GAAG,MAAA;AAAA,gBACH,KAAK,KAAS,IAAA,KAAA,CAAA;AAAA,eAChB,CAAA;AACA,cAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,cAAe,cAAA,CAAA,aAAA,CAAc,WAAa,EAAA,SAAS,CAAC,CAAA,CAAA;AAEpD,cAAA,MAAA;AAAA,aACF;AAAA,SACJ;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,cAAA,EAAgB,WAAW,CAAA;AAAA,GACtC,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,WAA8B,CAAA,CAAC,GAAQ,KAAA;AAC1D,IAAA,MAAM,QAAQ,GAAI,CAAA,MAAA,CAAA;AAClB,IAAM,MAAA,SAAA,GAAY,aAAa,KAAK,CAAA,CAAA;AACpC,IAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAClB,IAAA,QAAQ,SAAW;AAAA,MACjB,KAAK,cAAA;AACH,QAAA,SAAA,CAAU,CAAC,KAAW,MAAA,EAAE,GAAG,KAAO,EAAA,KAAA,EAAO,OAAQ,CAAA,CAAA,CAAA;AACjD,QAAA,MAAA;AAAA,MACF,KAAK,aAAA;AACH,QAAA,SAAA,CAAU,CAAC,KAAA,KAAU,uBAAwB,CAAA,KAAA,EAAO,KAAK,CAAC,CAAA,CAAA;AAC1D,QAAA,MAAA;AAAA,MACF,KAAK,cAAA;AACH,QAAU,SAAA,CAAA,CAAC,WAAW,EAAE,GAAG,OAAO,KAAO,EAAA,QAAA,CAAS,KAAK,CAAA,EAAI,CAAA,CAAA,CAAA;AAC3D,QAAA,MAAA;AAAA,KACJ;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,gCAAA,GAAmC,WAAY,CAAA,CAACC,KAAiB,KAAA;AACrE,IAAA,SAAA,CAAU,CAAC,KAAW,MAAA,EAAE,GAAG,KAAO,EAAA,IAAA,EAAAA,OAAO,CAAA,CAAA,CAAA;AAAA,GAC3C,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,UAAqC,KAAA;AACpC,MAAM,MAAA,SAAA,GAAY,sBAAuB,CAAA,MAAA,EAAQ,UAAU,CAAA,CAAA;AAC3D,MAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,MAAe,cAAA,CAAA,aAAA,CAAc,WAAa,EAAA,SAAS,CAAC,CAAA,CAAA;AAAA,KACtD;AAAA,IACA,CAAC,MAAQ,EAAA,cAAA,EAAgB,WAAW,CAAA;AAAA,GACtC,CAAA;AAEA,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,IAA2B,KAAA;AAC1B,MAAM,MAAA,aAAA,GAAgB,gBAAiB,CAAA,MAAA,EAAQ,IAAI,CAAA,CAAA;AACnD,MAAA,SAAA,CAAU,aAAa,CAAA,CAAA;AACvB,MAAe,cAAA,CAAA,aAAA,CAAc,WAAa,EAAA,aAAa,CAAC,CAAA,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,MAAQ,EAAA,cAAA,EAAgB,WAAW,CAAA;AAAA,GACtC,CAAA;AAGA,EAAA,MAAM,0BAA6B,GAAA,WAAA;AAAA,IACjC,CAAC,cAAsC,KAAA;AACrC,MAAA,SAAA,CAAU,CAAC,GAAS,MAAA,EAAE,GAAG,GAAA,EAAK,gBAAiB,CAAA,CAAA,CAAA;AAAA,KACjD;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,WAAgB,KAAA;AACf,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,MAAM,SAA8B,GAAA,uBAAA;AAAA,UAClC,MAAA;AAAA,UACA,WAAA;AAAA,SACF,CAAA;AACA,QAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,QAAe,cAAA,CAAA,aAAA,CAAc,WAAa,EAAA,SAAS,CAAC,CAAA,CAAA;AAAA,OACtD;AAAA,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,cAAA,EAAgB,WAAW,CAAA;AAAA,GACtC,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,EAAE,MAAA,EAAiC,KAAA;AAClC,MAAM,MAAA,EAAE,SAAY,GAAA,WAAA,CAAA;AACpB,MAAA,MAAM,KAAQ,GAAA,OAAA,CAAQ,OAAQ,CAAA,MAAM,CAAI,GAAA,MAAA,CAAA;AACxC,MAAM,MAAA,SAAA,GAAY,QAAQ,KAAK,CAAA,CAAA;AAC/B,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,IACA,CAAC,QAAQ,WAAW,CAAA;AAAA,GACtB,CAAA;AACA,EAAM,MAAA,kBAAA,GAAqB,YAAY,MAAM;AAC3C,IAAe,cAAA,CAAA,EAAE,MAAQ,EAAA,CAAA,EAAG,CAAA,CAAA;AAAA,GAC9B,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,EAAM,MAAA,kBAAA,GAAqB,YAAY,MAAM;AAC3C,IAAe,cAAA,CAAA,EAAE,MAAQ,EAAA,CAAA,CAAA,EAAI,CAAA,CAAA;AAAA,GAC/B,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,EAAM,MAAA,0BAAA,GAA6B,YAAY,MAAM;AAEnD,IAAA,wBAAA,CAAyB,MAAM,CAAA,CAAA;AAAA,GAC9B,EAAA,CAAC,MAAQ,EAAA,wBAAwB,CAAC,CAAA,CAAA;AAErC,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAI,IAAA,UAAA,CAAW,SAAS,IAAM,EAAA;AAC5B,MAAqB,oBAAA,EAAA,CAAA;AAAA,KAChB,MAAA;AACL,MAAA,IAAI,SAAU,CAAA,OAAA,KAAY,KAAa,CAAA,IAAA,SAAA,CAAU,YAAY,MAAQ,EAAA;AACnE,QAAA,SAAA,CAAU,UAAU,OAAO,CAAA,CAAA;AAAA,OAC7B;AACA,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,KACnB;AAAA,KACC,CAAC,MAAA,EAAQ,UAAW,CAAA,IAAA,EAAM,oBAAoB,CAAC,CAAA,CAAA;AAElD,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,oBAAsB,EAAA,UAAA;AAAA,IACtB,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAU,EAAA,gBAAA;AAAA,IACV,QAAU,EAAA,YAAA;AAAA,IACV,4BAA8B,EAAA,gCAAA;AAAA,IAC9B,kBAAoB,EAAA,sBAAA;AAAA,IACpB,iBAAmB,EAAA,qBAAA;AAAA,IACnB,sBAAwB,EAAA,0BAAA;AAAA,IACxB,oBAAsB,EAAA,wBAAA;AAAA,IACtB,YAAc,EAAA,gBAAA;AAAA,IACd,sBAAwB,EAAA,0BAAA;AAAA,IACxB,aAAe,EAAA,iBAAA;AAAA,IACf,MAAQ,EAAA,0BAAA;AAAA,GACV,CAAA;AACF;;;;"}
@@ -0,0 +1,11 @@
1
+ .vuuDatasourceStats {
2
+ color: black;
3
+ display: flex;
4
+ font-size: 10px;
5
+ gap: var(--salt-size-unit);
6
+ padding: 4px 0 0 12px;
7
+ }
8
+
9
+ .vuuDatasourceStats-label {
10
+ color: var(--vuu-color-gray-50);
11
+ }
@@ -0,0 +1,37 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import cx from 'clsx';
3
+ import { useState, useEffect } from 'react';
4
+
5
+ const classBase = "vuuDatasourceStats";
6
+ const numberFormatter = new Intl.NumberFormat();
7
+ const DataSourceStats = ({
8
+ className: classNameProp,
9
+ dataSource
10
+ }) => {
11
+ const [range, setRange] = useState(dataSource.range);
12
+ const [size, setSize] = useState(dataSource.size);
13
+ useEffect(() => {
14
+ setSize(dataSource.size);
15
+ dataSource.on("resize", setSize);
16
+ dataSource.on("range", setRange);
17
+ return () => {
18
+ dataSource.removeListener("resize", setSize);
19
+ dataSource.removeListener("range", setRange);
20
+ };
21
+ }, [dataSource]);
22
+ const className = cx(classBase, classNameProp);
23
+ const from = numberFormatter.format(range.from + 1);
24
+ const to = numberFormatter.format(Math.min(range.to, size));
25
+ const value = numberFormatter.format(size);
26
+ return /* @__PURE__ */ jsxs("div", { className, children: [
27
+ /* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: "Row count" }),
28
+ /* @__PURE__ */ jsx("span", { className: `${classBase}-range`, children: from }),
29
+ /* @__PURE__ */ jsx("span", { children: "-" }),
30
+ /* @__PURE__ */ jsx("span", { className: `${classBase}-range`, children: to }),
31
+ /* @__PURE__ */ jsx("span", { children: "of" }),
32
+ /* @__PURE__ */ jsx("span", { className: `${classBase}-size`, children: value })
33
+ ] });
34
+ };
35
+
36
+ export { DataSourceStats };
37
+ //# sourceMappingURL=DatasourceStats.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DatasourceStats.js","sources":["../../src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useEffect, useState } from \"react\";\n\nimport \"./DatasourceStats.css\";\n\ninterface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {\n dataSource: DataSource;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nexport const DataSourceStats = ({\n className: classNameProp,\n dataSource,\n}: DataSourceStatsProps) => {\n const [range, setRange] = useState<VuuRange>(dataSource.range);\n const [size, setSize] = useState(dataSource.size);\n useEffect(() => {\n setSize(dataSource.size);\n dataSource.on(\"resize\", setSize);\n dataSource.on(\"range\", setRange);\n return () => {\n dataSource.removeListener(\"resize\", setSize);\n dataSource.removeListener(\"range\", setRange);\n };\n }, [dataSource]);\n\n const className = cx(classBase, classNameProp);\n const from = numberFormatter.format(range.from + 1);\n const to = numberFormatter.format(Math.min(range.to, size));\n const value = numberFormatter.format(size);\n return (\n <div className={className}>\n <span className={`${classBase}-label`}>Row count</span>\n <span className={`${classBase}-range`}>{from}</span>\n <span>-</span>\n <span className={`${classBase}-range`}>{to}</span>\n <span>of</span>\n <span className={`${classBase}-size`}>{value}</span>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAWA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,eAAA,GAAkB,IAAI,IAAA,CAAK,YAAa,EAAA,CAAA;AAEvC,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAmB,WAAW,KAAK,CAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,QAAA,CAAS,WAAW,IAAI,CAAA,CAAA;AAChD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,WAAW,IAAI,CAAA,CAAA;AACvB,IAAW,UAAA,CAAA,EAAA,CAAG,UAAU,OAAO,CAAA,CAAA;AAC/B,IAAW,UAAA,CAAA,EAAA,CAAG,SAAS,QAAQ,CAAA,CAAA;AAC/B,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,UAAU,OAAO,CAAA,CAAA;AAC3C,MAAW,UAAA,CAAA,cAAA,CAAe,SAAS,QAAQ,CAAA,CAAA;AAAA,KAC7C,CAAA;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EAAA,MAAM,IAAO,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AAClD,EAAM,MAAA,EAAA,GAAK,gBAAgB,MAAO,CAAA,IAAA,CAAK,IAAI,KAAM,CAAA,EAAA,EAAI,IAAI,CAAC,CAAA,CAAA;AAC1D,EAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACzC,EACE,uBAAA,IAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,wBAC/C,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,oBAC7C,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,wBACN,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAG,EAAA,EAAA,EAAA,CAAA;AAAA,oBAC3C,GAAA,CAAC,UAAK,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,wBACP,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,GAC/C,EAAA,CAAA,CAAA;AAEJ;;;;"}
package/esm/index.js ADDED
@@ -0,0 +1,24 @@
1
+ export { CaseValidator } from './cell-edit-validators/CaseValidator.js';
2
+ export { PatternValidator } from './cell-edit-validators/PatternValidator.js';
3
+ export { BackgroundCell } from './cell-renderers/background-cell/BackgroundCell.js';
4
+ export { BackgroundCellConfigurationEditor } from './cell-renderers/background-cell/BackgroundCellConfigurationEditor.js';
5
+ export { DropdownCell } from './cell-renderers/dropdown-cell/DropdownCell.js';
6
+ export { LookupCell } from './cell-renderers/lookup-cell/LookupCell.js';
7
+ export { PctProgressCell } from './cell-renderers/pct-progress-cell/PctProgressCell.js';
8
+ import './cell-renderers/progress-cell/ProgressCell.js';
9
+ export { ColumnList } from './column-list/ColumnList.js';
10
+ export { ColumnSettingsPanel } from './column-settings/ColumnSettingsPanel.js';
11
+ export { ColumnExpressionInput } from './column-expression-input/ColumnExpressionInput.js';
12
+ export { columnExpressionLanguageSupport } from './column-expression-input/column-language-parser/ColumnExpressionLanguage.js';
13
+ export { walkTree } from './column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js';
14
+ export { ColumnNamedTerms, isCompleteExpression, isCompleteRelationalExpression, lastNamedChild } from './column-expression-input/column-language-parser/column-expression-parse-utils.js';
15
+ export { useColumnExpressionEditor } from './column-expression-input/useColumnExpressionEditor.js';
16
+ export { useColumnExpressionSuggestionProvider } from './column-expression-input/useColumnExpressionSuggestionProvider.js';
17
+ export { ColumnExpressionPanel } from './column-expression-panel/ColumnExpressionPanel.js';
18
+ export { ColumnFormattingPanel } from './column-formatting-settings/ColumnFormattingPanel.js';
19
+ export { BaseNumericFormattingSettings } from './column-formatting-settings/BaseNumericFormattingSettings.js';
20
+ export { DateTimeFormattingSettings } from './column-formatting-settings/DateTimeFormattingSettings.js';
21
+ export { DataSourceStats } from './datasource-stats/DatasourceStats.js';
22
+ export { TableSettingsPanel } from './table-settings/TableSettingsPanel.js';
23
+ export { useTableSettings } from './table-settings/useTableSettings.js';
24
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}