@rakuten-rex/stepper
Version:
Input Stepper is a UI control used to incrementally increase of decrease a numeric value.
612 lines (512 loc) • 20.4 kB
JavaScript
/*!
*
* @license @rakuten-rex/stepper v1.6.0 2020-07-01
* Stepper/Stepper.development.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.
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define("rakutenRexStepper", ["react"], factory);
else if(typeof exports === 'object')
exports["rakutenRexStepper"] = factory(require("react"));
else
root["rakutenRexStepper"] = factory(root["React"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE__0__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 10);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
/***/ }),
/* 1 */
/***/ (function(module, exports) {
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
module.exports = _assertThisInitialized;
/***/ }),
/* 2 */,
/* 3 */,
/* 4 */
/***/ (function(module, exports) {
function _getPrototypeOf(o) {
module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
module.exports = _getPrototypeOf;
/***/ }),
/* 5 */
/***/ (function(module, exports) {
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
module.exports = _classCallCheck;
/***/ }),
/* 6 */
/***/ (function(module, exports) {
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
module.exports = _createClass;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
var setPrototypeOf = __webpack_require__(13);
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) setPrototypeOf(subClass, superClass);
}
module.exports = _inherits;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
var _typeof = __webpack_require__(14);
var assertThisInitialized = __webpack_require__(1);
function _possibleConstructorReturn(self, call) {
if (call && (_typeof(call) === "object" || typeof call === "function")) {
return call;
}
return assertThisInitialized(self);
}
module.exports = _possibleConstructorReturn;
/***/ }),
/* 9 */,
/* 10 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/classCallCheck.js
var classCallCheck = __webpack_require__(5);
var classCallCheck_default = /*#__PURE__*/__webpack_require__.n(classCallCheck);
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/createClass.js
var createClass = __webpack_require__(6);
var createClass_default = /*#__PURE__*/__webpack_require__.n(createClass);
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/assertThisInitialized.js
var assertThisInitialized = __webpack_require__(1);
var assertThisInitialized_default = /*#__PURE__*/__webpack_require__.n(assertThisInitialized);
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/inherits.js
var inherits = __webpack_require__(7);
var inherits_default = /*#__PURE__*/__webpack_require__.n(inherits);
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js
var possibleConstructorReturn = __webpack_require__(8);
var possibleConstructorReturn_default = /*#__PURE__*/__webpack_require__.n(possibleConstructorReturn);
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/getPrototypeOf.js
var getPrototypeOf = __webpack_require__(4);
var getPrototypeOf_default = /*#__PURE__*/__webpack_require__.n(getPrototypeOf);
// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","umd":"react"}
var external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_ = __webpack_require__(0);
var external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_);
// EXTERNAL MODULE: ./src/Stepper/Stepper.scss
var Stepper_Stepper = __webpack_require__(15);
// CONCATENATED MODULE: ./src/Stepper/img/rex-icon-plus.svg
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _ref = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("path", {
d: "M19.3 10v5.3H14v1.3h5.3V22h1.3v-5.3H26v-1.3h-5.3V10z",
fill: "#b6b6b6",
fillRule: "evenodd"
});
var rex_icon_plus_SvgRexIconPlus = function SvgRexIconPlus(props) {
return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("svg", _extends({
width: 40,
height: 32
}, props), _ref);
};
/* harmony default export */ var rex_icon_plus = (rex_icon_plus_SvgRexIconPlus);
// CONCATENATED MODULE: ./src/Stepper/img/rex-icon-minus.svg
function rex_icon_minus_extends() { rex_icon_minus_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return rex_icon_minus_extends.apply(this, arguments); }
var rex_icon_minus_ref = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("path", {
d: "M14 17h12v-1.3H14V17z",
fillRule: "evenodd",
clipRule: "evenodd",
fill: "#b6b6b6"
});
var rex_icon_minus_SvgRexIconMinus = function SvgRexIconMinus(props) {
return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("svg", rex_icon_minus_extends({
width: 40,
height: 32
}, props), rex_icon_minus_ref);
};
/* harmony default export */ var rex_icon_minus = (rex_icon_minus_SvgRexIconMinus);
// CONCATENATED MODULE: ./src/Stepper/Stepper.jsx
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Stepper_Stepper_Stepper; });
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf_default()(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf_default()(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn_default()(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
/* eslint-disable react/jsx-props-no-spreading */
var Stepper_Stepper_Stepper = /*#__PURE__*/function (_Component) {
inherits_default()(Stepper, _Component);
var _super = _createSuper(Stepper);
function Stepper(props) {
var _this;
classCallCheck_default()(this, Stepper);
_this = _super.call(this, props);
var _this$props = _this.props,
maxValue = _this$props.maxValue,
counter = _this$props.counter,
state = _this$props.state;
_this.state = {
counter: counter,
maxValue: maxValue,
state: state
};
_this.onIncrease = _this.onIncrease.bind(assertThisInitialized_default()(_this));
_this.onDecrease = _this.onDecrease.bind(assertThisInitialized_default()(_this));
_this.handleChange = _this.handleChange.bind(assertThisInitialized_default()(_this));
_this.handleBlur = _this.handleBlur.bind(assertThisInitialized_default()(_this));
_this.handleClick = _this.handleClick.bind(assertThisInitialized_default()(_this));
_this.textInput = external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createRef();
return _this;
}
createClass_default()(Stepper, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props2 = this.props,
maxValue = _this$props2.maxValue,
counter = _this$props2.counter,
state = _this$props2.state;
if (maxValue !== prevProps.maxValue) {
this.updateMaxValueState(maxValue);
}
if (counter !== prevProps.counter) {
this.updateCounterState(counter);
}
if (state !== prevProps.state) {
this.updateState(state);
}
}
}, {
key: "onIncrease",
value: function onIncrease() {
var _this$state = this.state,
counter = _this$state.counter,
maxValue = _this$state.maxValue;
if (counter < maxValue) {
var countNumber = Number(counter) + 1;
this.setState({
counter: countNumber
});
}
if (this.textInput.current) {
this.textInput.current.setSelectionRange(0, 5);
}
}
}, {
key: "onDecrease",
value: function onDecrease() {
var counter = this.state.counter;
if (counter > 0) {
var countNumber = Number(counter) - 1;
this.setState({
counter: countNumber
});
}
this.textInput.current.setSelectionRange(0, 5);
}
}, {
key: "updateMaxValueState",
value: function updateMaxValueState(maxValue) {
this.setState({
maxValue: maxValue
});
}
}, {
key: "updateCounterState",
value: function updateCounterState(counter) {
this.setState({
counter: counter
});
}
}, {
key: "updateState",
value: function updateState(state) {
this.setState({
state: state
});
}
}, {
key: "handleChange",
value: function handleChange(e) {
var maxValue = this.state.maxValue;
var inputValue = e.target.value.replace(/\D/, '');
if (inputValue <= maxValue) {
this.setState({
counter: inputValue
});
}
}
}, {
key: "handleClick",
value: function handleClick() {
this.textInput.current.select();
}
}, {
key: "handleBlur",
value: function handleBlur(e) {
var counter = this.props.counter;
if (e.target.value === '') {
this.setState({
counter: counter
});
}
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
id = _this$props3.id,
name = _this$props3.name,
className = _this$props3.className,
plusLabel = _this$props3.plusLabel,
minusLabel = _this$props3.minusLabel,
label = _this$props3.label,
labelId = _this$props3.labelId,
required = _this$props3.required,
disabled = _this$props3.disabled,
style = _this$props3.style;
var _this$state2 = this.state,
counter = _this$state2.counter,
state = _this$state2.state; // component class
var classes = ['rex-stepper', className].filter(function (singleClass) {
return singleClass && singleClass.length > 0;
}).join(' ').trim();
var hasLabel = !!(label && label.length > 0); // button class condition
var minusStateClass;
var plusStateClass;
switch (state) {
case 'hover':
minusStateClass = ['hover'];
plusStateClass = ['hover'];
break;
case 'active':
minusStateClass = ['active'];
plusStateClass = ['active'];
break;
case 'minusHover':
minusStateClass = ['hover'];
break;
case 'plusHover':
plusStateClass = ['hover'];
break;
case 'minusActive':
minusStateClass = ['active'];
break;
case 'plusActive':
plusStateClass = ['active'];
break;
default:
minusStateClass = [''];
plusStateClass = [''];
break;
}
var minusClasses = ['rex-icon-button minus', minusStateClass].filter(function (singleClass) {
return singleClass && singleClass.length > 0;
}).join(' ').trim();
var plusClasses = ['rex-icon-button plus', plusStateClass].filter(function (singleClass) {
return singleClass && singleClass.length > 0;
}).join(' ').trim();
return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", {
className: classes,
style: style
}, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", {
className: minusClasses,
type: "button",
"aria-label": minusLabel,
onClick: this.onDecrease,
disabled: disabled,
required: required
}, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(rex_icon_minus, null)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("input", {
id: id,
type: "text",
className: "rex-stepper-counter",
name: name,
pattern: "[0-9]*",
value: counter,
ref: this.textInput,
"aria-label": !hasLabel ? name : null,
"aria-labelledby": hasLabel ? labelId : null,
onChange: this.handleChange,
onBlur: this.handleBlur,
onClick: this.handleClick,
disabled: disabled,
required: required
}), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", {
className: plusClasses,
type: "button",
"aria-label": plusLabel,
onClick: this.onIncrease,
disabled: disabled,
required: required
}, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(rex_icon_plus, null)));
}
}]);
return Stepper;
}(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Component"]);
Stepper_Stepper_Stepper.displayName = "Stepper";
Stepper_Stepper_Stepper.defaultProps = {
name: '',
id: '',
className: '',
state: '',
label: '',
labelId: '',
style: {},
plusLabel: '',
minusLabel: '',
counter: 0,
maxValue: 99,
disabled: false,
required: false
};
/***/ }),
/* 11 */,
/* 12 */,
/* 13 */
/***/ (function(module, exports) {
function _setPrototypeOf(o, p) {
module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
module.exports = _setPrototypeOf;
/***/ }),
/* 14 */
/***/ (function(module, exports) {
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
module.exports = _typeof = function _typeof(obj) {
return typeof obj;
};
} else {
module.exports = _typeof = function _typeof(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
module.exports = _typeof;
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ })
/******/ ]);
});