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