Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-numeric-input
Advanced tools
react-numeric-input - npm Package Compare versions
Comparing version 2.0.7 to 2.0.9
@@ -5,3 +5,3 @@ /* global describe, it */ | ||
| import React from 'react' | ||
| import TestUtils from 'react-addons-test-utils' | ||
| import TestUtils from 'react-dom/test-utils' | ||
@@ -8,0 +8,0 @@ describe('NumericInput', function() { |
@@ -9,3 +9,3 @@ /* global describe, it */ | ||
| import React from 'react' | ||
| import TestUtils from 'react-addons-test-utils' | ||
| import TestUtils from 'react-dom/test-utils' | ||
@@ -124,2 +124,21 @@ describe ('NumericInput/misc', function() { | ||
| }) | ||
| /** | ||
| * The field should accept "-.", "+.", ".", "-", and "+" at beginning of input value. | ||
| * @see https://github.com/vlad-ignatov/react-numeric-input/pull/48/commits/b01f1f9b61c86a9f3a72088f4f82279370e7155a | ||
| */ | ||
| it ('The field should accept "-.", "+.", ".", "-", and "+" at beginning of input value', done => { | ||
| let widget = TestUtils.renderIntoDocument(<NumericInput min={-10} max={10}/>) | ||
| let input = widget.refs.input | ||
| input.focus(); | ||
| ["-.", "+.", ".", "-", "+"].forEach(value => { | ||
| input.value = value; | ||
| TestUtils.Simulate.input(input); | ||
| expect(input.value).toEqual(value); | ||
| }) | ||
| done(); | ||
| }) | ||
| }) |
@@ -6,3 +6,3 @@ /* global describe, it */ | ||
| import ReactDOM from 'react-dom' | ||
| import TestUtils from 'react-addons-test-utils' | ||
| import TestUtils from 'react-dom/test-utils' | ||
@@ -108,3 +108,3 @@ const KEYCODE_UP = 38; | ||
| done(); | ||
| }, DELAY); | ||
| }, NumericInput.SPEED); | ||
| }, DELAY); | ||
@@ -111,0 +111,0 @@ }); |
@@ -5,3 +5,3 @@ /* global describe, it */ | ||
| import React from 'react' | ||
| import TestUtils from 'react-addons-test-utils' | ||
| import TestUtils from 'react-dom/test-utils' | ||
@@ -8,0 +8,0 @@ const KEYCODE_UP = 38; |
@@ -5,3 +5,3 @@ /* global React, describe, it */ | ||
| import React from 'react' | ||
| import TestUtils from 'react-addons-test-utils' | ||
| import TestUtils from 'react-dom/test-utils' | ||
@@ -8,0 +8,0 @@ function testProp(cfg) { |
@@ -5,3 +5,3 @@ /* global describe, it */ | ||
| import React from 'react' | ||
| import TestUtils from 'react-addons-test-utils' | ||
| import TestUtils from 'react-dom/test-utils' | ||
@@ -8,0 +8,0 @@ const INVALID_CLASS = "has-error" |
@@ -30,3 +30,4 @@ var webpack = require("webpack") | ||
| externals : { | ||
| "react": "React" | ||
| "react": "React", | ||
| "prop-types": "prop-types" | ||
| }, | ||
@@ -33,0 +34,0 @@ resolve : { |
@@ -21,3 +21,4 @@ module.exports = { | ||
| externals : { | ||
| "react": "React" | ||
| "react": "React", | ||
| "prop-types": "prop-types" | ||
| }, | ||
@@ -24,0 +25,0 @@ resolve : { |
@@ -22,4 +22,5 @@ module.exports = { | ||
| externals : { | ||
| "react" : "React", | ||
| "react-dom": "ReactDOM" | ||
| "react" : "React", | ||
| "react-dom" : "ReactDOM", | ||
| "prop-types": "PropTypes" | ||
| }, | ||
@@ -26,0 +27,0 @@ resolve : { |
@@ -24,3 +24,4 @@ module.exports = { | ||
| externals : { | ||
| "react": "react" | ||
| "react": "react", | ||
| "prop-types": "prop-types" | ||
| }, | ||
@@ -27,0 +28,0 @@ resolve : { |
@@ -0,1 +1,13 @@ | ||
| 2.0.9 | ||
| -------------------------------------------------------------------------------- | ||
| * Field now accepts `"-."`, `"+.`", `"."`, `"-"`, and `"+"` at beginning of input value. | ||
| * Merge some pull requests | ||
| * Fixed backspace on float values | ||
| * Use external prop-types package | ||
| * Use react and react-dom v15.6.1 | ||
| 2.0.8 | ||
| -------------------------------------------------------------------------------- | ||
| Fixed `React.PropTypes` reference warnings | ||
| 2.0.7 | ||
@@ -2,0 +14,0 @@ -------------------------------------------------------------------------------- |
| (function webpackUniversalModuleDefinition(root, factory) { | ||
| if(typeof exports === 'object' && typeof module === 'object') | ||
| module.exports = factory(require("React")); | ||
| module.exports = factory(require("React"), require("prop-types")); | ||
| else if(typeof define === 'function' && define.amd) | ||
| define(["React"], factory); | ||
| define(["React", "prop-types"], factory); | ||
| else if(typeof exports === 'object') | ||
| exports["NumericInput"] = factory(require("React")); | ||
| exports["NumericInput"] = factory(require("React"), require("prop-types")); | ||
| else | ||
| root["NumericInput"] = factory(root["React"]); | ||
| })(this, function(__WEBPACK_EXTERNAL_MODULE_1__) { | ||
| root["NumericInput"] = factory(root["React"], root["prop-types"]); | ||
| })(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
@@ -57,3 +57,3 @@ /******/ // The module cache | ||
| "use strict"; | ||
| 'use strict'; | ||
@@ -68,2 +68,6 @@ var _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; }; | ||
| var _propTypes = __webpack_require__(2); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -85,3 +89,3 @@ | ||
| * Just a simple helper to provide support for older IEs. This is not exactly a | ||
| * polyfill for classList.add but it does what we need with minimal efford. | ||
| * polyfill for classList.add but it does what we need with minimal effort. | ||
| * Works with single className only! | ||
@@ -100,3 +104,3 @@ */ | ||
| * Just a simple helper to provide support for older IEs. This is not exactly a | ||
| * polyfill for classList.remove but it does what we need with minimal efford. | ||
| * polyfill for classList.remove but it does what we need with minimal effort. | ||
| * Works with single className only! | ||
@@ -137,3 +141,3 @@ */ | ||
| /** | ||
| * When click and hold on a button - the speed of auto changin the value. | ||
| * When click and hold on a button - the speed of auto changing the value. | ||
| * This is a static property and can be modified if needed. | ||
@@ -143,3 +147,3 @@ */ | ||
| /** | ||
| * The deault behaviour is to start from 0, use step of 1 and display | ||
| * The default behavior is to start from 0, use step of 1 and display | ||
| * integers | ||
@@ -196,3 +200,3 @@ */ | ||
| /** | ||
| * When click and hold on a button - the delay before auto changin the value. | ||
| * When click and hold on a button - the delay before auto changing the value. | ||
| * This is a static property and can be modified if needed. | ||
@@ -208,3 +212,3 @@ */ | ||
| _createClass(NumericInput, [{ | ||
| key: "componentWillReceiveProps", | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(props) { | ||
@@ -214,3 +218,4 @@ var _value = String(props.value || props.value === 0 ? props.value : '').replace(/^\s*|\s*$/, ""); | ||
| this.setState({ | ||
| value: "value" in props && _value !== '' ? this._parse(_value) : null | ||
| value: "value" in props && _value !== '' ? this._parse(_value) : null, | ||
| stringValue: _value | ||
| }); | ||
@@ -224,3 +229,3 @@ } | ||
| }, { | ||
| key: "componentWillUpdate", | ||
| key: 'componentWillUpdate', | ||
| value: function componentWillUpdate() { | ||
@@ -237,3 +242,3 @@ this.saveSelection(); | ||
| }, { | ||
| key: "componentDidUpdate", | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate(prevProps, prevState) { | ||
@@ -271,3 +276,3 @@ // Call the onChange if needed. This is placed here because there are | ||
| }, { | ||
| key: "componentWillUnmount", | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
@@ -282,3 +287,3 @@ this.stop(); | ||
| }, { | ||
| key: "componentDidMount", | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
@@ -293,3 +298,4 @@ var _this2 = this; | ||
| _this2.setState({ | ||
| value: _this2._parse(value) | ||
| value: _this2._parse(value), | ||
| stringValue: value | ||
| }); | ||
@@ -318,3 +324,3 @@ }; | ||
| }, { | ||
| key: "saveSelection", | ||
| key: 'saveSelection', | ||
| value: function saveSelection() { | ||
@@ -332,3 +338,3 @@ this.state.selectionStart = this.refs.input.selectionStart; | ||
| }, { | ||
| key: "checkValidity", | ||
| key: 'checkValidity', | ||
| value: function checkValidity() { | ||
@@ -354,3 +360,3 @@ var valid = undefined, | ||
| // In some browsers once a pattern is set it connot be removed. The | ||
| // In some browsers once a pattern is set it cannot be removed. The | ||
| // browser sets it to "" instead which results in validation | ||
@@ -372,3 +378,3 @@ // failures... | ||
| // Some brousers might fail to validate maxLength | ||
| // Some browsers might fail to validate maxLength | ||
| if (valid && supportsValidation && this.props.maxLength) { | ||
@@ -407,3 +413,3 @@ if (this.refs.input.value.length > this.props.maxLength) { | ||
| }, { | ||
| key: "_toNumber", | ||
| key: '_toNumber', | ||
| value: function _toNumber(x, loose) { | ||
@@ -435,4 +441,9 @@ loose = loose === undefined ? this.state.inputFocus && !(this.state.btnDownActive || this.state.btnUpActive) : !!loose; | ||
| }, { | ||
| key: "_parse", | ||
| key: '_parse', | ||
| value: function _parse(x) { | ||
| // prevent backspace on dot in float value | ||
| if (this.props.precision > 0 && this.state.value !== null && !isNaN(this.state.value) && x.length > 0 && x.indexOf(".") < 0) { | ||
| x = this.state.value; | ||
| } | ||
| if (typeof this.props.parse == 'function') { | ||
@@ -445,3 +456,3 @@ return parseFloat(this.props.parse(x)); | ||
| /** | ||
| * This is used internally to format a number to it's dislay representation. | ||
| * This is used internally to format a number to it's display representation. | ||
| * It will invoke the this.props.format function if one is provided. | ||
@@ -452,3 +463,3 @@ * @private | ||
| }, { | ||
| key: "_format", | ||
| key: '_format', | ||
| value: function _format(n) { | ||
@@ -465,3 +476,3 @@ var _n = this._toNumber(n).toFixed(this.props.precision); | ||
| /** | ||
| * The internal method that actualy sets the new value on the input | ||
| * The internal method that actually sets the new value on the input | ||
| * @private | ||
@@ -471,3 +482,3 @@ */ | ||
| }, { | ||
| key: "_step", | ||
| key: '_step', | ||
| value: function _step(n, callback) { | ||
@@ -477,3 +488,3 @@ var _n = this._toNumber((this.state.value || 0) + this.props.step * n, false); | ||
| if (_n !== this.state.value) { | ||
| this.setState({ value: _n }, callback); | ||
| this.setState({ value: _n, stringValue: _n }, callback); | ||
| return true; | ||
@@ -486,16 +497,2 @@ } | ||
| /** | ||
| * This gets called whenever the user edits the input value. The value will | ||
| * be recreated using the current parse/format methods so the input will | ||
| * appear as readonly if the user tries to type something invalid. | ||
| */ | ||
| }, { | ||
| key: "_onChange", | ||
| value: function _onChange(e) { | ||
| this.setState({ | ||
| value: this._parse(e.target.value) | ||
| }); | ||
| } | ||
| /** | ||
| * This binds the Up/Down arrow key listeners | ||
@@ -505,3 +502,3 @@ */ | ||
| }, { | ||
| key: "_onKeyDown", | ||
| key: '_onKeyDown', | ||
| value: function _onKeyDown() { | ||
@@ -531,3 +528,3 @@ for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| }, { | ||
| key: "stop", | ||
| key: 'stop', | ||
| value: function stop() { | ||
@@ -549,3 +546,3 @@ if (this._timer) { | ||
| }, { | ||
| key: "increase", | ||
| key: 'increase', | ||
| value: function increase() { | ||
@@ -577,3 +574,3 @@ var _this3 = this; | ||
| }, { | ||
| key: "decrease", | ||
| key: 'decrease', | ||
| value: function decrease() { | ||
@@ -602,3 +599,3 @@ var _this4 = this; | ||
| }, { | ||
| key: "onMouseDown", | ||
| key: 'onMouseDown', | ||
| value: function onMouseDown(dir, callback) { | ||
@@ -620,3 +617,3 @@ if (dir == 'down') { | ||
| }, { | ||
| key: "onTouchStart", | ||
| key: 'onTouchStart', | ||
| value: function onTouchStart(dir, e) { | ||
@@ -632,3 +629,3 @@ e.preventDefault(); | ||
| /** | ||
| * Helper method to ivoke event callback functions if they are provided | ||
| * Helper method to invoke event callback functions if they are provided | ||
| * in the props. | ||
@@ -640,3 +637,3 @@ * @param {String} callbackName The name of the function prop | ||
| }, { | ||
| key: "_invokeEventCallback", | ||
| key: '_invokeEventCallback', | ||
| value: function _invokeEventCallback(callbackName) { | ||
@@ -660,3 +657,3 @@ if (typeof this.props[callbackName] == "function") { | ||
| }, { | ||
| key: "render", | ||
| key: 'render', | ||
| value: function render() { | ||
@@ -686,3 +683,3 @@ var _this5 = this; | ||
| var rest = _objectWithoutProperties(_props, ["step", "min", "max", "precision", "parse", "format", "mobile", "value", "type", "style", "defaultValue", "onInvalid", "onValid"]); | ||
| var rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid']); | ||
@@ -739,3 +736,5 @@ // Build the styles | ||
| if (state.value || state.value === 0) { | ||
| if (/^[+-.]{1,2}$/.test(state.stringValue)) { | ||
| attrs.input.value = state.stringValue; | ||
| } else if (state.value || state.value === 0) { | ||
| attrs.input.value = this._format(state.value); | ||
@@ -844,7 +843,8 @@ } else { | ||
| onChange: function onChange(e) { | ||
| var val = _this5._parse(e.target.value); | ||
| var original = e.target.value; | ||
| var val = _this5._parse(original); | ||
| if (isNaN(val)) { | ||
| val = null; | ||
| } | ||
| _this5.setState({ value: val }); | ||
| _this5.setState({ value: val, stringValue: original }); | ||
| }, | ||
@@ -875,4 +875,6 @@ onKeyDown: this._onKeyDown.bind(this), | ||
| _this5.setState({ inputFocus: true }, function () { | ||
| var val = _this5._parse(args[0].target.value); | ||
| _this5.setState({ | ||
| value: _this5._parse(args[0].target.value) | ||
| value: val, | ||
| stringValue: val | ||
| }, function () { | ||
@@ -890,4 +892,5 @@ _this5._invokeEventCallback.apply(_this5, ["onFocus"].concat(args)); | ||
| _this5.setState({ inputFocus: false }, function () { | ||
| var val = _this5._parse(args[0].target.value); | ||
| _this5.setState({ | ||
| value: _this5._parse(args[0].target.value) | ||
| value: val | ||
| }, function () { | ||
@@ -907,15 +910,15 @@ _this5._invokeEventCallback.apply(_this5, ["onBlur"].concat(args)); | ||
| return _react2.default.createElement( | ||
| "span", | ||
| 'span', | ||
| attrs.wrap, | ||
| _react2.default.createElement("input", attrs.input), | ||
| _react2.default.createElement('input', attrs.input), | ||
| _react2.default.createElement( | ||
| "b", | ||
| 'b', | ||
| attrs.btnUp, | ||
| _react2.default.createElement("i", { style: style === false ? null : css.minus }), | ||
| _react2.default.createElement("i", { style: style === false ? null : css.plus }) | ||
| _react2.default.createElement('i', { style: style === false ? null : css.minus }), | ||
| _react2.default.createElement('i', { style: style === false ? null : css.plus }) | ||
| ), | ||
| _react2.default.createElement( | ||
| "b", | ||
| 'b', | ||
| attrs.btnDown, | ||
| _react2.default.createElement("i", { style: style === false ? null : css.minus }) | ||
| _react2.default.createElement('i', { style: style === false ? null : css.minus }) | ||
| ) | ||
@@ -926,14 +929,14 @@ ); | ||
| return _react2.default.createElement( | ||
| "span", | ||
| 'span', | ||
| attrs.wrap, | ||
| _react2.default.createElement("input", attrs.input), | ||
| _react2.default.createElement('input', attrs.input), | ||
| _react2.default.createElement( | ||
| "b", | ||
| 'b', | ||
| attrs.btnUp, | ||
| _react2.default.createElement("i", { style: style === false ? null : css.arrowUp }) | ||
| _react2.default.createElement('i', { style: style === false ? null : css.arrowUp }) | ||
| ), | ||
| _react2.default.createElement( | ||
| "b", | ||
| 'b', | ||
| attrs.btnDown, | ||
| _react2.default.createElement("i", { style: style === false ? null : css.arrowDown }) | ||
| _react2.default.createElement('i', { style: style === false ? null : css.arrowDown }) | ||
| ) | ||
@@ -948,28 +951,28 @@ ); | ||
| NumericInput.propTypes = { | ||
| step: _react.PropTypes.number, | ||
| min: _react.PropTypes.number, | ||
| max: _react.PropTypes.number, | ||
| precision: _react.PropTypes.number, | ||
| maxLength: _react.PropTypes.number, | ||
| parse: _react.PropTypes.func, | ||
| format: _react.PropTypes.func, | ||
| className: _react.PropTypes.string, | ||
| disabled: _react.PropTypes.bool, | ||
| readOnly: _react.PropTypes.bool, | ||
| required: _react.PropTypes.bool, | ||
| noValidate: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.string]), | ||
| style: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.bool]), | ||
| type: _react.PropTypes.string, | ||
| pattern: _react.PropTypes.string, | ||
| onFocus: _react.PropTypes.func, | ||
| onBlur: _react.PropTypes.func, | ||
| onKeyDown: _react.PropTypes.func, | ||
| onChange: _react.PropTypes.func, | ||
| onInvalid: _react.PropTypes.func, | ||
| onValid: _react.PropTypes.func, | ||
| onInput: _react.PropTypes.func, | ||
| onSelect: _react.PropTypes.func, | ||
| size: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]), | ||
| value: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]), | ||
| defaultValue: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]), | ||
| step: _propTypes2.default.number, | ||
| min: _propTypes2.default.number, | ||
| max: _propTypes2.default.number, | ||
| precision: _propTypes2.default.number, | ||
| maxLength: _propTypes2.default.number, | ||
| parse: _propTypes2.default.func, | ||
| format: _propTypes2.default.func, | ||
| className: _propTypes2.default.string, | ||
| disabled: _propTypes2.default.bool, | ||
| readOnly: _propTypes2.default.bool, | ||
| required: _propTypes2.default.bool, | ||
| noValidate: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]), | ||
| style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]), | ||
| type: _propTypes2.default.string, | ||
| pattern: _propTypes2.default.string, | ||
| onFocus: _propTypes2.default.func, | ||
| onBlur: _propTypes2.default.func, | ||
| onKeyDown: _propTypes2.default.func, | ||
| onChange: _propTypes2.default.func, | ||
| onInvalid: _propTypes2.default.func, | ||
| onValid: _propTypes2.default.func, | ||
| onInput: _propTypes2.default.func, | ||
| onSelect: _propTypes2.default.func, | ||
| size: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), | ||
| value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), | ||
| defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), | ||
| mobile: function mobile(props, propName) { | ||
@@ -1063,3 +1066,3 @@ var prop = props[propName]; | ||
| background: 'rgba(0,0,0,.1)', | ||
| boxShadow: "-1px -1px 3px rgba(0,0,0,.1) inset,\n 1px 1px 3px rgba(255,255,255,.7) inset" | ||
| boxShadow: '-1px -1px 3px rgba(0,0,0,.1) inset,' + '1px 1px 3px rgba(255,255,255,.7) inset' | ||
| }, | ||
@@ -1106,3 +1109,3 @@ | ||
| background: 'rgba(0,0,0,.3)', | ||
| boxShadow: "0 1px 3px rgba(0,0,0,.2) inset,\n -1px -1px 4px rgba(255,255,255,.5) inset" | ||
| boxShadow: '0 1px 3px rgba(0,0,0,.2) inset,' + '-1px -1px 4px rgba(255,255,255,.5) inset' | ||
| }, | ||
@@ -1156,2 +1159,8 @@ | ||
| /***/ }, | ||
| /* 2 */ | ||
| /***/ function(module, exports) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE_2__; | ||
| /***/ } | ||
@@ -1158,0 +1167,0 @@ /******/ ]) |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define(["React"],e):"object"==typeof exports?exports.NumericInput=e(require("React")):t.NumericInput=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var s=n[o]={exports:{},id:o,loaded:!1};return t[o].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){var n={};for(var o in t)e.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(t,e){return t.classList?t.classList.add(e):void(t.className.search(new RegExp("\\b"+e+"\\b"))||(t.className=" "+e))}function p(t,e){if(t.className){if(t.classList)return t.classList.remove(e);t.className=t.className.replace(new RegExp("\\b"+e+"\\b","g"),"")}}var l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),h=n(1),f=o(h),v=38,d=40,b="undefined"!=typeof document,y=function(t){function e(){var t;r(this,e);for(var n=arguments.length,o=Array(n),s=0;n>s;s++)o[s]=arguments[s];var i=a(this,(t=Object.getPrototypeOf(e)).call.apply(t,[this].concat(o)));return i.state={selectionStart:null,selectionEnd:null,value:"value"in i.props?i.props.value:i.props.defaultValue,btnDownHover:!1,btnDownActive:!1,btnUpHover:!1,btnUpActive:!1,inputFocus:!1},i.stop=i.stop.bind(i),i}return i(e,t),c(e,[{key:"componentWillReceiveProps",value:function(t){var e=String(t.value||0===t.value?t.value:"").replace(/^\s*|\s*$/,"");this.setState({value:"value"in t&&""!==e?this._parse(e):null})}},{key:"componentWillUpdate",value:function(){this.saveSelection()}},{key:"componentDidUpdate",value:function(t,e){e.value===this.state.value||isNaN(this.state.value)&&null!==this.state.value||this._invokeEventCallback("onChange",this.state.value,this.refs.input.value),this.state.inputFocus&&(this.refs.input.focus(),(this.state.selectionStart||0===this.state.selectionStart)&&(this.refs.input.selectionStart=this.state.selectionStart),(this.state.selectionEnd||0===this.state.selectionEnd)&&(this.refs.input.selectionEnd=this.state.selectionEnd)),this.checkValidity()}},{key:"componentWillUnmount",value:function(){this.stop()}},{key:"componentDidMount",value:function(){var t=this;this.refs.input.getValueAsNumber=function(){return t.state.value||0},this.refs.input.setValue=function(e){t.setState({value:t._parse(e)})},!this.state.inputFocus&&b&&document.activeElement===this.refs.input&&(this.state.inputFocus=!0,this.refs.input.focus(),this._invokeEventCallback("onFocus",{target:this.refs.input,type:"focus"})),this.checkValidity()}},{key:"saveSelection",value:function(){this.state.selectionStart=this.refs.input.selectionStart,this.state.selectionEnd=this.refs.input.selectionEnd}},{key:"checkValidity",value:function(){var t=void 0,e="",n=!!this.refs.input.checkValidity,o=!(!this.props.noValidate||"false"==this.props.noValidate);this.refs.input.noValidate=o,t=o||!n,t?e="":(""===this.refs.input.pattern&&(this.refs.input.pattern=this.props.required?".+":".*"),n&&(this.refs.input.checkValidity(),t=this.refs.input.validity.valid,t||(e=this.refs.input.validationMessage)),t&&n&&this.props.maxLength&&this.refs.input.value.length>this.props.maxLength&&(e="This value is too long")),e=e||(t?"":this.refs.input.validationMessage||"Unknown Error");var s=this._valid!==e;this._valid=e,e?(u(this.refs.wrapper,"has-error"),s&&this._invokeEventCallback("onInvalid",e,this.state.value,this.refs.input.value)):(p(this.refs.wrapper,"has-error"),s&&this._invokeEventCallback("onValid",this.state.value,this.refs.input.value))}},{key:"_toNumber",value:function(t,e){e=void 0===e?this.state.inputFocus&&!(this.state.btnDownActive||this.state.btnUpActive):!!e;var n=parseFloat(t),o=Math.pow(10,this.props.precision);return(isNaN(n)||!isFinite(n))&&(n=0),e?n:(n=Math.min(Math.max(n,this.props.min),this.props.max),n=Math.round(n*o)/o)}},{key:"_parse",value:function(t){return"function"==typeof this.props.parse?parseFloat(this.props.parse(t)):parseFloat(t)}},{key:"_format",value:function(t){var e=this._toNumber(t).toFixed(this.props.precision);return this.props.format?this.props.format(e):e}},{key:"_step",value:function(t,e){var n=this._toNumber((this.state.value||0)+this.props.step*t,!1);return n!==this.state.value?(this.setState({value:n},e),!0):!1}},{key:"_onChange",value:function(t){this.setState({value:this._parse(t.target.value)})}},{key:"_onKeyDown",value:function(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];e[0].persist(),this._invokeEventCallback.apply(this,["onKeyDown"].concat(e));var o=e[0];o.isDefaultPrevented()||(o.keyCode===v?(o.preventDefault(),this._step(o.ctrlKey||o.metaKey?.1:o.shiftKey?10:1)):o.keyCode===d&&(o.preventDefault(),this._step(o.ctrlKey||o.metaKey?-.1:o.shiftKey?-10:-1)))}},{key:"stop",value:function(){this._timer&&clearTimeout(this._timer)}},{key:"increase",value:function(){var t=this,n=arguments.length<=0||void 0===arguments[0]?!1:arguments[0],o=arguments[1];this.stop(),this._step(1,o),(isNaN(this.state.value)||this.state.value<this.props.max)&&(this._timer=setTimeout(function(){t.increase(!0)},n?e.SPEED:e.DELAY))}},{key:"decrease",value:function(){var t=this,n=arguments.length<=0||void 0===arguments[0]?!1:arguments[0],o=arguments[1];this.stop(),this._step(-1,o),(isNaN(this.state.value)||this.state.value>this.props.min)&&(this._timer=setTimeout(function(){t.decrease(!0)},n?e.SPEED:e.DELAY))}},{key:"onMouseDown",value:function(t,e){"down"==t?this.decrease(!1,e):"up"==t&&this.increase(!1,e)}},{key:"onTouchStart",value:function(t,e){e.preventDefault(),"down"==t?this.decrease():"up"==t&&this.increase()}},{key:"_invokeEventCallback",value:function(t){if("function"==typeof this.props[t]){for(var e,n=arguments.length,o=Array(n>1?n-1:0),s=1;n>s;s++)o[s-1]=arguments[s];(e=this.props[t]).call.apply(e,[null].concat(o))}}},{key:"render",value:function(){var t=this,n=this.props,o=this.state,r={},a=this.props,i=(a.step,a.min,a.max,a.precision,a.parse,a.format,a.mobile),u=(a.value,a.type,a.style),p=(a.defaultValue,a.onInvalid,a.onValid,s(a,["step","min","max","precision","parse","format","mobile","value","type","style","defaultValue","onInvalid","onValid"]));for(var c in e.style)r[c]=l({},e.style[c],u?u[c]||{}:{});var h=n.className&&/\bform-control\b/.test(n.className);"auto"==i&&(i=b&&"ontouchstart"in document),"function"==typeof i&&(i=i.call(this)),i=!!i;var v={wrap:{style:u===!1?null:r.wrap,className:"react-numeric-input",ref:"wrapper",onMouseUp:void 0,onMouseLeave:void 0},input:l({ref:"input",type:"text",style:u===!1?null:l({},r.input,h?{}:r["input:not(.form-control)"],o.inputFocus?r["input:focus"]:{})},p),btnUp:{onMouseEnter:void 0,onMouseDown:void 0,onMouseUp:void 0,onMouseLeave:void 0,onTouchStart:void 0,onTouchEnd:void 0,style:u===!1?null:l({},r.btn,r.btnUp,n.disabled?r["btn:disabled"]:o.btnUpActive?r["btn:active"]:o.btnUpHover?r["btn:hover"]:{})},btnDown:{onMouseEnter:void 0,onMouseDown:void 0,onMouseUp:void 0,onMouseLeave:void 0,onTouchStart:void 0,onTouchEnd:void 0,style:u===!1?null:l({},r.btn,r.btnDown,n.disabled?r["btn:disabled"]:o.btnDownActive?r["btn:active"]:o.btnDownHover?r["btn:hover"]:{})}};return o.value||0===o.value?v.input.value=this._format(o.value):v.input.value="",h&&u!==!1&&l(v.wrap.style,r["wrap.hasFormControl"]),i&&u!==!1&&(l(v.input.style,r["input.mobile"]),l(v.btnUp.style,r["btnUp.mobile"]),l(v.btnDown.style,r["btnDown.mobile"])),n.disabled?u!==!1&&l(v.input.style,r["input:disabled"]):(l(v.wrap,{onMouseUp:this.stop,onMouseLeave:this.stop}),l(v.btnUp,{onTouchStart:this.onTouchStart.bind(this,"up"),onTouchEnd:this.stop,onMouseEnter:function(){t.setState({btnUpHover:!0})},onMouseLeave:function(){t.stop(),t.setState({btnUpHover:!1,btnUpActive:!1})},onMouseUp:function(){t.setState({btnUpHover:!0,btnUpActive:!1})},onMouseDown:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];n[0].preventDefault(),n[0].persist(),t.setState({btnUpHover:!0,btnUpActive:!0,inputFocus:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))}),t.onMouseDown("up")}}),l(v.btnDown,{onTouchStart:this.onTouchStart.bind(this,"down"),onTouchEnd:this.stop,onMouseEnter:function(){t.setState({btnDownHover:!0})},onMouseLeave:function(){t.stop(),t.setState({btnDownHover:!1,btnDownActive:!1})},onMouseUp:function(){t.setState({btnDownHover:!0,btnDownActive:!1})},onMouseDown:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];n[0].preventDefault(),n[0].persist(),t.setState({btnDownHover:!0,btnDownActive:!0,inputFocus:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))}),t.onMouseDown("down")}}),l(v.input,{onChange:function(e){var n=t._parse(e.target.value);isNaN(n)&&(n=null),t.setState({value:n})},onKeyDown:this._onKeyDown.bind(this),onInput:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];t.saveSelection(),t._invokeEventCallback.apply(t,["onInput"].concat(n))},onSelect:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];t.saveSelection(),t._invokeEventCallback.apply(t,["onSelect"].concat(n))},onFocus:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];n[0].persist(),t.setState({inputFocus:!0},function(){t.setState({value:t._parse(n[0].target.value)},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))})})},onBlur:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];n[0].persist(),t.setState({inputFocus:!1},function(){t.setState({value:t._parse(n[0].target.value)},function(){t._invokeEventCallback.apply(t,["onBlur"].concat(n))})})}})),i?f["default"].createElement("span",v.wrap,f["default"].createElement("input",v.input),f["default"].createElement("b",v.btnUp,f["default"].createElement("i",{style:u===!1?null:r.minus}),f["default"].createElement("i",{style:u===!1?null:r.plus})),f["default"].createElement("b",v.btnDown,f["default"].createElement("i",{style:u===!1?null:r.minus}))):f["default"].createElement("span",v.wrap,f["default"].createElement("input",v.input),f["default"].createElement("b",v.btnUp,f["default"].createElement("i",{style:u===!1?null:r.arrowUp})),f["default"].createElement("b",v.btnDown,f["default"].createElement("i",{style:u===!1?null:r.arrowDown})))}}]),e}(h.Component);y.propTypes={step:h.PropTypes.number,min:h.PropTypes.number,max:h.PropTypes.number,precision:h.PropTypes.number,maxLength:h.PropTypes.number,parse:h.PropTypes.func,format:h.PropTypes.func,className:h.PropTypes.string,disabled:h.PropTypes.bool,readOnly:h.PropTypes.bool,required:h.PropTypes.bool,noValidate:h.PropTypes.oneOfType([h.PropTypes.bool,h.PropTypes.string]),style:h.PropTypes.oneOfType([h.PropTypes.object,h.PropTypes.bool]),type:h.PropTypes.string,pattern:h.PropTypes.string,onFocus:h.PropTypes.func,onBlur:h.PropTypes.func,onKeyDown:h.PropTypes.func,onChange:h.PropTypes.func,onInvalid:h.PropTypes.func,onValid:h.PropTypes.func,onInput:h.PropTypes.func,onSelect:h.PropTypes.func,size:h.PropTypes.oneOfType([h.PropTypes.number,h.PropTypes.string]),value:h.PropTypes.oneOfType([h.PropTypes.number,h.PropTypes.string]),defaultValue:h.PropTypes.oneOfType([h.PropTypes.number,h.PropTypes.string]),mobile:function(t,e){var n=t[e];return n!==!0&&n!==!1&&"auto"!==n&&"function"!=typeof n?new Error('The "mobile" prop must be true, false, "auto" or a function'):void 0}},y.defaultProps={step:1,min:Number.MIN_SAFE_INTEGER||-9007199254740991,max:Number.MAX_SAFE_INTEGER||9007199254740991,precision:0,parse:null,format:null,mobile:"auto",style:{}},y.style={wrap:{position:"relative",display:"inline-block"},"wrap.hasFormControl":{display:"block"},arrowUp:{position:"absolute",top:"50%",left:"50%",width:0,height:0,borderWidth:"0 0.6ex 0.6ex 0.6ex",borderColor:"transparent transparent rgba(0, 0, 0, 0.7)",borderStyle:"solid",margin:"-0.3ex 0 0 -0.56ex"},arrowDown:{position:"absolute",top:"50%",left:"50%",width:0,height:0,borderWidth:"0.6ex 0.6ex 0 0.6ex",borderColor:"rgba(0, 0, 0, 0.7) transparent transparent",borderStyle:"solid",margin:"-0.3ex 0 0 -0.56ex"},plus:{position:"absolute",top:"50%",left:"50%",width:2,height:10,background:"rgba(0,0,0,.7)",margin:"-5px 0 0 -1px"},minus:{position:"absolute",top:"50%",left:"50%",width:10,height:2,background:"rgba(0,0,0,.7)",margin:"-1px 0 0 -5px"},btn:{position:"absolute",right:2,width:"2.26ex",borderColor:"rgba(0,0,0,.1)",borderStyle:"solid",textAlign:"center",cursor:"default",transition:"all 0.1s",background:"rgba(0,0,0,.1)",boxShadow:"-1px -1px 3px rgba(0,0,0,.1) inset,\n 1px 1px 3px rgba(255,255,255,.7) inset"},btnUp:{top:2,bottom:"50%",borderRadius:"2px 2px 0 0",borderWidth:"1px 1px 0 1px"},"btnUp.mobile":{width:"3.3ex",bottom:2,boxShadow:"none",borderRadius:2,borderWidth:1},btnDown:{top:"50%",bottom:2,borderRadius:"0 0 2px 2px",borderWidth:"0 1px 1px 1px"},"btnDown.mobile":{width:"3.3ex",bottom:2,left:2,top:2,right:"auto",boxShadow:"none",borderRadius:2,borderWidth:1},"btn:hover":{background:"rgba(0,0,0,.2)"},"btn:active":{background:"rgba(0,0,0,.3)",boxShadow:"0 1px 3px rgba(0,0,0,.2) inset,\n -1px -1px 4px rgba(255,255,255,.5) inset"},"btn:disabled":{opacity:.5,boxShadow:"none",cursor:"not-allowed"},input:{paddingRight:"3ex",boxSizing:"border-box"},"input:not(.form-control)":{border:"1px solid #ccc",borderRadius:2,paddingLeft:4,display:"block",WebkitAppearance:"none",lineHeight:"normal"},"input.mobile":{paddingLeft:" 3.4ex",paddingRight:"3.4ex",textAlign:"center"},"input:focus":{},"input:disabled":{color:"rgba(0, 0, 0, 0.3)",textShadow:"0 1px 0 rgba(255, 255, 255, 0.8)"}},y.SPEED=50,y.DELAY=500,t.exports=y},function(e,n){e.exports=t}])}); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("prop-types")):"function"==typeof define&&define.amd?define(["React","prop-types"],e):"object"==typeof exports?exports.NumericInput=e(require("React"),require("prop-types")):t.NumericInput=e(t.React,t["prop-types"])}(this,function(t,e){return function(t){function e(o){if(n[o])return n[o].exports;var a=n[o]={exports:{},id:o,loaded:!1};return t[o].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function a(t,e){var n={};for(var o in t)e.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(t,e){return t.classList?t.classList.add(e):void(t.className.search(new RegExp("\\b"+e+"\\b"))||(t.className=" "+e))}function l(t,e){if(t.className){if(t.classList)return t.classList.remove(e);t.className=t.className.replace(new RegExp("\\b"+e+"\\b","g"),"")}}var p=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),f=n(1),d=o(f),h=n(2),v=o(h),b=38,m=40,y="undefined"!=typeof document,g=function(t){function e(){var t;i(this,e);for(var n=arguments.length,o=Array(n),a=0;n>a;a++)o[a]=arguments[a];var r=s(this,(t=Object.getPrototypeOf(e)).call.apply(t,[this].concat(o)));return r.state={selectionStart:null,selectionEnd:null,value:"value"in r.props?r.props.value:r.props.defaultValue,btnDownHover:!1,btnDownActive:!1,btnUpHover:!1,btnUpActive:!1,inputFocus:!1},r.stop=r.stop.bind(r),r}return r(e,t),c(e,[{key:"componentWillReceiveProps",value:function(t){var e=String(t.value||0===t.value?t.value:"").replace(/^\s*|\s*$/,"");this.setState({value:"value"in t&&""!==e?this._parse(e):null,stringValue:e})}},{key:"componentWillUpdate",value:function(){this.saveSelection()}},{key:"componentDidUpdate",value:function(t,e){e.value===this.state.value||isNaN(this.state.value)&&null!==this.state.value||this._invokeEventCallback("onChange",this.state.value,this.refs.input.value),this.state.inputFocus&&(this.refs.input.focus(),(this.state.selectionStart||0===this.state.selectionStart)&&(this.refs.input.selectionStart=this.state.selectionStart),(this.state.selectionEnd||0===this.state.selectionEnd)&&(this.refs.input.selectionEnd=this.state.selectionEnd)),this.checkValidity()}},{key:"componentWillUnmount",value:function(){this.stop()}},{key:"componentDidMount",value:function(){var t=this;this.refs.input.getValueAsNumber=function(){return t.state.value||0},this.refs.input.setValue=function(e){t.setState({value:t._parse(e),stringValue:e})},!this.state.inputFocus&&y&&document.activeElement===this.refs.input&&(this.state.inputFocus=!0,this.refs.input.focus(),this._invokeEventCallback("onFocus",{target:this.refs.input,type:"focus"})),this.checkValidity()}},{key:"saveSelection",value:function(){this.state.selectionStart=this.refs.input.selectionStart,this.state.selectionEnd=this.refs.input.selectionEnd}},{key:"checkValidity",value:function(){var t=void 0,e="",n=!!this.refs.input.checkValidity,o=!(!this.props.noValidate||"false"==this.props.noValidate);this.refs.input.noValidate=o,t=o||!n,t?e="":(""===this.refs.input.pattern&&(this.refs.input.pattern=this.props.required?".+":".*"),n&&(this.refs.input.checkValidity(),t=this.refs.input.validity.valid,t||(e=this.refs.input.validationMessage)),t&&n&&this.props.maxLength&&this.refs.input.value.length>this.props.maxLength&&(e="This value is too long")),e=e||(t?"":this.refs.input.validationMessage||"Unknown Error");var a=this._valid!==e;this._valid=e,e?(u(this.refs.wrapper,"has-error"),a&&this._invokeEventCallback("onInvalid",e,this.state.value,this.refs.input.value)):(l(this.refs.wrapper,"has-error"),a&&this._invokeEventCallback("onValid",this.state.value,this.refs.input.value))}},{key:"_toNumber",value:function(t,e){e=void 0===e?this.state.inputFocus&&!(this.state.btnDownActive||this.state.btnUpActive):!!e;var n=parseFloat(t),o=Math.pow(10,this.props.precision);return(isNaN(n)||!isFinite(n))&&(n=0),e?n:(n=Math.min(Math.max(n,this.props.min),this.props.max),n=Math.round(n*o)/o)}},{key:"_parse",value:function(t){return this.props.precision>0&&null!==this.state.value&&!isNaN(this.state.value)&&t.length>0&&t.indexOf(".")<0&&(t=this.state.value),"function"==typeof this.props.parse?parseFloat(this.props.parse(t)):parseFloat(t)}},{key:"_format",value:function(t){var e=this._toNumber(t).toFixed(this.props.precision);return this.props.format?this.props.format(e):e}},{key:"_step",value:function(t,e){var n=this._toNumber((this.state.value||0)+this.props.step*t,!1);return n!==this.state.value?(this.setState({value:n,stringValue:n},e),!0):!1}},{key:"_onKeyDown",value:function(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];e[0].persist(),this._invokeEventCallback.apply(this,["onKeyDown"].concat(e));var o=e[0];o.isDefaultPrevented()||(o.keyCode===b?(o.preventDefault(),this._step(o.ctrlKey||o.metaKey?.1:o.shiftKey?10:1)):o.keyCode===m&&(o.preventDefault(),this._step(o.ctrlKey||o.metaKey?-.1:o.shiftKey?-10:-1)))}},{key:"stop",value:function(){this._timer&&clearTimeout(this._timer)}},{key:"increase",value:function(){var t=this,n=arguments.length<=0||void 0===arguments[0]?!1:arguments[0],o=arguments[1];this.stop(),this._step(1,o),(isNaN(this.state.value)||this.state.value<this.props.max)&&(this._timer=setTimeout(function(){t.increase(!0)},n?e.SPEED:e.DELAY))}},{key:"decrease",value:function(){var t=this,n=arguments.length<=0||void 0===arguments[0]?!1:arguments[0],o=arguments[1];this.stop(),this._step(-1,o),(isNaN(this.state.value)||this.state.value>this.props.min)&&(this._timer=setTimeout(function(){t.decrease(!0)},n?e.SPEED:e.DELAY))}},{key:"onMouseDown",value:function(t,e){"down"==t?this.decrease(!1,e):"up"==t&&this.increase(!1,e)}},{key:"onTouchStart",value:function(t,e){e.preventDefault(),"down"==t?this.decrease():"up"==t&&this.increase()}},{key:"_invokeEventCallback",value:function(t){if("function"==typeof this.props[t]){for(var e,n=arguments.length,o=Array(n>1?n-1:0),a=1;n>a;a++)o[a-1]=arguments[a];(e=this.props[t]).call.apply(e,[null].concat(o))}}},{key:"render",value:function(){var t=this,n=this.props,o=this.state,i={},s=this.props,r=(s.step,s.min,s.max,s.precision,s.parse,s.format,s.mobile),u=(s.value,s.type,s.style),l=(s.defaultValue,s.onInvalid,s.onValid,a(s,["step","min","max","precision","parse","format","mobile","value","type","style","defaultValue","onInvalid","onValid"]));for(var c in e.style)i[c]=p({},e.style[c],u?u[c]||{}:{});var f=n.className&&/\bform-control\b/.test(n.className);"auto"==r&&(r=y&&"ontouchstart"in document),"function"==typeof r&&(r=r.call(this)),r=!!r;var h={wrap:{style:u===!1?null:i.wrap,className:"react-numeric-input",ref:"wrapper",onMouseUp:void 0,onMouseLeave:void 0},input:p({ref:"input",type:"text",style:u===!1?null:p({},i.input,f?{}:i["input:not(.form-control)"],o.inputFocus?i["input:focus"]:{})},l),btnUp:{onMouseEnter:void 0,onMouseDown:void 0,onMouseUp:void 0,onMouseLeave:void 0,onTouchStart:void 0,onTouchEnd:void 0,style:u===!1?null:p({},i.btn,i.btnUp,n.disabled?i["btn:disabled"]:o.btnUpActive?i["btn:active"]:o.btnUpHover?i["btn:hover"]:{})},btnDown:{onMouseEnter:void 0,onMouseDown:void 0,onMouseUp:void 0,onMouseLeave:void 0,onTouchStart:void 0,onTouchEnd:void 0,style:u===!1?null:p({},i.btn,i.btnDown,n.disabled?i["btn:disabled"]:o.btnDownActive?i["btn:active"]:o.btnDownHover?i["btn:hover"]:{})}};return/^[+-.]{1,2}$/.test(o.stringValue)?h.input.value=o.stringValue:o.value||0===o.value?h.input.value=this._format(o.value):h.input.value="",f&&u!==!1&&p(h.wrap.style,i["wrap.hasFormControl"]),r&&u!==!1&&(p(h.input.style,i["input.mobile"]),p(h.btnUp.style,i["btnUp.mobile"]),p(h.btnDown.style,i["btnDown.mobile"])),n.disabled?u!==!1&&p(h.input.style,i["input:disabled"]):(p(h.wrap,{onMouseUp:this.stop,onMouseLeave:this.stop}),p(h.btnUp,{onTouchStart:this.onTouchStart.bind(this,"up"),onTouchEnd:this.stop,onMouseEnter:function(){t.setState({btnUpHover:!0})},onMouseLeave:function(){t.stop(),t.setState({btnUpHover:!1,btnUpActive:!1})},onMouseUp:function(){t.setState({btnUpHover:!0,btnUpActive:!1})},onMouseDown:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];n[0].preventDefault(),n[0].persist(),t.setState({btnUpHover:!0,btnUpActive:!0,inputFocus:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))}),t.onMouseDown("up")}}),p(h.btnDown,{onTouchStart:this.onTouchStart.bind(this,"down"),onTouchEnd:this.stop,onMouseEnter:function(){t.setState({btnDownHover:!0})},onMouseLeave:function(){t.stop(),t.setState({btnDownHover:!1,btnDownActive:!1})},onMouseUp:function(){t.setState({btnDownHover:!0,btnDownActive:!1})},onMouseDown:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];n[0].preventDefault(),n[0].persist(),t.setState({btnDownHover:!0,btnDownActive:!0,inputFocus:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))}),t.onMouseDown("down")}}),p(h.input,{onChange:function(e){var n=e.target.value,o=t._parse(n);isNaN(o)&&(o=null),t.setState({value:o,stringValue:n})},onKeyDown:this._onKeyDown.bind(this),onInput:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];t.saveSelection(),t._invokeEventCallback.apply(t,["onInput"].concat(n))},onSelect:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];t.saveSelection(),t._invokeEventCallback.apply(t,["onSelect"].concat(n))},onFocus:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];n[0].persist(),t.setState({inputFocus:!0},function(){var e=t._parse(n[0].target.value);t.setState({value:e,stringValue:e},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))})})},onBlur:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];n[0].persist(),t.setState({inputFocus:!1},function(){var e=t._parse(n[0].target.value);t.setState({value:e},function(){t._invokeEventCallback.apply(t,["onBlur"].concat(n))})})}})),r?d["default"].createElement("span",h.wrap,d["default"].createElement("input",h.input),d["default"].createElement("b",h.btnUp,d["default"].createElement("i",{style:u===!1?null:i.minus}),d["default"].createElement("i",{style:u===!1?null:i.plus})),d["default"].createElement("b",h.btnDown,d["default"].createElement("i",{style:u===!1?null:i.minus}))):d["default"].createElement("span",h.wrap,d["default"].createElement("input",h.input),d["default"].createElement("b",h.btnUp,d["default"].createElement("i",{style:u===!1?null:i.arrowUp})),d["default"].createElement("b",h.btnDown,d["default"].createElement("i",{style:u===!1?null:i.arrowDown})))}}]),e}(f.Component);g.propTypes={step:v["default"].number,min:v["default"].number,max:v["default"].number,precision:v["default"].number,maxLength:v["default"].number,parse:v["default"].func,format:v["default"].func,className:v["default"].string,disabled:v["default"].bool,readOnly:v["default"].bool,required:v["default"].bool,noValidate:v["default"].oneOfType([v["default"].bool,v["default"].string]),style:v["default"].oneOfType([v["default"].object,v["default"].bool]),type:v["default"].string,pattern:v["default"].string,onFocus:v["default"].func,onBlur:v["default"].func,onKeyDown:v["default"].func,onChange:v["default"].func,onInvalid:v["default"].func,onValid:v["default"].func,onInput:v["default"].func,onSelect:v["default"].func,size:v["default"].oneOfType([v["default"].number,v["default"].string]),value:v["default"].oneOfType([v["default"].number,v["default"].string]),defaultValue:v["default"].oneOfType([v["default"].number,v["default"].string]),mobile:function(t,e){var n=t[e];return n!==!0&&n!==!1&&"auto"!==n&&"function"!=typeof n?new Error('The "mobile" prop must be true, false, "auto" or a function'):void 0}},g.defaultProps={step:1,min:Number.MIN_SAFE_INTEGER||-9007199254740991,max:Number.MAX_SAFE_INTEGER||9007199254740991,precision:0,parse:null,format:null,mobile:"auto",style:{}},g.style={wrap:{position:"relative",display:"inline-block"},"wrap.hasFormControl":{display:"block"},arrowUp:{position:"absolute",top:"50%",left:"50%",width:0,height:0,borderWidth:"0 0.6ex 0.6ex 0.6ex",borderColor:"transparent transparent rgba(0, 0, 0, 0.7)",borderStyle:"solid",margin:"-0.3ex 0 0 -0.56ex"},arrowDown:{position:"absolute",top:"50%",left:"50%",width:0,height:0,borderWidth:"0.6ex 0.6ex 0 0.6ex",borderColor:"rgba(0, 0, 0, 0.7) transparent transparent",borderStyle:"solid",margin:"-0.3ex 0 0 -0.56ex"},plus:{position:"absolute",top:"50%",left:"50%",width:2,height:10,background:"rgba(0,0,0,.7)",margin:"-5px 0 0 -1px"},minus:{position:"absolute",top:"50%",left:"50%",width:10,height:2,background:"rgba(0,0,0,.7)",margin:"-1px 0 0 -5px"},btn:{position:"absolute",right:2,width:"2.26ex",borderColor:"rgba(0,0,0,.1)",borderStyle:"solid",textAlign:"center",cursor:"default",transition:"all 0.1s",background:"rgba(0,0,0,.1)",boxShadow:"-1px -1px 3px rgba(0,0,0,.1) inset,1px 1px 3px rgba(255,255,255,.7) inset"},btnUp:{top:2,bottom:"50%",borderRadius:"2px 2px 0 0",borderWidth:"1px 1px 0 1px"},"btnUp.mobile":{width:"3.3ex",bottom:2,boxShadow:"none",borderRadius:2,borderWidth:1},btnDown:{top:"50%",bottom:2,borderRadius:"0 0 2px 2px",borderWidth:"0 1px 1px 1px"},"btnDown.mobile":{width:"3.3ex",bottom:2,left:2,top:2,right:"auto",boxShadow:"none",borderRadius:2,borderWidth:1},"btn:hover":{background:"rgba(0,0,0,.2)"},"btn:active":{background:"rgba(0,0,0,.3)",boxShadow:"0 1px 3px rgba(0,0,0,.2) inset,-1px -1px 4px rgba(255,255,255,.5) inset"},"btn:disabled":{opacity:.5,boxShadow:"none",cursor:"not-allowed"},input:{paddingRight:"3ex",boxSizing:"border-box"},"input:not(.form-control)":{border:"1px solid #ccc",borderRadius:2,paddingLeft:4,display:"block",WebkitAppearance:"none",lineHeight:"normal"},"input.mobile":{paddingLeft:" 3.4ex",paddingRight:"3.4ex",textAlign:"center"},"input:focus":{},"input:disabled":{color:"rgba(0, 0, 0, 0.3)",textShadow:"0 1px 0 rgba(255, 255, 255, 0.8)"}},g.SPEED=50,g.DELAY=500,t.exports=g},function(e,n){e.exports=t},function(t,n){t.exports=e}])}); |
169
index.js
@@ -48,3 +48,3 @@ module.exports = | ||
| "use strict"; | ||
| 'use strict'; | ||
@@ -59,2 +59,6 @@ var _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; }; | ||
| var _propTypes = __webpack_require__(2); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -123,3 +127,3 @@ | ||
| _createClass(NumericInput, [{ | ||
| key: "componentWillReceiveProps", | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(props) { | ||
@@ -129,7 +133,8 @@ var _value = String(props.value || props.value === 0 ? props.value : '').replace(/^\s*|\s*$/, ""); | ||
| this.setState({ | ||
| value: "value" in props && _value !== '' ? this._parse(_value) : null | ||
| value: "value" in props && _value !== '' ? this._parse(_value) : null, | ||
| stringValue: _value | ||
| }); | ||
| } | ||
| }, { | ||
| key: "componentWillUpdate", | ||
| key: 'componentWillUpdate', | ||
| value: function componentWillUpdate() { | ||
@@ -139,3 +144,3 @@ this.saveSelection(); | ||
| }, { | ||
| key: "componentDidUpdate", | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate(prevProps, prevState) { | ||
@@ -161,3 +166,3 @@ if (prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) { | ||
| }, { | ||
| key: "componentWillUnmount", | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
@@ -167,3 +172,3 @@ this.stop(); | ||
| }, { | ||
| key: "componentDidMount", | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
@@ -178,3 +183,4 @@ var _this2 = this; | ||
| _this2.setState({ | ||
| value: _this2._parse(value) | ||
| value: _this2._parse(value), | ||
| stringValue: value | ||
| }); | ||
@@ -195,3 +201,3 @@ }; | ||
| }, { | ||
| key: "saveSelection", | ||
| key: 'saveSelection', | ||
| value: function saveSelection() { | ||
@@ -202,3 +208,3 @@ this.state.selectionStart = this.refs.input.selectionStart; | ||
| }, { | ||
| key: "checkValidity", | ||
| key: 'checkValidity', | ||
| value: function checkValidity() { | ||
@@ -256,3 +262,3 @@ var valid = undefined, | ||
| }, { | ||
| key: "_toNumber", | ||
| key: '_toNumber', | ||
| value: function _toNumber(x, loose) { | ||
@@ -276,4 +282,8 @@ loose = loose === undefined ? this.state.inputFocus && !(this.state.btnDownActive || this.state.btnUpActive) : !!loose; | ||
| }, { | ||
| key: "_parse", | ||
| key: '_parse', | ||
| value: function _parse(x) { | ||
| if (this.props.precision > 0 && this.state.value !== null && !isNaN(this.state.value) && x.length > 0 && x.indexOf(".") < 0) { | ||
| x = this.state.value; | ||
| } | ||
| if (typeof this.props.parse == 'function') { | ||
@@ -285,3 +295,3 @@ return parseFloat(this.props.parse(x)); | ||
| }, { | ||
| key: "_format", | ||
| key: '_format', | ||
| value: function _format(n) { | ||
@@ -297,3 +307,3 @@ var _n = this._toNumber(n).toFixed(this.props.precision); | ||
| }, { | ||
| key: "_step", | ||
| key: '_step', | ||
| value: function _step(n, callback) { | ||
@@ -303,3 +313,3 @@ var _n = this._toNumber((this.state.value || 0) + this.props.step * n, false); | ||
| if (_n !== this.state.value) { | ||
| this.setState({ value: _n }, callback); | ||
| this.setState({ value: _n, stringValue: _n }, callback); | ||
| return true; | ||
@@ -311,10 +321,3 @@ } | ||
| }, { | ||
| key: "_onChange", | ||
| value: function _onChange(e) { | ||
| this.setState({ | ||
| value: this._parse(e.target.value) | ||
| }); | ||
| } | ||
| }, { | ||
| key: "_onKeyDown", | ||
| key: '_onKeyDown', | ||
| value: function _onKeyDown() { | ||
@@ -339,3 +342,3 @@ for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| }, { | ||
| key: "stop", | ||
| key: 'stop', | ||
| value: function stop() { | ||
@@ -347,3 +350,3 @@ if (this._timer) { | ||
| }, { | ||
| key: "increase", | ||
| key: 'increase', | ||
| value: function increase() { | ||
@@ -365,3 +368,3 @@ var _this3 = this; | ||
| }, { | ||
| key: "decrease", | ||
| key: 'decrease', | ||
| value: function decrease() { | ||
@@ -383,3 +386,3 @@ var _this4 = this; | ||
| }, { | ||
| key: "onMouseDown", | ||
| key: 'onMouseDown', | ||
| value: function onMouseDown(dir, callback) { | ||
@@ -393,3 +396,3 @@ if (dir == 'down') { | ||
| }, { | ||
| key: "onTouchStart", | ||
| key: 'onTouchStart', | ||
| value: function onTouchStart(dir, e) { | ||
@@ -404,3 +407,3 @@ e.preventDefault(); | ||
| }, { | ||
| key: "_invokeEventCallback", | ||
| key: '_invokeEventCallback', | ||
| value: function _invokeEventCallback(callbackName) { | ||
@@ -418,3 +421,3 @@ if (typeof this.props[callbackName] == "function") { | ||
| }, { | ||
| key: "render", | ||
| key: 'render', | ||
| value: function render() { | ||
@@ -442,3 +445,3 @@ var _this5 = this; | ||
| var rest = _objectWithoutProperties(_props, ["step", "min", "max", "precision", "parse", "format", "mobile", "value", "type", "style", "defaultValue", "onInvalid", "onValid"]); | ||
| var rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid']); | ||
@@ -493,3 +496,5 @@ for (var x in NumericInput.style) { | ||
| if (state.value || state.value === 0) { | ||
| if (/^[+-.]{1,2}$/.test(state.stringValue)) { | ||
| attrs.input.value = state.stringValue; | ||
| } else if (state.value || state.value === 0) { | ||
| attrs.input.value = this._format(state.value); | ||
@@ -596,7 +601,8 @@ } else { | ||
| onChange: function onChange(e) { | ||
| var val = _this5._parse(e.target.value); | ||
| var original = e.target.value; | ||
| var val = _this5._parse(original); | ||
| if (isNaN(val)) { | ||
| val = null; | ||
| } | ||
| _this5.setState({ value: val }); | ||
| _this5.setState({ value: val, stringValue: original }); | ||
| }, | ||
@@ -627,4 +633,6 @@ onKeyDown: this._onKeyDown.bind(this), | ||
| _this5.setState({ inputFocus: true }, function () { | ||
| var val = _this5._parse(args[0].target.value); | ||
| _this5.setState({ | ||
| value: _this5._parse(args[0].target.value) | ||
| value: val, | ||
| stringValue: val | ||
| }, function () { | ||
@@ -642,4 +650,5 @@ _this5._invokeEventCallback.apply(_this5, ["onFocus"].concat(args)); | ||
| _this5.setState({ inputFocus: false }, function () { | ||
| var val = _this5._parse(args[0].target.value); | ||
| _this5.setState({ | ||
| value: _this5._parse(args[0].target.value) | ||
| value: val | ||
| }, function () { | ||
@@ -659,15 +668,15 @@ _this5._invokeEventCallback.apply(_this5, ["onBlur"].concat(args)); | ||
| return _react2.default.createElement( | ||
| "span", | ||
| 'span', | ||
| attrs.wrap, | ||
| _react2.default.createElement("input", attrs.input), | ||
| _react2.default.createElement('input', attrs.input), | ||
| _react2.default.createElement( | ||
| "b", | ||
| 'b', | ||
| attrs.btnUp, | ||
| _react2.default.createElement("i", { style: style === false ? null : css.minus }), | ||
| _react2.default.createElement("i", { style: style === false ? null : css.plus }) | ||
| _react2.default.createElement('i', { style: style === false ? null : css.minus }), | ||
| _react2.default.createElement('i', { style: style === false ? null : css.plus }) | ||
| ), | ||
| _react2.default.createElement( | ||
| "b", | ||
| 'b', | ||
| attrs.btnDown, | ||
| _react2.default.createElement("i", { style: style === false ? null : css.minus }) | ||
| _react2.default.createElement('i', { style: style === false ? null : css.minus }) | ||
| ) | ||
@@ -678,14 +687,14 @@ ); | ||
| return _react2.default.createElement( | ||
| "span", | ||
| 'span', | ||
| attrs.wrap, | ||
| _react2.default.createElement("input", attrs.input), | ||
| _react2.default.createElement('input', attrs.input), | ||
| _react2.default.createElement( | ||
| "b", | ||
| 'b', | ||
| attrs.btnUp, | ||
| _react2.default.createElement("i", { style: style === false ? null : css.arrowUp }) | ||
| _react2.default.createElement('i', { style: style === false ? null : css.arrowUp }) | ||
| ), | ||
| _react2.default.createElement( | ||
| "b", | ||
| 'b', | ||
| attrs.btnDown, | ||
| _react2.default.createElement("i", { style: style === false ? null : css.arrowDown }) | ||
| _react2.default.createElement('i', { style: style === false ? null : css.arrowDown }) | ||
| ) | ||
@@ -700,28 +709,28 @@ ); | ||
| NumericInput.propTypes = { | ||
| step: _react.PropTypes.number, | ||
| min: _react.PropTypes.number, | ||
| max: _react.PropTypes.number, | ||
| precision: _react.PropTypes.number, | ||
| maxLength: _react.PropTypes.number, | ||
| parse: _react.PropTypes.func, | ||
| format: _react.PropTypes.func, | ||
| className: _react.PropTypes.string, | ||
| disabled: _react.PropTypes.bool, | ||
| readOnly: _react.PropTypes.bool, | ||
| required: _react.PropTypes.bool, | ||
| noValidate: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.string]), | ||
| style: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.bool]), | ||
| type: _react.PropTypes.string, | ||
| pattern: _react.PropTypes.string, | ||
| onFocus: _react.PropTypes.func, | ||
| onBlur: _react.PropTypes.func, | ||
| onKeyDown: _react.PropTypes.func, | ||
| onChange: _react.PropTypes.func, | ||
| onInvalid: _react.PropTypes.func, | ||
| onValid: _react.PropTypes.func, | ||
| onInput: _react.PropTypes.func, | ||
| onSelect: _react.PropTypes.func, | ||
| size: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]), | ||
| value: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]), | ||
| defaultValue: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]), | ||
| step: _propTypes2.default.number, | ||
| min: _propTypes2.default.number, | ||
| max: _propTypes2.default.number, | ||
| precision: _propTypes2.default.number, | ||
| maxLength: _propTypes2.default.number, | ||
| parse: _propTypes2.default.func, | ||
| format: _propTypes2.default.func, | ||
| className: _propTypes2.default.string, | ||
| disabled: _propTypes2.default.bool, | ||
| readOnly: _propTypes2.default.bool, | ||
| required: _propTypes2.default.bool, | ||
| noValidate: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]), | ||
| style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]), | ||
| type: _propTypes2.default.string, | ||
| pattern: _propTypes2.default.string, | ||
| onFocus: _propTypes2.default.func, | ||
| onBlur: _propTypes2.default.func, | ||
| onKeyDown: _propTypes2.default.func, | ||
| onChange: _propTypes2.default.func, | ||
| onInvalid: _propTypes2.default.func, | ||
| onValid: _propTypes2.default.func, | ||
| onInput: _propTypes2.default.func, | ||
| onSelect: _propTypes2.default.func, | ||
| size: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), | ||
| value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), | ||
| defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), | ||
| mobile: function mobile(props, propName) { | ||
@@ -808,3 +817,3 @@ var prop = props[propName]; | ||
| background: 'rgba(0,0,0,.1)', | ||
| boxShadow: "-1px -1px 3px rgba(0,0,0,.1) inset,\n 1px 1px 3px rgba(255,255,255,.7) inset" | ||
| boxShadow: '-1px -1px 3px rgba(0,0,0,.1) inset,' + '1px 1px 3px rgba(255,255,255,.7) inset' | ||
| }, | ||
@@ -851,3 +860,3 @@ | ||
| background: 'rgba(0,0,0,.3)', | ||
| boxShadow: "0 1px 3px rgba(0,0,0,.2) inset,\n -1px -1px 4px rgba(255,255,255,.5) inset" | ||
| boxShadow: '0 1px 3px rgba(0,0,0,.2) inset,' + '-1px -1px 4px rgba(255,255,255,.5) inset' | ||
| }, | ||
@@ -899,3 +908,9 @@ | ||
| /***/ }, | ||
| /* 2 */ | ||
| /***/ function(module, exports) { | ||
| module.exports = require("prop-types"); | ||
| /***/ } | ||
| /******/ ]); |
| { | ||
| "name": "react-numeric-input", | ||
| "version": "2.0.7", | ||
| "version": "2.0.9", | ||
| "description": "Number input component that can replace the native number input which is not yet very well supported and where it is, it does not have the same appearance across the browsers. Additionally this component offers more flexible options and can be used for any values (differently formatted representations of the internal numeric value).", | ||
@@ -57,10 +57,10 @@ "main": "index.js", | ||
| "phantomjs": "^1.9.18", | ||
| "react": "^15.3.2", | ||
| "react-dom": "^15.3.2", | ||
| "react-addons-test-utils": "^15.3.2", | ||
| "prop-types": "^15.5.8", | ||
| "react": "^15.6.1", | ||
| "react-dom": "^15.6.1", | ||
| "webpack": "^1.12.2" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": ">=0.14.0 || ^15.2.1" | ||
| "react": ">=0.14.0 || ^15.6.1" | ||
| } | ||
| } |
@@ -11,3 +11,3 @@ # <img align="right" src="http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.0/screenshot.png" width="123"/>React Numeric Input | ||
| [Live demo](http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.5/index.html) | ||
| [Live demo](http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.9/index.html) | ||
@@ -14,0 +14,0 @@ ## Installation |
| // @flow | ||
| import React, { PropTypes, Component } from "react" | ||
| import React, { Component } from "react" | ||
| import PropTypes from 'prop-types' | ||
@@ -10,3 +11,3 @@ const KEYCODE_UP = 38; | ||
| * Just a simple helper to provide support for older IEs. This is not exactly a | ||
| * polyfill for classList.add but it does what we need with minimal efford. | ||
| * polyfill for classList.add but it does what we need with minimal effort. | ||
| * Works with single className only! | ||
@@ -25,3 +26,3 @@ */ | ||
| * Just a simple helper to provide support for older IEs. This is not exactly a | ||
| * polyfill for classList.remove but it does what we need with minimal efford. | ||
| * polyfill for classList.remove but it does what we need with minimal effort. | ||
| * Works with single className only! | ||
@@ -93,3 +94,3 @@ */ | ||
| /** | ||
| * The deault behaviour is to start from 0, use step of 1 and display | ||
| * The default behavior is to start from 0, use step of 1 and display | ||
| * integers | ||
@@ -184,4 +185,4 @@ */ | ||
| background : 'rgba(0,0,0,.1)', | ||
| boxShadow : `-1px -1px 3px rgba(0,0,0,.1) inset, | ||
| 1px 1px 3px rgba(255,255,255,.7) inset` | ||
| boxShadow : '-1px -1px 3px rgba(0,0,0,.1) inset,' + | ||
| '1px 1px 3px rgba(255,255,255,.7) inset' | ||
| }, | ||
@@ -228,4 +229,4 @@ | ||
| background: 'rgba(0,0,0,.3)', | ||
| boxShadow : `0 1px 3px rgba(0,0,0,.2) inset, | ||
| -1px -1px 4px rgba(255,255,255,.5) inset` | ||
| boxShadow : '0 1px 3px rgba(0,0,0,.2) inset,' + | ||
| '-1px -1px 4px rgba(255,255,255,.5) inset' | ||
| }, | ||
@@ -270,3 +271,3 @@ | ||
| /** | ||
| * When click and hold on a button - the speed of auto changin the value. | ||
| * When click and hold on a button - the speed of auto changing the value. | ||
| * This is a static property and can be modified if needed. | ||
@@ -277,3 +278,3 @@ */ | ||
| /** | ||
| * When click and hold on a button - the delay before auto changin the value. | ||
| * When click and hold on a button - the delay before auto changing the value. | ||
| * This is a static property and can be modified if needed. | ||
@@ -345,3 +346,4 @@ */ | ||
| this.setState({ | ||
| value: "value" in props && _value !== '' ? this._parse(_value) : null | ||
| value: "value" in props && _value !== '' ? this._parse(_value) : null, | ||
| stringValue: _value | ||
| }) | ||
@@ -408,3 +410,4 @@ } | ||
| this.setState({ | ||
| value: this._parse(value) | ||
| value: this._parse(value), | ||
| stringValue: value | ||
| }) | ||
@@ -465,3 +468,3 @@ } | ||
| // In some browsers once a pattern is set it connot be removed. The | ||
| // In some browsers once a pattern is set it cannot be removed. The | ||
| // browser sets it to "" instead which results in validation | ||
@@ -483,3 +486,3 @@ // failures... | ||
| // Some brousers might fail to validate maxLength | ||
| // Some browsers might fail to validate maxLength | ||
| if (valid && supportsValidation && this.props.maxLength) { | ||
@@ -557,2 +560,7 @@ if (this.refs.input.value.length > this.props.maxLength) { | ||
| { | ||
| // prevent backspace on dot in float value | ||
| if (this.props.precision > 0 && this.state.value !== null && !isNaN(this.state.value) && x.length > 0 && x.indexOf(".") < 0) { | ||
| x = this.state.value; | ||
| } | ||
| if (typeof this.props.parse == 'function') { | ||
@@ -565,3 +573,3 @@ return parseFloat(this.props.parse(x)); | ||
| /** | ||
| * This is used internally to format a number to it's dislay representation. | ||
| * This is used internally to format a number to it's display representation. | ||
| * It will invoke the this.props.format function if one is provided. | ||
@@ -582,3 +590,3 @@ * @private | ||
| /** | ||
| * The internal method that actualy sets the new value on the input | ||
| * The internal method that actually sets the new value on the input | ||
| * @private | ||
@@ -594,3 +602,3 @@ */ | ||
| if (_n !== this.state.value) { | ||
| this.setState({ value: _n }, callback); | ||
| this.setState({ value: _n, stringValue: _n }, callback); | ||
| return true | ||
@@ -603,14 +611,2 @@ } | ||
| /** | ||
| * This gets called whenever the user edits the input value. The value will | ||
| * be recreated using the current parse/format methods so the input will | ||
| * appear as readonly if the user tries to type something invalid. | ||
| */ | ||
| _onChange(e: InputEvent): void | ||
| { | ||
| this.setState({ | ||
| value: this._parse(e.target.value) | ||
| }) | ||
| } | ||
| /** | ||
| * This binds the Up/Down arrow key listeners | ||
@@ -716,3 +712,3 @@ */ | ||
| /** | ||
| * Helper method to ivoke event callback functions if they are provided | ||
| * Helper method to invoke event callback functions if they are provided | ||
| * in the props. | ||
@@ -833,3 +829,5 @@ * @param {String} callbackName The name of the function prop | ||
| if (state.value || state.value === 0) { | ||
| if (/^[+-.]{1,2}$/.test(state.stringValue)) { | ||
| attrs.input.value = state.stringValue; | ||
| } else if (state.value || state.value === 0) { | ||
| attrs.input.value = this._format(state.value) | ||
@@ -930,7 +928,8 @@ } else { | ||
| onChange : e => { | ||
| let val = this._parse(e.target.value) | ||
| const original = e.target.value; | ||
| let val = this._parse(original) | ||
| if (isNaN(val)) { | ||
| val = null | ||
| } | ||
| this.setState({ value: val }) | ||
| this.setState({ value: val, stringValue: original }) | ||
| }, | ||
@@ -949,4 +948,6 @@ onKeyDown: this._onKeyDown.bind(this), | ||
| this.setState({ inputFocus: true }, () => { | ||
| const val = this._parse(args[0].target.value); | ||
| this.setState({ | ||
| value: this._parse(args[0].target.value) | ||
| value: val, | ||
| stringValue: val | ||
| }, () => { | ||
@@ -960,4 +961,5 @@ this._invokeEventCallback("onFocus", ...args) | ||
| this.setState({ inputFocus: false }, () => { | ||
| const val = this._parse(args[0].target.value); | ||
| this.setState({ | ||
| value: this._parse(args[0].target.value) | ||
| value: val | ||
| }, () => { | ||
@@ -964,0 +966,0 @@ this._invokeEventCallback("onBlur", ...args) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.36%
249628
- Lines of code
- increased by0.8%
4636
No dependency changes