UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

862 lines (773 loc) 28.5 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _vueTypes = require('../../_util/vue-types'); var _vueTypes2 = _interopRequireDefault(_vueTypes); var _BaseMixin = require('../../_util/BaseMixin'); var _BaseMixin2 = _interopRequireDefault(_BaseMixin); var _propsUtil = require('../../_util/props-util'); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _KeyCode = require('../../_util/KeyCode'); var _KeyCode2 = _interopRequireDefault(_KeyCode); var _InputHandler = require('./InputHandler'); var _InputHandler2 = _interopRequireDefault(_InputHandler); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } // based on rc-input-number 4.5.5 function noop() {} function preventDefault(e) { e.preventDefault(); } function defaultParser(input) { return input.replace(/[^\w\.-]+/g, ''); } /** * When click and hold on a button - the speed of auto changin the value. */ var SPEED = 200; /** * When click and hold on a button - the delay before auto changin the value. */ var DELAY = 600; /** * Max Safe Integer -- on IE this is not available, so manually set the number in that case. * The reason this is used, instead of Infinity is because numbers above the MSI are unstable */ var MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1; var isValidProps = function isValidProps(value) { return value !== undefined && value !== null; }; var isEqual = function isEqual(oldValue, newValue) { return newValue === oldValue || typeof newValue === 'number' && typeof oldValue === 'number' && isNaN(newValue) && isNaN(oldValue); }; var inputNumberProps = { value: _vueTypes2['default'].oneOfType([_vueTypes2['default'].number, _vueTypes2['default'].string]), defaultValue: _vueTypes2['default'].oneOfType([_vueTypes2['default'].number, _vueTypes2['default'].string]), focusOnUpDown: _vueTypes2['default'].bool, autoFocus: _vueTypes2['default'].bool, // onChange: PropTypes.func, // onKeyDown: PropTypes.func, // onKeyUp: PropTypes.func, prefixCls: _vueTypes2['default'].string, tabIndex: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]), placeholder: _vueTypes2['default'].string, disabled: _vueTypes2['default'].bool, // onFocus: PropTypes.func, // onBlur: PropTypes.func, readOnly: _vueTypes2['default'].bool, max: _vueTypes2['default'].number, min: _vueTypes2['default'].number, step: _vueTypes2['default'].oneOfType([_vueTypes2['default'].number, _vueTypes2['default'].string]), upHandler: _vueTypes2['default'].any, downHandler: _vueTypes2['default'].any, useTouch: _vueTypes2['default'].bool, formatter: _vueTypes2['default'].func, parser: _vueTypes2['default'].func, // onMouseEnter: PropTypes.func, // onMouseLeave: PropTypes.func, // onMouseOver: PropTypes.func, // onMouseOut: PropTypes.func, precision: _vueTypes2['default'].number, required: _vueTypes2['default'].bool, pattern: _vueTypes2['default'].string, decimalSeparator: _vueTypes2['default'].string, autoComplete: _vueTypes2['default'].string, title: _vueTypes2['default'].string, name: _vueTypes2['default'].string, id: _vueTypes2['default'].string }; exports['default'] = { name: 'VCInputNumber', mixins: [_BaseMixin2['default']], model: { prop: 'value', event: 'change' }, props: (0, _propsUtil.initDefaultProps)(inputNumberProps, { focusOnUpDown: true, useTouch: false, prefixCls: 'rc-input-number', min: -MAX_SAFE_INTEGER, step: 1, parser: defaultParser, required: false, autoComplete: 'off' }), data: function data() { var props = (0, _propsUtil.getOptionProps)(this); this.prevProps = (0, _extends3['default'])({}, props); var value = void 0; if ('value' in props) { value = this.value; } else { value = this.defaultValue; } var validValue = this.getValidValue(this.toNumber(value)); return { inputValue: this.toPrecisionAsStep(validValue), sValue: validValue, focused: this.autoFocus }; }, mounted: function mounted() { var _this = this; this.$nextTick(function () { if (_this.autoFocus && !_this.disabled) { _this.focus(); } _this.updatedFunc(); }); }, updated: function updated() { var _this2 = this; var _$props = this.$props, value = _$props.value, max = _$props.max, min = _$props.min; var focused = this.$data.focused; var prevProps = this.prevProps; var props = (0, _propsUtil.getOptionProps)(this); // Don't trigger in componentDidMount if (prevProps) { if (!isEqual(prevProps.value, value) || !isEqual(prevProps.max, max) || !isEqual(prevProps.min, min)) { var validValue = focused ? value : this.getValidValue(value); var nextInputValue = void 0; if (this.pressingUpOrDown) { nextInputValue = validValue; } else if (this.inputting) { nextInputValue = this.rawInput; } else { nextInputValue = this.toPrecisionAsStep(validValue); } this.setState({ // eslint-disable-line sValue: validValue, inputValue: nextInputValue }); } // Trigger onChange when max or min change // https://github.com/ant-design/ant-design/issues/11574 var nextValue = 'value' in props ? value : this.sValue; // ref: null < 20 === true // https://github.com/ant-design/ant-design/issues/14277 if ('max' in props && prevProps.max !== max && typeof nextValue === 'number' && nextValue > max) { this.$emit('change', max); } if ('min' in props && prevProps.min !== min && typeof nextValue === 'number' && nextValue < min) { this.$emit('change', min); } } this.prevProps = (0, _extends3['default'])({}, props); this.$nextTick(function () { _this2.updatedFunc(); }); }, beforeDestroy: function beforeDestroy() { this.stop(); }, methods: { updatedFunc: function updatedFunc() { var inputElem = this.$refs.inputRef; // Restore cursor try { // Firefox set the input cursor after it get focused. // This caused that if an input didn't init with the selection, // set will cause cursor not correct when first focus. // Safari will focus input if set selection. We need skip this. if (this.cursorStart !== undefined && this.focused) { // In most cases, the string after cursor is stable. // We can move the cursor before it if ( // If not match full str, try to match part of str !this.partRestoreByAfter(this.cursorAfter) && this.sValue !== this.value) { // If not match any of then, let's just keep the position // TODO: Logic should not reach here, need check if happens var pos = this.cursorStart + 1; // If not have last string, just position to the end if (!this.cursorAfter) { pos = inputElem.value.length; } else if (this.lastKeyCode === _KeyCode2['default'].BACKSPACE) { pos = this.cursorStart - 1; } else if (this.lastKeyCode === _KeyCode2['default'].DELETE) { pos = this.cursorStart; } this.fixCaret(pos, pos); } else if (this.currentValue === inputElem.value) { // Handle some special key code switch (this.lastKeyCode) { case _KeyCode2['default'].BACKSPACE: this.fixCaret(this.cursorStart - 1, this.cursorStart - 1); break; case _KeyCode2['default'].DELETE: this.fixCaret(this.cursorStart + 1, this.cursorStart + 1); break; default: // Do nothing } } } } catch (e) {} // Do nothing // Reset last key this.lastKeyCode = null; // pressingUpOrDown is true means that someone just click up or down button if (!this.pressingUpOrDown) { return; } if (this.focusOnUpDown && this.focused) { if (document.activeElement !== inputElem) { this.focus(); } } this.pressingUpOrDown = false; }, onKeyDown: function onKeyDown(e) { if (e.keyCode === _KeyCode2['default'].UP) { var ratio = this.getRatio(e); this.up(e, ratio); this.stop(); } else if (e.keyCode === _KeyCode2['default'].DOWN) { var _ratio = this.getRatio(e); this.down(e, _ratio); this.stop(); } else if (e.keyCode === _KeyCode2['default'].ENTER) { this.$emit('pressEnter', e); } // Trigger user key down this.recordCursorPosition(); this.lastKeyCode = e.keyCode; for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { args[_key - 1] = arguments[_key]; } this.$emit.apply(this, ['keydown', e].concat((0, _toConsumableArray3['default'])(args))); }, onKeyUp: function onKeyUp(e) { this.stop(); this.recordCursorPosition(); for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { args[_key2 - 1] = arguments[_key2]; } this.$emit.apply(this, ['keyup', e].concat((0, _toConsumableArray3['default'])(args))); }, onChange: function onChange(e) { if (this.focused) { this.inputting = true; } this.rawInput = this.parser(this.getValueFromEvent(e)); this.setState({ inputValue: this.rawInput }); this.$emit('change', this.toNumber(this.rawInput)); // valid number or invalid string }, onFocus: function onFocus() { this.setState({ focused: true }); for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { args[_key3] = arguments[_key3]; } this.$emit.apply(this, ['focus'].concat((0, _toConsumableArray3['default'])(args))); }, onBlur: function onBlur() { this.inputting = false; this.setState({ focused: false }); var value = this.getCurrentValidValue(this.inputValue); var newValue = this.setValue(value); if (this.$listeners.blur) { var originValue = this.$refs.inputRef.value; var inputValue = this.getInputDisplayValue({ focused: false, sValue: newValue }); this.$refs.inputRef.value = inputValue; for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { args[_key4] = arguments[_key4]; } this.$emit.apply(this, ['blur'].concat((0, _toConsumableArray3['default'])(args))); this.$refs.inputRef.value = originValue; } }, getCurrentValidValue: function getCurrentValidValue(value) { var val = value; if (val === '') { val = ''; } else if (!this.isNotCompleteNumber(parseFloat(val, 10))) { val = this.getValidValue(val); } else { val = this.sValue; } return this.toNumber(val); }, getRatio: function getRatio(e) { var ratio = 1; if (e.metaKey || e.ctrlKey) { ratio = 0.1; } else if (e.shiftKey) { ratio = 10; } return ratio; }, getValueFromEvent: function getValueFromEvent(e) { // optimize for chinese input expierence // https://github.com/ant-design/ant-design/issues/8196 var value = e.target.value.trim().replace(/。/g, '.'); if (isValidProps(this.decimalSeparator)) { value = value.replace(this.decimalSeparator, '.'); } return value; }, getValidValue: function getValidValue(value) { var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.min; var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.max; var val = parseFloat(value, 10); // https://github.com/ant-design/ant-design/issues/7358 if (isNaN(val)) { return value; } if (val < min) { val = min; } if (val > max) { val = max; } return val; }, setValue: function setValue(v, callback) { // trigger onChange var precision = this.$props.precision; var newValue = this.isNotCompleteNumber(parseFloat(v, 10)) ? null : parseFloat(v, 10); var _$data = this.$data, _$data$sValue = _$data.sValue, value = _$data$sValue === undefined ? null : _$data$sValue, _$data$inputValue = _$data.inputValue, inputValue = _$data$inputValue === undefined ? null : _$data$inputValue; // https://github.com/ant-design/ant-design/issues/7363 // https://github.com/ant-design/ant-design/issues/16622 var newValueInString = typeof newValue === 'number' ? newValue.toFixed(precision) : '' + newValue; var changed = newValue !== value || newValueInString !== '' + inputValue; if (!(0, _propsUtil.hasProp)(this, 'value')) { this.setState({ sValue: newValue, inputValue: this.toPrecisionAsStep(v) }, callback); } else { // always set input value same as value this.setState({ inputValue: this.toPrecisionAsStep(this.sValue) }, callback); } if (changed) { this.$emit('change', newValue); } return newValue; }, getPrecision: function getPrecision(value) { if (isValidProps(this.precision)) { return this.precision; } var valueString = value.toString(); if (valueString.indexOf('e-') >= 0) { return parseInt(valueString.slice(valueString.indexOf('e-') + 2), 10); } var precision = 0; if (valueString.indexOf('.') >= 0) { precision = valueString.length - valueString.indexOf('.') - 1; } return precision; }, // step={1.0} value={1.51} // press + // then value should be 2.51, rather than 2.5 // if this.$props.precision is undefined // https://github.com/react-component/input-number/issues/39 getMaxPrecision: function getMaxPrecision(currentValue) { var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; if (isValidProps(this.precision)) { return this.precision; } var step = this.step; var ratioPrecision = this.getPrecision(ratio); var stepPrecision = this.getPrecision(step); var currentValuePrecision = this.getPrecision(currentValue); if (!currentValue) { return ratioPrecision + stepPrecision; } return Math.max(currentValuePrecision, ratioPrecision + stepPrecision); }, getPrecisionFactor: function getPrecisionFactor(currentValue) { var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; var precision = this.getMaxPrecision(currentValue, ratio); return Math.pow(10, precision); }, getInputDisplayValue: function getInputDisplayValue(state) { var _ref = state || this.$data, focused = _ref.focused, inputValue = _ref.inputValue, sValue = _ref.sValue; var inputDisplayValue = void 0; if (focused) { inputDisplayValue = inputValue; } else { inputDisplayValue = this.toPrecisionAsStep(sValue); } if (inputDisplayValue === undefined || inputDisplayValue === null) { inputDisplayValue = ''; } var inputDisplayValueFormat = this.formatWrapper(inputDisplayValue); if (isValidProps(this.$props.decimalSeparator)) { inputDisplayValueFormat = inputDisplayValueFormat.toString().replace('.', this.$props.decimalSeparator); } return inputDisplayValueFormat; }, recordCursorPosition: function recordCursorPosition() { // Record position try { var inputElem = this.$refs.inputRef; this.cursorStart = inputElem.selectionStart; this.cursorEnd = inputElem.selectionEnd; this.currentValue = inputElem.value; this.cursorBefore = inputElem.value.substring(0, this.cursorStart); this.cursorAfter = inputElem.value.substring(this.cursorEnd); } catch (e) { // Fix error in Chrome: // Failed to read the 'selectionStart' property from 'HTMLInputElement' // http://stackoverflow.com/q/21177489/3040605 } }, fixCaret: function fixCaret(start, end) { if (start === undefined || end === undefined || !this.$refs.inputRef || !this.$refs.inputRef.value) { return; } try { var inputElem = this.$refs.inputRef; var currentStart = inputElem.selectionStart; var currentEnd = inputElem.selectionEnd; if (start !== currentStart || end !== currentEnd) { inputElem.setSelectionRange(start, end); } } catch (e) { // Fix error in Chrome: // Failed to read the 'selectionStart' property from 'HTMLInputElement' // http://stackoverflow.com/q/21177489/3040605 } }, restoreByAfter: function restoreByAfter(str) { if (str === undefined) return false; var fullStr = this.$refs.inputRef.value; var index = fullStr.lastIndexOf(str); if (index === -1) return false; var prevCursorPos = this.cursorBefore.length; if (this.lastKeyCode === _KeyCode2['default'].DELETE && this.cursorBefore.charAt(prevCursorPos - 1) === str[0]) { this.fixCaret(prevCursorPos, prevCursorPos); return true; } if (index + str.length === fullStr.length) { this.fixCaret(index, index); return true; } return false; }, partRestoreByAfter: function partRestoreByAfter(str) { var _this3 = this; if (str === undefined) return false; // For loop from full str to the str with last char to map. e.g. 123 // -> 123 // -> 23 // -> 3 return Array.prototype.some.call(str, function (_, start) { var partStr = str.substring(start); return _this3.restoreByAfter(partStr); }); }, focus: function focus() { this.$refs.inputRef.focus(); this.recordCursorPosition(); }, blur: function blur() { this.$refs.inputRef.blur(); }, formatWrapper: function formatWrapper(num) { // http://2ality.com/2012/03/signedzero.html // https://github.com/ant-design/ant-design/issues/9439 if (this.formatter) { return this.formatter(num); } return num; }, toPrecisionAsStep: function toPrecisionAsStep(num) { if (this.isNotCompleteNumber(num) || num === '') { return num; } var precision = Math.abs(this.getMaxPrecision(num)); if (!isNaN(precision)) { return Number(num).toFixed(precision); } return num.toString(); }, // '1.' '1x' 'xx' '' => are not complete numbers isNotCompleteNumber: function isNotCompleteNumber(num) { return isNaN(num) || num === '' || num === null || num && num.toString().indexOf('.') === num.toString().length - 1; }, toNumber: function toNumber(num) { var _$props2 = this.$props, precision = _$props2.precision, autoFocus = _$props2.autoFocus; var _focused = this.focused, focused = _focused === undefined ? autoFocus : _focused; // num.length > 16 => This is to prevent input of large numbers var numberIsTooLarge = num && num.length > 16 && focused; if (this.isNotCompleteNumber(num) || numberIsTooLarge) { return num; } if (isValidProps(precision)) { return Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision); } return Number(num); }, upStep: function upStep(val, rat) { var step = this.step; var precisionFactor = this.getPrecisionFactor(val, rat); var precision = Math.abs(this.getMaxPrecision(val, rat)); var result = ((precisionFactor * val + precisionFactor * step * rat) / precisionFactor).toFixed(precision); return this.toNumber(result); }, downStep: function downStep(val, rat) { var step = this.step; var precisionFactor = this.getPrecisionFactor(val, rat); var precision = Math.abs(this.getMaxPrecision(val, rat)); var result = ((precisionFactor * val - precisionFactor * step * rat) / precisionFactor).toFixed(precision); return this.toNumber(result); }, stepFn: function stepFn(type, e) { var _this4 = this; var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; var recursive = arguments[3]; this.stop(); if (e) { // e.persist() e.preventDefault(); } if (this.disabled) { return; } var max = this.max, min = this.min; var value = this.getCurrentValidValue(this.inputValue) || 0; if (this.isNotCompleteNumber(value)) { return; } var val = this[type + 'Step'](value, ratio); var outOfRange = val > max || val < min; if (val > max) { val = max; } else if (val < min) { val = min; } this.setValue(val); this.setState({ focused: true }); if (outOfRange) { return; } this.autoStepTimer = setTimeout(function () { _this4[type](e, ratio, true); }, recursive ? SPEED : DELAY); }, stop: function stop() { if (this.autoStepTimer) { clearTimeout(this.autoStepTimer); } }, down: function down(e, ratio, recursive) { this.pressingUpOrDown = true; this.stepFn('down', e, ratio, recursive); }, up: function up(e, ratio, recursive) { this.pressingUpOrDown = true; this.stepFn('up', e, ratio, recursive); }, handleInputClick: function handleInputClick() { this.$emit('click'); } }, render: function render() { var _classNames; var h = arguments[0]; var _$props3 = this.$props, prefixCls = _$props3.prefixCls, disabled = _$props3.disabled, readOnly = _$props3.readOnly, useTouch = _$props3.useTouch, autoComplete = _$props3.autoComplete, upHandler = _$props3.upHandler, downHandler = _$props3.downHandler; var classes = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls, true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, prefixCls + '-focused', this.focused), _classNames)); var upDisabledClass = ''; var downDisabledClass = ''; var sValue = this.sValue; if (sValue || sValue === 0) { if (!isNaN(sValue)) { var val = Number(sValue); if (val >= this.max) { upDisabledClass = prefixCls + '-handler-up-disabled'; } if (val <= this.min) { downDisabledClass = prefixCls + '-handler-down-disabled'; } } else { upDisabledClass = prefixCls + '-handler-up-disabled'; downDisabledClass = prefixCls + '-handler-down-disabled'; } } var editable = !this.readOnly && !this.disabled; // focus state, show input value // unfocus state, show valid value var inputDisplayValue = this.getInputDisplayValue(); var upEvents = void 0; var downEvents = void 0; if (useTouch) { upEvents = { touchstart: editable && !upDisabledClass ? this.up : noop, touchend: this.stop }; downEvents = { touchstart: editable && !downDisabledClass ? this.down : noop, touchend: this.stop }; } else { upEvents = { mousedown: editable && !upDisabledClass ? this.up : noop, mouseup: this.stop, mouseleave: this.stop }; downEvents = { mousedown: editable && !downDisabledClass ? this.down : noop, mouseup: this.stop, mouseleave: this.stop }; } var isUpDisabled = !!upDisabledClass || disabled || readOnly; var isDownDisabled = !!downDisabledClass || disabled || readOnly; var _getListeners = (0, _propsUtil.getListeners)(this), _getListeners$mouseen = _getListeners.mouseenter, mouseenter = _getListeners$mouseen === undefined ? noop : _getListeners$mouseen, _getListeners$mousele = _getListeners.mouseleave, mouseleave = _getListeners$mousele === undefined ? noop : _getListeners$mousele, _getListeners$mouseov = _getListeners.mouseover, mouseover = _getListeners$mouseov === undefined ? noop : _getListeners$mouseov, _getListeners$mouseou = _getListeners.mouseout, mouseout = _getListeners$mouseou === undefined ? noop : _getListeners$mouseou; var contentProps = { on: { mouseenter: mouseenter, mouseleave: mouseleave, mouseover: mouseover, mouseout: mouseout }, 'class': classes, attrs: { title: this.$props.title } }; var upHandlerProps = { props: { disabled: isUpDisabled, prefixCls: prefixCls }, attrs: { unselectable: 'unselectable', role: 'button', 'aria-label': 'Increase Value', 'aria-disabled': !!isUpDisabled }, 'class': prefixCls + '-handler ' + prefixCls + '-handler-up ' + upDisabledClass, on: upEvents, ref: 'up' }; var downHandlerProps = { props: { disabled: isDownDisabled, prefixCls: prefixCls }, attrs: { unselectable: 'unselectable', role: 'button', 'aria-label': 'Decrease Value', 'aria-disabled': !!isDownDisabled }, 'class': prefixCls + '-handler ' + prefixCls + '-handler-down ' + downDisabledClass, on: downEvents, ref: 'down' }; // ref for test return h( 'div', contentProps, [h( 'div', { 'class': prefixCls + '-handler-wrap' }, [h( _InputHandler2['default'], upHandlerProps, [upHandler || h('span', { attrs: { unselectable: 'unselectable' }, 'class': prefixCls + '-handler-up-inner', on: { 'click': preventDefault } })] ), h( _InputHandler2['default'], downHandlerProps, [downHandler || h('span', { attrs: { unselectable: 'unselectable' }, 'class': prefixCls + '-handler-down-inner', on: { 'click': preventDefault } })] )] ), h( 'div', { 'class': prefixCls + '-input-wrap' }, [h('input', { attrs: { role: 'spinbutton', 'aria-valuemin': this.min, 'aria-valuemax': this.max, 'aria-valuenow': sValue, required: this.required, type: this.type, placeholder: this.placeholder, tabIndex: this.tabIndex, autoComplete: autoComplete, readOnly: this.readOnly, disabled: this.disabled, max: this.max, min: this.min, step: this.step, name: this.name, title: this.title, id: this.id, pattern: this.pattern }, on: { 'click': this.handleInputClick, 'focus': this.onFocus, 'blur': this.onBlur, 'keydown': editable ? this.onKeyDown : noop, 'keyup': editable ? this.onKeyUp : noop, 'input': this.onChange }, 'class': prefixCls + '-input', ref: 'inputRef', domProps: { 'value': inputDisplayValue } })] )] ); } };