use-smart
Version:
A react hook to generate and manage your form in a smart way!
2 lines (1 loc) • 16.4 kB
JavaScript
import e,{useMemo as t,useReducer as r,useState as a,useCallback as n,useRef as o}from"react";function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l.apply(this,arguments)}var s=Symbol.for("immer-nothing"),i=Symbol.for("immer-draftable"),c=Symbol.for("immer-state"),u="production"!==process.env.NODE_ENV?[function(e){return`The plugin for '${e}' has not been loaded into Immer. To enable the plugin, import and call \`enable${e}()\` when initializing your application.`},function(e){return`produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${e}'`},"This object has been frozen and should not be mutated",function(e){return"Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? "+e},"An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.","Immer forbids circular references","The first or second argument to `produce` must be a function","The third argument to `produce` must be a function or undefined","First argument to `createDraft` must be a plain object, an array, or an immerable object","First argument to `finishDraft` must be a draft returned by `createDraft`",function(e){return`'current' expects a draft, got: ${e}`},"Object.defineProperty() cannot be used on an Immer draft","Object.setPrototypeOf() cannot be used on an Immer draft","Immer only supports deleting array indices","Immer only supports setting array indices and the 'length' property",function(e){return`'original' expects a draft, got: ${e}`}]:[];function d(e,...t){if("production"!==process.env.NODE_ENV){const r=u[e],a="function"==typeof r?r.apply(null,t):r;throw new Error(`[Immer] ${a}`)}throw new Error(`[Immer] minified error nr: ${e}. Full error at: https://bit.ly/3cXEKWf`)}var p=Object.getPrototypeOf;function f(e){return!!e&&!!e[c]}function m(e){return!!e&&(b(e)||Array.isArray(e)||!!e[i]||!!e.constructor?.[i]||N(e)||E(e))}var y=Object.prototype.constructor.toString();function b(e){if(!e||"object"!=typeof e)return!1;const t=p(e);if(null===t)return!0;const r=Object.hasOwnProperty.call(t,"constructor")&&t.constructor;return r===Object||"function"==typeof r&&Function.toString.call(r)===y}function h(e,t){0===_(e)?Object.entries(e).forEach((([r,a])=>{t(r,a,e)})):e.forEach(((r,a)=>t(a,r,e)))}function _(e){const t=e[c];return t?t.type_:Array.isArray(e)?1:N(e)?2:E(e)?3:0}function g(e,t){return 2===_(e)?e.has(t):Object.prototype.hasOwnProperty.call(e,t)}function v(e,t,r){const a=_(e);2===a?e.set(t,r):3===a?e.add(r):e[t]=r}function N(e){return e instanceof Map}function E(e){return e instanceof Set}function S(e){return e.copy_||e.base_}function w(e,t){if(N(e))return new Map(e);if(E(e))return new Set(e);if(Array.isArray(e))return Array.prototype.slice.call(e);if(!t&&b(e)){if(!p(e)){const t=Object.create(null);return Object.assign(t,e)}return{...e}}const r=Object.getOwnPropertyDescriptors(e);delete r[c];let a=Reflect.ownKeys(r);for(let t=0;t<a.length;t++){const n=a[t],o=r[n];!1===o.writable&&(o.writable=!0,o.configurable=!0),(o.get||o.set)&&(r[n]={configurable:!0,writable:!0,enumerable:o.enumerable,value:e[n]})}return Object.create(p(e),r)}function C(e,t=!1){return O(e)||f(e)||!m(e)||(_(e)>1&&(e.set=e.add=e.clear=e.delete=F),Object.freeze(e),t&&h(e,((e,t)=>C(t,!0)))),e}function F(){d(2)}function O(e){return Object.isFrozen(e)}var P,j={};function z(e){const t=j[e];return t||d(0,e),t}function k(){return P}function D(e,t){t&&(z("Patches"),e.patches_=[],e.inversePatches_=[],e.patchListener_=t)}function A(e){L(e),e.drafts_.forEach(V),e.drafts_=null}function L(e){e===P&&(P=e.parent_)}function x(e){return P={drafts_:[],parent_:P,immer_:e,canAutoFreeze_:!0,unfinalizedDrafts_:0}}function V(e){const t=e[c];0===t.type_||1===t.type_?t.revoke_():t.revoked_=!0}function B(e,t){t.unfinalizedDrafts_=t.drafts_.length;const r=t.drafts_[0];return void 0!==e&&e!==r?(r[c].modified_&&(A(t),d(4)),m(e)&&(e=q(t,e),t.parent_||I(t,e)),t.patches_&&z("Patches").generateReplacementPatches_(r[c].base_,e,t.patches_,t.inversePatches_)):e=q(t,r,[]),A(t),t.patches_&&t.patchListener_(t.patches_,t.inversePatches_),e!==s?e:void 0}function q(e,t,r){if(O(t))return t;const a=t[c];if(!a)return h(t,((n,o)=>$(e,a,t,n,o,r))),t;if(a.scope_!==e)return t;if(!a.modified_)return I(e,a.base_,!0),a.base_;if(!a.finalized_){a.finalized_=!0,a.scope_.unfinalizedDrafts_--;const t=a.copy_;let n=t,o=!1;3===a.type_&&(n=new Set(t),t.clear(),o=!0),h(n,((n,l)=>$(e,a,t,n,l,r,o))),I(e,t,!1),r&&e.patches_&&z("Patches").generatePatches_(a,r,e.patches_,e.inversePatches_)}return a.copy_}function $(e,t,r,a,n,o,l){if("production"!==process.env.NODE_ENV&&n===r&&d(5),f(n)){const l=q(e,n,o&&t&&3!==t.type_&&!g(t.assigned_,a)?o.concat(a):void 0);if(v(r,a,l),!f(l))return;e.canAutoFreeze_=!1}else l&&r.add(n);if(m(n)&&!O(n)){if(!e.immer_.autoFreeze_&&e.unfinalizedDrafts_<1)return;q(e,n),t&&t.scope_.parent_||I(e,n)}}function I(e,t,r=!1){!e.parent_&&e.immer_.autoFreeze_&&e.canAutoFreeze_&&C(t,r)}var M={get(e,t){if(t===c)return e;const r=S(e);if(!g(r,t))return function(e,t,r){const a=W(t,r);return a?"value"in a?a.value:a.get?.call(e.draft_):void 0}(e,r,t);const a=r[t];return e.finalized_||!m(a)?a:a===R(e.base_,t)?(K(e),e.copy_[t]=G(a,e)):a},has:(e,t)=>t in S(e),ownKeys:e=>Reflect.ownKeys(S(e)),set(e,t,r){const a=W(S(e),t);if(a?.set)return a.set.call(e.draft_,r),!0;if(!e.modified_){const a=R(S(e),t),l=a?.[c];if(l&&l.base_===r)return e.copy_[t]=r,e.assigned_[t]=!1,!0;if(((n=r)===(o=a)?0!==n||1/n==1/o:n!=n&&o!=o)&&(void 0!==r||g(e.base_,t)))return!0;K(e),U(e)}var n,o;return e.copy_[t]===r&&(void 0!==r||t in e.copy_)||Number.isNaN(r)&&Number.isNaN(e.copy_[t])||(e.copy_[t]=r,e.assigned_[t]=!0),!0},deleteProperty:(e,t)=>(void 0!==R(e.base_,t)||t in e.base_?(e.assigned_[t]=!1,K(e),U(e)):delete e.assigned_[t],e.copy_&&delete e.copy_[t],!0),getOwnPropertyDescriptor(e,t){const r=S(e),a=Reflect.getOwnPropertyDescriptor(r,t);return a?{writable:!0,configurable:1!==e.type_||"length"!==t,enumerable:a.enumerable,value:r[t]}:a},defineProperty(){d(11)},getPrototypeOf:e=>p(e.base_),setPrototypeOf(){d(12)}},T={};function R(e,t){const r=e[c];return(r?S(r):e)[t]}function W(e,t){if(!(t in e))return;let r=p(e);for(;r;){const e=Object.getOwnPropertyDescriptor(r,t);if(e)return e;r=p(r)}}function U(e){e.modified_||(e.modified_=!0,e.parent_&&U(e.parent_))}function K(e){e.copy_||(e.copy_=w(e.base_,e.scope_.immer_.useStrictShallowCopy_))}h(M,((e,t)=>{T[e]=function(){return arguments[0]=arguments[0][0],t.apply(this,arguments)}})),T.deleteProperty=function(e,t){return"production"!==process.env.NODE_ENV&&isNaN(parseInt(t))&&d(13),T.set.call(this,e,t,void 0)},T.set=function(e,t,r){return"production"!==process.env.NODE_ENV&&"length"!==t&&isNaN(parseInt(t))&&d(14),M.set.call(this,e[0],t,r,e[0])};function G(e,t){const r=N(e)?z("MapSet").proxyMap_(e,t):E(e)?z("MapSet").proxySet_(e,t):function(e,t){const r=Array.isArray(e),a={type_:r?1:0,scope_:t?t.scope_:k(),modified_:!1,finalized_:!1,assigned_:{},parent_:t,base_:e,draft_:null,copy_:null,revoke_:null,isManual_:!1};let n=a,o=M;r&&(n=[a],o=T);const{revoke:l,proxy:s}=Proxy.revocable(n,o);return a.draft_=s,a.revoke_=l,s}(e,t);return(t?t.scope_:k()).drafts_.push(r),r}function X(e){if(!m(e)||O(e))return e;const t=e[c];let r;if(t){if(!t.modified_)return t.base_;t.finalized_=!0,r=w(e,t.scope_.immer_.useStrictShallowCopy_)}else r=w(e,!0);return h(r,((e,t)=>{v(r,e,X(t))})),t&&(t.finalized_=!1),r}var H=new class{constructor(e){this.autoFreeze_=!0,this.useStrictShallowCopy_=!1,this.produce=(e,t,r)=>{if("function"==typeof e&&"function"!=typeof t){const r=t;t=e;const a=this;return function(e=r,...n){return a.produce(e,(e=>t.call(this,e,...n)))}}let a;if("function"!=typeof t&&d(6),void 0!==r&&"function"!=typeof r&&d(7),m(e)){const n=x(this),o=G(e,void 0);let l=!0;try{a=t(o),l=!1}finally{l?A(n):L(n)}return D(n,r),B(a,n)}if(!e||"object"!=typeof e){if(a=t(e),void 0===a&&(a=e),a===s&&(a=void 0),this.autoFreeze_&&C(a,!0),r){const t=[],n=[];z("Patches").generateReplacementPatches_(e,a,t,n),r(t,n)}return a}d(1,e)},this.produceWithPatches=(e,t)=>{if("function"==typeof e)return(t,...r)=>this.produceWithPatches(t,(t=>e(t,...r)));let r,a;return[this.produce(e,t,((e,t)=>{r=e,a=t})),r,a]},"boolean"==typeof e?.autoFreeze&&this.setAutoFreeze(e.autoFreeze),"boolean"==typeof e?.useStrictShallowCopy&&this.setUseStrictShallowCopy(e.useStrictShallowCopy)}createDraft(e){m(e)||d(8),f(e)&&(e=function(e){f(e)||d(10,e);return X(e)}(e));const t=x(this),r=G(e,void 0);return r[c].isManual_=!0,L(t),r}finishDraft(e,t){const r=e&&e[c];r&&r.isManual_||d(9);const{scope_:a}=r;return D(a,t),B(void 0,a)}setAutoFreeze(e){this.autoFreeze_=e}setUseStrictShallowCopy(e){this.useStrictShallowCopy_=e}applyPatches(e,t){let r;for(r=t.length-1;r>=0;r--){const a=t[r];if(0===a.path.length&&"replace"===a.op){e=a.value;break}}r>-1&&(t=t.slice(r+1));const a=z("Patches").applyPatches_;return f(e)?a(e,t):this.produce(e,(e=>a(e,t)))}},J=H.produce;H.produceWithPatches.bind(H),H.setAutoFreeze.bind(H),H.setUseStrictShallowCopy.bind(H),H.applyPatches.bind(H),H.createDraft.bind(H),H.finishDraft.bind(H);const Q=({error:t})=>t?e.createElement("div",{style:{color:"red"}},t):null,Y=({children:t,fieldName:r,containerClassName:a,containerStyle:n,labelClassName:o,labelStyle:l,label:s,showFieldErrors:i,error:c})=>e.createElement("div",{key:r,className:`${a}`,style:n},e.createElement("label",{className:`${o}`,style:l,htmlFor:r},s),t,i&&e.createElement(Q,{error:c})),Z=({fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,data:c,type:u,placeholder:d,handleFieldBlur:p,handleChange:f,className:m,style:y,fieldValue:b})=>e.createElement(Y,{fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},e.createElement("input",{id:t,type:u,value:c.state[t],placeholder:d,onBlur:()=>p(t),onChange:f,className:m,style:y,"aria-invalid":!!i,"aria-describedby":i?`${t}-error`:"","aria-required":b.required?"true":"false"})),ee=({fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,data:c,handleFieldBlur:u,handleChange:d,className:p,style:f,fieldValue:m,options:y})=>e.createElement(Y,{fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},y.map((r=>e.createElement("label",{key:r},e.createElement("input",{type:"radio",value:r,checked:c.state[t]===r,onBlur:()=>u(t),onChange:e=>d(t,e.target.value),className:p,style:f,"aria-invalid":!!i,"aria-describedby":i?"name-error":"","aria-required":m.required?"true":"false"}),r)))),te=({fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,data:c,handleFieldBlur:u,handleChange:d,className:p,style:f,fieldValue:m,options:y})=>e.createElement(Y,{fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},e.createElement("select",{id:t,value:c.state[t],onBlur:()=>u(t),onChange:e=>d(t,e.target.value),className:p,style:f,"aria-invalid":!!i,"aria-describedby":i?"name-error":"","aria-required":m.required?"true":"false"},y.map((t=>e.createElement("option",{key:t,value:t},t))))),re=({fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,data:c,handleFieldBlur:u,handleChange:d,className:p,style:f,fieldValue:m,rows:y,cols:b})=>e.createElement(Y,{fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},e.createElement("textarea",{id:t,value:c.state[t],onChange:e=>d(t,e.target.value),onBlur:()=>u(t),className:p,style:f,"aria-invalid":!!i,"aria-describedby":i?"name-error":"","aria-required":m.required?"true":"false",rows:m.rows||4,cols:m.cols||50})),ae=({fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,handleChange:c,className:u,style:d,fieldValue:p})=>e.createElement(Y,{fieldName:t,containerClassName:r,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},e.createElement("input",{id:t,type:"file",onChange:e=>c(t,e.target.files),className:u,style:d,"aria-invalid":!!i,"aria-describedby":i?"name-error":"","aria-required":p.required?"true":"false"})),ne=(o,s,i={hideSubmitButton:!1,disableValidation:!1,customSubmitButtonText:"",showErrorSummary:!0,showFieldErrors:!0,className:""})=>{const{hideSubmitButton:c=!1,disableValidation:u=!1,customSubmitButtonText:d="",showErrorSummary:p=!0,showFieldErrors:f=!0,className:m=""}=i,y=t((()=>Object.entries(o).reduce(((e,[t,r])=>("object"==typeof r&&null!==r?(e.state[t]=r.value,e.errors[t]="",e.format[t]=r.format||null):(e.state[t]=r,e.errors[t]="",e.format[t]=null),e)),{state:{},isLoading:!1,submissionError:null,format:{}})),[o]),[b,h]=a({}),[_,g]=(N=y,S=t((function(){return J(v)}),[v=(e,t)=>{switch(t.type){case"updateField":e.state[t.key]=t.payload;break;case"updateLoading":e.isLoading=t.payload;break;case"updateSubmissionError":e.submissionError=t.payload;break;default:throw new Error(`Invalid action type: ${t.type}`)}}]),r(S,N,E));var v,N,E,S;const w=n((async(e,t)=>{if("file"===o[e].type)g({type:"updateField",key:e,payload:t});else{const r=y.format[e]&&"function"==typeof y.format[e]?y.format[e](t):t;g({type:"updateField",key:e,payload:r})}}),[]),C=n((e=>{f||h((t=>({...t,[e]:!0})))}),[]),F=n((async e=>{e.preventDefault(),g({type:"updateLoading",payload:!0});const t=Object.keys(o).reduce(((e,t)=>(e[t]=!0,e)),{});h(t);try{g({type:"updateLoading",payload:!1}),s&&s(_.state)}catch(e){g({type:"updateLoading",payload:!1}),g({type:"updateSubmissionError",payload:e.message})}}),[]),O=n(((t,r)=>{const a=o[t],n=_.errors[t];if(!(!a.showWhen||a.showWhen(_.state)))return null;const s={fieldName:t,containerClassName:r.containerClassName,containerStyle:r.containerStyle,labelClassName:r.labelClassName,labelStyle:r.labelStyle,label:r.label,showFieldErrors:mergedOptions.showFieldErrors,error:n,data:_,handleFieldBlur:C,handleChange:w,className:r.className,style:r.style,fieldValue:r};switch(r.type){case"text":case"email":case"password":case"number":case"date":case"time":case"checkbox":return e.createElement(Z,l({},s,{type:r.type,placeholder:r.placeholder||t.toLocaleUpperCase()}));case"radio":return e.createElement(ee,l({},s,{options:r.options}));case"select":return e.createElement(te,l({},s,{options:r.options}));case"textarea":return e.createElement(re,l({},s,{rows:r.rows,cols:r.cols}));case"file":return e.createElement(ae,s);default:return e.createElement("div",{key:t},e.createElement("label",{htmlFor:t},t),e.createElement("input",{id:t,type:"text",placeholder:t.toLocaleUpperCase(),value:_.state[t],onChange:e=>w(t,e.target.value),"aria-invalid":!!n,"aria-describedby":n?`${t}-error`:"","aria-required":r.required?"true":"false"}))}}),[_.state,_.errors,mergedOptions.showFieldErrors]),P=t((()=>Object.entries(o).map((([e,t])=>O(e,t)))),[_.state,_.errors,o,f]),j=({fieldName:t})=>{const r=_.errors[t];return r?e.createElement("div",null,r):null};return{form:e.createElement("form",{onSubmit:F},P,p&&Object.values(_.errors).some((e=>""!==e))&&e.createElement("div",{style:{color:"red"}},_.submissionError&&e.createElement("div",null,_.submissionError),Object.keys(_.errors).map((t=>e.createElement(j,{key:t,fieldName:t})))),!c&&e.createElement("button",{type:"submit",disabled:_.isLoading,"aria-label":d||"Submit","aria-disabled":_.isLoading?"true":"false"},_.isLoading?"Loading...":d||"Submit")),state:{..._.state},errors:{..._.errors},isLoading:_.isLoading,reset:()=>{g({type:"updateField",payload:y.state}),g({type:"resetErrors"})}}},oe=({children:t,onSubmit:r,options:a})=>{const n=e.Children.toArray(t).reduce(((e,t)=>(t.props&&t.props.name&&(e[t.props.name]=""),e)),{}),{form:o,state:l}=ne(n,r,a);return e.createElement("div",null,o)};function le(){const e=o(null);return{selectRef:e,getValue:()=>e?.current?e?.current?.value:null,setValue:t=>{e?.current&&(e.current.value=t)}}}export{oe as SmartForm,le as useSelect,ne as useSmartForm};