Prepare for 2.1.0 release

Author: vlad-ignatov

CHANGELOG.md

@@ -1,3 +1,11 @@
+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
 --------------------------------------------------------------------------------
 * Field now accepts `"-."`, `"+.`", `"."`, `"-"`, and `"+"` at beginning of input value.

__tests__/misc.test.jsx

@@ -56,7 +56,10 @@ describe ('NumericInput/misc', function() {
         TestUtils.Simulate.focus(input)
         input.value = 1
         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()
     })
 
@@ -116,10 +119,10 @@ describe ('NumericInput/misc', function() {
         TestUtils.Simulate.focus(input)
         input.value = 2
         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()
     })
 

dist/react-numeric-input.js

@@ -237,7 +237,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            // many reasons for changing the value and this is the common place
 	            // that can capture them all
 	            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);
 	            }
 
 	            // focus the input is needed (for example up/down buttons set

dist/react-numeric-input.min.js

@@ -21,7 +21,9 @@ export default class Demo extends React.Component
                 required  : { value: true,               on: false },
                 noValidate: { value: true,               on: false },
                 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
             }
         }
@@ -186,7 +188,8 @@ export default class Demo extends React.Component
                                         { name: "title"     , type: "text"   },
                                         { name: "required"  , type: "bool"   },
                                         { name: "noValidate", type: "bool"   },
-                                        { name: "inputmode" , type: "text"   }
+                                        { name: "inputmode" , type: "text"   },
+                                        { name: "snap"      , type: "bool"   }
                                     ])}
                                     {/*
                                     parse	function	parseFloat

examples/Demo.jsx

@@ -158,7 +158,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	                required: { value: true, on: false },
 	                noValidate: { value: true, on: false },
 	                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
 	            }
 	        };
@@ -358,7 +360,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                                React.createElement(
 	                                    "tbody",
 	                                    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" }, { name: "inputmode", type: "text" }])
+	                                    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" }])
 	                                )
 	                            )
 	                        )

examples/examples.js

@@ -142,7 +142,7 @@ module.exports =
 	        key: 'componentDidUpdate',
 	        value: function componentDidUpdate(prevProps, prevState) {
 	            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);
 	            }
 
 	            if (this.state.inputFocus) {

index.js

@@ -1,6 +1,6 @@
 {
   "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).",
   "main": "index.js",
   "scripts": {

package.json

@@ -363,7 +363,7 @@ class NumericInput extends Component
         // many reasons for changing the value and this is the common place
         // that can capture them all
         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)
         }
 
         // focus the input is needed (for example up/down buttons set