@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-beta.3

package/lib/cjs/slider/index.js

@@ -1,649 +0,0 @@
-"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 _noop2 = _interopRequireDefault(require("lodash/noop"));
-
-var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
-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");
-
-/* 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] : _noop2.default;
-        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] : _noop2.default;
-        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, _isEqual2.default)(_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, _isEqual2.default)(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 _noop2.default;
-    }
-  }
-
-}
-
-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

@@ -1,33 +0,0 @@
-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;