You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
214 lines
8.9 KiB
214 lines
8.9 KiB
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
|
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
|
|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
|
|
var _createClass2 = require('babel-runtime/helpers/createClass');
|
|
|
|
var _createClass3 = _interopRequireDefault(_createClass2);
|
|
|
|
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
|
|
|
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
|
|
|
var _inherits2 = require('babel-runtime/helpers/inherits');
|
|
|
|
var _inherits3 = _interopRequireDefault(_inherits2);
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _classnames = require('classnames');
|
|
|
|
var _classnames2 = _interopRequireDefault(_classnames);
|
|
|
|
var _base = require('./base');
|
|
|
|
var _base2 = _interopRequireDefault(_base);
|
|
|
|
var _InputHandler = require('./InputHandler');
|
|
|
|
var _InputHandler2 = _interopRequireDefault(_InputHandler);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function noop() {}
|
|
function preventDefault(e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
var InputNumber = function (_BaseComponent) {
|
|
(0, _inherits3['default'])(InputNumber, _BaseComponent);
|
|
|
|
function InputNumber() {
|
|
(0, _classCallCheck3['default'])(this, InputNumber);
|
|
|
|
var _this = (0, _possibleConstructorReturn3['default'])(this, (InputNumber.__proto__ || Object.getPrototypeOf(InputNumber)).apply(this, arguments));
|
|
|
|
_this.setInput = function (input) {
|
|
_this.input = input;
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
(0, _createClass3['default'])(InputNumber, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this.componentDidUpdate();
|
|
}
|
|
}, {
|
|
key: 'componentWillUpdate',
|
|
value: function componentWillUpdate() {
|
|
try {
|
|
this.start = this.input.selectionStart;
|
|
this.end = this.input.selectionEnd;
|
|
} catch (e) {
|
|
// Fix error in Chrome:
|
|
// Failed to read the 'selectionStart' property from 'HTMLInputElement'
|
|
// http://stackoverflow.com/q/21177489/3040605
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate() {
|
|
if (this.props.focusOnUpDown && this.state.focused) {
|
|
var selectionRange = this.input.setSelectionRange;
|
|
if (selectionRange && typeof selectionRange === 'function' && this.start !== undefined && this.end !== undefined && this.start !== this.end) {
|
|
this.input.setSelectionRange(this.start, this.end);
|
|
} else {
|
|
this.focus();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getRatio',
|
|
value: function getRatio(e) {
|
|
var ratio = 1;
|
|
if (e.metaKey || e.ctrlKey) {
|
|
ratio = 0.1;
|
|
} else if (e.shiftKey) {
|
|
ratio = 10;
|
|
}
|
|
return ratio;
|
|
}
|
|
}, {
|
|
key: 'getValueFromEvent',
|
|
value: function getValueFromEvent(e) {
|
|
return e.target.value;
|
|
}
|
|
}, {
|
|
key: 'focus',
|
|
value: function focus() {
|
|
this.input.focus();
|
|
}
|
|
}, {
|
|
key: 'formatWrapper',
|
|
value: function formatWrapper(num) {
|
|
if (this.props.formatter) {
|
|
return this.props.formatter(num);
|
|
}
|
|
return num;
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _classNames;
|
|
|
|
var props = (0, _extends3['default'])({}, this.props);
|
|
var _props$prefixCls = props.prefixCls,
|
|
prefixCls = _props$prefixCls === undefined ? '' : _props$prefixCls,
|
|
disabled = props.disabled,
|
|
readOnly = props.readOnly,
|
|
max = props.max,
|
|
min = props.min;
|
|
|
|
var classes = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls, true), (0, _defineProperty3['default'])(_classNames, props.className, !!props.className), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, prefixCls + '-focused', this.state.focused), _classNames));
|
|
var upDisabledClass = '';
|
|
var downDisabledClass = '';
|
|
var value = this.state.value;
|
|
|
|
if (value || value === 0) {
|
|
if (!isNaN(value)) {
|
|
var val = Number(value);
|
|
if (val >= max) {
|
|
upDisabledClass = prefixCls + '-handler-up-disabled';
|
|
}
|
|
if (val <= min) {
|
|
downDisabledClass = prefixCls + '-handler-down-disabled';
|
|
}
|
|
} else {
|
|
upDisabledClass = prefixCls + '-handler-up-disabled';
|
|
downDisabledClass = prefixCls + '-handler-down-disabled';
|
|
}
|
|
}
|
|
var editable = !props.readOnly && !props.disabled;
|
|
// focus state, show input value
|
|
// unfocus state, show valid value
|
|
var inputDisplayValue = void 0;
|
|
if (this.state.focused) {
|
|
inputDisplayValue = this.state.inputValue;
|
|
} else {
|
|
inputDisplayValue = this.toPrecisionAsStep(this.state.value);
|
|
}
|
|
if (inputDisplayValue === undefined || inputDisplayValue === null) {
|
|
inputDisplayValue = '';
|
|
}
|
|
var upEvents = void 0;
|
|
var downEvents = void 0;
|
|
upEvents = {
|
|
onTouchStart: editable && !upDisabledClass ? this.up : noop,
|
|
onTouchEnd: this.stop
|
|
};
|
|
downEvents = {
|
|
onTouchStart: editable && !downDisabledClass ? this.down : noop,
|
|
onTouchEnd: this.stop
|
|
};
|
|
var inputDisplayValueFormat = this.formatWrapper(inputDisplayValue);
|
|
var isUpDisabled = !!upDisabledClass || disabled || readOnly;
|
|
var isDownDisabled = !!downDisabledClass || disabled || readOnly;
|
|
return _react2['default'].createElement(
|
|
'div',
|
|
{ className: classes, style: props.style },
|
|
_react2['default'].createElement(
|
|
'div',
|
|
{ className: prefixCls + '-handler-wrap' },
|
|
_react2['default'].createElement(
|
|
_InputHandler2['default'],
|
|
(0, _extends3['default'])({ disabled: isUpDisabled, prefixCls: prefixCls, unselectable: 'unselectable' }, upEvents, { role: 'button', 'aria-label': 'Increase Value', 'aria-disabled': !!isUpDisabled, className: prefixCls + '-handler ' + prefixCls + '-handler-up ' + upDisabledClass }),
|
|
this.props.upHandler || _react2['default'].createElement('span', { unselectable: 'unselectable', className: prefixCls + '-handler-up-inner', onClick: preventDefault })
|
|
),
|
|
_react2['default'].createElement(
|
|
_InputHandler2['default'],
|
|
(0, _extends3['default'])({ disabled: isDownDisabled, prefixCls: prefixCls, unselectable: 'unselectable' }, downEvents, { role: 'button', 'aria-label': 'Decrease Value', 'aria-disabled': !!isDownDisabled, className: prefixCls + '-handler ' + prefixCls + '-handler-down ' + downDisabledClass }),
|
|
this.props.downHandler || _react2['default'].createElement('span', { unselectable: 'unselectable', className: prefixCls + '-handler-down-inner', onClick: preventDefault })
|
|
)
|
|
),
|
|
_react2['default'].createElement(
|
|
'div',
|
|
{ className: prefixCls + '-input-wrap', role: 'spinbutton', 'aria-valuemin': props.min, 'aria-valuemax': props.max, 'aria-valuenow': value },
|
|
_react2['default'].createElement('input', { className: prefixCls + '-input', tabIndex: props.tabIndex, autoComplete: 'off', onFocus: this.onFocus, onBlur: this.onBlur, autoFocus: props.autoFocus, readOnly: props.readOnly, disabled: props.disabled, max: props.max, min: props.min, step: props.step, onChange: this.onChange, ref: this.setInput, value: inputDisplayValueFormat })
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return InputNumber;
|
|
}(_base2['default']);
|
|
|
|
exports['default'] = InputNumber;
|
|
|
|
InputNumber.defaultProps = (0, _extends3['default'])({}, _base2['default'].defaultProps, { focusOnUpDown: false, useTouch: false, prefixCls: 'rmc-input-number' });
|
|
module.exports = exports['default']; |