react-simple-formkit 2.0.0 → 2.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/README.md
CHANGED
|
@@ -120,9 +120,9 @@ return (
|
|
|
120
120
|
|
|
121
121
|
State updates only when observed via `watch()` or `useWatch()`, or by tracking changes through the Form component's `onChange` callback.
|
|
122
122
|
|
|
123
|
-
`watch()` will trigger a re-render at the form level.
|
|
124
|
-
`useWatch()` will trigger a re-render only in the component where it is called.
|
|
125
|
-
`onChange` is just a handler callback that is called when field values change.
|
|
123
|
+
- `watch()` will trigger a re-render at the form level.
|
|
124
|
+
- `useWatch()` will trigger a re-render only in the component where it is called.
|
|
125
|
+
- `onChange` is just a handler callback that is called when field values change.
|
|
126
126
|
|
|
127
127
|
# Manage values
|
|
128
128
|
|
|
@@ -317,6 +317,13 @@ Generic props:
|
|
|
317
317
|
- `name`: `String | Array`
|
|
318
318
|
- compute: `Function` that will calculate from form values and return a value. It will make re-render when the result changes
|
|
319
319
|
|
|
320
|
+
## useFormContext
|
|
321
|
+
|
|
322
|
+
Return:
|
|
323
|
+
|
|
324
|
+
- `watch`
|
|
325
|
+
- `actions`
|
|
326
|
+
|
|
320
327
|
# Examples
|
|
321
328
|
|
|
322
329
|
- https://codesandbox.io/p/sandbox/react-simple-formkit-examples-rhmhjj
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var Re;function pe(){if(Re)return Z;Re=1;var a=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function l(m,i,f){var C=null;if(f!==void 0&&(C=""+f),i.key!==void 0&&(C=""+i.key),"key"in i){f={};for(var b in i)b!=="key"&&(f[b]=i[b])}else f=i;return i=f.ref,{$$typeof:a,type:m,key:C,ref:i!==void 0?i:null,props:f}}return Z.Fragment=c,Z.jsx=l,Z.jsxs=l,Z}var Q={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var
|
|
17
|
+
*/var ge;function _e(){return ge||(ge=1,process.env.NODE_ENV!=="production"&&function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case F:return"Fragment";case W:return"Profiler";case D:return"StrictMode";case ee:return"Suspense";case re:return"SuspenseList";case x:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case w:return"Portal";case M:return(e.displayName||"Context")+".Provider";case H:return(e._context.displayName||"Context")+".Consumer";case K:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ae:return o=e.displayName||null,o!==null?o:a(e.type)||"Memo";case B:o=e._payload,e=e._init;try{return a(e(o))}catch{}}return null}function c(e){return""+e}function l(e){try{c(e);var o=!1}catch{o=!0}if(o){o=console;var u=o.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),c(e)}}function m(e){if(e===F)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===B)return"<...>";try{var o=a(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function i(){var e=L.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function C(e){if(Y.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function b(e,o){function u(){O||(O=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",o))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function _(){var e=a(this.type);return U[e]||(U[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function P(e,o,u,g,v,p,J,z){return u=p.ref,e={$$typeof:S,type:e,key:o,props:p,_owner:v},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:_}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,o,u,g,v,p,J,z){var R=o.children;if(R!==void 0)if(g)if(ne(R)){for(g=0;g<R.length;g++)E(R[g]);Object.freeze&&Object.freeze(R)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else E(R);if(Y.call(o,"key")){R=a(e);var T=Object.keys(o).filter(function(ue){return ue!=="key"});g=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",I[R+g]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,g,R,T,R),I[R+g]=!0)}if(R=null,u!==void 0&&(l(u),R=""+u),C(o)&&(l(o.key),R=""+o.key),"key"in o){u={};for(var G in o)G!=="key"&&(u[G]=o[G])}else u=o;return R&&b(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),P(e,R,p,v,i(),u,J,z)}function E(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var d=t,S=Symbol.for("react.transitional.element"),w=Symbol.for("react.portal"),
|
|
22
|
+
<%s key={someKey} {...props} />`,g,R,T,R),I[R+g]=!0)}if(R=null,u!==void 0&&(l(u),R=""+u),C(o)&&(l(o.key),R=""+o.key),"key"in o){u={};for(var G in o)G!=="key"&&(u[G]=o[G])}else u=o;return R&&b(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),P(e,R,p,v,i(),u,J,z)}function E(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var d=t,S=Symbol.for("react.transitional.element"),w=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),D=Symbol.for("react.strict_mode"),W=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),M=Symbol.for("react.context"),K=Symbol.for("react.forward_ref"),ee=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),ae=Symbol.for("react.memo"),B=Symbol.for("react.lazy"),x=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),L=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,ne=Array.isArray,V=console.createTask?console.createTask:function(){return null};d={"react-stack-bottom-frame":function(e){return e()}};var O,U={},q=d["react-stack-bottom-frame"].bind(d,f)(),$=V(m(f)),I={};Q.Fragment=F,Q.jsx=function(e,o,u,g,v){var p=1e4>L.recentlyCreatedOwnerStacks++;return h(e,o,u,!1,g,v,p?Error("react-stack-top-frame"):q,p?V(m(e)):$)},Q.jsxs=function(e,o,u,g,v){var p=1e4>L.recentlyCreatedOwnerStacks++;return h(e,o,u,!0,g,v,p?Error("react-stack-top-frame"):q,p?V(m(e)):$)}}()),Q}var ke;function Te(){return ke||(ke=1,process.env.NODE_ENV==="production"?oe.exports=pe():oe.exports=_e()),oe.exports}var he=Te();const k=()=>{},ye=t.createContext({ref:null,watch:null,actions:{reset:k,setValue:k,getValues:k,setError:k,clearError:k,clearErrors:k,checkValidity:k,getNumberFields:k,getFieldValidity:k,getDefaultValues:k,setFieldStateProperty:k,getControlledFields:k},registerController:k,registerHookWatcher:k,lastReloadedAt:k,registerOnchange:k,loadFormValues:k,getWatchValue:k}),fe=()=>t.useContext(ye),Oe=({id:a,control:c,method:l,action:m,children:i,onSubmit:f=()=>{},onInput:C=()=>{},onChange:b=()=>{},onReset:_=()=>{},numberFields:P=[],className:h,...E})=>(t.useEffect(()=>c.registerOnchange(b),[b]),he.jsx(ye.Provider,{value:c,children:he.jsx("form",{id:a,ref:c.ref,action:m,method:l,className:h,onInput:C,onSubmit:d=>{l||d.preventDefault();const S=c.loadFormValues();f(S)},onChange:d=>{const S=d.target.name;c.actions.getControlledFields()[S]||c.actions.setValue(S,d.target.value)},onReset:d=>{c.actions.reset(),_(d)},...E,children:i},c.lastReloadedAt)})),Ce=({control:a,name:c,compute:l})=>{const{getWatchValue:m,registerHookWatcher:i}=a||fe(),f=m({name:c,compute:l}),[C,b]=t.useState(f);return t.useEffect(()=>i({name:c,compute:l,setValue:b,computeValue:f}),[]),C},ve=({name:a,defaultValue:c})=>{const{actions:l,registerController:m}=fe(),i=t.useRef(),f=l.getDefaultValues()[a]||c,[C,b]=t.useState(f),_=Ce({name:`fieldStates.${a}.customState`}),P=t.useCallback(E=>{l.setFieldStateProperty(a,"customState",E)},[]),h=t.useCallback((E,{shouldDirty:d=!0,shouldOnChange:S=!0}={})=>{l.setValue(a,E,{shouldDirty:d,shouldOnChange:S}),b(E)},[l.setValue]);return t.useEffect(()=>m(a,b),[]),{ref:i,name:a,defaultValue:f,value:C,onChange:h,customState:_,setCustomState:P}},Ae=({name:a,defaultValue:c,render:l=({ref:m,name:i,defaultValue:f,value:C,onChange:b,customState:_,setCustomState:P})=>null})=>{const m=ve({name:a,defaultValue:c});return l(m)},Pe=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],Se=a=>{typeof a.setCustomValidity=="function"&&a.setCustomValidity("");let c=a.validity;console.log(a.valid);let l=Pe.find(m=>c[m]);if(l)return{type:l,message:a.validationMessage}},Fe=()=>{const[,a]=t.useState({});return t.useCallback(()=>a({}),[])},je=()=>{const[a,c]=t.useState(),l=t.useCallback(()=>c(new Date().toString()),[]);return[a,l]},xe=[],Ve={},Ne=({numberFields:a=xe,defaultValues:c=Ve,shouldUnRegister:l=!1,shouldConvertNumber:m=!1}={})=>{const i=Fe(),[f,C]=je(),b=t.useRef(),_=t.useRef(()=>{}),P=t.useRef(!1),h=t.useRef(c),E=t.useRef(c),d=t.useRef(new Set),S=t.useRef(a),w=t.useRef({}),F=t.useRef([]),D=t.useRef([]),W=t.useRef({}),H=t.useRef(0),M=t.useRef({}),K=t.useCallback(()=>{M.current=Object.keys(E.current).reduce((r,n)=>({...r,[n]:{isDirty:!1,isTouched:!1,customState:null}}),{})},[]),ee=t.useCallback((r={})=>{E.current={...E.current,...r},h.current={...E.current},H.current=0,P.current=!1,W.current={},S.current=a,d.current=new Set,D.current=[],F.current=[],w.current={},K(),a.length>0&&(m=!0),C()},[]),re=t.useCallback(()=>!!Object.values(V()).find(r=>r.isDirty),[]),ae=t.useCallback(()=>!!Object.values(Y()).find(r=>!!r),[]),B=t.useCallback(r=>Se(r.target),[]),x=t.useCallback(r=>r?h.current[r]:h.current,[]),te=t.useCallback(()=>E.current,[]),L=t.useCallback(()=>S.current,[]),Y=t.useCallback(()=>W.current,[]),ne=t.useCallback(()=>w.current,[]),V=t.useCallback(()=>M.current,[]),O=t.useCallback(({name:r,compute:n})=>{var y;if(typeof n=="function")return n(x());if(Array.isArray(r)){const A={};return r.forEach(j=>{A[j]=O({name:j})}),A}if(r==="isDirty")return re();if(r==="isError")return ae();if(r==="values")return{...x()};if(r==="errors")return{...Y()};if(r==="fieldStates")return{...V()};const s=r.split(".");if(s.length>1){const A=s[1];if(s[0]==="errors")return s.length===2?{...Y()[A]}:{...Y()[A]};if(s[0]==="fieldStates"){if(s.length===2)return{...V()[A]};const j=s[2];return(y=V()[A])==null?void 0:y[j]}}return x()[r]},[]),U=r=>{D.current.forEach(n=>{let s;if(typeof n.name=="string"?s=r(n):n.name.forEach(y=>{s||(s=r({...n,name:y}))}),s){const y=O(n);n.setValue(y)}})},q=r=>{const n=({name:s})=>s==="isError"||s==="errors"||(r?s===`errors.${r}`:s.includes("errors"));[...d.current].forEach(s=>{n({name:s})&&i()}),U(n)},$=t.useCallback((r,n)=>{W.current[r]=n,q(r)},[]),I=t.useCallback(r=>{W.current[r]=null,q(r)},[]),e=t.useCallback(()=>{W.current={},q()},[]),o=t.useCallback(r=>{const n=Se(r.target);n?$(r.target.name,n):I(r.target.name)},[$,I]),u=t.useCallback((r,n,s)=>{const y=M.current[r];if(y[n]!==s){M.current[r]={...y,[n]:s};const j=({name:N})=>N==="fieldStates"||N===`fieldStates.${r}`||N===`fieldStates.${r}.${n}`;if([...d.current].forEach(N=>{j({name:N})&&i()}),n==="customState"){F.current.forEach(({name:N,setValue:se})=>{N.includes(r)&&se(s)});return}U(j)}}),g=t.useCallback((r,n,{shouldDirty:s=!0,shouldOnChange:y=!0}={})=>{m&&S.current.includes(r)&&(n=Number(n)||void 0);const A=h.current[r],j=M.current[r],se=w.current[r];if(u(r,"isTouched",!0),s){const X=n!==E.current[r];j.isDirty!==X&&u(r,"isDirty",X)}const ce=re(),de=P.current,me=n!==A;d.current.has(r)&&me&&i(),d.current.has("values")&&i(),d.current.has("isDirty")&&ce!==de&&i(),h.current[r]=n,se&&se(n),P.current=ce,U(X=>{const{name:le,compute:be,computeValue:Ee}=X;if(be){const ie=be(x());return ie!==Ee&&(X.computeValue=ie),ie!==Ee}if(le==="values")return!0;if(le==="isDirty")return ce!==de;if(le===r)return me}),y&&_.current(r,n,h.current)},[u]),v=t.useCallback(r=>{if(typeof r=="string")return d.current.add(r),O({name:r});if(Array.isArray(r)){const n={};return r.forEach(s=>{d.current.add(s),n[s]=O({name:s})}),n}return O({name:r})},[]),p=t.useCallback((r,n)=>{const s=w.current;return s[r]=n,()=>{l&&(delete s[r],delete h.current[r])}},[]),J=t.useCallback(r=>(_.current=r,()=>_.current=()=>{}),[]),z=t.useCallback(r=>{var s;const n=H.current;return(s=r.name)!=null&&s.includes("customState")?F.current.push({key:n,...r}):D.current.push({key:n,...r}),H.current++,()=>{D.current=D.current.filter(y=>y.key!==n),F.current=F.current.filter(y=>y.key!==n)}},[]),R=t.useCallback(()=>{const r=Object.fromEntries(new FormData(b.current)),n=w.current;return Object.keys(n).map(s=>{r[s]=h.current[s]}),m&&S.current.forEach(s=>r.hasOwnProperty(s)&&(r[s]=Number(r[s])||0)),r},[]),T=t.useMemo(()=>({reset:ee,setValue:g,getValues:x,setError:$,clearError:I,clearErrors:e,checkValidity:o,getNumberFields:L,getFieldValidity:B,getDefaultValues:te,setFieldStateProperty:u,getControlledFields:ne}),[ee,g,x,$,I,e,o,L,B,te,u,ne]),G=t.useMemo(()=>({ref:b,watch:v,actions:T,registerController:p,registerHookWatcher:z,lastReloadedAt:f,registerOnchange:J,loadFormValues:R,getWatchValue:O}),[b,v,T,p,z,f,J,R,O]),ue=t.useMemo(()=>({control:G,actions:T,watch:v}),[f,G,T,v]);return t.useLayoutEffect(()=>{if([...b.current.querySelectorAll("[name]")].forEach(n=>{!n.defaultValue&&E.current[n.name]&&(n.defaultValue=E.current[n.name]),n.type==="number"&&!S.current.includes(n.name)&&S.current.push(n.name)}),b.current){const n=R();h.current={...n},E.current={...n}}},[f]),t.useLayoutEffect(()=>{K()},[]),ue};exports.Controller=Ae;exports.Form=Oe;exports.useController=ve;exports.useForm=Ne;exports.useFormContext=fe;exports.useWatch=Ce;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var me;function Te(){if(me)return Z;me=1;var a=Symbol.for("react.transitional.element"),u=Symbol.for("react.fragment");function l(m,f,i){var C=null;if(i!==void 0&&(C=""+i),f.key!==void 0&&(C=""+f.key),"key"in f){i={};for(var b in f)b!=="key"&&(i[b]=f[b])}else i=f;return f=i.ref,{$$typeof:a,type:m,key:C,ref:f!==void 0?f:null,props:i}}return Z.Fragment=u,Z.jsx=l,Z.jsxs=l,Z}var Q={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var
|
|
17
|
+
*/var be;function _e(){return be||(be=1,process.env.NODE_ENV!=="production"&&function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===se?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case F:return"Fragment";case M:return"Profiler";case W:return"StrictMode";case re:return"Suspense";case ne:return"SuspenseList";case x:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case D:return"Portal";case Y:return(e.displayName||"Context")+".Provider";case K:return(e._context.displayName||"Context")+".Consumer";case te:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return o=e.displayName||null,o!==null?o:a(e.type)||"Memo";case q:o=e._payload,e=e._init;try{return a(e(o))}catch{}}return null}function u(e){return""+e}function l(e){try{u(e);var o=!1}catch{o=!0}if(o){o=console;var c=o.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),u(e)}}function m(e){if(e===F)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===q)return"<...>";try{var o=a(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function f(){var e=J.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function C(e){if(I.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function b(e,o){function c(){A||(A=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",o))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function _(){var e=a(this.type);return z[e]||(z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function j(e,o,c,g,p,v,H,B){return c=v.ref,e={$$typeof:S,type:e,key:o,props:v,_owner:p},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:_}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:H}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,o,c,g,p,v,H,B){var R=o.children;if(R!==void 0)if(g)if(oe(R)){for(g=0;g<R.length;g++)E(R[g]);Object.freeze&&Object.freeze(R)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else E(R);if(I.call(o,"key")){R=a(e);var O=Object.keys(o).filter(function(le){return le!=="key"});g=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",U[R+g]||(O=0<O.length?"{"+O.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,g,R,O,R),U[R+g]=!0)}if(R=null,c!==void 0&&(l(c),R=""+c),C(o)&&(l(o.key),R=""+o.key),"key"in o){c={};for(var X in o)X!=="key"&&(c[X]=o[X])}else c=o;return R&&b(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),j(e,R,v,p,f(),c,H,B)}function E(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var d=r,S=Symbol.for("react.transitional.element"),D=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),M=Symbol.for("react.profiler"),K=Symbol.for("react.consumer"),Y=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),ne=Symbol.for("react.suspense_list"),
|
|
22
|
+
<%s key={someKey} {...props} />`,g,R,O,R),U[R+g]=!0)}if(R=null,c!==void 0&&(l(c),R=""+c),C(o)&&(l(o.key),R=""+o.key),"key"in o){c={};for(var X in o)X!=="key"&&(c[X]=o[X])}else c=o;return R&&b(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),j(e,R,v,p,f(),c,H,B)}function E(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var d=r,S=Symbol.for("react.transitional.element"),D=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),M=Symbol.for("react.profiler"),K=Symbol.for("react.consumer"),Y=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),ne=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),x=Symbol.for("react.activity"),se=Symbol.for("react.client.reference"),J=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,oe=Array.isArray,N=console.createTask?console.createTask:function(){return null};d={"react-stack-bottom-frame":function(e){return e()}};var A,z={},G=d["react-stack-bottom-frame"].bind(d,i)(),L=N(m(i)),U={};Q.Fragment=F,Q.jsx=function(e,o,c,g,p){var v=1e4>J.recentlyCreatedOwnerStacks++;return h(e,o,c,!1,g,p,v?Error("react-stack-top-frame"):G,v?N(m(e)):L)},Q.jsxs=function(e,o,c,g,p){var v=1e4>J.recentlyCreatedOwnerStacks++;return h(e,o,c,!0,g,p,v?Error("react-stack-top-frame"):G,v?N(m(e)):L)}}()),Q}var Ee;function Oe(){return Ee||(Ee=1,process.env.NODE_ENV==="production"?ee.exports=Te():ee.exports=_e()),ee.exports}var Re=Oe();const k=()=>{},ge=r.createContext({ref:null,watch:null,actions:{reset:k,setValue:k,getValues:k,setError:k,clearError:k,clearErrors:k,checkValidity:k,getNumberFields:k,getFieldValidity:k,getDefaultValues:k,setFieldStateProperty:k,getControlledFields:k},registerController:k,registerHookWatcher:k,lastReloadedAt:k,registerOnchange:k,loadFormValues:k,getWatchValue:k}),ce=()=>r.useContext(ge),Ae=({id:a,control:u,method:l,action:m,children:f,onSubmit:i=()=>{},onInput:C=()=>{},onChange:b=()=>{},onReset:_=()=>{},numberFields:j=[],className:h,...E})=>(r.useEffect(()=>u.registerOnchange(b),[b]),Re.jsx(ge.Provider,{value:u,children:Re.jsx("form",{id:a,ref:u.ref,action:m,method:l,className:h,onInput:C,onSubmit:d=>{l||d.preventDefault();const S=u.loadFormValues();i(S)},onChange:d=>{const S=d.target.name;u.actions.getControlledFields()[S]||u.actions.setValue(S,d.target.value)},onReset:d=>{u.actions.reset(),_(d)},...E,children:f},u.lastReloadedAt)})),ke=({control:a,name:u,compute:l})=>{const{getWatchValue:m,registerHookWatcher:f}=a||ce(),i=m({name:u,compute:l}),[C,b]=r.useState(i);return r.useEffect(()=>f({name:u,compute:l,setValue:b,computeValue:i}),[]),C},he=({name:a,defaultValue:u})=>{const{actions:l,registerController:m}=ce(),f=r.useRef(),i=l.getDefaultValues()[a]||u,[C,b]=r.useState(i),_=ke({name:`fieldStates.${a}.customState`}),j=r.useCallback(E=>{l.setFieldStateProperty(a,"customState",E)},[]),h=r.useCallback((E,{shouldDirty:d=!0,shouldOnChange:S=!0}={})=>{l.setValue(a,E,{shouldDirty:d,shouldOnChange:S}),b(E)},[l.setValue]);return r.useEffect(()=>m(a,b),[]),{ref:f,name:a,defaultValue:i,value:C,onChange:h,customState:_,setCustomState:j}},Pe=({name:a,defaultValue:u,render:l=({ref:m,name:f,defaultValue:i,value:C,onChange:b,customState:_,setCustomState:j})=>null})=>{const m=he({name:a,defaultValue:u});return l(m)},je=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],Se=a=>{typeof a.setCustomValidity=="function"&&a.setCustomValidity("");let u=a.validity;console.log(a.valid);let l=je.find(m=>u[m]);if(l)return{type:l,message:a.validationMessage}},Fe=()=>{const[,a]=r.useState({});return r.useCallback(()=>a({}),[])},Ve=()=>{const[a,u]=r.useState(),l=r.useCallback(()=>u(new Date().toString()),[]);return[a,l]},xe=[],Ne={},we=({numberFields:a=xe,defaultValues:u=Ne,shouldUnRegister:l=!1,shouldConvertNumber:m=!1}={})=>{const f=Fe(),[i,C]=Ve(),b=r.useRef(),_=r.useRef(()=>{}),j=r.useRef(!1),h=r.useRef(u),E=r.useRef(u),d=r.useRef(new Set),S=r.useRef(a),D=r.useRef({}),F=r.useRef([]),W=r.useRef([]),M=r.useRef({}),K=r.useRef(0),Y=r.useRef({}),te=r.useCallback(()=>{Y.current=Object.keys(E.current).reduce((t,n)=>({...t,[n]:{isDirty:!1,isTouched:!1,customState:null}}),{})},[]),re=r.useCallback((t={})=>{E.current={...E.current,...t},h.current={...E.current},K.current=0,j.current=!1,M.current={},S.current=a,d.current=new Set,W.current=[],F.current=[],D.current={},te(),a.length>0&&(m=!0),C()},[]),ne=r.useCallback(()=>!!Object.values(N()).find(t=>t.isDirty),[]),ue=r.useCallback(()=>!!Object.values(I()).find(t=>!!t),[]),q=r.useCallback(t=>Se(t.target),[]),x=r.useCallback(t=>t?h.current[t]:h.current,[]),se=r.useCallback(()=>E.current,[]),J=r.useCallback(()=>S.current,[]),I=r.useCallback(()=>M.current,[]),oe=r.useCallback(()=>D.current,[]),N=r.useCallback(()=>Y.current,[]),A=r.useCallback(({name:t,compute:n})=>{var y;if(typeof n=="function")return n(x());if(Array.isArray(t)){const P={};return t.forEach(V=>{P[V]=A({name:V})}),P}if(t==="isDirty")return ne();if(t==="isError")return ue();if(t==="values")return{...x()};if(t==="errors")return{...I()};if(t==="fieldStates")return{...N()};const s=t.split(".");if(s.length>1){const P=s[1];if(s[0]==="errors")return s.length===2?{...I()[P]}:{...I()[P]};if(s[0]==="fieldStates"){if(s.length===2)return{...N()[P]};const V=s[2];return(y=N()[P])==null?void 0:y[V]}}return x()[t]},[]),z=t=>{W.current.forEach(n=>{let s;if(typeof n.name=="string"?s=t(n):n.name.forEach(y=>{s||(s=t({...n,name:y}))}),s){const y=A(n);n.setValue(y)}})},G=t=>{const n=({name:s})=>s==="isError"||s==="errors"||(t?s===`errors.${t}`:s.includes("errors"));[...d.current].forEach(s=>{n({name:s})&&f()}),z(n)},L=r.useCallback((t,n)=>{M.current[t]=n,G(t)},[]),U=r.useCallback(t=>{M.current[t]=null,G(t)},[]),e=r.useCallback(()=>{M.current={},G()},[]),o=r.useCallback(t=>{const n=Se(t.target);n?L(t.target.name,n):U(t.target.name)},[L,U]),c=r.useCallback((t,n,s)=>{const y=Y.current[t];if(y[n]!==s){Y.current[t]={...y,[n]:s};const V=({name:w})=>w==="fieldStates"||w===`fieldStates.${t}`||w===`fieldStates.${t}.${n}`;if([...d.current].forEach(w=>{V({name:w})&&f()}),n==="customState"){F.current.forEach(({name:w,setValue:ae})=>{w.includes(t)&&ae(s)});return}z(V)}}),g=r.useCallback((t,n,{shouldDirty:s=!0,shouldOnChange:y=!0}={})=>{m&&S.current.includes(t)&&(n=Number(n)||void 0);const P=h.current[t],V=Y.current[t],ae=D.current[t];if(c(t,"isTouched",!0),s){const $=n!==E.current[t];V.isDirty!==$&&c(t,"isDirty",$)}const fe=ne(),ye=j.current,Ce=n!==P;d.current.has(t)&&Ce&&f(),d.current.has("values")&&f(),d.current.has("isDirty")&&fe!==ye&&f(),h.current[t]=n,ae&&ae(n),j.current=fe,z($=>{const{name:ie,compute:pe,computeValue:ve}=$;if(pe){const de=pe(x());return de!==ve&&($.computeValue=de),de!==ve}if(ie==="values")return!0;if(ie==="isDirty")return fe!==ye;if(ie===t)return Ce}),y&&_.current(t,n,h.current)},[c]),p=r.useCallback(t=>{if(typeof t=="string")return d.current.add(t),A({name:t});if(Array.isArray(t)){const n={};return t.forEach(s=>{d.current.add(s),n[s]=A({name:s})}),n}return A({name:t})},[]),v=r.useCallback((t,n)=>{const s=D.current;return s[t]=n,()=>{l&&(delete s[t],delete h.current[t])}},[]),H=r.useCallback(t=>(_.current=t,()=>_.current=()=>{}),[]),B=r.useCallback(t=>{var s;const n=K.current;return(s=t.name)!=null&&s.includes("customState")?F.current.push({key:n,...t}):W.current.push({key:n,...t}),K.current++,()=>{W.current=W.current.filter(y=>y.key!==n),F.current=F.current.filter(y=>y.key!==n)}},[]),R=r.useCallback(()=>{const t=Object.fromEntries(new FormData(b.current)),n=D.current;return Object.keys(n).map(s=>{t[s]=h.current[s]}),m&&S.current.forEach(s=>t.hasOwnProperty(s)&&(t[s]=Number(t[s])||0)),t},[]),O=r.useMemo(()=>({reset:re,setValue:g,getValues:x,setError:L,clearError:U,clearErrors:e,checkValidity:o,getNumberFields:J,getFieldValidity:q,getDefaultValues:se,setFieldStateProperty:c,getControlledFields:oe}),[re,g,x,L,U,e,o,J,q,se,c,oe]),X=r.useMemo(()=>({ref:b,watch:p,actions:O,registerController:v,registerHookWatcher:B,lastReloadedAt:i,registerOnchange:H,loadFormValues:R,getWatchValue:A}),[b,p,O,v,B,i,H,R,A]),le=r.useMemo(()=>({control:X,actions:O,watch:p}),[i,X,O,p]);return r.useLayoutEffect(()=>{if([...b.current.querySelectorAll("[name]")].forEach(n=>{!n.defaultValue&&E.current[n.name]&&(n.defaultValue=E.current[n.name]),n.type==="number"&&!S.current.includes(n.name)&&S.current.push(n.name)}),b.current){const n=R();h.current={...n},E.current={...n}}},[i]),r.useLayoutEffect(()=>{te()},[]),le};T.Controller=Pe,T.Form=Ae,T.useController=he,T.useForm=we,T.useFormContext=ce,T.useWatch=ke,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});
|