dynamicformdjx-react 0.0.5 → 0.1.1

package/README.md

@@ -2,12 +2,19 @@
 
 基于 **React** 的动态表单输入组件。
 
-[//]: # (React 版本)
+[Document](https://xczcdjx.github.io/dynamicFormDoc/react/install.html)
 
-Vue3 版本 [Document](https://xczcdjx.github.io/dynamicFormDoc/)
+[Vue3 版本](https://www.npmjs.com/package/dynamicformdjx)
 
-[Vue2 版本](https://www.npmjs.com/package/dynamicformdjx-vue2) (正在适配)
+[Vue2 版本](https://www.npmjs.com/package/dynamicformdjx-vue2) (后续适配)
 
+## 概述
+
+`DynamicForm` 一个灵活且动态的表单组件，使用数组，简化模版操作，提供多种hook快速操作表单等。
+
+- 简化节点代码，快速处理表单
+- 提供render2函数渲染表单项，使用函数渲染值或自定义Component函数
+- 提供多种hooks函数，快速处理数据值
 
 ## 安装
 
@@ -20,22 +27,267 @@ yarn add dynamicformdjx-react
 pnpm add dynamicformdjx-react
 ```
 
-### 基本使用
+### 动态表单
+
+#### 与Antd配合
+
+> 需配合antd v5+ 版本以上
+
+##### 简单表单
+
+> 更多render函数请等待后续更新，可直接使用下方自定义渲染
+
+```tsx
+import {useRef, useState} from "react";
+import {Button, Input, Radio} from "antd";
+import {AdDynamicForm, type adDynamicFormRef, renderInput} from "dynamicformdjx-react/antd";
+import {omitFormCommonKey, OmitValue, useDyForm, useReactiveForm} from "dynamicformdjx-react";
+import type {PresetType} from "dynamicformdjx-react/types";
+import type {Rule} from "antd/es/form";
+
+type RowProps = {
+    username: string
+    password: string
+    desc: string
+    preset: string
+}
+const SimpleForm = () => {
+    const [presetType, setPresetType] = useState<PresetType>('fullRow')
+    const [formItems, setFormItems] = useReactiveForm<RowProps, Rule | Rule[]>([
+        {
+            key: "username",
+            label: "用户名",
+            value: "",
+            allowClear: true,
+            rule: [{required: true, message: 'Please input your username!', validateTrigger: 'onBlur'}],
+            render2: f => renderInput({}, f),
+            span: 12
+        },
+        {
+            key: "password",
+            label: "密码",
+            required: true,
+            value: "",
+            render2: (f) => <Input.Password placeholder="请输入密码" {...OmitValue(f, omitFormCommonKey)}/>,
+            span: 8,
+            offset: 2,
+            sort: 0
+        },
+        {
+            key: "preset",
+            label: "表格预设",
+            value: "fullRow",
+            render2: (f) => <Radio.Group
+                value={f.value}
+                options={[
+                    {value: 'fullRow', label: 'row'},
+                    {value: 'grid', label: 'grid'},
+                ]}
+                onChange={(v) => {
+                    setPresetType(v.target.value)
+                }}
+            />,
+        }
+    ])
+    const useForm = useDyForm([formItems, setFormItems])
+    const antdFormRef = useRef<adDynamicFormRef>(null)
+    const rules: Partial<Record<keyof RowProps, Rule | Rule[]>> = {
+        desc: [{required: true, message: '请输入详情'}]
+    }
+    return (
+        <div className='dynamicFormTest'>
+            <AdDynamicForm ref={antdFormRef} rules={rules} validateTrigger={null} items={formItems}
+                           preset={presetType}/>
+            <div className="footer" style={{
+                display: 'flex',
+                gap: '5px'
+            }}>
+                <Button color={'green'} variant={'outlined'} onClick={() => {
+                    // const res=antdFormRef.current?.getResult?.()
+                    const res = useForm.getValues()
+                    console.log(res)
+                }}>getData</Button>
+                <Button color={'orange'} variant={'outlined'} onClick={() => {
+                    useForm.setValues({
+                        username: 'antd',
+                        password: 'I love you'
+                    })
+                }}>setData</Button>
+                <Button color={'blue'} variant={'outlined'} onClick={() => {
+                    antdFormRef.current?.validator().then(v => {
+                        console.log(v)
+                    }).catch(r => {
+                        console.log(r)
+                    })
+                }}>validator</Button>
+                <Button color={'red'} variant={'outlined'} onClick={() => {
+                    useForm.onReset()
+                }}>reset</Button>
+                <Button variant={'outlined'} onClick={() => {
+                    useForm.setDisabled(true)
+                }}>setDisabled</Button>
+            </div>
+        </div>
+    );
+};
+
+export default SimpleForm;
+
+```
+
+##### 自定义表单
+
+```tsx
+import {useRef} from "react";
+import {Button, Input, Select} from "antd";
+import {
+    DynamicInput,
+    type dynamicInputRef,
+    omitFormCommonKey,
+    OmitValue,
+    useDyForm,
+    useReactiveForm
+} from "dynamicformdjx-react";
+import {AdDynamicForm, type adDynamicFormRef} from "dynamicformdjx-react/antd";
+import type {Rule} from "antd/es/form";
+
+type RowProps = {
+    username: string
+    job: string
+    json: object
+}
+const CustomForm = () => {
+    const [formItems, setFormItems] = useReactiveForm<RowProps, Rule | Rule[]>([
+        {
+            key: "username",
+            label: "用户名",
+            value: "",
+            allowClear: true,
+            render2: (f) => <Input placeholder="请输入姓名" {...OmitValue(f, omitFormCommonKey)}/>,
+            rule: [
+                {
+                    required: true,
+                    message: 'Please confirm your username!',
+                },
+                {
+                    validator: async (_, value) => {
+                        if (!value) return; // 交给 required 处理
+                        if (value.length < 3) {
+                            throw new Error('至少 3 个字符');
+                        }
+                    },
+                }
+            ],
+        },
+        {
+            key: "job",
+            label: "职位",
+            value: "",
+            required: true,
+            render2: (f) => <Select
+                style={{
+                    width: '100%'
+                }}
+                options={[
+                    {value: 'jack', label: 'Jack'},
+                    {value: 'lucy', label: 'Lucy'},
+                    {value: 'Yiminghe', label: 'yiminghe'},
+                    {value: 'disabled', label: 'Disabled', disabled: true},
+                ]}
+            />,
+        },
+        {
+            key: "json",
+            label: "Json",
+            value: {},
+            isCustom: true,
+            rule: [
+                {
+                    required: true,
+                    message: 'json 不能为空'
+                },
+                {
+                    validator: async (_, value) => {
+                        if (!value || Object.keys(value).length === 0) {
+                            throw new Error('json 不能为空');
+                        }
+                    },
+                }
+            ],
+            render2: f => {
+                return <DynamicInput ref={dynamicInputRef} value={f.value} onChange={(v: object) => {
+                    f.value = v
+                }} isController/>
+            },
+        },
+    ])
+    const useForm = useDyForm([formItems, setFormItems])
+    const antdFormRef = useRef<adDynamicFormRef>(null)
+    const dynamicInputRef = useRef<dynamicInputRef>(null)
+    return (
+        <div className='dynamicFormTest'>
+            <AdDynamicForm ref={antdFormRef} items={formItems}/>
+            <div className="footer" style={{
+                display: 'flex',
+                gap: '5px'
+            }}>
+                <Button color={'green'} variant={'outlined'} onClick={() => {
+                    // const res=antdFormRef.current?.getResult?.()
+                    const res = useForm.getValues()
+                    console.log(res)
+                }}>getData</Button>
+                <Button color={'orange'} variant={'outlined'} onClick={() => {
+                    useForm.setValues({
+                        username: 'antd',
+                        job: 'jack'
+                    })
+                    dynamicInputRef.current?.onSet?.({
+                        a: 'Hello world',
+                        b: 1314,
+                        c: [5, 2, 0]
+                    })
+                }}>setData</Button>
+                <Button color={'blue'} variant={'outlined'} onClick={() => {
+                    antdFormRef.current?.validator().then(v => {
+                        console.log(v)
+                    }).catch(r => {
+                        console.error(r)
+                    })
+                }}>validator</Button>
+                <Button color={'red'} variant={'outlined'} onClick={() => {
+                    useForm.onReset()
+                    dynamicInputRef.current?.onSet?.({})
+                }}>reset</Button>
+            </div>
+        </div>
+    );
+};
+
+export default CustomForm;
+
+```
+
+### 动态录入
+
+> 此录入无需组件库依赖
+
+### 1.单组件
+
 ```tsx
 import {useState} from "react";
-import {DynamicInput,dynamicFormRef} from "dynamicformdjx-react";
+import {DynamicInput, dynamicFormRef} from "dynamicformdjx-react";
 
 function App() {
-    const [obj,setObj]=useState<Record<string, any>>({
+    const [obj, setObj] = useState<Record<string, any>>({
         a: 'Hello world',
         b: 1314,
         c: [5, 2, 0]
     });
-    const dynamicInputRef=useRef<dynamicFormRef>(null)
+    const dynamicInputRef = useRef<dynamicFormRef>(null)
     return (<div>
         <DynamicInput ref={dynamicInputRef} isController value={obj} onChange={(e) => setObj(e)}/>
         <pre>
-            {JSON.stringify(obj,null, 2)}
+            {JSON.stringify(obj, null, 2)}
         </pre>
         <div>
             <button onClick={() => {
@@ -51,12 +303,14 @@ function App() {
 export default App
 ```
 
-### 级联基本使用
+### 2.级联基本使用
+
 ```tsx
 import {useState} from "react";
-import {DynamicCascadeInput,dynamicCascadeInputRef} from "dynamicformdjx-react";
-const App=()=>{
-    const [obj,setObj]=useState<Record<string, any>>({
+import {DynamicCascadeInput, dynamicCascadeInputRef} from "dynamicformdjx-react";
+
+const App = () => {
+    const [obj, setObj] = useState<Record<string, any>>({
         a: {
             b: {
                 c: {
@@ -69,16 +323,16 @@ const App=()=>{
         aa: [5, 2, 0],
         aaa: 1314
     });
-    const dynamicInputRef=useRef<dynamicCascadeInputRef>(null)
+    const dynamicInputRef = useRef<dynamicCascadeInputRef>(null)
     return (<div>
         <DynamicCascadeInput ref={dynamicInputRef} isController value={obj} onChange={(e) => setObj(e)}/>
         <pre>
-            {JSON.stringify(obj,null, 2)}
+            {JSON.stringify(obj, null, 2)}
         </pre>
         <div>
             <button onClick={() => {
                 dynamicInputRef.current?.onSet?.({
-                    test:'hello world'
+                    test: 'hello world'
                 })
             }}>setData
             </button>

package/dist/antd/AdDynamicForm.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { FormProps, RowProps } from 'antd';
+import { Rule } from 'antd/es/form';
+import { DyFormItem } from '../types/form';
+import { ExposeDyFType, PresetType } from '../types';
+type RulesMap = Record<string, Rule | Rule[]>;
+type AdDynamicFormProps = {
+    header?: () => ReactNode;
+    footer?: () => ReactNode;
+    items: DyFormItem[];
+    preset?: PresetType;
+    formConfig?: FormProps;
+    gridConfig?: RowProps;
+    validateTrigger?: string | null;
+    rules?: RulesMap;
+};
+declare const AdDynamicForm: import('react').ForwardRefExoticComponent<AdDynamicFormProps & import('react').RefAttributes<ExposeDyFType>>;
+export default AdDynamicForm;

package/dist/antd/hooks/renderForm.d.ts

@@ -0,0 +1,5 @@
+import { DyFormItem } from '../../types/form';
+import { PasswordProps, TextAreaProps, InputProps } from 'antd/es/input';
+export declare function renderInput(optionProps: PasswordProps, rf?: DyFormItem): JSX.Element;
+export declare function renderInput(optionProps: TextAreaProps, rf?: DyFormItem): JSX.Element;
+export declare function renderInput(optionProps?: InputProps, rf?: DyFormItem): JSX.Element;

package/dist/antd/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),b=require("react"),y=require("antd");function I(e){return Array.isArray(e)?e:typeof e=="string"&&e.includes(".")?e.split("."):e}function p(e){return Array.isArray(e)?e.join("."):String(e)}function E(e,l){return(Array.isArray(l)?l:[l]).reduce((a,c)=>a==null?a:a[c],e)}function B(e,l,s){const a=Array.isArray(l)?l:[l];let c=e;for(let m=0;m<a.length;m++){const d=a[m];m===a.length-1?c[d]=s:((c[d]==null||typeof c[d]!="object")&&(c[d]={}),c=c[d])}}function w(e){const l={};return e.forEach(s=>{const a=I(s?.path??s?.key);B(l,a,s?.value)}),l}const S=b.forwardRef((e,l)=>{const[s]=y.Form.useForm(),a=e.validateTrigger??"onBlur",c=e.validateTrigger===null?void 0:a,m=e.preset??"fullRow",[d,A]=b.useState({}),u=b.useMemo(()=>(e.items??[]).filter(r=>!r?.hidden),[e.items]),q=b.useMemo(()=>[...u].sort((r,t)=>{const o=r?.sort??1/0,f=t?.sort??1/0;return Number(o)-Number(f)}),[u]),P=b.useMemo(()=>{const r={};return u.forEach(t=>{const o=I(t?.path??t?.key),f=p(o);let i=t?.rule;if(t?.required&&!t?.rule){const n=typeof t?.label=="string"?t.label:"";i={required:!0,message:t?.requiredHint?.(n)??`${n||t?.key}不能为空`,validateTrigger:c}}if(i&&(r[f]=i,t.isCustom)){const n=Array.isArray(i)?i:[i];A(C=>({...C,[o]:{status:!1,help:n.map(h=>h.message).filter(Boolean).join(",")}}))}}),{...r,...e.rules??{}}},[u,e.rules]);b.useEffect(()=>{s.setFieldsValue(w(u))},[s,u]);const R=(r,t)=>{u.forEach(o=>{const f=I(o?.path??o?.key);o.value=E(t,f)})};b.useImperativeHandle(l,()=>({reset:(r=null)=>{u.forEach(t=>t.value=r),s.setFieldsValue(w(u))},validator:async()=>{const r=u.filter(n=>!n.isCustom).map(n=>I(n?.path??n?.key)),t=await s.validateFields(r);let o={};const f=u.filter(n=>n.isCustom),i=[];for(const n of f){const C=I(n?.path??n?.key),h=p(C),j=P[h],F=Array.isArray(j)?j:j?[j]:[];A(v=>({...v,[h]:{status:"validating",help:""}})),o={...o,[h]:n.value};try{await M(n.value,F),A(v=>({...v,[h]:{status:"success",help:""}}))}catch(v){const x=v?.message||F.map(k=>k.message).filter(Boolean).join(",");A(k=>({...k,[h]:{status:"error",help:x}})),i.push({name:h,errors:[x]})}}return i.length?Promise.reject({errorFields:i,outOfDate:!1}):{...t,...o}},getResult:(r="res")=>r==="ori"?u:w(u),form:s}));const T=(r,t)=>typeof r?.render2=="function"?r.render2.length>=2?r.render2(r,t):r.render2(r):null,N=r=>{const t=I(r?.path??r?.key),o=p(t),f=P[o],i=Array.isArray(f)?f:f?[f]:void 0;let n=i?.map(x=>x.validateTrigger)?.filter(Boolean)??[];c&&(n=n.concat(a));const C=r?.colProps??{span:r?.span??24,offset:r?.offset??0},h=r?.formItemProps??{},{status:j,help:F}=d[o]??{status:void 0,help:void 0},v=r.isCustom?g.jsx(y.Form.Item,{name:void 0,label:r?.label,required:!!r?.required||d[o],validateStatus:j,help:j==="error"?F:void 0,...h,children:T(r,s)},o):g.jsx(y.Form.Item,{name:t,label:r?.label,rules:i,validateTrigger:n,...h,children:T(r,s)},o);return m==="grid"?g.jsx(y.Col,{...C,children:v},o):v};return g.jsxs("div",{className:"dynamicForm",children:[e.header&&g.jsx("div",{className:"header",children:e.header()}),g.jsx(y.Form,{form:s,onValuesChange:R,...e.formConfig,children:m==="grid"?g.jsx(y.Row,{gutter:e.gridConfig?.gutter??10,...e.gridConfig,children:q.map(N)}):q.map(N)}),e.footer&&g.jsx("div",{className:"footer",children:e.footer()})]})});function V(e){return!!(e==null||e===""||Array.isArray(e)&&e.length===0||typeof e=="object"&&!Array.isArray(e)&&Object.keys(e).length===0)}async function M(e,l){for(const s of l){const a=s;if(a?.required&&V(e))throw new Error(a?.message||"必填");typeof a?.validator=="function"&&await a.validator(a,e)}}function O(e={},l){const{type:s="text",key:a,render2:c,...m}=l??{},d=A=>{l?.onChange?.(A.target.value,l),e?.onChange?.(A)};switch(s){case"password":return g.jsx(y.Input.Password,{...m,...e,onChange:d});case"textarea":return g.jsx(y.Input.TextArea,{...m,...e,onChange:d});default:return g.jsx(y.Input,{...m,...e,onChange:d})}}exports.AdDynamicForm=S;exports.renderInput=O;

package/dist/antd/index.d.ts

@@ -0,0 +1,6 @@
+import { default as AdDynamicForm } from './AdDynamicForm';
+import { ExposeDyFType } from '../types';
+type adDynamicFormRef = ExposeDyFType;
+export * from './hooks/renderForm';
+export type { adDynamicFormRef };
+export { AdDynamicForm };

package/dist/antd/index.mjs

@@ -0,0 +1,155 @@
+import { jsxs as B, jsx as g } from "react/jsx-runtime";
+import { forwardRef as V, useState as O, useMemo as p, useEffect as S, useImperativeHandle as D } from "react";
+import { Form as F, Row as H, Col as M, Input as w } from "antd";
+function b(e) {
+  return Array.isArray(e) ? e : typeof e == "string" && e.includes(".") ? e.split(".") : e;
+}
+function N(e) {
+  return Array.isArray(e) ? e.join(".") : String(e);
+}
+function K(e, l) {
+  return (Array.isArray(l) ? l : [l]).reduce((a, c) => a == null ? a : a[c], e);
+}
+function _(e, l, s) {
+  const a = Array.isArray(l) ? l : [l];
+  let c = e;
+  for (let m = 0; m < a.length; m++) {
+    const d = a[m];
+    m === a.length - 1 ? c[d] = s : ((c[d] == null || typeof c[d] != "object") && (c[d] = {}), c = c[d]);
+  }
+}
+function P(e) {
+  const l = {};
+  return e.forEach((s) => {
+    const a = b(s?.path ?? s?.key);
+    _(l, a, s?.value);
+  }), l;
+}
+const Q = V((e, l) => {
+  const [s] = F.useForm(), a = e.validateTrigger ?? "onBlur", c = e.validateTrigger === null ? void 0 : a, m = e.preset ?? "fullRow", [d, v] = O({}), u = p(
+    () => (e.items ?? []).filter((r) => !r?.hidden),
+    [e.items]
+  ), T = p(() => [...u].sort((r, t) => {
+    const o = r?.sort ?? 1 / 0, f = t?.sort ?? 1 / 0;
+    return Number(o) - Number(f);
+  }), [u]), E = p(() => {
+    const r = {};
+    return u.forEach((t) => {
+      const o = b(t?.path ?? t?.key), f = N(o);
+      let i = t?.rule;
+      if (t?.required && !t?.rule) {
+        const n = typeof t?.label == "string" ? t.label : "";
+        i = {
+          required: !0,
+          message: t?.requiredHint?.(n) ?? `${n || t?.key}不能为空`,
+          validateTrigger: c
+        };
+      }
+      if (i && (r[f] = i, t.isCustom)) {
+        const n = Array.isArray(i) ? i : [i];
+        v((C) => ({
+          ...C,
+          [o]: {
+            status: !1,
+            help: n.map((h) => h.message).filter(Boolean).join(",")
+          }
+        }));
+      }
+    }), { ...r, ...e.rules ?? {} };
+  }, [u, e.rules]);
+  S(() => {
+    s.setFieldsValue(P(u));
+  }, [s, u]);
+  const x = (r, t) => {
+    u.forEach((o) => {
+      const f = b(o?.path ?? o?.key);
+      o.value = K(t, f);
+    });
+  };
+  D(l, () => ({
+    reset: (r = null) => {
+      u.forEach((t) => t.value = r), s.setFieldsValue(P(u));
+    },
+    validator: async () => {
+      const r = u.filter((n) => !n.isCustom).map((n) => b(n?.path ?? n?.key)), t = await s.validateFields(r);
+      let o = {};
+      const f = u.filter((n) => n.isCustom), i = [];
+      for (const n of f) {
+        const C = b(n?.path ?? n?.key), h = N(C), A = E[h], I = Array.isArray(A) ? A : A ? [A] : [];
+        v((y) => ({ ...y, [h]: { status: "validating", help: "" } })), o = { ...o, [h]: n.value };
+        try {
+          await z(n.value, I), v((y) => ({ ...y, [h]: { status: "success", help: "" } }));
+        } catch (y) {
+          const k = y?.message || I.map((j) => j.message).filter(Boolean).join(",");
+          v((j) => ({ ...j, [h]: { status: "error", help: k } })), i.push({ name: h, errors: [k] });
+        }
+      }
+      return i.length ? Promise.reject({ errorFields: i, outOfDate: !1 }) : { ...t, ...o };
+    },
+    getResult: (r = "res") => r === "ori" ? u : P(u),
+    form: s
+  }));
+  const R = (r, t) => typeof r?.render2 == "function" ? r.render2.length >= 2 ? r.render2(r, t) : r.render2(r) : null, q = (r) => {
+    const t = b(r?.path ?? r?.key), o = N(t), f = E[o], i = Array.isArray(f) ? f : f ? [f] : void 0;
+    let n = i?.map((k) => k.validateTrigger)?.filter(Boolean) ?? [];
+    c && (n = n.concat(a));
+    const C = r?.colProps ?? { span: r?.span ?? 24, offset: r?.offset ?? 0 }, h = r?.formItemProps ?? {}, { status: A, help: I } = d[o] ?? { status: void 0, help: void 0 }, y = r.isCustom ? /* @__PURE__ */ g(
+      F.Item,
+      {
+        name: void 0,
+        label: r?.label,
+        required: !!r?.required || d[o],
+        validateStatus: A,
+        help: A === "error" ? I : void 0,
+        ...h,
+        children: R(r, s)
+      },
+      o
+    ) : /* @__PURE__ */ g(
+      F.Item,
+      {
+        name: t,
+        label: r?.label,
+        rules: i,
+        validateTrigger: n,
+        ...h,
+        children: R(r, s)
+      },
+      o
+    );
+    return m === "grid" ? /* @__PURE__ */ g(M, { ...C, children: y }, o) : y;
+  };
+  return /* @__PURE__ */ B("div", { className: "dynamicForm", children: [
+    e.header && /* @__PURE__ */ g("div", { className: "header", children: e.header() }),
+    /* @__PURE__ */ g(F, { form: s, onValuesChange: x, ...e.formConfig, children: m === "grid" ? /* @__PURE__ */ g(H, { gutter: e.gridConfig?.gutter ?? 10, ...e.gridConfig, children: T.map(q) }) : T.map(q) }),
+    e.footer && /* @__PURE__ */ g("div", { className: "footer", children: e.footer() })
+  ] });
+});
+function $(e) {
+  return !!(e == null || e === "" || Array.isArray(e) && e.length === 0 || typeof e == "object" && !Array.isArray(e) && Object.keys(e).length === 0);
+}
+async function z(e, l) {
+  for (const s of l) {
+    const a = s;
+    if (a?.required && $(e))
+      throw new Error(a?.message || "必填");
+    typeof a?.validator == "function" && await a.validator(a, e);
+  }
+}
+function U(e = {}, l) {
+  const { type: s = "text", key: a, render2: c, ...m } = l ?? {}, d = (v) => {
+    l?.onChange?.(v.target.value, l), e?.onChange?.(v);
+  };
+  switch (s) {
+    case "password":
+      return /* @__PURE__ */ g(w.Password, { ...m, ...e, onChange: d });
+    case "textarea":
+      return /* @__PURE__ */ g(w.TextArea, { ...m, ...e, onChange: d });
+    default:
+      return /* @__PURE__ */ g(w, { ...m, ...e, onChange: d });
+  }
+}
+export {
+  Q as AdDynamicForm,
+  U as renderInput
+};

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export declare const omitFormCommonKey: readonly ["value", "key", "onChange", "render2"];

package/dist/hooks/useDyForm.d.ts

@@ -0,0 +1,26 @@
+import { Dispatch, SetStateAction } from 'react';
+import { DyFormItem } from '../types/form';
+type Options = {
+    syncFromRaw?: boolean;
+};
+export declare function useReactiveForm<T extends Record<string, any>, U = any>(rawItems: DyFormItem<T, U>[], options?: Options): readonly [DyFormItem<T, U>[], Dispatch<SetStateAction<DyFormItem<T, U>[]>>];
+type KeyOf<T> = Extract<keyof T, string>;
+type ItemsState<Row extends Record<string, any>, RuleT = any> = readonly [
+    DyFormItem<Row, RuleT>[],
+    Dispatch<SetStateAction<DyFormItem<Row, RuleT>[]>>
+];
+export declare function useDyForm<Row extends Record<string, any>, RuleT = any>(itemsState: ItemsState<Row, RuleT>): {
+    items: DyFormItem<Row, RuleT>[];
+    setDisabled: (disabled: boolean, keys?: KeyOf<Row>[]) => void;
+    setHidden: (hidden: boolean, keys?: KeyOf<Row>[]) => void;
+    setValue: <K extends KeyOf<Row>>(key: K, value: Row[K]) => void;
+    setValues: (patch: Partial<{ [K in KeyOf<Row>]: Row[K]; }>) => void;
+    getValue: <K extends KeyOf<Row>>(key: K) => Row[K] | undefined;
+    getValues: <K extends KeyOf<Row>>(keys?: readonly K[]) => Partial<Pick<Row, K>> & Record<string, any>;
+    onReset: (value?: any) => void;
+    getItem: <K extends KeyOf<Row>>(key: K) => DyFormItem<Row, RuleT> | undefined;
+    setItem: <K extends KeyOf<Row>>(k: K, patchItem: Partial<Omit<DyFormItem<Row, RuleT>, "key">>) => void;
+    setItems: <K extends KeyOf<Row>>(patch: [K, Partial<Omit<DyFormItem<Row, RuleT>, "key">>][]) => void;
+    updateKeys: <K extends KeyOf<Row>>(patch: [K, string][]) => void;
+};
+export {};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("react/jsx-runtime"),R=require("react"),P=(o,y,c)=>Object.keys(o).map((r,l)=>{const u=o[r],v=Array.isArray(u),F=v?u.every(L=>typeof L=="number"):typeof u=="number";return{rId:y(l),key:r,value:v?u.join(c):u,isArray:v||void 0,isNumber:F||void 0}}),_=(o,y)=>o.reduce((c,r)=>(r.key.trim()&&(c[r.key]=K(r.value,r.isArray,r.isNumber,y)),c),{}),K=(o,y,c,r=",")=>{let l;return y?c?l=String(o).split(r).map(Number).filter(u=>!Number.isNaN(u)):l=String(o).split(r):c?l=parseFloat(o):l=o.toString(),l},W=(o,y,c=",")=>{const r=l=>{l=l.replace(/[^\d.-]/g,"");let u=!1;l.startsWith("-")&&(u=!0),l=l.replace(/-/g,"");const v=l.indexOf(".");return v!==-1&&(l=l.slice(0,v+1)+l.slice(v+1).replace(/\./g,"")),(u?"-":"")+l};return y?o.split(c).map(l=>r(l)).join(c):r(o)},J=o=>`hsl(${o*35%360}, 60%, 65%)`,Q=(o,y)=>o[y-1]??J(y);function T(o,y,c){if(y.length===0)return c(o,-1);const[r,...l]=y,u=[...o];if(l.length===0)return c(u,r);const v=u[r];if(!Array.isArray(v.value))return u;const F=T(v.value,l,c);return F.length===0?u[r]={...v,value:"",isArray:void 0,isNumber:void 0}:u[r]={...v,value:F},u}function p(o){return o.filter(Boolean).join(" ")}const U=R.forwardRef((o,y)=>{const{value:c,size:r,dyCls:l,isController:u,configs:v,btnConfigs:F,dyListConfigs:L,randomFun:k=n=>`${Date.now()}_${n??0}`,onReset:B,onMerge:q,onChange:V}=o,M={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...F},$={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...v},h={arraySplitSymbol:",",...L},[g,j]=R.useState(()=>P(c,k,h.arraySplitSymbol)),S=R.useRef(null);return R.useImperativeHandle(y,()=>({getResult(n){return n==="ori"?g:_(g,h.arraySplitSymbol)},onSet(n){j(P(n??c,k,h.arraySplitSymbol))}})),R.useEffect(()=>{u&&V(_(g,h.arraySplitSymbol))},[g]),e.jsxs("div",{className:l??`dynamicInput ${r}`,children:[e.jsx("div",{className:"dyFormList",ref:S,style:{maxHeight:$.maxHeight},children:g.map((n,d,O)=>e.jsxs("div",{className:"dItem",children:[e.jsxs("div",{className:"input",children:[e.jsx("input",{value:n.key,className:"key nativeInput",onInput:m=>{const t=m.target.value;j(a=>{const x=[...a],s=x[d];return x[d]={...s,key:t},x})}}),":",e.jsxs("div",{className:"vInput",children:[e.jsxs("div",{className:"slot",children:[e.jsx("button",{className:p([n.isArray?"success":"default","small","bt"]),onClick:()=>{j(m=>{const t=[...m],a=t[d];return t[d]={...a,isArray:!a.isArray},t})},children:"Array"})," ",e.jsx("button",{className:p([n.isNumber?"success":"default","small","bt"]),onClick:()=>{j(m=>{const t=[...m],a=t[d];return t[d]={...a,isNumber:!a.isNumber},t})},children:"Number"})]}),e.jsx("input",{value:n.value,className:"value nativeV",onInput:m=>{const t=m.target.value;let a=t;n.isNumber&&$.allowFilter&&(a=W(t,n.isArray,h.arraySplitSymbol)),j(x=>{const s=[...x],H=s[d];return s[d]={...H,value:a},s})}})]})]}),e.jsxs("div",{className:"btn",children:[e.jsx("button",{className:p([r,"success","bt"]),disabled:d!==O.length-1,onClick:()=>{j(m=>[...m,{rId:k(),key:"",value:""}]),$.autoScroll&&setTimeout(()=>{const m=S.current;m?.scrollTo({top:m?.scrollHeight+20,behavior:"smooth"})})},children:"+"}),e.jsx("button",{className:p(["danger",r,"bt"]),onClick:()=>{j(m=>m.filter(t=>t.rId!==n.rId))},children:"-"})]})]},n.rId))}),e.jsxs("div",{className:"control",children:[!g.length&&e.jsx("button",{className:p(["success",r,"bt"]),onClick:()=>{j(n=>[...n,{rId:k(),key:"",value:""}])},children:M.newTxt}),!u&&e.jsxs(e.Fragment,{children:[!$.hideReset&&e.jsx("button",{className:p(["default",r,"bt"]),onClick:()=>{j(P(c,k,h.arraySplitSymbol)),B?.()},children:M.resetTxt}),e.jsx("button",{className:p(["info",r,"bt"]),onClick:()=>{[...g].sort((O,m)=>+O.rId-+m.rId);const d=_(g,h.arraySplitSymbol);V(d),q?.(d,g),j(P(d,k,h.arraySplitSymbol))},children:M.mergeTxt})]})]})]})}),X=R.forwardRef((o,y)=>{const{depth:c=5,value:r,isController:l,dyCls:u,configs:v,btnConfigs:F,dyListConfigs:L,randomFun:k=t=>`${Date.now()}_${t??0}`,newChildTxt:B=t=>`添加 '${t.key}' 子项`,onReset:q,onMerge:V,onChange:M}=o,$={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...F},h={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...v},g={arraySplitSymbol:",",...L},j=t=>["string","number"].includes(t),[S,n]=R.useState(()=>d(r));R.useImperativeHandle(y,()=>({getResult(t){return t==="ori"?S:O(S)},onSet(t){n(d(t??r))}}));function d(t){return Object.keys(t).map((a,x)=>{let s=t[a];const H=Array.isArray(s),z=H?s.every(D=>typeof D=="number"):typeof s=="number",I=s===null;return j(typeof s)&&(s=t[a]),I&&(s=""),{rId:k(x),key:a,value:Object.prototype.toString.call(s)==="[object Object]"?d(t[a]):H?s.join(g.arraySplitSymbol):s,isArray:H||void 0,isNumber:z||void 0}})}const O=t=>t.reduce((a,x)=>{const s=x.value;return x.key.trim().length&&(a[x.key]=Array.isArray(s)?O(s):K(x.value,x.isArray,x.isNumber,g.arraySplitSymbol)),a},{}),m=(t,a=1,x=[])=>e.jsx("div",{className:p([`depth-${a}`,h.showBorder?"":"no-border",h.showPad?"":"no-pad"]),style:{"--depth":a,["--c"+[a]]:Q(h.borderColors,a)},children:t.map((s,H,z)=>{const I=[...x,H],D=Array.isArray(s.value),G=j(typeof s.value);return e.jsxs("div",{className:"dItem",style:{marginLeft:a>1?`${a*h.retractLen}px`:"0"},children:[e.jsxs("div",{className:"input",children:[!D&&e.jsxs(e.Fragment,{children:[e.jsx("input",{value:s.key,className:"key nativeInput",onInput:A=>{const N=A.target.value;n(b=>T(b,I,(i,f)=>{const w=[...i],C=w[f];return w[f]={...C,key:N},w}))}}),":"]}),e.jsxs("div",{className:"vInput",children:[e.jsx("div",{className:"slot",children:Array.isArray(s.value)?void 0:e.jsxs(e.Fragment,{children:[e.jsx("button",{className:p([s.isArray?"success":"default","small","bt"]),onClick:()=>{n(A=>T(A,I,(N,b)=>{const i=[...N],f=i[b];return i[b]={...f,isArray:!f.isArray},i}))},children:"Array"})," ",e.jsx("button",{className:p([s.isNumber?"success":"default","small","bt"]),onClick:()=>{n(A=>T(A,I,(N,b)=>{const i=[...N],f=i[b];return i[b]={...f,isNumber:!f.isNumber},i}))},children:"Number"})]})}),e.jsx("input",{className:`value nativeV ${D?"isKey":""}`,value:G?s.value:s.key,onInput:A=>{const N=A.target.value;if(D){n(i=>T(i,I,(f,w)=>{const C=[...f],E=C[w];return C[w]={...E,key:N},C}));return}let b=N;h.allowFilter&&s.isNumber&&(b=W(N,s.isArray,g.arraySplitSymbol)),n(i=>T(i,I,(f,w)=>{const C=[...f],E=C[w];return C[w]={...E,value:b},C}))}}),e.jsx("div",{className:"surSlot",children:a<c?!D&&e.jsx("button",{className:p(["success","bt"]),onClick:()=>{n(A=>T(A,I,(N,b)=>{const i=[...N],f=i[b],C=[...Array.isArray(f.value)?f.value:[],{rId:k(),key:"",value:""}];return i[b]={...f,isArray:void 0,isNumber:void 0,value:C},i}))},children:B(s)}):null})]})]}),e.jsxs("div",{className:"btn",children:[e.jsx("button",{className:p(["success","bt"]),disabled:H!==z.length-1,onClick:()=>{n(A=>T(A,I,(N,b)=>{const i=[...N];return i.splice(b+1,0,{rId:k(),key:"",value:""}),i}))},children:"+"}),e.jsx("button",{className:p(["danger","bt"]),onClick:()=>{n(A=>T(A,I,(N,b)=>{const i=[...N];return i.splice(b,1),i}))},children:"-"})]}),Array.isArray(s.value)&&m(s.value,a+1,I)]},s.rId)})});return R.useEffect(()=>{l&&M(O(S))},[S]),e.jsxs("div",{className:u??"dynamicCascadeInput",children:[e.jsx("div",{className:"dyFormList",style:{maxHeight:h.maxHeight},children:m(S)}),e.jsxs("div",{className:"control",children:[!S.length&&e.jsx("button",{className:p(["success","bt"]),onClick:()=>{n(t=>[...t,{rId:k(),key:"",value:""}])},children:$.newTxt}),!l&&e.jsxs(e.Fragment,{children:[!h.hideReset&&e.jsx("button",{className:p(["default","bt"]),onClick:()=>{n(d(r)),q?.()},children:$.resetTxt}),e.jsx("button",{className:p(["info","bt"]),onClick:()=>{const t=O(S);M(t),V?.(t,S),n(d(t))},children:$.mergeTxt})]})]})]})});exports.DynamicCascadeInput=X;exports.DynamicInput=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const s=require("react/jsx-runtime"),b=require("react"),K=(u,d,t)=>Object.keys(u).map((n,m)=>{const h=u[n],p=Array.isArray(h),w=p?h.every(D=>typeof D=="number"):typeof h=="number";return{rId:d(m),key:n,value:p?h.join(t):h,isArray:p||void 0,isNumber:w||void 0}}),B=(u,d)=>u.reduce((t,n)=>(n.key.trim()&&(t[n.key]=_(n.value,n.isArray,n.isNumber,d)),t),{}),_=(u,d,t,n=",")=>{let m;return d?t?m=String(u).split(n).map(Number).filter(h=>!Number.isNaN(h)):m=String(u).split(n):t?m=parseFloat(u):m=u.toString(),m},W=(u,d,t=",")=>{const n=m=>{m=m.replace(/[^\d.-]/g,"");let h=!1;m.startsWith("-")&&(h=!0),m=m.replace(/-/g,"");const p=m.indexOf(".");return p!==-1&&(m=m.slice(0,p+1)+m.slice(p+1).replace(/\./g,"")),(h?"-":"")+m};return d?u.split(t).map(m=>n(m)).join(t):n(u)},G=u=>`hsl(${u*35%360}, 60%, 65%)`,J=(u,d)=>u[d-1]??G(d);function O(u,d,t){if(d.length===0)return t(u,-1);const[n,...m]=d,h=[...u];if(m.length===0)return t(h,n);const p=h[n];if(!Array.isArray(p.value))return h;const w=O(p.value,m,t);return w.length===0?h[n]={...p,value:"",isArray:void 0,isNumber:void 0}:h[n]={...p,value:w},h}function k(u){return u.filter(Boolean).join(" ")}function U(u,d){const t={...u};return delete t.value,d?.forEach(n=>{n!=="value"&&delete t[n]}),t}const X=b.forwardRef((u,d)=>{const{value:t={},size:n,dyCls:m,isController:h,configs:p,btnConfigs:w,dyListConfigs:D,randomFun:N=e=>`${Date.now()}_${e??0}`,onReset:L,onMerge:P,onChange:H}=u,M={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...w},R={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...p},x={arraySplitSymbol:",",...D},[r,a]=b.useState(()=>K(t,N,x.arraySplitSymbol)),c=b.useRef(null);return b.useImperativeHandle(d,()=>({getResult(e){return e==="ori"?r:B(r,x.arraySplitSymbol)},onSet(e){a(K(e??t,N,x.arraySplitSymbol))}})),b.useEffect(()=>{h&&H(B(r,x.arraySplitSymbol))},[r]),s.jsxs("div",{className:`dynamicInput ${n} ${m}`,children:[s.jsx("div",{className:`dyFormList ${r.length?"":"noList"}`,ref:c,style:{maxHeight:R.maxHeight},children:r.map((e,o,A)=>s.jsxs("div",{className:"dItem",children:[s.jsxs("div",{className:"input",children:[s.jsx("input",{value:e.key,className:"key nativeInput",onInput:f=>{const l=f.target.value;a(y=>{const j=[...y],i=j[o];return j[o]={...i,key:l},j})}}),":",s.jsxs("div",{className:"vInput",children:[s.jsxs("div",{className:"slot",children:[s.jsx("button",{className:k([e.isArray?"success":"default","small","bt"]),onClick:()=>{a(f=>{const l=[...f],y=l[o];return l[o]={...y,isArray:!y.isArray},l})},children:"Array"})," ",s.jsx("button",{className:k([e.isNumber?"success":"default","small","bt"]),onClick:()=>{a(f=>{const l=[...f],y=l[o];return l[o]={...y,isNumber:!y.isNumber},l})},children:"Number"})]}),s.jsx("input",{value:e.value,className:"value nativeV",onInput:f=>{const l=f.target.value;let y=l;e.isNumber&&R.allowFilter&&(y=W(l,e.isArray,x.arraySplitSymbol)),a(j=>{const i=[...j],V=i[o];return i[o]={...V,value:y},i})}})]})]}),s.jsxs("div",{className:"btn",children:[s.jsx("button",{className:k([n,"success","bt"]),disabled:o!==A.length-1,onClick:()=>{a(f=>[...f,{rId:N(),key:"",value:""}]),R.autoScroll&&setTimeout(()=>{const f=c.current;f?.scrollTo({top:f?.scrollHeight+20,behavior:"smooth"})})},children:"+"}),s.jsx("button",{className:k(["danger",n,"bt"]),onClick:()=>{a(f=>f.filter(l=>l.rId!==e.rId))},children:"-"})]})]},e.rId))}),s.jsxs("div",{className:`control ${r.length?"":"noList"}`,children:[!r.length&&s.jsx("button",{className:k(["success",n,"bt"]),onClick:()=>{a(e=>[...e,{rId:N(),key:"",value:""}])},children:M.newTxt}),!h&&s.jsxs(s.Fragment,{children:[!R.hideReset&&s.jsx("button",{className:k(["default",n,"bt"]),onClick:()=>{a(K(t,N,x.arraySplitSymbol)),L?.()},children:M.resetTxt}),s.jsx("button",{className:k(["info",n,"bt"]),onClick:()=>{[...r].sort((A,f)=>+A.rId-+f.rId);const o=B(r,x.arraySplitSymbol);H(o),P?.(o,r),a(K(o,N,x.arraySplitSymbol))},children:M.mergeTxt})]})]})]})}),Y=b.forwardRef((u,d)=>{const{depth:t=5,value:n,isController:m,dyCls:h,configs:p,btnConfigs:w,dyListConfigs:D,randomFun:N=l=>`${Date.now()}_${l??0}`,newChildTxt:L=l=>`添加 '${l.key}' 子项`,onReset:P,onMerge:H,onChange:M}=u,R={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...w},x={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...p},r={arraySplitSymbol:",",...D},a=l=>["string","number"].includes(l),[c,e]=b.useState(()=>o(n));b.useImperativeHandle(d,()=>({getResult(l){return l==="ori"?c:A(c)},onSet(l){e(o(l??n))}}));function o(l){return Object.keys(l).map((y,j)=>{let i=l[y];const V=Array.isArray(i),q=V?i.every(E=>typeof E=="number"):typeof i=="number",F=i===null;return a(typeof i)&&(i=l[y]),F&&(i=""),{rId:N(j),key:y,value:Object.prototype.toString.call(i)==="[object Object]"?o(l[y]):V?i.join(r.arraySplitSymbol):i,isArray:V||void 0,isNumber:q||void 0}})}const A=l=>l.reduce((y,j)=>{const i=j.value;return j.key.trim().length&&(y[j.key]=Array.isArray(i)?A(i):_(j.value,j.isArray,j.isNumber,r.arraySplitSymbol)),y},{}),f=(l,y=1,j=[])=>s.jsx("div",{className:k([`depth-${y}`,x.showBorder?"":"no-border",x.showPad?"":"no-pad"]),style:{"--depth":y,["--c"+[y]]:J(x.borderColors,y)},children:l.map((i,V,q)=>{const F=[...j,V],E=Array.isArray(i.value),Q=a(typeof i.value);return s.jsxs("div",{className:"dItem",style:{marginLeft:y>1?`${y*x.retractLen}px`:"0"},children:[s.jsxs("div",{className:"input",children:[!E&&s.jsxs(s.Fragment,{children:[s.jsx("input",{value:i.key,className:"key nativeInput",onInput:I=>{const S=I.target.value;e(g=>O(g,F,(v,C)=>{const T=[...v],$=T[C];return T[C]={...$,key:S},T}))}}),":"]}),s.jsxs("div",{className:"vInput",children:[s.jsx("div",{className:"slot",children:Array.isArray(i.value)?void 0:s.jsxs(s.Fragment,{children:[s.jsx("button",{className:k([i.isArray?"success":"default","small","bt"]),onClick:()=>{e(I=>O(I,F,(S,g)=>{const v=[...S],C=v[g];return v[g]={...C,isArray:!C.isArray},v}))},children:"Array"})," ",s.jsx("button",{className:k([i.isNumber?"success":"default","small","bt"]),onClick:()=>{e(I=>O(I,F,(S,g)=>{const v=[...S],C=v[g];return v[g]={...C,isNumber:!C.isNumber},v}))},children:"Number"})]})}),s.jsx("input",{className:`value nativeV ${E?"isKey":""}`,value:Q?i.value:i.key,onInput:I=>{const S=I.target.value;if(E){e(v=>O(v,F,(C,T)=>{const $=[...C],z=$[T];return $[T]={...z,key:S},$}));return}let g=S;x.allowFilter&&i.isNumber&&(g=W(S,i.isArray,r.arraySplitSymbol)),e(v=>O(v,F,(C,T)=>{const $=[...C],z=$[T];return $[T]={...z,value:g},$}))}}),s.jsx("div",{className:"surSlot",children:y<t?!E&&s.jsx("button",{className:k(["success","bt"]),onClick:()=>{e(I=>O(I,F,(S,g)=>{const v=[...S],C=v[g],$=[...Array.isArray(C.value)?C.value:[],{rId:N(),key:"",value:""}];return v[g]={...C,isArray:void 0,isNumber:void 0,value:$},v}))},children:L(i)}):null})]})]}),s.jsxs("div",{className:"btn",children:[s.jsx("button",{className:k(["success","bt"]),disabled:V!==q.length-1,onClick:()=>{e(I=>O(I,F,(S,g)=>{const v=[...S];return v.splice(g+1,0,{rId:N(),key:"",value:""}),v}))},children:"+"}),s.jsx("button",{className:k(["danger","bt"]),onClick:()=>{e(I=>O(I,F,(S,g)=>{const v=[...S];return v.splice(g,1),v}))},children:"-"})]}),Array.isArray(i.value)&&f(i.value,y+1,F)]},i.rId)})});return b.useEffect(()=>{m&&M(A(c))},[c]),s.jsxs("div",{className:`dynamicCascadeInput ${h}`,children:[s.jsx("div",{className:`dyFormList ${c.length?"":"noObj"}`,style:{maxHeight:x.maxHeight},children:f(c)}),s.jsxs("div",{className:`control ${c.length?"":"noObj"}`,children:[!c.length&&s.jsx("button",{className:k(["success","bt"]),onClick:()=>{e(l=>[...l,{rId:N(),key:"",value:""}])},children:R.newTxt}),!m&&s.jsxs(s.Fragment,{children:[!x.hideReset&&s.jsx("button",{className:k(["default","bt"]),onClick:()=>{e(o(n)),P?.()},children:R.resetTxt}),s.jsx("button",{className:k(["info","bt"]),onClick:()=>{const l=A(c);M(l),H?.(l,c),e(o(l))},children:R.mergeTxt})]})]})]})}),Z=["value","key","onChange","render2"];function ee(u,d={}){const[t,n]=b.useState(()=>u);return b.useEffect(()=>{d.syncFromRaw&&n(u)},[d.syncFromRaw,u]),[t,n]}function te(u){const[d,t]=u,n=b.useRef(d);b.useEffect(()=>{n.current=d},[d]);const m=b.useCallback(()=>n.current,[]),h=b.useCallback((r,a)=>{const c=a?.length?new Set(a):null;t(e=>e.map(o=>{const A=o.key;return!c||c.has(A)?{...o,disabled:r}:o}))},[t]),p=b.useCallback((r,a)=>{const c=a?.length?new Set(a):null;t(e=>e.map(o=>{const A=o.key;return!c||c.has(A)?{...o,hidden:r}:o}))},[t]),w=b.useCallback((r,a)=>{t(c=>c.map(e=>e.key===r?{...e,value:a}:e))},[t]),D=b.useCallback(r=>{t(a=>a.map(c=>{const e=c.key;return e in r?{...c,value:r[e]}:c}))},[t]),N=b.useCallback(r=>m().find(a=>a.key===r),[m]),L=b.useCallback(r=>{const a=N(r);return a?a.value:void 0},[N]),P=b.useCallback(r=>{const a=r?.length?new Set(r):null;return m().reduce((c,e)=>{const o=e.key;return(!a||a.has(o))&&(c[o]=e.value),c},{})},[m]),H=b.useCallback((r=null)=>{t(a=>a.map(c=>({...c,value:r})))},[t]),M=b.useCallback((r,a)=>{t(c=>c.map(e=>{if(e.key!==r)return e;const{key:o,...A}=a;return{...e,...A}}))},[t]),R=b.useCallback(r=>{const a=new Map(r);t(c=>c.map(e=>{const o=a.get(e.key);if(!o)return e;const{key:A,...f}=o;return{...e,...f}}))},[t]),x=b.useCallback(r=>{const a=new Map(r);t(c=>c.map(e=>{const o=a.get(e.key);return o?{...e,key:o}:e}))},[t]);return b.useMemo(()=>({items:d,setDisabled:h,setHidden:p,setValue:w,setValues:D,getValue:L,getValues:P,onReset:H,getItem:N,setItem:M,setItems:R,updateKeys:x}),[d,h,p,w,D,L,P,H,N,M,R,x])}exports.DynamicCascadeInput=Y;exports.DynamicInput=X;exports.OmitValue=U;exports.clsx=k;exports.formatNumberInput=W;exports.getDepthColor=G;exports.omitFormCommonKey=Z;exports.parseValue=_;exports.resetObj=B;exports.saferRepairColor=J;exports.tranArr=K;exports.updateArrayAtPath=O;exports.useDyForm=te;exports.useReactiveForm=ee;