@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.
- package/cjs/{column-expression-panel/ColumnExpressionPanel.js → calculated-column/CalculatedColumnPanel.js} +13 -13
- package/cjs/calculated-column/CalculatedColumnPanel.js.map +1 -0
- package/cjs/{column-expression-panel/useColumnExpression.js → calculated-column/useCalculatedColumnPanel.js} +12 -10
- package/cjs/calculated-column/useCalculatedColumnPanel.js.map +1 -0
- package/cjs/calculated-column/useEditCalculatedColumn.js +138 -0
- package/cjs/calculated-column/useEditCalculatedColumn.js.map +1 -0
- package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +1 -0
- package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -1
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js +1 -0
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +1 -1
- package/cjs/column-menu/ColumnMenu.js +2 -3
- package/cjs/column-menu/ColumnMenu.js.map +1 -1
- package/cjs/column-menu/column-menu-utils.js +3 -18
- package/cjs/column-menu/column-menu-utils.js.map +1 -1
- package/cjs/column-menu/useColumnActions.js +0 -2
- package/cjs/column-menu/useColumnActions.js.map +1 -1
- package/cjs/column-picker/ColumnModel.js +58 -0
- package/cjs/column-picker/ColumnModel.js.map +1 -1
- package/cjs/column-picker/ColumnPicker.css.js +1 -1
- package/cjs/column-picker/ColumnPicker.js +37 -14
- package/cjs/column-picker/ColumnPicker.js.map +1 -1
- package/cjs/column-picker/ColumnPickerAction.js +34 -0
- package/cjs/column-picker/ColumnPickerAction.js.map +1 -0
- package/cjs/column-picker/useColumnPicker.js +2 -1
- package/cjs/column-picker/useColumnPicker.js.map +1 -1
- package/cjs/column-picker/useTableColumnPicker.js +35 -0
- package/cjs/column-picker/useTableColumnPicker.js.map +1 -0
- package/cjs/column-settings-panel/ColumnNameLabel.js.map +1 -0
- package/cjs/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js +1 -1
- package/cjs/column-settings-panel/ColumnSettingsPanel.js +161 -0
- package/cjs/column-settings-panel/ColumnSettingsPanel.js.map +1 -0
- package/cjs/{table-column-settings → column-settings-panel}/useColumnSettings.js +42 -79
- package/cjs/column-settings-panel/useColumnSettings.js.map +1 -0
- package/cjs/column-settings-panel/useTableAndColumnSettings.js +37 -0
- package/cjs/column-settings-panel/useTableAndColumnSettings.js.map +1 -0
- package/cjs/datasource-stats/DatasourceStats.css.js +1 -1
- package/cjs/index.js +22 -17
- package/cjs/index.js.map +1 -1
- package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.css.js +6 -0
- package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.css.js.map +1 -0
- package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.js +90 -0
- package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.js.map +1 -0
- package/cjs/tabbed-table-config-panel/TabbedTableSettingsAction.js +44 -0
- package/cjs/tabbed-table-config-panel/TabbedTableSettingsAction.js.map +1 -0
- package/cjs/tabbed-table-config-panel/useTabbedTableConfigPanel.js +49 -0
- package/cjs/tabbed-table-config-panel/useTabbedTableConfigPanel.js.map +1 -0
- package/cjs/table-footer/TableFooter.css.js +6 -0
- package/cjs/table-footer/TableFooter.css.js.map +1 -0
- package/cjs/table-footer/TableFooter.js +47 -0
- package/cjs/table-footer/TableFooter.js.map +1 -0
- package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js +1 -1
- package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.js +12 -47
- package/cjs/table-settings-panel/TableSettingsPanel.js.map +1 -0
- package/cjs/table-settings-panel/useTableSettings.js +60 -0
- package/cjs/table-settings-panel/useTableSettings.js.map +1 -0
- package/esm/{column-expression-panel/ColumnExpressionPanel.js → calculated-column/CalculatedColumnPanel.js} +13 -13
- package/esm/calculated-column/CalculatedColumnPanel.js.map +1 -0
- package/esm/{column-expression-panel/useColumnExpression.js → calculated-column/useCalculatedColumnPanel.js} +12 -10
- package/esm/calculated-column/useCalculatedColumnPanel.js.map +1 -0
- package/esm/calculated-column/useEditCalculatedColumn.js +136 -0
- package/esm/calculated-column/useEditCalculatedColumn.js.map +1 -0
- package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +1 -0
- package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -1
- package/esm/column-formatting-settings/ColumnFormattingPanel.js +1 -0
- package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +1 -1
- package/esm/column-menu/ColumnMenu.js +2 -3
- package/esm/column-menu/ColumnMenu.js.map +1 -1
- package/esm/column-menu/column-menu-utils.js +3 -18
- package/esm/column-menu/column-menu-utils.js.map +1 -1
- package/esm/column-menu/useColumnActions.js +0 -2
- package/esm/column-menu/useColumnActions.js.map +1 -1
- package/esm/column-picker/ColumnModel.js +58 -0
- package/esm/column-picker/ColumnModel.js.map +1 -1
- package/esm/column-picker/ColumnPicker.css.js +1 -1
- package/esm/column-picker/ColumnPicker.js +39 -16
- package/esm/column-picker/ColumnPicker.js.map +1 -1
- package/esm/column-picker/ColumnPickerAction.js +32 -0
- package/esm/column-picker/ColumnPickerAction.js.map +1 -0
- package/esm/column-picker/useColumnPicker.js +2 -1
- package/esm/column-picker/useColumnPicker.js.map +1 -1
- package/esm/column-picker/useTableColumnPicker.js +33 -0
- package/esm/column-picker/useTableColumnPicker.js.map +1 -0
- package/esm/column-settings-panel/ColumnNameLabel.js.map +1 -0
- package/esm/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js +1 -1
- package/esm/column-settings-panel/ColumnSettingsPanel.js +159 -0
- package/esm/column-settings-panel/ColumnSettingsPanel.js.map +1 -0
- package/esm/{table-column-settings → column-settings-panel}/useColumnSettings.js +44 -81
- package/esm/column-settings-panel/useColumnSettings.js.map +1 -0
- package/esm/column-settings-panel/useTableAndColumnSettings.js +33 -0
- package/esm/column-settings-panel/useTableAndColumnSettings.js.map +1 -0
- package/esm/datasource-stats/DatasourceStats.css.js +1 -1
- package/esm/index.js +10 -7
- package/esm/index.js.map +1 -1
- package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js +4 -0
- package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js.map +1 -0
- package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.js +88 -0
- package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.js.map +1 -0
- package/esm/tabbed-table-config-panel/TabbedTableSettingsAction.js +42 -0
- package/esm/tabbed-table-config-panel/TabbedTableSettingsAction.js.map +1 -0
- package/esm/tabbed-table-config-panel/useTabbedTableConfigPanel.js +47 -0
- package/esm/tabbed-table-config-panel/useTabbedTableConfigPanel.js.map +1 -0
- package/esm/table-footer/TableFooter.css.js +4 -0
- package/esm/table-footer/TableFooter.css.js.map +1 -0
- package/esm/table-footer/TableFooter.js +44 -0
- package/esm/table-footer/TableFooter.js.map +1 -0
- package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js +1 -1
- package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.js +13 -48
- package/esm/table-settings-panel/TableSettingsPanel.js.map +1 -0
- package/esm/table-settings-panel/useTableSettings.js +58 -0
- package/esm/table-settings-panel/useTableSettings.js.map +1 -0
- package/package.json +12 -11
- package/types/calculated-column/CalculatedColumnPanel.d.ts +12 -0
- package/types/calculated-column/useCalculatedColumnPanel.d.ts +10 -0
- package/types/calculated-column/useEditCalculatedColumn.d.ts +13 -0
- package/types/column-menu/column-action-types.d.ts +1 -4
- package/types/column-menu/column-menu-utils.d.ts +4 -4
- package/types/column-picker/ColumnModel.d.ts +26 -3
- package/types/column-picker/ColumnPicker.d.ts +7 -3
- package/types/column-picker/ColumnPickerAction.d.ts +5 -0
- package/types/column-picker/useColumnPicker.d.ts +5 -4
- package/types/column-picker/useTableColumnPicker.d.ts +7 -0
- package/types/column-picker/useTableColumnPickerDeprecated.d.ts +14 -0
- package/types/{table-column-settings → column-settings-panel}/ColumnNameLabel.d.ts +1 -1
- package/types/column-settings-panel/ColumnSettingsPanel.d.ts +5 -0
- package/types/{table-column-settings → column-settings-panel}/useColumnSettings.d.ts +14 -7
- package/types/column-settings-panel/useTableAndColumnSettings.d.ts +13 -0
- package/types/index.d.ts +11 -9
- package/types/tabbed-table-config-panel/TabbedTableConfigPanel.d.ts +17 -0
- package/types/tabbed-table-config-panel/TabbedTableSettingsAction.d.ts +7 -0
- package/types/tabbed-table-config-panel/useTabbedTableConfigPanel.d.ts +13 -0
- package/types/table-footer/TableFooter.d.ts +9 -0
- package/types/table-settings-panel/TableSettingsPanel.d.ts +22 -0
- package/types/table-settings-panel/useTableSettings.d.ts +14 -0
- package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
- package/cjs/column-expression-panel/useColumnExpression.js.map +0 -1
- package/cjs/column-list/ColumnList.css.js +0 -6
- package/cjs/column-list/ColumnList.css.js.map +0 -1
- package/cjs/column-list/ColumnList.js +0 -218
- package/cjs/column-list/ColumnList.js.map +0 -1
- package/cjs/column-list/useColumnList.js +0 -66
- package/cjs/column-list/useColumnList.js.map +0 -1
- package/cjs/table-column-settings/ColumnNameLabel.js.map +0 -1
- package/cjs/table-column-settings/ColumnSettingsPanel.js +0 -202
- package/cjs/table-column-settings/ColumnSettingsPanel.js.map +0 -1
- package/cjs/table-column-settings/TableSettingsPanel.js.map +0 -1
- package/cjs/table-column-settings/useColumnSettings.js.map +0 -1
- package/cjs/table-column-settings/useTableAndColumnSettings.js +0 -129
- package/cjs/table-column-settings/useTableAndColumnSettings.js.map +0 -1
- package/cjs/table-column-settings/useTableSettings.js +0 -176
- package/cjs/table-column-settings/useTableSettings.js.map +0 -1
- package/esm/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
- package/esm/column-expression-panel/useColumnExpression.js.map +0 -1
- package/esm/column-list/ColumnList.css.js +0 -4
- package/esm/column-list/ColumnList.css.js.map +0 -1
- package/esm/column-list/ColumnList.js +0 -214
- package/esm/column-list/ColumnList.js.map +0 -1
- package/esm/column-list/useColumnList.js +0 -64
- package/esm/column-list/useColumnList.js.map +0 -1
- package/esm/table-column-settings/ColumnNameLabel.js.map +0 -1
- package/esm/table-column-settings/ColumnSettingsPanel.js +0 -200
- package/esm/table-column-settings/ColumnSettingsPanel.js.map +0 -1
- package/esm/table-column-settings/TableSettingsPanel.js.map +0 -1
- package/esm/table-column-settings/useColumnSettings.js.map +0 -1
- package/esm/table-column-settings/useTableAndColumnSettings.js +0 -125
- package/esm/table-column-settings/useTableAndColumnSettings.js.map +0 -1
- package/esm/table-column-settings/useTableSettings.js +0 -174
- package/esm/table-column-settings/useTableSettings.js.map +0 -1
- package/types/column-expression-panel/ColumnExpressionPanel.d.ts +0 -13
- package/types/column-expression-panel/index.d.ts +0 -1
- package/types/column-expression-panel/useColumnExpression.d.ts +0 -10
- package/types/column-list/ColumnList.d.ts +0 -11
- package/types/column-list/index.d.ts +0 -2
- package/types/column-list/useColumnList.d.ts +0 -22
- package/types/table-column-settings/ColumnSettingsPanel.d.ts +0 -2
- package/types/table-column-settings/TableSettingsPanel.d.ts +0 -9
- package/types/table-column-settings/useTableAndColumnSettings.d.ts +0 -18
- package/types/table-column-settings/useTableSettings.d.ts +0 -18
- /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js +0 -0
- /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js.map +0 -0
- /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.js +0 -0
- /package/cjs/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js.map +0 -0
- /package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js.map +0 -0
- /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js +0 -0
- /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js.map +0 -0
- /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.js +0 -0
- /package/esm/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js.map +0 -0
- /package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js.map +0 -0
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { useState, useRef, useMemo, useCallback } from 'react';
|
|
2
|
-
import { queryClosest } from '@vuu-ui/vuu-utils';
|
|
3
|
-
|
|
4
|
-
const useColumnList = ({
|
|
5
|
-
classBase,
|
|
6
|
-
classBaseListItem,
|
|
7
|
-
columnItems,
|
|
8
|
-
onChange,
|
|
9
|
-
permissions: { allowHideColumns, allowRemoveColumns }
|
|
10
|
-
}) => {
|
|
11
|
-
const [searchState, setSearchState] = useState({ searchText: "" });
|
|
12
|
-
const visibleColumnsRef = useRef(void 0);
|
|
13
|
-
const hideOnly = useMemo(
|
|
14
|
-
() => allowHideColumns && !allowRemoveColumns,
|
|
15
|
-
[allowHideColumns, allowRemoveColumns]
|
|
16
|
-
);
|
|
17
|
-
useMemo(() => {
|
|
18
|
-
const value = searchState.searchText.toLowerCase();
|
|
19
|
-
if (value) {
|
|
20
|
-
const pattern = value.toLowerCase();
|
|
21
|
-
visibleColumnsRef.current = columnItems.filter(
|
|
22
|
-
({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1
|
|
23
|
-
);
|
|
24
|
-
} else {
|
|
25
|
-
visibleColumnsRef.current = void 0;
|
|
26
|
-
}
|
|
27
|
-
}, [columnItems, searchState.searchText]);
|
|
28
|
-
const handleChangeSearchInput = useCallback((evt) => {
|
|
29
|
-
const { value } = evt.target;
|
|
30
|
-
setSearchState({
|
|
31
|
-
searchText: value
|
|
32
|
-
});
|
|
33
|
-
}, []);
|
|
34
|
-
const handleChangeListItem = useCallback(
|
|
35
|
-
({ target }) => {
|
|
36
|
-
const input = target;
|
|
37
|
-
const listItem = queryClosest(target, `.${classBaseListItem}`);
|
|
38
|
-
if (listItem) {
|
|
39
|
-
const {
|
|
40
|
-
dataset: { name }
|
|
41
|
-
} = listItem;
|
|
42
|
-
if (name) {
|
|
43
|
-
const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);
|
|
44
|
-
const saltSwitch = queryClosest(target, `.${classBase}-switch`);
|
|
45
|
-
if (saltCheckbox && !hideOnly) {
|
|
46
|
-
onChange(name, "subscribed", input.checked);
|
|
47
|
-
} else if (saltSwitch || hideOnly) {
|
|
48
|
-
onChange(name, "hidden", input.checked === false);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
[classBase, classBaseListItem, hideOnly, onChange]
|
|
54
|
-
);
|
|
55
|
-
return {
|
|
56
|
-
onChangeSearchInput: handleChangeSearchInput,
|
|
57
|
-
onChangeListItem: handleChangeListItem,
|
|
58
|
-
searchState,
|
|
59
|
-
visibleColumnItems: visibleColumnsRef.current ?? columnItems
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
export { useColumnList };
|
|
64
|
-
//# sourceMappingURL=useColumnList.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/useColumnList.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n FormEventHandler,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\n\nexport type ColumnChangeHandler = (\n columnName: string,\n propertyName: keyof ColumnDescriptor | \"subscribed\",\n value: string | number | boolean,\n) => void;\n\nexport type ColumnItem = Pick<\n ColumnDescriptor,\n \"hidden\" | \"label\" | \"name\" | \"serverDataType\"\n> & {\n isCalculated: boolean;\n subscribed: boolean;\n};\n\nexport interface ColumnSearchProps {\n classBase: string;\n classBaseListItem: string;\n columnItems: ColumnItem[];\n onChange: ColumnChangeHandler;\n permissions: ColumnListPermissions;\n}\n\nexport const useColumnList = ({\n classBase,\n classBaseListItem,\n columnItems,\n onChange,\n permissions: { allowHideColumns, allowRemoveColumns },\n}: ColumnSearchProps) => {\n const [searchState, setSearchState] = useState<{\n searchText: string;\n }>({ searchText: \"\" });\n\n const visibleColumnsRef = useRef<ColumnItem[] | undefined>(undefined);\n\n const hideOnly = useMemo(\n () => allowHideColumns && !allowRemoveColumns,\n [allowHideColumns, allowRemoveColumns],\n );\n\n useMemo(() => {\n const value = searchState.searchText.toLowerCase();\n if (value) {\n const pattern = value.toLowerCase();\n visibleColumnsRef.current = columnItems.filter(\n ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1,\n );\n } else {\n visibleColumnsRef.current = undefined;\n }\n }, [columnItems, searchState.searchText]);\n\n const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n const { value } = evt.target as HTMLInputElement;\n setSearchState({\n searchText: value,\n });\n }, []);\n\n const handleChangeListItem = useCallback(\n ({ target }: SyntheticEvent) => {\n const input = target as HTMLInputElement;\n const listItem = queryClosest(target, `.${classBaseListItem}`);\n if (listItem) {\n const {\n dataset: { name },\n } = listItem;\n if (name) {\n const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n if (saltCheckbox && !hideOnly) {\n onChange(name, \"subscribed\", input.checked);\n } else if (saltSwitch || hideOnly) {\n onChange(name, \"hidden\", input.checked === false);\n }\n }\n }\n },\n [classBase, classBaseListItem, hideOnly, onChange],\n );\n\n return {\n onChangeSearchInput: handleChangeSearchInput,\n onChangeListItem: handleChangeListItem,\n searchState,\n visibleColumnItems: visibleColumnsRef.current ?? columnItems,\n };\n};\n"],"names":[],"mappings":";;;AAoCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,EAAa,EAAE,gBAAA,EAAkB,kBAAmB;AACtD,CAAyB,KAAA;AACvB,EAAM,MAAA,CAAC,aAAa,cAAc,CAAA,GAAI,SAEnC,EAAE,UAAA,EAAY,IAAI,CAAA;AAErB,EAAM,MAAA,iBAAA,GAAoB,OAAiC,KAAS,CAAA,CAAA;AAEpE,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MAAM,oBAAoB,CAAC,kBAAA;AAAA,IAC3B,CAAC,kBAAkB,kBAAkB;AAAA,GACvC;AAEA,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,UAAA,CAAW,WAAY,EAAA;AACjD,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,OAAA,GAAU,MAAM,WAAY,EAAA;AAClC,MAAA,iBAAA,CAAkB,UAAU,WAAY,CAAA,MAAA;AAAA,QACtC,CAAC,EAAE,IAAA,EAAM,KAAQ,GAAA,IAAA,EAAW,KAAA,KAAA,CAAM,WAAY,EAAA,CAAE,OAAQ,CAAA,OAAO,CAAM,KAAA,CAAA;AAAA,OACvE;AAAA,KACK,MAAA;AACL,MAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA;AAC9B,GACC,EAAA,CAAC,WAAa,EAAA,WAAA,CAAY,UAAU,CAAC,CAAA;AAExC,EAAM,MAAA,uBAAA,GAA0B,WAA8B,CAAA,CAAC,GAAQ,KAAA;AACrE,IAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,IAAe,cAAA,CAAA;AAAA,MACb,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,EAAE,MAAA,EAA6B,KAAA;AAC9B,MAAA,MAAM,KAAQ,GAAA,MAAA;AACd,MAAA,MAAM,QAAW,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,iBAAiB,CAAE,CAAA,CAAA;AAC7D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAM,MAAA;AAAA,UACJ,OAAA,EAAS,EAAE,IAAK;AAAA,SACd,GAAA,QAAA;AACJ,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,MAAM,YAAe,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAW,SAAA,CAAA,CAAA;AAClE,UAAA,MAAM,UAAa,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAS,OAAA,CAAA,CAAA;AAE9D,UAAI,IAAA,YAAA,IAAgB,CAAC,QAAU,EAAA;AAC7B,YAAS,QAAA,CAAA,IAAA,EAAM,YAAc,EAAA,KAAA,CAAM,OAAO,CAAA;AAAA,WAC5C,MAAA,IAAW,cAAc,QAAU,EAAA;AACjC,YAAA,QAAA,CAAS,IAAM,EAAA,QAAA,EAAU,KAAM,CAAA,OAAA,KAAY,KAAK,CAAA;AAAA;AAClD;AACF;AACF,KACF;AAAA,IACA,CAAC,SAAA,EAAW,iBAAmB,EAAA,QAAA,EAAU,QAAQ;AAAA,GACnD;AAEA,EAAO,OAAA;AAAA,IACL,mBAAqB,EAAA,uBAAA;AAAA,IACrB,gBAAkB,EAAA,oBAAA;AAAA,IAClB,WAAA;AAAA,IACA,kBAAA,EAAoB,kBAAkB,OAAW,IAAA;AAAA,GACnD;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnNameLabel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/ColumnNameLabel.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n getCalculatedColumnDetails,\n isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler } from \"react\";\n\nimport columnNameLabelCss from \"./ColumnNameLabel.css\";\n\nconst classBase = \"vuuColumnNameLabel\";\n\nexport interface ColumnNameLabelProps {\n column: ColumnDescriptor;\n onClick: MouseEventHandler;\n}\n\nexport const ColumnNameLabel = ({ column, onClick }: ColumnNameLabelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-label\",\n css: columnNameLabelCss,\n window: targetWindow,\n });\n\n if (isCalculatedColumn(column.name)) {\n const { name, serverDataType, expression } =\n getCalculatedColumnDetails(column);\n const displayName = name || \"name\";\n const displayExpression = \"=expression\";\n\n const nameClass =\n displayName === \"name\" ? `${classBase}-placeholder` : undefined;\n const expressionClass =\n expression === \"\" ? `${classBase}-placeholder` : undefined;\n return (\n <div\n className={cx(classBase, `${classBase}-calculated`)}\n onClick={onClick}\n >\n <span className={nameClass}>{displayName}</span>\n <span>:</span>\n <span>{serverDataType || \"string\"}</span>\n <span>:</span>\n <span className={expressionClass}>{displayExpression}</span>\n <span className={`${classBase}-edit`} data-icon=\"edit\" />\n </div>\n );\n } else {\n return <div className={classBase}>{column.name}</div>;\n }\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,SAAY,GAAA,oBAAA;AAOX,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAoC,KAAA;AAC5E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,kBAAA,CAAmB,MAAO,CAAA,IAAI,CAAG,EAAA;AACnC,IAAA,MAAM,EAAE,IAAM,EAAA,cAAA,EAAgB,UAAW,EAAA,GACvC,2BAA2B,MAAM,CAAA;AACnC,IAAA,MAAM,cAAc,IAAQ,IAAA,MAAA;AAC5B,IAAA,MAAM,iBAAoB,GAAA,aAAA;AAE1B,IAAA,MAAM,SACJ,GAAA,WAAA,KAAgB,MAAS,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA;AACxD,IAAA,MAAM,eACJ,GAAA,UAAA,KAAe,EAAK,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA;AACnD,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,QAClD,OAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,SAAA,EAAY,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,0BACzC,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACP,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,cAAA,IAAkB,QAAS,EAAA,CAAA;AAAA,0BAClC,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACN,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,eAAA,EAAkB,QAAkB,EAAA,iBAAA,EAAA,CAAA;AAAA,8BACpD,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,aAAU,MAAO,EAAA;AAAA;AAAA;AAAA,KACzD;AAAA,GAEG,MAAA;AACL,IAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAY,iBAAO,IAAK,EAAA,CAAA;AAAA;AAEnD;;;;"}
|
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
|
|
3
|
-
import { getDefaultAlignment, isCalculatedColumn, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
|
|
4
|
-
import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
|
|
5
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import cx from 'clsx';
|
|
8
|
-
import { ColumnExpressionPanel } from '../column-expression-panel/ColumnExpressionPanel.js';
|
|
9
|
-
import { ColumnFormattingPanel } from '../column-formatting-settings/ColumnFormattingPanel.js';
|
|
10
|
-
import 'react';
|
|
11
|
-
import { ColumnNameLabel } from './ColumnNameLabel.js';
|
|
12
|
-
import { useColumnSettings } from './useColumnSettings.js';
|
|
13
|
-
import colunSettingsPanelCss from './ColumnSettingsPanel.css.js';
|
|
14
|
-
|
|
15
|
-
const classBase = "vuuColumnSettingsPanel";
|
|
16
|
-
const getColumnLabel = (column) => {
|
|
17
|
-
const { name, label } = column;
|
|
18
|
-
if (isCalculatedColumn(name)) {
|
|
19
|
-
return label ?? getCalculatedColumnDetails(column).name;
|
|
20
|
-
} else {
|
|
21
|
-
return label ?? name;
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
const ColumnSettingsPanel = ({
|
|
25
|
-
column: columnProp,
|
|
26
|
-
onCancelCreateColumn,
|
|
27
|
-
onConfigChange,
|
|
28
|
-
onCreateCalculatedColumn,
|
|
29
|
-
tableConfig,
|
|
30
|
-
vuuTable
|
|
31
|
-
}) => {
|
|
32
|
-
const targetWindow = useWindow();
|
|
33
|
-
useComponentCssInjection({
|
|
34
|
-
testId: "vuu-column-settings-panel",
|
|
35
|
-
css: colunSettingsPanelCss,
|
|
36
|
-
window: targetWindow
|
|
37
|
-
});
|
|
38
|
-
const isNewCalculatedColumn = columnProp.name === "::";
|
|
39
|
-
const {
|
|
40
|
-
availableRenderers,
|
|
41
|
-
editCalculatedColumn,
|
|
42
|
-
column,
|
|
43
|
-
navigateNextColumn,
|
|
44
|
-
navigatePrevColumn,
|
|
45
|
-
onCancel,
|
|
46
|
-
onChange,
|
|
47
|
-
onChangeCalculatedColumnName,
|
|
48
|
-
onChangeFormatting,
|
|
49
|
-
onChangeRendering,
|
|
50
|
-
onChangeServerDataType,
|
|
51
|
-
onChangeToggleButton,
|
|
52
|
-
onChangeType,
|
|
53
|
-
onEditCalculatedColumn,
|
|
54
|
-
onInputCommit,
|
|
55
|
-
onSave
|
|
56
|
-
} = useColumnSettings({
|
|
57
|
-
column: columnProp,
|
|
58
|
-
onCancelCreateColumn,
|
|
59
|
-
onConfigChange,
|
|
60
|
-
onCreateCalculatedColumn,
|
|
61
|
-
tableConfig
|
|
62
|
-
});
|
|
63
|
-
const {
|
|
64
|
-
serverDataType,
|
|
65
|
-
align = getDefaultAlignment(serverDataType),
|
|
66
|
-
pin,
|
|
67
|
-
width
|
|
68
|
-
} = column;
|
|
69
|
-
return /* @__PURE__ */ jsxs(
|
|
70
|
-
"div",
|
|
71
|
-
{
|
|
72
|
-
className: cx(classBase, {
|
|
73
|
-
[`${classBase}-editing`]: editCalculatedColumn
|
|
74
|
-
}),
|
|
75
|
-
children: [
|
|
76
|
-
/* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
|
|
77
|
-
editCalculatedColumn ? /* @__PURE__ */ jsx(
|
|
78
|
-
ColumnExpressionPanel,
|
|
79
|
-
{
|
|
80
|
-
column,
|
|
81
|
-
onChangeName: onChangeCalculatedColumnName,
|
|
82
|
-
onChangeServerDataType,
|
|
83
|
-
tableConfig,
|
|
84
|
-
vuuTable
|
|
85
|
-
}
|
|
86
|
-
) : null,
|
|
87
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": "column-label", children: [
|
|
88
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Label" }),
|
|
89
|
-
/* @__PURE__ */ jsx(
|
|
90
|
-
VuuInput,
|
|
91
|
-
{
|
|
92
|
-
className: "vuuInput",
|
|
93
|
-
"data-embedded": true,
|
|
94
|
-
onChange,
|
|
95
|
-
onCommit: onInputCommit,
|
|
96
|
-
value: getColumnLabel(column)
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
] }),
|
|
100
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": "column-width", children: [
|
|
101
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
|
|
102
|
-
/* @__PURE__ */ jsx(
|
|
103
|
-
VuuInput,
|
|
104
|
-
{
|
|
105
|
-
className: "vuuInput",
|
|
106
|
-
"data-embedded": true,
|
|
107
|
-
onChange,
|
|
108
|
-
value: width,
|
|
109
|
-
onCommit: onInputCommit
|
|
110
|
-
}
|
|
111
|
-
)
|
|
112
|
-
] }),
|
|
113
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": "column-alignment", children: [
|
|
114
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Alignment" }),
|
|
115
|
-
/* @__PURE__ */ jsxs(ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
|
|
116
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "align-left", size: 16 }) }),
|
|
117
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "align-right", size: 16 }) })
|
|
118
|
-
] })
|
|
119
|
-
] }),
|
|
120
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": "column-pin", children: [
|
|
121
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Pin Column" }),
|
|
122
|
-
/* @__PURE__ */ jsxs(
|
|
123
|
-
ToggleButtonGroup,
|
|
124
|
-
{
|
|
125
|
-
onChange: onChangeToggleButton,
|
|
126
|
-
value: pin || "false",
|
|
127
|
-
children: [
|
|
128
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "pin-left", size: 16 }) }),
|
|
129
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "floating", children: /* @__PURE__ */ jsx(Icon, { name: "pin-float", size: 16 }) }),
|
|
130
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "pin-right", size: 16 }) }),
|
|
131
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "", children: /* @__PURE__ */ jsx(Icon, { name: "cross-circle", size: 16 }) })
|
|
132
|
-
]
|
|
133
|
-
}
|
|
134
|
-
)
|
|
135
|
-
] }),
|
|
136
|
-
/* @__PURE__ */ jsx(
|
|
137
|
-
ColumnFormattingPanel,
|
|
138
|
-
{
|
|
139
|
-
availableRenderers,
|
|
140
|
-
column,
|
|
141
|
-
onChangeFormatting,
|
|
142
|
-
onChangeRendering,
|
|
143
|
-
onChangeColumnType: onChangeType
|
|
144
|
-
}
|
|
145
|
-
),
|
|
146
|
-
editCalculatedColumn ? /* @__PURE__ */ jsxs("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
|
|
147
|
-
/* @__PURE__ */ jsx(
|
|
148
|
-
Button,
|
|
149
|
-
{
|
|
150
|
-
className: `${classBase}-buttonCancel`,
|
|
151
|
-
onClick: onCancel,
|
|
152
|
-
tabIndex: -1,
|
|
153
|
-
children: "cancel"
|
|
154
|
-
}
|
|
155
|
-
),
|
|
156
|
-
/* @__PURE__ */ jsx(
|
|
157
|
-
Button,
|
|
158
|
-
{
|
|
159
|
-
className: `${classBase}-buttonSave`,
|
|
160
|
-
onClick: onSave,
|
|
161
|
-
variant: "cta",
|
|
162
|
-
children: "save"
|
|
163
|
-
}
|
|
164
|
-
)
|
|
165
|
-
] }) : /* @__PURE__ */ jsxs(
|
|
166
|
-
"div",
|
|
167
|
-
{
|
|
168
|
-
className: `${classBase}-buttonBar`,
|
|
169
|
-
"data-align": isNewCalculatedColumn ? "right" : void 0,
|
|
170
|
-
children: [
|
|
171
|
-
/* @__PURE__ */ jsx(
|
|
172
|
-
Button,
|
|
173
|
-
{
|
|
174
|
-
className: `${classBase}-buttonNavPrev`,
|
|
175
|
-
variant: "secondary",
|
|
176
|
-
"data-icon": "arrow-left",
|
|
177
|
-
onClick: navigatePrevColumn,
|
|
178
|
-
children: "PREVIOUS"
|
|
179
|
-
}
|
|
180
|
-
),
|
|
181
|
-
/* @__PURE__ */ jsx(
|
|
182
|
-
Button,
|
|
183
|
-
{
|
|
184
|
-
className: `${classBase}-buttonNavNext`,
|
|
185
|
-
variant: "secondary",
|
|
186
|
-
"data-icon": "arrow-right",
|
|
187
|
-
onClick: navigateNextColumn,
|
|
188
|
-
children: "NEXT"
|
|
189
|
-
}
|
|
190
|
-
)
|
|
191
|
-
]
|
|
192
|
-
}
|
|
193
|
-
)
|
|
194
|
-
]
|
|
195
|
-
}
|
|
196
|
-
);
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
export { ColumnSettingsPanel };
|
|
200
|
-
//# sourceMappingURL=ColumnSettingsPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/table-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 getCalculatedColumnDetails,\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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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 colunSettingsPanelCss from \"./ColumnSettingsPanel.css\";\n\nconst classBase = \"vuuColumnSettingsPanel\";\n\nconst getColumnLabel = (column: ColumnDescriptor) => {\n const { name, label } = column;\n if (isCalculatedColumn(name)) {\n return label ?? getCalculatedColumnDetails(column).name;\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 targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-settings-panel\",\n css: colunSettingsPanelCss,\n window: targetWindow,\n });\n\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\n onChange={onChangeToggleButton}\n value={pin || \"false\"}\n >\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":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n Button,\n FormField,\n FormFieldLabel,\n ToggleButton,\n ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n TableSettingsPermissions,\n TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\nexport const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions> =\n {\n allowColumnLabelCase: true,\n allowColumnDefaultWidth: true,\n allowGridSeparators: true,\n allowReorderColumns: true,\n allowRemoveColumns: true,\n allowHideColumns: true,\n allowCalculatedColumns: true,\n };\nexport const noTableSettingsPermissions: Readonly<TableSettingsPermissions> = {\n allowColumnLabelCase: false,\n allowColumnDefaultWidth: false,\n allowGridSeparators: false,\n allowReorderColumns: false,\n allowRemoveColumns: false,\n allowHideColumns: false,\n allowCalculatedColumns: false,\n};\n\n/**\n The TableSettingsPanel assumes 'ownership' of the tableSettings.\n It updates the settings in state locally and notifies caller of\n every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n availableColumns,\n onAddCalculatedColumn,\n onConfigChange,\n onDataSourceConfigChange,\n onNavigateToColumn,\n tableConfig: tableConfigProp,\n permissions: permissionsProp,\n}: TableSettingsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-settings-panel\",\n css: tableSettingsPanelCss,\n window: targetWindow,\n });\n\n const permissions =\n permissionsProp === undefined || permissionsProp === true\n ? defaultTableSettingsPermissions\n : permissionsProp === false\n ? noTableSettingsPermissions\n : permissionsProp;\n\n const {\n columnItems,\n columnLabelsValue,\n onChangeColumnLabels,\n onChangeTableAttribute,\n onReorderColumnItems,\n onColumnChange,\n onCommitColumnWidth,\n tableConfig,\n } = useTableSettings({\n availableColumns,\n onConfigChange,\n onDataSourceConfigChange,\n tableConfig: tableConfigProp,\n });\n\n const {\n allowColumnLabelCase = true,\n allowColumnDefaultWidth = true,\n allowGridSeparators = true,\n allowCalculatedColumns = true,\n ...columnListPermissions\n } = permissions;\n\n return (\n <div className={classBase}>\n {allowColumnLabelCase ||\n allowColumnDefaultWidth ||\n allowGridSeparators ? (\n <div className={`${classBase}-header`}>\n <span>Column Settings</span>\n </div>\n ) : null}\n\n {allowColumnDefaultWidth ? (\n <FormField>\n <FormFieldLabel>Column Width</FormFieldLabel>\n <VuuInput\n className=\"vuuInput\"\n data-embedded\n onCommit={onCommitColumnWidth}\n />\n </FormField>\n ) : null}\n\n {allowColumnLabelCase ? (\n <FormField>\n <FormFieldLabel>Column Labels</FormFieldLabel>\n <ToggleButtonGroup\n className=\"vuuToggleButtonGroup\"\n onChange={onChangeColumnLabels}\n value={columnLabelsValue}\n >\n <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n <Icon name=\"text-strikethrough\" size={48} />\n </ToggleButton>\n <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n <Icon name=\"text-Tt\" size={48} />\n </ToggleButton>\n <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n <Icon name=\"text-T\" size={48} />\n </ToggleButton>\n </ToggleButtonGroup>\n </FormField>\n ) : null}\n\n {allowGridSeparators ? (\n <FormField>\n <FormFieldLabel>Grid separators</FormFieldLabel>\n <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n <ToggleButton\n selected={tableConfig.zebraStripes ?? false}\n onChange={onChangeTableAttribute}\n value=\"zebraStripes\"\n >\n <Icon name=\"row-striping\" size={16} />\n </ToggleButton>\n <ToggleButton\n selected={tableConfig.rowSeparators ?? false}\n onChange={onChangeTableAttribute}\n value=\"rowSeparators\"\n >\n <Icon name=\"row-lines\" size={16} />\n </ToggleButton>\n <ToggleButton\n selected={tableConfig.columnSeparators ?? false}\n onChange={onChangeTableAttribute}\n value=\"columnSeparators\"\n >\n <Icon name=\"col-lines\" size={16} />\n </ToggleButton>\n </div>\n </FormField>\n ) : null}\n\n <div className={cx(`${classBase}-columnListContainer`, \"vuuScrollable\")}>\n <ColumnList\n columnItems={columnItems}\n permissions={columnListPermissions}\n onChange={onColumnChange}\n onNavigateToColumn={onNavigateToColumn}\n onReorderColumnItems={onReorderColumnItems}\n />\n </div>\n\n {allowCalculatedColumns ? (\n <div className={`${classBase}-calculatedButtonbar`}>\n <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n <span className={`${classBase}-calculatedLabel`}>\n Add calculated column\n </span>\n </div>\n ) : null}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useColumnSettings.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n TableConfig,\n ColumnTypeFormatting,\n ColumnSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\n\nimport {\n CellRendererDescriptor,\n ColumnRenderPropsChangeHandler,\n getFieldName,\n getRegisteredCellRenderers,\n isValidColumnAlignment,\n isValidPinLocation,\n setCalculatedColumnName,\n updateColumnRenderProps,\n updateColumnFormatting,\n updateColumnType,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n FormEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DataValueTypeSimple } from \"@vuu-ui/vuu-data-types\";\n\nconst integerCellRenderers: CellRendererDescriptor[] = [\n {\n description: \"Default formatter for columns with data type integer\",\n label: \"Default Renderer (int, long)\",\n name: \"default-int\",\n },\n];\nconst doubleCellRenderers: CellRendererDescriptor[] = [\n {\n description: \"Default formatter for columns with data type double\",\n label: \"Default Renderer (double)\",\n name: \"default-double\",\n },\n];\nconst decimalCellRenderers: CellRendererDescriptor[] = [\n {\n description:\n \"Default formatter for columns with data type decimal (2,4,6 or 8)\",\n label: \"Default Renderer (decimal)\",\n name: \"default-decimal\",\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(\n getRegisteredCellRenderers(column.serverDataType),\n );\n case \"scaleddecimal2\":\n case \"scaleddecimal4\":\n case \"scaleddecimal6\":\n case \"scaleddecimal8\":\n return decimalCellRenderers.concat(\n getRegisteredCellRenderers(column.serverDataType),\n );\n case \"boolean\":\n return booleanCellRenderers.concat(getRegisteredCellRenderers(\"boolean\"));\n default:\n return stringCellRenderers;\n }\n};\n\nconst getColumn = (\n columns: readonly ColumnDescriptor[],\n column: ColumnDescriptor,\n) => {\n if (column.name === \"::\") {\n // this is a new calculated column\n return column;\n } else {\n const col = columns.find((col) => col.name === column.name);\n if (col) {\n return col;\n }\n throw Error(`columns does not contain column ${name}`);\n }\n};\n\nconst replaceColumn = (\n tableConfig: TableConfig,\n column: ColumnDescriptor,\n): TableConfig => ({\n ...tableConfig,\n columns: tableConfig.columns.map((col) =>\n col.name === column.name ? column : col,\n ),\n});\n\nexport const useColumnSettings = ({\n column: columnProp,\n onCancelCreateColumn,\n onConfigChange,\n onCreateCalculatedColumn,\n tableConfig,\n}: Omit<ColumnSettingsProps, \"vuuTable\">) => {\n const [column, setColumn] = useState<ColumnDescriptor>(\n getColumn(tableConfig.columns, columnProp),\n );\n const columnRef = useRef<ColumnDescriptor>(column);\n const [inEditMode, setEditMode] = useState(column.name === \"::\");\n\n const handleEditCalculatedcolumn = useCallback(() => {\n columnRef.current = column;\n setEditMode(true);\n }, [column]);\n\n useEffect(() => {\n setColumn(columnProp);\n setEditMode(columnProp.name === \"::\");\n }, [columnProp]);\n\n const availableRenderers = useMemo(() => {\n return getAvailableCellRenderers(column);\n }, [column]);\n\n const handleInputCommit = useCallback(() => {\n onConfigChange(replaceColumn(tableConfig, column));\n }, [column, onConfigChange, tableConfig]);\n\n const handleChangeToggleButton = useCallback<FormEventHandler>(\n (evt) => {\n const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n if (button) {\n const fieldName = getFieldName(button);\n const { value } = button;\n switch (fieldName) {\n case \"column-alignment\":\n if (isValidColumnAlignment(value)) {\n const newColumn: ColumnDescriptor = {\n ...column,\n align: value || undefined,\n };\n setColumn(newColumn);\n onConfigChange(replaceColumn(tableConfig, newColumn));\n }\n break;\n case \"column-pin\":\n if (isValidPinLocation(value)) {\n const newColumn: ColumnDescriptor = {\n ...column,\n pin: value || undefined,\n };\n setColumn(newColumn);\n onConfigChange(replaceColumn(tableConfig, newColumn));\n\n break;\n }\n }\n }\n },\n [column, onConfigChange, tableConfig],\n );\n\n const handleChange = useCallback<FormEventHandler>((evt) => {\n const input = evt.target as HTMLInputElement;\n const fieldName = getFieldName(input);\n const { value } = input;\n switch (fieldName) {\n case \"column-label\":\n setColumn((state) => ({ ...state, label: value }));\n break;\n case \"column-name\":\n setColumn((state) => setCalculatedColumnName(state, value));\n break;\n case \"column-width\":\n setColumn((state) => ({ ...state, width: parseInt(value) }));\n break;\n }\n }, []);\n\n const handleChangeCalculatedColumnName = useCallback((name: string) => {\n setColumn((state) => ({ ...state, name }));\n }, []);\n\n const handleChangeFormatting = useCallback(\n (formatting: ColumnTypeFormatting) => {\n const newColumn = updateColumnFormatting(column, formatting);\n setColumn(newColumn);\n onConfigChange(replaceColumn(tableConfig, newColumn));\n },\n [column, onConfigChange, tableConfig],\n );\n\n const handleChangeType = useCallback(\n (type: DataValueTypeSimple) => {\n const updatedColumn = updateColumnType(column, type);\n setColumn(updatedColumn);\n onConfigChange(replaceColumn(tableConfig, updatedColumn));\n },\n [column, onConfigChange, tableConfig],\n );\n\n // Changing the server data type applies only to calculated columns\n const handleChangeServerDataType = useCallback(\n (serverDataType: VuuColumnDataType) => {\n setColumn((col) => ({ ...col, serverDataType }));\n },\n [],\n );\n\n const handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(\n (renderProps) => {\n if (renderProps) {\n const newColumn: ColumnDescriptor = updateColumnRenderProps(\n column,\n renderProps,\n );\n setColumn(newColumn);\n onConfigChange(replaceColumn(tableConfig, newColumn));\n }\n },\n [column, onConfigChange, tableConfig],\n );\n\n const navigateColumn = useCallback(\n ({ moveBy }: { moveBy: number }) => {\n const { columns } = tableConfig;\n const index = columns.indexOf(column) + moveBy;\n const newColumn = columns[index];\n if (newColumn) {\n setColumn(newColumn);\n }\n },\n [column, tableConfig],\n );\n const navigateNextColumn = useCallback(() => {\n navigateColumn({ moveBy: 1 });\n }, [navigateColumn]);\n\n const navigatePrevColumn = useCallback(() => {\n navigateColumn({ moveBy: -1 });\n }, [navigateColumn]);\n\n const handleSaveCalculatedColumn = useCallback(() => {\n // TODO validate expression, unique name\n onCreateCalculatedColumn(column);\n }, [column, onCreateCalculatedColumn]);\n\n const handleCancelEdit = useCallback(() => {\n if (columnProp.name === \"::\") {\n onCancelCreateColumn();\n } else {\n if (columnRef.current !== undefined && columnRef.current !== column) {\n setColumn(columnRef.current);\n }\n setEditMode(false);\n }\n }, [column, columnProp.name, onCancelCreateColumn]);\n\n return {\n availableRenderers,\n editCalculatedColumn: inEditMode,\n column,\n navigateNextColumn,\n navigatePrevColumn,\n onCancel: handleCancelEdit,\n onChange: handleChange,\n onChangeCalculatedColumnName: handleChangeCalculatedColumnName,\n onChangeFormatting: handleChangeFormatting,\n onChangeRendering: handleChangeRendering,\n onChangeServerDataType: handleChangeServerDataType,\n onChangeToggleButton: handleChangeToggleButton,\n onChangeType: handleChangeType,\n onEditCalculatedColumn: handleEditCalculatedcolumn,\n onInputCommit: handleInputCommit,\n onSave: handleSaveCalculatedColumn,\n };\n};\n"],"names":["col","name"],"mappings":"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"}
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
|
|
3
|
-
import { useRef, useState, useCallback } from 'react';
|
|
4
|
-
import { useContextPanel } from '@vuu-ui/vuu-ui-controls';
|
|
5
|
-
import { defaultTableSettingsPermissions, TableSettingsPanel } from './TableSettingsPanel.js';
|
|
6
|
-
|
|
7
|
-
const columnSettingsFromColumnMenuPermissions = (settings) => typeof settings === void 0 ? true : typeof settings === "boolean" ? settings : settings?.allowColumnSettings ?? true;
|
|
8
|
-
const tableSettingsFromColumnMenuPermissions = (settings) => typeof settings === void 0 ? defaultTableSettingsPermissions : typeof settings === "boolean" ? settings : settings?.allowTableSettings ?? defaultTableSettingsPermissions;
|
|
9
|
-
const useTableAndColumnSettings = ({
|
|
10
|
-
availableColumns: availableColumnsProps,
|
|
11
|
-
settingsPermissions,
|
|
12
|
-
onAvailableColumnsChange,
|
|
13
|
-
onConfigChange,
|
|
14
|
-
onCreateCalculatedColumn,
|
|
15
|
-
onDataSourceConfigChange,
|
|
16
|
-
tableConfig
|
|
17
|
-
}) => {
|
|
18
|
-
const showTableSettingsRef = useRef(void 0);
|
|
19
|
-
const [availableColumns, setAvailableColumns] = useState(availableColumnsProps);
|
|
20
|
-
const showContextPanel = useContextPanel();
|
|
21
|
-
const handleCancelCreateColumn = useCallback(() => {
|
|
22
|
-
requestAnimationFrame(() => {
|
|
23
|
-
showTableSettingsRef.current?.();
|
|
24
|
-
});
|
|
25
|
-
}, []);
|
|
26
|
-
const handleCreateCalculatedColumn = useCallback(
|
|
27
|
-
(column) => {
|
|
28
|
-
const { serverDataType } = getCalculatedColumnDetails(column);
|
|
29
|
-
if (serverDataType) {
|
|
30
|
-
const newAvailableColumns = availableColumns.concat({
|
|
31
|
-
name: column.name,
|
|
32
|
-
serverDataType
|
|
33
|
-
});
|
|
34
|
-
setAvailableColumns(newAvailableColumns);
|
|
35
|
-
onAvailableColumnsChange?.(newAvailableColumns);
|
|
36
|
-
requestAnimationFrame(() => {
|
|
37
|
-
showTableSettingsRef.current?.();
|
|
38
|
-
});
|
|
39
|
-
onCreateCalculatedColumn(column);
|
|
40
|
-
} else {
|
|
41
|
-
throw Error(
|
|
42
|
-
"Cannot create calculatec columns without valis serverDataType"
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
[availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
|
|
47
|
-
);
|
|
48
|
-
const showColumnSettingsPanel = useCallback(
|
|
49
|
-
(action) => {
|
|
50
|
-
showContextPanel("ColumnSettings", "Column Settings", {
|
|
51
|
-
column: action.column,
|
|
52
|
-
onCancelCreateColumn: handleCancelCreateColumn,
|
|
53
|
-
onConfigChange,
|
|
54
|
-
onCreateCalculatedColumn: handleCreateCalculatedColumn,
|
|
55
|
-
tableConfig,
|
|
56
|
-
vuuTable: action.vuuTable
|
|
57
|
-
});
|
|
58
|
-
},
|
|
59
|
-
[
|
|
60
|
-
handleCancelCreateColumn,
|
|
61
|
-
handleCreateCalculatedColumn,
|
|
62
|
-
onConfigChange,
|
|
63
|
-
showContextPanel,
|
|
64
|
-
tableConfig
|
|
65
|
-
]
|
|
66
|
-
);
|
|
67
|
-
const handleAddCalculatedColumn = useCallback(() => {
|
|
68
|
-
showColumnSettingsPanel({
|
|
69
|
-
column: {
|
|
70
|
-
name: "::",
|
|
71
|
-
serverDataType: "string"
|
|
72
|
-
},
|
|
73
|
-
type: "column-settings",
|
|
74
|
-
vuuTable: { module: "SIMUL", table: "instruments" }
|
|
75
|
-
});
|
|
76
|
-
}, [showColumnSettingsPanel]);
|
|
77
|
-
const handleNavigateToColumn = useCallback(
|
|
78
|
-
(columnName) => {
|
|
79
|
-
const column = tableConfig.columns.find((c) => c.name === columnName);
|
|
80
|
-
if (column) {
|
|
81
|
-
showColumnSettingsPanel({
|
|
82
|
-
type: "column-settings",
|
|
83
|
-
column,
|
|
84
|
-
//TODO where do we get this from
|
|
85
|
-
vuuTable: { module: "SIMUL", table: "instruments" }
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
},
|
|
89
|
-
[showColumnSettingsPanel, tableConfig.columns]
|
|
90
|
-
);
|
|
91
|
-
showTableSettingsRef.current = useCallback(() => {
|
|
92
|
-
const tableSettings = /* @__PURE__ */ jsx(
|
|
93
|
-
TableSettingsPanel,
|
|
94
|
-
{
|
|
95
|
-
availableColumns: availableColumns ?? tableConfig.columns.map(({ name, serverDataType }) => ({
|
|
96
|
-
name,
|
|
97
|
-
serverDataType
|
|
98
|
-
})),
|
|
99
|
-
onAddCalculatedColumn: handleAddCalculatedColumn,
|
|
100
|
-
onConfigChange,
|
|
101
|
-
onDataSourceConfigChange,
|
|
102
|
-
onNavigateToColumn: handleNavigateToColumn,
|
|
103
|
-
permissions: settingsPermissions?.allowTableSettings,
|
|
104
|
-
tableConfig
|
|
105
|
-
}
|
|
106
|
-
);
|
|
107
|
-
showContextPanel(tableSettings, "Table Settings");
|
|
108
|
-
}, [
|
|
109
|
-
availableColumns,
|
|
110
|
-
handleAddCalculatedColumn,
|
|
111
|
-
handleNavigateToColumn,
|
|
112
|
-
onConfigChange,
|
|
113
|
-
onDataSourceConfigChange,
|
|
114
|
-
settingsPermissions,
|
|
115
|
-
showContextPanel,
|
|
116
|
-
tableConfig
|
|
117
|
-
]);
|
|
118
|
-
return {
|
|
119
|
-
showColumnSettingsPanel,
|
|
120
|
-
showTableSettingsPanel: showTableSettingsRef.current
|
|
121
|
-
};
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
export { columnSettingsFromColumnMenuPermissions, tableSettingsFromColumnMenuPermissions, useTableAndColumnSettings };
|
|
125
|
-
//# sourceMappingURL=useTableAndColumnSettings.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTableAndColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableAndColumnSettings.tsx"],"sourcesContent":["import { DataSourceConfig, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n ColumnDescriptor,\n ColumnMenuPermissions,\n ColumnSettingsProps,\n SettingsPermissions,\n TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { DisplayColumnSettingsAction } from \"@vuu-ui/vuu-table-extras/src/column-menu/column-action-types\";\nimport { useContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n defaultTableSettingsPermissions,\n TableSettingsPanel,\n} from \"./TableSettingsPanel\";\n\nexport interface TableAndColumnSettingsHookProps {\n availableColumns: readonly SchemaColumn[];\n onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n onConfigChange: (config: TableConfig) => void;\n onCreateCalculatedColumn: (column: ColumnDescriptor) => void;\n onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;\n settingsPermissions?: SettingsPermissions;\n tableConfig: TableConfig;\n}\n\nexport const columnSettingsFromColumnMenuPermissions = (\n settings?: boolean | ColumnMenuPermissions,\n) =>\n typeof settings === undefined\n ? true\n : typeof settings === \"boolean\"\n ? settings\n : (settings?.allowColumnSettings ?? true);\nexport const tableSettingsFromColumnMenuPermissions = (\n settings?: boolean | ColumnMenuPermissions,\n) =>\n typeof settings === undefined\n ? defaultTableSettingsPermissions\n : typeof settings === \"boolean\"\n ? settings\n : (settings?.allowTableSettings ?? defaultTableSettingsPermissions);\n\nexport const useTableAndColumnSettings = ({\n availableColumns: availableColumnsProps,\n settingsPermissions,\n onAvailableColumnsChange,\n onConfigChange,\n onCreateCalculatedColumn,\n onDataSourceConfigChange,\n tableConfig,\n}: TableAndColumnSettingsHookProps) => {\n const showTableSettingsRef = useRef<() => void>(undefined);\n\n const [availableColumns, setAvailableColumns] = useState<\n readonly SchemaColumn[]\n >(availableColumnsProps);\n\n const showContextPanel = useContextPanel();\n\n const handleCancelCreateColumn = useCallback(() => {\n requestAnimationFrame(() => {\n showTableSettingsRef.current?.();\n });\n }, []);\n\n const handleCreateCalculatedColumn = useCallback(\n (column: ColumnDescriptor) => {\n const { serverDataType } = getCalculatedColumnDetails(column);\n if (serverDataType) {\n const newAvailableColumns = availableColumns.concat({\n name: column.name,\n serverDataType,\n });\n setAvailableColumns(newAvailableColumns);\n onAvailableColumnsChange?.(newAvailableColumns);\n requestAnimationFrame(() => {\n showTableSettingsRef.current?.();\n });\n onCreateCalculatedColumn(column);\n } else {\n throw Error(\n \"Cannot create calculatec columns without valis serverDataType\",\n );\n }\n },\n [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn],\n );\n\n const showColumnSettingsPanel = useCallback(\n (action: DisplayColumnSettingsAction) => {\n showContextPanel(\"ColumnSettings\", \"Column Settings\", {\n column: action.column,\n onCancelCreateColumn: handleCancelCreateColumn,\n onConfigChange,\n onCreateCalculatedColumn: handleCreateCalculatedColumn,\n tableConfig,\n vuuTable: action.vuuTable,\n } as ColumnSettingsProps);\n },\n [\n handleCancelCreateColumn,\n handleCreateCalculatedColumn,\n onConfigChange,\n showContextPanel,\n tableConfig,\n ],\n );\n\n const handleAddCalculatedColumn = useCallback(() => {\n showColumnSettingsPanel({\n column: {\n name: \"::\",\n serverDataType: \"string\",\n },\n type: \"column-settings\",\n vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n });\n }, [showColumnSettingsPanel]);\n\n const handleNavigateToColumn = useCallback(\n (columnName: string) => {\n const column = tableConfig.columns.find((c) => c.name === columnName);\n if (column) {\n showColumnSettingsPanel({\n type: \"column-settings\",\n column,\n //TODO where do we get this from\n vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n });\n }\n },\n [showColumnSettingsPanel, tableConfig.columns],\n );\n\n showTableSettingsRef.current = useCallback(() => {\n const tableSettings = (\n <TableSettingsPanel\n availableColumns={\n availableColumns ??\n tableConfig.columns.map(({ name, serverDataType }) => ({\n name,\n serverDataType,\n }))\n }\n onAddCalculatedColumn={handleAddCalculatedColumn}\n onConfigChange={onConfigChange}\n onDataSourceConfigChange={onDataSourceConfigChange}\n onNavigateToColumn={handleNavigateToColumn}\n permissions={settingsPermissions?.allowTableSettings}\n tableConfig={tableConfig}\n />\n );\n showContextPanel(tableSettings, \"Table Settings\");\n }, [\n availableColumns,\n handleAddCalculatedColumn,\n handleNavigateToColumn,\n onConfigChange,\n onDataSourceConfigChange,\n settingsPermissions,\n showContextPanel,\n tableConfig,\n ]);\n\n return {\n showColumnSettingsPanel,\n showTableSettingsPanel: showTableSettingsRef.current,\n };\n};\n"],"names":[],"mappings":"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"}
|