@bgscore/react-form 1.0.0 → 1.0.1
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 +2 -1
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _jsxruntime = require('react/jsx-runtime');var O=_react.createContext.call(void 0, void 0);function y(){let e=_react.useContext.call(void 0, O);return e||{}}function I({children:e,controller:r,onSubmit:o}){let a=_react.useRef.call(void 0, []),m=_react.useCallback.call(void 0, t=>{let d=a.current.findIndex(l=>l.id===t.id);if(d>-1){let l=[...a.current];l[d]=t,a.current=[...l]}else a.current.push(t)},[a]),n=_react.useCallback.call(void 0, t=>{a.current=a.current.filter(d=>d.id!==t)},[]),c=async(t,d)=>{r.setIsSubmit(!0);let l=d?await r.formControl.trigger():!0,i=r.getData();l&&o&&o({...i,...t},{...r})},f={...r,registerItem:m,unregisterItem:n,items:a.current,triggerSubmit:c};return _jsxruntime.jsx.call(void 0, O.Provider,{value:f,children:e})}var _reactcore = require('@bgscore/react-core');var _reacthookform = require('react-hook-form');var P=new WeakMap;function k(e){return P.has(e)||P.set(e,_reactcore.createStore.call(void 0, {})),P.get(e)}var q=(e,r)=>{e||(e={});let o=_react.useRef.call(void 0, null),[a,m]=_react.useState.call(void 0, !1),n=_reacthookform.useForm.call(void 0, {...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),c=k(n),f=_react.useMemo.call(void 0, ()=>_reactcore.generateUUID.call(void 0, ),[]),t=i=>i?_reactcore.getFieldValue.call(void 0, _reactcore.mappingUndefinedtoNull.call(void 0, n.getValues()),i):_reactcore.mappingUndefinedtoNull.call(void 0, n.getValues()),l={...n,ref:o,reset:i=>{i?typeof i=="string"?n.resetField(i,{}):typeof i=="object"&&_reactcore.isArray.call(void 0, i,0)&&i.forEach(p=>n.resetField(p)):n.reset()},updateData:i=>{let p=t();n.reset({...p,...i})},getData:t,formControl:n,useFieldArray:i=>_reacthookform.useFieldArray.call(void 0, {control:n.control,name:i}),useWatch:i=>_reacthookform.useWatch.call(void 0, {control:n.control,name:i}),isSubmit:a,formId:f,setIsSubmit:m,useSelected:i=>c.useStore(p=>_reactcore.getFieldValue.call(void 0, p,i)),setSelected:c.setState};return[l,l]};var Ce=({onSubmit:e,onChange:r,onInvalid:o,formData:a,controller:m,children:n,...c})=>{let f=_nullishCoalesce(m, () => (q())),[t]=Array.isArray(f)?f:[f],d=_react.useRef.call(void 0, void 0),l=async i=>{i.preventDefault(),i.stopPropagation(),t.setIsSubmit(!0);let p=await t.formControl.trigger(),h=t.getData();p?e&&e({...h},{...t}):o&&o(t.formControl.formState.errors)};return _react.useEffect.call(void 0, ()=>{a&&_reactcore.diffJson.call(void 0, d.current||{},a)&&(t.formControl.reset(a),d.current=a)},[a,t.formControl.reset]),_react.useEffect.call(void 0, ()=>{if(!r)return;let i=t.formControl.watch(r);return()=>i.unsubscribe()},[]),_jsxruntime.jsx.call(void 0, _jsxruntime.Fragment,{children:_jsxruntime.jsx.call(void 0, I,{controller:{...t,disabled:_optionalChain([c, 'optionalAccess', _2 => _2.disabled]),readOnly:_optionalChain([c, 'optionalAccess', _3 => _3.readOnly])},onSubmit:e,children:_jsxruntime.jsx.call(void 0, "form",{...c,id:t.formId,ref:t.ref,onSubmit:l,children:n})})})},E=Ce;var D=_react.createContext.call(void 0, void 0);function v(){let e=_react.useContext.call(void 0, D);return e||{}}function $({children:e,...r}){return _jsxruntime.jsx.call(void 0, D.Provider,{value:r,children:e})}var K=e=>{let r=y(),o=_reacthookform.useFieldArray.call(void 0, {control:r.control,name:e}),m={formArrayId:_react.useMemo.call(void 0, ()=>_reactcore.generateUUID.call(void 0, ),[]),...o,...r};return[m,m]};var Z=({name:e,defaultData:r,controller:o,children:a})=>{let m=_nullishCoalesce(o, () => (K(e))),[n]=Array.isArray(m)?m:[m];return _react.useEffect.call(void 0, ()=>{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.call(void 0, _jsxruntime.Fragment,{children:n.fields.map((c,f)=>{let t=`${e}.${f}.`,d={...n,index:f,fieldId:c.id,name:t,countFields:n.fields.length,removeItem:()=>n.remove(f),watchItem:l=>n.watch(l?`${t}${l}`:t.slice(0,-1)),setValueItem:(l,i)=>n.setValue(`${t}${l}`,i),useSelectedItem:l=>n.useSelected(`${t}${l}`)};return _jsxruntime.jsx.call(void 0, _react2.default.Fragment,{children:_jsxruntime.jsx.call(void 0, $,{...d,children:_reactcore.renderChildren.call(void 0, a,d)})},c.id)})})};Z.displayName="BgsFormArray";var Ge=Z,Br=_react2.default.memo(({children:e,props:r})=>_jsxruntime.jsx.call(void 0, _jsxruntime.Fragment,{children:_reactcore.renderChildren.call(void 0, e,r)}));var J=_react.createContext.call(void 0, void 0);function w(){let e=_react.useContext.call(void 0, J);return e||{}}function B({children:e,...r}){return _jsxruntime.jsx.call(void 0, J.Provider,{value:r,children:e})}var X=({children:e,...r})=>{let o=y(),a=_react.useMemo.call(void 0, ()=>_reactcore.generateUUID.call(void 0, ),[]);return _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment,{children:_jsxruntime.jsx.call(void 0, B,{...o,...r,formGroupId:a,children:e})})};X.displayName="BgsFormGroup";var Me=X;var Y=_react.createContext.call(void 0, void 0);function _(){let e=_react.useContext.call(void 0, Y);return e||{}}function V({children:e,...r}){return _jsxruntime.jsx.call(void 0, Y.Provider,{value:r,children:e})}function W({validationRules:e,label:r}){let{formControl:o,getData:a}=y(),m=[];return e&&(typeof e=="string"?ee(e,!0,r,o,a,{}).forEach(n=>m.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:c}=m.find(t=>t.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let t=e[n],d="";if(n==="email"&&!t)return;["match","diff"].includes(n)&&typeof t=="object"&&(t=e[n].dataField,d=e[n].label),t!=null&&ee(n,t,r,o,a,c,d).forEach(l=>m.push(l))}else if(typeof e[n]=="object"){let t=e[n];m.push({validate:{...c,[n]:d=>t.validation(d)||t.message&&(typeof t.message=="string"?t.message:t.message(r))}})}})),Object.assign({},...m)}var ee=(e,r,o,a,m,n,c)=>{let f=[],{validationMessage:t}=_(),{required:d,minLength:l,maxLength:i,min:p,max:h,email:x,match:b,diff:g,pattern:u}=t||{},F={required:{value:!!r,message:d?d(o):`${o} is required`},minLength:{value:r,message:l?l(o,r):`${o} must be at least ${r} characters long`},maxLength:{value:r,message:i?i(o,r):`${o} cannot be more than ${r} characters long`},min:{value:Number(r),message:p?p(o,r):`${o} should be at least ${r}`},max:{value:Number(r),message:h?h(o,r):`${o} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${o} ${r.message}`:!0,email:(s="")=>s?s.match(/^(([^<>()[\]\\.,;:\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,}))$/)||(x?x(o):`${o} must be type email`):!0,match:(s="")=>s?s===(m&&m(r))||(b?b(o,c||_reactcore.labelFormatter.changeAll(r)):`${o} must be same with ${c||_reactcore.labelFormatter.changeAll(r)}`):!0,diff:(s="")=>s?s!==(m&&m(r))||(g?g(o,c||_reactcore.labelFormatter.changeAll(r)):`${o} must be different with ${c||_reactcore.labelFormatter.changeAll(r)}`):!0,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(_optionalChain([u, 'optionalAccess', _4 => _4.alphabet])?_optionalChain([u, 'optionalAccess', _5 => _5.alphabet, 'call', _6 => _6(o)]):`${o} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(_optionalChain([u, 'optionalAccess', _7 => _7.alphanumber])?_optionalChain([u, 'optionalAccess', _8 => _8.alphanumber, 'call', _9 => _9(o)]):`${o} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(_optionalChain([u, 'optionalAccess', _10 => _10.number])?_optionalChain([u, 'optionalAccess', _11 => _11.number, 'call', _12 => _12(o)]):`${o} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(_optionalChain([u, 'optionalAccess', _13 => _13.lowercase])?_optionalChain([u, 'optionalAccess', _14 => _14.lowercase, 'call', _15 => _15(o)]):`${o} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(_optionalChain([u, 'optionalAccess', _16 => _16.url])?_optionalChain([u, 'optionalAccess', _17 => _17.url, 'call', _18 => _18(o)]):`${o} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(_optionalChain([u, 'optionalAccess', _19 => _19.uppercase])?_optionalChain([u, 'optionalAccess', _20 => _20.uppercase, 'call', _21 => _21(o)]):`${o} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(_optionalChain([u, 'optionalAccess', _22 => _22.mixedcase])?_optionalChain([u, 'optionalAccess', _23 => _23.mixedcase, 'call', _24 => _24(o)]):`${o} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(_optionalChain([u, 'optionalAccess', _25 => _25.specialcharacters])?_optionalChain([u, 'optionalAccess', _26 => _26.specialcharacters, 'call', _27 => _27(o)]):`${o} must contain special characters`)}}[e];if(F){let{validate:s}=f.find(U=>U.validate)||{};typeof F=="function"?f.push({validate:{...s,...n,[e]:F}}):e==="pattern"?f.push({validate:{...s,...n,[`${e}${r}`]:F[r]}}):f.push({[e]:F})}return f};var at=e=>{let r=_react.useMemo.call(void 0, ()=>_reactcore.generateUUID.call(void 0, ),[]),{registerItem:o,unregisterItem:a,control:m,disabled:n,readOnly:c,formId:f,setSelected:t,useSelected:d}=y(),{name:l,formId:i,...p}=w(),{formId:h,name:x}=v(),b=e.label,g=e.dataField;_react.useEffect.call(void 0, ()=>(o({id:r,...e}),()=>{a(r)}),[r,e]),!e.label&&!e.noLabel&&(b=_reactcore.labelFormatter.changeAll(g)),e.disabledHierarchy||(x&&f===h&&(g=`${x}${g}`),l&&f===i&&(g=`${l}${g}`));let u=!1;typeof e.disabled=="boolean"?u=e.disabled:typeof p.disabled=="boolean"?u=p.disabled:u=!!n;let A=!1;typeof e.readOnly=="boolean"?A=e.readOnly:typeof p.readOnly=="boolean"?A=p.readOnly:A=!!c;let F=!1;typeof e.hidden=="boolean"&&(F=e.hidden);let s=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?s={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?s={email:!0,required:e.required}:typeof e.validationRules=="object"&&(s={...e.validationRules,required:e.required}));let U=u||A||F?{required:!1}:W({...e,validationRules:s,label:b,dataField:g}),C=_reacthookform.useController.call(void 0, {name:g,control:m,disabled:u,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:U}),te=C.fieldState.invalid,oe=_optionalChain([C, 'access', _28 => _28.fieldState, 'access', _29 => _29.error, 'optionalAccess', _30 => _30.message]),ne=_reacthookform.useWatch.call(void 0, {name:g,control:m,defaultValue:e.defaultValue}),se=_react.useMemo.call(void 0, ()=>_reactcore.debounce.call(void 0, me=>t(le=>({...le,[g]:me||null}))),[t]),ie=d(g),ae=_optionalChain([U, 'optionalAccess', _31 => _31.required]);return{...e,setSelectedField:se,label:b,dataField:g,controller:C,invalid:te,messageError:oe,selectedField:ie,value:ne,required:ae}};var Ye=(t=>(t.alphabet="alphabet",t.alphaNumber="alphanumber",t.number="number",t.lowercase="lowercase",t.url="url",t.uppercase="uppercase",t.mixedCase="mixedcase",t.specialCharacters="specialcharacters",t))(Ye||{});var ut=E;exports.BgsFormArray = Ge; exports.BgsFormGroup = Me; exports.BgsReactFormProvider = V; exports.PatternTypeEnum = Ye; exports.default = ut; exports.useBgsController = at; exports.useBgsForm = y; exports.useBgsFormArray = v; exports.useBgsFormArrayInit = K; exports.useBgsFormGroup = w; exports.useBgsFormInit = q;
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var H=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 H__default=/*#__PURE__*/_interopDefault(H);var O=H.createContext(void 0);function y(){let e=H.useContext(O);return e||{}}function I({children:e,controller:r,onSubmit:o}){let a=H.useRef([]),m=H.useCallback(t=>{let d=a.current.findIndex(l=>l.id===t.id);if(d>-1){let l=[...a.current];l[d]=t,a.current=[...l];}else a.current.push(t);},[a]),n=H.useCallback(t=>{a.current=a.current.filter(d=>d.id!==t);},[]),c=async(t,d)=>{r.setIsSubmit(true);let l=d?await r.formControl.trigger():true,i=r.getData();l&&o&&o({...i,...t},{...r});},f={...r,registerItem:m,unregisterItem:n,items:a.current,triggerSubmit:c};return jsxRuntime.jsx(O.Provider,{value:f,children:e})}var P=new WeakMap;function k(e){return P.has(e)||P.set(e,reactCore.createStore({})),P.get(e)}var q=(e,r)=>{e||(e={});let o=H.useRef(null),[a,m]=H.useState(false),n=reactHookForm.useForm({...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),c=k(n),f=H.useMemo(()=>reactCore.generateUUID(),[]),t=i=>i?reactCore.getFieldValue(reactCore.mappingUndefinedtoNull(n.getValues()),i):reactCore.mappingUndefinedtoNull(n.getValues()),l={...n,ref:o,reset:i=>{i?typeof i=="string"?n.resetField(i,{}):typeof i=="object"&&reactCore.isArray(i,0)&&i.forEach(p=>n.resetField(p)):n.reset();},updateData:i=>{let p=t();n.reset({...p,...i});},getData:t,formControl:n,useFieldArray:i=>reactHookForm.useFieldArray({control:n.control,name:i}),useWatch:i=>reactHookForm.useWatch({control:n.control,name:i}),isSubmit:a,formId:f,setIsSubmit:m,useSelected:i=>c.useStore(p=>reactCore.getFieldValue(p,i)),setSelected:c.setState};return [l,l]};var Ce=({onSubmit:e,onChange:r,onInvalid:o,formData:a,controller:m,children:n,...c})=>{let f=m??q(),[t]=Array.isArray(f)?f:[f],d=H.useRef(void 0),l=async i=>{i.preventDefault(),i.stopPropagation(),t.setIsSubmit(true);let p=await t.formControl.trigger(),h=t.getData();p?e&&e({...h},{...t}):o&&o(t.formControl.formState.errors);};return H.useEffect(()=>{a&&reactCore.diffJson(d.current||{},a)&&(t.formControl.reset(a),d.current=a);},[a,t.formControl.reset]),H.useEffect(()=>{if(!r)return;let i=t.formControl.watch(r);return ()=>i.unsubscribe()},[]),jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(I,{controller:{...t,disabled:c?.disabled,readOnly:c?.readOnly},onSubmit:e,children:jsxRuntime.jsx("form",{...c,id:t.formId,ref:t.ref,onSubmit:l,children:n})})})},E=Ce;var D=H.createContext(void 0);function v(){let e=H.useContext(D);return e||{}}function $({children:e,...r}){return jsxRuntime.jsx(D.Provider,{value:r,children:e})}var K=e=>{let r=y(),o=reactHookForm.useFieldArray({control:r.control,name:e}),m={formArrayId:H.useMemo(()=>reactCore.generateUUID(),[]),...o,...r};return [m,m]};var Z=({name:e,defaultData:r,controller:o,children:a})=>{let m=o??K(e),[n]=Array.isArray(m)?m:[m];return H.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((c,f)=>{let t=`${e}.${f}.`,d={...n,index:f,fieldId:c.id,name:t,countFields:n.fields.length,removeItem:()=>n.remove(f),watchItem:l=>n.watch(l?`${t}${l}`:t.slice(0,-1)),setValueItem:(l,i)=>n.setValue(`${t}${l}`,i),useSelectedItem:l=>n.useSelected(`${t}${l}`)};return jsxRuntime.jsx(H__default.default.Fragment,{children:jsxRuntime.jsx($,{...d,children:reactCore.renderChildren(a,d)})},c.id)})})};Z.displayName="BgsFormArray";var Ge=Z;H__default.default.memo(({children:e,props:r})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:reactCore.renderChildren(e,r)}));var J=H.createContext(void 0);function w(){let e=H.useContext(J);return e||{}}function B({children:e,...r}){return jsxRuntime.jsx(J.Provider,{value:r,children:e})}var X=({children:e,...r})=>{let o=y(),a=H.useMemo(()=>reactCore.generateUUID(),[]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(B,{...o,...r,formGroupId:a,children:e})})};X.displayName="BgsFormGroup";var Me=X;var Y=H.createContext(void 0);function _(){let e=H.useContext(Y);return e||{}}function V({children:e,...r}){return jsxRuntime.jsx(Y.Provider,{value:r,children:e})}function W({validationRules:e,label:r}){let{formControl:o,getData:a}=y(),m=[];return e&&(typeof e=="string"?ee(e,true,r,o,a,{}).forEach(n=>m.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:c}=m.find(t=>t.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let t=e[n],d="";if(n==="email"&&!t)return;["match","diff"].includes(n)&&typeof t=="object"&&(t=e[n].dataField,d=e[n].label),t!=null&&ee(n,t,r,o,a,c,d).forEach(l=>m.push(l));}else if(typeof e[n]=="object"){let t=e[n];m.push({validate:{...c,[n]:d=>t.validation(d)||t.message&&(typeof t.message=="string"?t.message:t.message(r))}});}})),Object.assign({},...m)}var ee=(e,r,o,a,m,n,c)=>{let f=[],{validationMessage:t}=_(),{required:d,minLength:l,maxLength:i,min:p,max:h,email:x,match:b,diff:g,pattern:u}=t||{},F={required:{value:!!r,message:d?d(o):`${o} is required`},minLength:{value:r,message:l?l(o,r):`${o} must be at least ${r} characters long`},maxLength:{value:r,message:i?i(o,r):`${o} cannot be more than ${r} characters long`},min:{value:Number(r),message:p?p(o,r):`${o} should be at least ${r}`},max:{value:Number(r),message:h?h(o,r):`${o} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${o} ${r.message}`:true,email:(s="")=>s?s.match(/^(([^<>()[\]\\.,;:\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,}))$/)||(x?x(o):`${o} must be type email`):true,match:(s="")=>s?s===(m&&m(r))||(b?b(o,c||reactCore.labelFormatter.changeAll(r)):`${o} must be same with ${c||reactCore.labelFormatter.changeAll(r)}`):true,diff:(s="")=>s?s!==(m&&m(r))||(g?g(o,c||reactCore.labelFormatter.changeAll(r)):`${o} must be different with ${c||reactCore.labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(u?.alphabet?u?.alphabet(o):`${o} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(u?.alphanumber?u?.alphanumber(o):`${o} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(u?.number?u?.number(o):`${o} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(u?.lowercase?u?.lowercase(o):`${o} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(u?.url?u?.url(o):`${o} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(u?.uppercase?u?.uppercase(o):`${o} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(u?.mixedcase?u?.mixedcase(o):`${o} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(u?.specialcharacters?u?.specialcharacters(o):`${o} must contain special characters`)}}[e];if(F){let{validate:s}=f.find(U=>U.validate)||{};typeof F=="function"?f.push({validate:{...s,...n,[e]:F}}):e==="pattern"?f.push({validate:{...s,...n,[`${e}${r}`]:F[r]}}):f.push({[e]:F});}return f};var at=e=>{let r=H.useMemo(()=>reactCore.generateUUID(),[]),{registerItem:o,unregisterItem:a,control:m,disabled:n,readOnly:c,formId:f,setSelected:t,useSelected:d}=y(),{name:l,formId:i,...p}=w(),{formId:h,name:x}=v(),b=e.label,g=e.dataField;H.useEffect(()=>(o({id:r,...e}),()=>{a(r);}),[r,e]),!e.label&&!e.noLabel&&(b=reactCore.labelFormatter.changeAll(g)),e.disabledHierarchy||(x&&f===h&&(g=`${x}${g}`),l&&f===i&&(g=`${l}${g}`));let u=false;typeof e.disabled=="boolean"?u=e.disabled:typeof p.disabled=="boolean"?u=p.disabled:u=!!n;let A=false;typeof e.readOnly=="boolean"?A=e.readOnly:typeof p.readOnly=="boolean"?A=p.readOnly:A=!!c;let F=false;typeof e.hidden=="boolean"&&(F=e.hidden);let s=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?s={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?s={email:true,required:e.required}:typeof e.validationRules=="object"&&(s={...e.validationRules,required:e.required}));let U=u||A||F?{required:false}:W({...e,validationRules:s,label:b}),C=reactHookForm.useController({name:g,control:m,disabled:u,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:U}),te=C.fieldState.invalid,oe=C.fieldState.error?.message,ne=reactHookForm.useWatch({name:g,control:m,defaultValue:e.defaultValue}),se=H.useMemo(()=>reactCore.debounce(me=>t(le=>({...le,[g]:me||null}))),[t]),ie=d(g),ae=U?.required;return {...e,setSelectedField:se,label:b,dataField:g,controller:C,invalid:te,messageError:oe,selectedField:ie,value:ne,required:ae}};var Ye=(t=>(t.alphabet="alphabet",t.alphaNumber="alphanumber",t.number="number",t.lowercase="lowercase",t.url="url",t.uppercase="uppercase",t.mixedCase="mixedcase",t.specialCharacters="specialcharacters",t))(Ye||{});var ut=E;exports.BgsFormArray=Ge;exports.BgsFormGroup=Me;exports.BgsReactFormProvider=V;exports.PatternTypeEnum=Ye;exports.default=ut;exports.useBgsController=at;exports.useBgsForm=y;exports.useBgsFormArray=v;exports.useBgsFormArrayInit=K;exports.useBgsFormGroup=w;exports.useBgsFormInit=q;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffect
|
|
1
|
+
import H,{createContext,useContext,useRef,useState,useMemo,useEffect,useCallback}from'react';import {jsx,Fragment}from'react/jsx-runtime';import {renderChildren,generateUUID,getFieldValue,mappingUndefinedtoNull,diffJson,labelFormatter,debounce,isArray,createStore}from'@bgscore/react-core';import {useForm,useWatch,useFieldArray,useController}from'react-hook-form';var O=createContext(void 0);function y(){let e=useContext(O);return e||{}}function I({children:e,controller:r,onSubmit:o}){let a=useRef([]),m=useCallback(t=>{let d=a.current.findIndex(l=>l.id===t.id);if(d>-1){let l=[...a.current];l[d]=t,a.current=[...l];}else a.current.push(t);},[a]),n=useCallback(t=>{a.current=a.current.filter(d=>d.id!==t);},[]),c=async(t,d)=>{r.setIsSubmit(true);let l=d?await r.formControl.trigger():true,i=r.getData();l&&o&&o({...i,...t},{...r});},f={...r,registerItem:m,unregisterItem:n,items:a.current,triggerSubmit:c};return jsx(O.Provider,{value:f,children:e})}var P=new WeakMap;function k(e){return P.has(e)||P.set(e,createStore({})),P.get(e)}var q=(e,r)=>{e||(e={});let o=useRef(null),[a,m]=useState(false),n=useForm({...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),c=k(n),f=useMemo(()=>generateUUID(),[]),t=i=>i?getFieldValue(mappingUndefinedtoNull(n.getValues()),i):mappingUndefinedtoNull(n.getValues()),l={...n,ref:o,reset:i=>{i?typeof i=="string"?n.resetField(i,{}):typeof i=="object"&&isArray(i,0)&&i.forEach(p=>n.resetField(p)):n.reset();},updateData:i=>{let p=t();n.reset({...p,...i});},getData:t,formControl:n,useFieldArray:i=>useFieldArray({control:n.control,name:i}),useWatch:i=>useWatch({control:n.control,name:i}),isSubmit:a,formId:f,setIsSubmit:m,useSelected:i=>c.useStore(p=>getFieldValue(p,i)),setSelected:c.setState};return [l,l]};var Ce=({onSubmit:e,onChange:r,onInvalid:o,formData:a,controller:m,children:n,...c})=>{let f=m??q(),[t]=Array.isArray(f)?f:[f],d=useRef(void 0),l=async i=>{i.preventDefault(),i.stopPropagation(),t.setIsSubmit(true);let p=await t.formControl.trigger(),h=t.getData();p?e&&e({...h},{...t}):o&&o(t.formControl.formState.errors);};return useEffect(()=>{a&&diffJson(d.current||{},a)&&(t.formControl.reset(a),d.current=a);},[a,t.formControl.reset]),useEffect(()=>{if(!r)return;let i=t.formControl.watch(r);return ()=>i.unsubscribe()},[]),jsx(Fragment,{children:jsx(I,{controller:{...t,disabled:c?.disabled,readOnly:c?.readOnly},onSubmit:e,children:jsx("form",{...c,id:t.formId,ref:t.ref,onSubmit:l,children:n})})})},E=Ce;var D=createContext(void 0);function v(){let e=useContext(D);return e||{}}function $({children:e,...r}){return jsx(D.Provider,{value:r,children:e})}var K=e=>{let r=y(),o=useFieldArray({control:r.control,name:e}),m={formArrayId:useMemo(()=>generateUUID(),[]),...o,...r};return [m,m]};var Z=({name:e,defaultData:r,controller:o,children:a})=>{let m=o??K(e),[n]=Array.isArray(m)?m:[m];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((c,f)=>{let t=`${e}.${f}.`,d={...n,index:f,fieldId:c.id,name:t,countFields:n.fields.length,removeItem:()=>n.remove(f),watchItem:l=>n.watch(l?`${t}${l}`:t.slice(0,-1)),setValueItem:(l,i)=>n.setValue(`${t}${l}`,i),useSelectedItem:l=>n.useSelected(`${t}${l}`)};return jsx(H.Fragment,{children:jsx($,{...d,children:renderChildren(a,d)})},c.id)})})};Z.displayName="BgsFormArray";var Ge=Z;H.memo(({children:e,props:r})=>jsx(Fragment,{children:renderChildren(e,r)}));var J=createContext(void 0);function w(){let e=useContext(J);return e||{}}function B({children:e,...r}){return jsx(J.Provider,{value:r,children:e})}var X=({children:e,...r})=>{let o=y(),a=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(B,{...o,...r,formGroupId:a,children:e})})};X.displayName="BgsFormGroup";var Me=X;var Y=createContext(void 0);function _(){let e=useContext(Y);return e||{}}function V({children:e,...r}){return jsx(Y.Provider,{value:r,children:e})}function W({validationRules:e,label:r}){let{formControl:o,getData:a}=y(),m=[];return e&&(typeof e=="string"?ee(e,true,r,o,a,{}).forEach(n=>m.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:c}=m.find(t=>t.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let t=e[n],d="";if(n==="email"&&!t)return;["match","diff"].includes(n)&&typeof t=="object"&&(t=e[n].dataField,d=e[n].label),t!=null&&ee(n,t,r,o,a,c,d).forEach(l=>m.push(l));}else if(typeof e[n]=="object"){let t=e[n];m.push({validate:{...c,[n]:d=>t.validation(d)||t.message&&(typeof t.message=="string"?t.message:t.message(r))}});}})),Object.assign({},...m)}var ee=(e,r,o,a,m,n,c)=>{let f=[],{validationMessage:t}=_(),{required:d,minLength:l,maxLength:i,min:p,max:h,email:x,match:b,diff:g,pattern:u}=t||{},F={required:{value:!!r,message:d?d(o):`${o} is required`},minLength:{value:r,message:l?l(o,r):`${o} must be at least ${r} characters long`},maxLength:{value:r,message:i?i(o,r):`${o} cannot be more than ${r} characters long`},min:{value:Number(r),message:p?p(o,r):`${o} should be at least ${r}`},max:{value:Number(r),message:h?h(o,r):`${o} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${o} ${r.message}`:true,email:(s="")=>s?s.match(/^(([^<>()[\]\\.,;:\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,}))$/)||(x?x(o):`${o} must be type email`):true,match:(s="")=>s?s===(m&&m(r))||(b?b(o,c||labelFormatter.changeAll(r)):`${o} must be same with ${c||labelFormatter.changeAll(r)}`):true,diff:(s="")=>s?s!==(m&&m(r))||(g?g(o,c||labelFormatter.changeAll(r)):`${o} must be different with ${c||labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(u?.alphabet?u?.alphabet(o):`${o} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(u?.alphanumber?u?.alphanumber(o):`${o} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(u?.number?u?.number(o):`${o} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(u?.lowercase?u?.lowercase(o):`${o} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(u?.url?u?.url(o):`${o} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(u?.uppercase?u?.uppercase(o):`${o} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(u?.mixedcase?u?.mixedcase(o):`${o} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(u?.specialcharacters?u?.specialcharacters(o):`${o} must contain special characters`)}}[e];if(F){let{validate:s}=f.find(U=>U.validate)||{};typeof F=="function"?f.push({validate:{...s,...n,[e]:F}}):e==="pattern"?f.push({validate:{...s,...n,[`${e}${r}`]:F[r]}}):f.push({[e]:F});}return f};var at=e=>{let r=useMemo(()=>generateUUID(),[]),{registerItem:o,unregisterItem:a,control:m,disabled:n,readOnly:c,formId:f,setSelected:t,useSelected:d}=y(),{name:l,formId:i,...p}=w(),{formId:h,name:x}=v(),b=e.label,g=e.dataField;useEffect(()=>(o({id:r,...e}),()=>{a(r);}),[r,e]),!e.label&&!e.noLabel&&(b=labelFormatter.changeAll(g)),e.disabledHierarchy||(x&&f===h&&(g=`${x}${g}`),l&&f===i&&(g=`${l}${g}`));let u=false;typeof e.disabled=="boolean"?u=e.disabled:typeof p.disabled=="boolean"?u=p.disabled:u=!!n;let A=false;typeof e.readOnly=="boolean"?A=e.readOnly:typeof p.readOnly=="boolean"?A=p.readOnly:A=!!c;let F=false;typeof e.hidden=="boolean"&&(F=e.hidden);let s=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?s={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?s={email:true,required:e.required}:typeof e.validationRules=="object"&&(s={...e.validationRules,required:e.required}));let U=u||A||F?{required:false}:W({...e,validationRules:s,label:b}),C=useController({name:g,control:m,disabled:u,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:U}),te=C.fieldState.invalid,oe=C.fieldState.error?.message,ne=useWatch({name:g,control:m,defaultValue:e.defaultValue}),se=useMemo(()=>debounce(me=>t(le=>({...le,[g]:me||null}))),[t]),ie=d(g),ae=U?.required;return {...e,setSelectedField:se,label:b,dataField:g,controller:C,invalid:te,messageError:oe,selectedField:ie,value:ne,required:ae}};var Ye=(t=>(t.alphabet="alphabet",t.alphaNumber="alphanumber",t.number="number",t.lowercase="lowercase",t.url="url",t.uppercase="uppercase",t.mixedCase="mixedcase",t.specialCharacters="specialcharacters",t))(Ye||{});var ut=E;export{Ge as BgsFormArray,Me as BgsFormGroup,V as BgsReactFormProvider,Ye as PatternTypeEnum,ut as default,at as useBgsController,y as useBgsForm,v as useBgsFormArray,K as useBgsFormArrayInit,w as useBgsFormGroup,q as useBgsFormInit};
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bgscore/react-form",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
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",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
|
+
"sideEffects": false,
|
|
9
10
|
"files": [
|
|
10
11
|
"dist"
|
|
11
12
|
],
|