@bgscore/react-form 0.0.55 → 1.0.0

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 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 E=_react.createContext.call(void 0, void 0);function y(){let e=_react.useContext.call(void 0, E);return e||{}}function I({children:e,controller:r,onSubmit:t}){let i=_react.useRef.call(void 0, []),a=_react.useCallback.call(void 0, o=>{let c=i.current.findIndex(d=>d.id===o.id);if(c>-1){let d=[...i.current];d[c]=o,i.current=[...d]}else i.current.push(o)},[i]),n=_react.useCallback.call(void 0, o=>{i.current=i.current.filter(c=>c.id!==o)},[]),u=async(o,c)=>{r.setIsSubmit(!0);let d=c?await r.formControl.trigger():!0,l=r.getData();d&&t&&t({...l,...o},{...r})},m={...r,registerItem:a,unregisterItem:n,items:i.current,triggerSubmit:u};return _jsxruntime.jsx.call(void 0, E.Provider,{value:m,children:e})}function x(){let e=()=>Math.random()*16%16|0;return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,r=>(r==="x"?e():e()&3|8).toString(16))}function $(e,r){return typeof e=="function"?e(r):e}var rr=_react2.default.memo(e=>{let{children:r,props:t}=e;return typeof r=="function"?r(t):r}),F={camelCase:(e="")=>(e=e.split(".").map(r=>(r=r.charAt(0).toUpperCase()+r.slice(1),r)).join(" "),e=e.replace(/([a-z0-9])([A-Z])/g,"$1 $2"),e.charAt(0).toUpperCase()+e.slice(1)),snackCase:(e="")=>{let t=e.replace(/_([a-z])/g,(i,a)=>a.toUpperCase()).replace(/([A-Z])/g," $1");return t=t.charAt(0).toUpperCase()+t.slice(1),t},changeAll:(e="",r=!1)=>{let t="";try{e=_optionalChain([e, 'optionalAccess', _2 => _2.split, 'call', _3 => _3("."), 'access', _4 => _4[_optionalChain([e, 'optionalAccess', _5 => _5.split, 'call', _6 => _6("."), 'optionalAccess', _7 => _7.length])-1]]),e=_optionalChain([e, 'optionalAccess', _8 => _8.split, 'call', _9 => _9("[]"), 'access', _10 => _10[_optionalChain([e, 'optionalAccess', _11 => _11.split, 'call', _12 => _12("[]"), 'optionalAccess', _13 => _13.length])-1]]),t=F.snackCase(F.camelCase(e)),r&&(t=_optionalChain([t, 'optionalAccess', _14 => _14.split, 'call', _15 => _15(" "), 'optionalAccess', _16 => _16.map, 'call', _17 => _17(i=>_optionalChain([i, 'optionalAccess', _18 => _18.length])<=3?_optionalChain([i, 'optionalAccess', _19 => _19.toUpperCase, 'call', _20 => _20()]):i), 'optionalAccess', _21 => _21.join, 'call', _22 => _22(" ")]))}catch (e2){}return t}};function K(e,r){try{return JSON.stringify(e)!==JSON.stringify(r)}catch (e3){return!1}}var v=e=>(Object.keys(e).forEach(r=>{e[r]===void 0&&(e[r]=null)}),e),R= exports.getFieldValue =(e,r,t="")=>{if(!e)return t;if(e.hasOwnProperty(r))return e[r];let i=r.replace(/\[(\d+)\]/g,".$1").split("."),a=e;for(let n of i){if(a==null)return t;a=a[n]}return a===void 0?t:a};function D(e,r){let t=!1;return e&&typeof e=="object"&&Array.isArray(e)&&(typeof r=="number"?e.length>r&&(t=!0):t=!0),t}function M(e,r=0){let t;return function(...i){clearTimeout(t),t=setTimeout(()=>{e(...i)},r*1e3)}}var _reacthookform = require('react-hook-form');function q(e){let r=e,t=new Set;function i(){return r}function a(m){return t.add(m),()=>t.delete(m)}function n(m){typeof m=="function"?r=m(r):r=m,t.forEach(o=>o())}function u(m){return _react.useSyncExternalStore.call(void 0, a,()=>m?m(r):r,()=>m?m(r):r)}return{getSnapshot:i,subscribe:a,setState:n,useStore:u}}var w=new WeakMap;function z(e){return w.has(e)||w.set(e,q({})),w.get(e)}var H=(e,r)=>{e||(e={});let t=_react.useRef.call(void 0, null),[i,a]=_react.useState.call(void 0, !1),n=_reacthookform.useForm.call(void 0, {...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),u=z(n),m=_react.useMemo.call(void 0, ()=>x(),[]),o=l=>l?R(v(n.getValues()),l):v(n.getValues()),d={...n,ref:t,reset:l=>{l?typeof l=="string"?n.resetField(l,{}):typeof l=="object"&&D(l,0)&&l.forEach(p=>n.resetField(p)):n.reset()},updateData:l=>{let p=o();n.reset({...p,...l})},getData:o,formControl:n,useFieldArray:l=>_reacthookform.useFieldArray.call(void 0, {control:n.control,name:l}),useWatch:l=>_reacthookform.useWatch.call(void 0, {control:n.control,name:l}),isSubmit:i,formId:m,setIsSubmit:a,useSelected:l=>u.useStore(p=>R(p,l)),setSelected:u.setState};return[d,d]};var Ie=({onSubmit:e,onChange:r,onInvalid:t,formData:i,controller:a,children:n,...u})=>{let m=_nullishCoalesce(a, () => (H())),[o]=Array.isArray(m)?m:[m],c=_react.useRef.call(void 0, void 0),d=async l=>{l.preventDefault(),l.stopPropagation(),o.setIsSubmit(!0);let p=await o.formControl.trigger(),b=o.getData();p?e&&e({...b},{...o}):t&&t(o.formControl.formState.errors)};return _react.useEffect.call(void 0, ()=>{i&&K(c.current||{},i)&&(o.formControl.reset(i),c.current=i)},[i,o.formControl.reset]),_react.useEffect.call(void 0, ()=>{if(!r)return;let l=o.formControl.watch(r);return()=>l.unsubscribe()},[]),_jsxruntime.jsx.call(void 0, _jsxruntime.Fragment,{children:_jsxruntime.jsx.call(void 0, I,{controller:{...o,disabled:_optionalChain([u, 'optionalAccess', _23 => _23.disabled]),readOnly:_optionalChain([u, 'optionalAccess', _24 => _24.readOnly])},onSubmit:e,children:_jsxruntime.jsx.call(void 0, "form",{...u,id:o.formId,ref:o.ref,onSubmit:d,children:n})})})},j=Ie;var J=_react.createContext.call(void 0, void 0);function O(){let e=_react.useContext.call(void 0, J);return e||{}}function W({children:e,...r}){return _jsxruntime.jsx.call(void 0, J.Provider,{value:r,children:e})}var _=e=>{let r=y(),t=_reacthookform.useFieldArray.call(void 0, {control:r.control,name:e}),a={formArrayId:_react.useMemo.call(void 0, ()=>x(),[]),...t,...r};return[a,a]};var X=({name:e,defaultData:r,controller:t,children:i})=>{let a=_nullishCoalesce(t, () => (_(e))),[n]=Array.isArray(a)?a:[a];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((u,m)=>{let o=`${e}.${m}.`,c={...n,index:m,fieldId:u.id,name:o,countFields:n.fields.length,removeItem:()=>n.remove(m),watchItem:d=>n.watch(d?`${o}${d}`:o.slice(0,-1)),setValueItem:(d,l)=>n.setValue(`${o}${d}`,l),useSelectedItem:d=>n.useSelected(`${o}${d}`)};return _jsxruntime.jsx.call(void 0, _react2.default.Fragment,{children:_jsxruntime.jsx.call(void 0, W,{...c,children:$(i,c)})},u.id)})})};X.displayName="BgsFormArray";var Ge=X,kr=_react2.default.memo(({children:e,props:r})=>_jsxruntime.jsx.call(void 0, _jsxruntime.Fragment,{children:$(e,r)}));var V=_react.createContext.call(void 0, void 0);function k(){let e=_react.useContext.call(void 0, V);return e||{}}function G({children:e,...r}){return _jsxruntime.jsx.call(void 0, V.Provider,{value:r,children:e})}var re=({children:e,...r})=>{let t=y(),i=_react.useMemo.call(void 0, ()=>x(),[]);return _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment,{children:_jsxruntime.jsx.call(void 0, G,{...t,...r,formGroupId:i,children:e})})};re.displayName="BgsFormGroup";var De=re;var te=_react.createContext.call(void 0, void 0);function oe(){let e=_react.useContext.call(void 0, te);return e||{}}function ne({children:e,...r}){return _jsxruntime.jsx.call(void 0, te.Provider,{value:r,children:e})}function N({validationRules:e,label:r}){let{formControl:t,getData:i}=y(),a=[];return e&&(typeof e=="string"?se(e,!0,r,t,i,{}).forEach(n=>a.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:u}=a.find(o=>o.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let o=e[n],c="";if(n==="email"&&!o)return;["match","diff"].includes(n)&&typeof o=="object"&&(o=e[n].dataField,c=e[n].label),o!=null&&se(n,o,r,t,i,u,c).forEach(d=>a.push(d))}else if(typeof e[n]=="object"){let o=e[n];a.push({validate:{...u,[n]:c=>o.validation(c)||o.message&&(typeof o.message=="string"?o.message:o.message(r))}})}})),Object.assign({},...a)}var se=(e,r,t,i,a,n,u)=>{let m=[],{validationMessage:o}=oe(),{required:c,minLength:d,maxLength:l,min:p,max:b,email:A,match:T,diff:g,pattern:f}=o||{},h={required:{value:!!r,message:c?c(t):`${t} is required`},minLength:{value:r,message:d?d(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:l?l(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:p?p(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:b?b(t,r):`${t} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${t} ${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,}))$/)||(A?A(t):`${t} must be type email`):!0,match:(s="")=>s?s===(a&&a(r))||(T?T(t,u||F.changeAll(r)):`${t} must be same with ${u||F.changeAll(r)}`):!0,diff:(s="")=>s?s!==(a&&a(r))||(g?g(t,u||F.changeAll(r)):`${t} must be different with ${u||F.changeAll(r)}`):!0,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(_optionalChain([f, 'optionalAccess', _25 => _25.alphabet])?_optionalChain([f, 'optionalAccess', _26 => _26.alphabet, 'call', _27 => _27(t)]):`${t} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(_optionalChain([f, 'optionalAccess', _28 => _28.alphanumber])?_optionalChain([f, 'optionalAccess', _29 => _29.alphanumber, 'call', _30 => _30(t)]):`${t} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(_optionalChain([f, 'optionalAccess', _31 => _31.number])?_optionalChain([f, 'optionalAccess', _32 => _32.number, 'call', _33 => _33(t)]):`${t} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(_optionalChain([f, 'optionalAccess', _34 => _34.lowercase])?_optionalChain([f, 'optionalAccess', _35 => _35.lowercase, 'call', _36 => _36(t)]):`${t} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(_optionalChain([f, 'optionalAccess', _37 => _37.url])?_optionalChain([f, 'optionalAccess', _38 => _38.url, 'call', _39 => _39(t)]):`${t} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(_optionalChain([f, 'optionalAccess', _40 => _40.uppercase])?_optionalChain([f, 'optionalAccess', _41 => _41.uppercase, 'call', _42 => _42(t)]):`${t} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(_optionalChain([f, 'optionalAccess', _43 => _43.mixedcase])?_optionalChain([f, 'optionalAccess', _44 => _44.mixedcase, 'call', _45 => _45(t)]):`${t} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(_optionalChain([f, 'optionalAccess', _46 => _46.specialcharacters])?_optionalChain([f, 'optionalAccess', _47 => _47.specialcharacters, 'call', _48 => _48(t)]):`${t} must contain special characters`)}}[e];if(h){let{validate:s}=m.find(C=>C.validate)||{};typeof h=="function"?m.push({validate:{...s,...n,[e]:h}}):e==="pattern"?m.push({validate:{...s,...n,[`${e}${r}`]:h[r]}}):m.push({[e]:h})}return m};var dt=e=>{let r=_react.useMemo.call(void 0, ()=>x(),[]),{registerItem:t,unregisterItem:i,control:a,disabled:n,readOnly:u,formId:m,setSelected:o,useSelected:c}=y(),{name:d,formId:l,...p}=k(),{formId:b,name:A}=O(),T=e.label,g=e.dataField;_react.useEffect.call(void 0, ()=>(t({id:r,...e}),()=>{i(r)}),[r,e]),!e.label&&!e.noLabel&&(T=F.changeAll(g)),e.disabledHierarchy||(A&&m===b&&(g=`${A}${g}`),d&&m===l&&(g=`${d}${g}`));let f=!1;typeof e.disabled=="boolean"?f=e.disabled:typeof p.disabled=="boolean"?f=p.disabled:f=!!n;let U=!1;typeof e.readOnly=="boolean"?U=e.readOnly:typeof p.readOnly=="boolean"?U=p.readOnly:U=!!u;let h=!1;typeof e.hidden=="boolean"&&(h=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 C=f||U||h?{required:!1}:N({...e,validationRules:s,label:T,dataField:g}),P=_reacthookform.useController.call(void 0, {name:g,control:a,disabled:f,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:C}),ae=P.fieldState.invalid,me=_optionalChain([P, 'access', _49 => _49.fieldState, 'access', _50 => _50.error, 'optionalAccess', _51 => _51.message]),le=_reacthookform.useWatch.call(void 0, {name:g,control:a,defaultValue:e.defaultValue}),de=_react.useMemo.call(void 0, ()=>M(fe=>o(pe=>({...pe,[g]:fe||null}))),[o]),ue=c(g),ce=_optionalChain([C, 'optionalAccess', _52 => _52.required]);return{...e,setSelectedField:de,label:T,dataField:g,controller:P,invalid:ae,messageError:me,selectedField:ue,value:le,required:ce}};var _e=(o=>(o.alphabet="alphabet",o.alphaNumber="alphanumber",o.number="number",o.lowercase="lowercase",o.url="url",o.uppercase="uppercase",o.mixedCase="mixedcase",o.specialCharacters="specialcharacters",o))(_e||{});var pt=j;exports.BgsFormArray = Ge; exports.BgsFormGroup = De; exports.BgsReactFormProvider = ne; exports.PatternTypeEnum = _e; exports.createStore = q; exports.default = pt; exports.getFieldValue = R; exports.useBgsController = dt; exports.useBgsForm = y; exports.useBgsFormArray = O; exports.useBgsFormArrayInit = _; exports.useBgsFormGroup = k; exports.useBgsFormInit = H;
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;
package/dist/index.d.cts CHANGED
@@ -20,7 +20,6 @@ interface Controller {
20
20
  type NestedKeyOf<T> = T extends object ? T extends Array<infer U> ? `${number}` | `${number}.${NestedKeyOf<U>}` : {
21
21
  [K in keyof T]: T[K] extends Array<infer U> ? `${K & string}` | `${K & string}[${number}]` | `${K & string}[${number}].${NestedKeyOf<U>}` : T[K] extends object ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : `${K & string}`;
22
22
  }[keyof T] : never;
23
- type PathValue<T, P extends string> = P extends `${infer K}[${infer I}].${infer R}` ? K extends keyof T ? T[K] extends Array<infer U> ? PathValue<U, R> : never : never : P extends `${infer K}[${infer I}]` ? K extends keyof T ? T[K] extends Array<infer U> ? U : never : never : P extends `${infer K}.${infer R}` ? K extends keyof T ? PathValue<T[K], R> : never : P extends keyof T ? T[P] : never;
24
23
 
25
24
  type OnSubmit<T = any> = (values: T, options: UseFormInitReturn<T>) => void;
26
25
  type TriggerSubmit<T = unknown> = (addValues?: T, validate?: boolean) => void;
@@ -205,17 +204,4 @@ declare const useBgsFormArrayInit: <T = unknown>(name: string) => UseFormArrayIn
205
204
 
206
205
  declare const useBgsController: (props: ControllerProps) => UseController;
207
206
 
208
- declare const getFieldValue: <T, P extends NestedKeyOf<T>, D = undefined>(obj: T, path: P, defaultValue?: D) => PathValue<T, P> | D;
209
-
210
- type Listener = () => void;
211
- declare function createStore<T>(initialState: T): {
212
- getSnapshot: () => T;
213
- subscribe: (listener: Listener) => () => boolean;
214
- setState: (newState: T | ((prev: T) => T)) => void;
215
- useStore: {
216
- (): T;
217
- <K>(selector: (state: T) => K): K;
218
- };
219
- };
220
-
221
- export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnSubmit, type PatternType, PatternTypeEnum, type SelectedNested, type TriggerSubmit, type UseBgsForm, type UseController, type UseFormArray, type UseFormArrayInitReturn, type UseFormInitReturn, type UseSelected, type ValidationCallback, type ValidationOptions, type ValidationRules, createStore, BgsForm as default, getFieldValue, useBgsController, useForm as useBgsForm, useFormArray as useBgsFormArray, useBgsFormArrayInit, useFormGroup as useBgsFormGroup, useBgsFormInit };
207
+ export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnSubmit, type PatternType, PatternTypeEnum, 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 };
package/dist/index.d.ts CHANGED
@@ -20,7 +20,6 @@ interface Controller {
20
20
  type NestedKeyOf<T> = T extends object ? T extends Array<infer U> ? `${number}` | `${number}.${NestedKeyOf<U>}` : {
21
21
  [K in keyof T]: T[K] extends Array<infer U> ? `${K & string}` | `${K & string}[${number}]` | `${K & string}[${number}].${NestedKeyOf<U>}` : T[K] extends object ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : `${K & string}`;
22
22
  }[keyof T] : never;
23
- type PathValue<T, P extends string> = P extends `${infer K}[${infer I}].${infer R}` ? K extends keyof T ? T[K] extends Array<infer U> ? PathValue<U, R> : never : never : P extends `${infer K}[${infer I}]` ? K extends keyof T ? T[K] extends Array<infer U> ? U : never : never : P extends `${infer K}.${infer R}` ? K extends keyof T ? PathValue<T[K], R> : never : P extends keyof T ? T[P] : never;
24
23
 
25
24
  type OnSubmit<T = any> = (values: T, options: UseFormInitReturn<T>) => void;
26
25
  type TriggerSubmit<T = unknown> = (addValues?: T, validate?: boolean) => void;
@@ -205,17 +204,4 @@ declare const useBgsFormArrayInit: <T = unknown>(name: string) => UseFormArrayIn
205
204
 
206
205
  declare const useBgsController: (props: ControllerProps) => UseController;
207
206
 
208
- declare const getFieldValue: <T, P extends NestedKeyOf<T>, D = undefined>(obj: T, path: P, defaultValue?: D) => PathValue<T, P> | D;
209
-
210
- type Listener = () => void;
211
- declare function createStore<T>(initialState: T): {
212
- getSnapshot: () => T;
213
- subscribe: (listener: Listener) => () => boolean;
214
- setState: (newState: T | ((prev: T) => T)) => void;
215
- useStore: {
216
- (): T;
217
- <K>(selector: (state: T) => K): K;
218
- };
219
- };
220
-
221
- export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnSubmit, type PatternType, PatternTypeEnum, type SelectedNested, type TriggerSubmit, type UseBgsForm, type UseController, type UseFormArray, type UseFormArrayInitReturn, type UseFormInitReturn, type UseSelected, type ValidationCallback, type ValidationOptions, type ValidationRules, createStore, BgsForm as default, getFieldValue, useBgsController, useForm as useBgsForm, useFormArray as useBgsFormArray, useBgsFormArrayInit, useFormGroup as useBgsFormGroup, useBgsFormInit };
207
+ export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnSubmit, type PatternType, PatternTypeEnum, 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 };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{useEffect as Z,useRef as Pe}from"react";import{createContext as ge,useCallback as L,useContext as ye,useRef as Fe}from"react";import{jsx as he}from"react/jsx-runtime";var E=ge(void 0);function y(){let e=ye(E);return e||{}}function I({children:e,controller:r,onSubmit:t}){let i=Fe([]),a=L(o=>{let c=i.current.findIndex(d=>d.id===o.id);if(c>-1){let d=[...i.current];d[c]=o,i.current=[...d]}else i.current.push(o)},[i]),n=L(o=>{i.current=i.current.filter(c=>c.id!==o)},[]),u=async(o,c)=>{r.setIsSubmit(!0);let d=c?await r.formControl.trigger():!0,l=r.getData();d&&t&&t({...l,...o},{...r})},m={...r,registerItem:a,unregisterItem:n,items:i.current,triggerSubmit:u};return he(E.Provider,{value:m,children:e})}import xe from"react";function x(){let e=()=>Math.random()*16%16|0;return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,r=>(r==="x"?e():e()&3|8).toString(16))}function $(e,r){return typeof e=="function"?e(r):e}var rr=xe.memo(e=>{let{children:r,props:t}=e;return typeof r=="function"?r(t):r}),F={camelCase:(e="")=>(e=e.split(".").map(r=>(r=r.charAt(0).toUpperCase()+r.slice(1),r)).join(" "),e=e.replace(/([a-z0-9])([A-Z])/g,"$1 $2"),e.charAt(0).toUpperCase()+e.slice(1)),snackCase:(e="")=>{let t=e.replace(/_([a-z])/g,(i,a)=>a.toUpperCase()).replace(/([A-Z])/g," $1");return t=t.charAt(0).toUpperCase()+t.slice(1),t},changeAll:(e="",r=!1)=>{let t="";try{e=e?.split(".")[e?.split(".")?.length-1],e=e?.split("[]")[e?.split("[]")?.length-1],t=F.snackCase(F.camelCase(e)),r&&(t=t?.split(" ")?.map(i=>i?.length<=3?i?.toUpperCase():i)?.join(" "))}catch{}return t}};function K(e,r){try{return JSON.stringify(e)!==JSON.stringify(r)}catch{return!1}}var v=e=>(Object.keys(e).forEach(r=>{e[r]===void 0&&(e[r]=null)}),e),R=(e,r,t="")=>{if(!e)return t;if(e.hasOwnProperty(r))return e[r];let i=r.replace(/\[(\d+)\]/g,".$1").split("."),a=e;for(let n of i){if(a==null)return t;a=a[n]}return a===void 0?t:a};function D(e,r){let t=!1;return e&&typeof e=="object"&&Array.isArray(e)&&(typeof r=="number"?e.length>r&&(t=!0):t=!0),t}function M(e,r=0){let t;return function(...i){clearTimeout(t),t=setTimeout(()=>{e(...i)},r*1e3)}}import{useFieldArray as Te,useForm as Ae,useWatch as Ue}from"react-hook-form";import{useMemo as Ce,useRef as Re,useState as Se}from"react";import{useSyncExternalStore as be}from"react";function q(e){let r=e,t=new Set;function i(){return r}function a(m){return t.add(m),()=>t.delete(m)}function n(m){typeof m=="function"?r=m(r):r=m,t.forEach(o=>o())}function u(m){return be(a,()=>m?m(r):r,()=>m?m(r):r)}return{getSnapshot:i,subscribe:a,setState:n,useStore:u}}var w=new WeakMap;function z(e){return w.has(e)||w.set(e,q({})),w.get(e)}var H=(e,r)=>{e||(e={});let t=Re(null),[i,a]=Se(!1),n=Ae({...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),u=z(n),m=Ce(()=>x(),[]),o=l=>l?R(v(n.getValues()),l):v(n.getValues()),d={...n,ref:t,reset:l=>{l?typeof l=="string"?n.resetField(l,{}):typeof l=="object"&&D(l,0)&&l.forEach(p=>n.resetField(p)):n.reset()},updateData:l=>{let p=o();n.reset({...p,...l})},getData:o,formControl:n,useFieldArray:l=>Te({control:n.control,name:l}),useWatch:l=>Ue({control:n.control,name:l}),isSubmit:i,formId:m,setIsSubmit:a,useSelected:l=>u.useStore(p=>R(p,l)),setSelected:u.setState};return[d,d]};import{Fragment as $e,jsx as B}from"react/jsx-runtime";var Ie=({onSubmit:e,onChange:r,onInvalid:t,formData:i,controller:a,children:n,...u})=>{let m=a??H(),[o]=Array.isArray(m)?m:[m],c=Pe(void 0),d=async l=>{l.preventDefault(),l.stopPropagation(),o.setIsSubmit(!0);let p=await o.formControl.trigger(),b=o.getData();p?e&&e({...b},{...o}):t&&t(o.formControl.formState.errors)};return Z(()=>{i&&K(c.current||{},i)&&(o.formControl.reset(i),c.current=i)},[i,o.formControl.reset]),Z(()=>{if(!r)return;let l=o.formControl.watch(r);return()=>l.unsubscribe()},[]),B($e,{children:B(I,{controller:{...o,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,children:B("form",{...u,id:o.formId,ref:o.ref,onSubmit:d,children:n})})})},j=Ie;import Q,{useEffect as ke}from"react";import{createContext as ve,useContext as we}from"react";import{jsx as Be}from"react/jsx-runtime";var J=ve(void 0);function O(){let e=we(J);return e||{}}function W({children:e,...r}){return Be(J.Provider,{value:r,children:e})}import{useFieldArray as Oe}from"react-hook-form";import{useMemo as We}from"react";var _=e=>{let r=y(),t=Oe({control:r.control,name:e}),a={formArrayId:We(()=>x(),[]),...t,...r};return[a,a]};import{Fragment as Y,jsx as S}from"react/jsx-runtime";var X=({name:e,defaultData:r,controller:t,children:i})=>{let a=t??_(e),[n]=Array.isArray(a)?a:[a];return ke(()=>{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)},[]),S(Y,{children:n.fields.map((u,m)=>{let o=`${e}.${m}.`,c={...n,index:m,fieldId:u.id,name:o,countFields:n.fields.length,removeItem:()=>n.remove(m),watchItem:d=>n.watch(d?`${o}${d}`:o.slice(0,-1)),setValueItem:(d,l)=>n.setValue(`${o}${d}`,l),useSelectedItem:d=>n.useSelected(`${o}${d}`)};return S(Q.Fragment,{children:S(W,{...c,children:$(i,c)})},u.id)})})};X.displayName="BgsFormArray";var Ge=X,kr=Q.memo(({children:e,props:r})=>S(Y,{children:$(e,r)}));import{useMemo as Ke}from"react";import{createContext as Ne,useContext as Le}from"react";import{jsx as Ee}from"react/jsx-runtime";var V=Ne(void 0);function k(){let e=Le(V);return e||{}}function G({children:e,...r}){return Ee(V.Provider,{value:r,children:e})}import{Fragment as Me,jsx as ee}from"react/jsx-runtime";var re=({children:e,...r})=>{let t=y(),i=Ke(()=>x(),[]);return ee(Me,{children:ee(G,{...t,...r,formGroupId:i,children:e})})};re.displayName="BgsFormGroup";var De=re;import{createContext as qe,useContext as ze}from"react";import{jsx as He}from"react/jsx-runtime";var te=qe(void 0);function oe(){let e=ze(te);return e||{}}function ne({children:e,...r}){return He(te.Provider,{value:r,children:e})}import{useEffect as Ze,useMemo as ie}from"react";import{useController as je,useWatch as Je}from"react-hook-form";function N({validationRules:e,label:r}){let{formControl:t,getData:i}=y(),a=[];return e&&(typeof e=="string"?se(e,!0,r,t,i,{}).forEach(n=>a.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:u}=a.find(o=>o.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let o=e[n],c="";if(n==="email"&&!o)return;["match","diff"].includes(n)&&typeof o=="object"&&(o=e[n].dataField,c=e[n].label),o!=null&&se(n,o,r,t,i,u,c).forEach(d=>a.push(d))}else if(typeof e[n]=="object"){let o=e[n];a.push({validate:{...u,[n]:c=>o.validation(c)||o.message&&(typeof o.message=="string"?o.message:o.message(r))}})}})),Object.assign({},...a)}var se=(e,r,t,i,a,n,u)=>{let m=[],{validationMessage:o}=oe(),{required:c,minLength:d,maxLength:l,min:p,max:b,email:A,match:T,diff:g,pattern:f}=o||{},h={required:{value:!!r,message:c?c(t):`${t} is required`},minLength:{value:r,message:d?d(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:l?l(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:p?p(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:b?b(t,r):`${t} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${t} ${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,}))$/)||(A?A(t):`${t} must be type email`):!0,match:(s="")=>s?s===(a&&a(r))||(T?T(t,u||F.changeAll(r)):`${t} must be same with ${u||F.changeAll(r)}`):!0,diff:(s="")=>s?s!==(a&&a(r))||(g?g(t,u||F.changeAll(r)):`${t} must be different with ${u||F.changeAll(r)}`):!0,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(f?.alphabet?f?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(f?.alphanumber?f?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(f?.number?f?.number(t):`${t} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(f?.lowercase?f?.lowercase(t):`${t} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(f?.url?f?.url(t):`${t} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(f?.uppercase?f?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(f?.mixedcase?f?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(f?.specialcharacters?f?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(h){let{validate:s}=m.find(C=>C.validate)||{};typeof h=="function"?m.push({validate:{...s,...n,[e]:h}}):e==="pattern"?m.push({validate:{...s,...n,[`${e}${r}`]:h[r]}}):m.push({[e]:h})}return m};var dt=e=>{let r=ie(()=>x(),[]),{registerItem:t,unregisterItem:i,control:a,disabled:n,readOnly:u,formId:m,setSelected:o,useSelected:c}=y(),{name:d,formId:l,...p}=k(),{formId:b,name:A}=O(),T=e.label,g=e.dataField;Ze(()=>(t({id:r,...e}),()=>{i(r)}),[r,e]),!e.label&&!e.noLabel&&(T=F.changeAll(g)),e.disabledHierarchy||(A&&m===b&&(g=`${A}${g}`),d&&m===l&&(g=`${d}${g}`));let f=!1;typeof e.disabled=="boolean"?f=e.disabled:typeof p.disabled=="boolean"?f=p.disabled:f=!!n;let U=!1;typeof e.readOnly=="boolean"?U=e.readOnly:typeof p.readOnly=="boolean"?U=p.readOnly:U=!!u;let h=!1;typeof e.hidden=="boolean"&&(h=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 C=f||U||h?{required:!1}:N({...e,validationRules:s,label:T,dataField:g}),P=je({name:g,control:a,disabled:f,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:C}),ae=P.fieldState.invalid,me=P.fieldState.error?.message,le=Je({name:g,control:a,defaultValue:e.defaultValue}),de=ie(()=>M(fe=>o(pe=>({...pe,[g]:fe||null}))),[o]),ue=c(g),ce=C?.required;return{...e,setSelectedField:de,label:T,dataField:g,controller:P,invalid:ae,messageError:me,selectedField:ue,value:le,required:ce}};var _e=(o=>(o.alphabet="alphabet",o.alphaNumber="alphanumber",o.number="number",o.lowercase="lowercase",o.url="url",o.uppercase="uppercase",o.mixedCase="mixedcase",o.specialCharacters="specialcharacters",o))(_e||{});var pt=j;export{Ge as BgsFormArray,De as BgsFormGroup,ne as BgsReactFormProvider,_e as PatternTypeEnum,q as createStore,pt as default,R as getFieldValue,dt as useBgsController,y as useBgsForm,O as useBgsFormArray,_ as useBgsFormArrayInit,k as useBgsFormGroup,H as useBgsFormInit};
1
+ import{useEffect as M,useRef as Te}from"react";import{createContext as de,useCallback as G,useContext as ue,useRef as ce}from"react";import{jsx as fe}from"react/jsx-runtime";var O=de(void 0);function y(){let e=ue(O);return e||{}}function I({children:e,controller:r,onSubmit:o}){let a=ce([]),m=G(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=G(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 fe(O.Provider,{value:f,children:e})}import{diffJson as Re}from"@bgscore/react-core";import{useFieldArray as ge,useForm as ye,useWatch as Fe}from"react-hook-form";import{useMemo as he,useRef as be,useState as xe}from"react";import{generateUUID as Ae,getFieldValue as N,isArray as Ue,mappingUndefinedtoNull as L}from"@bgscore/react-core";import{createStore as pe}from"@bgscore/react-core";var P=new WeakMap;function k(e){return P.has(e)||P.set(e,pe({})),P.get(e)}var q=(e,r)=>{e||(e={});let o=be(null),[a,m]=xe(!1),n=ye({...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),c=k(n),f=he(()=>Ae(),[]),t=i=>i?N(L(n.getValues()),i):L(n.getValues()),l={...n,ref:o,reset:i=>{i?typeof i=="string"?n.resetField(i,{}):typeof i=="object"&&Ue(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=>ge({control:n.control,name:i}),useWatch:i=>Fe({control:n.control,name:i}),isSubmit:a,formId:f,setIsSubmit:m,useSelected:i=>c.useStore(p=>N(p,i)),setSelected:c.setState};return[l,l]};import{Fragment as Ie,jsx as S}from"react/jsx-runtime";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=Te(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 M(()=>{a&&Re(d.current||{},a)&&(t.formControl.reset(a),d.current=a)},[a,t.formControl.reset]),M(()=>{if(!r)return;let i=t.formControl.watch(r);return()=>i.unsubscribe()},[]),S(Ie,{children:S(I,{controller:{...t,disabled:c?.disabled,readOnly:c?.readOnly},onSubmit:e,children:S("form",{...c,id:t.formId,ref:t.ref,onSubmit:l,children:n})})})},E=Ce;import H,{useEffect as We}from"react";import{renderChildren as z}from"@bgscore/react-core";import{createContext as Pe,useContext as Se}from"react";import{jsx as ve}from"react/jsx-runtime";var D=Pe(void 0);function v(){let e=Se(D);return e||{}}function $({children:e,...r}){return ve(D.Provider,{value:r,children:e})}import{useFieldArray as $e}from"react-hook-form";import{useMemo as we}from"react";import{generateUUID as Be}from"@bgscore/react-core";var K=e=>{let r=y(),o=$e({control:r.control,name:e}),m={formArrayId:we(()=>Be(),[]),...o,...r};return[m,m]};import{Fragment as j,jsx as T}from"react/jsx-runtime";var Z=({name:e,defaultData:r,controller:o,children:a})=>{let m=o??K(e),[n]=Array.isArray(m)?m:[m];return We(()=>{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)},[]),T(j,{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 T(H.Fragment,{children:T($,{...d,children:z(a,d)})},c.id)})})};Z.displayName="BgsFormArray";var Ge=Z,Br=H.memo(({children:e,props:r})=>T(j,{children:z(e,r)}));import{useMemo as Le}from"react";import{generateUUID as qe}from"@bgscore/react-core";import{createContext as Oe,useContext as ke}from"react";import{jsx as Ne}from"react/jsx-runtime";var J=Oe(void 0);function w(){let e=ke(J);return e||{}}function B({children:e,...r}){return Ne(J.Provider,{value:r,children:e})}import{Fragment as Ee,jsx as Q}from"react/jsx-runtime";var X=({children:e,...r})=>{let o=y(),a=Le(()=>qe(),[]);return Q(Ee,{children:Q(B,{...o,...r,formGroupId:a,children:e})})};X.displayName="BgsFormGroup";var Me=X;import{createContext as De,useContext as Ke}from"react";import{jsx as He}from"react/jsx-runtime";var Y=De(void 0);function _(){let e=Ke(Y);return e||{}}function V({children:e,...r}){return He(Y.Provider,{value:r,children:e})}import{useEffect as ze,useMemo as re}from"react";import{debounce as Ze,generateUUID as je,labelFormatter as Je}from"@bgscore/react-core";import{useController as Qe,useWatch as Xe}from"react-hook-form";import{labelFormatter as R}from"@bgscore/react-core";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||R.changeAll(r)):`${o} must be same with ${c||R.changeAll(r)}`):!0,diff:(s="")=>s?s!==(m&&m(r))||(g?g(o,c||R.changeAll(r)):`${o} must be different with ${c||R.changeAll(r)}`):!0,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=re(()=>je(),[]),{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;ze(()=>(o({id:r,...e}),()=>{a(r)}),[r,e]),!e.label&&!e.noLabel&&(b=Je.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=Qe({name:g,control:m,disabled:u,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:U}),te=C.fieldState.invalid,oe=C.fieldState.error?.message,ne=Xe({name:g,control:m,defaultValue:e.defaultValue}),se=re(()=>Ze(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,6 +1,6 @@
1
1
  {
2
2
  "name": "@bgscore/react-form",
3
- "version": "0.0.55",
3
+ "version": "1.0.0",
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",
@@ -27,6 +27,7 @@
27
27
  "author": "Andry Bagus Dharmawan",
28
28
  "license": "MIT",
29
29
  "peerDependencies": {
30
+ "@bgscore/react-core": ">=0.0.11",
30
31
  "react": ">=17.0.0",
31
32
  "react-dom": ">=17.0.0"
32
33
  },
@@ -39,4 +40,4 @@
39
40
  "dependencies": {
40
41
  "react-hook-form": "^7.55.0"
41
42
  }
42
- }
43
+ }