New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
form-with-state
Advanced tools
form-with-state - npm Package Compare versions
Comparing version 0.1.65 to 0.1.66
@@ -408,3 +408,4 @@ 'use strict'; | ||
| var FormState = function FormState(_ref) { | ||
| var children = _ref.children, | ||
| var initialState = _ref.initialState, | ||
| children = _ref.children, | ||
| className = _ref.className, | ||
@@ -415,3 +416,3 @@ onSubmit = _ref.onSubmit, | ||
| var _useReducer = React.useReducer(reducer, { | ||
| data: {}, | ||
| data: initialState, | ||
| formData: new FormData() | ||
@@ -433,3 +434,3 @@ }), | ||
| _context.next = 5; | ||
| return onSubmit(state); | ||
| return onSubmit(state.data, state.formData); | ||
| case 5: | ||
@@ -468,3 +469,3 @@ if (!persistData) { | ||
| }); | ||
| var Button = /*#__PURE__*/styled.button(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n& {\n appearance: button;\n background-color: var(--primary--bg,#189ad6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n text-align: center;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n padding: .4rem;\n width: 100%;\n}\n&:after {\n background-clip: padding-box;\n background-color: var(--primary,#1CB0F6);\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: \"\";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\n&:main, &:focus {\n user-select: auto;\n}\n\n&:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n&:disabled {\n cursor: auto;\n}\n\n&:active:after {\n border-width: 0 0 0px;\n}\n\n&:active {\n padding-bottom: .3rem;\n}\n"]))); | ||
| var Button = /*#__PURE__*/styled.button(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n& {\n appearance: button;\n background-color: var(--primary--bg,#189ad6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n text-align: center;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n padding: .4rem;\n width: 100%;\n}\n&:after {\n background-clip: padding-box;\n background-color: var(--primary,#1CB0F6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: \"\";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\n&:main, &:focus {\n user-select: auto;\n}\n\n&:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n&:disabled {\n cursor: auto;\n}\n\n&:active:after {\n border-width: 0 0 0px;\n}\n\n&:active {\n padding-bottom: .3rem;\n}\n"]))); | ||
@@ -486,3 +487,3 @@ function useFormData(name) { | ||
| } | ||
| function useForm(payload) { | ||
| function useForm(name) { | ||
| var _useContext2 = React.useContext(context), | ||
@@ -497,8 +498,5 @@ state = _useContext2.state, | ||
| }, [dispatch]); | ||
| React.useEffect(function () { | ||
| setProp(payload); | ||
| }, []); | ||
| return { | ||
| setProp: setProp, | ||
| value: state.data[payload.name] | ||
| value: state.data[name] | ||
| }; | ||
@@ -514,4 +512,4 @@ } | ||
| var _excluded = ["label", "required", "name", "initialValue"], | ||
| _excluded2 = ["label", "required", "name", "initialValue"]; | ||
| var _excluded = ["label", "required", "name"], | ||
| _excluded2 = ["label", "required", "name"]; | ||
| var TextField = function TextField(props) { | ||
@@ -522,9 +520,4 @@ var _props$label = props.label, | ||
| name = props.name, | ||
| _props$initialValue = props.initialValue, | ||
| initialValue = _props$initialValue === void 0 ? "" : _props$initialValue, | ||
| extraProps = _objectWithoutPropertiesLoose(props, _excluded); | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: initialValue | ||
| }), | ||
| var _useForm = useForm(name), | ||
| value = _useForm.value, | ||
@@ -539,3 +532,3 @@ setProp = _useForm.setProp; | ||
| required: required, | ||
| value: value, | ||
| value: value || "", | ||
| onChange: function onChange(e) { | ||
@@ -550,3 +543,3 @@ setProp({ | ||
| name: name, | ||
| value: value.trim() | ||
| value: value == null ? void 0 : value.trim() | ||
| }); | ||
@@ -562,9 +555,4 @@ }, | ||
| name = props.name, | ||
| _props$initialValue2 = props.initialValue, | ||
| initialValue = _props$initialValue2 === void 0 ? "" : _props$initialValue2, | ||
| extraProps = _objectWithoutPropertiesLoose(props, _excluded2); | ||
| var _useForm2 = useForm({ | ||
| name: name, | ||
| value: initialValue | ||
| }), | ||
| var _useForm2 = useForm(name), | ||
| value = _useForm2.value, | ||
@@ -577,3 +565,3 @@ setProp = _useForm2.setProp; | ||
| required: required, | ||
| value: value, | ||
| value: value || "", | ||
| onChange: function onChange(e) { | ||
@@ -588,3 +576,3 @@ setProp({ | ||
| name: name, | ||
| value: value.trim() | ||
| value: value == null ? void 0 : value.trim() | ||
| }); | ||
@@ -600,9 +588,4 @@ }, | ||
| label = _ref.label, | ||
| required = _ref.required, | ||
| _ref$initialValue = _ref.initialValue, | ||
| initialValue = _ref$initialValue === void 0 ? new Date() : _ref$initialValue; | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: initialValue | ||
| }), | ||
| required = _ref.required; | ||
| var _useForm = useForm(name), | ||
| value = _useForm.value, | ||
@@ -645,6 +628,3 @@ setProp = _useForm.setProp; | ||
| setShowText = _useState[1]; | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: "" | ||
| }), | ||
| var _useForm = useForm(name), | ||
| value = _useForm.value, | ||
@@ -659,3 +639,3 @@ setProp = _useForm.setProp; | ||
| required: required, | ||
| value: value, | ||
| value: value || "", | ||
| onChange: function onChange(e) { | ||
@@ -691,11 +671,7 @@ setProp({ | ||
| var _excluded$2 = ["label", "name", "initialValue"]; | ||
| var _excluded$2 = ["label", "name"]; | ||
| var CheckBox = function CheckBox(props) { | ||
| var name = props.name, | ||
| initialValue = props.initialValue, | ||
| extraProps = _objectWithoutPropertiesLoose(props, _excluded$2); | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: !!initialValue | ||
| }), | ||
| var _useForm = useForm(name), | ||
| value = _useForm.value, | ||
@@ -769,11 +745,6 @@ setProp = _useForm.setProp; | ||
| type = _ref3$type === void 0 ? "dataUrl" : _ref3$type, | ||
| style = _ref3.style, | ||
| _ref3$initialValue = _ref3.initialValue, | ||
| initialValue = _ref3$initialValue === void 0 ? "" : _ref3$initialValue; | ||
| style = _ref3.style; | ||
| var _useFormData2 = useFormData(name), | ||
| appendData = _useFormData2.appendData; | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: initialValue | ||
| }), | ||
| var _useForm = useForm(name), | ||
| setProp = _useForm.setProp, | ||
@@ -902,7 +873,11 @@ value = _useForm.value; | ||
| "$name": name | ||
| }, extraProps), React__default.createElement(Button, { | ||
| }, _extends({ | ||
| style: { | ||
| border: "none" | ||
| } | ||
| }, extraProps)), React__default.createElement(Button, { | ||
| name: name, | ||
| className: "btn", | ||
| type: "submit" | ||
| }, label)); | ||
| }, label || name)); | ||
| }; | ||
@@ -909,0 +884,0 @@ |
@@ -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,i=Object.defineProperty||function(e,t,n){e[t]=n.value},o="function"==typeof Symbol?Symbol:{},l=o.iterator||"@@iterator",c=o.asyncIterator||"@@asyncIterator",u=o.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 d(e,t,n,r){var a=Object.create((t&&t.prototype instanceof g?t:g).prototype),o=new D(r||[]);return i(a,"_invoke",{value:O(e,n,o)}),a}function p(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}t.wrap=d;var f="suspendedStart",m="executing",h="completed",v={};function g(){}function b(){}function y(){}var w={};s(w,l,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(F([])));E&&E!==n&&r.call(E,l)&&(w=E);var C=y.prototype=g.prototype=Object.create(w);function k(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function L(e,t){function n(a,i,o,l){var c=p(e[a],e,i);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,o,l)}),(function(e){n("throw",e,o,l)})):t.resolve(s).then((function(e){u.value=e,o(u)}),(function(e){return n("throw",e,o,l)}))}l(c.arg)}var a;i(this,"_invoke",{value:function(e,r){function i(){return new t((function(t,a){n(e,r,t,a)}))}return a=a?a.then(i,i):i()}})}function O(t,n,r){var a=f;return function(i,o){if(a===m)throw new Error("Generator is already running");if(a===h){if("throw"===i)throw o;return{value:e,done:!0}}for(r.method=i,r.arg=o;;){var l=r.delegate;if(l){var c=j(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===f)throw a=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=m;var u=p(t,n,r);if("normal"===u.type){if(a=r.done?h:"suspendedYield",u.arg===v)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(a=h,r.method="throw",r.arg=u.arg)}}}function j(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,j(t,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),v;var i=p(a,t.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,v;var o=i.arg;return o?o.done?(n[t.resultName]=o.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,v):o:(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 _(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function D(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(P,this),this.reset(!0)}function F(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,i=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 i.next=i}}throw new TypeError(typeof t+" is not iterable")}return b.prototype=y,i(C,"constructor",{value:y,configurable:!0}),i(y,"constructor",{value:b,configurable:!0}),b.displayName=s(y,u,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===b||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,y):(e.__proto__=y,s(e,u,"GeneratorFunction")),e.prototype=Object.create(C),e},t.awrap=function(e){return{__await:e}},k(L.prototype),s(L.prototype,c,(function(){return this})),t.AsyncIterator=L,t.async=function(e,n,r,a,i){void 0===i&&(i=Promise);var o=new L(d(e,n,r,a),i);return t.isGeneratorFunction(n)?o:o.next().then((function(e){return e.done?e.value:o.next()}))},k(C),s(C,u,"Generator"),s(C,l,(function(){return this})),s(C,"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=F,D.prototype={constructor:D,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(_),!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 i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],l=o.completion;if("root"===o.tryLoc)return a("end");if(o.tryLoc<=this.prev){var c=r.call(o,"catchLoc"),u=r.call(o,"finallyLoc");if(c&&u){if(this.prev<o.catchLoc)return a(o.catchLoc,!0);if(this.prev<o.finallyLoc)return a(o.finallyLoc)}else if(c){if(this.prev<o.catchLoc)return a(o.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return a(o.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 i=a;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var o=i?i.completion:{};return o.type=e,o.arg=t,i?(this.method="next",this.next=i.finallyLoc,v):this.complete(o)},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),_(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;_(n)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:F(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),v}},t}function i(e,t,n,r,a,i,o){try{var l=e[i](o),c=l.value}catch(e){return void n(e)}l.done?t(c):Promise.resolve(c).then(r,a)}function o(){return(o=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={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[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,d=n.createContext({state:{data:{},formData:new FormData}}),p=function(e,t){var n;switch(t.type){case"SET_PROP":return o({},e,{data:o({},e.data,(n={},n[t.payload.name]=t.payload.value,n))});case"SET_EMPTY":return{data:{},formData:new FormData};case"SET_PROP_FORMDATA":return e.formData.delete(t.payload.name),Array.from(t.payload.value).forEach((function(n){e.formData.append(t.payload.name,n)})),e;default:return e}},f=function(e){var r=e.children,o=e.className,l=e.onSubmit,c=e.persistData,u=e.styles,s=t.useReducer(p,{data:{},formData:new FormData}),f=s[0],m=s[1],h=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(f);case 5:c||m&&m({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var t=this,n=arguments;return new Promise((function(r,a){var o=e.apply(t,n);function l(e){i(o,r,a,l,c,"next",e)}function c(e){i(o,r,a,l,c,"throw",e)}l(void 0)}))});return function(e){return t.apply(this,arguments)}}();return n.createElement(d.Provider,{value:{state:f,dispatch:m}},n.createElement("form",{"aria-label":"form",className:o,style:u,onSubmit:h},n.createElement(n.Fragment,null,r)))},m=r.label(u||(u=c(["\n grid-area: ",";\n position: relative;\n display: flex;\n background-color: #ffffff00;\n border: 1px solid var(--primary,#1CB0F6);\n border-radius: 10px;\n width: 100%;\n\n & input, & textarea {\n border-radius: 10px;\n border: none;\n padding:1rem;\n margin: 0;\n background-color: #fff;\n width: 100%;\n padding: 1rem;\n outline: 0;\n border: none;\n }\n & input + span, & textarea + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n left: 1rem;\n bottom: 25%;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n }\n /* & input:placeholder-shown + span, & textarea:placeholder-shown + span {\n top: 1.5rem;\n font-size: 0.9em;\n } */\n & input:focus + span, & input:valid + span, & textarea:focus + span, & textarea:valid + span {\n bottom: -.5rem;\n font-size: 0.7em;\n font-weight: 600;\n }\n & input:valid + span ,& textarea:valid + span {\n color: green;\n }\n &.invalid input:invalid + span, &.invalid textarea:invalid + span {\n color: red;\n }\n"])),(function(e){return e.$name})),h=r.button(s||(s=c(['\n& {\n appearance: button;\n background-color: var(--primary--bg,#189ad6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n text-align: center;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n padding: .4rem;\n width: 100%;\n}\n&:after {\n background-clip: padding-box;\n background-color: var(--primary,#1CB0F6);\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: "";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\n&:main, &:focus {\n user-select: auto;\n}\n\n&:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n&:disabled {\n cursor: auto;\n}\n\n&:active:after {\n border-width: 0 0 0px;\n}\n\n&:active {\n padding-bottom: .3rem;\n}\n'])));function v(e){var n=t.useContext(d),r=n.state,a=n.dispatch,i=t.useCallback((function(e){a&&a({type:"SET_PROP_FORMDATA",payload:e})}),[a]);return{value:r.formData.getAll(e),appendData:i}}function g(e){var n=t.useContext(d),r=n.state,a=n.dispatch,i=t.useCallback((function(e){a&&a({type:"SET_PROP",payload:e})}),[a]);return t.useEffect((function(){i(e)}),[]),{setProp:i,value:r.data[e.name]}}var b,y,w,x=["label","required","name","initialValue"],E=["label","required","name","initialValue"],C=r.input(b||(b=c(["\n cursor: pointer;\n visibility: hidden;\n &::before {\n position: absolute;\n top: 25%;\n left: .5rem;\n width: 2rem;\n height: 2rem;\n content: '';\n background-image: url('https://api.iconify.design/material-symbols:date-range-sharp.svg');\n background-repeat: no-repeat;\n background-position: left;\n background-size: contain;\n visibility: visible;\n }\n &::-webkit-calendar-picker-indicator {\n position: absolute;\n z-index: 1;\n left: 0;\n top: 0;\n\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n cursor: pointer;\n opacity: 0;\n visibility: visible;\n\n }\n &::after {\n position: absolute;\n top: 42%;\n left: 3rem;\n z-index:2;\n width: fit-content;\n height: inherit;\n content: '","';\n visibility: visible;\n }\n"])),(function(e){return e.$value})),k=["label","required","name"],L=["label","name","initialValue"],O=r.label(y||(y=c(["\n grid-area: ",";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 2px dashed #e8e8e8;\n background-color: var(--background,#a3a3a3);\n padding: 1.5rem;\n border-radius: 10px;\n box-shadow: 0px 1rem .7rem -1rem #e8e8e8;\n & .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n & .icon svg {\n height: 4rem;\n fill: #e8e8e8;\n }\n & .text {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n & .text span {\n font-weight: 400;\n color: #e8e8e8;\n }\n & input {\n display: none;\n }\n"])),(function(e){return e.$name}));function j(e){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 512 512"},e),n.createElement("path",{d:"M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z",fill:"currentColor"}))}var P=r.div(w||(w=c(["\nposition: relative;\ndisplay: flex;\nflex-direction:column;\nborder-bottom: 1px solid #000;\n\n& .head {\n display: flex;\n align-items: center;\n}\n& div {\n padding: .5rem 0;\n}\n\n& .head span{\n border: 1px solid #000;\n border-radius: 100%;\n padding: .1rem .25rem;\n position: absolute;\n right: 0;\n cursor: pointer;\n}\n"]))),_=["label","name"],D=Object.assign(f,{TextField:function(e){var t=e.label,r=void 0===t?"textfield":t,a=e.required,i=e.name,o=e.initialValue,c=void 0===o?"":o,u=l(e,x),s=g({name:i,value:c}),d=s.value,p=s.setProp,f=(a?"*":"")+(e.label?r:e.name);return n.createElement(m,Object.assign({$name:i},u),n.createElement("input",Object.assign({type:"text",className:"input",required:a,value:d,onChange:function(e){p({name:i,value:e.target.value})},onBlur:function(){return p({name:i,value:d.trim()})},name:i},u)),n.createElement("span",null,f))},TextArea:function(e){var t=e.label,r=void 0===t?"textfield":t,a=e.required,i=e.name,o=e.initialValue,c=void 0===o?"":o,u=l(e,E),s=g({name:i,value:c}),d=s.value,p=s.setProp;return n.createElement(m,Object.assign({$name:i},u),n.createElement("textarea",Object.assign({className:"textarea",required:a,value:d,onChange:function(e){p({name:i,value:e.target.value})},onBlur:function(){return p({name:i,value:d.trim()})},name:i},u)),n.createElement("span",null,a?"*":"",e.label?r:e.name))},DatePicker:function(e){var r=e.name,a=e.label,i=e.required,o=e.initialValue,l=void 0===o?new Date:o,c=g({name:r,value:l}),u=c.value,s=c.setProp,d=t.useCallback((function(e){var t=e.target;if(t.valueAsDate){var n=t.valueAsDate.getUTCDate(),a=t.valueAsDate.getMonth(),i=t.valueAsDate.getFullYear(),o=new Date(i,a,n);s({name:r,value:o})}}),[s]),p=(i?"*":"")+(a||r);return n.createElement(m,{$name:r},n.createElement(C,{type:"date",$value:null==u?void 0:u.toLocaleDateString("es-US"),onChange:d}),n.createElement("span",null,p))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,i=e.required,o=e.name,c=l(e,k),u=t.useState(!1),s=u[0],d=u[1],p=g({name:o,value:""}),f=p.value,h=p.setProp,v=(i?"*":"")+(e.label?a:e.name);return n.createElement(m,Object.assign({$name:o},c),n.createElement("input",Object.assign({type:s?"text":"password",className:"input",required:i,value:f,onChange:function(e){h({name:o,value:e.target.value})},name:o},c)),n.createElement("span",null,v),n.createElement("span",{onClick:function(){return d(!s)}},s?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 t=e.name,r=e.initialValue,a=l(e,L),i=g({name:t,value:!!r}),o=i.value,c=i.setProp;return n.createElement(m,Object.assign({},a,{$name:t}),n.createElement("input",{checked:o,type:"checkbox",onChange:function(e){c({name:t,value:e.target.checked})}}),n.createElement("div",{className:"checkmark"}))},FileGeneric:function(e){var t=e.name,r=e.style,a=e.multiple,i=v(t),o=i.appendData,l=i.value;return n.createElement(O,{style:r,$name:t},n.createElement("div",{className:"icon"},n.createElement("svg",{viewBox:"0 0 24 24",fill:"",xmlns:"http://www.w3.org/2000/svg"},n.createElement("g",{id:"SVGRepo_bgCarrier",strokeWidth:"0"}),n.createElement("g",{id:"SVGRepo_tracerCarrier","stroke-linecap":"round","stroke-linejoin":"round"}),n.createElement("g",{id:"SVGRepo_iconCarrier"},n.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11.8954 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z",fill:""})))),n.createElement("div",{className:"text"},n.createElement("span",null,l.length?"upload "+l.length+" file(s)":"Click to upload image")),n.createElement("input",{type:"file",multiple:a,onChange:function(e){var n=e.target;n.files&&o({name:t,value:n.files})}}))},FileImage:function(e){var t=e.name,r=e.type,a=void 0===r?"dataUrl":r,i=e.style,l=e.initialValue,c=void 0===l?"":l,u=v(t).appendData,s=g({name:t,value:c}),d=s.setProp,p=s.value;return n.createElement(O,{style:o({},i,{backgroundImage:"url("+p+")"}),$name:t},n.createElement("div",{className:"icon",style:{display:p?"none":"initial"}},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 36 36"},n.createElement("path",{fill:"currentColor",d:"M11.93 11a3 3 0 1 0-3 3a3 3 0 0 0 3-3m-4.6 0a1.6 1.6 0 1 1 1.6 1.6a1.6 1.6 0 0 1-1.6-1.6",className:"clr-i-outline--badged clr-i-outline-path-1--badged"}),n.createElement("path",{fill:"currentColor",d:"m17.38 20.77l-4-4a1 1 0 0 0-1.41 0L5.92 22.9v2.83l6.79-6.79L16 22.18l-3.75 3.75H15l8.45-8.45L30 24v-2.82l-5.81-5.81a1 1 0 0 0-1.41 0Z",className:"clr-i-outline--badged clr-i-outline-path-2--badged"}),n.createElement("path",{fill:"currentColor",d:"M32 13.22V30H4V6h18.5a7.49 7.49 0 0 1 .28-2H4a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V12.34a7.45 7.45 0 0 1-2 .88",className:"clr-i-outline--badged clr-i-outline-path-3--badged"}),n.createElement("circle",{cx:"30",cy:"6",r:"5",fill:"currentColor",className:"clr-i-outline--badged clr-i-outline-path-4--badged clr-i-badge"}),n.createElement("path",{fill:"none",d:"M0 0h36v36H0z"}))),n.createElement("input",{type:"file",onChange:function(e){var n=e.target;if(n.files)switch(a){case"file":u({name:t,value:n.files});break;case"dataUrl":var r=n.files[0],i=new FileReader;i.onloadend=function(){d({name:t,value:i.result})},i.readAsDataURL(r)}}}))},Container:function(e){var r=e.id,a=e.style,i=e.label,o=void 0===i?"label":i,l=e.children,c=t.useState(!1),u=c[0],s=c[1];return t.useEffect((function(){var e=localStorage.getItem(r);s(!!e)}),[s]),t.useEffect((function(){if(u){var e=JSON.stringify(u);localStorage.setItem(r,e)}}),[u]),n.createElement(P,{style:a},n.createElement("div",{className:"head"},o,n.createElement("span",{onClick:function(){s(!u)}},n.createElement(j,{style:{transform:u?"rotate(180deg)":""}}))),u&&n.createElement("div",null,l))},Submit:function(e){var t=e.label,r=e.name,a=l(e,_);return n.createElement(m,Object.assign({$name:r},a),n.createElement(h,{name:r,className:"btn",type:"submit"},t))}});exports.Form=D,exports.default=D,exports.useData=function(){return{state:t.useContext(d).state}}; | ||
| "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 d(e,t,n,r){var a=Object.create((t&&t.prototype instanceof g?t:g).prototype),i=new D(r||[]);return o(a,"_invoke",{value:O(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=d;var f="suspendedStart",m="executing",h="completed",v={};function g(){}function b(){}function y(){}var w={};s(w,l,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(F([])));E&&E!==n&&r.call(E,l)&&(w=E);var C=y.prototype=g.prototype=Object.create(w);function k(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function L(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 O(t,n,r){var a=f;return function(o,i){if(a===m)throw new Error("Generator is already running");if(a===h){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=j(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===f)throw a=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=m;var u=p(t,n,r);if("normal"===u.type){if(a=r.done?h:"suspendedYield",u.arg===v)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(a=h,r.method="throw",r.arg=u.arg)}}}function j(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,j(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 _(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function D(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(P,this),this.reset(!0)}function F(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 b.prototype=y,o(C,"constructor",{value:y,configurable:!0}),o(y,"constructor",{value:b,configurable:!0}),b.displayName=s(y,u,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===b||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,y):(e.__proto__=y,s(e,u,"GeneratorFunction")),e.prototype=Object.create(C),e},t.awrap=function(e){return{__await:e}},k(L.prototype),s(L.prototype,c,(function(){return this})),t.AsyncIterator=L,t.async=function(e,n,r,a,o){void 0===o&&(o=Promise);var i=new L(d(e,n,r,a),o);return t.isGeneratorFunction(n)?i:i.next().then((function(e){return e.done?e.value:i.next()}))},k(C),s(C,u,"Generator"),s(C,l,(function(){return this})),s(C,"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=F,D.prototype={constructor:D,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(_),!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),_(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;_(n)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:F(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,d=n.createContext({state:{data:{},formData:new FormData}}),p=function(e,t){var n;switch(t.type){case"SET_PROP":return i({},e,{data:i({},e.data,(n={},n[t.payload.name]=t.payload.value,n))});case"SET_EMPTY":return{data:{},formData:new FormData};case"SET_PROP_FORMDATA":return e.formData.delete(t.payload.name),Array.from(t.payload.value).forEach((function(n){e.formData.append(t.payload.name,n)})),e;default:return e}},f=function(e){var r=e.children,i=e.className,l=e.onSubmit,c=e.persistData,u=e.styles,s=t.useReducer(p,{data:e.initialState,formData:new FormData}),f=s[0],m=s[1],h=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(f.data,f.formData);case 5:c||m&&m({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(d.Provider,{value:{state:f,dispatch:m}},n.createElement("form",{"aria-label":"form",className:i,style:u,onSubmit:h},n.createElement(n.Fragment,null,r)))},m=r.label(u||(u=c(["\n grid-area: ",";\n position: relative;\n display: flex;\n background-color: #ffffff00;\n border: 1px solid var(--primary,#1CB0F6);\n border-radius: 10px;\n width: 100%;\n\n & input, & textarea {\n border-radius: 10px;\n border: none;\n padding:1rem;\n margin: 0;\n background-color: #fff;\n width: 100%;\n padding: 1rem;\n outline: 0;\n border: none;\n }\n & input + span, & textarea + span {\n position: absolute;\n background-color: #fff;\n border-radius: 1rem;\n padding: .1rem;\n left: 1rem;\n bottom: 25%;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n }\n /* & input:placeholder-shown + span, & textarea:placeholder-shown + span {\n top: 1.5rem;\n font-size: 0.9em;\n } */\n & input:focus + span, & input:valid + span, & textarea:focus + span, & textarea:valid + span {\n bottom: -.5rem;\n font-size: 0.7em;\n font-weight: 600;\n }\n & input:valid + span ,& textarea:valid + span {\n color: green;\n }\n &.invalid input:invalid + span, &.invalid textarea:invalid + span {\n color: red;\n }\n"])),(function(e){return e.$name})),h=r.button(s||(s=c(['\n& {\n appearance: button;\n background-color: var(--primary--bg,#189ad6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n text-align: center;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n padding: .4rem;\n width: 100%;\n}\n&:after {\n background-clip: padding-box;\n background-color: var(--primary,#1CB0F6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: "";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\n&:main, &:focus {\n user-select: auto;\n}\n\n&:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n&:disabled {\n cursor: auto;\n}\n\n&:active:after {\n border-width: 0 0 0px;\n}\n\n&:active {\n padding-bottom: .3rem;\n}\n'])));function v(e){var n=t.useContext(d),r=n.state,a=n.dispatch,o=t.useCallback((function(e){a&&a({type:"SET_PROP_FORMDATA",payload:e})}),[a]);return{value:r.formData.getAll(e),appendData:o}}function g(e){var n=t.useContext(d),r=n.state,a=n.dispatch;return{setProp:t.useCallback((function(e){a&&a({type:"SET_PROP",payload:e})}),[a]),value:r.data[e]}}var b,y,w,x=["label","required","name"],E=["label","required","name"],C=r.input(b||(b=c(["\n cursor: pointer;\n visibility: hidden;\n &::before {\n position: absolute;\n top: 25%;\n left: .5rem;\n width: 2rem;\n height: 2rem;\n content: '';\n background-image: url('https://api.iconify.design/material-symbols:date-range-sharp.svg');\n background-repeat: no-repeat;\n background-position: left;\n background-size: contain;\n visibility: visible;\n }\n &::-webkit-calendar-picker-indicator {\n position: absolute;\n z-index: 1;\n left: 0;\n top: 0;\n\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n cursor: pointer;\n opacity: 0;\n visibility: visible;\n\n }\n &::after {\n position: absolute;\n top: 42%;\n left: 3rem;\n z-index:2;\n width: fit-content;\n height: inherit;\n content: '","';\n visibility: visible;\n }\n"])),(function(e){return e.$value})),k=["label","required","name"],L=["label","name"],O=r.label(y||(y=c(["\n grid-area: ",";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 2px dashed #e8e8e8;\n background-color: var(--background,#a3a3a3);\n padding: 1.5rem;\n border-radius: 10px;\n box-shadow: 0px 1rem .7rem -1rem #e8e8e8;\n & .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n & .icon svg {\n height: 4rem;\n fill: #e8e8e8;\n }\n & .text {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n & .text span {\n font-weight: 400;\n color: #e8e8e8;\n }\n & input {\n display: none;\n }\n"])),(function(e){return e.$name}));function j(e){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 512 512"},e),n.createElement("path",{d:"M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z",fill:"currentColor"}))}var P=r.div(w||(w=c(["\nposition: relative;\ndisplay: flex;\nflex-direction:column;\nborder-bottom: 1px solid #000;\n\n& .head {\n display: flex;\n align-items: center;\n}\n& div {\n padding: .5rem 0;\n}\n\n& .head span{\n border: 1px solid #000;\n border-radius: 100%;\n padding: .1rem .25rem;\n position: absolute;\n right: 0;\n cursor: pointer;\n}\n"]))),_=["label","name"],D=Object.assign(f,{TextField:function(e){var t=e.label,r=void 0===t?"textfield":t,a=e.required,o=e.name,i=l(e,x),c=g(o),u=c.value,s=c.setProp,d=(a?"*":"")+(e.label?r:e.name);return n.createElement(m,Object.assign({$name:o},i),n.createElement("input",Object.assign({type:"text",className:"input",required:a,value:u||"",onChange:function(e){s({name:o,value:e.target.value})},onBlur:function(){return s({name:o,value:null==u?void 0:u.trim()})},name:o},i)),n.createElement("span",null,d))},TextArea:function(e){var t=e.label,r=void 0===t?"textfield":t,a=e.required,o=e.name,i=l(e,E),c=g(o),u=c.value,s=c.setProp;return n.createElement(m,Object.assign({$name:o},i),n.createElement("textarea",Object.assign({className:"textarea",required:a,value:u||"",onChange:function(e){s({name:o,value:e.target.value})},onBlur:function(){return s({name:o,value:null==u?void 0:u.trim()})},name:o},i)),n.createElement("span",null,a?"*":"",e.label?r:e.name))},DatePicker:function(e){var r=e.name,a=e.label,o=e.required,i=g(r),l=i.value,c=i.setProp,u=t.useCallback((function(e){var t=e.target;if(t.valueAsDate){var n=t.valueAsDate.getUTCDate(),a=t.valueAsDate.getMonth(),o=t.valueAsDate.getFullYear(),i=new Date(o,a,n);c({name:r,value:i})}}),[c]),s=(o?"*":"")+(a||r);return n.createElement(m,{$name:r},n.createElement(C,{type:"date",$value:null==l?void 0:l.toLocaleDateString("es-US"),onChange:u}),n.createElement("span",null,s))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.name,c=l(e,k),u=t.useState(!1),s=u[0],d=u[1],p=g(i),f=p.value,h=p.setProp,v=(o?"*":"")+(e.label?a:e.name);return n.createElement(m,Object.assign({$name:i},c),n.createElement("input",Object.assign({type:s?"text":"password",className:"input",required:o,value:f||"",onChange:function(e){h({name:i,value:e.target.value})},name:i},c)),n.createElement("span",null,v),n.createElement("span",{onClick:function(){return d(!s)}},s?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 t=e.name,r=l(e,L),a=g(t),o=a.value,i=a.setProp;return n.createElement(m,Object.assign({},r,{$name:t}),n.createElement("input",{checked:o,type:"checkbox",onChange:function(e){i({name:t,value:e.target.checked})}}),n.createElement("div",{className:"checkmark"}))},FileGeneric:function(e){var t=e.name,r=e.style,a=e.multiple,o=v(t),i=o.appendData,l=o.value;return n.createElement(O,{style:r,$name:t},n.createElement("div",{className:"icon"},n.createElement("svg",{viewBox:"0 0 24 24",fill:"",xmlns:"http://www.w3.org/2000/svg"},n.createElement("g",{id:"SVGRepo_bgCarrier",strokeWidth:"0"}),n.createElement("g",{id:"SVGRepo_tracerCarrier","stroke-linecap":"round","stroke-linejoin":"round"}),n.createElement("g",{id:"SVGRepo_iconCarrier"},n.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11.8954 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z",fill:""})))),n.createElement("div",{className:"text"},n.createElement("span",null,l.length?"upload "+l.length+" file(s)":"Click to upload image")),n.createElement("input",{type:"file",multiple:a,onChange:function(e){var n=e.target;n.files&&i({name:t,value:n.files})}}))},FileImage:function(e){var t=e.name,r=e.type,a=void 0===r?"dataUrl":r,o=e.style,l=v(t).appendData,c=g(t),u=c.setProp,s=c.value;return n.createElement(O,{style:i({},o,{backgroundImage:"url("+s+")"}),$name:t},n.createElement("div",{className:"icon",style:{display:s?"none":"initial"}},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 36 36"},n.createElement("path",{fill:"currentColor",d:"M11.93 11a3 3 0 1 0-3 3a3 3 0 0 0 3-3m-4.6 0a1.6 1.6 0 1 1 1.6 1.6a1.6 1.6 0 0 1-1.6-1.6",className:"clr-i-outline--badged clr-i-outline-path-1--badged"}),n.createElement("path",{fill:"currentColor",d:"m17.38 20.77l-4-4a1 1 0 0 0-1.41 0L5.92 22.9v2.83l6.79-6.79L16 22.18l-3.75 3.75H15l8.45-8.45L30 24v-2.82l-5.81-5.81a1 1 0 0 0-1.41 0Z",className:"clr-i-outline--badged clr-i-outline-path-2--badged"}),n.createElement("path",{fill:"currentColor",d:"M32 13.22V30H4V6h18.5a7.49 7.49 0 0 1 .28-2H4a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V12.34a7.45 7.45 0 0 1-2 .88",className:"clr-i-outline--badged clr-i-outline-path-3--badged"}),n.createElement("circle",{cx:"30",cy:"6",r:"5",fill:"currentColor",className:"clr-i-outline--badged clr-i-outline-path-4--badged clr-i-badge"}),n.createElement("path",{fill:"none",d:"M0 0h36v36H0z"}))),n.createElement("input",{type:"file",onChange:function(e){var n=e.target;if(n.files)switch(a){case"file":l({name:t,value:n.files});break;case"dataUrl":var r=n.files[0],o=new FileReader;o.onloadend=function(){u({name:t,value:o.result})},o.readAsDataURL(r)}}}))},Container:function(e){var r=e.id,a=e.style,o=e.label,i=void 0===o?"label":o,l=e.children,c=t.useState(!1),u=c[0],s=c[1];return t.useEffect((function(){var e=localStorage.getItem(r);s(!!e)}),[s]),t.useEffect((function(){if(u){var e=JSON.stringify(u);localStorage.setItem(r,e)}}),[u]),n.createElement(P,{style:a},n.createElement("div",{className:"head"},i,n.createElement("span",{onClick:function(){s(!u)}},n.createElement(j,{style:{transform:u?"rotate(180deg)":""}}))),u&&n.createElement("div",null,l))},Submit:function(e){var t=e.label,r=e.name,a=l(e,_);return n.createElement(m,Object.assign({$name:r},i({style:{border:"none"}},a)),n.createElement(h,{name:r,className:"btn",type:"submit"},t||r))}});exports.Form=D,exports.default=D,exports.useData=function(){return{state:t.useContext(d).state}}; | ||
| //# sourceMappingURL=form-with-state.cjs.production.min.js.map |
@@ -1,2 +0,2 @@ | ||
| import React, { useReducer, useContext, useCallback, useEffect, useState } from 'react'; | ||
| import React, { useReducer, useContext, useCallback, useState, useEffect } from 'react'; | ||
| import styled from 'styled-components'; | ||
@@ -401,3 +401,4 @@ | ||
| var FormState = function FormState(_ref) { | ||
| var children = _ref.children, | ||
| var initialState = _ref.initialState, | ||
| children = _ref.children, | ||
| className = _ref.className, | ||
@@ -408,3 +409,3 @@ onSubmit = _ref.onSubmit, | ||
| var _useReducer = useReducer(reducer, { | ||
| data: {}, | ||
| data: initialState, | ||
| formData: new FormData() | ||
@@ -426,3 +427,3 @@ }), | ||
| _context.next = 5; | ||
| return onSubmit(state); | ||
| return onSubmit(state.data, state.formData); | ||
| case 5: | ||
@@ -461,3 +462,3 @@ if (!persistData) { | ||
| }); | ||
| var Button = /*#__PURE__*/styled.button(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n& {\n appearance: button;\n background-color: var(--primary--bg,#189ad6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n text-align: center;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n padding: .4rem;\n width: 100%;\n}\n&:after {\n background-clip: padding-box;\n background-color: var(--primary,#1CB0F6);\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: \"\";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\n&:main, &:focus {\n user-select: auto;\n}\n\n&:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n&:disabled {\n cursor: auto;\n}\n\n&:active:after {\n border-width: 0 0 0px;\n}\n\n&:active {\n padding-bottom: .3rem;\n}\n"]))); | ||
| var Button = /*#__PURE__*/styled.button(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n& {\n appearance: button;\n background-color: var(--primary--bg,#189ad6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n text-align: center;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n padding: .4rem;\n width: 100%;\n}\n&:after {\n background-clip: padding-box;\n background-color: var(--primary,#1CB0F6);\n border: solid transparent;\n border-radius: 10px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: \"\";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\n&:main, &:focus {\n user-select: auto;\n}\n\n&:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n&:disabled {\n cursor: auto;\n}\n\n&:active:after {\n border-width: 0 0 0px;\n}\n\n&:active {\n padding-bottom: .3rem;\n}\n"]))); | ||
@@ -479,3 +480,3 @@ function useFormData(name) { | ||
| } | ||
| function useForm(payload) { | ||
| function useForm(name) { | ||
| var _useContext2 = useContext(context), | ||
@@ -490,8 +491,5 @@ state = _useContext2.state, | ||
| }, [dispatch]); | ||
| useEffect(function () { | ||
| setProp(payload); | ||
| }, []); | ||
| return { | ||
| setProp: setProp, | ||
| value: state.data[payload.name] | ||
| value: state.data[name] | ||
| }; | ||
@@ -507,4 +505,4 @@ } | ||
| var _excluded = ["label", "required", "name", "initialValue"], | ||
| _excluded2 = ["label", "required", "name", "initialValue"]; | ||
| var _excluded = ["label", "required", "name"], | ||
| _excluded2 = ["label", "required", "name"]; | ||
| var TextField = function TextField(props) { | ||
@@ -515,9 +513,4 @@ var _props$label = props.label, | ||
| name = props.name, | ||
| _props$initialValue = props.initialValue, | ||
| initialValue = _props$initialValue === void 0 ? "" : _props$initialValue, | ||
| extraProps = _objectWithoutPropertiesLoose(props, _excluded); | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: initialValue | ||
| }), | ||
| var _useForm = useForm(name), | ||
| value = _useForm.value, | ||
@@ -532,3 +525,3 @@ setProp = _useForm.setProp; | ||
| required: required, | ||
| value: value, | ||
| value: value || "", | ||
| onChange: function onChange(e) { | ||
@@ -543,3 +536,3 @@ setProp({ | ||
| name: name, | ||
| value: value.trim() | ||
| value: value == null ? void 0 : value.trim() | ||
| }); | ||
@@ -555,9 +548,4 @@ }, | ||
| name = props.name, | ||
| _props$initialValue2 = props.initialValue, | ||
| initialValue = _props$initialValue2 === void 0 ? "" : _props$initialValue2, | ||
| extraProps = _objectWithoutPropertiesLoose(props, _excluded2); | ||
| var _useForm2 = useForm({ | ||
| name: name, | ||
| value: initialValue | ||
| }), | ||
| var _useForm2 = useForm(name), | ||
| value = _useForm2.value, | ||
@@ -570,3 +558,3 @@ setProp = _useForm2.setProp; | ||
| required: required, | ||
| value: value, | ||
| value: value || "", | ||
| onChange: function onChange(e) { | ||
@@ -581,3 +569,3 @@ setProp({ | ||
| name: name, | ||
| value: value.trim() | ||
| value: value == null ? void 0 : value.trim() | ||
| }); | ||
@@ -593,9 +581,4 @@ }, | ||
| label = _ref.label, | ||
| required = _ref.required, | ||
| _ref$initialValue = _ref.initialValue, | ||
| initialValue = _ref$initialValue === void 0 ? new Date() : _ref$initialValue; | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: initialValue | ||
| }), | ||
| required = _ref.required; | ||
| var _useForm = useForm(name), | ||
| value = _useForm.value, | ||
@@ -638,6 +621,3 @@ setProp = _useForm.setProp; | ||
| setShowText = _useState[1]; | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: "" | ||
| }), | ||
| var _useForm = useForm(name), | ||
| value = _useForm.value, | ||
@@ -652,3 +632,3 @@ setProp = _useForm.setProp; | ||
| required: required, | ||
| value: value, | ||
| value: value || "", | ||
| onChange: function onChange(e) { | ||
@@ -684,11 +664,7 @@ setProp({ | ||
| var _excluded$2 = ["label", "name", "initialValue"]; | ||
| var _excluded$2 = ["label", "name"]; | ||
| var CheckBox = function CheckBox(props) { | ||
| var name = props.name, | ||
| initialValue = props.initialValue, | ||
| extraProps = _objectWithoutPropertiesLoose(props, _excluded$2); | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: !!initialValue | ||
| }), | ||
| var _useForm = useForm(name), | ||
| value = _useForm.value, | ||
@@ -762,11 +738,6 @@ setProp = _useForm.setProp; | ||
| type = _ref3$type === void 0 ? "dataUrl" : _ref3$type, | ||
| style = _ref3.style, | ||
| _ref3$initialValue = _ref3.initialValue, | ||
| initialValue = _ref3$initialValue === void 0 ? "" : _ref3$initialValue; | ||
| style = _ref3.style; | ||
| var _useFormData2 = useFormData(name), | ||
| appendData = _useFormData2.appendData; | ||
| var _useForm = useForm({ | ||
| name: name, | ||
| value: initialValue | ||
| }), | ||
| var _useForm = useForm(name), | ||
| setProp = _useForm.setProp, | ||
@@ -895,7 +866,11 @@ value = _useForm.value; | ||
| "$name": name | ||
| }, extraProps), React.createElement(Button, { | ||
| }, _extends({ | ||
| style: { | ||
| border: "none" | ||
| } | ||
| }, extraProps)), React.createElement(Button, { | ||
| name: name, | ||
| className: "btn", | ||
| type: "submit" | ||
| }, label)); | ||
| }, label || name)); | ||
| }; | ||
@@ -902,0 +877,0 @@ |
| import React from "react"; | ||
| interface iProps { | ||
| label: string; | ||
| name: string; | ||
| label?: string; | ||
| className?: string; | ||
| style?: React.CSSProperties; | ||
| name: string; | ||
| } | ||
| export declare const Submit: React.FC<iProps>; | ||
| export {}; |
| import React from "react"; | ||
| import { IInput } from ".."; | ||
| interface Iprops extends IInput { | ||
| initialValue?: boolean; | ||
| } | ||
| export declare const CheckBox: React.FC<Iprops>; | ||
| export {}; |
| import React from "react"; | ||
| import { IInput } from ".."; | ||
| interface IProps extends IInput { | ||
| initialValue?: Date; | ||
| } | ||
| export declare const DatePicker: React.FC<IProps>; | ||
| export {}; |
@@ -6,3 +6,2 @@ import React, { CSSProperties } from "react"; | ||
| type: "file" | "dataUrl"; | ||
| initialValue?: string; | ||
| } | ||
@@ -9,0 +8,0 @@ interface IPropsGeneric { |
| import React, { CSSProperties, FC } from "react"; | ||
| import { IContextState } from "../context"; | ||
| import { Dictionary } from "../context"; | ||
| export interface IInput { | ||
@@ -10,12 +10,17 @@ name: string; | ||
| className?: string; | ||
| initialValue?: string | number | boolean | Date; | ||
| } | ||
| declare type IPersitData = { | ||
| persistData?: false; | ||
| } | { | ||
| persistData: true; | ||
| }; | ||
| interface IForm { | ||
| children?: React.JSX.Element | Array<React.JSX.Element>; | ||
| onSubmit?: (data: IContextState) => Promise<void>; | ||
| persistData?: boolean; | ||
| onSubmit?: (data: Dictionary, formData: FormData) => (Promise<void> | void); | ||
| className?: string; | ||
| styles?: CSSProperties; | ||
| initialState: Dictionary; | ||
| } | ||
| declare const FormState: FC<IForm>; | ||
| declare type IFormProps = IForm & IPersitData; | ||
| declare const FormState: FC<IFormProps>; | ||
| export default FormState; |
| import { FC } from 'react'; | ||
| import { IInput } from "../"; | ||
| interface Iprops extends IInput { | ||
| initialValue?: string; | ||
| } | ||
@@ -6,0 +5,0 @@ export declare const TextField: FC<Iprops>; |
| import { IState } from "../context/reducer"; | ||
| interface Response<T> { | ||
| setProp(payload: IState): void; | ||
| value: T; | ||
| value: T | undefined; | ||
| } | ||
@@ -13,3 +13,3 @@ export declare function useFormData(name: string): { | ||
| }; | ||
| export declare function useForm<T>(payload: IState): Response<T>; | ||
| export declare function useForm<T>(name: string): Response<T>; | ||
| export declare function useData(): { | ||
@@ -16,0 +16,0 @@ state: import("../context/context").IContextState; |
| { | ||
| "version": "0.1.65", | ||
| "version": "0.1.66", | ||
| "keywords": [ | ||
@@ -4,0 +4,0 @@ "react", |
@@ -6,16 +6,39 @@ # Form lite | ||
| import React from "react" | ||
| import Form from "form-lite" | ||
| import Form from "form-with-state" | ||
| import styled from "styled-components" | ||
| const Container = styled.div` | ||
| & form{ | ||
| display: grid; | ||
| grid-gap: 1rem; | ||
| /* for use grid template areas use "name" property of form item */ | ||
| grid-template-areas: | ||
| "firstName LastName" | ||
| "submit submit"; | ||
| } | ||
| ` | ||
| export const App = ()=>{ | ||
| return <Form onSubmit={(data)=>console.log(data)}> | ||
| <Form.TextField label='First Name' required name='firstName' /> | ||
| <Form.TextField label='Last Name' required name='lastName' /> | ||
| <Form.Submit label='login' /> | ||
| </Form> | ||
| return ( | ||
| <Container> | ||
| <Form onSubmit={(data,formData)=>console.log(data)}> | ||
| <Form.TextField label='First Name' required name='firstName' /> | ||
| <Form.TextField label='Last Name' required name='lastName' /> | ||
| <Form.Submit name='submit' label='login' /> | ||
| </Form> | ||
| </Container> | ||
| ) | ||
| } | ||
| // console log: | ||
| // { | ||
| // "firstName" : "", | ||
| // "lastName" : "" | ||
| // } | ||
| /* | ||
| Display | ||
| | firstName | lastName | | ||
| | Submit | | ||
| */ | ||
| /* | ||
| console log: | ||
| { | ||
| "firstName" : "", | ||
| "lastName" : "" | ||
| } | ||
| */ | ||
| ``` |
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
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by109.52%
44
Worsened metrics
- Total package byte prevSize
- decreased by-1.66%
210180
- Lines of code
- decreased by-2.13%
2293
No dependency changes