UNPKG

@rakuten-rex/stepper

Version:

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

28 lines (26 loc) 10.3 kB
/* @license @rakuten-rex/stepper v1.6.0 2020-07-01 StepperLabel/StepperLabel.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(q,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")):q.rakutenRexStepper=b(q.React)})(window,function(q){return function(b){function c(d){if(a[d])return a[d].exports;var e=a[d]={i:d,l:!1,exports:{}};b[d].call(e.exports,e,e.exports,c);e.l=!0;return e.exports}var a={};c.m=b;c.c=a;c.d=function(a, b,g){c.o(a,b)||Object.defineProperty(a,b,{enumerable:!0,get:g})};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 e=Object.create(null);c.r(e);Object.defineProperty(e,"default",{enumerable:!0,value:a});if(b&2&&"string"!=typeof a)for(var d in a)c.d(e,d,function(b){return a[b]}.bind(null, d));return e};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=17)}([function(b,c){b.exports=q},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(){b.exports=a=Object.assign||function(a){for(var b=1;b<arguments.length;b++){var d= arguments[b],c;for(c in d)Object.prototype.hasOwnProperty.call(d,c)&&(a[c]=d[c])}return a};return a.apply(this,arguments)}b.exports=a},function(b,c,a){var d=a(11);b.exports=function(a,b){if(null==a)return{};var c=d(a,b),e;if(Object.getOwnPropertySymbols){var g=Object.getOwnPropertySymbols(a);for(e=0;e<g.length;e++){var h=g[e];0<=b.indexOf(h)||Object.prototype.propertyIsEnumerable.call(a,h)&&(c[h]=a[h])}}return c}},function(b,c){function a(c){b.exports=a=Object.setPrototypeOf?Object.getPrototypeOf: function(a){return a.__proto__||Object.getPrototypeOf(a)};return a(c)}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 c=0;c<b.length;c++){var e=b[c];e.enumerable=e.enumerable||!1;e.configurable=!0;"value"in e&&(e.writable=!0);Object.defineProperty(a,e.key,e)}}b.exports=function(b,c,g){c&&a(b.prototype,c);g&&a(b,g);return b}},function(b,c,a){var d=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&&d(a,b)}},function(b,c,a){var d=a(14),e=a(1);b.exports=function(a,b){return!b||"object"!==d(b)&&"function"!==typeof b?e(a):b}},function(b,c,a){function d(a){var b=a.label,c=a.className,d=a.disabled,l=a.state,m=a.labelRef,n=a.required,p=a.htmlFor;a=g()(a,"label className disabled state labelRef required htmlFor".split(" ")); a:switch(l){case "active":l="active";break a;case "hover":l="hover";break a;default:l=""}c=["rex-stepper-label-ui",c,l].filter(function(a){return a&&0<a.length}).join(" ").trim();l=!!(p&&0<p.length);b=n?"".concat(b," *"):b;return k.a.createElement("label",e()({htmlFor:l?p:null,className:c,disabled:d,ref:m},a),b)}a.r(c);a.d(c,"default",function(){return d});b=a(2);var e=a.n(b);b=a(3);var g=a.n(b);b=a(0);var k=a.n(b);b=a(12);a.n(b);d.displayName="LabelUi";d.defaultProps={htmlFor:"",label:"",className:"", disabled:!1,state:"",labelRef:null,required:!1}},function(b,c,a){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 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 g(a){var b=k(); return function(){var c=z()(a);if(b){var f=z()(this).constructor;c=Reflect.construct(c,arguments,f)}else c=c.apply(this,arguments);return l()(this,c)}}function k(){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(A){return!1}}a.r(c);b=a(5);var m=a.n(b);b=a(6);var q=a.n(b);b=a(1);var h=a.n(b);b=a(7);var u=a.n(b);b=a(8);var l=a.n(b);b=a(4); var z=a.n(b);b=a(0);var n=a.n(b);a(15);var p=n.a.createElement("path",{d:"M19.3 10v5.3H14v1.3h5.3V22h1.3v-5.3H26v-1.3h-5.3V10z",fill:"#b6b6b6",fillRule:"evenodd"}),w=function(a){return n.a.createElement("svg",d({width:40,height:32},a),p)},x=n.a.createElement("path",{d:"M14 17h12v-1.3H14V17z",fillRule:"evenodd",clipRule:"evenodd",fill:"#b6b6b6"}),E=function(a){return n.a.createElement("svg",e({width:40,height:32},a),x)};a.d(c,"default",function(){return v});var v=function(a){function b(a){m()(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(h()(a));a.onDecrease=a.onDecrease.bind(h()(a));a.handleChange=a.handleChange.bind(h()(a));a.handleBlur=a.handleBlur.bind(h()(a));a.handleClick=a.handleClick.bind(h()(a));a.textInput=n.a.createRef();return a}u()(b,a);var c=g(b);q()(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,e=a.plusLabel, d=a.minusLabel,g=a.label,u=a.labelId,k=a.required,h=a.disabled,m=a.style,l=this.state,p=l.counter;l=l.state;a=["rex-stepper",a.className].filter(function(a){return a&&0<a.length}).join(" ").trim();g=!!(g&&0<g.length);switch(l){case "hover":var r=["hover"];var t=["hover"];break;case "active":r=["active"];t=["active"];break;case "minusHover":r=["hover"];break;case "plusHover":t=["hover"];break;case "minusActive":r=["active"];break;case "plusActive":t=["active"];break;default:r=[""],t=[""]}r=["rex-icon-button minus", r].filter(function(a){return a&&0<a.length}).join(" ").trim();t=["rex-icon-button plus",t].filter(function(a){return a&&0<a.length}).join(" ").trim();return n.a.createElement("div",{className:a,style:m},n.a.createElement("button",{className:r,type:"button","aria-label":d,onClick:this.onDecrease,disabled:h,required:k},n.a.createElement(E,null)),n.a.createElement("input",{id:b,type:"text",className:"rex-stepper-counter",name:c,pattern:"[0-9]*",value:p,ref:this.textInput,"aria-label":g?null:c,"aria-labelledby":g? u:null,onChange:this.handleChange,onBlur:this.handleBlur,onClick:this.handleClick,disabled:h,required:k}),n.a.createElement("button",{className:t,type:"button","aria-label":e,onClick:this.onIncrease,disabled:h,required:k},n.a.createElement(w,null)))}}]);return b}(b.Component);v.displayName="Stepper";v.defaultProps={name:"",id:"",className:"",state:"",label:"",labelId:"",style:{},plusLabel:"",minusLabel:"",counter:0,maxValue:99,disabled:!1,required:!1}},function(b,c){b.exports=function(a,b){if(null== a)return{};var c={},d=Object.keys(a),k;for(k=0;k<d.length;k++){var m=d[k];0<=b.indexOf(m)||(c[m]=a[m])}return c}},function(b,c,a){},function(b,c){function a(c,e){b.exports=a=Object.setPrototypeOf||function(a,b){a.__proto__=b;return a};return a(c,e)}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){},function(b,c,a){},function(b,c,a){function d(a){var b=a.name,c=a.id,d=a.className,p=a.label,w=a.labelId,x=a.state,u=a.style,v=a.counter,A=a.plusLabel,C=a.minusLabel,D=a.maxValue,f=a.disabled,B=a.required;a=g()(a,"name id className label labelId state style counter plusLabel minusLabel maxValue disabled required".split(" "));var F=function(a){switch(a){case "active":return"active";case "focus":return"focus";case "hover":return"hover";default:return""}}(x); d=["rex-stepper-label",d,F].filter(function(a){return a&&0<a.length}).join(" ").trim();var y=Object(k.useRef)(null);return m.a.createElement("div",e()({className:d,style:u},a),m.a.createElement(h["default"],{id:w,htmlFor:c,label:p,labelRef:y,disabled:f,required:B}),m.a.createElement(q["default"],{name:b,id:c,labelId:w,counter:v,plusLabel:A,minusLabel:C,maxValue:D,disabled:f,required:B,state:x,onFocus:function(){y.current.focus()},onBlur:function(){y.current.classList.remove("active");y.current.blur()}}))} a.r(c);b=a(2);var e=a.n(b);b=a(3);var g=a.n(b),k=a(0),m=a.n(k),q=a(10),h=a(9);a(16);a.d(c,"default",function(){return d});d.displayName="StepperLabel";d.defaultProps={name:"",id:"",className:"",label:"",labelId:"",state:"",style:null,plusLabel:"",minusLabel:"",counter:0,maxValue:99,disabled:!1,required:!1}}])});