react-dynamic-inputs
Version:
Lightweight component for creating dynamic inputs
3 lines (2 loc) • 5.31 kB
JavaScript
import n,{useState as r,useEffect as e}from"react";function t(n,r){(null==r||r>n.length)&&(r=n.length);for(var e=0,t=Array(r);e<r;e++)t[e]=n[e];return t}function o(){return o=Object.assign?Object.assign.bind():function(n){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var t in e)({}).hasOwnProperty.call(e,t)&&(n[t]=e[t])}return n},o.apply(null,arguments)}function i(n,r){return function(n){if(Array.isArray(n))return n}(n)||function(n,r){var e=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=e){var t,o,i,a,l=[],d=!0,u=!1;try{if(i=(e=e.call(n)).next,0===r);else for(;!(d=(t=i.call(e)).done)&&(l.push(t.value),l.length!==r);d=!0);}catch(n){u=!0,o=n}finally{try{if(!d&&null!=e.return&&(a=e.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}(n,r)||l(n,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(n){return function(n){if(Array.isArray(n))return t(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||l(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(n,r){if(n){if("string"==typeof n)return t(n,r);var e={}.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?t(n,r):void 0}}!function(n,r){void 0===r&&(r={});var e=r.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}("/* Dynamic Input React Component Styles */\r\n\r\n.dir__inputs-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n margin-bottom: 20px;\r\n width: 100%;\r\n}\r\n\r\n.dir__item {\r\n height: fit-content;\r\n width: 100%;\r\n}\r\n\r\n.dir__input-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n.dir__input {\r\n border: 1px solid #d1d5db;\r\n outline: none;\r\n padding: 8px 10px;\r\n border-radius: 10px;\r\n font-size: 0.75rem;\r\n flex-grow: 1;\r\n}\r\n\r\n.dir__remove-btn {\r\n outline: none;\r\n border: none;\r\n border-radius: 100%;\r\n width: 25px;\r\n height: 25px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: #f0f0f0;\r\n}\r\n\r\n.dir__remove-btn:hover {\r\n background-color: #cbd5e1;\r\n color: #dc2626;\r\n}\r\n\r\n.dir__remove-btn:disabled {\r\n pointer-events: none;\r\n}\r\n\r\n.dir__add-btn {\r\n padding: 0.5rem 1rem;\r\n background-color: dodgerblue;\r\n color: white;\r\n border: none;\r\n border-radius: 0.375rem;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n}\r\n\r\n.dir__add-btn:hover {\r\n background-color: #2563eb;\r\n}\r\n\r\n.dir__add-btn:disabled {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n}\r\n");var d=function(t){var l=t.onChange,d=t.children,u=t.defaultValues,c=void 0===u?[]:u,s=t.defaultItemsCount,m=void 0===s?2:s,f=t.minItems,p=void 0===f?0:f,b=t.maxItems,h=t.className,y=void 0===h?"":h,v=t.style,g=void 0===v?{}:v,_=t.inputWrapperStyle,w=void 0===_?{}:_,x=t.addButtonLabel,A=void 0===x?"Add More":x,C=t.customAddButton,E=i(r(c.length<m?new Array(m).fill(""):c),2),S=E[0],k=E[1],N=function(){b&&S.length>=b||k((function(n){return[].concat(a(n),[""])}))};e((function(){l(a(S))}),[S]);var I=function(r,e){return n.createElement("div",{className:"dir__input-group"},n.createElement("input",o({type:"text",className:"dir__input"},r)),n.createElement("button",o({className:"dir__remove-btn"},e),n.createElement("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 512 512",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},n.createElement("path",{d:"M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"}))))};d&&(I=d);var j=n.createElement("button",{onClick:function(){return N()},className:"dir__add-btn",disabled:!!b&&S.length>=b},null!=A?A:"Add More");return C&&(j=n.cloneElement(C,{onClick:function(){return N()},disabled:!!b&&S.length>=b})),n.createElement("div",{className:"dir__wrapper ".concat(null!=y?y:""),style:g,"data-name":"multiselect_wrapper"},n.createElement("div",{"data-name":"multiselect_inputs_wrapper",className:"dir__inputs-wrapper",style:w},S.map((function(r,e){return n.createElement("div",{key:e,"data-name":"multiselect_item",className:"dir__item"},I({onChange:function(n){return function(n,r){k((function(e){return e.map((function(e,t){return t===n?r:e}))}))}(e,n.target.value)},defaultValue:r},{onClick:function(){return function(n){S.length<=p||k((function(r){return r.filter((function(r,e){return e!==n}))}))}(e)},disabled:S.length<=p}))}))),j)};export{d as default};
//# sourceMappingURL=index.esm.js.map