@vuu-ui/vuu-table-extras 2.1.18 → 2.1.19-beta.2

package/src/column-formatting-settings/BaseNumericFormattingSettings.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormField, FormFieldLabel, Input, Switch } from "@salt-ds/core";
+import { getTypeFormattingFromColumn } from "@vuu-ui/vuu-utils";
+import { useCallback, useState } from "react";
+const classBase = "vuuFormattingSettings";
+const BaseNumericFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
+    const [formattingSettings, setFormattingSettings] = useState(getTypeFormattingFromColumn(column));
+    const handleInputKeyDown = useCallback((evt)=>{
+        if ("Enter" === evt.key || "Tab" === evt.key) onChange(formattingSettings);
+    }, [
+        formattingSettings,
+        onChange
+    ]);
+    const handleChangeDecimals = useCallback((evt)=>{
+        const { value } = evt.target;
+        const numericValue = "" === value ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
+        const newFormattingSettings = {
+            ...formattingSettings,
+            decimals: numericValue
+        };
+        setFormattingSettings(newFormattingSettings);
+    }, [
+        formattingSettings
+    ]);
+    const handleChangeAlignDecimals = useCallback((evt)=>{
+        const { checked } = evt.target;
+        const newFormattingSettings = {
+            ...formattingSettings,
+            alignOnDecimals: checked
+        };
+        setFormattingSettings(newFormattingSettings);
+        onChange(newFormattingSettings);
+    }, [
+        formattingSettings,
+        onChange
+    ]);
+    const handleChangeZeroPad = useCallback((evt)=>{
+        const { checked } = evt.target;
+        const newFormattingSettings = {
+            ...formattingSettings,
+            zeroPad: checked
+        };
+        setFormattingSettings(newFormattingSettings);
+        onChange(newFormattingSettings);
+    }, [
+        formattingSettings,
+        onChange
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        children: [
+            /*#__PURE__*/ jsxs(FormField, {
+                "data-field": "decimals",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Number of decimals"
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        bordered: true,
+                        className: "vuuInput",
+                        onChange: handleChangeDecimals,
+                        onKeyDown: handleInputKeyDown,
+                        value: formattingSettings.decimals ?? ""
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "left",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Align on decimals"
+                    }),
+                    /*#__PURE__*/ jsx(Switch, {
+                        checked: formattingSettings.alignOnDecimals ?? false,
+                        onChange: handleChangeAlignDecimals,
+                        value: "align-decimals"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "left",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Zero pad decimals"
+                    }),
+                    /*#__PURE__*/ jsx(Switch, {
+                        checked: formattingSettings.zeroPad ?? false,
+                        onChange: handleChangeZeroPad,
+                        value: "zero-pad"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { BaseNumericFormattingSettings };

package/src/column-formatting-settings/ColumnFormattingPanel.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getCellRendererOptions, getConfigurationEditor, isColumnTypeRenderer, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { Dropdown, FormField, FormFieldLabel, Option } from "@salt-ds/core";
+import clsx from "clsx";
+import { useCallback, useMemo } from "react";
+import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings.js";
+import { LongTypeFormattingSettings } from "./LongTypeFormattingSettings.js";
+import { DateTimeFormattingSettings } from "./DateTimeFormattingSettings.js";
+const classBase = "vuuColumnFormattingPanel";
+const ColumnFormattingPanel = ({ availableRenderers, className, column, onChangeFormatting, onChangeColumnType, onChangeRendering, ...htmlAttributes })=>{
+    const formattingSettingsComponent = useMemo(()=>getFormattingSettingsComponent({
+            column,
+            onChangeFormatting,
+            onChangeColumnType
+        }), [
+        column,
+        onChangeColumnType,
+        onChangeFormatting
+    ]);
+    const ConfigEditor = useMemo(()=>{
+        const { type } = column;
+        if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {
+            const cellRendererOptions = getCellRendererOptions(type.renderer.name);
+            return getConfigurationEditor(cellRendererOptions?.configEditor);
+        }
+    }, [
+        column
+    ]);
+    const selectedCellRenderer = useMemo(()=>{
+        const { type } = column;
+        const [defaultRenderer] = availableRenderers;
+        const rendererName = isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer) ? type.renderer.name : void 0;
+        const configuredRenderer = availableRenderers.find((renderer)=>renderer.name === rendererName);
+        return configuredRenderer ?? defaultRenderer;
+    }, [
+        availableRenderers,
+        column
+    ]);
+    const handleChangeRenderer = useCallback((_e, [cellRendererDescriptor])=>{
+        const renderProps = {
+            name: cellRendererDescriptor.name
+        };
+        onChangeRendering?.(renderProps);
+    }, [
+        onChangeRendering
+    ]);
+    const { serverDataType = "string" } = column;
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: "vuuColumnSettingsPanel-header",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: "Formatting"
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: `Renderer (data type ${column.serverDataType})`
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        bordered: true,
+                        className: clsx(`${classBase}-renderer`),
+                        onSelectionChange: handleChangeRenderer,
+                        selected: selectedCellRenderer ? [
+                            selectedCellRenderer
+                        ] : [],
+                        value: selectedCellRenderer?.label ?? selectedCellRenderer?.name,
+                        children: availableRenderers.map((cellRenderer, i)=>/*#__PURE__*/ jsx(Option, {
+                                value: cellRenderer,
+                                children: cellRenderer.label ?? cellRenderer.name
+                            }, i))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: clsx(classBase, className, `${classBase}-${serverDataType}`),
+                children: [
+                    formattingSettingsComponent,
+                    ConfigEditor ? /*#__PURE__*/ jsx(ConfigEditor, {
+                        column: column,
+                        onChangeRendering: onChangeRendering
+                    }) : null
+                ]
+            })
+        ]
+    });
+};
+function getFormattingSettingsComponent(props) {
+    const { column } = props;
+    switch(column.serverDataType){
+        case "double":
+        case "scaleddecimal2":
+        case "scaleddecimal4":
+        case "scaleddecimal6":
+        case "scaleddecimal8":
+        case "int":
+            return /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
+                ...props
+            });
+        case "long":
+            return /*#__PURE__*/ jsx(LongTypeFormattingSettings, {
+                ...props
+            });
+        case "epochtimestamp":
+            return /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
+                ...props
+            });
+        default:
+            return null;
+    }
+}
+export { ColumnFormattingPanel };

package/src/column-formatting-settings/DateTimeFormattingSettings.js

@@ -0,0 +1,116 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { dateTimeLabelByType, defaultPatternsByType, fallbackDateTimePattern, getTypeFormattingFromColumn, isDatePattern, isTimePattern, supportedDateTimePatterns } from "@vuu-ui/vuu-utils";
+import { Dropdown, FormField, FormFieldLabel, Option, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { useCallback, useMemo, useState } from "react";
+const toggleValues = [
+    "date",
+    "time",
+    "both"
+];
+function getToggleValue(pattern) {
+    return pattern.time ? pattern.date ? "both" : "time" : "date";
+}
+const getSelectedPattern = (pattern)=>{
+    if (isDatePattern(pattern)) return [
+        pattern
+    ];
+    if (isTimePattern(pattern)) return [
+        pattern
+    ];
+};
+const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
+    const formatting = getTypeFormattingFromColumn(column);
+    const { pattern = fallbackDateTimePattern } = formatting;
+    const toggleValue = useMemo(()=>getToggleValue(pattern), [
+        pattern
+    ]);
+    const [fallbackState, setFallbackState] = useState({
+        time: pattern.time ?? defaultPatternsByType.time,
+        date: pattern.date ?? defaultPatternsByType.date
+    });
+    const onPatternChange = useCallback((pattern)=>onChange({
+            ...formatting,
+            pattern
+        }), [
+        onChange,
+        formatting
+    ]);
+    const onDropdownChange = useCallback((dateTime)=>(_, [selectedPattern])=>{
+            const updatedPattern = {
+                ...pattern ?? {},
+                [dateTime]: selectedPattern
+            };
+            setFallbackState((s)=>({
+                    time: updatedPattern.time ?? s.time,
+                    date: updatedPattern.date ?? s.date
+                }));
+            onPatternChange(updatedPattern);
+        }, [
+        onPatternChange,
+        pattern
+    ]);
+    const onToggleChange = useCallback((evnt)=>{
+        const value = evnt.currentTarget.value;
+        switch(value){
+            case "time":
+                return onPatternChange({
+                    [value]: pattern[value] ?? fallbackState[value]
+                });
+            case "date":
+                return onPatternChange({
+                    [value]: pattern[value] ?? fallbackState[value]
+                });
+            case "both":
+                return onPatternChange({
+                    time: pattern.time ?? fallbackState.time,
+                    date: pattern.date ?? fallbackState.date
+                });
+        }
+    }, [
+        onPatternChange,
+        pattern,
+        fallbackState
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "top",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Display"
+                    }),
+                    /*#__PURE__*/ jsx(ToggleButtonGroup, {
+                        className: "vuuToggleButtonGroup",
+                        onChange: onToggleChange,
+                        value: toggleValue,
+                        "data-variant": "primary",
+                        children: toggleValues.map((v)=>/*#__PURE__*/ jsx(ToggleButton, {
+                                value: v,
+                                children: v.toUpperCase()
+                            }, v))
+                    })
+                ]
+            }),
+            [
+                "date",
+                "time"
+            ].filter((v)=>!!pattern[v]).map((v)=>/*#__PURE__*/ jsxs(FormField, {
+                    labelPlacement: "top",
+                    children: [
+                        /*#__PURE__*/ jsx(FormFieldLabel, {
+                            children: `${dateTimeLabelByType[v]} pattern`
+                        }),
+                        /*#__PURE__*/ jsx(Dropdown, {
+                            onSelectionChange: onDropdownChange(v),
+                            selected: getSelectedPattern(pattern[v]),
+                            children: supportedDateTimePatterns[v].map((pattern, i)=>/*#__PURE__*/ jsx(Option, {
+                                    value: pattern,
+                                    children: pattern
+                                }, i))
+                        })
+                    ]
+                }, v))
+        ]
+    });
+};
+export { DateTimeFormattingSettings };

package/src/column-formatting-settings/LongTypeFormattingSettings.css.js

@@ -0,0 +1,11 @@
+const css = `
+.vuuLongColumnFormattingSettings {
+  gap: var(--salt-spacing-200);
+  flex-direction: column;
+  padding-top: 6px;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/column-formatting-settings/LongTypeFormattingSettings.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormField, FormFieldLabel, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCallback } from "react";
+import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings.js";
+import LongTypeFormattingSettings from "./LongTypeFormattingSettings.css";
+import { isTypeDescriptor } from "@vuu-ui/vuu-utils";
+const classBase = "vuuLongColumnFormattingSettings";
+const LongTypeFormattingSettings_LongTypeFormattingSettings = (props)=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-long-formatting-settings",
+        css: LongTypeFormattingSettings,
+        window: targetWindow
+    });
+    const { column, onChangeColumnType: onChangeType } = props;
+    const type = isTypeDescriptor(column.type) ? column.type.name : column.type;
+    const handleToggleChange = useCallback((event)=>{
+        const value = event.currentTarget.value;
+        onChangeType(value);
+    }, [
+        onChangeType
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        children: [
+            /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Type inferred as"
+                    }),
+                    /*#__PURE__*/ jsx(ToggleButtonGroup, {
+                        className: "vuuToggleButtonGroup",
+                        onChange: handleToggleChange,
+                        value: type ?? "number",
+                        children: toggleValues.map((v)=>/*#__PURE__*/ jsx(ToggleButton, {
+                                value: v,
+                                children: v.toUpperCase()
+                            }, v))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
+                ...props
+            })
+        ]
+    });
+};
+const toggleValues = [
+    "number",
+    "date/time"
+];
+export { LongTypeFormattingSettings_LongTypeFormattingSettings as LongTypeFormattingSettings };

package/src/column-formatting-settings/index.js

@@ -0,0 +1,3 @@
+export * from "./ColumnFormattingPanel.js";
+export * from "./BaseNumericFormattingSettings.js";
+export * from "./DateTimeFormattingSettings.js";

package/src/column-menu/ColumnMenu.css.js

@@ -0,0 +1,25 @@
+const css = `
+.vuuMenuItem {
+  --vuu-svg-cog: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>");
+}
+
+.vuuColumnMenu {
+  --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-borderRadius: 3px;
+  --saltButton-padding: var(--salt-spacing-50);
+  --saltButton-minWidth: var(--menu-button-size);
+  --saltButton-height: var(--vuuColumnMenu-height, var(--menu-button-size));
+  --saltButton-width: var(--vuuColumnMenu-width, var(--menu-button-size));
+  --vuu-icon-height: var(--menu-button-size);
+  --vuu-icon-left: 0px;
+  --vuu-icon-top: 0px;
+  --vuu-icon-width: var(--menu-button-size);
+  flex: 0 0 var(--menu-button-size);
+  margin: var(--vuuTable-columnMenu-margin, 0);
+  border: none;
+  padding: 0;
+}
+
+
+`;
+export default css;

package/src/column-menu/ColumnMenu.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu, MenuPanel, MenuTrigger } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
+import clsx from "clsx";
+import { useCallback } from "react";
+import { useTableContext } from "../table-provider/TableProvider.js";
+import { buildAggregationMenuItems, buildGroupMenu, buildPinMenuItems, buildSortMenu, buildVisibilityMenuItems, getColumnMenuActionType } from "./column-menu-utils.js";
+import ColumnMenu from "./ColumnMenu.css";
+const classBase = "vuuColumnMenu";
+const defaultColumnMenuPermissions = {
+    allowSort: true,
+    allowGroup: true,
+    allowAggregation: true,
+    allowHide: true,
+    allowRemove: true,
+    allowPin: true
+};
+const ColumnMenu_ColumnMenu = ({ className, column, menuActionHandler: menuActionHandlerProp, menuPermissions: { allowSort, allowGroup, allowAggregation, allowHide, allowRemove, allowPin } = defaultColumnMenuPermissions })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-menu",
+        css: ColumnMenu,
+        window: targetWindow
+    });
+    const { dataSource, menuActionHandler } = useTableContext(true);
+    const menuActionClickHandler = useCallback((evt)=>{
+        const columnMenuActionType = getColumnMenuActionType(evt.target);
+        if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) return menuActionHandler(columnMenuActionType, column);
+    }, [
+        column,
+        menuActionHandler,
+        menuActionHandlerProp
+    ]);
+    const sortMenu = buildSortMenu(column, dataSource, menuActionClickHandler, allowSort);
+    const groupMenu = buildGroupMenu(column, dataSource, menuActionClickHandler, allowGroup);
+    const aggregationMenu = buildAggregationMenuItems(column, dataSource, menuActionClickHandler, allowAggregation);
+    const visibilityMenuItems = buildVisibilityMenuItems(column, menuActionClickHandler, allowHide, allowRemove);
+    const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);
+    const handleClick = useCallback((evt)=>{
+        evt.stopPropagation();
+    }, []);
+    return /*#__PURE__*/ jsxs(Menu, {
+        children: [
+            /*#__PURE__*/ jsx(MenuTrigger, {
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    appearance: "transparent",
+                    className: clsx(classBase, className),
+                    "data-embedded": true,
+                    icon: "more-vert",
+                    sentiment: "neutral",
+                    "aria-label": "Open Column Menu",
+                    onClick: handleClick
+                })
+            }),
+            /*#__PURE__*/ jsxs(MenuPanel, {
+                children: [
+                    sortMenu,
+                    groupMenu,
+                    aggregationMenu,
+                    visibilityMenuItems,
+                    pinMenu
+                ]
+            })
+        ]
+    });
+};
+export { ColumnMenu_ColumnMenu as ColumnMenu };