@vuu-ui/vuu-table-extras 0.8.56 → 0.8.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +7 -7
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +1 -1
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js +1 -1
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +38 -11
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -1
- package/cjs/column-expression-input/ColumnExpressionInput.css.js +1 -1
- package/cjs/column-expression-panel/ColumnExpressionPanel.js +13 -15
- package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +1 -1
- package/cjs/column-expression-panel/useColumnExpression.js +6 -6
- package/cjs/column-expression-panel/useColumnExpression.js.map +1 -1
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js +5 -8
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +1 -1
- package/cjs/column-formatting-settings/DateTimeFormattingSettings.js +22 -13
- package/cjs/column-formatting-settings/DateTimeFormattingSettings.js.map +1 -1
- package/cjs/column-settings/ColumnNameLabel.js +2 -2
- package/cjs/column-settings/ColumnNameLabel.js.map +1 -1
- package/cjs/column-settings/ColumnSettingsPanel.js +1 -1
- package/cjs/column-settings/ColumnSettingsPanel.js.map +1 -1
- package/cjs/column-settings/useColumnSettings.js +2 -13
- package/cjs/column-settings/useColumnSettings.js.map +1 -1
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +6 -6
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +1 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js +1 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js +40 -13
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -1
- package/esm/column-expression-input/ColumnExpressionInput.css.js +1 -1
- package/esm/column-expression-panel/ColumnExpressionPanel.js +14 -16
- package/esm/column-expression-panel/ColumnExpressionPanel.js.map +1 -1
- package/esm/column-expression-panel/useColumnExpression.js +6 -6
- package/esm/column-expression-panel/useColumnExpression.js.map +1 -1
- package/esm/column-formatting-settings/ColumnFormattingPanel.js +5 -8
- package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +1 -1
- package/esm/column-formatting-settings/DateTimeFormattingSettings.js +23 -14
- package/esm/column-formatting-settings/DateTimeFormattingSettings.js.map +1 -1
- package/esm/column-settings/ColumnNameLabel.js +2 -2
- package/esm/column-settings/ColumnNameLabel.js.map +1 -1
- package/esm/column-settings/ColumnSettingsPanel.js +2 -2
- package/esm/column-settings/ColumnSettingsPanel.js.map +1 -1
- package/esm/column-settings/useColumnSettings.js +1 -12
- package/esm/column-settings/useColumnSettings.js.map +1 -1
- package/package.json +13 -13
- package/types/column-expression-input/useColumnExpressionEditor.d.ts +1 -1
- package/types/column-expression-panel/ColumnExpressionPanel.d.ts +1 -1
- package/types/column-expression-panel/useColumnExpression.d.ts +3 -3
- package/types/column-settings/useColumnSettings.d.ts +2 -2
- package/types/table-settings/useTableSettings.d.ts +1 -1
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
5
4
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
+
var core = require('@salt-ds/core');
|
|
6
6
|
var styles = require('@salt-ds/styles');
|
|
7
7
|
var window = require('@salt-ds/window');
|
|
8
|
-
var core = require('@salt-ds/core');
|
|
9
8
|
var react = require('react');
|
|
10
9
|
var BackgroundCellConfigurationEditor$1 = require('./BackgroundCellConfigurationEditor.css.js');
|
|
11
10
|
|
|
@@ -30,11 +29,12 @@ const BackgroundCellConfigurationEditor = ({
|
|
|
30
29
|
css: BackgroundCellConfigurationEditor$1,
|
|
31
30
|
window: targetWindow
|
|
32
31
|
});
|
|
32
|
+
console.log({ type: column.type });
|
|
33
33
|
const [flashStyle, setFlashStyle] = react.useState(
|
|
34
34
|
valueFromColumn(column)
|
|
35
35
|
);
|
|
36
36
|
const handleSelectionChange = react.useCallback(
|
|
37
|
-
(_, flashOption) => {
|
|
37
|
+
(_, [flashOption]) => {
|
|
38
38
|
setFlashStyle(flashOption);
|
|
39
39
|
const renderProps = column.type.renderer;
|
|
40
40
|
onChangeRendering({
|
|
@@ -47,13 +47,13 @@ const BackgroundCellConfigurationEditor = ({
|
|
|
47
47
|
return /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
|
|
48
48
|
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Flash Style" }),
|
|
49
49
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
-
|
|
50
|
+
core.Dropdown,
|
|
51
51
|
{
|
|
52
52
|
className: `${classBase}-flashStyle`,
|
|
53
53
|
onSelectionChange: handleSelectionChange,
|
|
54
|
-
selected: flashStyle,
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
selected: flashStyle ? [flashStyle] : [],
|
|
55
|
+
value: flashStyle?.label,
|
|
56
|
+
children: flashOptions.map((flashOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: flashOption, children: flashOption.label }, i))
|
|
57
57
|
}
|
|
58
58
|
)
|
|
59
59
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BackgroundCellConfigurationEditor.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx"],"sourcesContent":["import type { ColumnDescriptorCustomRenderer } from \"@vuu-ui/vuu-table-types\";\nimport {
|
|
1
|
+
{"version":3,"file":"BackgroundCellConfigurationEditor.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx"],"sourcesContent":["import type { ColumnDescriptorCustomRenderer } from \"@vuu-ui/vuu-table-types\";\nimport {\n ConfigurationEditorProps,\n registerConfigurationEditor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useState } from \"react\";\n\nimport backgroundCellConfigurationEditorCss from \"./BackgroundCellConfigurationEditor.css\";\n\nconst classBase = \"vuuBackgroundCellConfiguration\";\n\ntype FlashOption = {\n label: string;\n value: \"arrow\" | \"bg-only\" | \"arrow-bg\";\n};\n\nconst flashOptions: FlashOption[] = [\n { label: \"Background Only\", value: \"bg-only\" },\n { label: \"Background and Arrow\", value: \"arrow-bg\" },\n { label: \"Arrow Only\", value: \"arrow\" },\n];\n\nconst [defaultFlashOption] = flashOptions;\n\nconst valueFromColumn = (column: ColumnDescriptorCustomRenderer) => {\n const { flashStyle } = column.type.renderer;\n return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;\n};\n\nexport const BackgroundCellConfigurationEditor = ({\n column,\n onChangeRendering,\n}: ConfigurationEditorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-background-cell-configuration-editor\",\n css: backgroundCellConfigurationEditorCss,\n window: targetWindow,\n });\n\n console.log({ type: column.type });\n\n const [flashStyle, setFlashStyle] = useState<FlashOption | undefined>(\n valueFromColumn(column)\n );\n const handleSelectionChange = useCallback(\n (_, [flashOption]) => {\n setFlashStyle(flashOption);\n const renderProps = column.type.renderer;\n onChangeRendering({\n ...renderProps,\n flashStyle: flashOption?.value ?? defaultFlashOption.value,\n });\n },\n [column.type, onChangeRendering]\n );\n\n return (\n <FormField>\n <FormFieldLabel>Flash Style</FormFieldLabel>\n <Dropdown<FlashOption>\n className={`${classBase}-flashStyle`}\n onSelectionChange={handleSelectionChange}\n selected={flashStyle ? [flashStyle] : []}\n value={flashStyle?.label}\n >\n {flashOptions.map((flashOption, i) => (\n <Option key={i} value={flashOption}>\n {flashOption.label}\n </Option>\n ))}\n </Dropdown>\n </FormField>\n );\n};\n\nregisterConfigurationEditor(\n \"BackgroundCellConfigurationEditor\",\n BackgroundCellConfigurationEditor\n);\n"],"names":["useWindow","useComponentCssInjection","backgroundCellConfigurationEditorCss","useState","useCallback","FormField","jsx","FormFieldLabel","Dropdown","Option","registerConfigurationEditor"],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,gCAAA,CAAA;AAOlB,MAAM,YAA8B,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,iBAAmB,EAAA,KAAA,EAAO,SAAU,EAAA;AAAA,EAC7C,EAAE,KAAA,EAAO,sBAAwB,EAAA,KAAA,EAAO,UAAW,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,OAAQ,EAAA;AACxC,CAAA,CAAA;AAEA,MAAM,CAAC,kBAAkB,CAAI,GAAA,YAAA,CAAA;AAE7B,MAAM,eAAA,GAAkB,CAAC,MAA2C,KAAA;AAClE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,MAAA,CAAO,IAAK,CAAA,QAAA,CAAA;AACnC,EAAA,OAAO,aAAa,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,UAAU,CAAK,IAAA,kBAAA,CAAA;AAC7D,CAAA,CAAA;AAEO,MAAM,oCAAoC,CAAC;AAAA,EAChD,MAAA;AAAA,EACA,iBAAA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0CAAA;AAAA,IACR,GAAK,EAAAC,mCAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAEjC,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAC,cAAA;AAAA,IAClC,gBAAgB,MAAM,CAAA;AAAA,GACxB,CAAA;AACA,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CAAC,CAAA,EAAG,CAAC,WAAW,CAAM,KAAA;AACpB,MAAA,aAAA,CAAc,WAAW,CAAA,CAAA;AACzB,MAAM,MAAA,WAAA,GAAc,OAAO,IAAK,CAAA,QAAA,CAAA;AAChC,MAAkB,iBAAA,CAAA;AAAA,QAChB,GAAG,WAAA;AAAA,QACH,UAAA,EAAY,WAAa,EAAA,KAAA,IAAS,kBAAmB,CAAA,KAAA;AAAA,OACtD,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAO,CAAA,IAAA,EAAM,iBAAiB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,uCACGC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBAC3BD,cAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,QACvB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,QAAU,EAAA,UAAA,GAAa,CAAC,UAAU,IAAI,EAAC;AAAA,QACvC,OAAO,UAAY,EAAA,KAAA;AAAA,QAElB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,WAAA,EAAa,CAC9B,qBAAAF,cAAA,CAACG,WAAe,EAAA,EAAA,KAAA,EAAO,WACpB,EAAA,QAAA,EAAA,WAAA,CAAY,KADF,EAAA,EAAA,CAEb,CACD,CAAA;AAAA,OAAA;AAAA,KACH;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEAC,oCAAA;AAAA,EACE,mCAAA;AAAA,EACA,iCAAA;AACF,CAAA;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var dropdownCellCss = "\n.vuuTableDropdownCell {\n
|
|
3
|
+
var dropdownCellCss = "\n.vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - 20px);\n --vuu-icon-size: 22px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 4px;\n \n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 6px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n \n \n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n }\n}\n\n";
|
|
4
4
|
|
|
5
5
|
module.exports = dropdownCellCss;
|
|
6
6
|
//# sourceMappingURL=DropdownCell.css.js.map
|
|
@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var vuuDataReact = require('@vuu-ui/vuu-data-react');
|
|
5
5
|
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
6
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
+
var core = require('@salt-ds/core');
|
|
7
8
|
var styles = require('@salt-ds/styles');
|
|
8
9
|
var window = require('@salt-ds/window');
|
|
9
10
|
var react = require('react');
|
|
10
11
|
var DropdownCell$1 = require('./DropdownCell.css.js');
|
|
11
12
|
|
|
12
13
|
const classBase = "vuuTableDropdownCell";
|
|
13
|
-
const openKeys = ["Enter", " "];
|
|
14
14
|
const DropdownCell = react.memo(
|
|
15
15
|
function DropdownCell2({
|
|
16
16
|
column,
|
|
@@ -24,17 +24,24 @@ const DropdownCell = react.memo(
|
|
|
24
24
|
css: DropdownCell$1,
|
|
25
25
|
window: targetWindow
|
|
26
26
|
});
|
|
27
|
+
const [open, setOpen] = react.useState(false);
|
|
27
28
|
const dataIdx = columnMap[column.name];
|
|
28
29
|
const dataValue = row[dataIdx];
|
|
29
30
|
const { values } = vuuDataReact.useLookupValues(column, dataValue);
|
|
30
|
-
const valueRef = react.useRef(
|
|
31
|
+
const valueRef = react.useRef();
|
|
31
32
|
react.useMemo(() => {
|
|
32
|
-
valueRef.current =
|
|
33
|
+
valueRef.current = vuuUtils.getSelectedOption(values, dataValue);
|
|
33
34
|
}, [dataValue, values]);
|
|
35
|
+
const handleOpenChange = react.useCallback((isOpen) => {
|
|
36
|
+
console.log(`handleOpenChange ${isOpen}`);
|
|
37
|
+
if (isOpen === false) {
|
|
38
|
+
setOpen(false);
|
|
39
|
+
}
|
|
40
|
+
}, []);
|
|
34
41
|
const handleSelectionChange = react.useCallback(
|
|
35
|
-
(evt,
|
|
36
|
-
if (
|
|
37
|
-
onCommit(
|
|
42
|
+
(evt, [selectedOption2]) => {
|
|
43
|
+
if (selectedOption2) {
|
|
44
|
+
onCommit(selectedOption2.value).then((response) => {
|
|
38
45
|
if (response === true && evt) {
|
|
39
46
|
vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
|
|
40
47
|
}
|
|
@@ -43,15 +50,35 @@ const DropdownCell = react.memo(
|
|
|
43
50
|
},
|
|
44
51
|
[onCommit]
|
|
45
52
|
);
|
|
53
|
+
const handleClick = react.useCallback(() => {
|
|
54
|
+
if (!open) {
|
|
55
|
+
setOpen(true);
|
|
56
|
+
}
|
|
57
|
+
}, [open]);
|
|
58
|
+
const handleKeyDown = react.useCallback(
|
|
59
|
+
(e) => {
|
|
60
|
+
if (e.key === "Enter" && !open) {
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
e.stopPropagation();
|
|
63
|
+
setOpen(true);
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
[open]
|
|
67
|
+
);
|
|
68
|
+
const { current: selectedOption } = valueRef;
|
|
46
69
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
-
|
|
70
|
+
core.Dropdown,
|
|
48
71
|
{
|
|
49
72
|
className: classBase,
|
|
73
|
+
"data-icon": "triangle-down",
|
|
74
|
+
onClick: handleClick,
|
|
75
|
+
onKeyDownCapture: handleKeyDown,
|
|
76
|
+
onOpenChange: handleOpenChange,
|
|
50
77
|
onSelectionChange: handleSelectionChange,
|
|
51
|
-
|
|
52
|
-
selected:
|
|
53
|
-
|
|
54
|
-
|
|
78
|
+
open,
|
|
79
|
+
selected: selectedOption ? [selectedOption] : [],
|
|
80
|
+
value: selectedOption?.label,
|
|
81
|
+
children: values.map((listOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: listOption, children: listOption.label }, i))
|
|
55
82
|
}
|
|
56
83
|
);
|
|
57
84
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownCell.js","sources":["../../../src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"DropdownCell.js","sources":["../../../src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onCommit = WarnCommit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>();\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n (evt, [selectedOption]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n onCommit(selectedOption.value as VuuColumnDataType).then((response) => {\n if (response === true && evt) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n });\n }\n },\n [onCommit]\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open]\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n},\ndataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","WarnCommit","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var colummExpressionInputCss = "\n.vuuColumnExpressionInput {\n --vuuFilterEditor-background: var(--salt-container-primary-background);\n --vuuFilterEditor-color: var(--salt-content-primary-foreground);\n --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n --vuuFilterEditor-cursorColor: var(--salt-
|
|
3
|
+
var colummExpressionInputCss = "\n.vuuColumnExpressionInput {\n --vuuFilterEditor-background: var(--salt-container-primary-background);\n --vuuFilterEditor-color: var(--salt-content-primary-foreground);\n --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);\n --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10); \n --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);\n --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground);\n --vuuFilterEditor-suggestion-detailColor: var(--salt-content-secondary-foreground-disabled);\n --vuuFilterEditor-suggestion-height: 24px;\n --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);\n\n align-items: center;\n box-sizing: border-box;\n height: 30px;\n}\n\n.vuuColumnExpressionInput-FilterButton,\n.vuuColumnExpressionInput-ClearButton {\n --vuu-icon-size: 12px;\n --saltButton-width: 28px;\n}\n\n.expression-type-container {\n margin: 0 3px 0 auto;\n color: var(--salt-content-secondary-foreground)\n}\n\n.expression-kind {\n display: inline-block;\n width: 50px;\n}\n\n.expression-type {\n display: inline-block;\n text-align: right;\n width: 50px;\n}\n\n.vuuSuggestion {\n display: flex;\n align-items: center;\n}\n\n.vuuFunctionDoc {\n padding: 13px 7px;\n}\n\n.vuuFunctionDoc .function-heading {\n display: flex;\n gap: 3px;\n}\n\n.vuuFunctionDoc .function-name {\n font-weight: 700;\n text-transform: capitalize;\n}\n\n.vuuFunctionDoc .param-list {\n color: var(--vuu-color-gray-50);\n white-space: pre;\n}\n\n.vuuFunctionDoc .function-type {\n color: var(--vuu-color-gray-50);\n font-weight: 700;\n margin-left: auto;\n text-transform: capitalize;\n}\n\n.vuuFunctionDoc .example-container {\n background-color: var(--vuu-color-gray-03);\n margin: 6px 0;\n padding: 3px;\n}\n\n.vuuFunctionDoc .example-expression {\n color: var(--vuu-color-gray-80);\n font-family: var(--salt-typography-fontFamily-code);\n font-weight: 500;\n padding: 8px;\n}\n\n.vuuFunctionDoc .example-result {\n margin-left: 8px;\n margin-top: 6px;\n}";
|
|
4
4
|
|
|
5
5
|
module.exports = colummExpressionInputCss;
|
|
6
6
|
//# sourceMappingURL=ColumnExpressionInput.css.js.map
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
5
4
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
6
5
|
var core = require('@salt-ds/core');
|
|
7
6
|
var react = require('react');
|
|
@@ -30,7 +29,7 @@ const ColumnExpressionPanel = ({
|
|
|
30
29
|
onChangeServerDataType: onChangeServerDataTypeProp
|
|
31
30
|
});
|
|
32
31
|
const initialExpressionRef = react.useRef(
|
|
33
|
-
vuuUtils.
|
|
32
|
+
vuuUtils.getCalculatedColumnDetails(column).expression ?? ""
|
|
34
33
|
);
|
|
35
34
|
const suggestionProvider = useColumnExpressionSuggestionProvider.useColumnExpressionSuggestionProvider({
|
|
36
35
|
columns: tableConfig.columns,
|
|
@@ -41,18 +40,12 @@ const ColumnExpressionPanel = ({
|
|
|
41
40
|
typeRef.current?.querySelector("button")?.focus();
|
|
42
41
|
}
|
|
43
42
|
}, []);
|
|
43
|
+
const { name, serverDataType } = vuuUtils.getCalculatedColumnDetails(column);
|
|
44
44
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, children: [
|
|
45
45
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Calculation" }) }),
|
|
46
46
|
/* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-name", children: [
|
|
47
47
|
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Name" }),
|
|
48
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
49
|
-
core.Input,
|
|
50
|
-
{
|
|
51
|
-
className: "vuuInput",
|
|
52
|
-
onChange: onChangeName,
|
|
53
|
-
value: vuuUtils.getCalculatedColumnName(column)
|
|
54
|
-
}
|
|
55
|
-
)
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Input, { className: "vuuInput", onChange: onChangeName, value: name })
|
|
56
49
|
] }),
|
|
57
50
|
/* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-expression", children: [
|
|
58
51
|
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Expression" }),
|
|
@@ -68,15 +61,20 @@ const ColumnExpressionPanel = ({
|
|
|
68
61
|
] }),
|
|
69
62
|
/* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "type", children: [
|
|
70
63
|
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column type" }),
|
|
71
|
-
/* @__PURE__ */ jsxRuntime.
|
|
72
|
-
|
|
64
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
65
|
+
core.Dropdown,
|
|
73
66
|
{
|
|
74
67
|
className: `${classBase}-type`,
|
|
75
68
|
onSelectionChange: onChangeServerDataType,
|
|
76
69
|
ref: typeRef,
|
|
77
|
-
selected:
|
|
78
|
-
|
|
79
|
-
|
|
70
|
+
selected: serverDataType ? [serverDataType] : [],
|
|
71
|
+
value: serverDataType,
|
|
72
|
+
children: [
|
|
73
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "boolean", children: "Boolean" }),
|
|
74
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "double", children: "Double" }),
|
|
75
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "long", children: "Long" }),
|
|
76
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "string", children: "String" })
|
|
77
|
+
]
|
|
80
78
|
}
|
|
81
79
|
)
|
|
82
80
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnExpressionPanel.js","sources":["../../src/column-expression-panel/ColumnExpressionPanel.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ColumnExpressionPanel.js","sources":["../../src/column-expression-panel/ColumnExpressionPanel.tsx"],"sourcesContent":["import { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport {\n Dropdown,\n FormField,\n FormFieldLabel,\n Input,\n Option,\n} from \"@salt-ds/core\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport {\n ColumnExpressionInput,\n ColumnExpressionSubmitHandler,\n useColumnExpressionSuggestionProvider,\n} from \"../column-expression-input\";\nimport { useColumnExpression } from \"./useColumnExpression\";\n\nconst classBase = \"vuuColumnExpressionPanel\";\n\nexport interface ColumnExpressionPanelProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<ColumnSettingsProps, \"tableConfig\" | \"vuuTable\"> {\n column: ColumnDescriptor;\n /**\n * Callback prop, invoked on every change to calculated column definition\n * @param calculatedColumnName the full calculated column name\n */\n onChangeName?: (name: string) => void;\n onChangeServerDataType?: (name: VuuColumnDataType) => void;\n}\n\nexport const ColumnExpressionPanel = ({\n column: columnProp,\n onChangeName: onChangeNameProp,\n onChangeServerDataType: onChangeServerDataTypeProp,\n tableConfig,\n vuuTable,\n}: ColumnExpressionPanelProps) => {\n const typeRef = useRef<HTMLButtonElement>(null);\n const { column, onChangeExpression, onChangeName, onChangeServerDataType } =\n useColumnExpression({\n column: columnProp,\n onChangeName: onChangeNameProp,\n onChangeServerDataType: onChangeServerDataTypeProp,\n });\n // The initial value to pass into the Expression Input. That is a\n // CodeMirror editor and will manage its own state once initialised.\n const initialExpressionRef = useRef<string>(\n getCalculatedColumnDetails(column).expression ?? \"\"\n );\n\n const suggestionProvider = useColumnExpressionSuggestionProvider({\n columns: tableConfig.columns,\n table: vuuTable,\n });\n\n const handleSubmitExpression =\n useCallback<ColumnExpressionSubmitHandler>(() => {\n if (typeRef.current) {\n (\n typeRef.current?.querySelector(\"button\") as HTMLButtonElement\n )?.focus();\n }\n }, []);\n\n const { name, serverDataType } = getCalculatedColumnDetails(column);\n\n return (\n <div className={classBase}>\n <div className=\"vuuColumnSettingsPanel-header\">\n <span>Calculation</span>\n </div>\n\n <FormField data-field=\"column-name\">\n <FormFieldLabel>Column Name</FormFieldLabel>\n <Input className=\"vuuInput\" onChange={onChangeName} value={name} />\n </FormField>\n\n <FormField data-field=\"column-expression\">\n <FormFieldLabel>Expression</FormFieldLabel>\n <ColumnExpressionInput\n onChange={onChangeExpression}\n onSubmitExpression={handleSubmitExpression}\n source={initialExpressionRef.current}\n suggestionProvider={suggestionProvider}\n />\n </FormField>\n <FormField data-field=\"type\">\n <FormFieldLabel>Column type</FormFieldLabel>\n <Dropdown\n className={`${classBase}-type`}\n onSelectionChange={onChangeServerDataType}\n ref={typeRef}\n selected={serverDataType ? [serverDataType] : []}\n value={serverDataType}\n >\n <Option value=\"boolean\">Boolean</Option>\n <Option value=\"double\">Double</Option>\n <Option value=\"long\">Long</Option>\n <Option value=\"string\">String</Option>\n </Dropdown>\n </FormField>\n </div>\n );\n};\n"],"names":["useRef","useColumnExpression","getCalculatedColumnDetails","useColumnExpressionSuggestionProvider","useCallback","jsxs","jsx","FormField","FormFieldLabel","Input","ColumnExpressionInput","Dropdown","Option"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,0BAAA,CAAA;AAcX,MAAM,wBAAwB,CAAC;AAAA,EACpC,MAAQ,EAAA,UAAA;AAAA,EACR,YAAc,EAAA,gBAAA;AAAA,EACd,sBAAwB,EAAA,0BAAA;AAAA,EACxB,WAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AAChC,EAAM,MAAA,OAAA,GAAUA,aAA0B,IAAI,CAAA,CAAA;AAC9C,EAAA,MAAM,EAAE,MAAQ,EAAA,kBAAA,EAAoB,YAAc,EAAA,sBAAA,KAChDC,uCAAoB,CAAA;AAAA,IAClB,MAAQ,EAAA,UAAA;AAAA,IACR,YAAc,EAAA,gBAAA;AAAA,IACd,sBAAwB,EAAA,0BAAA;AAAA,GACzB,CAAA,CAAA;AAGH,EAAA,MAAM,oBAAuB,GAAAD,YAAA;AAAA,IAC3BE,mCAAA,CAA2B,MAAM,CAAA,CAAE,UAAc,IAAA,EAAA;AAAA,GACnD,CAAA;AAEA,EAAA,MAAM,qBAAqBC,2EAAsC,CAAA;AAAA,IAC/D,SAAS,WAAY,CAAA,OAAA;AAAA,IACrB,KAAO,EAAA,QAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,sBAAA,GACJC,kBAA2C,MAAM;AAC/C,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MACE,OAAQ,CAAA,OAAA,EAAS,aAAc,CAAA,QAAQ,GACtC,KAAM,EAAA,CAAA;AAAA,KACX;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEP,EAAA,MAAM,EAAE,IAAA,EAAM,cAAe,EAAA,GAAIF,oCAA2B,MAAM,CAAA,CAAA;AAElE,EACE,uBAAAG,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,SACd,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAI,SAAU,EAAA,+BAAA,EACb,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA,EAAK,yBAAW,CACnB,EAAA,CAAA;AAAA,oBAEAD,eAAA,CAACE,cAAU,EAAA,EAAA,YAAA,EAAW,aACpB,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAACE,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,qCAC1BC,UAAM,EAAA,EAAA,SAAA,EAAU,YAAW,QAAU,EAAA,YAAA,EAAc,OAAO,IAAM,EAAA,CAAA;AAAA,KACnE,EAAA,CAAA;AAAA,oBAEAJ,eAAA,CAACE,cAAU,EAAA,EAAA,YAAA,EAAW,mBACpB,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAACE,uBAAe,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,sBAC1BF,cAAA;AAAA,QAACI,2CAAA;AAAA,QAAA;AAAA,UACC,QAAU,EAAA,kBAAA;AAAA,UACV,kBAAoB,EAAA,sBAAA;AAAA,UACpB,QAAQ,oBAAqB,CAAA,OAAA;AAAA,UAC7B,kBAAA;AAAA,SAAA;AAAA,OACF;AAAA,KACF,EAAA,CAAA;AAAA,oBACAL,eAAA,CAACE,cAAU,EAAA,EAAA,YAAA,EAAW,MACpB,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAACE,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,sBAC3BH,eAAA;AAAA,QAACM,aAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,UACvB,iBAAmB,EAAA,sBAAA;AAAA,UACnB,GAAK,EAAA,OAAA;AAAA,UACL,QAAU,EAAA,cAAA,GAAiB,CAAC,cAAc,IAAI,EAAC;AAAA,UAC/C,KAAO,EAAA,cAAA;AAAA,UAEP,QAAA,EAAA;AAAA,4BAACL,cAAA,CAAAM,WAAA,EAAA,EAAO,KAAM,EAAA,SAAA,EAAU,QAAO,EAAA,SAAA,EAAA,CAAA;AAAA,4BAC9BN,cAAA,CAAAM,WAAA,EAAA,EAAO,KAAM,EAAA,QAAA,EAAS,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,4BAC5BN,cAAA,CAAAM,WAAA,EAAA,EAAO,KAAM,EAAA,MAAA,EAAO,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,4BACxBN,cAAA,CAAAM,WAAA,EAAA,EAAO,KAAM,EAAA,QAAA,EAAS,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OAC/B;AAAA,KACF,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -4,8 +4,8 @@ var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
|
4
4
|
var react = require('react');
|
|
5
5
|
|
|
6
6
|
const applyDefaults = (column) => {
|
|
7
|
-
const
|
|
8
|
-
if (
|
|
7
|
+
const { name, expression, serverDataType } = vuuUtils.getCalculatedColumnDetails(column);
|
|
8
|
+
if (serverDataType === void 0) {
|
|
9
9
|
return {
|
|
10
10
|
...column,
|
|
11
11
|
name: `${name}:string:${expression}`
|
|
@@ -47,12 +47,12 @@ const useColumnExpression = ({
|
|
|
47
47
|
[onChangeNameProp, setColumn]
|
|
48
48
|
);
|
|
49
49
|
const onChangeServerDataType = react.useCallback(
|
|
50
|
-
(
|
|
51
|
-
if (vuuUtils.isVuuColumnDataType(
|
|
52
|
-
const newColumn = vuuUtils.setCalculatedColumnType(column,
|
|
50
|
+
(_e, [serverDataType]) => {
|
|
51
|
+
if (vuuUtils.isVuuColumnDataType(serverDataType)) {
|
|
52
|
+
const newColumn = vuuUtils.setCalculatedColumnType(column, serverDataType);
|
|
53
53
|
setColumn(newColumn);
|
|
54
54
|
onChangeNameProp?.(newColumn.name);
|
|
55
|
-
onChangeServerDataTypeProp?.(
|
|
55
|
+
onChangeServerDataTypeProp?.(serverDataType);
|
|
56
56
|
}
|
|
57
57
|
},
|
|
58
58
|
[column, onChangeNameProp, onChangeServerDataTypeProp, setColumn]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnExpression.js","sources":["../../src/column-expression-panel/useColumnExpression.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n getCalculatedColumnDetails,\n isVuuColumnDataType,\n setCalculatedColumnExpression,\n setCalculatedColumnName,\n setCalculatedColumnType,\n} from \"@vuu-ui/vuu-utils\";\nimport {
|
|
1
|
+
{"version":3,"file":"useColumnExpression.js","sources":["../../src/column-expression-panel/useColumnExpression.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n getCalculatedColumnDetails,\n isVuuColumnDataType,\n setCalculatedColumnExpression,\n setCalculatedColumnName,\n setCalculatedColumnType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n FormEventHandler,\n SyntheticEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { ColumnExpressionPanelProps } from \"./ColumnExpressionPanel\";\n\nexport type ColumnExpressionHookProps = Pick<\n ColumnExpressionPanelProps,\n \"column\" | \"onChangeName\" | \"onChangeServerDataType\"\n>;\n\nconst applyDefaults = (column: ColumnDescriptor) => {\n const { name, expression, serverDataType } =\n getCalculatedColumnDetails(column);\n if (serverDataType === undefined) {\n return {\n ...column,\n name: `${name}:string:${expression}`,\n };\n } else {\n return column;\n }\n};\n\nexport const useColumnExpression = ({\n column: columnProp,\n onChangeName: onChangeNameProp,\n onChangeServerDataType: onChangeServerDataTypeProp,\n}: ColumnExpressionHookProps) => {\n const [column, _setColumn] = useState<ColumnDescriptor>(\n applyDefaults(columnProp)\n );\n const columnRef = useRef<ColumnDescriptor>(columnProp);\n const setColumn = useCallback((column: ColumnDescriptor) => {\n columnRef.current = column;\n _setColumn(column);\n }, []);\n\n // We need to track column name in a ref because ColunExpressionInput\n // is not a pure React component, it hosts a CodeMirror editor. We\n // do not want to cause it to render mid-edit. Therefore it uses memo\n // and only renders on initial load. onChangeExpression must be stable.\n // const columnNameRef = useRef<string>(column.name);\n // const expressionRef = useRef(getCalculatedColumnDetails(column)[1]);\n\n const onChangeName = useCallback<FormEventHandler>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n const newColumn = setCalculatedColumnName(column, value);\n // columnNameRef.current = newColumn.name;\n setColumn(newColumn);\n onChangeNameProp?.(newColumn.name);\n },\n [column, onChangeNameProp, setColumn]\n );\n\n const onChangeExpression = useCallback(\n (value: string) => {\n // we do not set state when this changes as the codemirror editor\n // manages state of the expression for us until complete\n const expression = value.trim();\n // expressionRef.current = expression;\n // const [name, , type] = column.name.split(\":\");\n // columnNameRef.current = `${name}:${expression}:${type}`;\n\n const { current: column } = columnRef;\n const newColumn = setCalculatedColumnExpression(column, expression);\n setColumn(newColumn);\n\n onChangeNameProp?.(newColumn.name);\n\n // console.log(`calculatedColumnName ${columnNameRef.current}`);\n },\n [onChangeNameProp, setColumn]\n );\n\n const onChangeServerDataType = useCallback(\n (_e: SyntheticEvent, [serverDataType]: string[]) => {\n if (isVuuColumnDataType(serverDataType)) {\n const newColumn = setCalculatedColumnType(column, serverDataType);\n setColumn(newColumn);\n onChangeNameProp?.(newColumn.name);\n onChangeServerDataTypeProp?.(serverDataType);\n }\n },\n [column, onChangeNameProp, onChangeServerDataTypeProp, setColumn]\n );\n\n return {\n column,\n onChangeExpression,\n onChangeName,\n onChangeServerDataType,\n };\n};\n"],"names":["getCalculatedColumnDetails","useState","useRef","useCallback","column","setCalculatedColumnName","setCalculatedColumnExpression","isVuuColumnDataType","setCalculatedColumnType"],"mappings":";;;;;AAsBA,MAAM,aAAA,GAAgB,CAAC,MAA6B,KAAA;AAClD,EAAA,MAAM,EAAE,IAAM,EAAA,UAAA,EAAY,cAAe,EAAA,GACvCA,oCAA2B,MAAM,CAAA,CAAA;AACnC,EAAA,IAAI,mBAAmB,KAAW,CAAA,EAAA;AAChC,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,IAAM,EAAA,CAAA,EAAG,IAAI,CAAA,QAAA,EAAW,UAAU,CAAA,CAAA;AAAA,KACpC,CAAA;AAAA,GACK,MAAA;AACL,IAAO,OAAA,MAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,MAAQ,EAAA,UAAA;AAAA,EACR,YAAc,EAAA,gBAAA;AAAA,EACd,sBAAwB,EAAA,0BAAA;AAC1B,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,MAAQ,EAAA,UAAU,CAAI,GAAAC,cAAA;AAAA,IAC3B,cAAc,UAAU,CAAA;AAAA,GAC1B,CAAA;AACA,EAAM,MAAA,SAAA,GAAYC,aAAyB,UAAU,CAAA,CAAA;AACrD,EAAM,MAAA,SAAA,GAAYC,iBAAY,CAAA,CAACC,OAA6B,KAAA;AAC1D,IAAA,SAAA,CAAU,OAAUA,GAAAA,OAAAA,CAAAA;AACpB,IAAA,UAAA,CAAWA,OAAM,CAAA,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA,CAAA;AASL,EAAA,MAAM,YAAe,GAAAD,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAM,MAAA,SAAA,GAAYE,gCAAwB,CAAA,MAAA,EAAQ,KAAK,CAAA,CAAA;AAEvD,MAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,MAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA,CAAA;AAAA,KACnC;AAAA,IACA,CAAC,MAAQ,EAAA,gBAAA,EAAkB,SAAS,CAAA;AAAA,GACtC,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAAF,iBAAA;AAAA,IACzB,CAAC,KAAkB,KAAA;AAGjB,MAAM,MAAA,UAAA,GAAa,MAAM,IAAK,EAAA,CAAA;AAK9B,MAAM,MAAA,EAAE,OAASC,EAAAA,OAAAA,EAAW,GAAA,SAAA,CAAA;AAC5B,MAAM,MAAA,SAAA,GAAYE,sCAA8BF,CAAAA,OAAAA,EAAQ,UAAU,CAAA,CAAA;AAClE,MAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AAEnB,MAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA,CAAA;AAAA,KAGnC;AAAA,IACA,CAAC,kBAAkB,SAAS,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAA,MAAM,sBAAyB,GAAAD,iBAAA;AAAA,IAC7B,CAAC,EAAA,EAAoB,CAAC,cAAc,CAAgB,KAAA;AAClD,MAAI,IAAAI,4BAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,QAAM,MAAA,SAAA,GAAYC,gCAAwB,CAAA,MAAA,EAAQ,cAAc,CAAA,CAAA;AAChE,QAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,QAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA,CAAA;AACjC,QAAA,0BAAA,GAA6B,cAAc,CAAA,CAAA;AAAA,OAC7C;AAAA,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,gBAAkB,EAAA,0BAAA,EAA4B,SAAS,CAAA;AAAA,GAClE,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA,sBAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
5
4
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
6
5
|
var core = require('@salt-ds/core');
|
|
7
6
|
var cx = require('clsx');
|
|
@@ -10,7 +9,6 @@ var BaseNumericFormattingSettings = require('./BaseNumericFormattingSettings.js'
|
|
|
10
9
|
var LongTypeFormattingSettings = require('./LongTypeFormattingSettings.js');
|
|
11
10
|
|
|
12
11
|
const classBase = "vuuColumnFormattingPanel";
|
|
13
|
-
const itemToString = (item) => item.label ?? item.name;
|
|
14
12
|
const ColumnFormattingPanel = ({
|
|
15
13
|
availableRenderers,
|
|
16
14
|
className,
|
|
@@ -47,7 +45,7 @@ const ColumnFormattingPanel = ({
|
|
|
47
45
|
return configuredRenderer ?? defaultRenderer;
|
|
48
46
|
}, [availableRenderers, column]);
|
|
49
47
|
const handleChangeRenderer = react.useCallback(
|
|
50
|
-
(
|
|
48
|
+
(_e, [cellRendererDescriptor]) => {
|
|
51
49
|
const renderProps = {
|
|
52
50
|
name: cellRendererDescriptor.name
|
|
53
51
|
};
|
|
@@ -61,14 +59,13 @@ const ColumnFormattingPanel = ({
|
|
|
61
59
|
/* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
|
|
62
60
|
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: `Renderer (data type ${column.serverDataType})` }),
|
|
63
61
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
64
|
-
|
|
62
|
+
core.Dropdown,
|
|
65
63
|
{
|
|
66
64
|
className: cx(`${classBase}-renderer`),
|
|
67
|
-
itemToString,
|
|
68
65
|
onSelectionChange: handleChangeRenderer,
|
|
69
|
-
selected: selectedCellRenderer,
|
|
70
|
-
|
|
71
|
-
|
|
66
|
+
selected: selectedCellRenderer ? [selectedCellRenderer] : [],
|
|
67
|
+
value: selectedCellRenderer?.label ?? selectedCellRenderer?.name,
|
|
68
|
+
children: availableRenderers.map((cellRenderer, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: cellRenderer, children: cellRenderer.label ?? cellRenderer.name }, i))
|
|
72
69
|
}
|
|
73
70
|
)
|
|
74
71
|
] }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnFormattingPanel.js","sources":["../../src/column-formatting-settings/ColumnFormattingPanel.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n ColumnDescriptorCustomRenderer,\n ColumnTypeRendering,\n FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {
|
|
1
|
+
{"version":3,"file":"ColumnFormattingPanel.js","sources":["../../src/column-formatting-settings/ColumnFormattingPanel.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n ColumnDescriptorCustomRenderer,\n ColumnTypeRendering,\n FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n CellRendererDescriptor,\n ConfigurationEditorProps,\n getCellRendererOptions,\n getConfigurationEditor,\n isColumnTypeRenderer,\n isTypeDescriptor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, SyntheticEvent, useCallback, useMemo } from \"react\";\nimport { BaseNumericFormattingSettings } from \"./BaseNumericFormattingSettings\";\nimport { LongTypeFormattingSettings } from \"./LongTypeFormattingSettings\";\n\nconst classBase = \"vuuColumnFormattingPanel\";\n\nexport interface ColumnFormattingPanelProps\n extends HTMLAttributes<HTMLDivElement>,\n FormattingSettingsProps {\n availableRenderers: CellRendererDescriptor[];\n column: ColumnDescriptor;\n onChangeRendering: (renderProps: ColumnTypeRendering) => void;\n}\n\nexport const ColumnFormattingPanel = ({\n availableRenderers,\n className,\n column,\n onChangeFormatting,\n onChangeColumnType,\n onChangeRendering,\n ...htmlAttributes\n}: ColumnFormattingPanelProps) => {\n const formattingSettingsComponent = useMemo(\n () =>\n getFormattingSettingsComponent({\n column,\n onChangeFormatting,\n onChangeColumnType,\n }),\n [column, onChangeColumnType, onChangeFormatting]\n );\n\n console.log({ formattingSettingsComponent });\n\n const ConfigEditor = useMemo<\n React.FC<ConfigurationEditorProps> | undefined\n >(() => {\n const { type } = column;\n if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {\n const cellRendererOptions = getCellRendererOptions(type.renderer.name);\n return getConfigurationEditor(cellRendererOptions?.configEditor);\n }\n return undefined;\n }, [column]);\n\n const selectedCellRenderer = useMemo(() => {\n const { type } = column;\n const [defaultRenderer] = availableRenderers;\n const rendererName =\n isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)\n ? type.renderer.name\n : undefined;\n const configuredRenderer = availableRenderers.find(\n (renderer) => renderer.name === rendererName\n );\n return configuredRenderer ?? defaultRenderer;\n }, [availableRenderers, column]);\n\n const handleChangeRenderer = useCallback(\n (\n _e: SyntheticEvent,\n [cellRendererDescriptor]: CellRendererDescriptor[]\n ) => {\n const renderProps: ColumnTypeRendering = {\n name: cellRendererDescriptor.name,\n };\n onChangeRendering?.(renderProps);\n },\n [onChangeRendering]\n );\n\n const { serverDataType = \"string\" } = column;\n\n return (\n <div {...htmlAttributes} className={`vuuColumnSettingsPanel-header`}>\n <div>Formatting</div>\n\n <FormField>\n <FormFieldLabel>\n {`Renderer (data type ${column.serverDataType})`}\n </FormFieldLabel>\n <Dropdown<CellRendererDescriptor>\n className={cx(`${classBase}-renderer`)}\n onSelectionChange={handleChangeRenderer}\n selected={selectedCellRenderer ? [selectedCellRenderer] : []}\n value={selectedCellRenderer?.label ?? selectedCellRenderer?.name}\n >\n {availableRenderers.map((cellRenderer, i) => (\n <Option key={i} value={cellRenderer}>\n {cellRenderer.label ?? cellRenderer.name}\n </Option>\n ))}\n </Dropdown>\n </FormField>\n <div\n className={cx(classBase, className, `${classBase}-${serverDataType}`)}\n >\n {formattingSettingsComponent}\n {ConfigEditor ? (\n <ConfigEditor\n column={column as ColumnDescriptorCustomRenderer}\n onChangeRendering={onChangeRendering}\n />\n ) : null}\n </div>\n </div>\n );\n};\n\nfunction getFormattingSettingsComponent(props: FormattingSettingsProps) {\n const { column } = props;\n\n switch (column.serverDataType) {\n case \"double\":\n case \"int\":\n return <BaseNumericFormattingSettings {...props} />;\n case \"long\":\n return <LongTypeFormattingSettings {...props} />;\n default:\n return null;\n }\n}\n"],"names":["useMemo","isTypeDescriptor","isColumnTypeRenderer","getCellRendererOptions","getConfigurationEditor","useCallback","jsxs","jsx","FormField","FormFieldLabel","Dropdown","Option","BaseNumericFormattingSettings","LongTypeFormattingSettings"],"mappings":";;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,0BAAA,CAAA;AAUX,MAAM,wBAAwB,CAAC;AAAA,EACpC,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAkC,KAAA;AAChC,EAAA,MAAM,2BAA8B,GAAAA,aAAA;AAAA,IAClC,MACE,8BAA+B,CAAA;AAAA,MAC7B,MAAA;AAAA,MACA,kBAAA;AAAA,MACA,kBAAA;AAAA,KACD,CAAA;AAAA,IACH,CAAC,MAAQ,EAAA,kBAAA,EAAoB,kBAAkB,CAAA;AAAA,GACjD,CAAA;AAEA,EAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,2BAAA,EAA6B,CAAA,CAAA;AAE3C,EAAM,MAAA,YAAA,GAAeA,cAEnB,MAAM;AACN,IAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AACjB,IAAA,IAAIC,0BAAiB,IAAI,CAAA,IAAKC,6BAAqB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AACjE,MAAA,MAAM,mBAAsB,GAAAC,+BAAA,CAAuB,IAAK,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACrE,MAAO,OAAAC,+BAAA,CAAuB,qBAAqB,YAAY,CAAA,CAAA;AAAA,KACjE;AACA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAM,MAAA,oBAAA,GAAuBJ,cAAQ,MAAM;AACzC,IAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AACjB,IAAM,MAAA,CAAC,eAAe,CAAI,GAAA,kBAAA,CAAA;AAC1B,IAAM,MAAA,YAAA,GACJC,yBAAiB,CAAA,IAAI,CAAK,IAAAC,6BAAA,CAAqB,KAAK,QAAQ,CAAA,GACxD,IAAK,CAAA,QAAA,CAAS,IACd,GAAA,KAAA,CAAA,CAAA;AACN,IAAA,MAAM,qBAAqB,kBAAmB,CAAA,IAAA;AAAA,MAC5C,CAAC,QAAa,KAAA,QAAA,CAAS,IAAS,KAAA,YAAA;AAAA,KAClC,CAAA;AACA,IAAA,OAAO,kBAAsB,IAAA,eAAA,CAAA;AAAA,GAC5B,EAAA,CAAC,kBAAoB,EAAA,MAAM,CAAC,CAAA,CAAA;AAE/B,EAAA,MAAM,oBAAuB,GAAAG,iBAAA;AAAA,IAC3B,CACE,EAAA,EACA,CAAC,sBAAsB,CACpB,KAAA;AACH,MAAA,MAAM,WAAmC,GAAA;AAAA,QACvC,MAAM,sBAAuB,CAAA,IAAA;AAAA,OAC/B,CAAA;AACA,MAAA,iBAAA,GAAoB,WAAW,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,iBAAiB,CAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA,CAAA;AAEtC,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,CAClC,6BAAA,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAI,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,oCAEdC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAACE,mBACE,EAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,EAAuB,MAAO,CAAA,cAAc,CAC/C,CAAA,CAAA,EAAA,CAAA;AAAA,sBACAF,cAAA;AAAA,QAACG,aAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAW,SAAA,CAAA,CAAA;AAAA,UACrC,iBAAmB,EAAA,oBAAA;AAAA,UACnB,QAAU,EAAA,oBAAA,GAAuB,CAAC,oBAAoB,IAAI,EAAC;AAAA,UAC3D,KAAA,EAAO,oBAAsB,EAAA,KAAA,IAAS,oBAAsB,EAAA,IAAA;AAAA,UAE3D,QAAmB,EAAA,kBAAA,CAAA,GAAA,CAAI,CAAC,YAAA,EAAc,sBACpCH,cAAA,CAAAI,WAAA,EAAA,EAAe,KAAO,EAAA,YAAA,EACpB,QAAa,EAAA,YAAA,CAAA,KAAA,IAAS,YAAa,CAAA,IAAA,EAAA,EADzB,CAEb,CACD,CAAA;AAAA,SAAA;AAAA,OACH;AAAA,KACF,EAAA,CAAA;AAAA,oBACAL,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,cAAc,CAAE,CAAA,CAAA;AAAA,QAEnE,QAAA,EAAA;AAAA,UAAA,2BAAA;AAAA,UACA,YACC,mBAAAC,cAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,MAAA;AAAA,cACA,iBAAA;AAAA,aAAA;AAAA,WAEA,GAAA,IAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACN;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,SAAS,+BAA+B,KAAgC,EAAA;AACtE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AAEnB,EAAA,QAAQ,OAAO,cAAgB;AAAA,IAC7B,KAAK,QAAA,CAAA;AAAA,IACL,KAAK,KAAA;AACH,MAAO,uBAAAA,cAAA,CAACK,2DAA+B,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,IACnD,KAAK,MAAA;AACH,MAAO,uBAAAL,cAAA,CAACM,qDAA4B,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,IAChD;AACE,MAAO,OAAA,IAAA,CAAA;AAAA,GACX;AACF;;;;"}
|
|
@@ -2,10 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var react = require('react');
|
|
5
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
5
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
6
|
var core = require('@salt-ds/core');
|
|
8
7
|
|
|
8
|
+
const toggleValues = ["date", "time", "both"];
|
|
9
|
+
function getToggleValue(pattern) {
|
|
10
|
+
return !pattern.time ? "date" : !pattern.date ? "time" : "both";
|
|
11
|
+
}
|
|
12
|
+
const getSelectedPattern = (pattern) => {
|
|
13
|
+
if (vuuUtils.isDatePattern(pattern)) {
|
|
14
|
+
return [pattern];
|
|
15
|
+
} else if (vuuUtils.isTimePattern(pattern)) {
|
|
16
|
+
return [pattern];
|
|
17
|
+
} else {
|
|
18
|
+
return void 0;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
9
21
|
const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
|
|
10
22
|
const formatting = vuuUtils.getTypeFormattingFromColumn(column);
|
|
11
23
|
const { pattern = vuuUtils.fallbackDateTimePattern } = formatting;
|
|
@@ -21,8 +33,11 @@ const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) =>
|
|
|
21
33
|
[onChange, formatting]
|
|
22
34
|
);
|
|
23
35
|
const onDropdownChange = react.useCallback(
|
|
24
|
-
(
|
|
25
|
-
const updatedPattern = {
|
|
36
|
+
(dateTime) => (_, [selectedPattern]) => {
|
|
37
|
+
const updatedPattern = {
|
|
38
|
+
...pattern ?? {},
|
|
39
|
+
[dateTime]: selectedPattern
|
|
40
|
+
};
|
|
26
41
|
setFallbackState((s) => ({
|
|
27
42
|
time: updatedPattern.time ?? s.time,
|
|
28
43
|
date: updatedPattern.date ?? s.date
|
|
@@ -67,24 +82,18 @@ const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) =>
|
|
|
67
82
|
)
|
|
68
83
|
] }),
|
|
69
84
|
["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { labelPlacement: "top", children: [
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: `${
|
|
85
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: `${vuuUtils.dateTimeLabelByType[v]} pattern` }),
|
|
71
86
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
-
|
|
87
|
+
core.Dropdown,
|
|
73
88
|
{
|
|
74
89
|
onSelectionChange: onDropdownChange(v),
|
|
75
|
-
selected: pattern[v],
|
|
76
|
-
|
|
77
|
-
width: "100%"
|
|
90
|
+
selected: getSelectedPattern(pattern[v]),
|
|
91
|
+
children: vuuUtils.supportedDateTimePatterns[v].map((pattern2, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: pattern2, children: pattern2 }, i))
|
|
78
92
|
}
|
|
79
93
|
)
|
|
80
94
|
] }, v))
|
|
81
95
|
] });
|
|
82
96
|
};
|
|
83
|
-
const labelByType = { date: "Date", time: "Time" };
|
|
84
|
-
const toggleValues = ["date", "time", "both"];
|
|
85
|
-
function getToggleValue(pattern) {
|
|
86
|
-
return !pattern.time ? "date" : !pattern.date ? "time" : "both";
|
|
87
|
-
}
|
|
88
97
|
|
|
89
98
|
exports.DateTimeFormattingSettings = DateTimeFormattingSettings;
|
|
90
99
|
//# sourceMappingURL=DateTimeFormattingSettings.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeFormattingSettings.js","sources":["../../src/column-formatting-settings/DateTimeFormattingSettings.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"DateTimeFormattingSettings.js","sources":["../../src/column-formatting-settings/DateTimeFormattingSettings.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport {\n DateTimePattern,\n TimePattern,\n dateTimeLabelByType,\n defaultPatternsByType,\n fallbackDateTimePattern,\n getTypeFormattingFromColumn,\n isDatePattern,\n isTimePattern,\n supportedDateTimePatterns,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n Dropdown,\n FormField,\n FormFieldLabel,\n Option,\n ToggleButton,\n ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport {\n DateTimeColumnDescriptor,\n FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { DatePattern } from \"@vuu-ui/vuu-utils\";\n\nconst toggleValues = [\"date\", \"time\", \"both\"] as const;\ntype ToggleValue = (typeof toggleValues)[number];\n\nfunction getToggleValue(pattern: DateTimePattern): ToggleValue {\n return !pattern.time ? \"date\" : !pattern.date ? \"time\" : \"both\";\n}\n\ntype DateTime = keyof DateTimePattern;\n\nconst getSelectedPattern = (\n pattern?: DatePattern | TimePattern\n): DatePattern[] | TimePattern[] | undefined => {\n if (isDatePattern(pattern)) {\n return [pattern] as DatePattern[];\n } else if (isTimePattern(pattern)) {\n return [pattern] as TimePattern[];\n } else {\n return undefined;\n }\n};\n\nexport const DateTimeFormattingSettings: React.FC<\n FormattingSettingsProps<DateTimeColumnDescriptor>\n> = ({ column, onChangeFormatting: onChange }) => {\n const formatting = getTypeFormattingFromColumn(column);\n const { pattern = fallbackDateTimePattern } = formatting;\n const toggleValue = useMemo(() => getToggleValue(pattern), [pattern]);\n\n const [fallbackState, setFallbackState] = useState<Required<DateTimePattern>>(\n {\n time: pattern.time ?? defaultPatternsByType.time,\n date: pattern.date ?? defaultPatternsByType.date,\n }\n );\n\n const onPatternChange = useCallback(\n (pattern: DateTimePattern) => onChange({ ...formatting, pattern }),\n [onChange, formatting]\n );\n\n const onDropdownChange = useCallback<\n <T extends DateTime>(\n dateTime: T\n ) => (\n e: SyntheticEvent,\n newSelected: Array<Required<DateTimePattern>[T]>\n ) => void\n >(\n (dateTime) =>\n (_, [selectedPattern]) => {\n const updatedPattern = {\n ...(pattern ?? {}),\n [dateTime]: selectedPattern,\n };\n setFallbackState((s) => ({\n time: updatedPattern.time ?? s.time,\n date: updatedPattern.date ?? s.date,\n }));\n onPatternChange(updatedPattern);\n },\n [onPatternChange, pattern]\n );\n\n const onToggleChange = useCallback(\n (evnt: SyntheticEvent<HTMLButtonElement, Event>) => {\n const value = evnt.currentTarget.value as ToggleValue;\n switch (value) {\n case \"time\":\n return onPatternChange({\n [value]: pattern[value] ?? fallbackState[value],\n });\n case \"date\":\n return onPatternChange({\n [value]: pattern[value] ?? fallbackState[value],\n });\n case \"both\":\n return onPatternChange({\n time: pattern.time ?? fallbackState.time,\n date: pattern.date ?? fallbackState.date,\n });\n }\n },\n [onPatternChange, pattern, fallbackState]\n );\n\n return (\n <>\n <FormField labelPlacement=\"top\">\n <FormFieldLabel>{\"Display\"}</FormFieldLabel>\n <ToggleButtonGroup\n className=\"vuuToggleButtonGroup\"\n onChange={onToggleChange}\n value={toggleValue}\n data-variant=\"primary\"\n >\n {toggleValues.map((v) => (\n <ToggleButton key={v} value={v}>\n {v.toUpperCase()}\n </ToggleButton>\n ))}\n </ToggleButtonGroup>\n </FormField>\n\n {([\"date\", \"time\"] as const)\n .filter((v) => !!pattern[v])\n .map((v) => (\n <FormField labelPlacement=\"top\" key={v}>\n <FormFieldLabel>{`${dateTimeLabelByType[v]} pattern`}</FormFieldLabel>\n <Dropdown<Required<DateTimePattern>[typeof v]>\n onSelectionChange={onDropdownChange(v)}\n selected={getSelectedPattern(pattern[v])}\n >\n {supportedDateTimePatterns[v].map((pattern, i) => (\n <Option key={i} value={pattern}>\n {pattern}\n </Option>\n ))}\n </Dropdown>\n </FormField>\n ))}\n </>\n );\n};\n"],"names":["isDatePattern","isTimePattern","getTypeFormattingFromColumn","fallbackDateTimePattern","useMemo","useState","defaultPatternsByType","useCallback","pattern","jsxs","Fragment","FormField","jsx","FormFieldLabel","ToggleButtonGroup","ToggleButton","dateTimeLabelByType","Dropdown","supportedDateTimePatterns","Option"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const ColumnNameLabel = ({ column, onClick }) => {
|
|
|
16
16
|
window: targetWindow
|
|
17
17
|
});
|
|
18
18
|
if (vuuUtils.isCalculatedColumn(column.name)) {
|
|
19
|
-
const
|
|
19
|
+
const { name, serverDataType, expression } = vuuUtils.getCalculatedColumnDetails(column);
|
|
20
20
|
const displayName = name || "name";
|
|
21
21
|
const displayExpression = "=expression";
|
|
22
22
|
const nameClass = displayName === "name" ? `${classBase}-placeholder` : void 0;
|
|
@@ -29,7 +29,7 @@ const ColumnNameLabel = ({ column, onClick }) => {
|
|
|
29
29
|
children: [
|
|
30
30
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: nameClass, children: displayName }),
|
|
31
31
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: ":" }),
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children:
|
|
32
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: serverDataType || "string" }),
|
|
33
33
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: ":" }),
|
|
34
34
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: expressionClass, children: displayExpression }),
|
|
35
35
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-edit`, "data-icon": "edit" })
|