use-smart
Version:
A react hook to generate and manage your form in a smart way!
2 lines (1 loc) • 16.8 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);function a(){return a=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},a.apply(this,arguments)}var n=Symbol.for("immer-nothing"),o=Symbol.for("immer-draftable"),l=Symbol.for("immer-state"),s="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 i(e,...t){if("production"!==process.env.NODE_ENV){const r=s[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 c=Object.getPrototypeOf;function u(e){return!!e&&!!e[l]}function d(e){return!!e&&(p(e)||Array.isArray(e)||!!e[o]||!!e.constructor?.[o]||_(e)||g(e))}var f=Object.prototype.constructor.toString();function p(e){if(!e||"object"!=typeof e)return!1;const t=c(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)===f}function m(e,t){0===y(e)?Object.entries(e).forEach((([r,a])=>{t(r,a,e)})):e.forEach(((r,a)=>t(a,r,e)))}function y(e){const t=e[l];return t?t.type_:Array.isArray(e)?1:_(e)?2:g(e)?3:0}function b(e,t){return 2===y(e)?e.has(t):Object.prototype.hasOwnProperty.call(e,t)}function h(e,t,r){const a=y(e);2===a?e.set(t,r):3===a?e.add(r):e[t]=r}function _(e){return e instanceof Map}function g(e){return e instanceof Set}function v(e){return e.copy_||e.base_}function N(e,t){if(_(e))return new Map(e);if(g(e))return new Set(e);if(Array.isArray(e))return Array.prototype.slice.call(e);if(!t&&p(e)){if(!c(e)){const t=Object.create(null);return Object.assign(t,e)}return{...e}}const r=Object.getOwnPropertyDescriptors(e);delete r[l];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(c(e),r)}function E(e,t=!1){return w(e)||u(e)||!d(e)||(y(e)>1&&(e.set=e.add=e.clear=e.delete=S),Object.freeze(e),t&&m(e,((e,t)=>E(t,!0)))),e}function S(){i(2)}function w(e){return Object.isFrozen(e)}var C,F={};function O(e){const t=F[e];return t||i(0,e),t}function P(){return C}function j(e,t){t&&(O("Patches"),e.patches_=[],e.inversePatches_=[],e.patchListener_=t)}function k(e){z(e),e.drafts_.forEach(x),e.drafts_=null}function z(e){e===C&&(C=e.parent_)}function D(e){return C={drafts_:[],parent_:C,immer_:e,canAutoFreeze_:!0,unfinalizedDrafts_:0}}function x(e){const t=e[l];0===t.type_||1===t.type_?t.revoke_():t.revoked_=!0}function A(e,t){t.unfinalizedDrafts_=t.drafts_.length;const r=t.drafts_[0];return void 0!==e&&e!==r?(r[l].modified_&&(k(t),i(4)),d(e)&&(e=L(t,e),t.parent_||q(t,e)),t.patches_&&O("Patches").generateReplacementPatches_(r[l].base_,e,t.patches_,t.inversePatches_)):e=L(t,r,[]),k(t),t.patches_&&t.patchListener_(t.patches_,t.inversePatches_),e!==n?e:void 0}function L(e,t,r){if(w(t))return t;const a=t[l];if(!a)return m(t,((n,o)=>V(e,a,t,n,o,r))),t;if(a.scope_!==e)return t;if(!a.modified_)return q(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),m(n,((n,l)=>V(e,a,t,n,l,r,o))),q(e,t,!1),r&&e.patches_&&O("Patches").generatePatches_(a,r,e.patches_,e.inversePatches_)}return a.copy_}function V(e,t,r,a,n,o,l){if("production"!==process.env.NODE_ENV&&n===r&&i(5),u(n)){const l=L(e,n,o&&t&&3!==t.type_&&!b(t.assigned_,a)?o.concat(a):void 0);if(h(r,a,l),!u(l))return;e.canAutoFreeze_=!1}else l&&r.add(n);if(d(n)&&!w(n)){if(!e.immer_.autoFreeze_&&e.unfinalizedDrafts_<1)return;L(e,n),t&&t.scope_.parent_||q(e,n)}}function q(e,t,r=!1){!e.parent_&&e.immer_.autoFreeze_&&e.canAutoFreeze_&&E(t,r)}var B={get(e,t){if(t===l)return e;const r=v(e);if(!b(r,t))return function(e,t,r){const a=I(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_||!d(a)?a:a===$(e.base_,t)?(T(e),e.copy_[t]=W(a,e)):a},has:(e,t)=>t in v(e),ownKeys:e=>Reflect.ownKeys(v(e)),set(e,t,r){const a=I(v(e),t);if(a?.set)return a.set.call(e.draft_,r),!0;if(!e.modified_){const a=$(v(e),t),s=a?.[l];if(s&&s.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||b(e.base_,t)))return!0;T(e),R(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!==$(e.base_,t)||t in e.base_?(e.assigned_[t]=!1,T(e),R(e)):delete e.assigned_[t],e.copy_&&delete e.copy_[t],!0),getOwnPropertyDescriptor(e,t){const r=v(e),a=Reflect.getOwnPropertyDescriptor(r,t);return a?{writable:!0,configurable:1!==e.type_||"length"!==t,enumerable:a.enumerable,value:r[t]}:a},defineProperty(){i(11)},getPrototypeOf:e=>c(e.base_),setPrototypeOf(){i(12)}},M={};function $(e,t){const r=e[l];return(r?v(r):e)[t]}function I(e,t){if(!(t in e))return;let r=c(e);for(;r;){const e=Object.getOwnPropertyDescriptor(r,t);if(e)return e;r=c(r)}}function R(e){e.modified_||(e.modified_=!0,e.parent_&&R(e.parent_))}function T(e){e.copy_||(e.copy_=N(e.base_,e.scope_.immer_.useStrictShallowCopy_))}m(B,((e,t)=>{M[e]=function(){return arguments[0]=arguments[0][0],t.apply(this,arguments)}})),M.deleteProperty=function(e,t){return"production"!==process.env.NODE_ENV&&isNaN(parseInt(t))&&i(13),M.set.call(this,e,t,void 0)},M.set=function(e,t,r){return"production"!==process.env.NODE_ENV&&"length"!==t&&isNaN(parseInt(t))&&i(14),B.set.call(this,e[0],t,r,e[0])};function W(e,t){const r=_(e)?O("MapSet").proxyMap_(e,t):g(e)?O("MapSet").proxySet_(e,t):function(e,t){const r=Array.isArray(e),a={type_:r?1:0,scope_:t?t.scope_:P(),modified_:!1,finalized_:!1,assigned_:{},parent_:t,base_:e,draft_:null,copy_:null,revoke_:null,isManual_:!1};let n=a,o=B;r&&(n=[a],o=M);const{revoke:l,proxy:s}=Proxy.revocable(n,o);return a.draft_=s,a.revoke_=l,s}(e,t);return(t?t.scope_:P()).drafts_.push(r),r}function U(e){if(!d(e)||w(e))return e;const t=e[l];let r;if(t){if(!t.modified_)return t.base_;t.finalized_=!0,r=N(e,t.scope_.immer_.useStrictShallowCopy_)}else r=N(e,!0);return m(r,((e,t)=>{h(r,e,U(t))})),t&&(t.finalized_=!1),r}var K=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&&i(6),void 0!==r&&"function"!=typeof r&&i(7),d(e)){const n=D(this),o=W(e,void 0);let l=!0;try{a=t(o),l=!1}finally{l?k(n):z(n)}return j(n,r),A(a,n)}if(!e||"object"!=typeof e){if(a=t(e),void 0===a&&(a=e),a===n&&(a=void 0),this.autoFreeze_&&E(a,!0),r){const t=[],n=[];O("Patches").generateReplacementPatches_(e,a,t,n),r(t,n)}return a}i(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){d(e)||i(8),u(e)&&(e=function(e){u(e)||i(10,e);return U(e)}(e));const t=D(this),r=W(e,void 0);return r[l].isManual_=!0,z(t),r}finishDraft(e,t){const r=e&&e[l];r&&r.isManual_||i(9);const{scope_:a}=r;return j(a,t),A(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=O("Patches").applyPatches_;return u(e)?a(e,t):this.produce(e,(e=>a(e,t)))}},G=K.produce;K.produceWithPatches.bind(K),K.setAutoFreeze.bind(K),K.setUseStrictShallowCopy.bind(K),K.applyPatches.bind(K),K.createDraft.bind(K),K.finishDraft.bind(K);const X=({error:e})=>e?r.default.createElement("div",{style:{color:"red"}},e):null,H=({children:e,fieldName:t,containerClassName:a,containerStyle:n,labelClassName:o,labelStyle:l,label:s,showFieldErrors:i,error:c})=>r.default.createElement("div",{key:t,className:`${a}`,style:n},r.default.createElement("label",{className:`${o}`,style:l,htmlFor:t},s),e,i&&r.default.createElement(X,{error:c})),J=({fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,data:c,type:u,placeholder:d,handleFieldBlur:f,handleChange:p,className:m,style:y,fieldValue:b})=>r.default.createElement(H,{fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},r.default.createElement("input",{id:e,type:u,value:c.state[e],placeholder:d,onBlur:()=>f(e),onChange:p,className:m,style:y,"aria-invalid":!!i,"aria-describedby":i?`${e}-error`:"","aria-required":b.required?"true":"false"})),Q=({fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,data:c,handleFieldBlur:u,handleChange:d,className:f,style:p,fieldValue:m,options:y})=>r.default.createElement(H,{fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},y.map((t=>r.default.createElement("label",{key:t},r.default.createElement("input",{type:"radio",value:t,checked:c.state[e]===t,onBlur:()=>u(e),onChange:t=>d(e,t.target.value),className:f,style:p,"aria-invalid":!!i,"aria-describedby":i?"name-error":"","aria-required":m.required?"true":"false"}),t)))),Y=({fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,data:c,handleFieldBlur:u,handleChange:d,className:f,style:p,fieldValue:m,options:y})=>r.default.createElement(H,{fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},r.default.createElement("select",{id:e,value:c.state[e],onBlur:()=>u(e),onChange:t=>d(e,t.target.value),className:f,style:p,"aria-invalid":!!i,"aria-describedby":i?"name-error":"","aria-required":m.required?"true":"false"},y.map((e=>r.default.createElement("option",{key:e,value:e},e))))),Z=({fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,data:c,handleFieldBlur:u,handleChange:d,className:f,style:p,fieldValue:m,rows:y,cols:b})=>r.default.createElement(H,{fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},r.default.createElement("textarea",{id:e,value:c.state[e],onChange:t=>d(e,t.target.value),onBlur:()=>u(e),className:f,style:p,"aria-invalid":!!i,"aria-describedby":i?"name-error":"","aria-required":m.required?"true":"false",rows:m.rows||4,cols:m.cols||50})),ee=({fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i,handleChange:c,className:u,style:d,fieldValue:f})=>r.default.createElement(H,{fieldName:e,containerClassName:t,containerStyle:a,labelClassName:n,labelStyle:o,label:l,showFieldErrors:s,error:i},r.default.createElement("input",{id:e,type:"file",onChange:t=>c(e,t.target.files),className:u,style:d,"aria-invalid":!!i,"aria-describedby":i?"name-error":"","aria-required":f.required?"true":"false"})),te=(t,n,o={hideSubmitButton:!1,disableValidation:!1,customSubmitButtonText:"",showErrorSummary:!0,showFieldErrors:!0,className:""})=>{const{hideSubmitButton:l=!1,disableValidation:s=!1,customSubmitButtonText:i="",showErrorSummary:c=!0,showFieldErrors:u=!0,className:d=""}=o,f=e.useMemo((()=>Object.entries(t).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:{}})),[t]),[p,m]=e.useState({}),[y,b]=(h=(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}`)}},_=f,v=e.useMemo((function(){return G(h)}),[h]),e.useReducer(v,_,g));var h,_,g,v;const N=e.useCallback((async(e,r)=>{if("file"===t[e].type)b({type:"updateField",key:e,payload:r});else{const t=f.format[e]&&"function"==typeof f.format[e]?f.format[e](r):r;b({type:"updateField",key:e,payload:t})}}),[]),E=e.useCallback((e=>{u||m((t=>({...t,[e]:!0})))}),[]),S=e.useCallback((async e=>{e.preventDefault(),b({type:"updateLoading",payload:!0});const r=Object.keys(t).reduce(((e,t)=>(e[t]=!0,e)),{});m(r);try{b({type:"updateLoading",payload:!1}),n&&n(y.state)}catch(e){b({type:"updateLoading",payload:!1}),b({type:"updateSubmissionError",payload:e.message})}}),[]),w=e.useCallback(((e,n)=>{const o=t[e],l=y.errors[e];if(!(!o.showWhen||o.showWhen(y.state)))return null;const s={fieldName:e,containerClassName:n.containerClassName,containerStyle:n.containerStyle,labelClassName:n.labelClassName,labelStyle:n.labelStyle,label:n.label,showFieldErrors:mergedOptions.showFieldErrors,error:l,data:y,handleFieldBlur:E,handleChange:N,className:n.className,style:n.style,fieldValue:n};switch(n.type){case"text":case"email":case"password":case"number":case"date":case"time":case"checkbox":return r.default.createElement(J,a({},s,{type:n.type,placeholder:n.placeholder||e.toLocaleUpperCase()}));case"radio":return r.default.createElement(Q,a({},s,{options:n.options}));case"select":return r.default.createElement(Y,a({},s,{options:n.options}));case"textarea":return r.default.createElement(Z,a({},s,{rows:n.rows,cols:n.cols}));case"file":return r.default.createElement(ee,s);default:return r.default.createElement("div",{key:e},r.default.createElement("label",{htmlFor:e},e),r.default.createElement("input",{id:e,type:"text",placeholder:e.toLocaleUpperCase(),value:y.state[e],onChange:t=>N(e,t.target.value),"aria-invalid":!!l,"aria-describedby":l?`${e}-error`:"","aria-required":n.required?"true":"false"}))}}),[y.state,y.errors,mergedOptions.showFieldErrors]),C=e.useMemo((()=>Object.entries(t).map((([e,t])=>w(e,t)))),[y.state,y.errors,t,u]),F=({fieldName:e})=>{const t=y.errors[e];return t?r.default.createElement("div",null,t):null};return{form:r.default.createElement("form",{onSubmit:S},C,c&&Object.values(y.errors).some((e=>""!==e))&&r.default.createElement("div",{style:{color:"red"}},y.submissionError&&r.default.createElement("div",null,y.submissionError),Object.keys(y.errors).map((e=>r.default.createElement(F,{key:e,fieldName:e})))),!l&&r.default.createElement("button",{type:"submit",disabled:y.isLoading,"aria-label":i||"Submit","aria-disabled":y.isLoading?"true":"false"},y.isLoading?"Loading...":i||"Submit")),state:{...y.state},errors:{...y.errors},isLoading:y.isLoading,reset:()=>{b({type:"updateField",payload:f.state}),b({type:"resetErrors"})}}};exports.SmartForm=({children:e,onSubmit:t,options:a})=>{const n=r.default.Children.toArray(e).reduce(((e,t)=>(t.props&&t.props.name&&(e[t.props.name]=""),e)),{}),{form:o,state:l}=te(n,t,a);return r.default.createElement("div",null,o)},exports.useSelect=function(){const t=e.useRef(null);return{selectRef:t,getValue:()=>t?.current?t?.current?.value:null,setValue:e=>{t?.current&&(t.current.value=e)}}},exports.useSmartForm=te;