UNPKG

@rakuten-rex/stepper

Version:

Input Stepper is a UI control used to incrementally increase of decrease a numeric value.

23 lines (21 loc) 7.52 kB
/* @license @rakuten-rex/stepper v1.6.0 2020-07-01 Stepper/Stepper.production.min.js Copyright (c) 2018-present, Rakuten, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ 'use strict';(function(l,b){"object"===typeof exports&&"object"===typeof module?module.exports=b(require("react")):"function"===typeof define&&define.amd?define("rakutenRexStepper",["react"],b):"object"===typeof exports?exports.rakutenRexStepper=b(require("react")):l.rakutenRexStepper=b(l.React)})(window,function(l){return function(b){function c(e){if(a[e])return a[e].exports;var d=a[e]={i:e,l:!1,exports:{}};b[e].call(d.exports,d,d.exports,c);d.l=!0;return d.exports}var a={};c.m=b;c.c=a;c.d=function(e, a,b){c.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:b})};c.r=function(a){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"});Object.defineProperty(a,"__esModule",{value:!0})};c.t=function(a,b){b&1&&(a=c(a));if(b&8||b&4&&"object"===typeof a&&a&&a.__esModule)return a;var d=Object.create(null);c.r(d);Object.defineProperty(d,"default",{enumerable:!0,value:a});if(b&2&&"string"!=typeof a)for(var e in a)c.d(d,e,function(b){return a[b]}.bind(null, e));return d};c.n=function(a){var b=a&&a.__esModule?function(){return a["default"]}:function(){return a};c.d(b,"a",b);return b};c.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)};c.p="/";return c(c.s=10)}([function(b,c){b.exports=l},function(b,c){b.exports=function(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}},,,function(b,c){function a(e){b.exports=a=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__|| Object.getPrototypeOf(a)};return a(e)}b.exports=a},function(b,c){b.exports=function(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function");}},function(b,c){function a(a,b){for(var d=0;d<b.length;d++){var c=b[d];c.enumerable=c.enumerable||!1;c.configurable=!0;"value"in c&&(c.writable=!0);Object.defineProperty(a,c.key,c)}}b.exports=function(b,c,h){c&&a(b.prototype,c);h&&a(b,h);return b}},function(b,c,a){var e=a(13);b.exports=function(a,b){if("function"!==typeof b&&null!== b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}});b&&e(a,b)}},function(b,c,a){var e=a(14),d=a(1);b.exports=function(a,b){return!b||"object"!==e(b)&&"function"!==typeof b?d(a):b}},,function(b,c,a){function e(){e=Object.assign||function(a){for(var b=1;b<arguments.length;b++){var c=arguments[b],f;for(f in c)Object.prototype.hasOwnProperty.call(c,f)&&(a[f]=c[f])}return a};return e.apply(this, arguments)}function d(){d=Object.assign||function(a){for(var b=1;b<arguments.length;b++){var c=arguments[b],f;for(f in c)Object.prototype.hasOwnProperty.call(c,f)&&(a[f]=c[f])}return a};return d.apply(this,arguments)}function h(a){var b=l();return function(){var c=q()(a);if(b){var f=q()(this).constructor;c=Reflect.construct(c,arguments,f)}else c=c.apply(this,arguments);return v()(this,c)}}function l(){if("undefined"===typeof Reflect||!Reflect.construct||Reflect.construct.sham)return!1;if("function"=== typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(C){return!1}}a.r(c);b=a(5);var u=a.n(b);b=a(6);var w=a.n(b);b=a(1);var k=a.n(b);b=a(7);var x=a.n(b);b=a(8);var v=a.n(b);b=a(4);var q=a.n(b);b=a(0);var g=a.n(b);a(15);var y=g.a.createElement("path",{d:"M19.3 10v5.3H14v1.3h5.3V22h1.3v-5.3H26v-1.3h-5.3V10z",fill:"#b6b6b6",fillRule:"evenodd"}),z=function(a){return g.a.createElement("svg",e({width:40,height:32},a),y)},A=g.a.createElement("path", {d:"M14 17h12v-1.3H14V17z",fillRule:"evenodd",clipRule:"evenodd",fill:"#b6b6b6"}),B=function(a){return g.a.createElement("svg",d({width:40,height:32},a),A)};a.d(c,"default",function(){return m});var m=function(a){function b(a){u()(this,b);a=c.call(this,a);var f=a.props;a.state={counter:f.counter,maxValue:f.maxValue,state:f.state};a.onIncrease=a.onIncrease.bind(k()(a));a.onDecrease=a.onDecrease.bind(k()(a));a.handleChange=a.handleChange.bind(k()(a));a.handleBlur=a.handleBlur.bind(k()(a));a.handleClick= a.handleClick.bind(k()(a));a.textInput=g.a.createRef();return a}x()(b,a);var c=h(b);w()(b,[{key:"componentDidUpdate",value:function(a){var b=this.props,c=b.maxValue,f=b.counter;b=b.state;c!==a.maxValue&&this.updateMaxValueState(c);f!==a.counter&&this.updateCounterState(f);b!==a.state&&this.updateState(b)}},{key:"onIncrease",value:function(){var a=this.state,b=a.counter;b<a.maxValue&&this.setState({counter:Number(b)+1});this.textInput.current&&this.textInput.current.setSelectionRange(0,5)}},{key:"onDecrease", value:function(){var a=this.state.counter;0<a&&this.setState({counter:Number(a)-1});this.textInput.current.setSelectionRange(0,5)}},{key:"updateMaxValueState",value:function(a){this.setState({maxValue:a})}},{key:"updateCounterState",value:function(a){this.setState({counter:a})}},{key:"updateState",value:function(a){this.setState({state:a})}},{key:"handleChange",value:function(a){var b=this.state.maxValue;a=a.target.value.replace(/\D/,"");a<=b&&this.setState({counter:a})}},{key:"handleClick",value:function(){this.textInput.current.select()}}, {key:"handleBlur",value:function(a){var b=this.props.counter;""===a.target.value&&this.setState({counter:b})}},{key:"render",value:function(){var a=this.props,b=a.id,c=a.name,d=a.plusLabel,e=a.minusLabel,h=a.label,l=a.labelId,k=a.required,m=a.disabled,q=a.style,r=this.state,t=r.counter;r=r.state;a=["rex-stepper",a.className].filter(function(a){return a&&0<a.length}).join(" ").trim();h=!!(h&&0<h.length);switch(r){case "hover":var n=["hover"];var p=["hover"];break;case "active":n=["active"];p=["active"]; break;case "minusHover":n=["hover"];break;case "plusHover":p=["hover"];break;case "minusActive":n=["active"];break;case "plusActive":p=["active"];break;default:n=[""],p=[""]}n=["rex-icon-button minus",n].filter(function(a){return a&&0<a.length}).join(" ").trim();p=["rex-icon-button plus",p].filter(function(a){return a&&0<a.length}).join(" ").trim();return g.a.createElement("div",{className:a,style:q},g.a.createElement("button",{className:n,type:"button","aria-label":e,onClick:this.onDecrease,disabled:m, required:k},g.a.createElement(B,null)),g.a.createElement("input",{id:b,type:"text",className:"rex-stepper-counter",name:c,pattern:"[0-9]*",value:t,ref:this.textInput,"aria-label":h?null:c,"aria-labelledby":h?l:null,onChange:this.handleChange,onBlur:this.handleBlur,onClick:this.handleClick,disabled:m,required:k}),g.a.createElement("button",{className:p,type:"button","aria-label":d,onClick:this.onIncrease,disabled:m,required:k},g.a.createElement(z,null)))}}]);return b}(b.Component);m.displayName="Stepper"; m.defaultProps={name:"",id:"",className:"",state:"",label:"",labelId:"",style:{},plusLabel:"",minusLabel:"",counter:0,maxValue:99,disabled:!1,required:!1}},,,function(b,c){function a(c,d){b.exports=a=Object.setPrototypeOf||function(a,b){a.__proto__=b;return a};return a(c,d)}b.exports=a},function(b,c){function a(c){"@babel/helpers - typeof";b.exports="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?a=function(a){return typeof a}:a=function(a){return a&&"function"===typeof Symbol&&a.constructor=== Symbol&&a!==Symbol.prototype?"symbol":typeof a};return a(c)}b.exports=a},function(b,c,a){}])});