Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

form-with-state

Package Overview
Dependencies
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

form-with-state - npm Package Compare versions

Comparing version 0.0.1 to 0.1.44

1

dist/form-with-state.cjs.development.js

@@ -443,2 +443,3 @@ 'use strict';

return React__default.createElement("form", {
"aria-label": "form",
className: className,

@@ -445,0 +446,0 @@ style: styles,

2

dist/form-with-state.cjs.production.min.js

@@ -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:{},c=i.iterator||"@@iterator",l=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,c,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(C([])));E&&E!==n&&r.call(E,c)&&(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,c){var l=p(e[a],e,o);if("throw"!==l.type){var u=l.arg,s=u.value;return s&&"object"==typeof s&&r.call(s,"__await")?t.resolve(s.__await).then((function(e){n("next",e,i,c)}),(function(e){n("throw",e,i,c)})):t.resolve(s).then((function(e){u.value=e,i(u)}),(function(e){return n("throw",e,i,c)}))}c(l.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 c=r.delegate;if(c){var l=N(c,r);if(l){if(l===v)continue;return l}}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[c];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,l,(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,c,(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 c.type="throw",c.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],c=i.completion;if("root"===i.tryLoc)return a("end");if(i.tryLoc<=this.prev){var l=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(l&&u){if(this.prev<i.catchLoc)return a(i.catchLoc,!0);if(this.prev<i.finallyLoc)return a(i.finallyLoc)}else if(l){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 c=e[o](i),l=c.value}catch(e){return void n(e)}c.done?t(l):Promise.resolve(l).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 c(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 l(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=t.useReducer(f,e.initialValues);return n.createElement(s.Provider,{value:{state:r[0],dispatch:r[1]}},n.createElement(h,Object.assign({},e)))},h=function(e){var r=e.children,i=e.className,c=e.onSubmit,l=e.persistData,u=e.styles,f=t.useContext(s),p=f.state,h=f.dispatch,d=t.useCallback(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=c,!e.t0){e.next=5;break}return e.next=5,c(p);case 5:l||h&&h({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 c(e){o(i,r,a,c,l,"next",e)}function l(e){o(i,r,a,c,l,"throw",e)}c(void 0)}))});return function(e){return t.apply(this,arguments)}}(),[]);return n.createElement("form",{className:i,style:u,onSubmit:d},n.createElement(n.Fragment,null,r))},d=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}},m=r.label(u||(u=l(["\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"]))),v=["label","required","style","className","name"],y=["label","required","style","className","name"],g=["label","required","style","className","name"],b=["label","name"],w=Object.assign(p,{TextField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,l=e.className,u=e.name,s=c(e,v),f=d(),p=f.state,h=f.setProp,y=t.useState(),g=y[0],b=y[1];t.useEffect((function(){b(p[u]&&String(p[u])||"")}),[p,b]);var w=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:l,style:i},n.createElement(n.Fragment,null,n.createElement(m,null,n.createElement("input",Object.assign({type:"text",className:"input",required:o,value:g,onChange:function(e){h({name:u,value:e.target.value})},name:u},s)),n.createElement("span",null,w))))},TextArea:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,l=e.className,u=e.name,s=c(e,y),f=d(),p=f.setProp,h=f.state,v=t.useState(),g=v[0],b=v[1];return t.useEffect((function(){b(h[u]&&String(h[u])||"")}),[h,b]),n.createElement("div",{className:l,style:i},n.createElement(m,null,n.createElement("textarea",Object.assign({className:"textarea",required:o,value:g,onChange:function(e){p({name:u,value:e.target.value})},name:u},s)),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,l=e.className,u=e.name,s=c(e,g),f=t.useState(!1),p=f[0],h=f[1],v=d(),y=v.state,b=v.setProp,w=t.useState(),x=w[0],E=w[1];t.useEffect((function(){E(y[u]&&String(y[u])||"")}),[y,E]);var L=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:l,style:i},n.createElement(m,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 h(!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=c(e,b),o=d(),i=o.state,l=o.setProp,u=t.useState(!!i[r]),s=u[0],f=u[1];return t.useEffect((function(){f(!!i[r])}),[i,f]),n.createElement("label",Object.assign({},a,{className:"container"}),n.createElement("input",{checked:s,type:"checkbox",onChange:function(e){l({name:r,value:e.target.value})}}),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=w,exports.default=w;
"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:{},c=i.iterator||"@@iterator",l=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,c,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(C([])));E&&E!==n&&r.call(E,c)&&(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,c){var l=p(e[a],e,o);if("throw"!==l.type){var u=l.arg,s=u.value;return s&&"object"==typeof s&&r.call(s,"__await")?t.resolve(s.__await).then((function(e){n("next",e,i,c)}),(function(e){n("throw",e,i,c)})):t.resolve(s).then((function(e){u.value=e,i(u)}),(function(e){return n("throw",e,i,c)}))}c(l.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 c=r.delegate;if(c){var l=N(c,r);if(l){if(l===v)continue;return l}}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[c];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,l,(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,c,(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 c.type="throw",c.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],c=i.completion;if("root"===i.tryLoc)return a("end");if(i.tryLoc<=this.prev){var l=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(l&&u){if(this.prev<i.catchLoc)return a(i.catchLoc,!0);if(this.prev<i.finallyLoc)return a(i.finallyLoc)}else if(l){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 c=e[o](i),l=c.value}catch(e){return void n(e)}c.done?t(l):Promise.resolve(l).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 c(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 l(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=t.useReducer(f,e.initialValues);return n.createElement(s.Provider,{value:{state:r[0],dispatch:r[1]}},n.createElement(h,Object.assign({},e)))},h=function(e){var r=e.children,i=e.className,c=e.onSubmit,l=e.persistData,u=e.styles,f=t.useContext(s),p=f.state,h=f.dispatch,d=t.useCallback(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=c,!e.t0){e.next=5;break}return e.next=5,c(p);case 5:l||h&&h({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 c(e){o(i,r,a,c,l,"next",e)}function l(e){o(i,r,a,c,l,"throw",e)}c(void 0)}))});return function(e){return t.apply(this,arguments)}}(),[]);return n.createElement("form",{"aria-label":"form",className:i,style:u,onSubmit:d},n.createElement(n.Fragment,null,r))},d=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}},m=r.label(u||(u=l(["\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"]))),v=["label","required","style","className","name"],y=["label","required","style","className","name"],g=["label","required","style","className","name"],b=["label","name"],w=Object.assign(p,{TextField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,l=e.className,u=e.name,s=c(e,v),f=d(),p=f.state,h=f.setProp,y=t.useState(),g=y[0],b=y[1];t.useEffect((function(){b(p[u]&&String(p[u])||"")}),[p,b]);var w=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:l,style:i},n.createElement(n.Fragment,null,n.createElement(m,null,n.createElement("input",Object.assign({type:"text",className:"input",required:o,value:g,onChange:function(e){h({name:u,value:e.target.value})},name:u},s)),n.createElement("span",null,w))))},TextArea:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,l=e.className,u=e.name,s=c(e,y),f=d(),p=f.setProp,h=f.state,v=t.useState(),g=v[0],b=v[1];return t.useEffect((function(){b(h[u]&&String(h[u])||"")}),[h,b]),n.createElement("div",{className:l,style:i},n.createElement(m,null,n.createElement("textarea",Object.assign({className:"textarea",required:o,value:g,onChange:function(e){p({name:u,value:e.target.value})},name:u},s)),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,l=e.className,u=e.name,s=c(e,g),f=t.useState(!1),p=f[0],h=f[1],v=d(),y=v.state,b=v.setProp,w=t.useState(),x=w[0],E=w[1];t.useEffect((function(){E(y[u]&&String(y[u])||"")}),[y,E]);var L=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:l,style:i},n.createElement(m,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 h(!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=c(e,b),o=d(),i=o.state,l=o.setProp,u=t.useState(!!i[r]),s=u[0],f=u[1];return t.useEffect((function(){f(!!i[r])}),[i,f]),n.createElement("label",Object.assign({},a,{className:"container"}),n.createElement("input",{checked:s,type:"checkbox",onChange:function(e){l({name:r,value:e.target.value})}}),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=w,exports.default=w;
//# sourceMappingURL=form-with-state.cjs.production.min.js.map

@@ -436,2 +436,3 @@ import React, { useReducer, useContext, useCallback, useState, useEffect } from 'react';

return React.createElement("form", {
"aria-label": "form",
className: className,

@@ -438,0 +439,0 @@ style: styles,

{
"version": "0.0.1",
"version": "0.1.44",
"keywords": [

@@ -78,3 +78,6 @@ "react",

"styled-components": "^5"
},
"dependencies": {
"@testing-library/react": "^14.2.1"
}
}

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc