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

package/lib/cjs/scrollList/scrollItem.js

@@ -0,0 +1,557 @@
+"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 _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _map2 = _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 _times2 = _interopRequireDefault(require("lodash/times"));
+
+var _findIndex2 = _interopRequireDefault(require("lodash/findIndex"));
+
+var _map3 = _interopRequireDefault(require("lodash/map"));
+
+var _find2 = _interopRequireDefault(require("lodash/find"));
+
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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._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, _findIndex2.default)(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, _findIndex2.default)(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, _findIndex2.default)(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, _map3.default)(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, _findIndex2.default)(this.list.children, node);
+
+    this.getNodeByIndex = index => {
+      if (index > -1) {
+        return (0, _find2.default)(this.list.children, (node, idx) => idx === index);
+      }
+
+      const defaultSelectedNode = (0, _find2.default)(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, _map2.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, _times2.default)(prependCount)).call(_context, (arr, num) => {
+        const items = this.renderItemList("pre_".concat(num, "_"));
+        arr.unshift(...items);
+        return arr;
+      }, []);
+      const appendList = (0, _reduce.default)(_context2 = (0, _times2.default)(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);
+    this.throttledAdjustList = (0, _throttle2.default)((e, nearestNode) => {
+      this.foundation.adjustInfiniteList(this.list, this.wrapper, nearestNode);
+    }, msPerFrame);
+    this.debouncedSelect = (0, _debounce2.default)((e, nearestNode) => {
+      this._cacheSelectedNode(nearestNode);
+
+      this.foundation.selectNode(nearestNode, this.list);
+    }, msPerFrame * 5);
+  }
+
+  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: _noop2.default,
+  cycled: false,
+  mode: wheelMode
+};