@txdfe/at
Version:
一个设计体系组件库
529 lines (526 loc) • 19.9 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../icon';
import Button from '../button';
import Input from '../input';
import { func, obj } from '../util';
/** NumberPicker */
var NumberPicker = /*#__PURE__*/function (_React$Component) {
function NumberPicker(_props) {
var _this;
_classCallCheck(this, NumberPicker);
_this = _callSuper(this, NumberPicker, [_props]);
_defineProperty(_this, "onChange", function (value, e) {
if (_this.props.editable === true) {
value = value.trim();
// Compatible Chinese Input Method
value = value.replace('。', '.');
// ignore space
if (_this.state.value === value) {
return;
}
// in case of autoCorrect ('0.'=>0, '0.0'=>0) , we have these steps
if (value) {
// ignore when input start form '-'
if (value === '-' || _this.state.value === '-') {
_this.setState({
value: value
});
return;
}
// ignore when next value = prev value.
// ps: Number('0.')=0 ; Number('0.0')=0;
// but take care of Number('')=0;
if (Number(_this.state.value) === Number(value)) {
_this.setState({
value: value
});
return;
}
// ignore when value < min (because number is inputted one by one)
if (!isNaN(value) && Number(value) < _this.props.min) {
_this.setState({
value: value
});
return;
}
}
_this.setInputValue(value, e);
}
});
/**
* @param {Float} currentValue correct value
* @param {String} oldValue input value
*/
_defineProperty(_this, "onCorrect", function (currentValue, oldValue) {
_this.props.onCorrect({
currentValue: currentValue,
oldValue: oldValue
});
});
_defineProperty(_this, "onKeyDown", function (e) {
var _this$props;
if (e.keyCode === 38) {
_this.up(e);
} else if (e.keyCode === 40) {
_this.down(e);
}
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
(_this$props = _this.props).onKeyDown.apply(_this$props, [e].concat(args));
});
_defineProperty(_this, "onFocus", function (e) {
var onFocus = _this.props.onFocus;
_this.setFocus(true);
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
onFocus && onFocus.apply(void 0, [e].concat(args));
});
_defineProperty(_this, "onBlur", function (e) {
var value = _this.getCurrentValidValue(e.target.value.trim());
if (_this.state.value !== value) {
_this.setValue(value, e);
}
_this.setFocus(false);
var onBlur = _this.props.onBlur;
for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
onBlur && onBlur.apply(void 0, [e].concat(args));
});
_defineProperty(_this, "getCurrentValidValue", function (value) {
var val = value;
var _this2 = _this,
props = _this2.props;
if (val === '') {
val = '';
} else if (!isNaN(val)) {
val = Number(val);
if (val < props.min) {
val = props.min;
}
if (val > props.max) {
val = props.max;
}
// precision=2 and input from 1.99 to 1.999, should stay with 1.99 not 2
var strValue = "".concat(val);
var pointPos = strValue.indexOf('.');
var cutPos = pointPos + 1 + _this.getPrecision();
if (pointPos !== -1 && strValue.length > cutPos) {
val = Number(strValue.substr(0, cutPos));
}
} else {
val = _this.state.value;
}
if ("".concat(val) !== "".concat(value)) {
_this.onCorrect(val, value);
}
return val;
});
_defineProperty(_this, "setValue", function (v, e, triggerType) {
if (!('value' in _this.props)) {
_this.setState({
value: v
});
}
_this.props.onChange(isNaN(v) || v === '' ? undefined : v, _objectSpread(_objectSpread({}, e), {}, {
triggerType: triggerType
}));
});
_defineProperty(_this, "setInputValue", function (v, e) {
var value = _this.getCurrentValidValue(v);
if (_this.state.value !== value) {
_this.setValue(value, e);
}
});
_defineProperty(_this, "setFocus", function (status) {
var format = _this.props.format;
// Only trigger `setState` if `format` is settled to avoid unnecessary rendering
if (typeof format === 'function') {
_this.setState({
hasFocused: status
});
}
});
_defineProperty(_this, "getPrecision", function () {
var _this3 = _this,
props = _this3.props;
var stepString = props.step.toString();
if (stepString.indexOf('e-') >= 0) {
return parseInt(stepString.slice(stepString.indexOf('e-')), 10);
}
var precision = 0;
if (stepString.indexOf('.') >= 0) {
precision = stepString.length - stepString.indexOf('.') - 1;
}
return Math.max(precision, _this.props.precision);
});
_defineProperty(_this, "getPrecisionFactor", function () {
var precision = _this.getPrecision();
return Math.pow(10, precision);
});
_defineProperty(_this, "upStep", function (val) {
var _this$props2 = _this.props,
step = _this$props2.step,
min = _this$props2.min;
var precisionFactor = _this.getPrecisionFactor();
var result;
if (typeof val === 'number') {
result = (precisionFactor * val + precisionFactor * step) / precisionFactor;
result = _this.hackChrome(result);
} else {
result = min === -Infinity ? step : min;
}
return result;
});
_defineProperty(_this, "downStep", function (val) {
var _this$props3 = _this.props,
step = _this$props3.step,
min = _this$props3.min;
var precisionFactor = _this.getPrecisionFactor();
var result;
if (typeof val === 'number') {
result = (precisionFactor * val - precisionFactor * step) / precisionFactor;
result = _this.hackChrome(result);
} else {
result = min === -Infinity ? -step : min;
}
return result;
});
/**
* fix bug in chrome browser
* 0.28 + 0.01 = 0.29000000000000004
* 0.29 - 0.01 = 0.27999999999999997
* @param {Number} value value
*/
_defineProperty(_this, "hackChrome", function (value) {
var precision = _this.getPrecision();
if (precision > 0) {
return Number(Number(value).toFixed(precision));
}
return value;
});
_defineProperty(_this, "step", function (type, disabled, e) {
if (e) {
e.preventDefault();
}
var _this$props4 = _this.props,
onDisabled = _this$props4.onDisabled,
min = _this$props4.min,
max = _this$props4.max;
if (disabled) {
return onDisabled(e);
}
var value = _this.state.value;
if (isNaN(value)) {
return;
}
var val = _this["".concat(type, "Step")](value);
if (val > max) {
val = max;
}
if (val < min) {
val = min;
}
_this.setValue(val, e, type);
});
_defineProperty(_this, "down", function (disabled, e) {
_this.step('down', disabled, e);
});
_defineProperty(_this, "up", function (disabled, e) {
_this.step('up', disabled, e);
});
_defineProperty(_this, "renderValue", function () {
var _this$state = _this.state,
value = _this$state.value,
hasFocused = _this$state.hasFocused;
var format = _this.props.format;
return typeof format === 'function' && !hasFocused ? format(value) : value;
});
_defineProperty(_this, "focus", function () {
_this.inputRef.getInstance().focus();
});
_defineProperty(_this, "saveInputRef", function (ref) {
_this.inputRef = ref;
});
_defineProperty(_this, "handleMouseDown", function (e) {
e.preventDefault();
});
var _value;
if ('value' in _props) {
_value = _props.value;
} else {
_value = _props.defaultValue;
}
_this.state = {
value: typeof _value === 'undefined' ? '' : _value,
hasFocused: false
};
return _this;
}
_inherits(NumberPicker, _React$Component);
return _createClass(NumberPicker, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
var value = nextProps.value;
this.setState({
value: value === undefined || value === null ? '' : value
});
}
}
}, {
key: "render",
value: function render() {
var _this$props5 = this.props,
type = _this$props5.type,
prefix = _this$props5.prefix,
rtl = _this$props5.rtl,
disabled = _this$props5.disabled,
style = _this$props5.style,
className = _this$props5.className,
size = _this$props5.size,
max = _this$props5.max,
min = _this$props5.min,
autoFocus = _this$props5.autoFocus,
editable = _this$props5.editable,
state = _this$props5.state,
label = _this$props5.label,
_this$props5$upBtnPro = _this$props5.upBtnProps,
upBtnProps = _this$props5$upBtnPro === void 0 ? {} : _this$props5$upBtnPro,
_this$props5$downBtnP = _this$props5.downBtnProps,
downBtnProps = _this$props5$downBtnP === void 0 ? {} : _this$props5$downBtnP,
innerAfter = _this$props5.innerAfter;
var prefixCls = "".concat(prefix, "number-picker");
var cls = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, prefixCls, true), "".concat(prefixCls, "-").concat(this.props.type), this.props.type), "".concat(prefix).concat(size), true), className, className));
var upDisabled = false;
var downDisabled = false;
var value = this.state.value;
if (!isNaN(value)) {
var val = Number(value);
if (val >= max) {
upDisabled = true;
}
if (val <= min) {
downDisabled = true;
}
}
var extra = null;
var addonBefore = null;
var addonAfter = null;
if (type === 'normal') {
extra = /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-handler")
}, /*#__PURE__*/React.createElement(Button, _extends({}, upBtnProps, {
type: "secondary",
onMouseDown: this.handleMouseDown,
disabled: disabled,
className: "".concat(upBtnProps.className || '', " ").concat(upDisabled ? 'disabled' : ''),
onClick: this.up.bind(this, upDisabled)
}), /*#__PURE__*/React.createElement(Icon, {
size: "xxs",
type: "chevron-up"
})), /*#__PURE__*/React.createElement(Button, _extends({}, downBtnProps, {
type: "secondary",
onMouseDown: this.handleMouseDown,
disabled: disabled,
className: "".concat(downBtnProps.className || '', " ").concat(downDisabled ? 'disabled' : ''),
onClick: this.down.bind(this, downDisabled)
}), /*#__PURE__*/React.createElement(Icon, {
size: "xxs",
type: "chevron-down"
})));
} else {
addonBefore = /*#__PURE__*/React.createElement(Button, _extends({}, downBtnProps, {
size: size,
disabled: disabled,
className: "".concat(downBtnProps.className || '', " ").concat(downDisabled ? 'disabled' : ''),
onClick: this.down.bind(this, downDisabled)
}), /*#__PURE__*/React.createElement(Icon, {
type: "horizontal",
size: "xs"
}));
addonAfter = /*#__PURE__*/React.createElement(Button, _extends({}, upBtnProps, {
size: size,
disabled: disabled,
className: "".concat(upBtnProps.className || '', " ").concat(upDisabled ? 'disabled' : ''),
onClick: this.up.bind(this, upDisabled)
}), /*#__PURE__*/React.createElement(Icon, {
type: "plus",
size: "xs"
}));
}
var others = obj.pickOthers(NumberPicker.propTypes, this.props);
var dataAttrs = obj.pickAttrsWith(this.props, 'data-');
return /*#__PURE__*/React.createElement("span", _extends({
className: cls,
style: style,
dir: rtl ? 'rtl' : undefined
}, dataAttrs), /*#__PURE__*/React.createElement(Input, _extends({}, others, {
"aria-valuemax": max !== Infinity ? max : undefined,
"aria-valuemin": min !== -Infinity ? min : undefined,
state: state === 'error' ? 'error' : null,
onBlur: this.onBlur,
onFocus: this.onFocus,
onKeyDown: this.onKeyDown,
autoFocus: autoFocus,
readOnly: !editable,
value: this.renderValue(),
disabled: disabled,
size: size,
onChange: this.onChange,
ref: this.saveInputRef,
label: label,
innerAfter: innerAfter,
extra: extra,
addonBefore: addonBefore,
addonAfter: addonAfter
})));
}
}]);
}(React.Component);
_defineProperty(NumberPicker, "propTypes", {
/**
* 样式前缀
*/
prefix: PropTypes.string,
/**
* 设置类型
* @enumdesc 普通, 内联
*/
type: PropTypes.oneOf(['normal', 'inline']),
/**
* 大小
*/
size: PropTypes.oneOf(['medium']),
/**
* 当前值
*/
value: PropTypes.number,
/**
* 默认值
*/
defaultValue: PropTypes.number,
/**
* 是否禁用
*/
disabled: PropTypes.bool,
/**
* 步长
*/
step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* 保留小数点后位数
*/
precision: PropTypes.number,
/**
* 用户是否可以输入
*/
editable: PropTypes.bool,
/**
* 自动焦点
*/
autoFocus: PropTypes.bool,
/**
* 数值被改变的事件
* @param {Number} value 数据
* @param {Event} e DOM事件对象
*/
onChange: PropTypes.func,
/**
* 键盘按下
*/
onKeyDown: PropTypes.func,
/**
* 焦点获得
*/
onFocus: PropTypes.func,
/**
* 焦点失去
*/
onBlur: PropTypes.func,
/**
* 数值订正后的回调
* @param {Object} obj {currentValue,oldValue:String}
*/
onCorrect: PropTypes.func,
onDisabled: PropTypes.func,
// 兼容0.x onDisabled
/**
* 最大值
*/
max: PropTypes.number,
/**
* 最小值
*/
min: PropTypes.number,
/**
* 自定义class
*/
className: PropTypes.string,
/**
* 自定义内联样式
*/
style: PropTypes.object,
state: PropTypes.oneOf(['error']),
/**
* 格式化当前值
* @param {Number} value
* @return {String|Number}
*/
format: PropTypes.func,
/**
* 增加按钮的props
*/
upBtnProps: PropTypes.object,
/**
* 减少按钮的props
*/
downBtnProps: PropTypes.object,
/**
* 内联 label
*/
label: PropTypes.node,
/**
* inner after
*/
innerAfter: PropTypes.node,
rtl: PropTypes.bool
});
_defineProperty(NumberPicker, "defaultProps", {
prefix: 'next-',
max: Infinity,
min: -Infinity,
type: 'normal',
size: 'medium',
step: 1,
style: {},
precision: 0,
editable: true,
onChange: func.noop,
onKeyDown: func.noop,
onBlur: func.noop,
onCorrect: func.noop,
onDisabled: func.noop
});
export default NumberPicker;