@bgscore/react-form 1.0.42 → 1.0.43

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