@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/slider/index.js

@@ -0,0 +1,647 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/slider/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/slider/foundation"));
+
+var _index = _interopRequireDefault(require("../tooltip/index"));
+
+require("@douyinfe/semi-foundation/lib/cjs/slider/slider.css");
+
+var _lodashEs = require("lodash-es");
+
+/* eslint-disable max-lines-per-function */
+
+/* eslint-disable react/no-find-dom-node */
+const prefixCls = _constants.cssClasses.PREFIX;
+
+function domIsInRenderTree(e) {
+  if (!e) {
+    return false;
+  }
+
+  return Boolean(e.offsetWidth || e.offsetHeight || e.getClientRects().length);
+}
+
+class Slider extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.renderHandle = () => {
+      const {
+        vertical,
+        range,
+        tooltipVisible,
+        tipFormatter
+      } = this.props;
+      const {
+        chooseMovePos,
+        isDrag,
+        isInRenderTree
+      } = this.state;
+      const stylePos = vertical ? 'top' : 'left';
+      const percentInfo = this.foundation.getMinAndMaxPercent(this.state.currentValue);
+      const minPercent = percentInfo.min;
+      const maxPercent = percentInfo.max;
+      const {
+        tipVisible,
+        tipChildren
+      } = this.foundation.computeHandleVisibleVal(tooltipVisible && isInRenderTree, tipFormatter, range);
+      const transform = {
+        top: 'translateY(-50%)',
+        left: 'translateX(-50%)'
+      };
+      const minClass = (0, _classnames.default)(_constants.cssClasses.HANDLE, {
+        ["".concat(_constants.cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'min' && isDrag
+      });
+      const maxClass = (0, _classnames.default)(_constants.cssClasses.HANDLE, {
+        ["".concat(_constants.cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'max' && isDrag
+      });
+      const handleContents = !range ? /*#__PURE__*/_react.default.createElement(_index.default, {
+        content: tipChildren.min,
+        position: "top",
+        trigger: "custom",
+        rePosKey: minPercent,
+        visible: isInRenderTree && tipVisible.min,
+        className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
+        ref: this.minHanleEl,
+        className: minClass,
+        style: {
+          [stylePos]: "".concat(minPercent * 100, "%"),
+          zIndex: chooseMovePos === 'min' && isDrag ? 2 : 1,
+          transform: transform[stylePos]
+        },
+        onMouseDown: e => {
+          this.foundation.onHandleDown(e, 'min');
+        },
+        onMouseEnter: () => {
+          this.foundation.onHandleEnter('min');
+        },
+        onTouchStart: e => {
+          this.foundation.onHandleTouchStart(e, 'min');
+        },
+        onMouseLeave: () => {
+          this.foundation.onHandleLeave();
+        },
+        onMouseUp: e => {
+          this.foundation.onHandleUp(e);
+        },
+        onKeyUp: e => {
+          this.foundation.onHandleUp(e);
+        },
+        onTouchEnd: e => {
+          this.foundation.onHandleUp(e);
+        }
+      })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.default, {
+        content: tipChildren.min,
+        position: "top",
+        trigger: "custom",
+        rePosKey: minPercent,
+        visible: isInRenderTree && tipVisible.min,
+        className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        ref: this.minHanleEl,
+        className: minClass,
+        style: {
+          [stylePos]: "".concat(minPercent * 100, "%"),
+          zIndex: chooseMovePos === 'min' ? 2 : 1,
+          transform: transform[stylePos]
+        },
+        onMouseDown: e => {
+          this.foundation.onHandleDown(e, 'min');
+        },
+        onMouseEnter: () => {
+          this.foundation.onHandleEnter('min');
+        },
+        onTouchStart: e => {
+          this.foundation.onHandleTouchStart(e, 'min');
+        },
+        onMouseLeave: () => {
+          this.foundation.onHandleLeave();
+        },
+        onMouseUp: e => {
+          this.foundation.onHandleUp(e);
+        },
+        onKeyUp: e => {
+          this.foundation.onHandleUp(e);
+        },
+        onTouchEnd: e => {
+          this.foundation.onHandleUp(e);
+        }
+      })), /*#__PURE__*/_react.default.createElement(_index.default, {
+        content: tipChildren.max,
+        position: "top",
+        trigger: "custom",
+        rePosKey: maxPercent,
+        visible: isInRenderTree && tipVisible.max,
+        className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        ref: this.maxHanleEl,
+        className: maxClass,
+        style: {
+          [stylePos]: "".concat(maxPercent * 100, "%"),
+          zIndex: chooseMovePos === 'max' ? 2 : 1,
+          transform: transform[stylePos]
+        },
+        onMouseDown: e => {
+          this.foundation.onHandleDown(e, 'max');
+        },
+        onMouseEnter: () => {
+          this.foundation.onHandleEnter('max');
+        },
+        onMouseLeave: () => {
+          this.foundation.onHandleLeave();
+        },
+        onMouseUp: e => {
+          this.foundation.onHandleUp(e);
+        },
+        onKeyUp: e => {
+          this.foundation.onHandleUp(e);
+        },
+        onTouchStart: e => {
+          this.foundation.onHandleTouchStart(e, 'max');
+        },
+        onTouchEnd: e => {
+          this.foundation.onHandleUp(e);
+        }
+      })));
+      return handleContents;
+    };
+
+    this.renderTrack = () => {
+      const {
+        range,
+        included,
+        vertical
+      } = this.props;
+      const percentInfo = this.foundation.getMinAndMaxPercent(this.state.currentValue);
+      const minPercent = percentInfo.min;
+      const maxPercent = percentInfo.max;
+      let trackStyle = !vertical ? {
+        width: range ? "".concat((maxPercent - minPercent) * 100, "%") : "".concat(minPercent * 100, "%"),
+        left: range ? "".concat(minPercent * 100, "%") : 0
+      } : {
+        height: range ? "".concat((maxPercent - minPercent) * 100, "%") : "".concat(minPercent * 100, "%"),
+        top: range ? "".concat(minPercent * 100, "%") : 0
+      };
+      trackStyle = included ? trackStyle : {};
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _constants.cssClasses.TRACK,
+        style: trackStyle,
+        onClick: e => this.foundation.handleWrapClick(e)
+      });
+    };
+
+    this.renderStepDot = () => {
+      var _context;
+
+      const {
+        min,
+        max,
+        vertical,
+        marks
+      } = this.props;
+      const stylePos = vertical ? 'top' : 'left';
+      const labelContent = marks && (0, _keys.default)(marks).length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+        className: _constants.cssClasses.DOTS
+      }, (0, _map.default)(_context = (0, _keys.default)(marks)).call(_context, mark => {
+        const activeResult = this.foundation.isMarkActive(Number(mark));
+        const markClass = (0, _classnames.default)("".concat(prefixCls, "-dot"), {
+          ["".concat(prefixCls, "-dot-active")]: this.foundation.isMarkActive(Number(mark)) === 'active'
+        });
+        const markPercent = (Number(mark) - min) / (max - min);
+        return activeResult ? /*#__PURE__*/_react.default.createElement("span", {
+          key: mark,
+          className: markClass,
+          style: {
+            [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")
+          }
+        }) : null;
+      })) : null;
+      return labelContent;
+    };
+
+    this.renderLabel = () => {
+      var _context2;
+
+      const {
+        min,
+        max,
+        vertical,
+        marks,
+        verticalReverse
+      } = this.props;
+      const stylePos = vertical ? 'top' : 'left';
+      const labelContent = marks && (0, _keys.default)(marks).length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+        className: _constants.cssClasses.MARKS + (vertical && verticalReverse ? '-reverse' : '')
+      }, (0, _map.default)(_context2 = (0, _keys.default)(marks)).call(_context2, mark => {
+        var _context3;
+
+        const activeResult = this.foundation.isMarkActive(Number(mark));
+        const markPercent = (Number(mark) - min) / (max - min);
+        return activeResult ? /*#__PURE__*/_react.default.createElement("span", {
+          key: mark,
+          className: (0, _classnames.default)((0, _concat.default)(_context3 = "".concat(prefixCls, "-mark")).call(_context3, vertical && verticalReverse ? '-reverse' : '')),
+          style: {
+            [stylePos]: "".concat(markPercent * 100, "%")
+          }
+        }, marks[mark]) : null;
+      })) : null;
+      return labelContent;
+    };
+
+    let {
+      value
+    } = this.props;
+
+    if (!value) {
+      value = this.props.defaultValue;
+    }
+
+    this.state = {
+      // eslint-disable-next-line no-nested-ternary
+      currentValue: value ? value : this.props.range ? [0, 0] : 0,
+      min: this.props.min || 0,
+      max: this.props.max || 0,
+      focusPos: '',
+      onChange: this.props.onChange,
+      disabled: this.props.disabled || false,
+      chooseMovePos: '',
+      isDrag: false,
+      clickValue: 0,
+      showBoundary: false,
+      isInRenderTree: true
+    };
+    this.sliderEl = /*#__PURE__*/_react.default.createRef();
+    this.minHanleEl = /*#__PURE__*/_react.default.createRef();
+    this.maxHanleEl = /*#__PURE__*/_react.default.createRef();
+    this.dragging = [false, false]; // this.chooseMovePos = 'min';
+    // this.isDrag = false;
+
+    this.foundation = new _foundation.default(this.adapter);
+    this.eventListenerSet = new _set.default();
+  }
+
+  get adapter() {
+    var _this = this;
+
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      getSliderLengths: () => {
+        if (this.sliderEl && this.sliderEl.current) {
+          const rect = this.sliderEl.current.getBoundingClientRect();
+          const offset = {
+            x: this.sliderEl.current.offsetLeft,
+            y: this.sliderEl.current.offsetTop
+          };
+          return {
+            sliderX: offset.x,
+            sliderY: offset.y,
+            sliderWidth: rect.width,
+            sliderHeight: rect.height
+          };
+        }
+
+        return {
+          sliderX: 0,
+          sliderY: 0,
+          sliderWidth: 0,
+          sliderHeight: 0
+        };
+      },
+      getParentRect: () => {
+        const parentObj = this.sliderEl && this.sliderEl.current && this.sliderEl.current.offsetParent;
+
+        if (!parentObj) {
+          return undefined;
+        }
+
+        return parentObj.getBoundingClientRect();
+      },
+      getScrollParentVal: () => {
+        const scrollParent = this.foundation.getScrollParent(this.sliderEl.current);
+        return {
+          scrollTop: scrollParent.scrollTop,
+          scrollLeft: scrollParent.scrollLeft
+        };
+      },
+      isEventFromHandle: e => {
+        const handles = [this.minHanleEl, this.maxHanleEl];
+        let flag = false;
+        (0, _forEach.default)(handles).call(handles, handle => {
+          if (!handle) {
+            return;
+          }
+
+          const handleInstance = handle && handle.current;
+
+          const handleDom = _reactDom.default.findDOMNode(handleInstance);
+
+          if (handleDom && handleDom.contains(e.target)) {
+            flag = true;
+          }
+        });
+        return flag;
+      },
+      getOverallVars: () => ({
+        dragging: this.dragging,
+        chooseMovePos: this.chooseMovePos
+      }),
+      updateDisabled: disabled => {
+        this.setState({
+          disabled
+        });
+      },
+
+      transNewPropsToState(stateObj) {
+        let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _lodashEs.noop;
+        this.setState(stateObj, callback);
+      },
+
+      notifyChange: cbValue => this.props.onChange(cbValue),
+      setDragging: value => {
+        this.dragging = value;
+      },
+      updateCurrentValue: value => {
+        const {
+          currentValue
+        } = this.state;
+
+        if (value !== currentValue) {
+          this.setState({
+            currentValue: value
+          });
+        }
+      },
+      setOverallVars: (key, value) => {
+        this[key] = value;
+      },
+      getMinHandleEl: () => this.minHanleEl,
+      getMaxHandleEl: () => this.maxHanleEl,
+      onHandleDown: e => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
+
+        this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
+
+        this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
+      },
+      onHandleMove: function (mousePos, isMin) {
+        let stateChangeCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _lodashEs.noop;
+        let clickTrack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+        const sliderDOMIsInRenderTree = _this.foundation.checkAndUpdateIsInRenderTreeState();
+
+        if (!sliderDOMIsInRenderTree) {
+          return;
+        }
+
+        const {
+          value,
+          onChange
+        } = _this.props;
+
+        const moveValue = _this.foundation.transPosToValue(mousePos, isMin);
+
+        if (moveValue === false) {
+          return;
+        }
+
+        const outPutValue = _this.foundation.outPutValue(moveValue);
+
+        const {
+          currentValue
+        } = _this.state;
+
+        if (!(0, _lodashEs.isEqual)(_this.foundation.outPutValue(currentValue), outPutValue)) {
+          onChange(outPutValue);
+
+          if (!clickTrack && _this.foundation.valueFormatIsCorrect(value)) {
+            // still require afterChangeCallback when click on the track directly, need skip here
+            return false;
+          }
+
+          _this.setState({
+            currentValue: outPutValue
+          }, stateChangeCallback);
+        }
+      },
+      setEventDefault: e => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      setStateVal: (name, val) => {
+        this.setState({
+          [name]: val
+        });
+      },
+      checkAndUpdateIsInRenderTreeState: () => {
+        const sliderDOMIsInRenderTree = domIsInRenderTree(this.sliderEl.current);
+
+        if (sliderDOMIsInRenderTree !== this.state.isInRenderTree) {
+          this.setState({
+            isInRenderTree: sliderDOMIsInRenderTree
+          });
+        }
+
+        return sliderDOMIsInRenderTree;
+      },
+      onHandleEnter: pos => {
+        this.setState({
+          focusPos: pos
+        });
+      },
+      onHandleLeave: () => {
+        this.setState({
+          focusPos: ''
+        });
+      },
+      onHandleUpBefore: e => {
+        e.stopPropagation();
+        e.preventDefault();
+        document.body.removeEventListener('mousemove', this.foundation.onHandleMove, false);
+        document.body.removeEventListener('mouseup', this.foundation.onHandleUp, false);
+      },
+      onHandleUpAfter: () => {
+        const {
+          currentValue
+        } = this.state;
+        const value = this.foundation.outPutValue(currentValue);
+        this.props.onAfterChange(value);
+      },
+      unSubscribeEventListener: () => {
+        var _context4;
+
+        (0, _forEach.default)(_context4 = (0, _from.default)(this.eventListenerSet)).call(_context4, clear => clear());
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const hasPropValueChange = !(0, _lodashEs.isEqual)(this.props.value, prevProps.value);
+    const hasPropDisabledChange = this.props.disabled !== prevProps.disabled;
+
+    if (hasPropDisabledChange) {
+      this.foundation.handleDisabledChange(this.props.disabled);
+    }
+
+    if (hasPropValueChange) {
+      const nextValue = this.props.value;
+      const prevValue = this.state.currentValue;
+      this.foundation.handleValueChange(prevValue, nextValue);
+    }
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  render() {
+    const wrapperClass = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), {
+      ["".concat(prefixCls, "-disabled")]: this.state.disabled,
+      ["".concat(_constants.cssClasses.VERTICAL, "-wrapper")]: this.props.vertical,
+      ["".concat(prefixCls, "-reverse")]: this.props.vertical && this.props.verticalReverse
+    }, this.props.className);
+    const boundaryClass = (0, _classnames.default)("".concat(prefixCls, "-boundary"), {
+      ["".concat(prefixCls, "-boundary-show")]: this.props.showBoundary && this.state.showBoundary
+    });
+    const sliderCls = (0, _classnames.default)({
+      ["".concat(prefixCls)]: !this.props.vertical,
+      [_constants.cssClasses.VERTICAL]: this.props.vertical
+    });
+
+    const slider = /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapperClass,
+      style: this.props.style,
+      ref: this.sliderEl,
+      onMouseEnter: () => this.foundation.handleWrapperEnter(),
+      onMouseLeave: () => this.foundation.handleWrapperLeave()
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-rail"),
+      onClick: e => this.foundation.handleWrapClick(e),
+      style: this.props.railStyle
+    }), this.renderTrack(), this.renderStepDot(), /*#__PURE__*/_react.default.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/_react.default.createElement("div", {
+      className: boundaryClass
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixCls, "-boundary-min")
+    }, this.state.min), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixCls, "-boundary-max")
+    }, this.state.max)));
+
+    if (!this.props.vertical) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: sliderCls
+      }, slider);
+    }
+
+    return slider;
+  }
+
+  _addEventListener(target, eventName, callback) {
+    if (target.addEventListener) {
+      for (var _len = arguments.length, rests = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+        rests[_key - 3] = arguments[_key];
+      }
+
+      target.addEventListener(eventName, callback, ...rests);
+
+      const clearSelf = () => {
+        target === null || target === void 0 ? void 0 : target.removeEventListener(eventName, callback);
+
+        _promise.default.resolve().then(() => {
+          this.eventListenerSet.delete(clearSelf);
+        });
+      };
+
+      this.eventListenerSet.add(clearSelf);
+      return clearSelf;
+    } else {
+      return _lodashEs.noop;
+    }
+  }
+
+}
+
+exports.default = Slider;
+Slider.propTypes = {
+  // allowClear: PropTypes.bool,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.array]),
+  disabled: _propTypes.default.bool,
+  included: _propTypes.default.bool,
+  marks: _propTypes.default.object,
+  max: _propTypes.default.number,
+  min: _propTypes.default.number,
+  range: _propTypes.default.bool,
+  step: _propTypes.default.number,
+  tipFormatter: _propTypes.default.func,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.array]),
+  vertical: _propTypes.default.bool,
+  onAfterChange: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  tooltipVisible: _propTypes.default.bool,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  showBoundary: _propTypes.default.bool,
+  railStyle: _propTypes.default.object,
+  verticalReverse: _propTypes.default.bool
+};
+Slider.defaultProps = {
+  // allowClear: false,
+  disabled: false,
+  included: true,
+  max: 100,
+  min: 0,
+  range: false,
+  step: 1,
+  tipFormatter: value => value,
+  vertical: false,
+  showBoundary: false,
+  onAfterChange: value => {// console.log(value);
+  },
+  onChange: value => {// console.log(value);
+  },
+  verticalReverse: false
+};

package/lib/cjs/space/index.d.ts

@@ -0,0 +1,33 @@
+import { PureComponent, ReactNode, CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/cjs/space/space.css';
+export declare type Align = 'start' | 'center' | 'end' | 'baseline';
+export declare type Spacing = 'loose' | 'medium' | 'tight' | number;
+export declare type SpaceProps = {
+    wrap?: boolean;
+    align?: Align;
+    vertical?: boolean;
+    spacing?: Spacing | Spacing[];
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+};
+declare class Space extends PureComponent<SpaceProps> {
+    static propTypes: {
+        wrap: PropTypes.Requireable<boolean>;
+        align: PropTypes.Requireable<string>;
+        vertical: PropTypes.Requireable<boolean>;
+        spacing: PropTypes.Requireable<string | number | any[]>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        vertical: boolean;
+        wrap: boolean;
+        spacing: string;
+        align: string;
+    };
+    render(): ReactNode;
+}
+export default Space;