@vuu-ui/vuu-table-extras 5.0.0-alpha.2 → 5.0.0-alpha.4

package/src/table-editor/TableEditorForm.js

@@ -0,0 +1,142 @@
+import { jsx } from "react/jsx-runtime";
+import { createElement, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { CreateRowForm, EditField, EditForm, getFormFields, useEditFormContext } from "@vuu-ui/vuu-data-editing";
+import { useTableEditorContext } from "./TableEditorContext.js";
+const classBase = "vuuTableEditorForm";
+const useFormFields = (fields, operation, enabled)=>{
+    const { columns, dataSource } = useTableEditorContext("TableEditorForm");
+    const schema = dataSource.tableSchema;
+    return useMemo(()=>enabled ? getFormFields({
+            columns,
+            fields,
+            operation,
+            schema
+        }) : [], [
+        columns,
+        enabled,
+        fields,
+        operation,
+        schema
+    ]);
+};
+const requiredNames = (fields)=>fields.filter(({ required })=>required).map(({ name })=>name);
+const FormRegistration = ()=>{
+    const form = useEditFormContext();
+    const { formHandleRef } = useTableEditorContext("TableEditorForm");
+    useLayoutEffect(()=>{
+        formHandleRef.current = form ? {
+            cancel: form.cancel,
+            getValues: form.getValues,
+            isDirty: form.isDirty
+        } : void 0;
+    });
+    useLayoutEffect(()=>()=>{
+            formHandleRef.current = void 0;
+        }, [
+        formHandleRef
+    ]);
+    return null;
+};
+const TableEditorForm = ({ children, className, fields, onCancelled, onSaved, showButtons = void 0 === children, validate, ...formProps })=>{
+    const { confirmCancel, dataSource, editModel, editStrategy, formHandleRef, formSessionProps, mode, onEditCancelled, onEditSaved, selectedRow } = useTableEditorContext("TableEditorForm");
+    const formFields = useFormFields(fields, "update", void 0 === children);
+    const requiredColumns = useMemo(()=>requiredNames(formFields), [
+        formFields
+    ]);
+    const submittedValuesRef = useRef(void 0);
+    const validateEdit = useCallback((values)=>{
+        submittedValuesRef.current = values;
+        return validate?.(values);
+    }, [
+        validate
+    ]);
+    const handleCancelled = useCallback(()=>{
+        onCancelled?.();
+        onEditCancelled();
+    }, [
+        onCancelled,
+        onEditCancelled
+    ]);
+    const handleSaved = useCallback(()=>{
+        onSaved?.();
+        onEditSaved("direct" === editModel ? formHandleRef.current?.getValues() : submittedValuesRef.current);
+    }, [
+        editModel,
+        formHandleRef,
+        onEditSaved,
+        onSaved
+    ]);
+    if ("form" !== editStrategy || "create" === mode || void 0 === selectedRow) return null;
+    return /*#__PURE__*/ createElement(EditForm, {
+        ...formProps,
+        ...formSessionProps,
+        className: [
+            classBase,
+            className
+        ].filter(Boolean).join(" "),
+        confirmCancel: confirmCancel,
+        dataRow: selectedRow,
+        dataSource: dataSource,
+        editModel: editModel,
+        isEditMode: "edit" === mode,
+        key: selectedRow.key,
+        onCancelled: handleCancelled,
+        onSaved: handleSaved,
+        requiredColumns: requiredColumns,
+        showButtons: showButtons,
+        validate: validateEdit,
+        children: [
+            children ?? formFields.map((field)=>/*#__PURE__*/ jsx(EditField, {
+                    column: field
+                }, field.name)),
+            /*#__PURE__*/ jsx(FormRegistration, {})
+        ]
+    });
+};
+const TableEditorCreateForm = ({ children, className, fields, onCancelled, onSaved, ...formProps })=>{
+    const { confirmCancel, createKey, createStrategy, dataSource, editModel, editSession, editStrategy, formSessionProps, mode, onCreateDone } = useTableEditorContext("TableEditorCreateForm");
+    const generatedFields = useFormFields(fields, "insert", void 0 !== fields || void 0 === children);
+    const formFields = useMemo(()=>fields ? generatedFields : generatedFields.map((field)=>field.required ? field : {
+                ...field,
+                required: false
+            }), [
+        fields,
+        generatedFields
+    ]);
+    const sharedEditSession = "inline" === editStrategy && "session" === editModel ? editSession : void 0;
+    const handleCancelled = useCallback(()=>{
+        onCancelled?.();
+        onCreateDone(false);
+    }, [
+        onCancelled,
+        onCreateDone
+    ]);
+    const handleSaved = useCallback(()=>{
+        onSaved?.();
+        onCreateDone(true);
+    }, [
+        onCreateDone,
+        onSaved
+    ]);
+    if ("form" !== createStrategy || "create" !== mode) return null;
+    return /*#__PURE__*/ createElement(CreateRowForm, {
+        ...formProps,
+        ...formSessionProps,
+        className: [
+            classBase,
+            className
+        ].filter(Boolean).join(" "),
+        confirmCancel: confirmCancel,
+        dataSource: dataSource,
+        editSession: sharedEditSession,
+        fields: formFields,
+        key: createKey,
+        onCancelled: handleCancelled,
+        onSaved: handleSaved,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(FormRegistration, {})
+        ]
+    });
+};
+export { TableEditorCreateForm, TableEditorForm };

package/src/table-editor/TableEditorLayout.css.js

@@ -0,0 +1,16 @@
+const css = `
+.vuuTableEditorToolbar {
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  flex: none;
+  display: flex;
+}
+
+.vuuTableEditorPlaceholder {
+  color: var(--salt-content-secondary-foreground);
+}
+
+
+`;
+export default css;

package/src/table-editor/TableEditorLayout.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useTableEditorContext } from "./TableEditorContext.js";
+import TableEditorLayout from "./TableEditorLayout.css";
+const useLayoutCss = ()=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-editor-layout",
+        css: TableEditorLayout,
+        window: targetWindow
+    });
+};
+const TableEditorToolbar = ({ className, ...htmlAttributes })=>{
+    useLayoutCss();
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx("vuuTableEditorToolbar", className)
+    });
+};
+const TableEditorPlaceholder = ({ className, ...htmlAttributes })=>{
+    useLayoutCss();
+    const { editStrategy, mode, selectedRow } = useTableEditorContext("TableEditorPlaceholder");
+    return "form" === editStrategy && "create" !== mode && void 0 === selectedRow ? /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx("vuuTableEditorPlaceholder", className)
+    }) : null;
+};
+export { TableEditorPlaceholder, TableEditorToolbar };

package/src/table-editor/TableEditorProvider.js

@@ -0,0 +1,434 @@
+import { jsx } from "react/jsx-runtime";
+import { SidePanelProvider } from "@salt-ds/core";
+import { DataEditingProvider, DirectEditSession, getDataRowValues, useEditableTable } from "@vuu-ui/vuu-data-editing";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { TableEditorContext } from "./TableEditorContext.js";
+const useModeState = ({ defaultMode = "view", mode: modeProp, onModeChange })=>{
+    const [modeState, setModeState] = useState(defaultMode);
+    const isControlled = void 0 !== modeProp;
+    const setMode = useCallback((mode)=>{
+        if (!isControlled) setModeState(mode);
+        onModeChange?.(mode);
+    }, [
+        isControlled,
+        onModeChange
+    ]);
+    return [
+        modeProp ?? modeState,
+        setMode
+    ];
+};
+const useFormState = ()=>{
+    const [columns, setColumns] = useState();
+    const formHandleRef = useRef(void 0);
+    return {
+        columns,
+        formHandleRef,
+        setColumns
+    };
+};
+const cancelForm = async (form, confirmCancel, onNoForm)=>{
+    if (void 0 === form) onNoForm();
+    else if (!confirmCancel || !form.isDirty || await confirmCancel()) await form.cancel();
+};
+const useInlineCreate = ({ createStrategy, mode, modeAfterCreate, setMode })=>{
+    const [createKey, setCreateKey] = useState(0);
+    const modeBeforeCreateRef = useRef("view");
+    const hasCreateForm = "form" === createStrategy;
+    const canCreate = hasCreateForm && "create" !== mode;
+    const modeRef = useRef(mode);
+    modeRef.current = mode;
+    const startCreate = useCallback(()=>{
+        const currentMode = modeRef.current;
+        if (hasCreateForm && "create" !== currentMode) {
+            modeBeforeCreateRef.current = currentMode;
+            setCreateKey((key)=>key + 1);
+            setMode("create");
+        }
+    }, [
+        hasCreateForm,
+        setMode
+    ]);
+    const endCreate = useCallback(()=>{
+        setMode(modeAfterCreate ?? modeBeforeCreateRef.current);
+    }, [
+        modeAfterCreate,
+        setMode
+    ]);
+    return {
+        canCreate,
+        createKey,
+        endCreate,
+        panelOpen: hasCreateForm && "create" === mode,
+        startCreate
+    };
+};
+const NO_FORM_SESSION_PROPS = void 0;
+const noop = ()=>void 0;
+const Providers = ({ children, value })=>/*#__PURE__*/ jsx(TableEditorContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ jsx(SidePanelProvider, {
+            onOpenChange: value.setPanelOpen,
+            open: value.panelOpen,
+            children: children
+        })
+    });
+const InlineSessionProvider = ({ allowDelete = false, children, confirmCancel, copyOption, createStrategy = "inline", dataSource, deleteMode = allowDelete ? "soft" : void 0, editSessionApi, onCancelled, onError, onSaved, rowDefaults, ...modeProps })=>{
+    const [mode, setMode] = useModeState(modeProps);
+    const isEditing = "view" !== mode;
+    const { columns, formHandleRef, setColumns } = useFormState();
+    const handleCancelled = useCallback(()=>{
+        setMode("view");
+        onCancelled?.();
+    }, [
+        onCancelled,
+        setMode
+    ]);
+    const handleSaved = useCallback(()=>{
+        setMode("view");
+        onSaved?.();
+    }, [
+        onSaved,
+        setMode
+    ]);
+    const editableTable = useEditableTable({
+        copyOption,
+        dataSource,
+        deleteMode,
+        editSessionApi,
+        isEditMode: isEditing,
+        onCancel: handleCancelled,
+        onError,
+        onSave: handleSaved,
+        rowDefaults
+    });
+    const { editSession, onCancel: cancelEdit } = editableTable;
+    const { canCreate, createKey, endCreate, panelOpen, startCreate } = useInlineCreate({
+        createStrategy,
+        mode,
+        modeAfterCreate: "edit",
+        setMode
+    });
+    const cancel = useCallback(async ()=>{
+        if ("create" === mode) await cancelForm(formHandleRef.current, confirmCancel, endCreate);
+        else if (isEditing && (!confirmCancel || "clean" === editSession.editState || await confirmCancel())) cancelEdit();
+    }, [
+        cancelEdit,
+        confirmCancel,
+        editSession,
+        endCreate,
+        formHandleRef,
+        isEditing,
+        mode
+    ]);
+    const startEdit = useCallback(()=>setMode("edit"), [
+        setMode
+    ]);
+    const value = useMemo(()=>({
+            allowDelete,
+            canClosePanel: false,
+            canCreate,
+            cancel,
+            columns,
+            confirmCancel,
+            createKey,
+            createStrategy,
+            dataSource,
+            editModel: "session",
+            editSession,
+            editStrategy: "inline",
+            editableTable,
+            formHandleRef,
+            formSessionProps: NO_FORM_SESSION_PROPS,
+            isEditing,
+            mode,
+            onCreateDone: endCreate,
+            onEditCancelled: noop,
+            onEditSaved: noop,
+            onSelect: noop,
+            panelOpen,
+            setColumns,
+            setPanelOpen: noop,
+            startCreate,
+            startEdit
+        }), [
+        allowDelete,
+        canCreate,
+        cancel,
+        columns,
+        confirmCancel,
+        createKey,
+        createStrategy,
+        dataSource,
+        editSession,
+        editableTable,
+        endCreate,
+        formHandleRef,
+        isEditing,
+        mode,
+        panelOpen,
+        setColumns,
+        startCreate,
+        startEdit
+    ]);
+    return /*#__PURE__*/ jsx(Providers, {
+        value: value,
+        children: /*#__PURE__*/ jsx(DataEditingProvider, {
+            editSession: editSession,
+            children: children
+        })
+    });
+};
+const InlineDirectProvider = ({ children, confirmCancel, createStrategy = "inline", dataSource, deleteMode, editSessionApi, onCancelled, onError, onSaved, rowDefaults, ...modeProps })=>{
+    const [mode, setMode] = useModeState(modeProps);
+    const isEditing = "view" !== mode;
+    const { columns, formHandleRef, setColumns } = useFormState();
+    const editSession = useMemo(()=>new DirectEditSession({
+            dataSource
+        }), [
+        dataSource
+    ]);
+    const { canCreate, createKey, endCreate, panelOpen, startCreate } = useInlineCreate({
+        createStrategy,
+        mode,
+        setMode
+    });
+    const onCreateDone = useCallback((saved = false)=>{
+        endCreate();
+        if (saved) onSaved?.();
+        else onCancelled?.();
+    }, [
+        endCreate,
+        onCancelled,
+        onSaved
+    ]);
+    const cancel = useCallback(async ()=>{
+        if ("create" === mode) await cancelForm(formHandleRef.current, confirmCancel, onCreateDone);
+        else setMode("view");
+    }, [
+        confirmCancel,
+        formHandleRef,
+        mode,
+        onCreateDone,
+        setMode
+    ]);
+    const startEdit = useCallback(()=>setMode("edit"), [
+        setMode
+    ]);
+    const value = useMemo(()=>({
+            allowDelete: false,
+            canClosePanel: false,
+            canCreate,
+            cancel,
+            columns,
+            confirmCancel,
+            createKey,
+            createStrategy,
+            dataSource,
+            editModel: "direct",
+            editStrategy: "inline",
+            formHandleRef,
+            formSessionProps: {
+                deleteMode,
+                editSessionApi,
+                onError,
+                rowDefaults
+            },
+            isEditing,
+            mode,
+            onCreateDone,
+            onEditCancelled: noop,
+            onEditSaved: noop,
+            onSelect: noop,
+            panelOpen,
+            setColumns,
+            setPanelOpen: noop,
+            startCreate,
+            startEdit
+        }), [
+        canCreate,
+        cancel,
+        columns,
+        confirmCancel,
+        createKey,
+        createStrategy,
+        dataSource,
+        deleteMode,
+        editSessionApi,
+        formHandleRef,
+        isEditing,
+        mode,
+        onCreateDone,
+        onError,
+        panelOpen,
+        rowDefaults,
+        setColumns,
+        startCreate,
+        startEdit
+    ]);
+    return /*#__PURE__*/ jsx(Providers, {
+        value: value,
+        children: /*#__PURE__*/ jsx(DataEditingProvider, {
+            editSession: editSession,
+            children: children
+        })
+    });
+};
+const toRowSnapshot = (values)=>{
+    const snapshot = {
+        ...values
+    };
+    return {
+        ...snapshot,
+        hasColumn: (name)=>name in snapshot
+    };
+};
+const FormProvider = ({ children, confirmCancel, dataSource, deleteMode, editModel = "session", editSessionApi, onCancelled, onError, onSaved, panelVisibility = "on-select", rowDefaults, ...modeProps })=>{
+    const [mode, setMode] = useModeState(modeProps);
+    const [selectedRow, setSelectedRow] = useState();
+    const [createKey, setCreateKey] = useState(0);
+    const [panelOpenState, setPanelOpenState] = useState(false);
+    const panelOpenBeforeCreateRef = useRef(false);
+    const { columns, formHandleRef, setColumns } = useFormState();
+    const isEditing = "view" !== mode;
+    const alwaysVisible = "always" === panelVisibility;
+    const canClosePanel = !alwaysVisible && !isEditing;
+    const panelOpen = alwaysVisible || isEditing || panelOpenState;
+    const setPanelOpen = useCallback((open)=>{
+        if (open || canClosePanel) setPanelOpenState(open);
+    }, [
+        canClosePanel
+    ]);
+    const onSelect = useCallback((dataRow)=>{
+        setSelectedRow(dataRow ? toRowSnapshot(getDataRowValues(dataRow)) : void 0);
+        setPanelOpenState(null !== dataRow);
+    }, []);
+    const startEdit = useCallback(()=>{
+        if (selectedRow) {
+            setPanelOpenState(true);
+            setMode("edit");
+        }
+    }, [
+        selectedRow,
+        setMode
+    ]);
+    const modeRef = useRef(mode);
+    modeRef.current = mode;
+    const startCreate = useCallback(()=>{
+        if ("view" === modeRef.current) {
+            setCreateKey((key)=>key + 1);
+            panelOpenBeforeCreateRef.current = panelOpenState;
+            setMode("create");
+        }
+    }, [
+        panelOpenState,
+        setMode
+    ]);
+    const onCreateDone = useCallback((saved = false)=>{
+        setPanelOpenState(panelOpenBeforeCreateRef.current);
+        setMode("view");
+        if (saved) onSaved?.();
+        else onCancelled?.();
+    }, [
+        onCancelled,
+        onSaved,
+        setMode
+    ]);
+    const onEditCancelled = useCallback(()=>{
+        setMode("view");
+        onCancelled?.();
+    }, [
+        onCancelled,
+        setMode
+    ]);
+    const onEditSaved = useCallback((values)=>{
+        if (values) setSelectedRow(toRowSnapshot(values));
+        setMode("view");
+        onSaved?.();
+    }, [
+        onSaved,
+        setMode
+    ]);
+    const cancel = useCallback(async ()=>{
+        if (isEditing) await cancelForm(formHandleRef.current, confirmCancel, ()=>"create" === mode ? onCreateDone() : onEditCancelled());
+    }, [
+        confirmCancel,
+        formHandleRef,
+        isEditing,
+        mode,
+        onCreateDone,
+        onEditCancelled
+    ]);
+    const value = useMemo(()=>({
+            allowDelete: false,
+            canClosePanel,
+            canCreate: !isEditing,
+            cancel,
+            columns,
+            confirmCancel,
+            createKey,
+            createStrategy: "form",
+            dataSource,
+            editModel,
+            editStrategy: "form",
+            formHandleRef,
+            formSessionProps: {
+                deleteMode,
+                editSessionApi,
+                onError,
+                rowDefaults
+            },
+            isEditing,
+            mode,
+            onCreateDone,
+            onEditCancelled,
+            onEditSaved,
+            onSelect,
+            panelOpen,
+            selectedRow,
+            setColumns,
+            setPanelOpen,
+            startCreate,
+            startEdit
+        }), [
+        canClosePanel,
+        cancel,
+        columns,
+        confirmCancel,
+        createKey,
+        dataSource,
+        deleteMode,
+        editModel,
+        editSessionApi,
+        formHandleRef,
+        isEditing,
+        mode,
+        onCreateDone,
+        onEditCancelled,
+        onEditSaved,
+        onError,
+        onSelect,
+        panelOpen,
+        rowDefaults,
+        selectedRow,
+        setColumns,
+        setPanelOpen,
+        startCreate,
+        startEdit
+    ]);
+    return /*#__PURE__*/ jsx(Providers, {
+        value: value,
+        children: children
+    });
+};
+const TableEditorProvider = ({ createStrategy, editModel = "session", editStrategy = "inline", ...props })=>"form" === editStrategy ? /*#__PURE__*/ jsx(FormProvider, {
+        ...props,
+        editModel: editModel
+    }) : "direct" === editModel ? /*#__PURE__*/ jsx(InlineDirectProvider, {
+        ...props,
+        createStrategy: createStrategy
+    }) : /*#__PURE__*/ jsx(InlineSessionProvider, {
+        ...props,
+        createStrategy: createStrategy
+    });
+export { TableEditorProvider };