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

package/lib/cjs/scrollList/scrollItem.js

@@ -1,551 +0,0 @@
-"use strict";
-
-var _findIndexInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/find-index");
-
-var _mapInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/map");
-
-var _findInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/find");
-
-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 _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _lodashEs = require("lodash-es");
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/scrollList/constants");
-
-var _itemFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/scrollList/itemFoundation"));
-
-var _scrollTo = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/scrollList/scrollTo"));
-
-var _isElement = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isElement"));
-
-const msPerFrame = 1000 / 60;
-const blankReg = /^\s*$/;
-const wheelMode = 'wheel';
-
-class ScrollItem extends _baseComponent.default {
-  constructor() {
-    var _this;
-
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    super(props);
-    _this = this;
-    this.throttledAdjustList = (0, _lodashEs.throttle)((e, nearestNode) => {
-      this.foundation.adjustInfiniteList(this.list, this.wrapper, nearestNode);
-    }, msPerFrame);
-    this.debouncedSelect = (0, _lodashEs.debounce)((e, nearestNode) => {
-      this._cacheSelectedNode(nearestNode);
-
-      this.foundation.selectNode(nearestNode, this.list);
-    }, msPerFrame * 5);
-
-    this._cacheNode = (name, node) => name && node && Object.prototype.hasOwnProperty.call(this, name) && (this[name] = node);
-
-    this._cacheSelectedNode = selectedNode => this._cacheNode('selectedNode', selectedNode);
-
-    this._cacheWillSelectNode = node => this._cacheNode('willSelectNode', node);
-
-    this._cacheListNode = list => this._cacheNode('list', list);
-
-    this._cacheSelectorNode = selector => this._cacheNode('selector', selector);
-
-    this._cacheWrapperNode = wrapper => this._cacheNode('wrapper', wrapper);
-
-    this._isFirst = node => {
-      const {
-        list
-      } = this;
-
-      if ((0, _isElement.default)(node) && (0, _isElement.default)(list)) {
-        const chilren = list.children;
-        const index = (0, _findIndexInstanceProperty(_lodashEs))(chilren, node);
-        return index === 0;
-      }
-
-      return false;
-    };
-
-    this._isLast = node => {
-      const {
-        list
-      } = this;
-
-      if ((0, _isElement.default)(node) && (0, _isElement.default)(list)) {
-        const {
-          children
-        } = list;
-        const index = (0, _findIndexInstanceProperty(_lodashEs))(children, node);
-        return index === children.length - 1;
-      }
-
-      return false;
-    };
-
-    this.indexIsSame = (index1, index2) => {
-      const {
-        list
-      } = this.props;
-
-      if (list.length) {
-        return index1 % list.length === index2 % list.length;
-      }
-
-      return undefined;
-    };
-
-    this.isDisabledIndex = index => {
-      const {
-        list
-      } = this.props;
-
-      if ((0, _isArray.default)(list) && list.length && index > -1) {
-        const size = list.length;
-        const indexInData = index % size;
-        return this.isDisabledData(list[indexInData]);
-      }
-
-      return false;
-    };
-
-    this.isDisabledNode = node => {
-      const listWrapper = this.list;
-
-      if ((0, _isElement.default)(node) && (0, _isElement.default)(listWrapper)) {
-        const index = (0, _findIndexInstanceProperty(_lodashEs))(listWrapper.children, child => child === node);
-        return this.isDisabledIndex(index);
-      }
-
-      return false;
-    };
-
-    this.isDisabledData = data => data && typeof data === 'object' && data.disabled;
-
-    this.isWheelMode = () => this.props.mode === wheelMode;
-
-    this.addClassToNode = function (selectedNode) {
-      let selectedCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.cssClasses.SELECTED;
-      const {
-        list
-      } = _this;
-      selectedNode = selectedNode || _this.selectedNode;
-
-      if ((0, _isElement.default)(selectedNode) && (0, _isElement.default)(list)) {
-        const {
-          children
-        } = list;
-        const reg = new RegExp("\\s*".concat(selectedCls, "\\s*"), 'g');
-        (0, _mapInstanceProperty2(_lodashEs))(children, node => {
-          node.className = node.className && node.className.replace(reg, ' ');
-
-          if (blankReg.test(node.className)) {
-            node.className = '';
-          }
-        });
-
-        if (selectedNode.className && !blankReg.test(selectedNode.className)) {
-          selectedNode.className += " ".concat(selectedCls);
-        } else {
-          selectedNode.className = selectedCls;
-        }
-      }
-    };
-
-    this.getIndexByNode = node => (0, _findIndexInstanceProperty(_lodashEs))(this.list.children, node);
-
-    this.getNodeByIndex = index => {
-      if (index > -1) {
-        return (0, _findInstanceProperty(_lodashEs))(this.list.children, (node, idx) => idx === index);
-      }
-
-      const defaultSelectedNode = (0, _findInstanceProperty(_lodashEs))(this.list.children, child => !this.isDisabledNode(child));
-      return defaultSelectedNode;
-    };
-
-    this.scrollToIndex = (selectedIndex, duration) => {
-      // move to selected item
-      duration = typeof duration === 'number' ? duration : _constants.numbers.DEFAULT_SCROLL_DURATION; // eslint-disable-next-line
-
-      selectedIndex = selectedIndex == null ? this.props.selectedIndex : selectedIndex; // this.isWheelMode() && this.addClassToNode();
-
-      this.scrollToNode(this.selectedNode, duration);
-    };
-
-    this.scrollToNode = (node, duration) => {
-      const {
-        wrapper
-      } = this;
-      const wrapperHeight = wrapper.offsetHeight;
-      const itemHeight = this.getItmHeight(node);
-      const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
-      this.scrollToPos(targetTop, duration);
-    };
-
-    this.scrollToPos = function (targetTop) {
-      let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.numbers.DEFAULT_SCROLL_DURATION;
-      const {
-        wrapper
-      } = _this; // this.isWheelMode() && this.addClassToNode();
-
-      if (duration && _this.props.motion) {
-        if (_this.scrollAnimation) {
-          _this.scrollAnimation.destroy();
-
-          _this.scrolling = false;
-        }
-
-        if (wrapper.scrollTop === targetTop) {
-          if (_this.isWheelMode()) {
-            const nodeInfo = _this.foundation.getNearestNodeInfo(_this.list, _this.selector);
-
-            _this.addClassToNode(nodeInfo.nearestNode);
-          }
-        } else {
-          _this.scrollAnimation = (0, _scrollTo.default)(wrapper, targetTop, duration);
-
-          _this.scrollAnimation.on('rest', () => {
-            if (_this.isWheelMode()) {
-              const nodeInfo = _this.foundation.getNearestNodeInfo(_this.list, _this.selector);
-
-              _this.addClassToNode(nodeInfo.nearestNode);
-            }
-          });
-
-          _this.scrollAnimation.start();
-        }
-      } else {
-        wrapper.scrollTop = targetTop;
-      }
-    };
-
-    this.scrollToSelectItem = e => {
-      const {
-        nearestNode
-      } = this.foundation.getNearestNodeInfo(this.list, this.selector);
-
-      if (this.props.cycled) {
-        this.throttledAdjustList(e, nearestNode);
-      }
-
-      this.debouncedSelect(e, nearestNode);
-    };
-    /**
-     *
-     * reset position to center of the scrollWrapper
-     *
-     * @param {HTMLElement} selectedNode
-     * @param {HTMLElement} scrollWnumber
-     * @param {number} duration
-     */
-
-
-    this.scrollToCenter = (selectedNode, scrollWrapper, duration) => {
-      selectedNode = selectedNode || this.selectedNode;
-      scrollWrapper = scrollWrapper || this.wrapper;
-
-      if ((0, _isElement.default)(selectedNode) && (0, _isElement.default)(scrollWrapper)) {
-        const scrollRect = scrollWrapper.getBoundingClientRect();
-        const selectedRect = selectedNode.getBoundingClientRect();
-        const targetTop = scrollWrapper.scrollTop + (selectedRect.top - (scrollRect.top + scrollRect.height / 2 - selectedRect.height / 2));
-        this.scrollToPos(targetTop, typeof duration === 'number' ? duration : _constants.numbers.DEFAULT_SCROLL_DURATION);
-      }
-    };
-
-    this.clickToSelectItem = e => {
-      // const index = this.foundation.selectNearestIndex(e.nativeEvent, this.list);
-      e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
-      const {
-        targetNode: node,
-        infoInList
-      } = this.foundation.getTargetNode(e, this.list);
-
-      if (node && infoInList && !infoInList.disabled) {
-        this.debouncedSelect(null, node);
-      }
-    };
-
-    this.getItmHeight = itm => itm && itm.offsetHeight || _constants.numbers.DEFAULT_ITEM_HEIGHT;
-
-    this.renderItemList = function () {
-      let prefixKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      const {
-        selectedIndex,
-        mode,
-        transform: commonTrans,
-        list
-      } = _this.props;
-      return (0, _map.default)(list).call(list, (item, index) => {
-        const {
-          transform: itemTrans
-        } = item;
-        const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
-        const cls = (0, _classnames.default)({
-          ["".concat(_constants.cssClasses.PREFIX, "-item-sel")]: selectedIndex === index && mode !== wheelMode,
-          ["".concat(_constants.cssClasses.PREFIX, "-item-disabled")]: Boolean(item.disabled)
-        });
-        let text = '';
-
-        if (selectedIndex === index) {
-          if (typeof transform === 'function') {
-            text = transform(item.value, item.text);
-          } else {
-            // eslint-disable-next-line
-            text = item.text == null ? item.value : item.text;
-          }
-        } else {
-          // eslint-disable-next-line
-          text = item.text == null ? item.value : item.text;
-        }
-
-        const events = {};
-
-        if (!_this.isWheelMode() && !item.disabled) {
-          events.onClick = () => _this.foundation.selectIndex(index, _this.list);
-        }
-
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-          _react.default.createElement("li", (0, _assign.default)({
-            key: prefixKey + index
-          }, events, {
-            className: cls
-          }), text)
-        );
-      });
-    };
-
-    this.renderNormalList = () => {
-      const {
-        list,
-        className,
-        style
-      } = this.props;
-      const inner = this.renderItemList();
-      const wrapperCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-item"), className);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: style,
-        className: wrapperCls,
-        ref: this._cacheWrapperNode
-      }, /*#__PURE__*/_react.default.createElement("ul", {
-        ref: this._cacheListNode
-      }, inner));
-    };
-    /**
-     * List of Rendering Unlimited Modes
-     */
-
-
-    this.renderInfiniteList = () => {
-      var _context, _context2;
-
-      const {
-        list,
-        cycled,
-        className,
-        style
-      } = this.props;
-      const {
-        prependCount,
-        appendCount
-      } = this.state;
-      const prependList = (0, _reduce.default)(_context = (0, _lodashEs.times)(prependCount)).call(_context, (arr, num) => {
-        const items = this.renderItemList("pre_".concat(num, "_"));
-        arr.unshift(...items);
-        return arr;
-      }, []);
-      const appendList = (0, _reduce.default)(_context2 = (0, _lodashEs.times)(appendCount)).call(_context2, (arr, num) => {
-        const items = this.renderItemList("app_".concat(num, "_"));
-        arr.push(...items);
-        return arr;
-      }, []);
-      const inner = this.renderItemList();
-      const listWrapperCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-list-outer"), {
-        ["".concat(_constants.cssClasses.PREFIX, "-list-outer-nocycle")]: !cycled
-      });
-      const wrapperCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-item-wheel"), className);
-      const selectorCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-selector"));
-      const preShadeCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-shade"), "".concat(_constants.cssClasses.PREFIX, "-shade-pre"));
-      const postShadeCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-shade"), "".concat(_constants.cssClasses.PREFIX, "-shade-post"));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: wrapperCls,
-        style: style
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: preShadeCls
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: selectorCls,
-        ref: this._cacheSelectorNode
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: postShadeCls
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: listWrapperCls,
-        ref: this._cacheWrapperNode,
-        onScroll: this.scrollToSelectItem
-      }, /*#__PURE__*/_react.default.createElement("ul", {
-        ref: this._cacheListNode,
-        onClick: this.clickToSelectItem
-      }, prependList, inner, appendList)));
-    };
-
-    this.state = {
-      prependCount: 0,
-      appendCount: 0 // selectedIndex: props.selectedIndex,
-      // fakeSelectedIndex: props.selectedIndex,
-
-    };
-    this.selectedNode = null;
-    this.willSelectNode = null;
-    this.list = null;
-    this.wrapper = null;
-    this.selector = null;
-    this.scrollAnimation = null; // cache if select action comes from outside
-
-    this.foundation = new _itemFoundation.default(this.adapter);
-  }
-
-  get adapter() {
-    var _this2 = this;
-
-    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
-      setState: (states, callback) => this.setState((0, _assign.default)({}, states), callback),
-      setPrependCount: prependCount => this.setState({
-        prependCount
-      }),
-      setAppendCount: appendCount => this.setState({
-        appendCount
-      }),
-      isDisabledIndex: this.isDisabledIndex,
-      setSelectedNode: selectedNode => this._cacheWillSelectNode(selectedNode),
-      notifySelectItem: function () {
-        return _this2.props.onSelect(...arguments);
-      },
-      scrollToCenter: this.scrollToCenter
-    });
-  }
-
-  componentDidMount() {
-    this.foundation.init();
-    const {
-      mode,
-      cycled,
-      selectedIndex,
-      list
-    } = this.props;
-    const selectedNode = this.getNodeByIndex(typeof selectedIndex === 'number' && selectedIndex > -1 ? selectedIndex : 0);
-
-    this._cacheSelectedNode(selectedNode);
-
-    this._cacheWillSelectNode(selectedNode);
-
-    if (mode === wheelMode && cycled) {
-      this.foundation.initWheelList(this.list, this.wrapper, () => {
-        // we have to scroll in next tick
-        // setTimeout(() => {
-        this.scrollToNode(selectedNode, 0); // });
-      });
-    } else {
-      this.scrollToNode(selectedNode, 0);
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      selectedIndex
-    } = this.props; // smooth scroll to selected option
-
-    if (prevProps.selectedIndex !== selectedIndex) {
-      const willSelectIndex = this.getIndexByNode(this.willSelectNode);
-
-      if (!this.indexIsSame(willSelectIndex, selectedIndex)) {
-        const newSelectedNode = this.getNodeByOffset(this.selectedNode, selectedIndex - prevProps.selectedIndex, this.list);
-
-        this._cacheWillSelectNode(newSelectedNode);
-      }
-
-      this._cacheSelectedNode(this.willSelectNode);
-
-      this.scrollToIndex(selectedIndex);
-    }
-  }
-  /**
-   *
-   * @param {HTMLElement} refNode
-   * @param {number} offset
-   * @param {HTMLElement} listWrapper
-   *
-   * @returns {HTMLElement}
-   */
-
-
-  getNodeByOffset(refNode, offset, listWrapper) {
-    const {
-      list
-    } = this.props;
-
-    if ((0, _isElement.default)(refNode) && (0, _isElement.default)(listWrapper) && typeof offset === 'number' && (0, _isArray.default)(list) && list.length) {
-      offset = offset % list.length;
-      const refIndex = this.getIndexByNode(refNode);
-      let targetIndex = refIndex + offset;
-
-      while (targetIndex < 0) {
-        targetIndex += list.length;
-      }
-
-      if (offset) {
-        return this.getNodeByIndex(targetIndex);
-      }
-    }
-
-    return refNode;
-  }
-
-  render() {
-    return this.isWheelMode() ? this.renderInfiniteList() : this.renderNormalList();
-  }
-
-}
-
-exports.default = ScrollItem;
-ScrollItem.propTypes = {
-  mode: _propTypes.default.string,
-  cycled: _propTypes.default.bool,
-  list: _propTypes.default.array,
-  selectedIndex: _propTypes.default.number,
-  onSelect: _propTypes.default.func,
-  transform: _propTypes.default.func,
-  className: _propTypes.default.string,
-  style: _propTypes.default.object,
-  motion: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
-  type: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-};
-ScrollItem.defaultProps = {
-  selectedIndex: 0,
-  motion: true,
-  // transform: identity,
-  list: [],
-  onSelect: _lodashEs.noop,
-  cycled: false,
-  mode: wheelMode
-};