UNPKG

@txdfe/at

Version:

一个设计体系组件库

827 lines (697 loc) 28.4 kB
"use strict"; function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _classnames = _interopRequireDefault(require("classnames")); var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _util = require("../../util"); var _balloon = _interopRequireDefault(require("../../balloon")); var _utils = require("../utils"); var _scale = _interopRequireDefault(require("./scale")); var _track = _interopRequireDefault(require("./track")); var _selected = _interopRequireDefault(require("./selected")); var _mark = _interopRequireDefault(require("./mark")); var _slider = _interopRequireDefault(require("./slider")); var _fixedSlider = _interopRequireDefault(require("./fixedSlider")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _extends() { _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; }; return _extends.apply(this, arguments); } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var Tooltip = _balloon["default"].Tooltip; var noop = _util.func.noop, bindCtx = _util.func.bindCtx; function _isMultiple(slider, isFixedWidth) { return isFixedWidth || slider === 'double'; } function LowerSlider(props) { var hasTip = props.hasTip, value = props.value, tipRender = props.tipRender, slider = props.slider, tooltipVisible = props.tooltipVisible, onTooltipVisibleChange = props.onTooltipVisibleChange, tooltipAnimation = props.tooltipAnimation; if (_isMultiple(slider)) { return hasTip ? /*#__PURE__*/_react["default"].createElement(Tooltip, { popupContainer: function popupContainer(target) { return target.parentNode; }, popupProps: { visible: tooltipVisible, onVisibleChange: onTooltipVisibleChange, animation: tooltipAnimation, needAdjust: false }, type: "primary", trigger: (0, _slider["default"])(_objectSpread(_objectSpread({}, props), {}, { value: value[0] })), align: "t" }, tipRender("".concat(value[0]))) : (0, _slider["default"])(_objectSpread(_objectSpread({}, props), {}, { value: value[0] })); } return null; } LowerSlider.propTypes = { hasTip: _propTypes["default"].bool, tooltipVisible: _propTypes["default"].bool, onTooltipVisibleChange: _propTypes["default"].func, tooltipAnimation: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]), value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number)]), tipRender: _propTypes["default"].func, slider: _propTypes["default"].oneOf(['single', 'double']) }; function UpperSlider(props) { var newprop = _extends({}, props); var hasTip = newprop.hasTip, value = newprop.value, tipRender = newprop.tipRender, slider = newprop.slider, tooltipVisible = newprop.tooltipVisible, onTooltipVisibleChange = newprop.onTooltipVisibleChange, tooltipAnimation = newprop.tooltipAnimation; if (_isMultiple(slider)) { delete newprop.onKeyDown; return hasTip ? /*#__PURE__*/_react["default"].createElement(Tooltip, { popupContainer: function popupContainer(target) { return target.parentNode; }, popupProps: { visible: tooltipVisible, onVisibleChange: onTooltipVisibleChange, animation: tooltipAnimation, needAdjust: false }, type: "primary", trigger: (0, _slider["default"])(_objectSpread(_objectSpread({}, newprop), {}, { value: value[1] })), align: "t" }, tipRender(value[1])) : (0, _slider["default"])(_objectSpread(_objectSpread({}, newprop), {}, { value: value[1] })); } return hasTip ? /*#__PURE__*/_react["default"].createElement(Tooltip, { popupContainer: function popupContainer(target) { return target.parentNode; }, popupProps: { visible: tooltipVisible, onVisibleChange: onTooltipVisibleChange, animation: tooltipAnimation, needAdjust: false }, animation: { "in": 'fadeInUp', out: 'fadeOutDown' }, type: "primary", trigger: (0, _slider["default"])(newprop), align: "t" }, tipRender(value)) : (0, _slider["default"])(newprop); } UpperSlider.propTypes = { hasTip: _propTypes["default"].bool, tooltipVisible: _propTypes["default"].bool, onTooltipVisibleChange: _propTypes["default"].func, tooltipAnimation: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]), value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number)]), tipRender: _propTypes["default"].func, slider: _propTypes["default"].oneOf(['single', 'double']) }; function pauseEvent(e) { e.stopPropagation(); e.preventDefault(); } /** Range */ var Range = /*#__PURE__*/function (_React$Component) { _inherits(Range, _React$Component); var _super = _createSuper(Range); function Range(props) { var _this; _classCallCheck(this, Range); _this = _super.call(this, props); var min = props.min; var initialValue = _isMultiple(props.slider) ? [min, min] : min; var defaultValue = 'defaultValue' in props ? props.defaultValue : initialValue; var value = props.value !== undefined ? props.value : defaultValue; _this.state = { value: value, tempValue: value, hasMovingClass: false, lowerTooltipVisible: false, upperTooltipVisible: false, tooltipAnimation: true }; bindCtx(_assertThisInitialized(_this), ['handleLowerTooltipVisibleChange', 'handleUpperTooltipVisibleChange', 'onKeyDown']); return _this; } _createClass(Range, [{ key: "UNSAFE_componentWillReceiveProps", value: function UNSAFE_componentWillReceiveProps(nextProps) { var min = this.props.min; var initialValue = _isMultiple(nextProps.slider) ? [min, min] : min; if ('value' in nextProps) { var value = nextProps.value; if (value === undefined) { // value设置undefined,reset为初始值 value = initialValue; } this.setState({ value: value, tempValue: value }); } } }, { key: "_marksToScales", value: function _marksToScales(marks) { var result = []; if (Object.prototype.toString.call(marks) === '[object Object]') { for (var key in marks) { if (Object.hasOwnProperty.call(marks, key)) { result.push(parseInt(key)); } } } else { result = marks; } return result; } }, { key: "_calcScales", value: function _calcScales() { var _this$props = this.props, min = _this$props.min, max = _this$props.max, marks = _this$props.marks; var scales = this._marksToScales(marks); // let scales = null; if (scales !== false) { if (Array.isArray(scales)) { return scales; } else { var pace = (max - min) / scales; var result = []; result.push(min); for (var i = 1; i < scales; i++) { result.push(min + i * pace); } result.push(max); return result; } } else { return []; } } }, { key: "_calcMarks", value: function _calcMarks() { var _this$props2 = this.props, min = _this$props2.min, max = _this$props2.max, marks = _this$props2.marks; var result = {}; if (Array.isArray(marks)) { marks.forEach(function (m) { result[m] = m.toString(); }); } else if (typeof marks === 'number') { var pace = (max - min) / marks; result[min] = min; for (var i = 1; i < marks; i++) { var mark = min + i * pace; var precision = (0, _utils.getPrecision)(mark); if (precision > 2) { precision = 2; } mark = mark.toFixed(precision); result[mark] = mark; } result[max] = max; } else { result = marks; } return result; } }, { key: "_onMouseDown", value: function _onMouseDown(e) { if (e.button === 0) { this.setState({ hasMovingClass: true }); this._start(e.pageX); this._addDocumentEvents(); pauseEvent(e); } } }, { key: "onKeyDown", value: function onKeyDown(e) { if (e.keyCode === _util.KEYCODE.LEFT_ARROW || e.keyCode === _util.KEYCODE.RIGHT_ARROW) { e.stopPropagation(); e.preventDefault(); var newValue; if (e.keyCode === _util.KEYCODE.LEFT_ARROW) { newValue = this.state.value - this.props.step; } else { newValue = this.state.value + this.props.step; } if (newValue > this.props.max) { newValue = this.props.max; } if (newValue < this.props.min) { newValue = this.props.min; } if (newValue !== this.state.value) { this.setState({ value: newValue }); this.props.onChange(newValue); } } } }, { key: "_start", value: function _start(position) { var tempValue = this.state.tempValue; var range = this.dom; var start = range.getBoundingClientRect().left; // used in unit test var width = range.clientWidth; if (!width) { if (range.style.width) { var index = range.style.width.indexOf('px'); if (index !== -1) { width = Number(range.style.width.slice(0, index)); } } } this._moving = { start: start, end: start + width, startValue: tempValue }; // change on start this._onProcess(position, true); } }, { key: "_end", value: function _end() { var startValue = this._moving.startValue; var _this$state = this.state, tempValue = _this$state.tempValue, value = _this$state.value; this._moving = null; this._removeDocumentEvents(); this.setState({ hasMovingClass: false, lowerTooltipVisible: false, upperTooltipVisible: false, tooltipAnimation: true }); if (!(0, _utils.isEqual)(tempValue, startValue)) { // Not Controlled if (!('value' in this.props)) { this.setState({ value: tempValue }); } else { this.setState({ // tooltipVisible: false, tempValue: value, value: value }); } this.props.onChange(tempValue); } } }, { key: "_move", value: function _move(e) { this._onProcess(e.pageX); } }, { key: "_onProcess", value: function _onProcess(position, start) { var tempValue = this.state.tempValue; var current = this._positionToCurrent(position); // current 为当前click的value if (this.isFixedWidth) { if (start) { this.lastPosition = current; } } else if (start) { this.lastPosition = current; if (_isMultiple(this.props.slider)) { this._moving.dragging = (0, _utils.getDragging)(current, tempValue); } else { this._moving.dragging = 'upper'; } this.setState({ lowerTooltipVisible: this._moving.dragging === 'lower', upperTooltipVisible: this._moving.dragging === 'upper', tooltipAnimation: false }); } else if (this.oldDragging === 'lower' && this._moving.dragging === 'upper') { this.setState({ upperTooltipVisible: true, lowerTooltipVisible: false }); } else if (this.oldDragging === 'upper' && this._moving.dragging === 'lower') { this.setState({ upperTooltipVisible: false, lowerTooltipVisible: true }); } this.oldDragging = this._moving.dragging; var nextValue = this._currentToValue(current, tempValue, this.lastPosition, this.isFixedWidth); // 计算range的新value,可能是数组,可能是单个值 this.lastPosition = current; if (!(0, _utils.isEqual)(nextValue, tempValue)) { this.setState({ tempValue: nextValue }); this.props.onProcess(nextValue); } } }, { key: "_addDocumentEvents", value: function _addDocumentEvents() { this._onMouseMoveListener = _util.events.on(document, 'mousemove', this._move.bind(this)); this._onMouseUpListener = _util.events.on(document, 'mouseup', this._end.bind(this)); } }, { key: "_removeDocumentEvents", value: function _removeDocumentEvents() { if (this._onMouseMoveListener) { this._onMouseMoveListener.off(); this._onMouseMoveListener = null; } if (this._onMouseUpListener) { this._onMouseUpListener.off(); this._onMouseUpListener = null; } } // position => current (value type) }, { key: "_positionToCurrent", value: function _positionToCurrent(position) { var _this$_moving = this._moving, start = _this$_moving.start, end = _this$_moving.end; var _this$props3 = this.props, step = _this$props3.step, min = _this$props3.min, max = _this$props3.max, rtl = _this$props3.rtl; if (position < start) { position = start; } else if (position > end) { position = end; } var percent = (0, _utils.getPercent)(start, end, position); percent = rtl ? 100 - percent : percent; // reset by step var newValue = parseFloat((Math.round(percent / 100 * (max - min) / step) * step).toFixed((0, _utils.getPrecision)(step))); return min + newValue; } }, { key: "_currentToValue", value: function _currentToValue(current, preValue, lastPosition, isFixedWidth) { var dragging = this._moving.dragging; var _this$props4 = this.props, min = _this$props4.min, max = _this$props4.max; if (!_isMultiple(this.props.slider, isFixedWidth)) { return current; } else { var result; var precision = (0, _utils.getPrecision)(this.props.step); var diff = current - lastPosition; var newLeft = +(+preValue[0] + diff).toFixed(precision); var newRight = +(+preValue[1] + diff).toFixed(precision); var newMaxLeft = +(max - preValue[1] + preValue[0]).toFixed(precision); var newMinRight = +(min + preValue[1] - preValue[0]).toFixed(precision); if (isFixedWidth) { if (newLeft < min) { result = [min, newMinRight]; } else if (newRight > max) { result = [newMaxLeft, max]; } else { result = [newLeft, newRight]; } } else if (dragging === 'lower') { if (current > preValue[1]) { result = [preValue[1], current]; this._moving.dragging = 'upper'; } else { result = [current, preValue[1]]; } } else if (dragging === 'upper') { if (current < preValue[0]) { result = [current, preValue[0]]; this._moving.dragging = 'lower'; } else { result = [preValue[0], current]; } } return result; } } }, { key: "handleLowerTooltipVisibleChange", value: function handleLowerTooltipVisibleChange(visible) { if (this.state.hasMovingClass) { return; } this.setState({ lowerTooltipVisible: visible }); } }, { key: "handleUpperTooltipVisibleChange", value: function handleUpperTooltipVisibleChange(visible) { if (this.state.hasMovingClass) { return; } this.setState({ upperTooltipVisible: visible }); } }, { key: "render", value: function render() { var _classNames, _this2 = this; var value = this._moving ? this.state.tempValue : this.state.value; var _this$props5 = this.props, prefix = _this$props5.prefix, min = _this$props5.min, max = _this$props5.max, disabled = _this$props5.disabled, style = _this$props5.style, id = _this$props5.id, slider = _this$props5.slider, reverse = _this$props5.reverse, className = _this$props5.className, marks = _this$props5.marks, marksPosition = _this$props5.marksPosition, hasTip = _this$props5.hasTip, tipRender = _this$props5.tipRender, fixedWidth = _this$props5.fixedWidth, defaultValue = _this$props5.defaultValue, tooltipVisible = _this$props5.tooltipVisible, rtl = _this$props5.rtl; var classes = (0, _classnames["default"])((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "range"), true), _defineProperty(_classNames, "disabled", disabled), _defineProperty(_classNames, className, className), _classNames)); if (Array.isArray(value)) { value.forEach(function (item, index) { if (item > max) { value[index] = max; } }); } else if (value > max) { value = max; } var commonProps = { prefix: prefix, min: min, max: max, value: value, reverse: reverse, slider: slider, hasTip: hasTip, tipRender: tipRender, marksPosition: marksPosition, tooltipVisible: tooltipVisible, hasMovingClass: this.state.hasMovingClass, disabled: disabled, rtl: rtl }; this.isFixedWidth = fixedWidth && (value ? Array.isArray(value) : defaultValue ? Array.isArray(defaultValue) : false); return /*#__PURE__*/_react["default"].createElement("div", { ref: function ref(dom) { _this2.dom = dom; }, style: style, className: classes, id: id, dir: rtl ? 'rtl' : 'ltr', onMouseDown: disabled ? noop : this._onMouseDown.bind(this) }, marks !== false && marksPosition === 'above' ? /*#__PURE__*/_react["default"].createElement(_mark["default"], _extends({}, commonProps, { marks: this._calcMarks() })) : null, /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(prefix, "range-inner") }, /*#__PURE__*/_react["default"].createElement(_scale["default"], _extends({}, commonProps, { scales: this._calcScales() })), /*#__PURE__*/_react["default"].createElement(_track["default"], commonProps), this.isFixedWidth ? /*#__PURE__*/_react["default"].createElement(_fixedSlider["default"], commonProps) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_selected["default"], commonProps), /*#__PURE__*/_react["default"].createElement(LowerSlider, _extends({}, commonProps, { hasMovingClass: this.state.hasMovingClass && this._moving && this._moving.dragging === 'lower', tooltipVisible: tooltipVisible || this.state.lowerTooltipVisible, onTooltipVisibleChange: this.handleLowerTooltipVisibleChange, tooltipAnimation: this.state.tooltipAnimation ? { "in": 'expandInUp', out: 'expandOutDown' } : false })), /*#__PURE__*/_react["default"].createElement(UpperSlider, _extends({}, commonProps, { onKeyDown: this.onKeyDown, hasMovingClass: this.state.hasMovingClass && this._moving && this._moving.dragging === 'upper', tooltipVisible: tooltipVisible || this.state.upperTooltipVisible, onTooltipVisibleChange: this.handleUpperTooltipVisibleChange, tooltipAnimation: this.state.tooltipAnimation ? { "in": 'expandInUp', out: 'expandOutDown' } : false })))), marks !== false && marksPosition === 'below' ? /*#__PURE__*/_react["default"].createElement(_mark["default"], _extends({}, commonProps, { marks: this._calcMarks() })) : null); } }]); return Range; }(_react["default"].Component); exports["default"] = Range; _defineProperty(Range, "contextTypes", { prefix: _propTypes["default"].string }); _defineProperty(Range, "propTypes", { /** * 样式类名的品牌前缀 */ prefix: _propTypes["default"].string, /** * 自定义类名 */ className: _propTypes["default"].string, /** * 自定义内敛样式 */ style: _propTypes["default"].object, /** * 滑块个数 * @enumdesc 单个, 两个 */ slider: _propTypes["default"].oneOf(['single', 'double']), /** * 最小值 */ min: _propTypes["default"].number, /** * 最大值 */ max: _propTypes["default"].number, /** * 步长,取值必须大于 0,并且可被 (max - min) 整除。 */ step: _propTypes["default"].number, /** * 设置当前取值。当 `slider` 为 `single` 时,使用 `Number`,否则用 `[Number, Number]` */ value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number)]), tempValue: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number)]), /** * 设置初始取值。当 `slider` 为 `single` 时,使用 `Number`,否则用 `[Number, Number]` */ defaultValue: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number)]), /** * 刻度数值显示逻辑(false 代表不显示,array 枚举显示的值,number 代表按 number 平分,object 表示按 key 划分,value 值显示) */ marks: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number), _propTypes["default"].object]), /** * marks显示在上方('above')or下方('below') */ marksPosition: _propTypes["default"].oneOf(['above', 'below']), /** * 值为 `true` 时,滑块为禁用状态 */ disabled: _propTypes["default"].bool, /** * 当 Range 的值发生改变后,会触发 onChange 事件,并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用 * @param {String/number} value */ onChange: _propTypes["default"].func, /** * 滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用 * @param {String/number} value */ onProcess: _propTypes["default"].func, /** * 是否显示 tip */ hasTip: _propTypes["default"].bool, /** * 自定义 tip 显示内容 * @param {Number|String} value 值 * @return {ReactNode} 显示内容 */ tipRender: _propTypes["default"].func, id: _propTypes["default"].string, /** * 选中态反转 */ reverse: _propTypes["default"].bool, /** * 是否pure render */ pure: _propTypes["default"].bool, /** * 是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间 */ fixedWidth: _propTypes["default"].bool, /** * tooltip是否默认展示 */ tooltipVisible: _propTypes["default"].bool, /** * 是否已rtl模式展示 */ rtl: _propTypes["default"].bool }); _defineProperty(Range, "defaultProps", { prefix: 'next-', slider: 'single', min: 0, max: 100, step: 1, marks: false, disabled: false, fixedWidth: false, tooltipVisible: false, hasTip: true, onChange: noop, onProcess: noop, tipRender: function tipRender(value) { return value; }, reverse: false, pure: false, marksPosition: 'below', rtl: false });