react-numeric-input
Version:
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 an
991 lines (858 loc) • 37.9 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var KEYCODE_UP = 38;
var KEYCODE_DOWN = 40;
var IS_BROWSER = typeof document != 'undefined';
var RE_NUMBER = /^[+-]?((\.\d+)|(\d+(\.\d+)?))$/;
var RE_INCOMPLETE_NUMBER = /^([+-]|\.0*|[+-]\.0*|[+-]?\d+\.)?$/;
function addClass(element, className) {
if (element.classList) {
return element.classList.add(className);
}
if (!element.className.search(new RegExp("\\b" + className + "\\b"))) {
element.className = " " + className;
}
}
function removeClass(element, className) {
if (element.className) {
if (element.classList) {
return element.classList.remove(className);
}
element.className = element.className.replace(new RegExp("\\b" + className + "\\b", "g"), "");
}
}
function access(object, prop, defaultValue) {
var result = object[prop];
if (typeof result == "function") {
for (var _len = arguments.length, args = Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
args[_key - 3] = arguments[_key];
}
result = result.apply(undefined, args);
}
return result === undefined ? defaultValue : result;
}
var NumericInput = function (_Component) {
_inherits(NumericInput, _Component);
function NumericInput() {
var _ref;
_classCallCheck(this, NumericInput);
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
var _this = _possibleConstructorReturn(this, (_ref = NumericInput.__proto__ || Object.getPrototypeOf(NumericInput)).call.apply(_ref, [this].concat(args)));
_this._isStrict = !!_this.props.strict;
_this.state = _extends({
btnDownHover: false,
btnDownActive: false,
btnUpHover: false,
btnUpActive: false,
stringValue: ""
}, _this._propsToState(_this.props));
_this.stop = _this.stop.bind(_this);
_this.onTouchEnd = _this.onTouchEnd.bind(_this);
_this.refsInput = {};
_this.refsWrapper = {};
return _this;
}
_createClass(NumericInput, [{
key: '_propsToState',
value: function _propsToState(props) {
var out = {};
if (props.hasOwnProperty("value")) {
out.stringValue = String(props.value || props.value === 0 ? props.value : '').trim();
out.value = out.stringValue !== '' ? this._parse(props.value) : null;
} else if (!this._isMounted && props.hasOwnProperty("defaultValue")) {
out.stringValue = String(props.defaultValue || props.defaultValue === 0 ? props.defaultValue : '').trim();
out.value = props.defaultValue !== '' ? this._parse(props.defaultValue) : null;
}
return out;
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
var _this2 = this;
this._isStrict = !!props.strict;
var nextState = this._propsToState(props);
if (Object.keys(nextState).length) {
this._ignoreValueChange = true;
this.setState(nextState, function () {
_this2._ignoreValueChange = false;
});
}
}
}, {
key: 'componentWillUpdate',
value: function componentWillUpdate() {
this.saveSelection();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
if (!this._ignoreValueChange && prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) {
this._invokeEventCallback("onChange", this.state.value, this.refsInput.value, this.refsInput);
}
if (this._inputFocus) {
this.refsInput.focus();
if (this.state.selectionStart || this.state.selectionStart === 0) {
this.refsInput.selectionStart = this.state.selectionStart;
}
if (this.state.selectionEnd || this.state.selectionEnd === 0) {
this.refsInput.selectionEnd = this.state.selectionEnd;
}
}
this.checkValidity();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._isMounted = false;
this.stop();
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _this3 = this;
this._isMounted = true;
this.refsInput.getValueAsNumber = function () {
return _this3.state.value || 0;
};
this.refsInput.setValue = function (value) {
_this3.setState({
value: _this3._parse(value),
stringValue: value
});
};
if (!this._inputFocus && IS_BROWSER && document.activeElement === this.refsInput) {
this._inputFocus = true;
this.refsInput.focus();
this._invokeEventCallback("onFocus", {
target: this.refsInput,
type: "focus"
});
}
this.checkValidity();
}
}, {
key: 'saveSelection',
value: function saveSelection() {
this.state.selectionStart = this.refsInput.selectionStart;
this.state.selectionEnd = this.refsInput.selectionEnd;
}
}, {
key: 'checkValidity',
value: function checkValidity() {
var valid = void 0,
validationError = "";
var supportsValidation = !!this.refsInput.checkValidity;
var noValidate = !!(this.props.noValidate && this.props.noValidate != "false");
this.refsInput.noValidate = noValidate;
valid = noValidate || !supportsValidation;
if (valid) {
validationError = "";
} else {
if (this.refsInput.pattern === "") {
this.refsInput.pattern = this.props.required ? ".+" : ".*";
}
if (supportsValidation) {
this.refsInput.checkValidity();
valid = this.refsInput.validity.valid;
if (!valid) {
validationError = this.refsInput.validationMessage;
}
}
if (valid && supportsValidation && this.props.maxLength) {
if (this.refsInput.value.length > this.props.maxLength) {
validationError = "This value is too long";
}
}
}
validationError = validationError || (valid ? "" : this.refsInput.validationMessage || "Unknown Error");
var validStateChanged = this._valid !== validationError;
this._valid = validationError;
if (validationError) {
addClass(this.refsWrapper, "has-error");
if (validStateChanged) {
this._invokeEventCallback("onInvalid", validationError, this.state.value, this.refsInput.value);
}
} else {
removeClass(this.refsWrapper, "has-error");
if (validStateChanged) {
this._invokeEventCallback("onValid", this.state.value, this.refsInput.value);
}
}
}
}, {
key: '_toNumber',
value: function _toNumber(x) {
var n = parseFloat(x);
if (isNaN(n) || !isFinite(n)) {
n = 0;
}
if (this._isStrict) {
var precision = access(this.props, "precision", null, this);
var q = Math.pow(10, precision === null ? 10 : precision);
var _min = +access(this.props, "min", NumericInput.defaultProps.min, this);
var _max = +access(this.props, "max", NumericInput.defaultProps.max, this);
n = Math.min(Math.max(n, _min), _max);
n = Math.round(n * q) / q;
}
return n;
}
}, {
key: '_parse',
value: function _parse(x) {
x = String(x);
if (typeof this.props.parse == 'function') {
return parseFloat(this.props.parse(x));
}
return parseFloat(x);
}
}, {
key: '_format',
value: function _format(n) {
var _n = this._toNumber(n);
var precision = access(this.props, "precision", null, this);
if (precision !== null) {
_n = n.toFixed(precision);
}
_n += "";
if (this.props.format) {
return this.props.format(_n);
}
return _n;
}
}, {
key: '_step',
value: function _step(n, callback) {
var _isStrict = this._isStrict;
this._isStrict = true;
var _step = +access(this.props, "step", NumericInput.defaultProps.step, this, n > 0 ? NumericInput.DIRECTION_UP : NumericInput.DIRECTION_DOWN);
var _n = this._toNumber((this.state.value || 0) + _step * n);
if (this.props.snap) {
_n = Math.round(_n / _step) * _step;
}
this._isStrict = _isStrict;
if (_n !== this.state.value) {
this.setState({ value: _n, stringValue: _n + "" }, callback);
return true;
}
return false;
}
}, {
key: '_onKeyDown',
value: function _onKeyDown() {
for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
args[0].persist();
this._invokeEventCallback.apply(this, ["onKeyDown"].concat(args));
var e = args[0];
if (!e.isDefaultPrevented()) {
if (e.keyCode === KEYCODE_UP) {
e.preventDefault();
this._step(e.ctrlKey || e.metaKey ? 0.1 : e.shiftKey ? 10 : 1);
} else if (e.keyCode === KEYCODE_DOWN) {
e.preventDefault();
this._step(e.ctrlKey || e.metaKey ? -0.1 : e.shiftKey ? -10 : -1);
} else {
var _value = this.refsInput.value,
length = _value.length;
if (e.keyCode === 8) {
if (this.refsInput.selectionStart == this.refsInput.selectionEnd && this.refsInput.selectionEnd > 0 && _value.length && _value.charAt(this.refsInput.selectionEnd - 1) === ".") {
e.preventDefault();
this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd - 1;
}
} else if (e.keyCode === 46) {
if (this.refsInput.selectionStart == this.refsInput.selectionEnd && this.refsInput.selectionEnd < length + 1 && _value.length && _value.charAt(this.refsInput.selectionEnd) === ".") {
e.preventDefault();
this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd + 1;
}
}
}
}
}
}, {
key: 'stop',
value: function stop() {
if (this._timer) {
clearTimeout(this._timer);
}
}
}, {
key: 'increase',
value: function increase() {
var _this4 = this;
var _recursive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var callback = arguments[1];
this.stop();
this._step(1, callback);
var _max = +access(this.props, "max", NumericInput.defaultProps.max, this);
if (isNaN(this.state.value) || +this.state.value < _max) {
this._timer = setTimeout(function () {
_this4.increase(true);
}, _recursive ? NumericInput.SPEED : NumericInput.DELAY);
}
}
}, {
key: 'decrease',
value: function decrease() {
var _this5 = this;
var _recursive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var callback = arguments[1];
this.stop();
this._step(-1, callback);
var _min = +access(this.props, "min", NumericInput.defaultProps.min, this);
if (isNaN(this.state.value) || +this.state.value > _min) {
this._timer = setTimeout(function () {
_this5.decrease(true);
}, _recursive ? NumericInput.SPEED : NumericInput.DELAY);
}
}
}, {
key: 'onMouseDown',
value: function onMouseDown(dir, callback) {
if (dir == 'down') {
this.decrease(false, callback);
} else if (dir == 'up') {
this.increase(false, callback);
}
}
}, {
key: 'onTouchStart',
value: function onTouchStart(dir, e) {
e.preventDefault();
if (dir == 'down') {
this.decrease();
} else if (dir == 'up') {
this.increase();
}
}
}, {
key: 'onTouchEnd',
value: function onTouchEnd(e) {
e.preventDefault();
this.stop();
}
}, {
key: '_invokeEventCallback',
value: function _invokeEventCallback(callbackName) {
if (typeof this.props[callbackName] == "function") {
var _props$callbackName;
for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
args[_key4 - 1] = arguments[_key4];
}
(_props$callbackName = this.props[callbackName]).call.apply(_props$callbackName, [null].concat(args));
}
}
}, {
key: 'render',
value: function render() {
var _this6 = this;
var props = this.props;
var state = this.state;
var css = {};
var _props = this.props,
step = _props.step,
min = _props.min,
max = _props.max,
precision = _props.precision,
parse = _props.parse,
format = _props.format,
mobile = _props.mobile,
snap = _props.snap,
componentClass = _props.componentClass,
value = _props.value,
type = _props.type,
style = _props.style,
defaultValue = _props.defaultValue,
onInvalid = _props.onInvalid,
onValid = _props.onValid,
strict = _props.strict,
noStyle = _props.noStyle,
rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'componentClass', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid', 'strict', 'noStyle']);
noStyle = noStyle || style === false;
for (var x in NumericInput.style) {
css[x] = _extends({}, NumericInput.style[x], style ? style[x] || {} : {});
}
var hasFormControl = props.className && /\bform-control\b/.test(props.className);
if (mobile == 'auto') {
mobile = IS_BROWSER && 'ontouchstart' in document;
}
if (typeof mobile == "function") {
mobile = mobile.call(this);
}
mobile = !!mobile;
var attrs = {
wrap: {
style: noStyle ? null : css.wrap,
className: 'react-numeric-input',
ref: function ref(e) {
if (e != null && e != undefined) {
_this6.refsWrapper = e;
}
},
onMouseUp: undefined,
onMouseLeave: undefined
},
input: _extends({
ref: function ref(e) {
if (e != null && e != undefined) {
_this6.refsInput = e;
}
},
type: 'text',
style: noStyle ? null : _extends({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, this._inputFocus ? css['input:focus'] : {})
}, rest),
btnUp: {
onMouseEnter: undefined,
onMouseDown: undefined,
onMouseUp: undefined,
onMouseLeave: undefined,
onTouchStart: undefined,
onTouchEnd: undefined,
style: noStyle ? null : _extends({}, css.btn, css.btnUp, props.disabled || props.readOnly ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
},
btnDown: {
onMouseEnter: undefined,
onMouseDown: undefined,
onMouseUp: undefined,
onMouseLeave: undefined,
onTouchStart: undefined,
onTouchEnd: undefined,
style: noStyle ? null : _extends({}, css.btn, css.btnDown, props.disabled || props.readOnly ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
}
};
var stringValue = String(state.stringValue || (state.value || state.value === 0 ? state.value : "") || "");
var loose = !this._isStrict && (this._inputFocus || !this._isMounted);
if (loose && RE_INCOMPLETE_NUMBER.test(stringValue)) {
attrs.input.value = stringValue;
} else if (loose && stringValue && !RE_NUMBER.test(stringValue)) {
attrs.input.value = stringValue;
} else if (state.value || state.value === 0) {
attrs.input.value = this._format(state.value);
} else {
attrs.input.value = "";
}
if (hasFormControl && !noStyle) {
_extends(attrs.wrap.style, css['wrap.hasFormControl']);
}
if (mobile && !noStyle) {
_extends(attrs.input.style, css['input.mobile']);
_extends(attrs.btnUp.style, css['btnUp.mobile']);
_extends(attrs.btnDown.style, css['btnDown.mobile']);
}
if (!props.disabled && !props.readOnly) {
_extends(attrs.wrap, {
onMouseUp: this.stop,
onMouseLeave: this.stop
});
_extends(attrs.btnUp, {
onTouchStart: this.onTouchStart.bind(this, 'up'),
onTouchEnd: this.onTouchEnd,
onMouseEnter: function onMouseEnter() {
_this6.setState({
btnUpHover: true
});
},
onMouseLeave: function onMouseLeave() {
_this6.stop();
_this6.setState({
btnUpHover: false,
btnUpActive: false
});
},
onMouseUp: function onMouseUp() {
_this6.setState({
btnUpHover: true,
btnUpActive: false
});
},
onMouseDown: function onMouseDown() {
for (var _len5 = arguments.length, args = Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
args[_key5] = arguments[_key5];
}
args[0].preventDefault();
args[0].persist();
_this6._inputFocus = true;
_this6.setState({
btnUpHover: true,
btnUpActive: true
}, function () {
_this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
_this6.onMouseDown('up');
});
}
});
_extends(attrs.btnDown, {
onTouchStart: this.onTouchStart.bind(this, 'down'),
onTouchEnd: this.onTouchEnd,
onMouseEnter: function onMouseEnter() {
_this6.setState({
btnDownHover: true
});
},
onMouseLeave: function onMouseLeave() {
_this6.stop();
_this6.setState({
btnDownHover: false,
btnDownActive: false
});
},
onMouseUp: function onMouseUp() {
_this6.setState({
btnDownHover: true,
btnDownActive: false
});
},
onMouseDown: function onMouseDown() {
for (var _len6 = arguments.length, args = Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
args[_key6] = arguments[_key6];
}
args[0].preventDefault();
args[0].persist();
_this6._inputFocus = true;
_this6.setState({
btnDownHover: true,
btnDownActive: true
}, function () {
_this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
_this6.onMouseDown('down');
});
}
});
_extends(attrs.input, {
onChange: function onChange(e) {
var original = e.target.value;
var val = _this6._parse(original);
if (isNaN(val)) {
val = null;
}
_this6.setState({
value: _this6._isStrict ? _this6._toNumber(val) : val,
stringValue: original
});
},
onKeyDown: this._onKeyDown.bind(this),
onInput: function onInput() {
for (var _len7 = arguments.length, args = Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
args[_key7] = arguments[_key7];
}
_this6.saveSelection();
_this6._invokeEventCallback.apply(_this6, ["onInput"].concat(args));
},
onSelect: function onSelect() {
for (var _len8 = arguments.length, args = Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
args[_key8] = arguments[_key8];
}
_this6.saveSelection();
_this6._invokeEventCallback.apply(_this6, ["onSelect"].concat(args));
},
onFocus: function onFocus() {
for (var _len9 = arguments.length, args = Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
args[_key9] = arguments[_key9];
}
args[0].persist();
_this6._inputFocus = true;
var val = _this6._parse(args[0].target.value);
_this6.setState({
value: val,
stringValue: val || val === 0 ? val + "" : ""
}, function () {
_this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
});
},
onBlur: function onBlur() {
for (var _len10 = arguments.length, args = Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
args[_key10] = arguments[_key10];
}
var _isStrict = _this6._isStrict;
_this6._isStrict = true;
args[0].persist();
_this6._inputFocus = false;
var val = _this6._parse(args[0].target.value);
_this6.setState({
value: val
}, function () {
_this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
_this6._isStrict = _isStrict;
});
}
});
} else {
if (!noStyle && props.disabled) {
_extends(attrs.input.style, css['input:disabled']);
}
}
var InputTag = componentClass || 'input';
if (mobile) {
return _react2.default.createElement(
'span',
attrs.wrap,
_react2.default.createElement(InputTag, attrs.input),
_react2.default.createElement(
'b',
attrs.btnUp,
_react2.default.createElement('i', { style: noStyle ? null : css.minus }),
_react2.default.createElement('i', { style: noStyle ? null : css.plus })
),
_react2.default.createElement(
'b',
attrs.btnDown,
_react2.default.createElement('i', { style: noStyle ? null : css.minus })
)
);
}
return _react2.default.createElement(
'span',
attrs.wrap,
_react2.default.createElement(InputTag, attrs.input),
_react2.default.createElement(
'b',
attrs.btnUp,
_react2.default.createElement('i', { style: noStyle ? null : css.arrowUp })
),
_react2.default.createElement(
'b',
attrs.btnDown,
_react2.default.createElement('i', { style: noStyle ? null : css.arrowDown })
)
);
}
}]);
return NumericInput;
}(_react.Component);
NumericInput.propTypes = {
step: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.func]),
min: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.func]),
max: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.func]),
precision: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.func]),
maxLength: _propTypes2.default.number,
parse: _propTypes2.default.func,
format: _propTypes2.default.func,
className: _propTypes2.default.string,
disabled: _propTypes2.default.bool,
readOnly: _propTypes2.default.bool,
required: _propTypes2.default.bool,
snap: _propTypes2.default.bool,
noValidate: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
noStyle: _propTypes2.default.bool,
type: _propTypes2.default.string,
pattern: _propTypes2.default.string,
onFocus: _propTypes2.default.func,
onBlur: _propTypes2.default.func,
onKeyDown: _propTypes2.default.func,
onChange: _propTypes2.default.func,
onInvalid: _propTypes2.default.func,
onValid: _propTypes2.default.func,
onInput: _propTypes2.default.func,
onSelect: _propTypes2.default.func,
size: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
strict: _propTypes2.default.bool,
componentClass: _propTypes2.default.string,
mobile: function mobile(props, propName) {
var prop = props[propName];
if (prop !== true && prop !== false && prop !== 'auto' && typeof prop != 'function') {
return new Error('The "mobile" prop must be true, false, "auto" or a function');
}
}
};
NumericInput.defaultProps = {
step: 1,
min: Number.MIN_SAFE_INTEGER || -9007199254740991,
max: Number.MAX_SAFE_INTEGER || 9007199254740991,
precision: null,
parse: null,
format: null,
mobile: 'auto',
strict: false,
componentClass: "input",
style: {}
};
NumericInput.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: 0.5,
boxShadow: 'none',
cursor: 'not-allowed'
},
input: {
paddingRight: '3ex',
boxSizing: 'border-box',
fontSize: 'inherit'
},
'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)'
}
};
NumericInput.SPEED = 50;
NumericInput.DELAY = 500;
NumericInput.DIRECTION_UP = "up";
NumericInput.DIRECTION_DOWN = "down";
module.exports = NumericInput;
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("react");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("prop-types");
/***/ })
/******/ ]);