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