@bgscore/react-form 1.0.22 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var te=require('react'),jsxRuntime=require('react/jsx-runtime'),reactCore=require('@bgscore/react-core'),reactHookForm=require('react-hook-form');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var te__default=/*#__PURE__*/_interopDefault(te);var q=te.createContext(void 0);function h(){let e=te.useContext(q);return e||{}}function $({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let n=te.useRef([]),i=te.useCallback(d=>{let o=n.current.findIndex(f=>f.id===d.id);if(o>-1){let f=[...n.current];f[o]=d,n.current=[...f];}else n.current.push(d);},[n]),m=te.useCallback(d=>{n.current=n.current.filter(o=>o.id!==d);},[]),u=async(d,o)=>{r.setIsSubmit(true);let f=o?await r.formControl.trigger():true,l=r.getData();f&&t&&t({...l,...d},{...r});},a={...r,registerItem:i,unregisterItem:m,items:n.current,triggerSubmit:u,onFieldChange:p};return jsxRuntime.jsx(q.Provider,{value:a,children:e})}var w=new WeakMap;function V(e){return w.has(e)||w.set(e,reactCore.createStore({})),w.get(e)}function C(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let n=t.split("."),i=r;for(let m=0;m<n.length;m++){let u=n[m];m===n.length-1?i[u]=C(p):((!i[u]||typeof i[u]!="object")&&(i[u]={}),i=i[u]);}}else r[t]=C(p);return r}function O(){return reactCore.createTable({name:"draft",primaryKey:"field_1731131919872_aj29d"})}var Q=te.createContext(void 0);function A(){let e=te.useContext(Q);return e||{}}function H({children:e,value:r}){return jsxRuntime.jsx(Q.Provider,{value:r,children:e})}function B(){let{dbName:e="bgs-react-form"}=A();return reactCore.createDatabase({dbName:e,table:{draft:O()}})}function _(e){let r=B(),t=reactCore.useDbLiveFlag(r.draft.detail,{key:e}),p=async(m,u)=>{let d={...await i(),...m};Object.keys(d).forEach(l=>{reactCore.isNotEmpty(d[l])||delete d[l];});let o=Object.keys(d);if(o.length===1&&o[0]==="field_1731131919872_aj29d")return n();o.some(l=>l!=="field_1731131919872_aj29d"&&d[l]!==reactCore.getFieldValue(u,l))?await r.draft.put(e,d):await n();},n=async()=>{await r.draft.remove(e);},i=async()=>await r.draft.detail(e);return {isDraft:t,saveDraft:p,removeDraft:n,getDataDraft:i}}var J=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=C(e.defaultValues);let r=te.useRef(null),[t,p]=te.useState(false),n=e?.draftKey,i=n?_(n):void 0,m=reactHookForm.useForm({reValidateMode:"onSubmit",mode:"all",...e}),u=V(m),a=te.useMemo(()=>reactCore.generateUUID(),[]),d=l=>l?reactCore.getFieldValue(reactCore.mappingUndefinedtoNull(m.getValues()),l):reactCore.mappingUndefinedtoNull(m.getValues()),o=l=>{l?typeof l=="string"?m.resetField(l,{}):typeof l=="object"&&reactCore.isArray(l,0)&&l.forEach(F=>m.resetField(F)):m.reset();},f={...m,ref:r,reset:o,updateData:l=>{let F=d();m.reset(C({...F,...l}));},getData:d,formControl:m,useFieldArray:l=>reactHookForm.useFieldArray({control:m.control,name:l}),useWatch:l=>reactHookForm.useWatch({control:m.control,name:l}),isSubmit:t,formId:a,setIsSubmit:p,useSelected:l=>u.useStore(F=>reactCore.getFieldValue(F,l)),setSelected:u.setState,isDraft:!!i?.isDraft,removeDraft:()=>{i?.removeDraft?.();},resetDraft:()=>{i?.removeDraft?.(),o();},saveDraft:(...l)=>i?.saveDraft?.(...l),getDataDraft:()=>i?.getDataDraft?.(),draftKey:n};return [f,f]};var je=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:n,controller:i,children:m,...u})=>{n&&(n=C(n));let a=u.draftKey,d=i??J({draftKey:a}),[o]=Array.isArray(d)?d:[d],f=te.useRef(true),l=te.useRef(void 0),{autoSaveDelay:F=.5}=A(),T=async g=>{g.preventDefault(),g.stopPropagation(),o.setIsSubmit(true);let s=await o.formControl.trigger(),y=o.getData();s?e&&e({...y},{...o}):t&&t(o.formControl.formState.errors);};te.useEffect(()=>{n&&reactCore.diffJson(l.current||{},n)&&(o.formControl.reset(n),l.current=n,x());},[n,o.formControl.reset]),te.useEffect(()=>{if(!r)return;let g=o.formControl.watch((s,y)=>r(s,y,o));return ()=>g.unsubscribe()},[]);let x=async()=>{if(o?.isDraft){f.current=false;let g=await o.getDataDraft();g&&Object.entries(g).forEach(([s,y])=>{s==="field_1731131919872_aj29d"||!reactCore.isNotEmpty(y)||(o.setValue(s,y),o.trigger(s));});}};te.useEffect(()=>{f.current&&x();},[o.isDraft,f.current]);let v=te.useMemo(()=>reactCore.debounce((g,s,y)=>{y?.saveDraft?.({[g]:s},n);},F),[n,F]),c=async(g,s,y)=>{p?.(g,s,y),v(g,s,y);},R={...u};return delete R?.draftKey,jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx($,{controller:{...o,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:c,children:jsxRuntime.jsx("form",{...R,id:o.formId,ref:o.ref,onSubmit:T,children:m})})})},Y=je;var ee=te.createContext(void 0);function G(){let e=te.useContext(ee);return e||{}}function K({children:e,...r}){return jsxRuntime.jsx(ee.Provider,{value:r,children:e})}var re=e=>{let r=h(),t=reactHookForm.useFieldArray({control:r.control,name:e}),n={formArrayId:te.useMemo(()=>reactCore.generateUUID(),[]),...t,...r};return [n,n]};var ne=({name:e,defaultData:r,controller:t,children:p})=>{let n=t??re(e),[i]=Array.isArray(n)?n:[n];return te.useEffect(()=>{typeof r=="boolean"&&r?i.append({}):typeof r=="number"&&r>0?i.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&i.append(r);},[]),jsxRuntime.jsx(jsxRuntime.Fragment,{children:i.fields.map((m,u)=>{let a=`${e}.${u}.`,d={...i,index:u,fieldId:m.id,name:a,countFields:i.fields.length,removeItem:()=>i.remove(u),watchItem:o=>i.watch(o?`${a}${o}`:a.slice(0,-1)),setValueItem:(o,f)=>i.setValue(`${a}${o}`,f),useSelectedItem:o=>i.useSelected(`${a}${o}`)};return jsxRuntime.jsx(te__default.default.Fragment,{children:jsxRuntime.jsx(K,{...d,children:reactCore.renderChildren(p,d)})},m.id)})})};ne.displayName="BgsFormArray";var Xe=ne;te__default.default.memo(({children:e,props:r})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:reactCore.renderChildren(e,r)}));var ae=te.createContext(void 0);function N(){let e=te.useContext(ae);return e||{}}function k({children:e,...r}){return jsxRuntime.jsx(ae.Provider,{value:r,children:e})}var me=({children:e,...r})=>{let t=h(),p=te.useMemo(()=>reactCore.generateUUID(),[]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(k,{...t,...r,formGroupId:p,children:e})})};me.displayName="BgsFormGroup";var nr=me;var ar=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function M({validationRules:e,label:r}){let{formControl:t,getData:p}=h(),n=[];return e&&(typeof e=="string"?de(e,true,r,t,p,{}).forEach(i=>n.push(i)):typeof e=="object"&&Object.keys(e).forEach(i=>{let{validate:m}=n.find(a=>a.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(i)){let a=e[i],d="";["match","diff"].includes(i)&&typeof a=="object"&&(a=e[i].dataField,d=e[i].label),a!=null&&de(i,a,r,t,p,m,d).forEach(o=>n.push(o));}else if(typeof e[i]=="object"){let a=e[i];n.push({validate:{...m,[i]:d=>a.validation(d)||a.message&&(typeof a.message=="string"?a.message:a.message(r))}});}})),Object.assign({},...n)}var de=(e,r,t,p,n,i,m)=>{let u=[],{validationMessage:a}=A(),{required:d,minLength:o,maxLength:f,min:l,max:F,email:T,match:x,diff:v,pattern:c}=a||{},g={required:s=>{if(!r)return true;let y=d?d(t):`${t} is required`;return typeof s=="string"&&!s.trim()||s==null?y:true},minLength:{value:r,message:o?o(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:f?f(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:l?l(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:F?F(t,r):`${t} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${t} ${r.message}`:true,email:(s="")=>!r||!s?true:ar.test(s)||(T?T(t):`${t} must be type email`),match:(s="")=>s?s===(n&&n(r))||(x?x(t,m||reactCore.labelFormatter.changeAll(r)):`${t} must be same with ${m||reactCore.labelFormatter.changeAll(r)}`):true,diff:(s="")=>s?s!==(n&&n(r))||(v?v(t,m||reactCore.labelFormatter.changeAll(r)):`${t} must be different with ${m||reactCore.labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(g){let{validate:s}=u.find(y=>y.validate)||{};typeof g=="function"?u.push({validate:{...s,...i,[e]:g}}):e==="pattern"?u.push({validate:{...s,...i,[`${e}${r}`]:g[r]}}):u.push({[e]:g});}return u};var Kt=e=>{let r=te.useMemo(()=>reactCore.generateUUID(),[]),t=h(),{registerItem:p,unregisterItem:n,control:i,disabled:m,readOnly:u,formId:a,setSelected:d,useSelected:o,onFieldChange:f}=t,{name:l,formId:F,...T}=N(),{name:x,formId:v}=G(),c=te.useMemo(()=>{let b=e.dataField;return e.disabledHierarchy||(x&&a===v&&(b=`${x}${b}`),l&&a===F&&(b=`${l}${b}`)),b},[x,a,v,e.dataField,l,F,e.disabledHierarchy]),R=te.useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return reactCore.labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);te.useEffect(()=>(p({id:r,...e,dataField:c,label:R}),()=>{n(r);}),[r,e,c,R]);let g=false;typeof e.disabled=="boolean"?g=e.disabled:typeof T.disabled=="boolean"?g=T.disabled:g=!!m;let s=false;typeof e.readOnly=="boolean"?s=e.readOnly:typeof T.readOnly=="boolean"?s=T.readOnly:s=!!u;let y=false;typeof e.hidden=="boolean"&&(y=e.hidden);let U=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?U={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?U={email:true,required:e.required}:typeof e.validationRules=="object"&&(U={...e.validationRules,required:e.required}));let le=g||s||y?{required:false}:M({...e,validationRules:U,label:R}),P=reactHookForm.useController({name:c,control:i,disabled:g,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),ue=P.fieldState.invalid,fe=P.fieldState.error?.message,ce=reactHookForm.useWatch({name:c,control:i,defaultValue:e.defaultValue}),pe=te.useMemo(()=>reactCore.debounce(b=>d(Fe=>({...Fe,[c]:b||null}))),[d,c]),ge=o(c),ye=U?.required;return {...e,setSelectedField:pe,label:R,dataField:c,controller:P,invalid:ue,messageError:fe,selectedField:ge,value:ce,required:ye,onChange:b=>{P.field.onChange(b),f?.(c,b,t);}}};var Mt=()=>{let{formControl:e,items:r}=h(),t=(n,i,m,u=0)=>{let a=[];if(Array.isArray(m))m.forEach((d,o)=>{let f=Object.entries(d||{}).map(([l,F])=>t(`${n}.${o}.${l}`,`${i}[]${l}`,F,m.length>1?o+1:0)).flat();a=[...a,...f];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([d,o])=>{let f=t(`${n}.${d}`,`${n}.${d}`,o);a=[...a,...f];});else {let d=m?.message||"",o=r.find(f=>f.dataField===i)?.label;a.push({label:`${o||""}${u>0?` ${u}`:""}`,message:d,dataField:n});}return a};return Object.entries(e.formState.errors||{}).map(([n,i])=>t(n,n,i)).flat()};function Vt(e){let{watch:r}=h(),t=te.useMemo(()=>{let m=new Set,u=a=>{if(a)for(let[d,o]of Object.entries(a)){if(d==="and"||d==="or"){o?.forEach(u);continue}o&&typeof o=="object"&&"fromField"in o&&typeof o.fromField=="string"&&m.add(o.fromField);}};return u(e),Array.from(m)},[e]),p=t.length?r(t):[],n=te.useMemo(()=>{let m={};return t.forEach((u,a)=>{m[u]=p?.[a];}),m},[t,p]),i=te.useCallback(m=>{if(!m)return m;let u={};for(let[a,d]of Object.entries(m)){if(a==="and"||a==="or"){u[a]=d?.map(o=>i(o))??d;continue}if(d&&typeof d=="object"&&"fromField"in d){let o=d,f={...o},l=o.fromField;l&&l in n?f.value=n[l]:f.value=o.value,delete f.fromField,u[a]=f;}else u[a]=d;}return u},[n]);return te.useMemo(()=>i(e)??{},[e,i])}var pr=(a=>(a.alphabet="alphabet",a.alphaNumber="alphanumber",a.number="number",a.lowercase="lowercase",a.url="url",a.uppercase="uppercase",a.mixedCase="mixedcase",a.specialCharacters="specialcharacters",a))(pr||{});var zt=Y;exports.BgsFormArray=Xe;exports.BgsFormGroup=nr;exports.BgsReactFormProvider=H;exports.PatternTypeEnum=pr;exports.default=zt;exports.useBgsController=Kt;exports.useBgsForm=h;exports.useBgsFormArray=G;exports.useBgsFormArrayInit=re;exports.useBgsFormGroup=N;exports.useBgsFormInit=J;exports.useResolvedQuery=Vt;exports.useSummaryValidation=Mt;
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var te=require('react'),jsxRuntime=require('react/jsx-runtime'),reactCore=require('@bgscore/react-core'),reactHookForm=require('react-hook-form');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var te__default=/*#__PURE__*/_interopDefault(te);var q=te.createContext(void 0);function b(){let e=te.useContext(q);return e||{}}function $({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let s=te.useRef([]),i=te.useCallback(d=>{let n=s.current.findIndex(f=>f.id===d.id);if(n>-1){let f=[...s.current];f[n]=d,s.current=[...f];}else s.current.push(d);},[s]),m=te.useCallback(d=>{s.current=s.current.filter(n=>n.id!==d);},[]),u=async(d,n)=>{r.setIsSubmit(true);let f=n?await r.formControl.trigger():true,l=r.getData();f&&t&&t({...l,...d},{...r});},a={...r,registerItem:i,unregisterItem:m,items:s.current,triggerSubmit:u,onFieldChange:p};return jsxRuntime.jsx(q.Provider,{value:a,children:e})}var w=new WeakMap;function V(e){return w.has(e)||w.set(e,reactCore.createStore({})),w.get(e)}function A(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let s=t.split("."),i=r;for(let m=0;m<s.length;m++){let u=s[m];m===s.length-1?i[u]=A(p):((!i[u]||typeof i[u]!="object")&&(i[u]={}),i=i[u]);}}else r[t]=A(p);return r}function O(){return reactCore.createTable({name:"draft",primaryKey:"field_1731131919872_aj29d"})}var Q=te.createContext(void 0);function U(){let e=te.useContext(Q);return e||{}}function H({children:e,value:r}){return jsxRuntime.jsx(Q.Provider,{value:r,children:e})}function B(){let{dbName:e="bgs-react-form"}=U();return reactCore.createDatabase({dbName:e,table:{draft:O()}})}function _(e){let r=B(),t=reactCore.useDbLiveFlag(r.draft.detail,{key:e}),p=async(m,u)=>{let d={...await i(),...m};Object.keys(d).forEach(l=>{reactCore.isNotEmpty(d[l])||delete d[l];});let n=Object.keys(d);if(n.length===1&&n[0]==="field_1731131919872_aj29d")return s();n.some(l=>l!=="field_1731131919872_aj29d"&&d[l]!==reactCore.getFieldValue(u,l))?await r.draft.put(e,d):await s();},s=async()=>{await r.draft.remove(e);},i=async()=>await r.draft.detail(e);return {isDraft:t,saveDraft:p,removeDraft:s,getDataDraft:i}}var J=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=A(e.defaultValues);let r=te.useRef(null),[t,p]=te.useState(false),s=e?.draftKey,i=s?_(s):void 0,m=reactHookForm.useForm({reValidateMode:"onSubmit",mode:"all",...e}),u=V(m),a=te.useMemo(()=>reactCore.generateUUID(),[]),d=l=>l?reactCore.getFieldValue(reactCore.mappingUndefinedtoNull(m.getValues()),l):reactCore.mappingUndefinedtoNull(m.getValues()),n=l=>{l?typeof l=="string"?m.resetField(l,{}):typeof l=="object"&&reactCore.isArray(l,0)&&l.forEach(F=>m.resetField(F)):m.reset();},f={...m,ref:r,reset:n,updateData:l=>{let F=d();m.reset(A({...F,...l}));},getData:d,formControl:m,useFieldArray:l=>reactHookForm.useFieldArray({control:m.control,name:l}),useWatch:l=>reactHookForm.useWatch({control:m.control,name:l}),isSubmit:t,formId:a,setIsSubmit:p,useSelected:l=>u.useStore(F=>reactCore.getFieldValue(F,l)),setSelected:u.setState,isDraft:!!i?.isDraft,removeDraft:()=>{i?.removeDraft?.();},resetDraft:()=>{i?.removeDraft?.(),n();},saveDraft:(...l)=>i?.saveDraft?.(...l),getDataDraft:()=>i?.getDataDraft?.(),draftKey:s};return [f,f]};var je=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:s,controller:i,children:m,...u})=>{s&&(s=A(s));let a=u.draftKey,d=i??J({draftKey:a}),[n]=Array.isArray(d)?d:[d],f=te.useRef(true),l=te.useRef(void 0),{autoSaveDelay:F=.5}=U(),x=async o=>{o.preventDefault(),o.stopPropagation(),n.setIsSubmit(true);let g=await n.formControl.trigger(),y=n.getData();g?e&&e({...y},{...n}):t&&t(n.formControl.formState.errors);},R=async()=>{if(!a)return;let o=await n.getDataDraft();o&&Object.entries(o).forEach(([g,y])=>{g==="field_1731131919872_aj29d"||!reactCore.isNotEmpty(y)||(n.setValue(g,y),n.trigger(g));});},v=()=>{if(s){let o={...s};reactCore.diffJson(l.current||{},o)&&(n.formControl.reset(o),l.current=o,setTimeout(R,0));}};te.useEffect(()=>{v();},[s,n.formControl.reset]),te.useEffect(()=>{if(!r)return;let o=n.formControl.watch((g,y)=>r(g,y,n));return ()=>o.unsubscribe()},[]),te.useEffect(()=>{f.current&&n?.isDraft&&(f.current=false,R());},[n.isDraft]);let c=te.useMemo(()=>reactCore.debounce((o,g,y)=>{y?.saveDraft?.({[o]:g},s);},F),[s,F]),C=async(o,g,y)=>{p?.(o,g,y),c(o,g,y);},h={...u};return delete h?.draftKey,jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx($,{controller:{...n,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:C,children:jsxRuntime.jsx("form",{...h,id:n.formId,ref:n.ref,onSubmit:x,children:m})})})},Y=je;var ee=te.createContext(void 0);function G(){let e=te.useContext(ee);return e||{}}function K({children:e,...r}){return jsxRuntime.jsx(ee.Provider,{value:r,children:e})}var re=e=>{let r=b(),t=reactHookForm.useFieldArray({control:r.control,name:e}),s={formArrayId:te.useMemo(()=>reactCore.generateUUID(),[]),...t,...r};return [s,s]};var ne=({name:e,defaultData:r,controller:t,children:p})=>{let s=t??re(e),[i]=Array.isArray(s)?s:[s];return te.useEffect(()=>{typeof r=="boolean"&&r?i.append({}):typeof r=="number"&&r>0?i.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&i.append(r);},[]),jsxRuntime.jsx(jsxRuntime.Fragment,{children:i.fields.map((m,u)=>{let a=`${e}.${u}.`,d={...i,index:u,fieldId:m.id,name:a,countFields:i.fields.length,removeItem:()=>i.remove(u),watchItem:n=>i.watch(n?`${a}${n}`:a.slice(0,-1)),setValueItem:(n,f)=>i.setValue(`${a}${n}`,f),useSelectedItem:n=>i.useSelected(`${a}${n}`)};return jsxRuntime.jsx(te__default.default.Fragment,{children:jsxRuntime.jsx(K,{...d,children:reactCore.renderChildren(p,d)})},m.id)})})};ne.displayName="BgsFormArray";var Xe=ne;te__default.default.memo(({children:e,props:r})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:reactCore.renderChildren(e,r)}));var ae=te.createContext(void 0);function N(){let e=te.useContext(ae);return e||{}}function k({children:e,...r}){return jsxRuntime.jsx(ae.Provider,{value:r,children:e})}var me=({children:e,...r})=>{let t=b(),p=te.useMemo(()=>reactCore.generateUUID(),[]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(k,{...t,...r,formGroupId:p,children:e})})};me.displayName="BgsFormGroup";var nr=me;var ar=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function M({validationRules:e,label:r}){let{formControl:t,getData:p}=b(),s=[];return e&&(typeof e=="string"?de(e,true,r,t,p,{}).forEach(i=>s.push(i)):typeof e=="object"&&Object.keys(e).forEach(i=>{let{validate:m}=s.find(a=>a.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(i)){let a=e[i],d="";["match","diff"].includes(i)&&typeof a=="object"&&(a=e[i].dataField,d=e[i].label),a!=null&&de(i,a,r,t,p,m,d).forEach(n=>s.push(n));}else if(typeof e[i]=="object"){let a=e[i];s.push({validate:{...m,[i]:d=>a.validation(d)||a.message&&(typeof a.message=="string"?a.message:a.message(r))}});}})),Object.assign({},...s)}var de=(e,r,t,p,s,i,m)=>{let u=[],{validationMessage:a}=U(),{required:d,minLength:n,maxLength:f,min:l,max:F,email:x,match:R,diff:v,pattern:c}=a||{},h={required:o=>{if(!r)return true;let g=d?d(t):`${t} is required`;return typeof o=="string"&&!o.trim()||o==null?g:true},minLength:{value:r,message:n?n(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:f?f(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:l?l(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:F?F(t,r):`${t} should be at most ${r}`},regexp:(o="")=>o?new RegExp(r.regexp).test(o)||`${t} ${r.message}`:true,email:(o="")=>!r||!o?true:ar.test(o)||(x?x(t):`${t} must be type email`),match:(o="")=>o?o===(s&&s(r))||(R?R(t,m||reactCore.labelFormatter.changeAll(r)):`${t} must be same with ${m||reactCore.labelFormatter.changeAll(r)}`):true,diff:(o="")=>o?o!==(s&&s(r))||(v?v(t,m||reactCore.labelFormatter.changeAll(r)):`${t} must be different with ${m||reactCore.labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(o="")=>!!o&&new RegExp("^[A-Za-z ]*$").test(o)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(o="")=>!!o&&new RegExp("^[A-Za-z0-9 ]*$").test(o)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(o="")=>!!o&&new RegExp("^[0-9]*$").test(o)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(o="")=>!!o&&new RegExp("^[a-z0-9 ]*$").test(o)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(o="")=>!!o&&/^(ftp|http|https):\/\/[^ "]+$/.test(o)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(o="")=>!!o&&new RegExp("^[A-Z0-9 ]*$").test(o)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(o="")=>!!o&&/[a-z]/.test(o)&&/[A-Z]/.test(o)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(o="")=>!!o&&/[^a-zA-Z0-9\s]/.test(o)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(h){let{validate:o}=u.find(g=>g.validate)||{};typeof h=="function"?u.push({validate:{...o,...i,[e]:h}}):e==="pattern"?u.push({validate:{...o,...i,[`${e}${r}`]:h[r]}}):u.push({[e]:h});}return u};var Kt=e=>{let r=te.useMemo(()=>reactCore.generateUUID(),[]),t=b(),{registerItem:p,unregisterItem:s,control:i,disabled:m,readOnly:u,formId:a,setSelected:d,useSelected:n,onFieldChange:f}=t,{name:l,formId:F,...x}=N(),{name:R,formId:v}=G(),c=te.useMemo(()=>{let T=e.dataField;return e.disabledHierarchy||(R&&a===v&&(T=`${R}${T}`),l&&a===F&&(T=`${l}${T}`)),T},[R,a,v,e.dataField,l,F,e.disabledHierarchy]),C=te.useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return reactCore.labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);te.useEffect(()=>(p({id:r,...e,dataField:c,label:C}),()=>{s(r);}),[r,e,c,C]);let h=false;typeof e.disabled=="boolean"?h=e.disabled:typeof x.disabled=="boolean"?h=x.disabled:h=!!m;let o=false;typeof e.readOnly=="boolean"?o=e.readOnly:typeof x.readOnly=="boolean"?o=x.readOnly:o=!!u;let g=false;typeof e.hidden=="boolean"&&(g=e.hidden);let y=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?y={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?y={email:true,required:e.required}:typeof e.validationRules=="object"&&(y={...e.validationRules,required:e.required}));let le=h||o||g?{required:false}:M({...e,validationRules:y,label:C}),P=reactHookForm.useController({name:c,control:i,disabled:h,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),ue=P.fieldState.invalid,fe=P.fieldState.error?.message,ce=reactHookForm.useWatch({name:c,control:i,defaultValue:e.defaultValue}),pe=te.useMemo(()=>reactCore.debounce(T=>d(Fe=>({...Fe,[c]:T||null}))),[d,c]),ge=n(c),ye=y?.required;return {...e,setSelectedField:pe,label:C,dataField:c,controller:P,invalid:ue,messageError:fe,selectedField:ge,value:ce,required:ye,onChange:T=>{P.field.onChange(T),f?.(c,T,t);}}};var Mt=()=>{let{formControl:e,items:r}=b(),t=(s,i,m,u=0)=>{let a=[];if(Array.isArray(m))m.forEach((d,n)=>{let f=Object.entries(d||{}).map(([l,F])=>t(`${s}.${n}.${l}`,`${i}[]${l}`,F,m.length>1?n+1:0)).flat();a=[...a,...f];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([d,n])=>{let f=t(`${s}.${d}`,`${s}.${d}`,n);a=[...a,...f];});else {let d=m?.message||"",n=r.find(f=>f.dataField===i)?.label;a.push({label:`${n||""}${u>0?` ${u}`:""}`,message:d,dataField:s});}return a};return Object.entries(e.formState.errors||{}).map(([s,i])=>t(s,s,i)).flat()};function Vt(e){let{watch:r}=b(),t=te.useMemo(()=>{let m=new Set,u=a=>{if(a)for(let[d,n]of Object.entries(a)){if(d==="and"||d==="or"){n?.forEach(u);continue}n&&typeof n=="object"&&"fromField"in n&&typeof n.fromField=="string"&&m.add(n.fromField);}};return u(e),Array.from(m)},[e]),p=t.length?r(t):[],s=te.useMemo(()=>{let m={};return t.forEach((u,a)=>{m[u]=p?.[a];}),m},[t,p]),i=te.useCallback(m=>{if(!m)return m;let u={};for(let[a,d]of Object.entries(m)){if(a==="and"||a==="or"){u[a]=d?.map(n=>i(n))??d;continue}if(d&&typeof d=="object"&&"fromField"in d){let n=d,f={...n},l=n.fromField;l&&l in s?f.value=s[l]:f.value=n.value,delete f.fromField,u[a]=f;}else u[a]=d;}return u},[s]);return te.useMemo(()=>i(e)??{},[e,i])}var pr=(a=>(a.alphabet="alphabet",a.alphaNumber="alphanumber",a.number="number",a.lowercase="lowercase",a.url="url",a.uppercase="uppercase",a.mixedCase="mixedcase",a.specialCharacters="specialcharacters",a))(pr||{});var zt=Y;exports.BgsFormArray=Xe;exports.BgsFormGroup=nr;exports.BgsReactFormProvider=H;exports.PatternTypeEnum=pr;exports.default=zt;exports.useBgsController=Kt;exports.useBgsForm=b;exports.useBgsFormArray=G;exports.useBgsFormArrayInit=re;exports.useBgsFormGroup=N;exports.useBgsFormInit=J;exports.useResolvedQuery=Vt;exports.useSummaryValidation=Mt;
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import te,{createContext,useContext,useRef,useState,useMemo,useEffect,useCallback}from'react';import {jsx,Fragment}from'react/jsx-runtime';import {renderChildren,generateUUID,getFieldValue,mappingUndefinedtoNull,diffJson,isNotEmpty,debounce,labelFormatter,isArray,useDbLiveFlag,createStore,createDatabase,createTable}from'@bgscore/react-core';import {useForm,useWatch,useFieldArray,useController}from'react-hook-form';var q=createContext(void 0);function h(){let e=useContext(q);return e||{}}function $({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let n=useRef([]),i=useCallback(d=>{let o=n.current.findIndex(f=>f.id===d.id);if(o>-1){let f=[...n.current];f[o]=d,n.current=[...f];}else n.current.push(d);},[n]),m=useCallback(d=>{n.current=n.current.filter(o=>o.id!==d);},[]),u=async(d,o)=>{r.setIsSubmit(true);let f=o?await r.formControl.trigger():true,l=r.getData();f&&t&&t({...l,...d},{...r});},a={...r,registerItem:i,unregisterItem:m,items:n.current,triggerSubmit:u,onFieldChange:p};return jsx(q.Provider,{value:a,children:e})}var w=new WeakMap;function V(e){return w.has(e)||w.set(e,createStore({})),w.get(e)}function C(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let n=t.split("."),i=r;for(let m=0;m<n.length;m++){let u=n[m];m===n.length-1?i[u]=C(p):((!i[u]||typeof i[u]!="object")&&(i[u]={}),i=i[u]);}}else r[t]=C(p);return r}function O(){return createTable({name:"draft",primaryKey:"field_1731131919872_aj29d"})}var Q=createContext(void 0);function A(){let e=useContext(Q);return e||{}}function H({children:e,value:r}){return jsx(Q.Provider,{value:r,children:e})}function B(){let{dbName:e="bgs-react-form"}=A();return createDatabase({dbName:e,table:{draft:O()}})}function _(e){let r=B(),t=useDbLiveFlag(r.draft.detail,{key:e}),p=async(m,u)=>{let d={...await i(),...m};Object.keys(d).forEach(l=>{isNotEmpty(d[l])||delete d[l];});let o=Object.keys(d);if(o.length===1&&o[0]==="field_1731131919872_aj29d")return n();o.some(l=>l!=="field_1731131919872_aj29d"&&d[l]!==getFieldValue(u,l))?await r.draft.put(e,d):await n();},n=async()=>{await r.draft.remove(e);},i=async()=>await r.draft.detail(e);return {isDraft:t,saveDraft:p,removeDraft:n,getDataDraft:i}}var J=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=C(e.defaultValues);let r=useRef(null),[t,p]=useState(false),n=e?.draftKey,i=n?_(n):void 0,m=useForm({reValidateMode:"onSubmit",mode:"all",...e}),u=V(m),a=useMemo(()=>generateUUID(),[]),d=l=>l?getFieldValue(mappingUndefinedtoNull(m.getValues()),l):mappingUndefinedtoNull(m.getValues()),o=l=>{l?typeof l=="string"?m.resetField(l,{}):typeof l=="object"&&isArray(l,0)&&l.forEach(F=>m.resetField(F)):m.reset();},f={...m,ref:r,reset:o,updateData:l=>{let F=d();m.reset(C({...F,...l}));},getData:d,formControl:m,useFieldArray:l=>useFieldArray({control:m.control,name:l}),useWatch:l=>useWatch({control:m.control,name:l}),isSubmit:t,formId:a,setIsSubmit:p,useSelected:l=>u.useStore(F=>getFieldValue(F,l)),setSelected:u.setState,isDraft:!!i?.isDraft,removeDraft:()=>{i?.removeDraft?.();},resetDraft:()=>{i?.removeDraft?.(),o();},saveDraft:(...l)=>i?.saveDraft?.(...l),getDataDraft:()=>i?.getDataDraft?.(),draftKey:n};return [f,f]};var je=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:n,controller:i,children:m,...u})=>{n&&(n=C(n));let a=u.draftKey,d=i??J({draftKey:a}),[o]=Array.isArray(d)?d:[d],f=useRef(true),l=useRef(void 0),{autoSaveDelay:F=.5}=A(),T=async g=>{g.preventDefault(),g.stopPropagation(),o.setIsSubmit(true);let s=await o.formControl.trigger(),y=o.getData();s?e&&e({...y},{...o}):t&&t(o.formControl.formState.errors);};useEffect(()=>{n&&diffJson(l.current||{},n)&&(o.formControl.reset(n),l.current=n,x());},[n,o.formControl.reset]),useEffect(()=>{if(!r)return;let g=o.formControl.watch((s,y)=>r(s,y,o));return ()=>g.unsubscribe()},[]);let x=async()=>{if(o?.isDraft){f.current=false;let g=await o.getDataDraft();g&&Object.entries(g).forEach(([s,y])=>{s==="field_1731131919872_aj29d"||!isNotEmpty(y)||(o.setValue(s,y),o.trigger(s));});}};useEffect(()=>{f.current&&x();},[o.isDraft,f.current]);let v=useMemo(()=>debounce((g,s,y)=>{y?.saveDraft?.({[g]:s},n);},F),[n,F]),c=async(g,s,y)=>{p?.(g,s,y),v(g,s,y);},R={...u};return delete R?.draftKey,jsx(Fragment,{children:jsx($,{controller:{...o,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:c,children:jsx("form",{...R,id:o.formId,ref:o.ref,onSubmit:T,children:m})})})},Y=je;var ee=createContext(void 0);function G(){let e=useContext(ee);return e||{}}function K({children:e,...r}){return jsx(ee.Provider,{value:r,children:e})}var re=e=>{let r=h(),t=useFieldArray({control:r.control,name:e}),n={formArrayId:useMemo(()=>generateUUID(),[]),...t,...r};return [n,n]};var ne=({name:e,defaultData:r,controller:t,children:p})=>{let n=t??re(e),[i]=Array.isArray(n)?n:[n];return useEffect(()=>{typeof r=="boolean"&&r?i.append({}):typeof r=="number"&&r>0?i.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&i.append(r);},[]),jsx(Fragment,{children:i.fields.map((m,u)=>{let a=`${e}.${u}.`,d={...i,index:u,fieldId:m.id,name:a,countFields:i.fields.length,removeItem:()=>i.remove(u),watchItem:o=>i.watch(o?`${a}${o}`:a.slice(0,-1)),setValueItem:(o,f)=>i.setValue(`${a}${o}`,f),useSelectedItem:o=>i.useSelected(`${a}${o}`)};return jsx(te.Fragment,{children:jsx(K,{...d,children:renderChildren(p,d)})},m.id)})})};ne.displayName="BgsFormArray";var Xe=ne;te.memo(({children:e,props:r})=>jsx(Fragment,{children:renderChildren(e,r)}));var ae=createContext(void 0);function N(){let e=useContext(ae);return e||{}}function k({children:e,...r}){return jsx(ae.Provider,{value:r,children:e})}var me=({children:e,...r})=>{let t=h(),p=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(k,{...t,...r,formGroupId:p,children:e})})};me.displayName="BgsFormGroup";var nr=me;var ar=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function M({validationRules:e,label:r}){let{formControl:t,getData:p}=h(),n=[];return e&&(typeof e=="string"?de(e,true,r,t,p,{}).forEach(i=>n.push(i)):typeof e=="object"&&Object.keys(e).forEach(i=>{let{validate:m}=n.find(a=>a.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(i)){let a=e[i],d="";["match","diff"].includes(i)&&typeof a=="object"&&(a=e[i].dataField,d=e[i].label),a!=null&&de(i,a,r,t,p,m,d).forEach(o=>n.push(o));}else if(typeof e[i]=="object"){let a=e[i];n.push({validate:{...m,[i]:d=>a.validation(d)||a.message&&(typeof a.message=="string"?a.message:a.message(r))}});}})),Object.assign({},...n)}var de=(e,r,t,p,n,i,m)=>{let u=[],{validationMessage:a}=A(),{required:d,minLength:o,maxLength:f,min:l,max:F,email:T,match:x,diff:v,pattern:c}=a||{},g={required:s=>{if(!r)return true;let y=d?d(t):`${t} is required`;return typeof s=="string"&&!s.trim()||s==null?y:true},minLength:{value:r,message:o?o(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:f?f(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:l?l(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:F?F(t,r):`${t} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${t} ${r.message}`:true,email:(s="")=>!r||!s?true:ar.test(s)||(T?T(t):`${t} must be type email`),match:(s="")=>s?s===(n&&n(r))||(x?x(t,m||labelFormatter.changeAll(r)):`${t} must be same with ${m||labelFormatter.changeAll(r)}`):true,diff:(s="")=>s?s!==(n&&n(r))||(v?v(t,m||labelFormatter.changeAll(r)):`${t} must be different with ${m||labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(g){let{validate:s}=u.find(y=>y.validate)||{};typeof g=="function"?u.push({validate:{...s,...i,[e]:g}}):e==="pattern"?u.push({validate:{...s,...i,[`${e}${r}`]:g[r]}}):u.push({[e]:g});}return u};var Kt=e=>{let r=useMemo(()=>generateUUID(),[]),t=h(),{registerItem:p,unregisterItem:n,control:i,disabled:m,readOnly:u,formId:a,setSelected:d,useSelected:o,onFieldChange:f}=t,{name:l,formId:F,...T}=N(),{name:x,formId:v}=G(),c=useMemo(()=>{let b=e.dataField;return e.disabledHierarchy||(x&&a===v&&(b=`${x}${b}`),l&&a===F&&(b=`${l}${b}`)),b},[x,a,v,e.dataField,l,F,e.disabledHierarchy]),R=useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);useEffect(()=>(p({id:r,...e,dataField:c,label:R}),()=>{n(r);}),[r,e,c,R]);let g=false;typeof e.disabled=="boolean"?g=e.disabled:typeof T.disabled=="boolean"?g=T.disabled:g=!!m;let s=false;typeof e.readOnly=="boolean"?s=e.readOnly:typeof T.readOnly=="boolean"?s=T.readOnly:s=!!u;let y=false;typeof e.hidden=="boolean"&&(y=e.hidden);let U=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?U={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?U={email:true,required:e.required}:typeof e.validationRules=="object"&&(U={...e.validationRules,required:e.required}));let le=g||s||y?{required:false}:M({...e,validationRules:U,label:R}),P=useController({name:c,control:i,disabled:g,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),ue=P.fieldState.invalid,fe=P.fieldState.error?.message,ce=useWatch({name:c,control:i,defaultValue:e.defaultValue}),pe=useMemo(()=>debounce(b=>d(Fe=>({...Fe,[c]:b||null}))),[d,c]),ge=o(c),ye=U?.required;return {...e,setSelectedField:pe,label:R,dataField:c,controller:P,invalid:ue,messageError:fe,selectedField:ge,value:ce,required:ye,onChange:b=>{P.field.onChange(b),f?.(c,b,t);}}};var Mt=()=>{let{formControl:e,items:r}=h(),t=(n,i,m,u=0)=>{let a=[];if(Array.isArray(m))m.forEach((d,o)=>{let f=Object.entries(d||{}).map(([l,F])=>t(`${n}.${o}.${l}`,`${i}[]${l}`,F,m.length>1?o+1:0)).flat();a=[...a,...f];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([d,o])=>{let f=t(`${n}.${d}`,`${n}.${d}`,o);a=[...a,...f];});else {let d=m?.message||"",o=r.find(f=>f.dataField===i)?.label;a.push({label:`${o||""}${u>0?` ${u}`:""}`,message:d,dataField:n});}return a};return Object.entries(e.formState.errors||{}).map(([n,i])=>t(n,n,i)).flat()};function Vt(e){let{watch:r}=h(),t=useMemo(()=>{let m=new Set,u=a=>{if(a)for(let[d,o]of Object.entries(a)){if(d==="and"||d==="or"){o?.forEach(u);continue}o&&typeof o=="object"&&"fromField"in o&&typeof o.fromField=="string"&&m.add(o.fromField);}};return u(e),Array.from(m)},[e]),p=t.length?r(t):[],n=useMemo(()=>{let m={};return t.forEach((u,a)=>{m[u]=p?.[a];}),m},[t,p]),i=useCallback(m=>{if(!m)return m;let u={};for(let[a,d]of Object.entries(m)){if(a==="and"||a==="or"){u[a]=d?.map(o=>i(o))??d;continue}if(d&&typeof d=="object"&&"fromField"in d){let o=d,f={...o},l=o.fromField;l&&l in n?f.value=n[l]:f.value=o.value,delete f.fromField,u[a]=f;}else u[a]=d;}return u},[n]);return useMemo(()=>i(e)??{},[e,i])}var pr=(a=>(a.alphabet="alphabet",a.alphaNumber="alphanumber",a.number="number",a.lowercase="lowercase",a.url="url",a.uppercase="uppercase",a.mixedCase="mixedcase",a.specialCharacters="specialcharacters",a))(pr||{});var zt=Y;export{Xe as BgsFormArray,nr as BgsFormGroup,H as BgsReactFormProvider,pr as PatternTypeEnum,zt as default,Kt as useBgsController,h as useBgsForm,G as useBgsFormArray,re as useBgsFormArrayInit,N as useBgsFormGroup,J as useBgsFormInit,Vt as useResolvedQuery,Mt as useSummaryValidation};
1
+ import te,{createContext,useContext,useRef,useState,useMemo,useEffect,useCallback}from'react';import {jsx,Fragment}from'react/jsx-runtime';import {renderChildren,generateUUID,getFieldValue,mappingUndefinedtoNull,debounce,labelFormatter,isNotEmpty,diffJson,isArray,useDbLiveFlag,createStore,createDatabase,createTable}from'@bgscore/react-core';import {useForm,useWatch,useFieldArray,useController}from'react-hook-form';var q=createContext(void 0);function b(){let e=useContext(q);return e||{}}function $({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let s=useRef([]),i=useCallback(d=>{let n=s.current.findIndex(f=>f.id===d.id);if(n>-1){let f=[...s.current];f[n]=d,s.current=[...f];}else s.current.push(d);},[s]),m=useCallback(d=>{s.current=s.current.filter(n=>n.id!==d);},[]),u=async(d,n)=>{r.setIsSubmit(true);let f=n?await r.formControl.trigger():true,l=r.getData();f&&t&&t({...l,...d},{...r});},a={...r,registerItem:i,unregisterItem:m,items:s.current,triggerSubmit:u,onFieldChange:p};return jsx(q.Provider,{value:a,children:e})}var w=new WeakMap;function V(e){return w.has(e)||w.set(e,createStore({})),w.get(e)}function A(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let s=t.split("."),i=r;for(let m=0;m<s.length;m++){let u=s[m];m===s.length-1?i[u]=A(p):((!i[u]||typeof i[u]!="object")&&(i[u]={}),i=i[u]);}}else r[t]=A(p);return r}function O(){return createTable({name:"draft",primaryKey:"field_1731131919872_aj29d"})}var Q=createContext(void 0);function U(){let e=useContext(Q);return e||{}}function H({children:e,value:r}){return jsx(Q.Provider,{value:r,children:e})}function B(){let{dbName:e="bgs-react-form"}=U();return createDatabase({dbName:e,table:{draft:O()}})}function _(e){let r=B(),t=useDbLiveFlag(r.draft.detail,{key:e}),p=async(m,u)=>{let d={...await i(),...m};Object.keys(d).forEach(l=>{isNotEmpty(d[l])||delete d[l];});let n=Object.keys(d);if(n.length===1&&n[0]==="field_1731131919872_aj29d")return s();n.some(l=>l!=="field_1731131919872_aj29d"&&d[l]!==getFieldValue(u,l))?await r.draft.put(e,d):await s();},s=async()=>{await r.draft.remove(e);},i=async()=>await r.draft.detail(e);return {isDraft:t,saveDraft:p,removeDraft:s,getDataDraft:i}}var J=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=A(e.defaultValues);let r=useRef(null),[t,p]=useState(false),s=e?.draftKey,i=s?_(s):void 0,m=useForm({reValidateMode:"onSubmit",mode:"all",...e}),u=V(m),a=useMemo(()=>generateUUID(),[]),d=l=>l?getFieldValue(mappingUndefinedtoNull(m.getValues()),l):mappingUndefinedtoNull(m.getValues()),n=l=>{l?typeof l=="string"?m.resetField(l,{}):typeof l=="object"&&isArray(l,0)&&l.forEach(F=>m.resetField(F)):m.reset();},f={...m,ref:r,reset:n,updateData:l=>{let F=d();m.reset(A({...F,...l}));},getData:d,formControl:m,useFieldArray:l=>useFieldArray({control:m.control,name:l}),useWatch:l=>useWatch({control:m.control,name:l}),isSubmit:t,formId:a,setIsSubmit:p,useSelected:l=>u.useStore(F=>getFieldValue(F,l)),setSelected:u.setState,isDraft:!!i?.isDraft,removeDraft:()=>{i?.removeDraft?.();},resetDraft:()=>{i?.removeDraft?.(),n();},saveDraft:(...l)=>i?.saveDraft?.(...l),getDataDraft:()=>i?.getDataDraft?.(),draftKey:s};return [f,f]};var je=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:s,controller:i,children:m,...u})=>{s&&(s=A(s));let a=u.draftKey,d=i??J({draftKey:a}),[n]=Array.isArray(d)?d:[d],f=useRef(true),l=useRef(void 0),{autoSaveDelay:F=.5}=U(),x=async o=>{o.preventDefault(),o.stopPropagation(),n.setIsSubmit(true);let g=await n.formControl.trigger(),y=n.getData();g?e&&e({...y},{...n}):t&&t(n.formControl.formState.errors);},R=async()=>{if(!a)return;let o=await n.getDataDraft();o&&Object.entries(o).forEach(([g,y])=>{g==="field_1731131919872_aj29d"||!isNotEmpty(y)||(n.setValue(g,y),n.trigger(g));});},v=()=>{if(s){let o={...s};diffJson(l.current||{},o)&&(n.formControl.reset(o),l.current=o,setTimeout(R,0));}};useEffect(()=>{v();},[s,n.formControl.reset]),useEffect(()=>{if(!r)return;let o=n.formControl.watch((g,y)=>r(g,y,n));return ()=>o.unsubscribe()},[]),useEffect(()=>{f.current&&n?.isDraft&&(f.current=false,R());},[n.isDraft]);let c=useMemo(()=>debounce((o,g,y)=>{y?.saveDraft?.({[o]:g},s);},F),[s,F]),C=async(o,g,y)=>{p?.(o,g,y),c(o,g,y);},h={...u};return delete h?.draftKey,jsx(Fragment,{children:jsx($,{controller:{...n,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:C,children:jsx("form",{...h,id:n.formId,ref:n.ref,onSubmit:x,children:m})})})},Y=je;var ee=createContext(void 0);function G(){let e=useContext(ee);return e||{}}function K({children:e,...r}){return jsx(ee.Provider,{value:r,children:e})}var re=e=>{let r=b(),t=useFieldArray({control:r.control,name:e}),s={formArrayId:useMemo(()=>generateUUID(),[]),...t,...r};return [s,s]};var ne=({name:e,defaultData:r,controller:t,children:p})=>{let s=t??re(e),[i]=Array.isArray(s)?s:[s];return useEffect(()=>{typeof r=="boolean"&&r?i.append({}):typeof r=="number"&&r>0?i.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&i.append(r);},[]),jsx(Fragment,{children:i.fields.map((m,u)=>{let a=`${e}.${u}.`,d={...i,index:u,fieldId:m.id,name:a,countFields:i.fields.length,removeItem:()=>i.remove(u),watchItem:n=>i.watch(n?`${a}${n}`:a.slice(0,-1)),setValueItem:(n,f)=>i.setValue(`${a}${n}`,f),useSelectedItem:n=>i.useSelected(`${a}${n}`)};return jsx(te.Fragment,{children:jsx(K,{...d,children:renderChildren(p,d)})},m.id)})})};ne.displayName="BgsFormArray";var Xe=ne;te.memo(({children:e,props:r})=>jsx(Fragment,{children:renderChildren(e,r)}));var ae=createContext(void 0);function N(){let e=useContext(ae);return e||{}}function k({children:e,...r}){return jsx(ae.Provider,{value:r,children:e})}var me=({children:e,...r})=>{let t=b(),p=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(k,{...t,...r,formGroupId:p,children:e})})};me.displayName="BgsFormGroup";var nr=me;var ar=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function M({validationRules:e,label:r}){let{formControl:t,getData:p}=b(),s=[];return e&&(typeof e=="string"?de(e,true,r,t,p,{}).forEach(i=>s.push(i)):typeof e=="object"&&Object.keys(e).forEach(i=>{let{validate:m}=s.find(a=>a.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(i)){let a=e[i],d="";["match","diff"].includes(i)&&typeof a=="object"&&(a=e[i].dataField,d=e[i].label),a!=null&&de(i,a,r,t,p,m,d).forEach(n=>s.push(n));}else if(typeof e[i]=="object"){let a=e[i];s.push({validate:{...m,[i]:d=>a.validation(d)||a.message&&(typeof a.message=="string"?a.message:a.message(r))}});}})),Object.assign({},...s)}var de=(e,r,t,p,s,i,m)=>{let u=[],{validationMessage:a}=U(),{required:d,minLength:n,maxLength:f,min:l,max:F,email:x,match:R,diff:v,pattern:c}=a||{},h={required:o=>{if(!r)return true;let g=d?d(t):`${t} is required`;return typeof o=="string"&&!o.trim()||o==null?g:true},minLength:{value:r,message:n?n(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:f?f(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:l?l(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:F?F(t,r):`${t} should be at most ${r}`},regexp:(o="")=>o?new RegExp(r.regexp).test(o)||`${t} ${r.message}`:true,email:(o="")=>!r||!o?true:ar.test(o)||(x?x(t):`${t} must be type email`),match:(o="")=>o?o===(s&&s(r))||(R?R(t,m||labelFormatter.changeAll(r)):`${t} must be same with ${m||labelFormatter.changeAll(r)}`):true,diff:(o="")=>o?o!==(s&&s(r))||(v?v(t,m||labelFormatter.changeAll(r)):`${t} must be different with ${m||labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(o="")=>!!o&&new RegExp("^[A-Za-z ]*$").test(o)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(o="")=>!!o&&new RegExp("^[A-Za-z0-9 ]*$").test(o)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(o="")=>!!o&&new RegExp("^[0-9]*$").test(o)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(o="")=>!!o&&new RegExp("^[a-z0-9 ]*$").test(o)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(o="")=>!!o&&/^(ftp|http|https):\/\/[^ "]+$/.test(o)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(o="")=>!!o&&new RegExp("^[A-Z0-9 ]*$").test(o)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(o="")=>!!o&&/[a-z]/.test(o)&&/[A-Z]/.test(o)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(o="")=>!!o&&/[^a-zA-Z0-9\s]/.test(o)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(h){let{validate:o}=u.find(g=>g.validate)||{};typeof h=="function"?u.push({validate:{...o,...i,[e]:h}}):e==="pattern"?u.push({validate:{...o,...i,[`${e}${r}`]:h[r]}}):u.push({[e]:h});}return u};var Kt=e=>{let r=useMemo(()=>generateUUID(),[]),t=b(),{registerItem:p,unregisterItem:s,control:i,disabled:m,readOnly:u,formId:a,setSelected:d,useSelected:n,onFieldChange:f}=t,{name:l,formId:F,...x}=N(),{name:R,formId:v}=G(),c=useMemo(()=>{let T=e.dataField;return e.disabledHierarchy||(R&&a===v&&(T=`${R}${T}`),l&&a===F&&(T=`${l}${T}`)),T},[R,a,v,e.dataField,l,F,e.disabledHierarchy]),C=useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);useEffect(()=>(p({id:r,...e,dataField:c,label:C}),()=>{s(r);}),[r,e,c,C]);let h=false;typeof e.disabled=="boolean"?h=e.disabled:typeof x.disabled=="boolean"?h=x.disabled:h=!!m;let o=false;typeof e.readOnly=="boolean"?o=e.readOnly:typeof x.readOnly=="boolean"?o=x.readOnly:o=!!u;let g=false;typeof e.hidden=="boolean"&&(g=e.hidden);let y=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?y={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?y={email:true,required:e.required}:typeof e.validationRules=="object"&&(y={...e.validationRules,required:e.required}));let le=h||o||g?{required:false}:M({...e,validationRules:y,label:C}),P=useController({name:c,control:i,disabled:h,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),ue=P.fieldState.invalid,fe=P.fieldState.error?.message,ce=useWatch({name:c,control:i,defaultValue:e.defaultValue}),pe=useMemo(()=>debounce(T=>d(Fe=>({...Fe,[c]:T||null}))),[d,c]),ge=n(c),ye=y?.required;return {...e,setSelectedField:pe,label:C,dataField:c,controller:P,invalid:ue,messageError:fe,selectedField:ge,value:ce,required:ye,onChange:T=>{P.field.onChange(T),f?.(c,T,t);}}};var Mt=()=>{let{formControl:e,items:r}=b(),t=(s,i,m,u=0)=>{let a=[];if(Array.isArray(m))m.forEach((d,n)=>{let f=Object.entries(d||{}).map(([l,F])=>t(`${s}.${n}.${l}`,`${i}[]${l}`,F,m.length>1?n+1:0)).flat();a=[...a,...f];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([d,n])=>{let f=t(`${s}.${d}`,`${s}.${d}`,n);a=[...a,...f];});else {let d=m?.message||"",n=r.find(f=>f.dataField===i)?.label;a.push({label:`${n||""}${u>0?` ${u}`:""}`,message:d,dataField:s});}return a};return Object.entries(e.formState.errors||{}).map(([s,i])=>t(s,s,i)).flat()};function Vt(e){let{watch:r}=b(),t=useMemo(()=>{let m=new Set,u=a=>{if(a)for(let[d,n]of Object.entries(a)){if(d==="and"||d==="or"){n?.forEach(u);continue}n&&typeof n=="object"&&"fromField"in n&&typeof n.fromField=="string"&&m.add(n.fromField);}};return u(e),Array.from(m)},[e]),p=t.length?r(t):[],s=useMemo(()=>{let m={};return t.forEach((u,a)=>{m[u]=p?.[a];}),m},[t,p]),i=useCallback(m=>{if(!m)return m;let u={};for(let[a,d]of Object.entries(m)){if(a==="and"||a==="or"){u[a]=d?.map(n=>i(n))??d;continue}if(d&&typeof d=="object"&&"fromField"in d){let n=d,f={...n},l=n.fromField;l&&l in s?f.value=s[l]:f.value=n.value,delete f.fromField,u[a]=f;}else u[a]=d;}return u},[s]);return useMemo(()=>i(e)??{},[e,i])}var pr=(a=>(a.alphabet="alphabet",a.alphaNumber="alphanumber",a.number="number",a.lowercase="lowercase",a.url="url",a.uppercase="uppercase",a.mixedCase="mixedcase",a.specialCharacters="specialcharacters",a))(pr||{});var zt=Y;export{Xe as BgsFormArray,nr as BgsFormGroup,H as BgsReactFormProvider,pr as PatternTypeEnum,zt as default,Kt as useBgsController,b as useBgsForm,G as useBgsFormArray,re as useBgsFormArrayInit,N as useBgsFormGroup,J as useBgsFormInit,Vt as useResolvedQuery,Mt as useSummaryValidation};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bgscore/react-form",
3
- "version": "1.0.22",
3
+ "version": "1.0.23",
4
4
  "description": "React form component library using context and react-hook-form with dynamic arrays, groups, and validations.",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",