react-numeric-input - npm Package Compare versions

Comparing version 2.0.9 to 2.1.0

__tests__/misc.test.jsx

@@ -13,2 +13,4 @@ /* global describe, it */
 
+    this.timeout(10000);
+
     /**
@@ -58,3 +60,6 @@ * Assert that the user can type a value lower than the current "min"
         TestUtils.Simulate.change(input)
-        expect(log.toString()).toEqual('1,1')
+        expect(log.length).toEqual(3)
+        expect(log[0]).toEqual(1)
+        expect(log[1]).toEqual('1')
+        expect(log[2]).toEqual(input)
         done()
@@ -119,6 +124,6 @@ })
         TestUtils.Simulate.change(input)
-        expect(log).toEqual([2,'2'])
+        expect(log).toEqual([2, '2', input])
         input.value = ""
         TestUtils.Simulate.change(input)
-        expect(log).toEqual([2,'2',null,""])
+        expect(log).toEqual([2, '2', input, null, "", input])
         done()
@@ -144,3 +149,39 @@ })
         done();
-    })
+    });
+
+    it ('Can snap to steps', done => {
+        const KEYCODE_UP = 38;
+        const KEYCODE_DOWN = 40;
+        const tests = [
+            [0.2  , KEYCODE_UP  , "0.5"  ], //  0.2  + 0.5 =  0.5
+            [0.3  , KEYCODE_UP  , "1.0"  ], //  0.3  + 0.5 =  1.0
+            [0.5  , KEYCODE_UP  , "1.0"  ], //  0.5  + 0.5 =  1.0
+            [0.6  , KEYCODE_UP  , "1.0"  ], //  0.6  + 0.5 =  1.0
+            [0.9  , KEYCODE_UP  , "1.5"  ], //  0.9  + 0.5 =  1.5
+            [1.1  , KEYCODE_UP  , "1.5"  ], //  1.1  + 0.5 =  1.5
+            [9.1  , KEYCODE_UP  , "9.5"  ], //  9.1  + 0.5 =  9.5
+            [9.3  , KEYCODE_UP  , "10.0" ], //  9.3  + 0.5 =  10.0
+            [11.1 , KEYCODE_UP  , "10.0" ], //  11.1 + 0.5 =  10.0 (<= max)
+            [11.1 , KEYCODE_DOWN, "10.0" ], //  11.1 - 0.5 =  10.0 (<= max)
+            [1.1  , KEYCODE_DOWN, "0.5"  ], //  1.1  - 0.5 =  0.5
+            [0.3  , KEYCODE_DOWN, "0.0"  ], //  0.3  - 0.5 =  0.0
+            [0.1  , KEYCODE_DOWN, "-0.5" ], //  0.1  - 0.5 = -0.5
+            [-1.1 , KEYCODE_DOWN, "-1.5" ], // -1.1  - 0.5 = -1.5
+            [-1.4 , KEYCODE_DOWN, "-2.0" ], // -1.4  - 0.5 = -2.0
+            [-10.4, KEYCODE_DOWN, "-10.0"], // -10.4 - 0.5 = -2.0 (>= min)
+            [-10.4, KEYCODE_UP  , "-10.0"], // -10.4 + 0.5 = -2.0 (>= min)
+            [-8.4 , KEYCODE_UP  , "-8.0" ]  // -8.4  + 0.5 = -8.0
+        ];
+
+        tests.forEach(([inputValue, key, result]) => {
+            let widget = TestUtils.renderIntoDocument(
+                <NumericInput min={-10} max={10} precision={1} step={0.5} value={inputValue} snap />
+            );
+            let input = widget.refs.input;
+            TestUtils.Simulate.keyDown(input, { keyCode: key });
+            expect(input.value).toEqual(result);
+        });
+
+        done();
+    });
 })

CHANGELOG.md

@@ -0,1 +1,9 @@
+2.1.0
+--------------------------------------------------------------------------------
+* Added `snap` prop to make the value snap to the closest step when using buttons or up/down keys to change it.
+* Pass a reference to the input element to the onChange callbacks
+* Fixed an issue preventing the input from being editable when it's entire value is selected
+* Fixed an issue that might cause the component to loose its value if re-rendered without value prop
+
+
 2.0.9
@@ -11,3 +19,3 @@ --------------------------------------------------------------------------------
 --------------------------------------------------------------------------------
-Fixed `React.PropTypes` reference warnings
+* Fixed `React.PropTypes` reference warnings
 
@@ -14,0 +22,0 @@ 2.0.7

dist/react-numeric-input.js

@@ -207,8 +207,10 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        value: function componentWillReceiveProps(props) {
-	            var _value = String(props.value || props.value === 0 ? props.value : '').replace(/^\s*|\s*$/, "");
+	            if (props.hasOwnProperty("value")) {
+	                var _value = String(props.value || props.value === 0 ? props.value : '').replace(/^\s*|\s*$/, "");
 
-	            this.setState({
-	                value: "value" in props && _value !== '' ? this._parse(_value) : null,
-	                stringValue: _value
-	            });
+	                this.setState({
+	                    value: "value" in props && _value !== '' ? this._parse(_value) : null,
+	                    stringValue: _value
+	                });
+	            }
 	        }
@@ -239,3 +241,3 @@
 	            if (prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) {
-	                this._invokeEventCallback("onChange", this.state.value, this.refs.input.value);
+	                this._invokeEventCallback("onChange", this.state.value, this.refs.input.value, this.refs.input);
 	            }
@@ -426,7 +428,2 @@
 	        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') {
@@ -466,2 +463,6 @@ return parseFloat(this.props.parse(x));
 
+	            if (this.props.snap) {
+	                _n = Math.round(_n / this.props.step) * this.props.step;
+	            }
+
 	            if (_n !== this.state.value) {
@@ -496,2 +497,18 @@ this.setState({ value: _n, stringValue: _n }, callback);
 	                    this._step(e.ctrlKey || e.metaKey ? -0.1 : e.shiftKey ? -10 : -1);
+	                } else {
+	                    var _value2 = this.refs.input.value,
+	                        length = _value2.length;
+	                    if (e.keyCode === 8) {
+	                        // backspace
+	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd > 0 && _value2.length && _value2.charAt(this.refs.input.selectionEnd - 1) === ".") {
+	                            e.preventDefault();
+	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd - 1;
+	                        }
+	                    } else if (e.keyCode === 46) {
+	                        // delete
+	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd < length + 1 && _value2.length && _value2.charAt(this.refs.input.selectionEnd) === ".") {
+	                            e.preventDefault();
+	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd + 1;
+	                        }
+	                    }
 	                }
@@ -646,2 +663,3 @@ }
 	            var mobile = _props.mobile;
+	            var snap = _props.snap;
 	            var value = _props.value;
@@ -654,3 +672,3 @@ var type = _props.type;
 
-	            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', 'snap', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid']);
 
@@ -927,2 +945,3 @@ // Build the styles
 	    required: _propTypes2.default.bool,
+	    snap: _propTypes2.default.bool,
 	    noValidate: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
@@ -929,0 +948,0 @@ style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),

dist/react-numeric-input.min.js

@@ -1,1 +0,1 @@
-!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}])});
+!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){if(t.hasOwnProperty("value")){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.refs.input),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"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 this.props.snap&&(n=Math.round(n/this.props.step)*this.props.step),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];if(!o.isDefaultPrevented())if(o.keyCode===b)o.preventDefault(),this._step(o.ctrlKey||o.metaKey?.1:o.shiftKey?10:1);else if(o.keyCode===m)o.preventDefault(),this._step(o.ctrlKey||o.metaKey?-.1:o.shiftKey?-10:-1);else{var a=this.refs.input.value,i=a.length;8===o.keyCode?this.refs.input.selectionStart==this.refs.input.selectionEnd&&this.refs.input.selectionEnd>0&&a.length&&"."===a.charAt(this.refs.input.selectionEnd-1)&&(o.preventDefault(),this.refs.input.selectionStart=this.refs.input.selectionEnd=this.refs.input.selectionEnd-1):46===o.keyCode&&this.refs.input.selectionStart==this.refs.input.selectionEnd&&this.refs.input.selectionEnd<i+1&&a.length&&"."===a.charAt(this.refs.input.selectionEnd)&&(o.preventDefault(),this.refs.input.selectionStart=this.refs.input.selectionEnd=this.refs.input.selectionEnd+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.snap,s.value,s.type,s.style),l=(s.defaultValue,s.onInvalid,s.onValid,a(s,["step","min","max","precision","parse","format","mobile","snap","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,snap: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}])});

examples/Demo.jsx

@@ -24,3 +24,6 @@ /* global $, hljs, NumericInput, React */
                 pattern   : { value: "[0-9].[0-9][0-9]", on: false },
-                title     : { value: "The title attr",   on: false }
+                title     : { value: "The title attr",   on: false },
+                snap      : { value: true,               on: false },
+                inputmode : { value: "numeric",          on: false }
+                // library
             }
@@ -188,3 +191,5 @@ }
                                         { name: "required"  , type: "bool"   },
-                                        { name: "noValidate", type: "bool"   }
+                                        { name: "noValidate", type: "bool"   },
+                                        { name: "inputmode" , type: "text"   },
+                                        { name: "snap"      , type: "bool"   }
                                     ])}
@@ -191,0 +196,0 @@ {/*

examples/examples.js

@@ -161,3 +161,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	                pattern: { value: "[0-9].[0-9][0-9]", on: false },
-	                title: { value: "The title attr", on: false }
+	                title: { value: "The title attr", on: false },
+	                snap: { value: true, on: false },
+	                inputmode: { value: "numeric", on: false }
+	                // library
 	            }
@@ -361,3 +364,3 @@ };
 	                                    null,
-	                                    this.renderPropEditors([{ name: "name", type: "text" }, { name: "className", type: "text" }, { name: "value", type: "text" }, { name: "min", type: "number" }, { name: "max", type: "number" }, { name: "step", type: "number", min: 0.001, step: 0.1, precision: 3 }, { name: "precision", type: "number", min: 0, max: 20 }, { name: "size", type: "number", min: 0, max: 60 }, { name: "maxLength", type: "number", min: 0, max: 20 }, { name: "disabled", type: "bool" }, { name: "readOnly", type: "bool" }, { name: "mobile", type: "bool" }, { name: "pattern", type: "text" }, { name: "title", type: "text" }, { name: "required", type: "bool" }, { name: "noValidate", type: "bool" }])
+	                                    this.renderPropEditors([{ name: "name", type: "text" }, { name: "className", type: "text" }, { name: "value", type: "text" }, { name: "min", type: "number" }, { name: "max", type: "number" }, { name: "step", type: "number", min: 0.001, step: 0.1, precision: 3 }, { name: "precision", type: "number", min: 0, max: 20 }, { name: "size", type: "number", min: 0, max: 60 }, { name: "maxLength", type: "number", min: 0, max: 20 }, { name: "disabled", type: "bool" }, { name: "readOnly", type: "bool" }, { name: "mobile", type: "bool" }, { name: "pattern", type: "text" }, { name: "title", type: "text" }, { name: "required", type: "bool" }, { name: "noValidate", type: "bool" }, { name: "inputmode", type: "text" }, { name: "snap", type: "bool" }])
 	                                )
@@ -364,0 +367,0 @@ )

index.js

@@ -127,8 +127,10 @@ module.exports =
 	        value: function componentWillReceiveProps(props) {
-	            var _value = String(props.value || props.value === 0 ? props.value : '').replace(/^\s*|\s*$/, "");
+	            if (props.hasOwnProperty("value")) {
+	                var _value = String(props.value || props.value === 0 ? props.value : '').replace(/^\s*|\s*$/, "");
 
-	            this.setState({
-	                value: "value" in props && _value !== '' ? this._parse(_value) : null,
-	                stringValue: _value
-	            });
+	                this.setState({
+	                    value: "value" in props && _value !== '' ? this._parse(_value) : null,
+	                    stringValue: _value
+	                });
+	            }
 	        }
@@ -144,3 +146,3 @@ }, {
 	            if (prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) {
-	                this._invokeEventCallback("onChange", this.state.value, this.refs.input.value);
+	                this._invokeEventCallback("onChange", this.state.value, this.refs.input.value, this.refs.input);
 	            }
@@ -275,6 +277,2 @@
 	        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') {
@@ -301,2 +299,6 @@ return parseFloat(this.props.parse(x));
 
+	            if (this.props.snap) {
+	                _n = Math.round(_n / this.props.step) * this.props.step;
+	            }
+
 	            if (_n !== this.state.value) {
@@ -326,2 +328,16 @@ this.setState({ value: _n, stringValue: _n }, callback);
 	                    this._step(e.ctrlKey || e.metaKey ? -0.1 : e.shiftKey ? -10 : -1);
+	                } else {
+	                    var _value2 = this.refs.input.value,
+	                        length = _value2.length;
+	                    if (e.keyCode === 8) {
+	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd > 0 && _value2.length && _value2.charAt(this.refs.input.selectionEnd - 1) === ".") {
+	                            e.preventDefault();
+	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd - 1;
+	                        }
+	                    } else if (e.keyCode === 46) {
+	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd < length + 1 && _value2.length && _value2.charAt(this.refs.input.selectionEnd) === ".") {
+	                            e.preventDefault();
+	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd + 1;
+	                        }
+	                    }
 	                }
@@ -420,2 +436,3 @@ }
 	            var mobile = _props.mobile;
+	            var snap = _props.snap;
 	            var value = _props.value;
@@ -428,3 +445,3 @@ var type = _props.type;
 
-	            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', 'snap', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid']);
 
@@ -697,2 +714,3 @@ for (var x in NumericInput.style) {
 	    required: _propTypes2.default.bool,
+	    snap: _propTypes2.default.bool,
 	    noValidate: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
@@ -699,0 +717,0 @@ style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),

package.json

 {
   "name": "react-numeric-input",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "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).",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -49,2 +49,9 @@ # <img align="right" src="http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.0/screenshot.png" width="123"/>React Numeric Input
 
+#### Snap to step
+If you want your component to "snap" to the closest step value while incrementing
+or decrementing (up/down buttons or arrow keys) you can use the `snap` prop:
+```jsx
+<NumericInput step={0.5} precision={2} value={50.3} snap/>
+```
+
 #### Custom format
@@ -77,2 +84,3 @@ By default the component displays the value number as is. However, you can
 **mobile**   |`true`, `false`, 'auto' or `function`|`auto`
+**snap**     |`boolean`                            | none (false)
 
@@ -79,0 +87,0 @@ Any other option is passed directly the input created by the component. Just

src/NumericInput.jsx

@@ -65,2 +65,3 @@ // @flow
         required     : PropTypes.bool,
+        snap         : PropTypes.bool,
         noValidate   : PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
@@ -335,10 +336,12 @@ style        : PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
     {
-        let _value = String(
-            props.value || props.value === 0 ? props.value : ''
-        ).replace(/^\s*|\s*$/, "")
+        if (props.hasOwnProperty("value")) {
+            let _value = String(
+                props.value || props.value === 0 ? props.value : ''
+            ).replace(/^\s*|\s*$/, "")
 
-        this.setState({
-            value: "value" in props && _value !== '' ? this._parse(_value) : null,
-            stringValue: _value
-        })
+            this.setState({
+                value: "value" in props && _value !== '' ? this._parse(_value) : null,
+                stringValue: _value
+            })
+        }
     }
@@ -365,3 +368,3 @@
         if (prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) {
-            this._invokeEventCallback("onChange", this.state.value, this.refs.input.value)
+            this._invokeEventCallback("onChange", this.state.value, this.refs.input.value, this.refs.input)
         }
@@ -552,7 +555,2 @@
     {
-        // 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') {
@@ -591,2 +589,6 @@ return parseFloat(this.props.parse(x));
 
+        if (this.props.snap) {
+            _n = Math.round(_n / this.props.step) * this.props.step
+        }
+
         if (_n !== this.state.value) {
@@ -617,2 +619,25 @@ this.setState({ value: _n, stringValue: _n }, callback);
             }
+            else {
+                let value = this.refs.input.value, length = value.length;
+                if (e.keyCode === 8) { // backspace
+                    if (this.refs.input.selectionStart == this.refs.input.selectionEnd &&
+                        this.refs.input.selectionEnd > 0 &&
+                        value.length &&
+                        value.charAt(this.refs.input.selectionEnd - 1) === ".")
+                    {
+                        e.preventDefault();
+                        this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd - 1;
+                    }
+                }
+                else if (e.keyCode === 46) { // delete
+                    if (this.refs.input.selectionStart == this.refs.input.selectionEnd &&
+                        this.refs.input.selectionEnd < length + 1 &&
+                        value.length &&
+                        value.charAt(this.refs.input.selectionEnd) === ".")
+                    {
+                        e.preventDefault();
+                        this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd + 1;
+                    }
+                }
+            }
         }
@@ -726,3 +751,3 @@ }
             // These are ignored in rendering
-            step, min, max, precision, parse, format, mobile,
+            step, min, max, precision, parse, format, mobile, snap,
             value, type, style, defaultValue, onInvalid, onValid,
@@ -729,0 +754,0 @@

New alerts

License Policy Violation

License

This 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

License

This 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

257164

increased by3.02%

Lines of code

4743

increased by2.31%

Number of lines in readme file

160

increased by5.26%

No dependency changes