@vuu-ui/vuu-data-react 2.1.19-beta.2 → 2.1.19-beta.3

package/src/session-editing-form/SessionEditingForm.js

@@ -1,236 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { VuuDataSource } from "@vuu-ui/vuu-data-remote";
-import { Range, buildColumnMap, getTypedValue, queryClosest, shallowEquals } from "@vuu-ui/vuu-utils";
-import { Button, FormField, FormFieldHelperText, FormFieldLabel, Input, useIdMemo } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import SessionEditingForm from "./SessionEditingForm.css";
-const classBase = "vuuSessionEditingForm";
-const getField = (fields, name)=>{
-    const field = fields.find((f)=>f.name === name);
-    if (field) return field;
-    throw Error(`SessionEditingForm, no field '${name}' found`);
-};
-const getFieldNameAndValue = ({ target })=>{
-    const formField = queryClosest(target, ".saltFormField");
-    if (formField) {
-        const { dataset: { field } } = formField;
-        if (void 0 === field) throw Error("SessionEditingForm, form field has no field data attribute");
-        return [
-            field,
-            target.value
-        ];
-    }
-    throw Error("Form control is not enclosed in FormField");
-};
-const Status = {
-    uninitialised: 0,
-    unchanged: 1,
-    changed: 2,
-    invalid: 3
-};
-const getDataSource = (dataSource, schema)=>{
-    if (dataSource) return dataSource;
-    if (schema) return new VuuDataSource({
-        bufferSize: 0,
-        table: schema.table,
-        columns: schema.columns.map((col)=>col.name)
-    });
-    throw Error("SessionEditingForm: either a DataSource or a TableSchema must be provided");
-};
-const SessionEditingForm_SessionEditingForm = ({ className, config: { fields, key: keyField }, dataSource: dataSourceProp, id: idProp, onClose, schema, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-session-editing-form",
-        css: SessionEditingForm,
-        window: targetWindow
-    });
-    const [fieldStatusValues, setFieldStatusValues] = useState({});
-    const [values, setValues] = useState();
-    const [errorMessage, setErrorMessage] = useState("");
-    const formContentRef = useRef(null);
-    const initialDataRef = useRef(void 0);
-    const dataStatusRef = useRef(Status.uninitialised);
-    const dataSource = useMemo(()=>{
-        const ds = getDataSource(dataSourceProp, schema);
-        const { columns } = ds;
-        const columnMap = buildColumnMap(ds.columns);
-        const applyServerData = (data)=>{
-            if (columnMap) {
-                const values = {};
-                for (const column of columns)values[column] = data[columnMap[column]];
-                if (dataStatusRef.current === Status.uninitialised) {
-                    dataStatusRef.current = Status.unchanged;
-                    initialDataRef.current = values;
-                }
-                setValues(values);
-            }
-        };
-        ds.subscribe({
-            range: Range(0, 5)
-        }, (message)=>{
-            if ("viewport-update" === message.type && message.rows) if (dataStatusRef.current === Status.uninitialised) applyServerData(message.rows[0]);
-            else console.log("what do we do with server updates");
-        });
-        return ds;
-    }, [
-        dataSourceProp,
-        schema
-    ]);
-    const id = useIdMemo(idProp);
-    const handleChange = useCallback((evt)=>{
-        const [field, value] = getFieldNameAndValue(evt);
-        const { type } = getField(fields, field);
-        const typedValue = getTypedValue(value, type);
-        setValues((values = {})=>{
-            const newValues = {
-                ...values,
-                [field]: typedValue
-            };
-            const notUpdated = shallowEquals(newValues, initialDataRef.current);
-            dataStatusRef.current = notUpdated ? Status.unchanged : void 0 !== typedValue ? Status.changed : Status.invalid;
-            return newValues;
-        });
-    }, [
-        fields
-    ]);
-    const handleBlur = useCallback(async (evt)=>{
-        const [column, value] = getFieldNameAndValue(evt);
-        const key = values?.[keyField];
-        const { type } = getField(fields, column);
-        const data = getTypedValue(value, type, true);
-        if ("string" == typeof key) {
-            const response = await dataSource.rpcRequest?.({
-                params: {
-                    key,
-                    column,
-                    data
-                },
-                rpcName: "editCell",
-                type: "RPC_REQUEST"
-            });
-            if (response?.type === "SUCCESS_RESULT") setFieldStatusValues((map)=>({
-                    ...map,
-                    [column]: void 0
-                }));
-            else if (response?.type === "ERROR_RESULT") {
-                console.log(`edit rejected ${response.errorMessage}`);
-                setFieldStatusValues((map)=>({
-                        ...map,
-                        [column]: response.errorMessage
-                    }));
-            }
-        }
-    }, [
-        dataSource,
-        fields,
-        keyField,
-        values
-    ]);
-    const handleSubmit = useCallback(async ()=>{
-        const response = await dataSource.rpcRequest?.({
-            params: {
-                comment: ""
-            },
-            rpcName: "submitForm",
-            type: "RPC_REQUEST"
-        });
-        if (response?.type === "SUCCESS_RESULT") onClose?.();
-        else if (response?.type === "ERROR_RESULT") setErrorMessage(response.errorMessage);
-    }, [
-        dataSource,
-        onClose
-    ]);
-    const handleKeyDown = useCallback((evt)=>{
-        if ("Enter" === evt.key && dataStatusRef.current === Status.changed) handleSubmit();
-    }, [
-        handleSubmit
-    ]);
-    const handleCancel = useCallback(()=>{
-        onClose?.();
-    }, [
-        onClose
-    ]);
-    const getFormControl = (field)=>{
-        const value = String(values?.[field.name] ?? "");
-        if (field.readonly || field.name === keyField) return /*#__PURE__*/ jsx("div", {
-            className: `${classBase}-fieldValue vuuReadOnly`,
-            children: value
-        });
-        return /*#__PURE__*/ jsx(Input, {
-            className: `${classBase}-fieldValue`,
-            onBlur: handleBlur,
-            onChange: handleChange,
-            value: value,
-            id: `${id}-input-${field.name}`
-        });
-    };
-    useEffect(()=>{
-        if (formContentRef.current) {
-            const firstInput = formContentRef.current.querySelector("input");
-            if (firstInput) setTimeout(()=>{
-                firstInput.focus();
-                firstInput.select();
-            }, 100);
-        }
-    }, []);
-    useEffect(()=>()=>{
-            if (dataSource) dataSource.unsubscribe();
-        }, [
-        dataSource
-    ]);
-    const isDirty = dataStatusRef.current === Status.changed;
-    return /*#__PURE__*/ jsxs("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, className),
-        children: [
-            errorMessage ? /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-errorBanner`,
-                "data-icon": "error",
-                title: errorMessage,
-                children: "Error, edit(s) not saved"
-            }) : void 0,
-            /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-content`,
-                ref: formContentRef,
-                onKeyDown: handleKeyDown,
-                children: fields.map((field)=>/*#__PURE__*/ jsxs(FormField, {
-                        className: `${classBase}-field`,
-                        "data-field": field.name,
-                        necessity: field.required ? "required" : "optional",
-                        readOnly: field.readonly,
-                        validationStatus: fieldStatusValues[field.name] ? "error" : void 0,
-                        children: [
-                            /*#__PURE__*/ jsx(FormFieldLabel, {
-                                children: field?.label ?? field.description
-                            }),
-                            getFormControl(field),
-                            /*#__PURE__*/ jsx(FormFieldHelperText, {
-                                children: fieldStatusValues[field.name] ?? ""
-                            })
-                        ]
-                    }, field.name))
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: `${classBase}-buttonbar salt-theme salt-density-high`,
-                children: [
-                    /*#__PURE__*/ jsx(Button, {
-                        type: "submit",
-                        variant: "cta",
-                        disabled: !isDirty,
-                        onClick: handleSubmit,
-                        children: "Submit"
-                    }),
-                    /*#__PURE__*/ jsx(Button, {
-                        variant: "secondary",
-                        onClick: handleCancel,
-                        children: "Cancel"
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { SessionEditingForm_SessionEditingForm as SessionEditingForm };

package/src/session-editing-form/index.js

@@ -1 +0,0 @@
-export * from "./SessionEditingForm.js";