@bgscore/react-form 1.0.18 → 1.0.19
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.d.cts +16 -1
- package/dist/index.d.ts +16 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var re=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 re__default=/*#__PURE__*/_interopDefault(re);var q=re.createContext(void 0);function h(){let e=re.useContext(q);return e||{}}function $({children:e,controller:r,onSubmit:t,onFieldChange:g=()=>{}}){let n=re.useRef([]),s=re.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=re.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(q.Provider,{value:i,children:e})}var w=new WeakMap;function j(e){return w.has(e)||w.set(e,reactCore.createStore({})),w.get(e)}function P(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]=P(g):((!s[u]||typeof s[u]!="object")&&(s[u]={}),s=s[u]);}}else r[t]=P(g);return r}function B(){return reactCore.createTable({name:"draft",primaryKey:"field_1731131919872_aj29d"})}var V=re.createContext(void 0);function C(){let e=re.useContext(V);return e||{}}function H({children:e,value:r}){return jsxRuntime.jsx(V.Provider,{value:r,children:e})}function O(){let{dbName:e="bgs-react-form"}=C();return reactCore.createDatabase({dbName:e,table:{draft:B()}})}function _(e){let r=O(),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 J=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=P(e.defaultValues);let r=re.useRef(null),[t,g]=re.useState(false),n=e?.draftKey,s=n?_(n):void 0,m=reactHookForm.useForm({reValidateMode:"onSubmit",mode:"all",...e}),u=j(m),i=re.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(P({...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 ke=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:g,formData:n,controller:s,children:m,...u})=>{n&&(n=P(n));let i=u.draftKey,l=s??J({draftKey:i}),[a]=Array.isArray(l)?l:[l],c=re.useRef(true),d=re.useRef(void 0),{autoSaveDelay:F=.5}=C(),T=async p=>{p.preventDefault(),p.stopPropagation(),a.setIsSubmit(true);let o=await a.formControl.trigger(),y=a.getData();o?e&&e({...y},{...a}):t&&t(a.formControl.formState.errors);};re.useEffect(()=>{n&&reactCore.diffJson(d.current||{},n)&&(a.formControl.reset(n),d.current=n);},[n,a.formControl.reset]),re.useEffect(()=>{if(!r)return;let p=a.formControl.watch((o,y)=>r(o,y,a));return ()=>p.unsubscribe()},[]);let x=async()=>{if(a?.isDraft){c.current=false;let p=await a.getDataDraft();p&&Object.entries(p).forEach(([o,y])=>{o==="field_1731131919872_aj29d"||!reactCore.isNotEmpty(y)||(a.setValue(o,y),a.trigger(o));});}};re.useEffect(()=>{c.current&&x();},[a.isDraft,c.current]);let U=re.useMemo(()=>reactCore.debounce((p,o,y)=>{y?.saveDraft?.({[p]:o},n);},F),[n,F]),f=async(p,o,y)=>{g?.(p,o,y),U(p,o,y);},A={...u};return delete A?.draftKey,jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx($,{controller:{...a,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:f,children:jsxRuntime.jsx("form",{...A,id:a.formId,ref:a.ref,onSubmit:T,children:m})})})},Q=ke;var Y=re.createContext(void 0);function E(){let e=re.useContext(Y);return e||{}}function K({children:e,...r}){return jsxRuntime.jsx(Y.Provider,{value:r,children:e})}var ee=e=>{let r=h(),t=reactHookForm.useFieldArray({control:r.control,name:e}),n={formArrayId:re.useMemo(()=>reactCore.generateUUID(),[]),...t,...r};return [n,n]};var oe=({name:e,defaultData:r,controller:t,children:g})=>{let n=t??ee(e),[s]=Array.isArray(n)?n:[n];return re.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(re__default.default.Fragment,{children:jsxRuntime.jsx(K,{...l,children:reactCore.renderChildren(g,l)})},m.id)})})};oe.displayName="BgsFormArray";var Xe=oe;re__default.default.memo(({children:e,props:r})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:reactCore.renderChildren(e,r)}));var se=re.createContext(void 0);function N(){let e=re.useContext(se);return e||{}}function L({children:e,...r}){return jsxRuntime.jsx(se.Provider,{value:r,children:e})}var ie=({children:e,...r})=>{let t=h(),g=re.useMemo(()=>reactCore.generateUUID(),[]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(L,{...t,...r,formGroupId:g,children:e})})};ie.displayName="BgsFormGroup";var or=ie;var sr=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function M({validationRules:e,label:r}){let{formControl: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}=C(),{required:l,minLength:a,maxLength:c,min:d,max:F,email:T,match:x,diff:U,pattern:f}=i||{},p={required:o=>{if(!r)return true;let y=l?l(t):`${t} is required`;return typeof o=="string"&&!o.trim()||o==null?y: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))||(U?U(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(y=>y.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 Gt=e=>{let r=re.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}=N(),{name:x,formId:U}=E(),f=re.useMemo(()=>{let b=e.dataField;return e.disabledHierarchy||(x&&i===U&&(b=`${x}${b}`),d&&i===F&&(b=`${d}${b}`)),b},[x,i,U,e.dataField,d,F,e.disabledHierarchy]),A=re.useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return reactCore.labelFormatter.changeAll(f)},[e.label,e.noLabel,f]);re.useEffect(()=>(g({id:r,...e,dataField:f,label:A}),()=>{n(r);}),[r,e,f,A]);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 y=false;typeof e.hidden=="boolean"&&(y=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||y?{required:false}:M({...e,validationRules:R,label:A}),v=reactHookForm.useController({name:f,control:s,disabled:p,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),de=v.fieldState.invalid,ue=v.fieldState.error?.message,fe=reactHookForm.useWatch({name:f,control:s,defaultValue:e.defaultValue}),ce=re.useMemo(()=>reactCore.debounce(b=>l(ye=>({...ye,[f]:b||null}))),[l,f]),pe=a(f),ge=R?.required;return {...e,setSelectedField:ce,label:A,dataField:f,controller:v,invalid:de,messageError:ue,selectedField:pe,value:fe,required:ge,onChange:b=>{v.field.onChange(b),c?.(f,b,t);}}};var Nt=()=>{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 qt=Q;exports.BgsFormArray=Xe;exports.BgsFormGroup=or;exports.BgsReactFormProvider=H;exports.PatternTypeEnum=fr;exports.default=qt;exports.useBgsController=Gt;exports.useBgsForm=h;exports.useBgsFormArray=E;exports.useBgsFormArrayInit=ee;exports.useBgsFormGroup=N;exports.useBgsFormInit=J;exports.useSummaryValidation=Nt;
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var te=require('react'),jsxRuntime=require('react/jsx-runtime'),reactCore=require('@bgscore/react-core'),reactHookForm=require('react-hook-form');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var te__default=/*#__PURE__*/_interopDefault(te);var q=te.createContext(void 0);function h(){let e=te.useContext(q);return e||{}}function $({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let n=te.useRef([]),i=te.useCallback(d=>{let o=n.current.findIndex(f=>f.id===d.id);if(o>-1){let f=[...n.current];f[o]=d,n.current=[...f];}else n.current.push(d);},[n]),m=te.useCallback(d=>{n.current=n.current.filter(o=>o.id!==d);},[]),u=async(d,o)=>{r.setIsSubmit(true);let f=o?await r.formControl.trigger():true,l=r.getData();f&&t&&t({...l,...d},{...r});},a={...r,registerItem:i,unregisterItem:m,items:n.current,triggerSubmit:u,onFieldChange:p};return jsxRuntime.jsx(q.Provider,{value:a,children:e})}var w=new WeakMap;function V(e){return w.has(e)||w.set(e,reactCore.createStore({})),w.get(e)}function C(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let n=t.split("."),i=r;for(let m=0;m<n.length;m++){let u=n[m];m===n.length-1?i[u]=C(p):((!i[u]||typeof i[u]!="object")&&(i[u]={}),i=i[u]);}}else r[t]=C(p);return r}function O(){return reactCore.createTable({name:"draft",primaryKey:"field_1731131919872_aj29d"})}var Q=te.createContext(void 0);function A(){let e=te.useContext(Q);return e||{}}function H({children:e,value:r}){return jsxRuntime.jsx(Q.Provider,{value:r,children:e})}function B(){let{dbName:e="bgs-react-form"}=A();return reactCore.createDatabase({dbName:e,table:{draft:O()}})}function _(e){let r=B(),t=reactCore.useDbLiveFlag(r.draft.detail,{key:e}),p=async(m,u)=>{let d={...await i(),...m};Object.keys(d).forEach(l=>{reactCore.isNotEmpty(d[l])||delete d[l];});let o=Object.keys(d);if(o.length===1&&o[0]==="field_1731131919872_aj29d")return n();o.some(l=>l!=="field_1731131919872_aj29d"&&d[l]!==reactCore.getFieldValue(u,l))?await r.draft.put(e,d):await n();},n=async()=>{await r.draft.remove(e);},i=async()=>await r.draft.detail(e);return {isDraft:t,saveDraft:p,removeDraft:n,getDataDraft:i}}var J=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=C(e.defaultValues);let r=te.useRef(null),[t,p]=te.useState(false),n=e?.draftKey,i=n?_(n):void 0,m=reactHookForm.useForm({reValidateMode:"onSubmit",mode:"all",...e}),u=V(m),a=te.useMemo(()=>reactCore.generateUUID(),[]),d=l=>l?reactCore.getFieldValue(reactCore.mappingUndefinedtoNull(m.getValues()),l):reactCore.mappingUndefinedtoNull(m.getValues()),o=l=>{l?typeof l=="string"?m.resetField(l,{}):typeof l=="object"&&reactCore.isArray(l,0)&&l.forEach(F=>m.resetField(F)):m.reset();},f={...m,ref:r,reset:o,updateData:l=>{let F=d();m.reset(C({...F,...l}));},getData:d,formControl:m,useFieldArray:l=>reactHookForm.useFieldArray({control:m.control,name:l}),useWatch:l=>reactHookForm.useWatch({control:m.control,name:l}),isSubmit:t,formId:a,setIsSubmit:p,useSelected:l=>u.useStore(F=>reactCore.getFieldValue(F,l)),setSelected:u.setState,isDraft:!!i?.isDraft,removeDraft:()=>{i?.removeDraft?.();},resetDraft:()=>{i?.removeDraft?.(),o();},saveDraft:(...l)=>i?.saveDraft?.(...l),getDataDraft:()=>i?.getDataDraft?.(),draftKey:n};return [f,f]};var je=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:n,controller:i,children:m,...u})=>{n&&(n=C(n));let a=u.draftKey,d=i??J({draftKey:a}),[o]=Array.isArray(d)?d:[d],f=te.useRef(true),l=te.useRef(void 0),{autoSaveDelay:F=.5}=A(),T=async g=>{g.preventDefault(),g.stopPropagation(),o.setIsSubmit(true);let s=await o.formControl.trigger(),y=o.getData();s?e&&e({...y},{...o}):t&&t(o.formControl.formState.errors);};te.useEffect(()=>{n&&reactCore.diffJson(l.current||{},n)&&(o.formControl.reset(n),l.current=n);},[n,o.formControl.reset]),te.useEffect(()=>{if(!r)return;let g=o.formControl.watch((s,y)=>r(s,y,o));return ()=>g.unsubscribe()},[]);let x=async()=>{if(o?.isDraft){f.current=false;let g=await o.getDataDraft();g&&Object.entries(g).forEach(([s,y])=>{s==="field_1731131919872_aj29d"||!reactCore.isNotEmpty(y)||(o.setValue(s,y),o.trigger(s));});}};te.useEffect(()=>{f.current&&x();},[o.isDraft,f.current]);let v=te.useMemo(()=>reactCore.debounce((g,s,y)=>{y?.saveDraft?.({[g]:s},n);},F),[n,F]),c=async(g,s,y)=>{p?.(g,s,y),v(g,s,y);},R={...u};return delete R?.draftKey,jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx($,{controller:{...o,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:c,children:jsxRuntime.jsx("form",{...R,id:o.formId,ref:o.ref,onSubmit:T,children:m})})})},Y=je;var ee=te.createContext(void 0);function G(){let e=te.useContext(ee);return e||{}}function K({children:e,...r}){return jsxRuntime.jsx(ee.Provider,{value:r,children:e})}var re=e=>{let r=h(),t=reactHookForm.useFieldArray({control:r.control,name:e}),n={formArrayId:te.useMemo(()=>reactCore.generateUUID(),[]),...t,...r};return [n,n]};var ne=({name:e,defaultData:r,controller:t,children:p})=>{let n=t??re(e),[i]=Array.isArray(n)?n:[n];return te.useEffect(()=>{typeof r=="boolean"&&r?i.append({}):typeof r=="number"&&r>0?i.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&i.append(r);},[]),jsxRuntime.jsx(jsxRuntime.Fragment,{children:i.fields.map((m,u)=>{let a=`${e}.${u}.`,d={...i,index:u,fieldId:m.id,name:a,countFields:i.fields.length,removeItem:()=>i.remove(u),watchItem:o=>i.watch(o?`${a}${o}`:a.slice(0,-1)),setValueItem:(o,f)=>i.setValue(`${a}${o}`,f),useSelectedItem:o=>i.useSelected(`${a}${o}`)};return jsxRuntime.jsx(te__default.default.Fragment,{children:jsxRuntime.jsx(K,{...d,children:reactCore.renderChildren(p,d)})},m.id)})})};ne.displayName="BgsFormArray";var Xe=ne;te__default.default.memo(({children:e,props:r})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:reactCore.renderChildren(e,r)}));var ae=te.createContext(void 0);function N(){let e=te.useContext(ae);return e||{}}function k({children:e,...r}){return jsxRuntime.jsx(ae.Provider,{value:r,children:e})}var me=({children:e,...r})=>{let t=h(),p=te.useMemo(()=>reactCore.generateUUID(),[]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(k,{...t,...r,formGroupId:p,children:e})})};me.displayName="BgsFormGroup";var nr=me;var ar=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function M({validationRules:e,label:r}){let{formControl:t,getData:p}=h(),n=[];return e&&(typeof e=="string"?de(e,true,r,t,p,{}).forEach(i=>n.push(i)):typeof e=="object"&&Object.keys(e).forEach(i=>{let{validate:m}=n.find(a=>a.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(i)){let a=e[i],d="";["match","diff"].includes(i)&&typeof a=="object"&&(a=e[i].dataField,d=e[i].label),a!=null&&de(i,a,r,t,p,m,d).forEach(o=>n.push(o));}else if(typeof e[i]=="object"){let a=e[i];n.push({validate:{...m,[i]:d=>a.validation(d)||a.message&&(typeof a.message=="string"?a.message:a.message(r))}});}})),Object.assign({},...n)}var de=(e,r,t,p,n,i,m)=>{let u=[],{validationMessage:a}=A(),{required:d,minLength:o,maxLength:f,min:l,max:F,email:T,match:x,diff:v,pattern:c}=a||{},g={required:s=>{if(!r)return true;let y=d?d(t):`${t} is required`;return typeof s=="string"&&!s.trim()||s==null?y:true},minLength:{value:r,message:o?o(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:f?f(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:l?l(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:F?F(t,r):`${t} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${t} ${r.message}`:true,email:(s="")=>!r||!s?true:ar.test(s)||(T?T(t):`${t} must be type email`),match:(s="")=>s?s===(n&&n(r))||(x?x(t,m||reactCore.labelFormatter.changeAll(r)):`${t} must be same with ${m||reactCore.labelFormatter.changeAll(r)}`):true,diff:(s="")=>s?s!==(n&&n(r))||(v?v(t,m||reactCore.labelFormatter.changeAll(r)):`${t} must be different with ${m||reactCore.labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(g){let{validate:s}=u.find(y=>y.validate)||{};typeof g=="function"?u.push({validate:{...s,...i,[e]:g}}):e==="pattern"?u.push({validate:{...s,...i,[`${e}${r}`]:g[r]}}):u.push({[e]:g});}return u};var Kt=e=>{let r=te.useMemo(()=>reactCore.generateUUID(),[]),t=h(),{registerItem:p,unregisterItem:n,control:i,disabled:m,readOnly:u,formId:a,setSelected:d,useSelected:o,onFieldChange:f}=t,{name:l,formId:F,...T}=N(),{name:x,formId:v}=G(),c=te.useMemo(()=>{let b=e.dataField;return e.disabledHierarchy||(x&&a===v&&(b=`${x}${b}`),l&&a===F&&(b=`${l}${b}`)),b},[x,a,v,e.dataField,l,F,e.disabledHierarchy]),R=te.useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return reactCore.labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);te.useEffect(()=>(p({id:r,...e,dataField:c,label:R}),()=>{n(r);}),[r,e,c,R]);let g=false;typeof e.disabled=="boolean"?g=e.disabled:typeof T.disabled=="boolean"?g=T.disabled:g=!!m;let s=false;typeof e.readOnly=="boolean"?s=e.readOnly:typeof T.readOnly=="boolean"?s=T.readOnly:s=!!u;let y=false;typeof e.hidden=="boolean"&&(y=e.hidden);let U=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?U={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?U={email:true,required:e.required}:typeof e.validationRules=="object"&&(U={...e.validationRules,required:e.required}));let le=g||s||y?{required:false}:M({...e,validationRules:U,label:R}),P=reactHookForm.useController({name:c,control:i,disabled:g,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),ue=P.fieldState.invalid,fe=P.fieldState.error?.message,ce=reactHookForm.useWatch({name:c,control:i,defaultValue:e.defaultValue}),pe=te.useMemo(()=>reactCore.debounce(b=>d(Fe=>({...Fe,[c]:b||null}))),[d,c]),ge=o(c),ye=U?.required;return {...e,setSelectedField:pe,label:R,dataField:c,controller:P,invalid:ue,messageError:fe,selectedField:ge,value:ce,required:ye,onChange:b=>{P.field.onChange(b),f?.(c,b,t);}}};var Mt=()=>{let{formControl:e,items:r}=h(),t=(n,i,m,u=0)=>{let a=[];if(Array.isArray(m))m.forEach((d,o)=>{let f=Object.entries(d||{}).map(([l,F])=>t(`${n}.${o}.${l}`,`${i}[]${l}`,F,m.length>1?o+1:0)).flat();a=[...a,...f];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([d,o])=>{let f=t(`${n}.${d}`,`${n}.${d}`,o);a=[...a,...f];});else {let d=m?.message||"",o=r.find(f=>f.dataField===i)?.label;a.push({label:`${o||""}${u>0?` ${u}`:""}`,message:d,dataField:n});}return a};return Object.entries(e.formState.errors||{}).map(([n,i])=>t(n,n,i)).flat()};function Vt(e){let{watch:r}=h(),t=te.useMemo(()=>{let m=new Set,u=a=>{if(a)for(let[d,o]of Object.entries(a)){if(d==="and"||d==="or"){o?.forEach(u);continue}o&&typeof o=="object"&&"fromField"in o&&typeof o.fromField=="string"&&m.add(o.fromField);}};return u(e),Array.from(m)},[e]),p=t.length?r(t):[],n=te.useMemo(()=>{let m={};return t.forEach((u,a)=>{m[u]=p?.[a];}),m},[t,p]),i=te.useCallback(m=>{if(!m)return m;let u={};for(let[a,d]of Object.entries(m)){if(a==="and"||a==="or"){u[a]=d?.map(o=>i(o))??d;continue}if(d&&typeof d=="object"&&"fromField"in d){let o=d,f={...o},l=o.fromField;l&&l in n?f.value=n[l]:f.value=o.value,delete f.fromField,u[a]=f;}else u[a]=d;}return u},[n]);return te.useMemo(()=>i(e)??{},[e,i])}var pr=(a=>(a.alphabet="alphabet",a.alphaNumber="alphanumber",a.number="number",a.lowercase="lowercase",a.url="url",a.uppercase="uppercase",a.mixedCase="mixedcase",a.specialCharacters="specialcharacters",a))(pr||{});var zt=Y;exports.BgsFormArray=Xe;exports.BgsFormGroup=nr;exports.BgsReactFormProvider=H;exports.PatternTypeEnum=pr;exports.default=zt;exports.useBgsController=Kt;exports.useBgsForm=h;exports.useBgsFormArray=G;exports.useBgsFormArrayInit=re;exports.useBgsFormGroup=N;exports.useBgsFormInit=J;exports.useResolvedQuery=Vt;exports.useSummaryValidation=Mt;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
3
|
import { ControllerRenderProps, FieldValues, ControllerFieldState, UseFormStateReturn, UseFormReturn, UseFieldArrayReturn, EventType, FieldErrors, UseFieldArraySwap, UseFieldArrayMove, UseFieldArrayPrepend, UseFieldArrayAppend, UseFieldArrayRemove, UseFieldArrayInsert, UseFieldArrayUpdate, UseFieldArrayReplace, FieldArrayWithId, DeepPartialSkipArrayKey, UseFormProps } from 'react-hook-form';
|
|
4
|
+
import { NestedKeyOf as NestedKeyOf$1, QueryOperator, PathValue } from '@bgscore/react-core';
|
|
4
5
|
|
|
5
6
|
type ControllerWithKey = ControllerProps & {
|
|
6
7
|
id: string;
|
|
@@ -240,4 +241,18 @@ interface SummaryValidation {
|
|
|
240
241
|
}
|
|
241
242
|
declare const useSummaryValidation: () => SummaryValidation[];
|
|
242
243
|
|
|
243
|
-
|
|
244
|
+
interface ResolvedQueryFilterOption<T, P extends NestedKeyOf$1<T>> {
|
|
245
|
+
opt?: QueryOperator;
|
|
246
|
+
value?: PathValue<T, P> | undefined | null;
|
|
247
|
+
required?: boolean;
|
|
248
|
+
fromField?: string | string[];
|
|
249
|
+
}
|
|
250
|
+
type ResolvedQueryCondition<T> = {
|
|
251
|
+
[P in NestedKeyOf$1<T>]?: ResolvedQueryFilterOption<T, P> | PathValue<T, P>;
|
|
252
|
+
} & {
|
|
253
|
+
and?: ResolvedQueryCondition<T>[];
|
|
254
|
+
or?: ResolvedQueryCondition<T>[];
|
|
255
|
+
};
|
|
256
|
+
declare function useResolvedQuery<T>(condition?: ResolvedQueryCondition<T>): ResolvedQueryCondition<T>;
|
|
257
|
+
|
|
258
|
+
export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, type BgsFormProviderProps, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnFieldChange, type OnSubmit, type OptionsInit, type PatternType, PatternTypeEnum, type ResolvedQueryCondition, type ResolvedQueryFilterOption, type SelectedNested, type TriggerSubmit, type UseBgsForm, type UseController, type UseFormArray, type UseFormArrayInitReturn, type UseFormInitReturn, type UseSelected, type ValidationCallback, type ValidationOptions, type ValidationRules, BgsForm as default, useBgsController, useForm as useBgsForm, useFormArray as useBgsFormArray, useBgsFormArrayInit, useFormGroup as useBgsFormGroup, useBgsFormInit, useResolvedQuery, useSummaryValidation };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
3
|
import { ControllerRenderProps, FieldValues, ControllerFieldState, UseFormStateReturn, UseFormReturn, UseFieldArrayReturn, EventType, FieldErrors, UseFieldArraySwap, UseFieldArrayMove, UseFieldArrayPrepend, UseFieldArrayAppend, UseFieldArrayRemove, UseFieldArrayInsert, UseFieldArrayUpdate, UseFieldArrayReplace, FieldArrayWithId, DeepPartialSkipArrayKey, UseFormProps } from 'react-hook-form';
|
|
4
|
+
import { NestedKeyOf as NestedKeyOf$1, QueryOperator, PathValue } from '@bgscore/react-core';
|
|
4
5
|
|
|
5
6
|
type ControllerWithKey = ControllerProps & {
|
|
6
7
|
id: string;
|
|
@@ -240,4 +241,18 @@ interface SummaryValidation {
|
|
|
240
241
|
}
|
|
241
242
|
declare const useSummaryValidation: () => SummaryValidation[];
|
|
242
243
|
|
|
243
|
-
|
|
244
|
+
interface ResolvedQueryFilterOption<T, P extends NestedKeyOf$1<T>> {
|
|
245
|
+
opt?: QueryOperator;
|
|
246
|
+
value?: PathValue<T, P> | undefined | null;
|
|
247
|
+
required?: boolean;
|
|
248
|
+
fromField?: string | string[];
|
|
249
|
+
}
|
|
250
|
+
type ResolvedQueryCondition<T> = {
|
|
251
|
+
[P in NestedKeyOf$1<T>]?: ResolvedQueryFilterOption<T, P> | PathValue<T, P>;
|
|
252
|
+
} & {
|
|
253
|
+
and?: ResolvedQueryCondition<T>[];
|
|
254
|
+
or?: ResolvedQueryCondition<T>[];
|
|
255
|
+
};
|
|
256
|
+
declare function useResolvedQuery<T>(condition?: ResolvedQueryCondition<T>): ResolvedQueryCondition<T>;
|
|
257
|
+
|
|
258
|
+
export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, type BgsFormProviderProps, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnFieldChange, type OnSubmit, type OptionsInit, type PatternType, PatternTypeEnum, type ResolvedQueryCondition, type ResolvedQueryFilterOption, type SelectedNested, type TriggerSubmit, type UseBgsForm, type UseController, type UseFormArray, type UseFormArrayInitReturn, type UseFormInitReturn, type UseSelected, type ValidationCallback, type ValidationOptions, type ValidationRules, BgsForm as default, useBgsController, useForm as useBgsForm, useFormArray as useBgsFormArray, useBgsFormArrayInit, useFormGroup as useBgsFormGroup, useBgsFormInit, useResolvedQuery, useSummaryValidation };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import re,{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 q=createContext(void 0);function h(){let e=useContext(q);return e||{}}function $({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(q.Provider,{value:i,children:e})}var w=new WeakMap;function j(e){return w.has(e)||w.set(e,createStore({})),w.get(e)}function P(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]=P(g):((!s[u]||typeof s[u]!="object")&&(s[u]={}),s=s[u]);}}else r[t]=P(g);return r}function B(){return createTable({name:"draft",primaryKey:"field_1731131919872_aj29d"})}var V=createContext(void 0);function C(){let e=useContext(V);return e||{}}function H({children:e,value:r}){return jsx(V.Provider,{value:r,children:e})}function O(){let{dbName:e="bgs-react-form"}=C();return createDatabase({dbName:e,table:{draft:B()}})}function _(e){let r=O(),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 J=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=P(e.defaultValues);let r=useRef(null),[t,g]=useState(false),n=e?.draftKey,s=n?_(n):void 0,m=useForm({reValidateMode:"onSubmit",mode:"all",...e}),u=j(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(P({...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 ke=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:g,formData:n,controller:s,children:m,...u})=>{n&&(n=P(n));let i=u.draftKey,l=s??J({draftKey:i}),[a]=Array.isArray(l)?l:[l],c=useRef(true),d=useRef(void 0),{autoSaveDelay:F=.5}=C(),T=async p=>{p.preventDefault(),p.stopPropagation(),a.setIsSubmit(true);let o=await a.formControl.trigger(),y=a.getData();o?e&&e({...y},{...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 p=a.formControl.watch((o,y)=>r(o,y,a));return ()=>p.unsubscribe()},[]);let x=async()=>{if(a?.isDraft){c.current=false;let p=await a.getDataDraft();p&&Object.entries(p).forEach(([o,y])=>{o==="field_1731131919872_aj29d"||!isNotEmpty(y)||(a.setValue(o,y),a.trigger(o));});}};useEffect(()=>{c.current&&x();},[a.isDraft,c.current]);let U=useMemo(()=>debounce((p,o,y)=>{y?.saveDraft?.({[p]:o},n);},F),[n,F]),f=async(p,o,y)=>{g?.(p,o,y),U(p,o,y);},A={...u};return delete A?.draftKey,jsx(Fragment,{children:jsx($,{controller:{...a,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:f,children:jsx("form",{...A,id:a.formId,ref:a.ref,onSubmit:T,children:m})})})},Q=ke;var Y=createContext(void 0);function E(){let e=useContext(Y);return e||{}}function K({children:e,...r}){return jsx(Y.Provider,{value:r,children:e})}var ee=e=>{let r=h(),t=useFieldArray({control:r.control,name:e}),n={formArrayId:useMemo(()=>generateUUID(),[]),...t,...r};return [n,n]};var oe=({name:e,defaultData:r,controller:t,children:g})=>{let n=t??ee(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(re.Fragment,{children:jsx(K,{...l,children:renderChildren(g,l)})},m.id)})})};oe.displayName="BgsFormArray";var Xe=oe;re.memo(({children:e,props:r})=>jsx(Fragment,{children:renderChildren(e,r)}));var se=createContext(void 0);function N(){let e=useContext(se);return e||{}}function L({children:e,...r}){return jsx(se.Provider,{value:r,children:e})}var ie=({children:e,...r})=>{let t=h(),g=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(L,{...t,...r,formGroupId:g,children:e})})};ie.displayName="BgsFormGroup";var or=ie;var sr=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function M({validationRules:e,label:r}){let{formControl: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}=C(),{required:l,minLength:a,maxLength:c,min:d,max:F,email:T,match:x,diff:U,pattern:f}=i||{},p={required:o=>{if(!r)return true;let y=l?l(t):`${t} is required`;return typeof o=="string"&&!o.trim()||o==null?y: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))||(U?U(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(y=>y.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 Gt=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}=N(),{name:x,formId:U}=E(),f=useMemo(()=>{let b=e.dataField;return e.disabledHierarchy||(x&&i===U&&(b=`${x}${b}`),d&&i===F&&(b=`${d}${b}`)),b},[x,i,U,e.dataField,d,F,e.disabledHierarchy]),A=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:A}),()=>{n(r);}),[r,e,f,A]);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 y=false;typeof e.hidden=="boolean"&&(y=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||y?{required:false}:M({...e,validationRules:R,label:A}),v=useController({name:f,control:s,disabled:p,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),de=v.fieldState.invalid,ue=v.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:A,dataField:f,controller:v,invalid:de,messageError:ue,selectedField:pe,value:fe,required:ge,onChange:b=>{v.field.onChange(b),c?.(f,b,t);}}};var Nt=()=>{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 qt=Q;export{Xe as BgsFormArray,or as BgsFormGroup,H as BgsReactFormProvider,fr as PatternTypeEnum,qt as default,Gt as useBgsController,h as useBgsForm,E as useBgsFormArray,ee as useBgsFormArrayInit,N as useBgsFormGroup,J as useBgsFormInit,Nt as useSummaryValidation};
|
|
1
|
+
import te,{createContext,useContext,useRef,useState,useMemo,useEffect,useCallback}from'react';import {jsx,Fragment}from'react/jsx-runtime';import {renderChildren,generateUUID,getFieldValue,mappingUndefinedtoNull,diffJson,debounce,labelFormatter,isNotEmpty,isArray,useDbLiveFlag,createStore,createDatabase,createTable}from'@bgscore/react-core';import {useForm,useWatch,useFieldArray,useController}from'react-hook-form';var q=createContext(void 0);function h(){let e=useContext(q);return e||{}}function $({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let n=useRef([]),i=useCallback(d=>{let o=n.current.findIndex(f=>f.id===d.id);if(o>-1){let f=[...n.current];f[o]=d,n.current=[...f];}else n.current.push(d);},[n]),m=useCallback(d=>{n.current=n.current.filter(o=>o.id!==d);},[]),u=async(d,o)=>{r.setIsSubmit(true);let f=o?await r.formControl.trigger():true,l=r.getData();f&&t&&t({...l,...d},{...r});},a={...r,registerItem:i,unregisterItem:m,items:n.current,triggerSubmit:u,onFieldChange:p};return jsx(q.Provider,{value:a,children:e})}var w=new WeakMap;function V(e){return w.has(e)||w.set(e,createStore({})),w.get(e)}function C(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let n=t.split("."),i=r;for(let m=0;m<n.length;m++){let u=n[m];m===n.length-1?i[u]=C(p):((!i[u]||typeof i[u]!="object")&&(i[u]={}),i=i[u]);}}else r[t]=C(p);return r}function O(){return createTable({name:"draft",primaryKey:"field_1731131919872_aj29d"})}var Q=createContext(void 0);function A(){let e=useContext(Q);return e||{}}function H({children:e,value:r}){return jsx(Q.Provider,{value:r,children:e})}function B(){let{dbName:e="bgs-react-form"}=A();return createDatabase({dbName:e,table:{draft:O()}})}function _(e){let r=B(),t=useDbLiveFlag(r.draft.detail,{key:e}),p=async(m,u)=>{let d={...await i(),...m};Object.keys(d).forEach(l=>{isNotEmpty(d[l])||delete d[l];});let o=Object.keys(d);if(o.length===1&&o[0]==="field_1731131919872_aj29d")return n();o.some(l=>l!=="field_1731131919872_aj29d"&&d[l]!==getFieldValue(u,l))?await r.draft.put(e,d):await n();},n=async()=>{await r.draft.remove(e);},i=async()=>await r.draft.detail(e);return {isDraft:t,saveDraft:p,removeDraft:n,getDataDraft:i}}var J=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=C(e.defaultValues);let r=useRef(null),[t,p]=useState(false),n=e?.draftKey,i=n?_(n):void 0,m=useForm({reValidateMode:"onSubmit",mode:"all",...e}),u=V(m),a=useMemo(()=>generateUUID(),[]),d=l=>l?getFieldValue(mappingUndefinedtoNull(m.getValues()),l):mappingUndefinedtoNull(m.getValues()),o=l=>{l?typeof l=="string"?m.resetField(l,{}):typeof l=="object"&&isArray(l,0)&&l.forEach(F=>m.resetField(F)):m.reset();},f={...m,ref:r,reset:o,updateData:l=>{let F=d();m.reset(C({...F,...l}));},getData:d,formControl:m,useFieldArray:l=>useFieldArray({control:m.control,name:l}),useWatch:l=>useWatch({control:m.control,name:l}),isSubmit:t,formId:a,setIsSubmit:p,useSelected:l=>u.useStore(F=>getFieldValue(F,l)),setSelected:u.setState,isDraft:!!i?.isDraft,removeDraft:()=>{i?.removeDraft?.();},resetDraft:()=>{i?.removeDraft?.(),o();},saveDraft:(...l)=>i?.saveDraft?.(...l),getDataDraft:()=>i?.getDataDraft?.(),draftKey:n};return [f,f]};var je=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:n,controller:i,children:m,...u})=>{n&&(n=C(n));let a=u.draftKey,d=i??J({draftKey:a}),[o]=Array.isArray(d)?d:[d],f=useRef(true),l=useRef(void 0),{autoSaveDelay:F=.5}=A(),T=async g=>{g.preventDefault(),g.stopPropagation(),o.setIsSubmit(true);let s=await o.formControl.trigger(),y=o.getData();s?e&&e({...y},{...o}):t&&t(o.formControl.formState.errors);};useEffect(()=>{n&&diffJson(l.current||{},n)&&(o.formControl.reset(n),l.current=n);},[n,o.formControl.reset]),useEffect(()=>{if(!r)return;let g=o.formControl.watch((s,y)=>r(s,y,o));return ()=>g.unsubscribe()},[]);let x=async()=>{if(o?.isDraft){f.current=false;let g=await o.getDataDraft();g&&Object.entries(g).forEach(([s,y])=>{s==="field_1731131919872_aj29d"||!isNotEmpty(y)||(o.setValue(s,y),o.trigger(s));});}};useEffect(()=>{f.current&&x();},[o.isDraft,f.current]);let v=useMemo(()=>debounce((g,s,y)=>{y?.saveDraft?.({[g]:s},n);},F),[n,F]),c=async(g,s,y)=>{p?.(g,s,y),v(g,s,y);},R={...u};return delete R?.draftKey,jsx(Fragment,{children:jsx($,{controller:{...o,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:c,children:jsx("form",{...R,id:o.formId,ref:o.ref,onSubmit:T,children:m})})})},Y=je;var ee=createContext(void 0);function G(){let e=useContext(ee);return e||{}}function K({children:e,...r}){return jsx(ee.Provider,{value:r,children:e})}var re=e=>{let r=h(),t=useFieldArray({control:r.control,name:e}),n={formArrayId:useMemo(()=>generateUUID(),[]),...t,...r};return [n,n]};var ne=({name:e,defaultData:r,controller:t,children:p})=>{let n=t??re(e),[i]=Array.isArray(n)?n:[n];return useEffect(()=>{typeof r=="boolean"&&r?i.append({}):typeof r=="number"&&r>0?i.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&i.append(r);},[]),jsx(Fragment,{children:i.fields.map((m,u)=>{let a=`${e}.${u}.`,d={...i,index:u,fieldId:m.id,name:a,countFields:i.fields.length,removeItem:()=>i.remove(u),watchItem:o=>i.watch(o?`${a}${o}`:a.slice(0,-1)),setValueItem:(o,f)=>i.setValue(`${a}${o}`,f),useSelectedItem:o=>i.useSelected(`${a}${o}`)};return jsx(te.Fragment,{children:jsx(K,{...d,children:renderChildren(p,d)})},m.id)})})};ne.displayName="BgsFormArray";var Xe=ne;te.memo(({children:e,props:r})=>jsx(Fragment,{children:renderChildren(e,r)}));var ae=createContext(void 0);function N(){let e=useContext(ae);return e||{}}function k({children:e,...r}){return jsx(ae.Provider,{value:r,children:e})}var me=({children:e,...r})=>{let t=h(),p=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(k,{...t,...r,formGroupId:p,children:e})})};me.displayName="BgsFormGroup";var nr=me;var ar=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function M({validationRules:e,label:r}){let{formControl:t,getData:p}=h(),n=[];return e&&(typeof e=="string"?de(e,true,r,t,p,{}).forEach(i=>n.push(i)):typeof e=="object"&&Object.keys(e).forEach(i=>{let{validate:m}=n.find(a=>a.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(i)){let a=e[i],d="";["match","diff"].includes(i)&&typeof a=="object"&&(a=e[i].dataField,d=e[i].label),a!=null&&de(i,a,r,t,p,m,d).forEach(o=>n.push(o));}else if(typeof e[i]=="object"){let a=e[i];n.push({validate:{...m,[i]:d=>a.validation(d)||a.message&&(typeof a.message=="string"?a.message:a.message(r))}});}})),Object.assign({},...n)}var de=(e,r,t,p,n,i,m)=>{let u=[],{validationMessage:a}=A(),{required:d,minLength:o,maxLength:f,min:l,max:F,email:T,match:x,diff:v,pattern:c}=a||{},g={required:s=>{if(!r)return true;let y=d?d(t):`${t} is required`;return typeof s=="string"&&!s.trim()||s==null?y:true},minLength:{value:r,message:o?o(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:f?f(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:l?l(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:F?F(t,r):`${t} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${t} ${r.message}`:true,email:(s="")=>!r||!s?true:ar.test(s)||(T?T(t):`${t} must be type email`),match:(s="")=>s?s===(n&&n(r))||(x?x(t,m||labelFormatter.changeAll(r)):`${t} must be same with ${m||labelFormatter.changeAll(r)}`):true,diff:(s="")=>s?s!==(n&&n(r))||(v?v(t,m||labelFormatter.changeAll(r)):`${t} must be different with ${m||labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(g){let{validate:s}=u.find(y=>y.validate)||{};typeof g=="function"?u.push({validate:{...s,...i,[e]:g}}):e==="pattern"?u.push({validate:{...s,...i,[`${e}${r}`]:g[r]}}):u.push({[e]:g});}return u};var Kt=e=>{let r=useMemo(()=>generateUUID(),[]),t=h(),{registerItem:p,unregisterItem:n,control:i,disabled:m,readOnly:u,formId:a,setSelected:d,useSelected:o,onFieldChange:f}=t,{name:l,formId:F,...T}=N(),{name:x,formId:v}=G(),c=useMemo(()=>{let b=e.dataField;return e.disabledHierarchy||(x&&a===v&&(b=`${x}${b}`),l&&a===F&&(b=`${l}${b}`)),b},[x,a,v,e.dataField,l,F,e.disabledHierarchy]),R=useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);useEffect(()=>(p({id:r,...e,dataField:c,label:R}),()=>{n(r);}),[r,e,c,R]);let g=false;typeof e.disabled=="boolean"?g=e.disabled:typeof T.disabled=="boolean"?g=T.disabled:g=!!m;let s=false;typeof e.readOnly=="boolean"?s=e.readOnly:typeof T.readOnly=="boolean"?s=T.readOnly:s=!!u;let y=false;typeof e.hidden=="boolean"&&(y=e.hidden);let U=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?U={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?U={email:true,required:e.required}:typeof e.validationRules=="object"&&(U={...e.validationRules,required:e.required}));let le=g||s||y?{required:false}:M({...e,validationRules:U,label:R}),P=useController({name:c,control:i,disabled:g,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),ue=P.fieldState.invalid,fe=P.fieldState.error?.message,ce=useWatch({name:c,control:i,defaultValue:e.defaultValue}),pe=useMemo(()=>debounce(b=>d(Fe=>({...Fe,[c]:b||null}))),[d,c]),ge=o(c),ye=U?.required;return {...e,setSelectedField:pe,label:R,dataField:c,controller:P,invalid:ue,messageError:fe,selectedField:ge,value:ce,required:ye,onChange:b=>{P.field.onChange(b),f?.(c,b,t);}}};var Mt=()=>{let{formControl:e,items:r}=h(),t=(n,i,m,u=0)=>{let a=[];if(Array.isArray(m))m.forEach((d,o)=>{let f=Object.entries(d||{}).map(([l,F])=>t(`${n}.${o}.${l}`,`${i}[]${l}`,F,m.length>1?o+1:0)).flat();a=[...a,...f];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([d,o])=>{let f=t(`${n}.${d}`,`${n}.${d}`,o);a=[...a,...f];});else {let d=m?.message||"",o=r.find(f=>f.dataField===i)?.label;a.push({label:`${o||""}${u>0?` ${u}`:""}`,message:d,dataField:n});}return a};return Object.entries(e.formState.errors||{}).map(([n,i])=>t(n,n,i)).flat()};function Vt(e){let{watch:r}=h(),t=useMemo(()=>{let m=new Set,u=a=>{if(a)for(let[d,o]of Object.entries(a)){if(d==="and"||d==="or"){o?.forEach(u);continue}o&&typeof o=="object"&&"fromField"in o&&typeof o.fromField=="string"&&m.add(o.fromField);}};return u(e),Array.from(m)},[e]),p=t.length?r(t):[],n=useMemo(()=>{let m={};return t.forEach((u,a)=>{m[u]=p?.[a];}),m},[t,p]),i=useCallback(m=>{if(!m)return m;let u={};for(let[a,d]of Object.entries(m)){if(a==="and"||a==="or"){u[a]=d?.map(o=>i(o))??d;continue}if(d&&typeof d=="object"&&"fromField"in d){let o=d,f={...o},l=o.fromField;l&&l in n?f.value=n[l]:f.value=o.value,delete f.fromField,u[a]=f;}else u[a]=d;}return u},[n]);return useMemo(()=>i(e)??{},[e,i])}var pr=(a=>(a.alphabet="alphabet",a.alphaNumber="alphanumber",a.number="number",a.lowercase="lowercase",a.url="url",a.uppercase="uppercase",a.mixedCase="mixedcase",a.specialCharacters="specialcharacters",a))(pr||{});var zt=Y;export{Xe as BgsFormArray,nr as BgsFormGroup,H as BgsReactFormProvider,pr as PatternTypeEnum,zt as default,Kt as useBgsController,h as useBgsForm,G as useBgsFormArray,re as useBgsFormArrayInit,N as useBgsFormGroup,J as useBgsFormInit,Vt as useResolvedQuery,Mt as useSummaryValidation};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bgscore/react-form",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
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",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"author": "Andry Bagus Dharmawan",
|
|
29
29
|
"license": "MIT",
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@bgscore/react-core": ">=1.0.
|
|
31
|
+
"@bgscore/react-core": ">=1.0.25",
|
|
32
32
|
"react": ">=17.0.0",
|
|
33
33
|
"react-dom": ">=17.0.0"
|
|
34
34
|
},
|