react-numeric-input - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

__tests__/focusAndBlur.test.jsx

@@ -105,3 +105,3 @@ /* global describe, it */
             else {
-                console.log("Unable to test autoFocus")
+                // console.log("Unable to test autoFocus")
                 done(/*new Error("Unable to autoFocus")*/)
@@ -108,0 +108,0 @@ }

__tests__/props.test.jsx

@@ -15,3 +15,3 @@ /* global React, describe, it */
                 entry.out,
-                `If the "${cfg.propName}" is set to ${entry.in} the result
+                `If the "${cfg.propName}" is set to "${String(entry.in)}" the result
                 should be "${entry.out}" but got "${result}"`
@@ -239,3 +239,31 @@ )
         .catch(done)
-    })
+    });
+
+    it('can disable inline styles', done => {
+        let app = TestUtils.renderIntoDocument(<NumericInput style={false} />);
+
+        function walk(el, visitor) {
+            visitor(el);
+            if (el.childNodes) {
+                for (let i = 0, l = el.childNodes.length; i < l; i++) {
+                    let child = el.childNodes[i]
+                    if (child.nodeType === 1) {
+                        walk(child, visitor)
+                    }
+                }
+            }
+        }
+
+        walk(app.refs.wrapper, el => {
+            expect(!el.getAttribute('style')).toEqual(true);
+        });
+
+        app = TestUtils.renderIntoDocument(<NumericInput style={false} mobile />);
+
+        walk(app.refs.wrapper, el => {
+            expect(!el.getAttribute('style')).toEqual(true);
+        });
+
+        done();
+    });
 })

build_config/dist-min.js

@@ -8,3 +8,4 @@ var webpack = require("webpack")
         filename     : "react-numeric-input.min.js",
-        libraryTarget: "umd"
+        libraryTarget: "umd",
+        library      : "NumericInput"
     },
@@ -11,0 +12,0 @@ module: {

build_config/dist.js

@@ -6,3 +6,4 @@ module.exports = {
         filename     : "react-numeric-input.js",
-        libraryTarget: "umd"
+        libraryTarget: "umd",
+        library      : "NumericInput"
     },
@@ -9,0 +10,0 @@ module: {

dist/react-numeric-input.js

@@ -6,6 +6,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
 		define(["React"], factory);
-	else {
-		var a = typeof exports === 'object' ? factory(require("React")) : factory(root["React"]);
-		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
-	}
+	else if(typeof exports === 'object')
+		exports["NumericInput"] = factory(require("React"));
+	else
+		root["NumericInput"] = factory(root["React"]);
 })(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
@@ -64,7 +64,2 @@ return /******/ (function(modules) { // webpackBootstrap
 
-	Object.defineProperty(exports, "__esModule", {
-	    value: true
-	});
-	exports.NumericInput = undefined;
-
 	var _react = __webpack_require__(1);
@@ -87,2 +82,3 @@
 	var KEYCODE_DOWN = 40;
+	var IS_BROWSER = typeof document != 'undefined';
 
@@ -118,3 +114,3 @@ /**
 
-	var NumericInput = exports.NumericInput = function (_React$Component) {
+	var NumericInput = function (_React$Component) {
 	    _inherits(NumericInput, _React$Component);
@@ -227,3 +223,3 @@
 	            // and the browser did focus it we have pass that to the onFocus
-	            if (!this.state.inputFocus && document.activeElement === this.refs.input) {
+	            if (!this.state.inputFocus && IS_BROWSER && document.activeElement === this.refs.input) {
 	                this.state.inputFocus = true;
@@ -434,2 +430,3 @@ }
 
+	            args[0].persist();
 	            this._invokeEventCallback.apply(this, ["onKeyDown"].concat(args));
@@ -452,2 +449,3 @@ var e = args[0];
 
+	            e.persist();
 	            this.setState({
@@ -485,3 +483,3 @@ selectionStart: this.refs.input.selectionStart,
 	            if (this._timer) {
-	                window.clearTimeout(this._timer);
+	                clearTimeout(this._timer);
 	            }
@@ -597,7 +595,2 @@ }
 
-	            // Build the styles
-	            for (var x in NumericInput.style) {
-	                css[x] = Object.assign({}, NumericInput.style[x], props.style ? props.style[x] || {} : {});
-	            }
-
 	            var _props = this.props;
@@ -616,8 +609,16 @@ var
 	            var defaultValue = _props.defaultValue;
+	            var onInvalid = _props.onInvalid;
+	            var onValid = _props.onValid;
 
-	            var rest = _objectWithoutProperties(_props, ["step", "min", "max", "precision", "parse", "format", "value", "type", "style", "defaultValue"]);
+	            var rest = _objectWithoutProperties(_props, ["step", "min", "max", "precision", "parse", "format", "value", "type", "style", "defaultValue", "onInvalid", "onValid"]);
 
+	            // Build the styles
+
+	            for (var x in NumericInput.style) {
+	                css[x] = Object.assign({}, NumericInput.style[x], style ? style[x] || {} : {});
+	            }
+
 	            var hasFormControl = props.className && /\bform-control\b/.test(props.className);
 
-	            var mobile = props.mobile == 'auto' ? 'ontouchstart' in document : props.mobile;
+	            var mobile = props.mobile == 'auto' ? IS_BROWSER && 'ontouchstart' in document : props.mobile;
 	            if (typeof mobile == "function") {
@@ -630,3 +631,3 @@ mobile = mobile.call(this);
 	                wrap: {
-	                    style: css.wrap,
+	                    style: style === false ? null : css.wrap,
 	                    className: 'react-numeric-input',
@@ -638,9 +639,9 @@ ref: 'wrapper'
 	                    type: 'text',
-	                    style: Object.assign({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, state.inputFocus ? css['input:focus'] : {})
+	                    style: style === false ? null : Object.assign({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, state.inputFocus ? css['input:focus'] : {})
 	                }, rest),
 	                btnUp: {
-	                    style: Object.assign({}, css.btn, css.btnUp, props.disabled ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
+	                    style: style === false ? null : Object.assign({}, css.btn, css.btnUp, props.disabled ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
 	                },
 	                btnDown: {
-	                    style: Object.assign({}, css.btn, css.btnDown, props.disabled ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
+	                    style: style === false ? null : Object.assign({}, css.btn, css.btnDown, props.disabled ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
 	                }
@@ -651,5 +652,7 @@ };
 	                attrs.input.value = this._format(state.value);
+	            } else {
+	                attrs.input.value = "";
 	            }
 
-	            if (hasFormControl) {
+	            if (hasFormControl && style !== false) {
 	                Object.assign(attrs.wrap.style, css['wrap.hasFormControl']);
@@ -659,3 +662,3 @@ }
 	            // mobile
-	            if (mobile) {
+	            if (mobile && style !== false) {
 	                Object.assign(attrs.input.style, css['input.mobile']);
@@ -700,2 +703,3 @@ Object.assign(attrs.btnUp.style, css['btnUp.mobile']);
 	                        args[0].preventDefault();
+	                        args[0].persist();
 	                        _this6.setState({
@@ -739,2 +743,3 @@ btnUpHover: true,
 	                        args[0].preventDefault();
+	                        args[0].persist();
 	                        _this6.setState({
@@ -762,2 +767,3 @@ btnDownHover: true,
 
+	                        args[0].persist();
 	                        _this6.setState({ inputFocus: true }, function () {
@@ -772,2 +778,3 @@ _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 
+	                        args[0].persist();
 	                        _this6.setState({ inputFocus: false }, function () {
@@ -779,3 +786,5 @@ _this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
 	            } else {
-	                Object.assign(attrs.input.style, css['input:disabled']);
+	                if (style !== false) {
+	                    Object.assign(attrs.input.style, css['input:disabled']);
+	                }
 	            }
@@ -791,4 +800,4 @@
 	                        attrs.btnUp,
-	                        _react2.default.createElement("i", { style: css.minus }),
-	                        _react2.default.createElement("i", { style: css.plus })
+	                        _react2.default.createElement("i", { style: style === false ? null : css.minus }),
+	                        _react2.default.createElement("i", { style: style === false ? null : css.plus })
 	                    ),
@@ -798,3 +807,3 @@ _react2.default.createElement(
 	                        attrs.btnDown,
-	                        _react2.default.createElement("i", { style: css.minus })
+	                        _react2.default.createElement("i", { style: style === false ? null : css.minus })
 	                    )
@@ -811,3 +820,3 @@ );
 	                    attrs.btnUp,
-	                    _react2.default.createElement("i", { style: css.arrowUp })
+	                    _react2.default.createElement("i", { style: style === false ? null : css.arrowUp })
 	                ),
@@ -817,3 +826,3 @@ _react2.default.createElement(
 	                    attrs.btnDown,
-	                    _react2.default.createElement("i", { style: css.arrowDown })
+	                    _react2.default.createElement("i", { style: style === false ? null : css.arrowDown })
 	                )
@@ -840,3 +849,3 @@ );
 	    noValidate: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-	    style: PropTypes.object,
+	    style: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
 	    type: PropTypes.string,
@@ -1027,4 +1036,5 @@ pattern: PropTypes.string,
 	NumericInput.DELAY = 500;
-	exports.default = NumericInput;
 
+	module.exports = NumericInput;
+
 /***/ },
@@ -1031,0 +1041,0 @@ /* 1 */

dist/react-numeric-input.min.js

@@ -1,1 +0,1 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("React"));else if("function"==typeof define&&define.amd)define(["React"],e);else{var n=e("object"==typeof exports?require("React"):t.React);for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.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 i(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 a(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}}();Object.defineProperty(e,"__esModule",{value:!0}),e.NumericInput=void 0;var b=n(1),h=o(b),f=h["default"].PropTypes,d=38,v=40,m=e.NumericInput=function(t){function e(t){a(this,e);var n=s(this,Object.getPrototypeOf(e).call(this,t));return n._timer=null,n._valid=void 0,n.state={selectionStart:null,selectionEnd:null,value:"value"in t?t.value:t.defaultValue,btnDownHover:!1,btnDownActive:!1,btnUpHover:!1,btnUpActive:!1,inputFocus:!1},n.stop=n.stop.bind(n),n}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})}},{key:"componentDidUpdate",value:function(t,e){e.value!=this.state.value&&this._invokeEventCallback("onChange",this.state.value,this.refs.input.value),this.state.inputFocus&&!e.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.state.inputFocus||document.activeElement!==this.refs.input||(this.state.inputFocus=!0),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.checkValidity()}},{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 i=this._valid!==e;this._valid=e,e?(u(this.refs.wrapper,"has-error"),i&&this._invokeEventCallback("onInvalid",e,this.state.value,this.refs.input.value)):(l(this.refs.wrapper,"has-error"),i&&this._invokeEventCallback("onValid",this.state.value,this.refs.input.value))}},{key:"_toNumber",value:function(t){var e=parseFloat(t),n=Math.pow(10,this.props.precision);return(isNaN(e)||!isFinite(e))&&(e=0),e=Math.min(Math.max(e,this.props.min),this.props.max),e=Math.round(e*n)/n}},{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);n!==this.state.value&&this.setState({value:n},e)}},{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];this._invokeEventCallback.apply(this,["onKeyDown"].concat(e));var o=e[0];o.isDefaultPrevented()||(o.keyCode===d?(o.preventDefault(),this._step(o.ctrlKey||o.metaKey?.1:o.shiftKey?10:1)):o.keyCode===v&&(o.preventDefault(),this._step(o.ctrlKey||o.metaKey?-.1:o.shiftKey?-10:-1)))}},{key:"_onSelectionChange",value:function(t){var e=this;this.setState({selectionStart:this.refs.input.selectionStart,selectionEnd:this.refs.input.selectionEnd},function(){switch(t.type){case"input":e.props.onInput&&e.props.onInput.call(e.refs.input,t);break;case"select":e.props.onSelect&&e.props.onSelect.call(e.refs.input,t);break;case"selectstart":e.props.onSelectStart&&e.props.onSelectStart.call(e.refs.input,t)}})}},{key:"stop",value:function(){this._timer&&window.clearTimeout(this._timer)}},{key:"increase",value:function(t,n){var o=this;this.stop(),this._step(1,n),(isNaN(this.state.value)||this.state.value<this.props.max)&&(this._timer=setTimeout(function(){o.increase(!0)},t?e.SPEED:e.DELAY))}},{key:"decrease",value:function(t,n){var o=this;this.stop(),this._step(-1,n),(isNaN(this.state.value)||this.state.value>this.props.min)&&(this._timer=setTimeout(function(){o.decrease(!0)},t?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),i=1;n>i;i++)o[i-1]=arguments[i];(e=this.props[t]).call.apply(e,[null].concat(o))}}},{key:"render",value:function(){var t=this,n=this.props,o=this.state,a={};for(var s in e.style)a[s]=Object.assign({},e.style[s],n.style?n.style[s]||{}:{});var r=this.props,u=(r.step,r.min,r.max,r.precision,r.parse,r.format,r.value,r.type,r.style,r.defaultValue,i(r,["step","min","max","precision","parse","format","value","type","style","defaultValue"])),l=n.className&&/\bform-control\b/.test(n.className),c="auto"==n.mobile?"ontouchstart"in document:n.mobile;"function"==typeof c&&(c=c.call(this)),c=!!c;var b={wrap:{style:a.wrap,className:"react-numeric-input",ref:"wrapper"},input:p({ref:"input",type:"text",style:Object.assign({},a.input,l?{}:a["input:not(.form-control)"],o.inputFocus?a["input:focus"]:{})},u),btnUp:{style:Object.assign({},a.btn,a.btnUp,n.disabled?a["btn:disabled"]:o.btnUpActive?a["btn:active"]:o.btnUpHover?a["btn:hover"]:{})},btnDown:{style:Object.assign({},a.btn,a.btnDown,n.disabled?a["btn:disabled"]:o.btnDownActive?a["btn:active"]:o.btnDownHover?a["btn:hover"]:{})}};return(o.value||0===o.value)&&(b.input.value=this._format(o.value)),l&&Object.assign(b.wrap.style,a["wrap.hasFormControl"]),c&&(Object.assign(b.input.style,a["input.mobile"]),Object.assign(b.btnUp.style,a["btnUp.mobile"]),Object.assign(b.btnDown.style,a["btnDown.mobile"])),n.disabled?Object.assign(b.input.style,a["input:disabled"]):(Object.assign(b.wrap,{onMouseUp:this.stop,onMouseLeave:this.stop}),Object.assign(b.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(),t.setState({btnUpHover:!0,btnUpActive:!0,inputFocus:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))}),t.onMouseDown("up")}}),Object.assign(b.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(),t.setState({btnDownHover:!0,btnDownActive:!0,inputFocus:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))}),t.onMouseDown("down")}}),Object.assign(b.input,{onChange:this._onChange.bind(this),onKeyDown:this._onKeyDown.bind(this),onInput:this._onSelectionChange.bind(this),onSelect:this._onSelectionChange.bind(this),onSelectStart:this._onSelectionChange.bind(this),onFocus:function(){for(var e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];t.setState({inputFocus:!0},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];t.setState({inputFocus:!1},function(){t._invokeEventCallback.apply(t,["onBlur"].concat(n))})}})),c?h["default"].createElement("span",b.wrap,h["default"].createElement("input",b.input),h["default"].createElement("b",b.btnUp,h["default"].createElement("i",{style:a.minus}),h["default"].createElement("i",{style:a.plus})),h["default"].createElement("b",b.btnDown,h["default"].createElement("i",{style:a.minus}))):h["default"].createElement("span",b.wrap,h["default"].createElement("input",b.input),h["default"].createElement("b",b.btnUp,h["default"].createElement("i",{style:a.arrowUp})),h["default"].createElement("b",b.btnDown,h["default"].createElement("i",{style:a.arrowDown})))}}]),e}(h["default"].Component);m.propTypes={step:f.number,min:f.number,max:f.number,precision:f.number,maxLength:f.number,parse:f.func,format:f.func,className:f.string,disabled:f.bool,readOnly:f.bool,required:f.bool,noValidate:f.oneOfType([f.bool,f.string]),style:f.object,type:f.string,pattern:f.string,onFocus:f.func,onBlur:f.func,onKeyDown:f.func,onChange:f.func,onInvalid:f.func,onValid:f.func,onInput:f.func,onSelect:f.func,onSelectStart:f.func,size:f.oneOfType([f.number,f.string]),value:f.oneOfType([f.number,f.string]),defaultValue:f.oneOfType([f.number,f.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}},m.defaultProps={step:1,min:Number.MIN_SAFE_INTEGER||-9007199254740991,max:Number.MAX_SAFE_INTEGER||9007199254740991,precision:0,parse:null,format:null,mobile:"auto",style:{}},m.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)"}},m.SPEED=50,m.DELAY=500,e["default"]=m},function(e,n){e.exports=t}])});
+!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 i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.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 i(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 s(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 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}}(),b=n(1),h=o(b),f=h["default"].PropTypes,d=38,v=40,m="undefined"!=typeof document,y=function(t){function e(t){s(this,e);var n=a(this,Object.getPrototypeOf(e).call(this,t));return n._timer=null,n._valid=void 0,n.state={selectionStart:null,selectionEnd:null,value:"value"in t?t.value:t.defaultValue,btnDownHover:!1,btnDownActive:!1,btnUpHover:!1,btnUpActive:!1,inputFocus:!1},n.stop=n.stop.bind(n),n}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})}},{key:"componentDidUpdate",value:function(t,e){e.value!=this.state.value&&this._invokeEventCallback("onChange",this.state.value,this.refs.input.value),this.state.inputFocus&&!e.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.state.inputFocus&&m&&document.activeElement===this.refs.input&&(this.state.inputFocus=!0),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.checkValidity()}},{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 i=this._valid!==e;this._valid=e,e?(u(this.refs.wrapper,"has-error"),i&&this._invokeEventCallback("onInvalid",e,this.state.value,this.refs.input.value)):(l(this.refs.wrapper,"has-error"),i&&this._invokeEventCallback("onValid",this.state.value,this.refs.input.value))}},{key:"_toNumber",value:function(t){var e=parseFloat(t),n=Math.pow(10,this.props.precision);return(isNaN(e)||!isFinite(e))&&(e=0),e=Math.min(Math.max(e,this.props.min),this.props.max),e=Math.round(e*n)/n}},{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);n!==this.state.value&&this.setState({value:n},e)}},{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===d?(o.preventDefault(),this._step(o.ctrlKey||o.metaKey?.1:o.shiftKey?10:1)):o.keyCode===v&&(o.preventDefault(),this._step(o.ctrlKey||o.metaKey?-.1:o.shiftKey?-10:-1)))}},{key:"_onSelectionChange",value:function(t){var e=this;t.persist(),this.setState({selectionStart:this.refs.input.selectionStart,selectionEnd:this.refs.input.selectionEnd},function(){switch(t.type){case"input":e.props.onInput&&e.props.onInput.call(e.refs.input,t);break;case"select":e.props.onSelect&&e.props.onSelect.call(e.refs.input,t);break;case"selectstart":e.props.onSelectStart&&e.props.onSelectStart.call(e.refs.input,t)}})}},{key:"stop",value:function(){this._timer&&clearTimeout(this._timer)}},{key:"increase",value:function(t,n){var o=this;this.stop(),this._step(1,n),(isNaN(this.state.value)||this.state.value<this.props.max)&&(this._timer=setTimeout(function(){o.increase(!0)},t?e.SPEED:e.DELAY))}},{key:"decrease",value:function(t,n){var o=this;this.stop(),this._step(-1,n),(isNaN(this.state.value)||this.state.value>this.props.min)&&(this._timer=setTimeout(function(){o.decrease(!0)},t?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),i=1;n>i;i++)o[i-1]=arguments[i];(e=this.props[t]).call.apply(e,[null].concat(o))}}},{key:"render",value:function(){var t=this,n=this.props,o=this.state,s={},a=this.props,r=(a.step,a.min,a.max,a.precision,a.parse,a.format,a.value,a.type,a.style),u=(a.defaultValue,a.onInvalid,a.onValid,i(a,["step","min","max","precision","parse","format","value","type","style","defaultValue","onInvalid","onValid"]));for(var l in e.style)s[l]=Object.assign({},e.style[l],r?r[l]||{}:{});var c=n.className&&/\bform-control\b/.test(n.className),b="auto"==n.mobile?m&&"ontouchstart"in document:n.mobile;"function"==typeof b&&(b=b.call(this)),b=!!b;var f={wrap:{style:r===!1?null:s.wrap,className:"react-numeric-input",ref:"wrapper"},input:p({ref:"input",type:"text",style:r===!1?null:Object.assign({},s.input,c?{}:s["input:not(.form-control)"],o.inputFocus?s["input:focus"]:{})},u),btnUp:{style:r===!1?null:Object.assign({},s.btn,s.btnUp,n.disabled?s["btn:disabled"]:o.btnUpActive?s["btn:active"]:o.btnUpHover?s["btn:hover"]:{})},btnDown:{style:r===!1?null:Object.assign({},s.btn,s.btnDown,n.disabled?s["btn:disabled"]:o.btnDownActive?s["btn:active"]:o.btnDownHover?s["btn:hover"]:{})}};return o.value||0===o.value?f.input.value=this._format(o.value):f.input.value="",c&&r!==!1&&Object.assign(f.wrap.style,s["wrap.hasFormControl"]),b&&r!==!1&&(Object.assign(f.input.style,s["input.mobile"]),Object.assign(f.btnUp.style,s["btnUp.mobile"]),Object.assign(f.btnDown.style,s["btnDown.mobile"])),n.disabled?r!==!1&&Object.assign(f.input.style,s["input:disabled"]):(Object.assign(f.wrap,{onMouseUp:this.stop,onMouseLeave:this.stop}),Object.assign(f.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")}}),Object.assign(f.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")}}),Object.assign(f.input,{onChange:this._onChange.bind(this),onKeyDown:this._onKeyDown.bind(this),onInput:this._onSelectionChange.bind(this),onSelect:this._onSelectionChange.bind(this),onSelectStart:this._onSelectionChange.bind(this),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._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._invokeEventCallback.apply(t,["onBlur"].concat(n))})}})),b?h["default"].createElement("span",f.wrap,h["default"].createElement("input",f.input),h["default"].createElement("b",f.btnUp,h["default"].createElement("i",{style:r===!1?null:s.minus}),h["default"].createElement("i",{style:r===!1?null:s.plus})),h["default"].createElement("b",f.btnDown,h["default"].createElement("i",{style:r===!1?null:s.minus}))):h["default"].createElement("span",f.wrap,h["default"].createElement("input",f.input),h["default"].createElement("b",f.btnUp,h["default"].createElement("i",{style:r===!1?null:s.arrowUp})),h["default"].createElement("b",f.btnDown,h["default"].createElement("i",{style:r===!1?null:s.arrowDown})))}}]),e}(h["default"].Component);y.propTypes={step:f.number,min:f.number,max:f.number,precision:f.number,maxLength:f.number,parse:f.func,format:f.func,className:f.string,disabled:f.bool,readOnly:f.bool,required:f.bool,noValidate:f.oneOfType([f.bool,f.string]),style:f.oneOfType([f.object,f.bool]),type:f.string,pattern:f.string,onFocus:f.func,onBlur:f.func,onKeyDown:f.func,onChange:f.func,onInvalid:f.func,onValid:f.func,onInput:f.func,onSelect:f.func,onSelectStart:f.func,size:f.oneOfType([f.number,f.string]),value:f.oneOfType([f.number,f.string]),defaultValue:f.oneOfType([f.number,f.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}])});

examples/Demo.jsx

@@ -44,3 +44,3 @@ /* global $, hljs, NumericInput, React */
     onChange(x) {
-        this.state.inputProps.value.value = x
+        this.state.inputProps.value.value = x === null ? "" : x
         if (this.state.inputProps.value.on) {
@@ -207,2 +207,3 @@ this.setState(this.state);
                                     onValid={ this.onValid.bind(this) }
+                                    value={ inputProps.value === null ? undefined : inputProps.value || ""}
                                 />
@@ -209,0 +210,0 @@ <div className="help-block">

examples/examples.js

@@ -187,3 +187,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        value: function onChange(x) {
-	            this.state.inputProps.value.value = x;
+	            this.state.inputProps.value.value = x === null ? "" : x;
 	            if (this.state.inputProps.value.on) {
@@ -386,3 +386,4 @@ this.setState(this.state);
 	                                    onInvalid: this.onInvalid.bind(this),
-	                                    onValid: this.onValid.bind(this)
+	                                    onValid: this.onValid.bind(this),
+	                                    value: inputProps.value === null ? undefined : inputProps.value || ""
 	                                })),
@@ -389,0 +390,0 @@ React.createElement(

index.js

@@ -54,7 +54,2 @@ module.exports =
 
-	Object.defineProperty(exports, "__esModule", {
-	    value: true
-	});
-	exports.NumericInput = undefined;
-
 	var _react = __webpack_require__(1);
@@ -77,2 +72,3 @@
 	var KEYCODE_DOWN = 40;
+	var IS_BROWSER = typeof document != 'undefined';
 
@@ -98,3 +94,3 @@ function addClass(element, className) {
 
-	var NumericInput = exports.NumericInput = function (_React$Component) {
+	var NumericInput = function (_React$Component) {
 	    _inherits(NumericInput, _React$Component);
@@ -153,3 +149,3 @@
 
-	            if (!this.state.inputFocus && document.activeElement === this.refs.input) {
+	            if (!this.state.inputFocus && IS_BROWSER && document.activeElement === this.refs.input) {
 	                this.state.inputFocus = true;
@@ -291,2 +287,3 @@ }
 
+	            args[0].persist();
 	            this._invokeEventCallback.apply(this, ["onKeyDown"].concat(args));
@@ -309,2 +306,3 @@ var e = args[0];
 
+	            e.persist();
 	            this.setState({
@@ -337,3 +335,3 @@ selectionStart: this.refs.input.selectionStart,
 	            if (this._timer) {
-	                window.clearTimeout(this._timer);
+	                clearTimeout(this._timer);
 	            }
@@ -408,6 +406,2 @@ }
 
-	            for (var x in NumericInput.style) {
-	                css[x] = Object.assign({}, NumericInput.style[x], props.style ? props.style[x] || {} : {});
-	            }
-
 	            var _props = this.props;
@@ -424,8 +418,14 @@ var step = _props.step;
 	            var defaultValue = _props.defaultValue;
+	            var onInvalid = _props.onInvalid;
+	            var onValid = _props.onValid;
 
-	            var rest = _objectWithoutProperties(_props, ["step", "min", "max", "precision", "parse", "format", "value", "type", "style", "defaultValue"]);
+	            var rest = _objectWithoutProperties(_props, ["step", "min", "max", "precision", "parse", "format", "value", "type", "style", "defaultValue", "onInvalid", "onValid"]);
 
+	            for (var x in NumericInput.style) {
+	                css[x] = Object.assign({}, NumericInput.style[x], style ? style[x] || {} : {});
+	            }
+
 	            var hasFormControl = props.className && /\bform-control\b/.test(props.className);
 
-	            var mobile = props.mobile == 'auto' ? 'ontouchstart' in document : props.mobile;
+	            var mobile = props.mobile == 'auto' ? IS_BROWSER && 'ontouchstart' in document : props.mobile;
 	            if (typeof mobile == "function") {
@@ -438,3 +438,3 @@ mobile = mobile.call(this);
 	                wrap: {
-	                    style: css.wrap,
+	                    style: style === false ? null : css.wrap,
 	                    className: 'react-numeric-input',
@@ -446,9 +446,9 @@ ref: 'wrapper'
 	                    type: 'text',
-	                    style: Object.assign({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, state.inputFocus ? css['input:focus'] : {})
+	                    style: style === false ? null : Object.assign({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, state.inputFocus ? css['input:focus'] : {})
 	                }, rest),
 	                btnUp: {
-	                    style: Object.assign({}, css.btn, css.btnUp, props.disabled ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
+	                    style: style === false ? null : Object.assign({}, css.btn, css.btnUp, props.disabled ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
 	                },
 	                btnDown: {
-	                    style: Object.assign({}, css.btn, css.btnDown, props.disabled ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
+	                    style: style === false ? null : Object.assign({}, css.btn, css.btnDown, props.disabled ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
 	                }
@@ -459,9 +459,11 @@ };
 	                attrs.input.value = this._format(state.value);
+	            } else {
+	                attrs.input.value = "";
 	            }
 
-	            if (hasFormControl) {
+	            if (hasFormControl && style !== false) {
 	                Object.assign(attrs.wrap.style, css['wrap.hasFormControl']);
 	            }
 
-	            if (mobile) {
+	            if (mobile && style !== false) {
 	                Object.assign(attrs.input.style, css['input.mobile']);
@@ -505,2 +507,3 @@ Object.assign(attrs.btnUp.style, css['btnUp.mobile']);
 	                        args[0].preventDefault();
+	                        args[0].persist();
 	                        _this6.setState({
@@ -544,2 +547,3 @@ btnUpHover: true,
 	                        args[0].preventDefault();
+	                        args[0].persist();
 	                        _this6.setState({
@@ -567,2 +571,3 @@ btnDownHover: true,
 
+	                        args[0].persist();
 	                        _this6.setState({ inputFocus: true }, function () {
@@ -577,2 +582,3 @@ _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 
+	                        args[0].persist();
 	                        _this6.setState({ inputFocus: false }, function () {
@@ -584,3 +590,5 @@ _this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
 	            } else {
-	                Object.assign(attrs.input.style, css['input:disabled']);
+	                if (style !== false) {
+	                    Object.assign(attrs.input.style, css['input:disabled']);
+	                }
 	            }
@@ -596,4 +604,4 @@
 	                        attrs.btnUp,
-	                        _react2.default.createElement("i", { style: css.minus }),
-	                        _react2.default.createElement("i", { style: css.plus })
+	                        _react2.default.createElement("i", { style: style === false ? null : css.minus }),
+	                        _react2.default.createElement("i", { style: style === false ? null : css.plus })
 	                    ),
@@ -603,3 +611,3 @@ _react2.default.createElement(
 	                        attrs.btnDown,
-	                        _react2.default.createElement("i", { style: css.minus })
+	                        _react2.default.createElement("i", { style: style === false ? null : css.minus })
 	                    )
@@ -616,3 +624,3 @@ );
 	                    attrs.btnUp,
-	                    _react2.default.createElement("i", { style: css.arrowUp })
+	                    _react2.default.createElement("i", { style: style === false ? null : css.arrowUp })
 	                ),
@@ -622,3 +630,3 @@ _react2.default.createElement(
 	                    attrs.btnDown,
-	                    _react2.default.createElement("i", { style: css.arrowDown })
+	                    _react2.default.createElement("i", { style: style === false ? null : css.arrowDown })
 	                )
@@ -645,3 +653,3 @@ );
 	    noValidate: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-	    style: PropTypes.object,
+	    style: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
 	    type: PropTypes.string,
@@ -822,4 +830,5 @@ pattern: PropTypes.string,
 	NumericInput.DELAY = 500;
-	exports.default = NumericInput;
 
+	module.exports = NumericInput;
+
 /***/ },
@@ -826,0 +835,0 @@ /* 1 */

package.json

 {
   "name": "react-numeric-input",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "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).",
@@ -51,3 +51,3 @@ "main": "index.js",
     "karma-phantomjs-launcher": "^0.2.1",
-    "karma-safari-launcher": "^0.1.1",
+    "karma-safari-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.6",
@@ -57,7 +57,7 @@ "karma-webpack": "^1.7.0",
     "phantomjs": "^1.9.18",
-    "react-addons-test-utils": "^0.14.6",
     "webpack": "^1.12.2",
-    "react": "^0.14.6",
-    "react-dom": "^0.14.6"
+    "react": "^15.1.0",
+    "react-addons-test-utils": "^15.1.0",
+    "react-dom": "^15.1.0"
   }
 }

README.md

@@ -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.3/index.html)
+[Live demo](http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.4/index.html)
 
@@ -74,3 +74,3 @@ ## Installation
 **readOnly** |`boolean`                            | none
-**style**    |`object`                             | none
+**style**    |`object` or `false`                  | none
 **size**     |`number` or `string`                 | none
@@ -114,3 +114,4 @@ **mobile**   |`true`, `false`, 'auto' or `function`|`auto`
 keep in mind that because of the inline styles you might need to use `!important` for some
-rules. Example:
+rules unless you pass `style={false}` which will disable the inline styles and you will
+have to provide your own CSS styles for everything. Example:
 ```css
@@ -117,0 +118,0 @@ .react-numeric-input input {

src/NumericInput.jsx

 import React from "react";
 
-const PropTypes = React.PropTypes
+const PropTypes    = React.PropTypes
 const KEYCODE_UP   = 38;
 const KEYCODE_DOWN = 40;
+const IS_BROWSER   = typeof document != 'undefined';
 
@@ -39,3 +40,3 @@ /**
 
-export class NumericInput extends React.Component
+class NumericInput extends React.Component
 {
@@ -55,3 +56,3 @@ static propTypes = {
         noValidate   : PropTypes.oneOfType([ PropTypes.bool, PropTypes.string ]),
-        style        : PropTypes.object,
+        style        : PropTypes.oneOfType([ PropTypes.object, PropTypes.bool ]),
         type         : PropTypes.string,
@@ -348,3 +349,3 @@ pattern      : PropTypes.string,
         // and the browser did focus it we have pass that to the onFocus
-        if (!this.state.inputFocus && document.activeElement === this.refs.input) {
+        if (!this.state.inputFocus && IS_BROWSER && document.activeElement === this.refs.input) {
             this.state.inputFocus = true
@@ -544,2 +545,3 @@ }
     {
+        args[0].persist()
         this._invokeEventCallback("onKeyDown", ...args)
@@ -561,2 +563,3 @@ let e = args[0]
     {
+        e.persist()
         this.setState({
@@ -592,3 +595,3 @@ selectionStart: this.refs.input.selectionStart,
         if ( this._timer ) {
-            window.clearTimeout( this._timer );
+            clearTimeout( this._timer );
         }
@@ -684,2 +687,11 @@ }
 
+        let {
+            // These are ignored in rendering
+            step, min, max, precision, parse, format,
+            value, type, style, defaultValue, onInvalid, onValid,
+
+            // The rest are passed to the input
+            ...rest
+        } = this.props;
+
         // Build the styles
@@ -690,15 +702,6 @@ for (let x in NumericInput.style) {
                 NumericInput.style[x],
-                props.style ? props.style[x] || {} : {}
+                style ? style[x] || {} : {}
             );
         }
 
-        let {
-            // These are ignored in rendering
-            step, min, max, precision, parse, format,
-            value, type, style, defaultValue,
-
-            // The rest are passed to the input
-            ...rest
-        } = this.props;
-
         let hasFormControl = props.className && (/\bform-control\b/).test(
@@ -709,3 +712,3 @@ props.className
         let mobile = props.mobile == 'auto' ?
-            'ontouchstart' in document :
+            IS_BROWSER && 'ontouchstart' in document :
             props.mobile
@@ -719,3 +722,3 @@ if (typeof mobile == "function") {
             wrap : {
-                style    : css.wrap,
+                style    : style === false ? null : css.wrap,
                 className: 'react-numeric-input',
@@ -727,3 +730,3 @@ ref      : 'wrapper'
                 type: 'text',
-                style: Object.assign(
+                style: style === false ? null : Object.assign(
                     {},
@@ -739,3 +742,3 @@ css.input,
             btnUp: {
-                style: Object.assign(
+                style: style === false ? null : Object.assign(
                     {},
@@ -754,3 +757,3 @@ css.btn,
             btnDown: {
-                style: Object.assign(
+                style: style === false ? null : Object.assign(
                     {},
@@ -772,5 +775,7 @@ css.btn,
             attrs.input.value = this._format(state.value)
+        } else {
+            attrs.input.value = ""
         }
 
-        if (hasFormControl) {
+        if (hasFormControl && style !== false) {
             Object.assign(attrs.wrap.style, css['wrap.hasFormControl'])
@@ -780,3 +785,3 @@ }
         // mobile
-        if (mobile) {
+        if (mobile && style !== false) {
             Object.assign(attrs.input  .style, css['input.mobile'  ])
@@ -817,2 +822,3 @@ Object.assign(attrs.btnUp  .style, css['btnUp.mobile'  ])
                     args[0].preventDefault();
+                    args[0].persist();
                     this.setState({
@@ -852,2 +858,3 @@ btnUpHover  : true,
                     args[0].preventDefault();
+                    args[0].persist();
                     this.setState({
@@ -871,2 +878,3 @@ btnDownHover  : true,
                 onFocus: (...args) => {
+                    args[0].persist();
                     this.setState({ inputFocus: true }, () => {
@@ -877,2 +885,3 @@ this._invokeEventCallback("onFocus", ...args)
                 onBlur: (...args) => {
+                    args[0].persist();
                     this.setState({ inputFocus: false }, () => {
@@ -885,3 +894,5 @@ this._invokeEventCallback("onBlur", ...args)
         else {
-            Object.assign(attrs.input.style, css['input:disabled'])
+            if (style !== false) {
+                Object.assign(attrs.input.style, css['input:disabled'])
+            }
         }
@@ -894,7 +905,7 @@
                     <b {...attrs.btnUp}>
-                        <i style={css.minus}/>
-                        <i style={css.plus}/>
+                        <i style={ style === false ? null : css.minus }/>
+                        <i style={ style === false ? null : css.plus }/>
                     </b>
                     <b {...attrs.btnDown}>
-                        <i style={css.minus}/>
+                        <i style={ style === false ? null : css.minus }/>
                     </b>
@@ -909,6 +920,6 @@ </span>
                 <b {...attrs.btnUp}>
-                    <i style={css.arrowUp}/>
+                    <i style={ style === false ? null : css.arrowUp }/>
                 </b>
                 <b {...attrs.btnDown}>
-                    <i style={css.arrowDown}/>
+                    <i style={ style === false ? null : css.arrowDown }/>
                 </b>
@@ -920,2 +931,2 @@ </span>
 
-export default NumericInput
+module.exports = NumericInput;

No alert changes

Improved metrics

Total package byte prevSize

229866

increased by1.93%

Lines of code

4287

increased by1.3%

Number of lines in readme file

152

increased by0.66%

No dependency changes