@start-base/react-form-elements/NumberInput/index.js

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

"use strict";var e=require("react"),l=require("clsx");function a(e){return e&&e.__esModule?e:{default:e}}var t=a(e),n=a(l),r=Object.defineProperty,u=Object.defineProperties,o=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,m=(e,l,a)=>l in e?r(e,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[l]=a,c=(e,l)=>{for(var a in l||(l={}))p.call(l,a)&&m(e,a,l[a]);if(d)for(var a of d(l))s.call(l,a)&&m(e,a,l[a]);return e},i=(e,l)=>u(e,o(l)),f=(e,l)=>{var a={};for(var t in e)p.call(e,t)&&l.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&d)for(var t of d(e))l.indexOf(t)<0&&s.call(e,t)&&(a[t]=e[t]);return a},b="SUI-Input-module-root-Jh-4e",I="SUI-Input-module-inputRoot-Ug822",h="SUI-Input-module-label-fpxAl",v="SUI-Input-module-disableShrink-VTup6",S="SUI-Input-module-prepend-PTtkE",N="SUI-Input-module-placeholder-RxhY2",g="SUI-Input-module-labelPlaceholder-03rs3",y="SUI-Input-module-input-SMgjS",C="SUI-Input-module-disabledLabel-hKDBK",U="SUI-Input-module-append-TNa8b",E="SUI-Input-module-appendDisabledShrink-ULDV8",O="SUI-Input-module-prependDisabledShrink-5DxUo",k="SUI-Input-module-errorLabel-Qp8cB",w="SUI-Input-module-inputError-EeFMs",M="SUI-Input-module-disabled--Ng0A",j=e.forwardRef(((l,a)=>{var r=l,{name:u,onChange:o,error:d=null,label:p=null,placeholder:s,value:m="",inputClassName:j=null,labelClassName:x=null,errorClassName:P=null,prepend:D=null,prependClassName:L=null,append:q=null,appendClassName:R=null,disableShrink:A=!1,disabled:B=!1}=r,T=f(r,["name","onChange","error","label","placeholder","value","inputClassName","labelClassName","errorClassName","prepend","prependClassName","append","appendClassName","disableShrink","disabled"]);const z=e.useCallback((e=>{o(e)}),[o]),F=e.useMemo((()=>{let e=null;return d&&"string"==typeof d?e=d:d&&"object"==typeof d&&(null==d?void 0:d.message)&&(e=d.message),e}),[d]),K=e.useMemo((()=>t.default.createElement("input",c({type:"text",className:n.default(y,c({[v]:A||!p,[N]:p&&s&&!A,[M]:B,[w]:"boolean"==typeof d&&d},j?{[j]:!0}:{})),name:u,value:m,ref:a,onChange:z,disabled:B,placeholder:s},T))),[A,p,s,B,d,j,u,m,a,z,T]),V=e.useMemo((()=>t.default.createElement("label",{htmlFor:u,className:n.default(h,c({[C]:B,[v]:A,[g]:p&&s&&!A},x?{[x]:!0}:{})),onClick:()=>{var e;try{const l=document.querySelectorAll(`[name="${u}"]`);if(!l.length)return;let a=l[0];"hidden"===(null==a?void 0:a.type)&&(a=null==(e=null==a?void 0:a.parentNode)?void 0:e.querySelector("input")),null==a||a.focus()}catch(e){throw e}}},p)),[B,u,A,p,s,x]);return t.default.createElement("div",{className:n.default(b)},t.default.createElement("div",{className:n.default(I)},D&&t.default.createElement("div",{className:n.default(S,i(c({},L?{[L]:!0}:{}),{[O]:A}))},D),q&&t.default.createElement("div",{className:n.default(U,c({[E]:A},R?{[R]:!0}:{}))},q),p&&A?V:null,K,p&&!A?V:null),F?t.default.createElement("span",{className:n.default(k,c({},P?{[P]:!0}:{}))},F):null)}));j.displayName="Input";var x=j,P="SUI-NumberInput-module-buttons-yP71p",D="SUI-NumberInput-module-button-rBlsg",L=e.forwardRef(((e,l)=>{var a=e,{value:n,onChange:r,name:u}=a,o=f(a,["value","onChange","name"]);const d=e=>{r({target:{name:u,value:e}})};return t.default.createElement(x,i(c({ref:l},o),{type:"number",inputMode:"numeric",name:u,value:n,onChange:r,append:t.default.createElement("div",{className:P},t.default.createElement("button",{type:"button",className:D,onClick:()=>{d(parseInt(n)+1)}},t.default.createElement("svg",{width:20,height:20,style:{transform:"rotate(180deg)"}},t.default.createElement("path",{fill:"currentColor",d:"M4.516 7.548c.436-.446 1.043-.481 1.576 0L10 11.295l3.908-3.747c.533-.481 1.141-.446 1.574 0 .436.445.408 1.197 0 1.615-.406.418-4.695 4.502-4.695 4.502a1.095 1.095 0 0 1-1.576 0S4.924 9.581 4.516 9.163s-.436-1.17 0-1.615z"}))),t.default.createElement("button",{type:"button",className:D,onClick:()=>{d(parseInt(n)-1)}},t.default.createElement("svg",{width:20,height:20},t.default.createElement("path",{fill:"currentColor",d:"M4.516 7.548c.436-.446 1.043-.481 1.576 0L10 11.295l3.908-3.747c.533-.481 1.141-.446 1.574 0 .436.445.408 1.197 0 1.615-.406.418-4.695 4.502-4.695 4.502a1.095 1.095 0 0 1-1.576 0S4.924 9.581 4.516 9.163s-.436-1.17 0-1.615z"}))))}))}));L.displayName="NumberInput";var q=L;module.exports=q;