@alitajs/antd-plus/es/scrollable-bar/scrollable-bar.js

基于 ant-design 封装的偏业务组件

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; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { Children, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
import debounce from 'lodash/debounce';
import classNames from 'classnames';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import ResizeObserver from 'resize-observer-polyfill';
import Item from './item';
import { setTransform, isTransform3dSupported } from './utils';
var offset = 0;
var resizeObserver;
var defaultPrefixCls = 'ant-plus-scrollable-bar';

var ScrollableBar = function ScrollableBar(props) {
  var _classNames, _classNames2, _classNames4;

  var prefixCls = props.prefixCls,
      className = props.className,
      style = props.style,
      mode = props.mode,
      activeKey = props.activeKey,
      children = props.children,
      prevIcon = props.prevIcon,
      nextIcon = props.nextIcon,
      onNextClick = props.onNextClick,
      onPrevClick = props.onPrevClick,
      onItemClick = props.onItemClick,
      direction = props.direction,
      scrollAnimated = props.scrollAnimated;
  var navRef = useRef(null);
  var navWrapRef = useRef(null);
  var containerRef = useRef(null);
  var activeItemRef = useRef(null);
  var navContainerRef = useRef(null);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      next = _useState2[0],
      setNext = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      prev = _useState4[0],
      setPrev = _useState4[1];

  var _useState5 = useState(''),
      _useState6 = _slicedToArray(_useState5, 2),
      currentKey = _useState6[0],
      setCurrentKey = _useState6[1];

  var debouncedResize = useCallback(debounce(function () {
    setNextPrev();
    scrollToActiveNode();
  }, 200), []);
  useEffect(function () {
    var containerNode = containerRef.current;
    resizeObserver = new ResizeObserver(debouncedResize);
    resizeObserver.observe(containerNode);

    (function () {
      if (resizeObserver) {
        resizeObserver.disconnect();
      }
    });
  }, [1]);
  useEffect(function () {
    setCurrentKey(activeKey);
    setNextPrev();
    scrollToActiveNode();
  }, [props.activeKey, props.mode, props.children]);

  var handlePrevClick = function handlePrevClick(e) {
    if (!prev) return;
    onPrevClick && onPrevClick(e);
    var navWrapNode = navWrapRef.current;
    var navWrapNodeWH = getOffsetWH(navWrapNode);
    setOffset(offset + navWrapNodeWH);
  };

  var handleNextClick = function handleNextClick(e) {
    if (!next) return;
    onNextClick && onNextClick(e);
    var navWrapNode = navWrapRef.current;
    var navWrapNodeWH = getOffsetWH(navWrapNode);
    setOffset(offset - navWrapNodeWH);
  };

  var getOffsetWH = function getOffsetWH(node) {
    var prop = 'offsetWidth';

    if (mode === 'vertical') {
      prop = 'offsetHeight';
    }

    return node && node[prop];
  };

  var getOffsetLT = function getOffsetLT(node) {
    var prop = 'left';

    if (mode === 'vertical') {
      prop = 'top';
    }

    return node.getBoundingClientRect()[prop];
  };

  var getScrollWH = function getScrollWH(node) {
    var prop = 'scrollWidth';

    if (mode === 'vertical') {
      prop = 'scrollHeight';
    }

    return node && node[prop];
  };

  var setNextPrev = function setNextPrev() {
    var navNode = navRef.current;
    var navWrapNode = navWrapRef.current;
    var containerNode = containerRef.current;
    var navContainerNode = navContainerRef.current;
    var navNodeWH = getScrollWH(navContainerNode || navNode);
    var containerNodeWH = getOffsetWH(containerNode) + 1;
    var navWrapNodeWH = getOffsetWH(navWrapNode);
    var minOffset = containerNodeWH - navNodeWH;
    var prevCopy = prev,
        nextCopy = next;

    if (minOffset >= 0) {
      nextCopy = false;
      setOffset(0, false);
      offset = 0;
    } else if (minOffset < offset) {
      nextCopy = true;
    } else {
      nextCopy = false;
      var realOffset = navWrapNodeWH - navNodeWH;
      setOffset(realOffset, false);
      offset = realOffset;
    }

    if (offset < 0) {
      prevCopy = true;
    } else {
      prevCopy = false;
    }

    setNext(nextCopy);
    setPrev(prevCopy);
    return {
      next: nextCopy,
      prev: prevCopy
    };
  };
  /**
   *
   * @param offset
   * @param checkNextPrev
   */


  var setOffset = function setOffset(value) {
    var checkNextPrev = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    var target = Math.min(0, value);

    if (offset !== target) {
      offset = target;
      var navOffset = {};
      var navNode = navRef.current;
      var navStyle = navNode && navNode.style || {};
      var transformSupported = isTransform3dSupported(navStyle);

      if (mode === 'vertical') {
        if (transformSupported) {
          navOffset = {
            value: "translate3d(0,".concat(target, "px,0)")
          };
        } else {
          navOffset = {
            name: 'top',
            value: "".concat(target, "px")
          };
        }
      } else if (transformSupported) {
        if (direction === 'rtl') {
          target = -target;
        }

        navOffset = {
          value: "translate3d(".concat(target, "px,0,0)")
        };
      } else {
        navOffset = {
          name: 'left',
          value: "".concat(target, "px")
        };
      }

      if (transformSupported) {
        setTransform(navStyle, navOffset.value);
      } else {
        navStyle[navOffset.name] = navOffset.value;
      }

      if (checkNextPrev) {
        setNextPrev();
      }
    }
  };
  /**
   * 滚动到活动的节点
   * @param e
   */


  var scrollToActiveNode = function scrollToActiveNode(e) {
    var navWrapNode = navWrapRef.current;
    var activeItemNode = activeItemRef.current;
    if (e && e.target !== e.currentTarget || !activeItemNode) return;
    if (next || prev) return;
    var activeTabWH = getScrollWH(activeItemNode);
    var navWrapNodeWH = getOffsetWH(navWrapNode);
    var wrapOffset = getOffsetLT(navWrapNode);
    var activeTabOffset = getOffsetLT(activeItemNode);
    var offsetCopy = offset;

    if (wrapOffset > activeTabOffset) {
      offsetCopy += wrapOffset - activeTabOffset;
      setOffset(offsetCopy);
    } else if (wrapOffset + navWrapNodeWH < activeTabOffset + activeTabWH) {
      offsetCopy -= activeTabOffset + activeTabWH - (wrapOffset + navWrapNodeWH);
      setOffset(offsetCopy);
    }
  };

  var prevTransitionEnd = function prevTransitionEnd(e) {
    if (e.propertyName !== 'opacity') return;
    var containerNode = containerRef.current;
    scrollToActiveNode({
      target: containerNode,
      currentTarget: containerNode
    });
  };

  var showNextPrev = prev || next;
  var prevButton = /*#__PURE__*/React.createElement("span", {
    unselectable: "on",
    onClick: handlePrevClick,
    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-prev"), 1), _defineProperty(_classNames, "".concat(prefixCls, "-btn-disabled"), !prev), _defineProperty(_classNames, "".concat(prefixCls, "-arrow-show"), showNextPrev), _classNames)),
    onTransitionEnd: prevTransitionEnd
  }, prevIcon || /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-prev-icon")
  }, /*#__PURE__*/React.createElement(LeftOutlined, null)));
  var nextButton = /*#__PURE__*/React.createElement("span", {
    onClick: handleNextClick,
    unselectable: "on",
    className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-next"), 1), _defineProperty(_classNames2, "".concat(prefixCls, "-btn-disabled"), !next), _defineProperty(_classNames2, "".concat(prefixCls, "-arrow-show"), showNextPrev), _classNames2))
  }, nextIcon || /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-next-icon")
  }, /*#__PURE__*/React.createElement(RightOutlined, null)));

  var handleItemClick = function handleItemClick(key) {
    if (key) {
      setCurrentKey(key);
      debouncedResize();
    }

    onItemClick && onItemClick(key);
  };

  var childNodes = [];
  Children.forEach(children, function (child) {
    if (!child) return;
    var key = child.key;
    var className = child['className'];
    var ref = {
      ref: null
    };

    if (currentKey === key) {
      ref.ref = activeItemRef;
    }

    var node = /*#__PURE__*/cloneElement(child, Object.assign({
      prefixCls: "".concat(prefixCls, "-item"),
      className: classNames(className, _defineProperty({}, "".concat(prefixCls, "-item-active"), currentKey === key)),
      key: key,
      onClick: function onClick() {
        handleItemClick(key);
      }
    }, ref));
    childNodes.push(node);
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(className, (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls), true), _defineProperty(_classNames4, "".concat(prefixCls, "-scrolling"), showNextPrev), _classNames4)),
    style: style,
    ref: containerRef
  }, prevButton, nextButton, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-nav-wrap"),
    ref: navWrapRef
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-nav-scroll")
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-nav"), _defineProperty({}, "".concat(prefixCls, "-nav-animated"), scrollAnimated)),
    ref: navRef
  }, /*#__PURE__*/React.createElement("div", {
    ref: navContainerRef
  }, childNodes)))));
};

ScrollableBar.defaultProps = {
  prefixCls: defaultPrefixCls,
  mode: 'horizontal',
  scrollAnimated: true,
  onItemClick: function onItemClick(key) {}
};
ScrollableBar.Item = Item;
export default ScrollableBar;