react-quantity-input/dist/index.js

A simple, customizable quantity input component for React that allows users to increment/decrement numeric values.

var q=Object.create;var b=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)b(e,a,{get:t[a],enumerable:!0})},y=(e,t,a,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of R(t))!w.call(e,o)&&o!==a&&b(e,o,{get:()=>t[o],enumerable:!(d=S(t,o))||d.enumerable});return e};var f=(e,t,a)=>(a=e!=null?q(T(e)):{},y(t||!e||!e.__esModule?b(a,"default",{value:e,enumerable:!0}):a,e)),M=e=>y(b({},"__esModule",{value:!0}),e);var z={};B(z,{ReactQuantityInput:()=>Q});module.exports=M(z);var u=f(require("react")),x=require("react"),p=f(require("styled-components"));var k=p.default.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`,L=p.default.input`
  width: 60px;
  height: 48px;
  padding: 8px;
  font-size: 14px;
  border: solid 1px #ddd;
  border-color: ${e=>e.$isInvalid?"red !important":"#ddd"};
  outline: none;
  text-align: center;
  box-sizing: border-box;
  z-index: 10;

  &:focus {
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.12);
  }

  &:valid {
    border-color: #ccc;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
`,g=p.default.button`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: white;
  border: solid 1px #ddd;
  color: #999;
  font-size: 20px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.16s;

  border-left: ${e=>e.$type==="INCREMENT"?"0px":""};
  border-right: ${e=>e.$type==="DECREASE"?"0px":""};

  &:hover {
    background-color: #efefef;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
`;function Q(e){let{min:t=0,max:a=100,step:d=1,placeholder:o,maxLength:E,disabled:m,isInvalid:h,onState:s}=e,[c,l]=(0,x.useState)({quantity:"",decreaseDisabled:!1,incrementDisabled:!1}),D=r=>{let n=r.target.value,N=/^([-]{1})?([0-9.]+)?$/.test(n);n===""&&l({...c,quantity:"",decreaseDisabled:!1,incrementDisabled:!1}),N&&l($=>({...$,quantity:r.target.value,decreaseDisabled:Number(n)===t,incrementDisabled:Number(n)===a}))},v=r=>{let n=Number(r.target.value),i={quantity:n<t?t:n>a?a:n,decreaseDisabled:n<t,incrementDisabled:n>a};l(i),s&&s(i)},I=()=>{l(r=>{let n=Number(r.quantity)-d;if(n>=t){let i={...r,quantity:n,decreaseDisabled:n===t,incrementDisabled:!1};return s&&s(i),i}return{...r,decreaseDisabled:!0}})},C=()=>{l(r=>{let n=Number(r.quantity)+d;if(n<=a){let i={...r,quantity:n,decreaseDisabled:!1,incrementDisabled:n===a};return s&&s(i),i}return{...r,incrementDisabled:!0}})};return u.default.createElement(k,null,u.default.createElement(g,{$type:"DECREASE",onClick:I,disabled:m||c.decreaseDisabled},"-"),u.default.createElement(L,{$isInvalid:h,value:c.quantity,placeholder:o,onChange:D,onBlur:v,maxLength:E,disabled:m,required:!0}),u.default.createElement(g,{$type:"INCREMENT",onClick:C,disabled:m||c.incrementDisabled},"+"))}0&&(module.exports={ReactQuantityInput});