@bgscore/react-form 1.0.30 → 1.0.31

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