form-with-state
Advanced tools
Comparing version 0.1.48 to 0.1.49
@@ -480,3 +480,3 @@ 'use strict'; | ||
React.useEffect(function () { | ||
setValue(state[name] && String(state[name]) || ""); | ||
setValue(state[name] && String(state[name]) || value); | ||
}, [state, setValue]); | ||
@@ -608,3 +608,3 @@ var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name); | ||
React.useEffect(function () { | ||
setValue(!!state[name]); | ||
setValue(!!state[name] || value); | ||
}, [state, setValue]); | ||
@@ -611,0 +611,0 @@ return React__default.createElement("label", Object.assign({}, extraProps, { |
@@ -1,2 +0,2 @@ | ||
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("styled-components"));function a(){a=function(){return t};var e,t={},n=Object.prototype,r=n.hasOwnProperty,o=Object.defineProperty||function(e,t,n){e[t]=n.value},i="function"==typeof Symbol?Symbol:{},l=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function s(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,n){return e[t]=n}}function f(e,t,n,r){var a=Object.create((t&&t.prototype instanceof y?t:y).prototype),i=new _(r||[]);return o(a,"_invoke",{value:j(e,n,i)}),a}function p(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}t.wrap=f;var h="suspendedStart",d="executing",m="completed",v={};function y(){}function g(){}function b(){}var w={};s(w,l,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(C([])));E&&E!==n&&r.call(E,l)&&(w=E);var L=b.prototype=y.prototype=Object.create(w);function O(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function k(e,t){function n(a,o,i,l){var c=p(e[a],e,o);if("throw"!==c.type){var u=c.arg,s=u.value;return s&&"object"==typeof s&&r.call(s,"__await")?t.resolve(s.__await).then((function(e){n("next",e,i,l)}),(function(e){n("throw",e,i,l)})):t.resolve(s).then((function(e){u.value=e,i(u)}),(function(e){return n("throw",e,i,l)}))}l(c.arg)}var a;o(this,"_invoke",{value:function(e,r){function o(){return new t((function(t,a){n(e,r,t,a)}))}return a=a?a.then(o,o):o()}})}function j(t,n,r){var a=h;return function(o,i){if(a===d)throw new Error("Generator is already running");if(a===m){if("throw"===o)throw i;return{value:e,done:!0}}for(r.method=o,r.arg=i;;){var l=r.delegate;if(l){var c=N(l,r);if(c){if(c===v)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(a===h)throw a=m,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=d;var u=p(t,n,r);if("normal"===u.type){if(a=r.done?m:"suspendedYield",u.arg===v)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(a=m,r.method="throw",r.arg=u.arg)}}}function N(t,n){var r=n.method,a=t.iterator[r];if(a===e)return n.delegate=null,"throw"===r&&t.iterator.return&&(n.method="return",n.arg=e,N(t,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),v;var o=p(a,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,v;var i=o.arg;return i?i.done?(n[t.resultName]=i.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,v):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,v)}function P(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function S(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function _(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(P,this),this.reset(!0)}function C(t){if(t||""===t){var n=t[l];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var a=-1,o=function n(){for(;++a<t.length;)if(r.call(t,a))return n.value=t[a],n.done=!1,n;return n.value=e,n.done=!0,n};return o.next=o}}throw new TypeError(typeof t+" is not iterable")}return g.prototype=b,o(L,"constructor",{value:b,configurable:!0}),o(b,"constructor",{value:g,configurable:!0}),g.displayName=s(b,u,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===g||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,b):(e.__proto__=b,s(e,u,"GeneratorFunction")),e.prototype=Object.create(L),e},t.awrap=function(e){return{__await:e}},O(k.prototype),s(k.prototype,c,(function(){return this})),t.AsyncIterator=k,t.async=function(e,n,r,a,o){void 0===o&&(o=Promise);var i=new k(f(e,n,r,a),o);return t.isGeneratorFunction(n)?i:i.next().then((function(e){return e.done?e.value:i.next()}))},O(L),s(L,u,"Generator"),s(L,l,(function(){return this})),s(L,"toString",(function(){return"[object Generator]"})),t.keys=function(e){var t=Object(e),n=[];for(var r in t)n.push(r);return n.reverse(),function e(){for(;n.length;){var r=n.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},t.values=C,_.prototype={constructor:_,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(S),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function a(r,a){return l.type="throw",l.arg=t,n.next=r,a&&(n.method="next",n.arg=e),!!a}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],l=i.completion;if("root"===i.tryLoc)return a("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return a(i.catchLoc,!0);if(this.prev<i.finallyLoc)return a(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return a(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return a(i.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var a=this.tryEntries[n];if(a.tryLoc<=this.prev&&r.call(a,"finallyLoc")&&this.prev<a.finallyLoc){var o=a;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=e,i.arg=t,o?(this.method="next",this.next=o.finallyLoc,v):this.complete(i)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),v},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),S(n),v}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var a=r.arg;S(n)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:C(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),v}},t}function o(e,t,n,r,a,o,i){try{var l=e[o](i),c=l.value}catch(e){return void n(e)}l.done?t(c):Promise.resolve(c).then(r,a)}function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}function c(e,t){return t||(t=e.slice(0)),e.raw=t,e}var u,s=n.createContext({state:{}}),f=function(e,t){var n;switch(t.type){case"SET_PROP":return i({},e,((n={})[t.payload.name]=t.payload.value,n));case"SET_EMPTY":return{};default:return e}},p=function(e){var r=e.children,i=e.className,l=e.onSubmit,c=e.persistData,u=e.styles,p=t.useReducer(f,{}),h=p[0],d=p[1],m=function(){var e,t=(e=a().mark((function e(t){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.preventDefault(),e.t0=l,!e.t0){e.next=5;break}return e.next=5,l(h);case 5:c||d&&d({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var t=this,n=arguments;return new Promise((function(r,a){var i=e.apply(t,n);function l(e){o(i,r,a,l,c,"next",e)}function c(e){o(i,r,a,l,c,"throw",e)}l(void 0)}))});return function(e){return t.apply(this,arguments)}}();return n.createElement(s.Provider,{value:{state:h,dispatch:d}},n.createElement("form",{"aria-label":"form",className:i,style:u,onSubmit:m},n.createElement(n.Fragment,null,r)))},h=function(){var e=t.useContext(s),n=e.state,r=e.dispatch;return{setProp:t.useCallback((function(e){r&&r({type:"SET_PROP",payload:e})}),[n,r]),state:n}},d=r.label(u||(u=c(["\n position: relative;\n display: flex;\n background-color: #ffffff00;\n\n & .input {\n background-color: #fff;\n width: 100%;\n padding: 1rem;\n margin: .5rem;\n outline: 0;\n border: 1px solid rgba(105, 105, 105, 0.397);\n border-radius: 10px;\n }\n & .input + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n left: 1rem;\n top: 1.5rem;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n }\n & .input + span + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n right: 1rem;\n top: 1.5rem;\n color: grey;\n font-size: 0.9em;\n cursor: pointer;\n transition: 0.3s ease;\n }\n & .input:placeholder-shown + span {\n top: 1.5rem;\n font-size: 0.9em;\n }\n & .input:focus + span, & .input:valid + span {\n top: 3rem;\n font-size: 0.7em;\n font-weight: 600;\n }\n & .input:valid + span {\n color: green;\n }\n &.invalid .input:invalid + span {\n color: red;\n }\n\n\n & .input + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n left: 1rem;\n top: 1.5rem;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n }\n\n & .input:placeholder-shown + span {\n top: 1.5rem;\n font-size: 0.9em;\n }\n\n & .input:focus + span, & .input:valid + span {\n top: 3rem;\n font-size: 0.7em;\n font-weight: 600;\n }\n & .input:valid + span {\n color: green;\n }\n & .textarea {\n resize: none;\n background-color: #fff;\n width: 100%;\n padding: 1rem;\n margin: .5rem;\n outline: 0;\n border: 1px solid rgba(105, 105, 105, 0.397);\n border-radius: 10px;\n }\n\n & .textarea + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n left: 1rem;\n top: 1.5rem;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n }\n\n & .textarea:placeholder-shown + span {\n top: 1.5rem;\n font-size: 0.9em;\n }\n\n & .textarea:focus + span, & .textarea:valid + span {\n top: 4rem;\n font-size: 0.7em;\n font-weight: 600;\n }\n & .textarea:valid + span {\n color: green;\n }\n &.invalid .textarea:invalid + span {\n color: red;\n }\n"]))),m=["label","required","style","className","name","initialValue"],v=["label","required","style","className","name","initialValue"],y=["label","required","style","className","name"],g=["label","name","initialValue"],b=Object.assign(p,{TextField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,u=e.name,s=e.initialValue,f=l(e,m),p=h(),v=p.state,y=p.setProp,g=t.useState(s),b=g[0],w=g[1];t.useEffect((function(){w(v[u]&&String(v[u])||"")}),[v,w]);var x=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:c,style:i},n.createElement(n.Fragment,null,n.createElement(d,null,n.createElement("input",Object.assign({type:"text",className:"input",required:o,value:b,onChange:function(e){y({name:u,value:e.target.value})},name:u},f)),n.createElement("span",null,x))))},TextArea:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,u=e.name,s=e.initialValue,f=l(e,v),p=h(),m=p.setProp,y=p.state,g=t.useState(s),b=g[0],w=g[1];return t.useEffect((function(){w(y[u]&&String(y[u])||"")}),[y,w]),n.createElement("div",{className:c,style:i},n.createElement(d,null,n.createElement("textarea",Object.assign({className:"textarea",required:o,value:b,onChange:function(e){m({name:u,value:e.target.value})},name:u},f)),n.createElement("span",null,o?"*":"",e.label?a:e.name)))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,u=e.name,s=l(e,y),f=t.useState(!1),p=f[0],m=f[1],v=h(),g=v.state,b=v.setProp,w=t.useState(),x=w[0],E=w[1];t.useEffect((function(){E(g[u]&&String(g[u])||"")}),[g,E]);var L=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:c,style:i},n.createElement(d,null,n.createElement("input",Object.assign({type:p?"text":"password",className:"input",required:o,value:x,onChange:function(e){b({name:u,value:e.target.value})},name:u},s)),n.createElement("span",null,L),n.createElement("span",{onClick:function(){return m(!p)}},p?n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256"},n.createElement("path",{fill:"currentColor",d:"M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.11 127.11 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm89 121.69a32 32 0 0 1-41.67-45.85Zm104.39-25.05c-.42.94-10.55 23.37-33.36 43.8a8 8 0 0 1-11.26-.57L101.4 63.07a8 8 0 0 1 4.6-13.28A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z"})):n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24"},n.createElement("path",{fill:"currentColor",d:"M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z"})))))},CheckBox:function(e){var r=e.name,a=e.initialValue,o=l(e,g),i=h(),c=i.state,u=i.setProp,s=t.useState(a),f=s[0],p=s[1];return t.useEffect((function(){p(!!c[r])}),[c,p]),n.createElement("label",Object.assign({},o,{className:"container"}),n.createElement("input",{checked:f,type:"checkbox",onChange:function(e){u({name:r,value:e.target.checked})}}),n.createElement("div",{className:"checkmark"}))},Submit:function(e){var t=e.label;return n.createElement("button",{type:"submit",style:i({border:"none",outline:"none",backgroundColor:"royalblue",padding:10,borderRadius:10,color:"#fff",fontSize:16,transform:".3s ease",width:"100%",alignSelf:"end"},e.style)},t)}});exports.Form=b,exports.default=b; | ||
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("styled-components"));function a(){a=function(){return t};var e,t={},n=Object.prototype,r=n.hasOwnProperty,o=Object.defineProperty||function(e,t,n){e[t]=n.value},i="function"==typeof Symbol?Symbol:{},l=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function s(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,n){return e[t]=n}}function f(e,t,n,r){var a=Object.create((t&&t.prototype instanceof y?t:y).prototype),i=new _(r||[]);return o(a,"_invoke",{value:j(e,n,i)}),a}function p(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}t.wrap=f;var h="suspendedStart",d="executing",m="completed",v={};function y(){}function g(){}function b(){}var w={};s(w,l,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(C([])));E&&E!==n&&r.call(E,l)&&(w=E);var L=b.prototype=y.prototype=Object.create(w);function O(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function k(e,t){function n(a,o,i,l){var c=p(e[a],e,o);if("throw"!==c.type){var u=c.arg,s=u.value;return s&&"object"==typeof s&&r.call(s,"__await")?t.resolve(s.__await).then((function(e){n("next",e,i,l)}),(function(e){n("throw",e,i,l)})):t.resolve(s).then((function(e){u.value=e,i(u)}),(function(e){return n("throw",e,i,l)}))}l(c.arg)}var a;o(this,"_invoke",{value:function(e,r){function o(){return new t((function(t,a){n(e,r,t,a)}))}return a=a?a.then(o,o):o()}})}function j(t,n,r){var a=h;return function(o,i){if(a===d)throw new Error("Generator is already running");if(a===m){if("throw"===o)throw i;return{value:e,done:!0}}for(r.method=o,r.arg=i;;){var l=r.delegate;if(l){var c=N(l,r);if(c){if(c===v)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(a===h)throw a=m,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=d;var u=p(t,n,r);if("normal"===u.type){if(a=r.done?m:"suspendedYield",u.arg===v)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(a=m,r.method="throw",r.arg=u.arg)}}}function N(t,n){var r=n.method,a=t.iterator[r];if(a===e)return n.delegate=null,"throw"===r&&t.iterator.return&&(n.method="return",n.arg=e,N(t,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),v;var o=p(a,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,v;var i=o.arg;return i?i.done?(n[t.resultName]=i.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,v):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,v)}function P(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function S(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function _(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(P,this),this.reset(!0)}function C(t){if(t||""===t){var n=t[l];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var a=-1,o=function n(){for(;++a<t.length;)if(r.call(t,a))return n.value=t[a],n.done=!1,n;return n.value=e,n.done=!0,n};return o.next=o}}throw new TypeError(typeof t+" is not iterable")}return g.prototype=b,o(L,"constructor",{value:b,configurable:!0}),o(b,"constructor",{value:g,configurable:!0}),g.displayName=s(b,u,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===g||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,b):(e.__proto__=b,s(e,u,"GeneratorFunction")),e.prototype=Object.create(L),e},t.awrap=function(e){return{__await:e}},O(k.prototype),s(k.prototype,c,(function(){return this})),t.AsyncIterator=k,t.async=function(e,n,r,a,o){void 0===o&&(o=Promise);var i=new k(f(e,n,r,a),o);return t.isGeneratorFunction(n)?i:i.next().then((function(e){return e.done?e.value:i.next()}))},O(L),s(L,u,"Generator"),s(L,l,(function(){return this})),s(L,"toString",(function(){return"[object Generator]"})),t.keys=function(e){var t=Object(e),n=[];for(var r in t)n.push(r);return n.reverse(),function e(){for(;n.length;){var r=n.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},t.values=C,_.prototype={constructor:_,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(S),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function a(r,a){return l.type="throw",l.arg=t,n.next=r,a&&(n.method="next",n.arg=e),!!a}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],l=i.completion;if("root"===i.tryLoc)return a("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return a(i.catchLoc,!0);if(this.prev<i.finallyLoc)return a(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return a(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return a(i.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var a=this.tryEntries[n];if(a.tryLoc<=this.prev&&r.call(a,"finallyLoc")&&this.prev<a.finallyLoc){var o=a;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=e,i.arg=t,o?(this.method="next",this.next=o.finallyLoc,v):this.complete(i)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),v},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),S(n),v}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var a=r.arg;S(n)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:C(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),v}},t}function o(e,t,n,r,a,o,i){try{var l=e[o](i),c=l.value}catch(e){return void n(e)}l.done?t(c):Promise.resolve(c).then(r,a)}function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}function c(e,t){return t||(t=e.slice(0)),e.raw=t,e}var u,s=n.createContext({state:{}}),f=function(e,t){var n;switch(t.type){case"SET_PROP":return i({},e,((n={})[t.payload.name]=t.payload.value,n));case"SET_EMPTY":return{};default:return e}},p=function(e){var r=e.children,i=e.className,l=e.onSubmit,c=e.persistData,u=e.styles,p=t.useReducer(f,{}),h=p[0],d=p[1],m=function(){var e,t=(e=a().mark((function e(t){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.preventDefault(),e.t0=l,!e.t0){e.next=5;break}return e.next=5,l(h);case 5:c||d&&d({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var t=this,n=arguments;return new Promise((function(r,a){var i=e.apply(t,n);function l(e){o(i,r,a,l,c,"next",e)}function c(e){o(i,r,a,l,c,"throw",e)}l(void 0)}))});return function(e){return t.apply(this,arguments)}}();return n.createElement(s.Provider,{value:{state:h,dispatch:d}},n.createElement("form",{"aria-label":"form",className:i,style:u,onSubmit:m},n.createElement(n.Fragment,null,r)))},h=function(){var e=t.useContext(s),n=e.state,r=e.dispatch;return{setProp:t.useCallback((function(e){r&&r({type:"SET_PROP",payload:e})}),[n,r]),state:n}},d=r.label(u||(u=c(["\n position: relative;\n display: flex;\n background-color: #ffffff00;\n\n & .input {\n background-color: #fff;\n width: 100%;\n padding: 1rem;\n margin: .5rem;\n outline: 0;\n border: 1px solid rgba(105, 105, 105, 0.397);\n border-radius: 10px;\n }\n & .input + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n left: 1rem;\n top: 1.5rem;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n }\n & .input + span + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n right: 1rem;\n top: 1.5rem;\n color: grey;\n font-size: 0.9em;\n cursor: pointer;\n transition: 0.3s ease;\n }\n & .input:placeholder-shown + span {\n top: 1.5rem;\n font-size: 0.9em;\n }\n & .input:focus + span, & .input:valid + span {\n top: 3rem;\n font-size: 0.7em;\n font-weight: 600;\n }\n & .input:valid + span {\n color: green;\n }\n &.invalid .input:invalid + span {\n color: red;\n }\n\n\n & .input + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n left: 1rem;\n top: 1.5rem;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n }\n\n & .input:placeholder-shown + span {\n top: 1.5rem;\n font-size: 0.9em;\n }\n\n & .input:focus + span, & .input:valid + span {\n top: 3rem;\n font-size: 0.7em;\n font-weight: 600;\n }\n & .input:valid + span {\n color: green;\n }\n & .textarea {\n resize: none;\n background-color: #fff;\n width: 100%;\n padding: 1rem;\n margin: .5rem;\n outline: 0;\n border: 1px solid rgba(105, 105, 105, 0.397);\n border-radius: 10px;\n }\n\n & .textarea + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n left: 1rem;\n top: 1.5rem;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n }\n\n & .textarea:placeholder-shown + span {\n top: 1.5rem;\n font-size: 0.9em;\n }\n\n & .textarea:focus + span, & .textarea:valid + span {\n top: 4rem;\n font-size: 0.7em;\n font-weight: 600;\n }\n & .textarea:valid + span {\n color: green;\n }\n &.invalid .textarea:invalid + span {\n color: red;\n }\n"]))),m=["label","required","style","className","name","initialValue"],v=["label","required","style","className","name","initialValue"],y=["label","required","style","className","name"],g=["label","name","initialValue"],b=Object.assign(p,{TextField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,u=e.name,s=e.initialValue,f=l(e,m),p=h(),v=p.state,y=p.setProp,g=t.useState(s),b=g[0],w=g[1];t.useEffect((function(){w(v[u]&&String(v[u])||b)}),[v,w]);var x=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:c,style:i},n.createElement(n.Fragment,null,n.createElement(d,null,n.createElement("input",Object.assign({type:"text",className:"input",required:o,value:b,onChange:function(e){y({name:u,value:e.target.value})},name:u},f)),n.createElement("span",null,x))))},TextArea:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,u=e.name,s=e.initialValue,f=l(e,v),p=h(),m=p.setProp,y=p.state,g=t.useState(s),b=g[0],w=g[1];return t.useEffect((function(){w(y[u]&&String(y[u])||"")}),[y,w]),n.createElement("div",{className:c,style:i},n.createElement(d,null,n.createElement("textarea",Object.assign({className:"textarea",required:o,value:b,onChange:function(e){m({name:u,value:e.target.value})},name:u},f)),n.createElement("span",null,o?"*":"",e.label?a:e.name)))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,u=e.name,s=l(e,y),f=t.useState(!1),p=f[0],m=f[1],v=h(),g=v.state,b=v.setProp,w=t.useState(),x=w[0],E=w[1];t.useEffect((function(){E(g[u]&&String(g[u])||"")}),[g,E]);var L=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:c,style:i},n.createElement(d,null,n.createElement("input",Object.assign({type:p?"text":"password",className:"input",required:o,value:x,onChange:function(e){b({name:u,value:e.target.value})},name:u},s)),n.createElement("span",null,L),n.createElement("span",{onClick:function(){return m(!p)}},p?n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256"},n.createElement("path",{fill:"currentColor",d:"M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.11 127.11 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm89 121.69a32 32 0 0 1-41.67-45.85Zm104.39-25.05c-.42.94-10.55 23.37-33.36 43.8a8 8 0 0 1-11.26-.57L101.4 63.07a8 8 0 0 1 4.6-13.28A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z"})):n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24"},n.createElement("path",{fill:"currentColor",d:"M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z"})))))},CheckBox:function(e){var r=e.name,a=e.initialValue,o=l(e,g),i=h(),c=i.state,u=i.setProp,s=t.useState(a),f=s[0],p=s[1];return t.useEffect((function(){p(!!c[r]||f)}),[c,p]),n.createElement("label",Object.assign({},o,{className:"container"}),n.createElement("input",{checked:f,type:"checkbox",onChange:function(e){u({name:r,value:e.target.checked})}}),n.createElement("div",{className:"checkmark"}))},Submit:function(e){var t=e.label;return n.createElement("button",{type:"submit",style:i({border:"none",outline:"none",backgroundColor:"royalblue",padding:10,borderRadius:10,color:"#fff",fontSize:16,transform:".3s ease",width:"100%",alignSelf:"end"},e.style)},t)}});exports.Form=b,exports.default=b; | ||
//# sourceMappingURL=form-with-state.cjs.production.min.js.map |
@@ -473,3 +473,3 @@ import React, { useReducer, useContext, useCallback, useState, useEffect } from 'react'; | ||
useEffect(function () { | ||
setValue(state[name] && String(state[name]) || ""); | ||
setValue(state[name] && String(state[name]) || value); | ||
}, [state, setValue]); | ||
@@ -601,3 +601,3 @@ var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name); | ||
useEffect(function () { | ||
setValue(!!state[name]); | ||
setValue(!!state[name] || value); | ||
}, [state, setValue]); | ||
@@ -604,0 +604,0 @@ return React.createElement("label", Object.assign({}, extraProps, { |
{ | ||
"version": "0.1.48", | ||
"version": "0.1.49", | ||
"keywords": [ | ||
@@ -4,0 +4,0 @@ "react", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
138467