2r-stepper
Version:
2R library stepper component implemented in React
1 lines • 3.23 kB
JavaScript
"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var a=t[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,r,a){return r&&e(t.prototype,r),a&&e(t,a),t}}(),_get=function(e,t,r){for(var a=!0;a;){var s=e,l=t,n=r;i=u=o=void 0,a=!1,null===s&&(s=Function.prototype);var i=Object.getOwnPropertyDescriptor(s,l);if(void 0!==i){if("value"in i)return i.value;var o=i.get;return void 0===o?void 0:o.call(n)}var u=Object.getPrototypeOf(s);if(null===u)return void 0;e=u,t=l,r=n,a=!0}},_react=require("react"),_react2=_interopRequireDefault(_react),_classnames=require("classnames"),_classnames2=_interopRequireDefault(_classnames),_rStepperStyle=require("./2r-stepper.style"),_rStepperStyle2=_interopRequireDefault(_rStepperStyle),Stepper=function(e){function t(e){_classCallCheck(this,t),_get(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={val:this.props.initialValue||0},this.config={stepValue:this.props.stepValue||1,allowNegativeValues:this.props.allowNegativeValues||!1,classes:this.props.classes||""}}return _inherits(t,e),_createClass(t,[{key:"constructBaseWrapperClasses",value:function(){var e=this.config.classes?this.props.classes.split(" "):[];return _classnames2["default"]("2r-stepper",e)}},{key:"incrementValue",value:function(){this.setState({val:this.state.val+this.config.stepValue})}},{key:"decrementValue",value:function(){this.setState({val:this.state.val-this.config.stepValue})}},{key:"disableDecrementButton",value:function(){var e=!this.state.val||this.state.val-this.config.stepValue<0;return!this.config.allowNegativeValues&&e}},{key:"render",value:function(){var e=this.constructBaseWrapperClasses(),t=this.disableDecrementButton();return _react2["default"].createElement("div",{className:e,style:_rStepperStyle2["default"].wrapper},_react2["default"].createElement("button",{className:"2r-stepper__button",style:_rStepperStyle2["default"].button,onClick:this.decrementValue.bind(this),disabled:t},"-"),_react2["default"].createElement("div",{className:"2r-stepper__value",style:_rStepperStyle2["default"].value},this.state.val),_react2["default"].createElement("button",{className:"2r-stepper__button",style:_rStepperStyle2["default"].button,onClick:this.incrementValue.bind(this)},"+"))}}]),t}(_react2["default"].Component);Stepper.propTypes={initialValue:_react2["default"].PropTypes.number,stepValue:_react2["default"].PropTypes.number,allowNegativeValues:_react2["default"].PropTypes.bool,classes:_react2["default"].PropTypes.string},exports["default"]=Stepper,module.exports=exports["default"];