@ioca/react 1.5.15 → 1.5.16

package/lib/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
-import { debounce, uid, throttle } from 'radash';
+import { debounce, uid, crush, throttle } from 'radash';
 import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, useContext, createContext, useImperativeHandle } from 'react';
 import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
@@ -1478,7 +1478,7 @@ function VirtualDatagrid(props) {
 }
 
 const Datagrid = (props) => {
-    const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", style, className, rowKey, virtual, renderLoading = () => (jsx(Loading, { size: '1.5em', className: 'color-3', absolute: true })), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
+    const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", style, className, rowKey, virtual, renderLoading = () => jsx(Loading, { className: "color-3", absolute: true }), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
     const container = useRef(null);
     const wrapRef = useRef(null);
     const state = useReactive({
@@ -1749,9 +1749,12 @@ function Drawer(props) {
     });
     if (!state.show)
         return null;
+    const container = typeof document === "undefined" ? null : document.body;
+    if (!container)
+        return null;
     return createPortal(jsx("div", { className: classNames("i-backdrop-drawer", className, {
             "i-active": state.active,
-        }), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [header && (jsxs("header", { className: 'i-drawer-header', children: [header, !hideCloseButton && (jsx(Helpericon, { className: 'i-drawer-close', onClick: handleHide }))] })), jsx("div", { className: 'i-drawer-content', children: children }), footer && jsx("div", { className: 'i-drawer-footer', children: footer })] }) }), document.body);
+        }), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [header && (jsxs("header", { className: 'i-drawer-header', children: [header, !hideCloseButton && (jsx(Helpericon, { className: 'i-drawer-close', onClick: handleHide }))] })), jsx("div", { className: 'i-drawer-content', children: children }), footer && jsx("div", { className: 'i-drawer-footer', children: footer })] }) }), container);
 }
 
 const Item$4 = (props) => {
@@ -3010,10 +3013,10 @@ function Field(props) {
     useEffect(() => {
         if (!name)
             return;
-        PubSub.subscribe(`${id}:set:${name}`, (evt, v) => {
+        PubSub.subscribe(`${id}:set:${name}`, (_evt, v) => {
             setFieldValue(v);
         });
-        PubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {
+        PubSub.subscribe(`${id}:invalid:${name}`, (_evt, v) => {
             if (v?.value !== undefined)
                 setFieldValue(v.value);
             if (v?.status)
@@ -3022,121 +3025,136 @@ function Field(props) {
                 setFieldMessage(v.message);
         });
         Promise.resolve().then(() => {
-            form.set(name, form.cacheData[name] ?? undefined);
+            if (name in form.cacheData) {
+                form.set(name, form.cacheData[name]);
+            }
         });
         return () => {
             PubSub.unsubscribe(`${id}:set:${name}`);
             PubSub.unsubscribe(`${id}:invalid:${name}`);
-            form.delete(name);
+            if (name && !name.includes(".")) {
+                form.data[name] = undefined;
+            }
         };
-    }, [name, children]);
+    }, [name]);
     if (!name)
         return children;
     return hijackChildren;
 }
 
+function getDeep(obj, path) {
+    if (!path.includes("."))
+        return obj[path];
+    return path.split(".").reduce((acc, key) => (acc != null ? acc[key] : undefined), obj);
+}
+function setDeep(obj, path, value) {
+    const parts = path.split(".");
+    let current = obj;
+    for (let i = 0; i < parts.length - 1; i++) {
+        const key = parts[i];
+        if (current[key] == null || typeof current[key] !== "object") {
+            current[key] = {};
+        }
+        current = current[key];
+    }
+    current[parts[parts.length - 1]] = value;
+}
+function deleteDeep(obj, path) {
+    const parts = path.split(".");
+    const parent = parts
+        .slice(0, -1)
+        .reduce((acc, key) => (acc != null ? acc[key] : undefined), obj);
+    if (parent != null) {
+        delete parent[parts[parts.length - 1]];
+    }
+}
+
 class IFormInstance {
     id;
     data = {};
     cacheData = {};
-    rules = {};
+    rules;
     constructor() {
         this.id = uid(8);
         this.data = {};
     }
     get(field) {
-        return field ? this.data[field] : this.data;
+        return field ? getDeep(this.data, field) : this.data;
     }
     set(field, value) {
         const id = this.id;
         if (!this.data)
             return;
         if (typeof field === "string") {
-            this.data[field] = value;
+            if (field.includes(".")) {
+                const parts = field.split(".");
+                for (let i = 1; i < parts.length; i++) {
+                    const ancestor = parts.slice(0, i).join(".");
+                    if (ancestor in this.data) {
+                        console.warn(`[ioca-form] Field "${field}" conflicts with "${ancestor}". ` +
+                            "Nested representation in form.get() may be inconsistent.");
+                    }
+                }
+                setDeep(this.data, field, value);
+            }
+            else {
+                this.data[field] = value;
+            }
             this.cacheData[field] = value;
             PubSub.publish(`${id}:set:${field}`, value);
             return;
         }
-        Object.keys(field).map((name) => {
-            this.data[name] = field[name];
+        Object.keys(field).forEach((name) => {
+            if (name.includes("."))
+                setDeep(this.data, name, field[name]);
+            else
+                this.data[name] = field[name];
             this.cacheData[name] = field[name];
             PubSub.publish(`${id}:set:${name}`, field[name]);
         });
     }
     delete(field) {
-        delete this.data[field];
+        delete this.cacheData[field];
+        if (field.includes("."))
+            deleteDeep(this.data, field);
+        else
+            delete this.data[field];
     }
     clear() {
         if (!this.data)
             return;
+        const names = Object.keys(this.cacheData);
         this.cacheData = {};
-        Object.keys(this.data).map((name) => {
+        names.forEach((name) => {
+            if (name.includes("."))
+                deleteDeep(this.data, name);
+            else
+                this.data[name] = undefined;
             PubSub.publish(`${this.id}:set:${name}`, undefined);
-            this.data[name] = undefined;
         });
     }
     async validate(field) {
         const { id, rules, data } = this;
         if (!rules)
             return data;
-        if (field) {
-            const o = rules[field];
-            const rule = {
-                validator: (v) => Array.isArray(v)
-                    ? v.length > 0
-                    : ![undefined, null, ""].includes(v),
-                message: undefined,
-            };
-            if (typeof o === "function") {
-                rule.validator = o;
-            }
-            else if (o === true) {
-                rule.validator = (v) => ![undefined, null, ""].includes(v);
-                rule.message = "required";
-            }
-            else {
-                Object.assign(rule, o);
-            }
-            const isValid = rule.validator?.(data[field], this);
-            if (typeof isValid === "string") {
-                rule.message = isValid;
-            }
-            if (isValid !== true) {
-                PubSub.publish(`${id}:invalid:${field}`, {
-                    message: rule.message,
-                    status: "error",
-                });
-                return false;
-            }
-            PubSub.publish(`${id}:invalid:${name}`, {
-                message: null,
-                status: "normal",
-            });
-            return true;
-        }
+        const names = field ? [field] : Object.keys(this.cacheData);
         let isAllValid = true;
-        Object.keys(data).map((name) => {
+        names.forEach((name) => {
             const o = rules[name];
-            if (o === undefined)
+            if (!field && o === undefined)
                 return;
             const rule = {
-                validator: (v) => (Array.isArray(v) ? v.length > 0 : !!v),
-                message: undefined,
+                validator: (v) => Array.isArray(v) ? v.length > 0 : ![undefined, null, ""].includes(v),
             };
-            if (typeof o === "function") {
+            if (typeof o === "function")
                 rule.validator = o;
-            }
-            else if (o === true) {
-                rule.validator = (v) => ![undefined, null, ""].includes(v);
+            else if (o === true)
                 rule.message = "required";
-            }
-            else {
+            else if (o)
                 Object.assign(rule, o);
-            }
-            const isValid = rule.validator?.(data[name], this);
-            if (typeof isValid === "string") {
+            const isValid = rule.validator?.(getDeep(data, name), this);
+            if (typeof isValid === "string")
                 rule.message = isValid;
-            }
             if (isValid !== true) {
                 PubSub.publish(`${id}:invalid:${name}`, {
                     message: rule.message,
@@ -3151,7 +3169,7 @@ class IFormInstance {
                 });
             }
         });
-        return isAllValid ? Promise.resolve(data) : false;
+        return field ? isAllValid : isAllValid ? data : false;
     }
 }
 function useForm(form) {
@@ -3172,7 +3190,7 @@ function useConfig(configs, formProps) {
     };
     const node = useMemo(() => {
         return (jsx(Form, { ...formProps, onChange: handleChange, form: form, children: configs.map((config) => {
-                const { name, label, required, component: El, componentProps = {}, colspan = 1, render, shouldUpdate, shouldRender, } = config;
+                const { name, label, required, component: El, componentProps = {}, colspan = 1, render, shouldRender, } = config;
                 const { className, style } = componentProps;
                 if (shouldRender && !shouldRender(values, form)) {
                     return jsx(Fragment$1, {}, name);
@@ -3207,20 +3225,27 @@ const Form = (props) => {
         }
         return columns;
     }, [columns]);
+    const initialAppliedRef = useRef(false);
     useEffect(() => {
-        Object.assign(form, {
-            data: { ...initialValues },
-            rules,
-        });
-    }, [form]);
+        if (!initialAppliedRef.current && initialValues) {
+            const flat = crush(initialValues);
+            Object.keys(flat).forEach((key) => {
+                form.set(key, flat[key]);
+            });
+            initialAppliedRef.current = true;
+        }
+        if (rules) {
+            form.rules = rules;
+        }
+    }, [initialValues, rules, form]);
     useEffect(() => {
-        PubSub.subscribe(`${form.id}:change`, (evt, v) => {
+        const token = PubSub.subscribe(`${form.id}:change`, (_evt, v) => {
             onChange?.(v.name, v.value);
         });
         return () => {
-            PubSub.unsubscribe(`${form.id}:change`);
+            PubSub.unsubscribe(token);
         };
-    }, []);
+    }, [form.id, onChange]);
     return (jsx(Context, { value: form, children: jsx("form", { style: {
                 ...style,
                 width,

package/lib/types/components/form/useForm.d.ts

@@ -1,14 +1,14 @@
-import { IForm } from './type.js';
+import { TValidator, TRule } from './type.js';
 
 declare class IFormInstance {
     readonly id?: string;
     data: Record<string, any>;
     cacheData: Record<string, any>;
-    rules?: Pick<IForm, "rules">;
+    rules?: Record<string, boolean | TValidator | TRule>;
     constructor();
     get(field?: string): any;
     set(field: any, value?: any): void;
-    delete(field: any): void;
+    delete(field: string): void;
     clear(): void;
     validate(field?: string): Promise<boolean | Record<string, any>>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ioca/react",
-    "version": "1.5.15",
+    "version": "1.5.16",
     "type": "module",
     "scripts": {
         "dev": "vite",