choerodon-ui/lib/tabs/TabBar.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _classnames7 = _interopRequireDefault(require("classnames"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _button = _interopRequireDefault(require("../../pro/lib/button"));

var _enum = require("../../pro/lib/button/enum");

var _ModalProvider = require("../../pro/lib/modal-provider/ModalProvider");

var _iteratorUtils = require("../../pro/lib/_util/iteratorUtils");

var _dropdown = _interopRequireDefault(require("../../pro/lib/dropdown"));

var _localeContext = require("../../pro/lib/locale-context");

var _utils = require("./utils");

var _warning = _interopRequireDefault(require("../_util/warning"));

var _ripple = _interopRequireDefault(require("../ripple"));

var _TabBarInner = _interopRequireDefault(require("./TabBarInner"));

var _EventManager = _interopRequireDefault(require("../_util/EventManager"));

var _enum2 = require("./enum");

var _icon = _interopRequireDefault(require("../icon"));

var _menu = _interopRequireDefault(require("../menu"));

var _MenuItem = _interopRequireDefault(require("../menu/MenuItem"));

var _badge = _interopRequireDefault(require("../badge"));

var _TabsContext = _interopRequireDefault(require("./TabsContext"));

var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));

var _enum3 = require("../_util/enum");

var _customizationSettings = _interopRequireDefault(require("./customization-settings"));

var _Count = _interopRequireDefault(require("./Count"));

var _TabsAddBtn = _interopRequireDefault(require("./TabsAddBtn"));

var _InvalidBadge = _interopRequireDefault(require("./InvalidBadge"));

var _resizeObserver = _interopRequireDefault(require("../_util/resizeObserver"));

var _excluded = ["scrollAnimated", "className", "style", "inkBarStyle", "extraContent", "tabBarGutter", "inkBarAnimated", "type", "showMore", "hideAdd", "onRemoveTab", "onEdit"];

var TabBar = function TabBar(props) {
  var scrollAnimated = props.scrollAnimated,
      className = props.className,
      style = props.style,
      inkBarStyle = props.inkBarStyle,
      extraContent = props.extraContent,
      tabBarGutter = props.tabBarGutter,
      inkBarAnimated = props.inkBarAnimated,
      type = props.type,
      showMore = props.showMore,
      hideAdd = props.hideAdd,
      onRemoveTab = props.onRemoveTab,
      onEdit = props.onEdit,
      restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);

  var _useContext = (0, _react.useContext)(_TabsContext["default"]),
      keyboard = _useContext.keyboard,
      customizable = _useContext.customizable,
      prefixCls = _useContext.prefixCls,
      activeKey = _useContext.activeKey,
      activeGroupKey = _useContext.activeGroupKey,
      tabBarPosition = _useContext.tabBarPosition,
      _useContext$hideOnlyG = _useContext.hideOnlyGroup,
      hideOnlyGroup = _useContext$hideOnlyG === void 0 ? false : _useContext$hideOnlyG,
      groupedPanelsMap = _useContext.groupedPanelsMap,
      currentPanelMap = _useContext.currentPanelMap,
      validationMap = _useContext.validationMap,
      onTabClick = _useContext.onTabClick,
      changeActiveKey = _useContext.changeActiveKey,
      rippleDisabled = _useContext.rippleDisabled;

  var modal = (0, _ModalProvider.useModal)();
  var openCustomizationModal = (0, _react.useCallback)(function () {
    if (customizable) {
      var modalProps = {
        drawer: true,
        size: _enum3.Size.small,
        title: (0, _localeContext.$l)('Tabs', 'customization_settings'),
        children: /*#__PURE__*/_react["default"].createElement(_customizationSettings["default"], null),
        bodyStyle: {
          overflow: 'hidden auto',
          padding: 0
        }
      };
      modalProps.okText = (0, _localeContext.$l)('Tabs', 'save');
      modal.open(modalProps);
    }
  }, [customizable, modal]);
  var getNextActiveKey = (0, _react.useCallback)(function (next) {
    var list = [];
    currentPanelMap.forEach(function (c, key) {
      if (!c.disabled) {
        if (next) {
          list.push(key);
        } else {
          list.unshift(key);
        }
      }
    });
    var length = list.length;

    if (activeKey && length) {
      var i = list.indexOf(activeKey);
      var itemIndex = i === length - 1 ? 0 : i + 1;
      return list[itemIndex] || list[0];
    }

    return undefined;
  }, [activeKey, currentPanelMap]);
  var handleKeyDown = (0, _react.useCallback)(function (e) {
    var keyCode = e.keyCode;

    if (keyCode === _KeyCode["default"].RIGHT || keyCode === _KeyCode["default"].DOWN) {
      e.preventDefault();
      var nextKey = getNextActiveKey(true);

      if (nextKey) {
        changeActiveKey(nextKey);
      }
    } else if (keyCode === _KeyCode["default"].LEFT || keyCode === _KeyCode["default"].UP) {
      e.preventDefault();
      var previousKey = getNextActiveKey(false);

      if (previousKey) {
        changeActiveKey(previousKey);
      }
    }
  }, [changeActiveKey, getNextActiveKey]);
  var handleTabClick = (0, _react.useCallback)(function (key) {
    if (onTabClick) {
      onTabClick(key);
    }

    changeActiveKey(key);
  }, [changeActiveKey, onTabClick]);
  var handleGroupSelect = (0, _react.useCallback)(function (param) {
    var key = param.key;

    if (activeGroupKey !== key) {
      var newActiveKey = (0, _utils.getActiveKeyByGroupKey)(groupedPanelsMap, key);

      if (newActiveKey) {
        changeActiveKey(newActiveKey, true);
      }
    }
  }, [changeActiveKey, activeGroupKey, groupedPanelsMap]);
  var getOffsetWH = (0, _react.useCallback)(function (node) {
    return node[(0, _utils.isVertical)(tabBarPosition) ? 'offsetHeight' : 'offsetWidth'];
  }, [tabBarPosition]);
  var getScrollWH = (0, _react.useCallback)(function (node) {
    return node[(0, _utils.isVertical)(tabBarPosition) ? 'scrollHeight' : 'scrollWidth'];
  }, [tabBarPosition]);
  var getOffsetLT = (0, _react.useCallback)(function (node) {
    return node.getBoundingClientRect()[(0, _utils.isVertical)(tabBarPosition) ? 'top' : 'left'];
  }, [tabBarPosition]);
  var resizeEvent = (0, _react.useMemo)(function () {
    return new _EventManager["default"](typeof window === 'undefined' ? undefined : window);
  }, []);
  var lastNextPrevShownRef = (0, _react.useRef)();
  var offsetRef = (0, _react.useRef)(0);
  var containerRef = (0, _react.useRef)(null);
  var navWrapRef = (0, _react.useRef)(null);
  var navScrollRef = (0, _react.useRef)(null);
  var navRef = (0, _react.useRef)(null);
  var rootRef = (0, _react.useRef)(null);
  var activeTabRef = (0, _react.useRef)(null);
  var inkBarRef = (0, _react.useRef)(null);

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      next = _useState2[0],
      setNext = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      prev = _useState4[0],
      setPrev = _useState4[1];

  var _useState5 = (0, _react.useState)(activeKey),
      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
      prevActiveKey = _useState6[0],
      setActiveKey = _useState6[1];

  var _useState7 = (0, _react.useState)([]),
      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
      menuList = _useState8[0],
      setMenuList = _useState8[1];

  var tabsRef = (0, _react.useRef)([]);

  var getTabs = function getTabs() {
    var length = currentPanelMap.size;
    var tabBarRef = (0, _toConsumableArray2["default"])(currentPanelMap.entries()).map(function (item) {
      return {
        key: item[0],
        value: item[1],
        ref: /*#__PURE__*/_react["default"].createRef()
      };
    });
    tabsRef.current = tabBarRef;
    var isSecond = type === _enum2.TabsType['second-level'];
    return (0, _iteratorUtils.iteratorReduce)(currentPanelMap.entries(), function (rst, _ref, index) {
      var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
          key = _ref2[0],
          child = _ref2[1];

      var disabled = child.disabled,
          _child$closable = child.closable,
          closable = _child$closable === void 0 ? true : _child$closable,
          showCount = child.showCount,
          count = child.count,
          overflowCount = child.overflowCount,
          countRenderer = child.countRenderer;
      var classes = isSecond ? ["".concat(prefixCls, "-second-tab")] : ["".concat(prefixCls, "-tab")];
      var tabProps = {
        tabKey: key,
        role: 'tab',
        'aria-disabled': 'false',
        'aria-selected': 'false',
        style: {
          marginRight: tabBarGutter && index === length - 1 ? 0 : tabBarGutter
        }
      };

      if (disabled) {
        classes.push("".concat(classes, "-disabled"));
        tabProps['aria-disabled'] = 'true';
      } else {
        tabProps.onTabClick = handleTabClick;
      }

      if (activeKey === key) {
        classes.push(isSecond ? "".concat(classes, "-active") : "".concat(classes, "-active"));
        tabBarRef[index].ref = activeTabRef;
        tabProps['aria-selected'] = 'true';
      }

      tabProps.className = classes.join(' ');
      (0, _warning["default"])('tab' in child || 'title' in child, 'There must be `tab` or `title` property on children of Tabs.');

      var title = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _utils.getHeader)(child), showCount && /*#__PURE__*/_react["default"].createElement(_Count["default"], {
        prefixCls: prefixCls,
        count: count,
        renderer: countRenderer,
        overflowCount: overflowCount,
        asyncCount: renderInkBar
      }));

      rst.push( /*#__PURE__*/_react["default"].createElement(_ripple["default"], {
        disabled: disabled || rippleDisabled,
        key: key
      }, /*#__PURE__*/_react["default"].createElement(_TabBarInner["default"], (0, _extends2["default"])({
        ref: tabBarRef[index].ref
      }, tabProps), /*#__PURE__*/_react["default"].createElement(_InvalidBadge["default"], {
        prefixCls: prefixCls,
        isInvalid: function isInvalid() {
          return key !== activeKey && validationMap.get(key) === false;
        }
      }, type === _enum2.TabsType['editable-card'] ? /*#__PURE__*/_react["default"].createElement("div", {
        className: closable ? undefined : "".concat(prefixCls, "-tab-unclosable")
      }, title, closable && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: "close",
        onClick: function onClick(e) {
          return onRemoveTab(key, e);
        }
      })) : title))));
      return rst;
    }, []);
  };

  var isNextPrevShown = (0, _react.useCallback)(function (state) {
    if (state) {
      return state.next || state.prev;
    }

    return next || prev;
  }, [next, prev]);

  var onMenuClick = function onMenuClick(_ref3) {
    var key = _ref3.key;
    changeActiveKey(key);
    scrollToActiveTab();
  };

  var menu = function menu() {
    return /*#__PURE__*/_react["default"].createElement(_menu["default"], {
      style: {
        maxHeight: 200,
        overflow: 'auto'
      },
      onClick: onMenuClick
    }, menuList.map(function (x) {
      return /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
        key: x.key
      }, /*#__PURE__*/_react["default"].createElement("a", {
        target: "_blank"
      }, (0, _utils.getHeader)(x)));
    }));
  };

  var getContent = function getContent(contents) {
    var vertical = (0, _utils.isVertical)(tabBarPosition);
    var isEditCard = type === _enum2.TabsType['editable-card'];
    var classes = (0, _classnames7["default"])("".concat(prefixCls, "-extra-content"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-extra-vertical-content"), vertical));
    var dropDownClass = (0, _classnames7["default"])("".concat(prefixCls, "-more-tab"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-more-vertical-tab"), vertical));
    var nextPrevShown = isNextPrevShown();

    var moreTool = nextPrevShown && !!showMore && /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
      overlay: menu,
      key: "more"
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "more_horiz",
      className: dropDownClass
    }));

    var addTool = isEditCard && nextPrevShown && !hideAdd && /*#__PURE__*/_react["default"].createElement(_TabsAddBtn["default"], {
      key: "add",
      onEdit: onEdit,
      vertical: vertical,
      isFixed: true
    }); // 这里是固定项


    var toolBar = [moreTool, addTool];

    if (extraContent || customizable) {
      return [contents, /*#__PURE__*/_react["default"].createElement("div", {
        key: "extra",
        className: classes
      }, customizable && /*#__PURE__*/_react["default"].createElement(_button["default"], {
        className: "".concat(prefixCls, "-hover-button"),
        funcType: _enum.FuncType.flat,
        icon: "predefine",
        size: _enum3.Size.small,
        onClick: openCustomizationModal
      }), toolBar, extraContent)];
    }

    return [contents, /*#__PURE__*/_react["default"].createElement("div", {
      key: "extra",
      className: classes
    }, toolBar)];
  };

  var getGroupNode = function getGroupNode() {
    if (groupedPanelsMap.size > Number(hideOnlyGroup)) {
      var items = [];
      groupedPanelsMap.forEach(function (pane, key) {
        var _pane$group = pane.group,
            tab = _pane$group.tab,
            disabled = _pane$group.disabled,
            dot = _pane$group.dot,
            panelsMap = pane.panelsMap;

        if (panelsMap.size) {
          items.push( /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
            key: String(key),
            disabled: disabled
          }, /*#__PURE__*/_react["default"].createElement(_InvalidBadge["default"], {
            prefixCls: prefixCls,
            isInvalid: function isInvalid() {
              return activeGroupKey !== key && (0, _iteratorUtils.iteratorSome)(panelsMap.keys(), function (paneKey) {
                return validationMap.get(paneKey) === false;
              });
            }
          }, /*#__PURE__*/_react["default"].createElement(_badge["default"], {
            dot: dot
          }, tab))));
        }
      });

      if (items.length > 1) {
        return /*#__PURE__*/_react["default"].createElement(_menu["default"], {
          prefixCls: "".concat(prefixCls, "-group"),
          selectedKeys: activeGroupKey ? [activeGroupKey] : [],
          onSelect: handleGroupSelect,
          mode: "vertical"
        }, items);
      }
    }

    return undefined;
  };

  var getInkBarNode = function getInkBarNode() {
    var inkBarClassName = "".concat(prefixCls, "-ink-bar");
    var classes = (0, _classnames7["default"])(inkBarClassName, inkBarAnimated ? "".concat(inkBarClassName, "-animated") : "".concat(inkBarClassName, "-no-animated"));
    return /*#__PURE__*/_react["default"].createElement("div", {
      style: inkBarStyle,
      className: classes,
      key: "inkBar",
      ref: inkBarRef
    });
  };

  var setOffset = (0, _react.useCallback)(function (offset, callback) {
    var nav = navRef.current; // 节点长度

    var navScroll = navScrollRef.current;

    if (nav && navScroll) {
      var target = Math.round(offset);

      if (offsetRef.current !== target) {
        offsetRef.current = Math.abs(target);
        var navOffset = {};
        var navStyle = nav.style;
        var transformSupported = (0, _utils.isTransformSupported)(navStyle);

        if ((0, _utils.isVertical)(tabBarPosition)) {
          if (transformSupported) {
            var top = Math.abs(target);

            if (navScroll.scrollTo) {
              navScroll.scrollTo({
                top: top
              });
            } else {
              navScroll.scrollTop = top;
            }
          } else {
            navOffset.name = 'top';
            navOffset.value = "".concat(target, "px");
          }
        } else if (transformSupported) {
          var left = Math.abs(target);

          if (navScroll.scrollTo) {
            navScroll.scrollTo({
              left: left
            });
          } else {
            navScroll.scrollLeft = left;
          }
        } else {
          navOffset.name = 'left';
          navOffset.value = "".concat(target, "px");
        }

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

        if (callback) {
          callback();
        }
      }
    }
  }, [offsetRef, navRef, tabBarPosition]);
  var setNextPrev = (0, _react.useCallback)(function () {
    var navNode = navRef.current;
    var container = containerRef.current;
    var navWrap = navWrapRef.current;

    if (navNode && container && navWrap) {
      var navNodeWH = getScrollWH(navNode);
      var containerWH = getOffsetWH(container);
      var navWrapNodeWH = getOffsetWH(navWrap);
      var offset = Math.round(offsetRef.current); // 当容器小于tab的时候使用最小值才可以防止回弹问题。

      var minOffset = Math.round(navNodeWH - navWrapNodeWH);
      var $next = next;
      var $prev = prev;

      if (offset === 0 && containerWH < navNodeWH) {
        $prev = false;
        $next = true;
      } else if (minOffset > 0 && offset >= minOffset) {
        $prev = true;
        $next = false;
      } else if (offset > 0) {
        $prev = true;
        $next = true;
      } else {
        $prev = false;
        $next = false;
      }

      if (next !== $next) {
        setNext($next);
      }

      if (prev !== $prev) {
        setPrev($prev);
      }

      return {
        next: $next,
        prev: $prev
      };
    }
  }, [next, prev, navRef, containerRef, navWrapRef, offsetRef, getScrollWH, getOffsetWH]);
  var toPrev = (0, _react.useCallback)(function () {
    var navWrapNode = navWrapRef.current;

    if (navWrapNode) {
      var navWrapNodeWH = getOffsetWH(navWrapNode);
      var offset = offsetRef.current - navWrapNodeWH;
      setOffset(offset < 0 ? 0 : 0 - offset, setNextPrev);
    }
  }, [getOffsetWH, setOffset, navWrapRef, setNextPrev]);
  var toNext = (0, _react.useCallback)(function () {
    var navWrapNode = navWrapRef.current;
    var navNode = navRef.current;

    if (navWrapNode && navNode) {
      var navNodeWH = getScrollWH(navNode);
      var navWrapNodeWH = getOffsetWH(navWrapNode);
      var offset = offsetRef.current + navWrapNodeWH;
      setOffset(0 - (offset > navNodeWH ? navNodeWH - navWrapNodeWH : offset), setNextPrev);
    }
  }, [getOffsetWH, setOffset, navWrapRef, setNextPrev]);
  var scrollToActiveTab = (0, _react.useCallback)(function (e) {
    var vertical = (0, _utils.isVertical)(tabBarPosition);
    var activeTab = activeTabRef.current;
    var navWrap = navWrapRef.current;

    if (e && e.target !== e.currentTarget || !activeTab || !navWrap) {
      return;
    } // when not scrollable or enter scrollable first time, don't emit scrolling


    var needToSroll = isNextPrevShown();

    if (!needToSroll) {
      return;
    }

    var activeTabWH = getOffsetWH(activeTab) + (0, _utils.getStyle)(activeTab, vertical ? 'margin-bottom' : 'margin-right');
    var navWrapNodeWH = getOffsetWH(navWrap);
    var offset = navScrollRef.current ? vertical ? navScrollRef.current.scrollTop : navScrollRef.current.scrollLeft : 0;
    var wrapOffset = getOffsetLT(navWrap);
    var activeTabOffset = getOffsetLT(activeTab);

    if (wrapOffset > activeTabOffset) {
      offset -= wrapOffset - activeTabOffset;
      setOffset(offset, setNextPrev);
    } else if (wrapOffset + navWrapNodeWH < activeTabOffset + activeTabWH) {
      offset += activeTabOffset + activeTabWH - (navWrapNodeWH + wrapOffset);
      setOffset(offset, setNextPrev);
    }
  }, [activeTabRef, navWrapRef, lastNextPrevShownRef, getScrollWH, getOffsetWH, getOffsetLT, setOffset, setNextPrev, isNextPrevShown]);
  var prevTransitionEnd = (0, _react.useCallback)(function (e) {
    if (e.propertyName !== 'opacity') {
      return;
    }

    var current = containerRef.current;

    if (current) {
      scrollToActiveTab({
        target: current,
        currentTarget: current
      });
    }
  }, [scrollToActiveTab, containerRef]);

  var getScrollBarNode = function getScrollBarNode(content) {
    var _classnames3, _classnames4, _classnames5;

    var showNextPrev = isNextPrevShown();

    var prevButton = /*#__PURE__*/_react["default"].createElement("span", {
      onClick: prev ? toPrev : undefined,
      unselectable: "on",
      className: (0, _classnames7["default"])("".concat(prefixCls, "-tab-prev"), (_classnames3 = {}, (0, _defineProperty2["default"])(_classnames3, "".concat(prefixCls, "-tab-btn-disabled"), !prev), (0, _defineProperty2["default"])(_classnames3, "".concat(prefixCls, "-tab-arrow-show"), showNextPrev), _classnames3)),
      onTransitionEnd: prevTransitionEnd
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-tab-prev-icon")
    }));

    var nextButton = /*#__PURE__*/_react["default"].createElement("span", {
      onClick: next ? toNext : undefined,
      unselectable: "on",
      className: (0, _classnames7["default"])((_classnames4 = {}, (0, _defineProperty2["default"])(_classnames4, "".concat(prefixCls, "-tab-next"), 1), (0, _defineProperty2["default"])(_classnames4, "".concat(prefixCls, "-tab-btn-disabled"), !next), (0, _defineProperty2["default"])(_classnames4, "".concat(prefixCls, "-tab-arrow-show"), showNextPrev), _classnames4))
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-tab-next-icon")
    }));

    var navClassName = type === _enum2.TabsType['second-level'] ? "".concat(prefixCls, "-second-nav") : "".concat(prefixCls, "-nav");
    var navClasses = (0, _classnames7["default"])(navClassName, scrollAnimated ? "".concat(navClassName, "-animated") : "".concat(navClassName, "-no-animated"));
    var vertical = (0, _utils.isVertical)(tabBarPosition);
    var isEditCard = type === _enum2.TabsType['editable-card'];
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: (0, _classnames7["default"])((_classnames5 = {}, (0, _defineProperty2["default"])(_classnames5, "".concat(prefixCls, "-nav-container"), 1), (0, _defineProperty2["default"])(_classnames5, "".concat(prefixCls, "-nav-container-scrolling"), showNextPrev && !showMore), _classnames5)),
      key: "container",
      ref: containerRef
    }, !showMore && prevButton, !showMore && nextButton, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-nav-wrap"),
      ref: navWrapRef
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-nav-scroll"),
      ref: navScrollRef
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: navClasses,
      ref: navRef
    }, content, !hideAdd && isEditCard && /*#__PURE__*/_react["default"].createElement(_TabsAddBtn["default"], {
      prefixCls: prefixCls,
      extraPrefixCls: showNextPrev ? 'none' : 'inline-flex',
      vertical: vertical,
      onEdit: onEdit
    })))));
  }; // 发生滚动事件，改变更多的菜单。


  var handleScrollEvent = (0, _react.useCallback)(function (_ref4) {
    var target = _ref4.target;
    var vertical = (0, _utils.isVertical)(tabBarPosition);
    var scrollLeft = target.scrollLeft,
        scrollTop = target.scrollTop;
    var hiddenOffset = 0;
    var prevMenuList = []; // 计算前面隐藏的tabs

    for (var i = 0; i < tabsRef.current.length; i++) {
      var _tabsRef$current$i = tabsRef.current[i],
          key = _tabsRef$current$i.key,
          value = _tabsRef$current$i.value,
          ref = _tabsRef$current$i.ref;
      var dom = ref.current;
      var currentTabOffset = 0;

      if (dom) {
        currentTabOffset = vertical ? dom.offsetHeight + (0, _utils.getStyle)(dom, 'margin-bottom') : dom.offsetWidth + (0, _utils.getStyle)(dom, 'margin-right');
      }

      hiddenOffset += currentTabOffset || 0;

      if (!vertical && scrollLeft > 0 || vertical && scrollTop > 0) {
        prevMenuList.push((0, _objectSpread2["default"])({
          key: key
        }, value));
      }

      if (!vertical && scrollLeft < hiddenOffset || vertical && scrollTop < hiddenOffset) {
        break;
      }
    } // 计算后面隐藏的tabs


    var nextMenuList = [];
    var navNode = navRef.current; // 节点长度

    var navWrap = navWrapRef.current; // 节点滚动区域

    var totalHiddenOffset = 0;

    if (navNode && navWrap) {
      var navNodeWH = getScrollWH(navNode);
      var navWrapNodeWH = getOffsetWH(navWrap);
      totalHiddenOffset = navNodeWH - navWrapNodeWH - (vertical ? scrollTop : scrollLeft);
    }

    var hiddenBackOffset = 0;

    for (var _i = tabsRef.current.length - 1; _i >= 0; _i--) {
      var _tabsRef$current$_i = tabsRef.current[_i],
          _key = _tabsRef$current$_i.key,
          _value = _tabsRef$current$_i.value,
          _ref5 = _tabsRef$current$_i.ref;
      var _dom = _ref5.current;
      var endTabOffset = 0;

      if (_dom) {
        endTabOffset = vertical ? _dom.offsetHeight + (0, _utils.getStyle)(_dom, 'margin-bottom') : _dom.offsetWidth + (0, _utils.getStyle)(_dom, 'margin-right');
      }

      hiddenBackOffset += endTabOffset || 0;

      if (totalHiddenOffset > 0) {
        nextMenuList.push((0, _objectSpread2["default"])({
          key: _key
        }, _value));
      }

      if (hiddenBackOffset >= totalHiddenOffset) {
        break;
      }
    }

    nextMenuList.reverse();
    setMenuList(prevMenuList.concat(nextMenuList));
    setOffset(vertical ? scrollTop : scrollLeft, setNextPrev);
  }, [tabBarPosition]);

  var renderInkBar = function renderInkBar() {
    var inkBarNode = inkBarRef.current;

    if (inkBarNode) {
      var inkBarNodeStyle = inkBarNode.style;
      var activeTab = activeTabRef.current;
      var rootNode = rootRef.current;

      if (activeTab && rootNode) {
        var wrapNode = navRef.current || rootNode;
        var transformSupported = (0, _utils.isTransformSupported)(inkBarNodeStyle);

        if (!(0, _utils.isVertical)(tabBarPosition)) {
          var left = (0, _utils.getLeft)(activeTab, wrapNode);
          var width = activeTab.offsetWidth; // If tabNode'width width equal to wrapNode'width when tabBarPosition is top or bottom
          // It means no css working, then ink bar should not have width until css is loaded

          if (width === rootNode.offsetWidth) {
            width = 0;
          } else if (inkBarStyle && inkBarStyle.width !== undefined) {
            width = parseFloat(inkBarStyle.width);

            if (width) {
              left += (activeTab.offsetWidth - width) / 2;
            }
          } // use 3d gpu to optimize render


          if (transformSupported) {
            (0, _utils.setTransform)(inkBarNodeStyle, "translate3d(".concat(left, "px,0,0)"));
            inkBarNodeStyle.width = "".concat(width, "px");
            inkBarNodeStyle.height = '';
          } else {
            inkBarNodeStyle.left = "".concat(left, "px");
            inkBarNodeStyle.top = '';
            inkBarNodeStyle.bottom = '';
            inkBarNodeStyle.right = "".concat(wrapNode.offsetWidth - left - width, "px");
          }
        } else {
          var top = (0, _utils.getTop)(activeTab, wrapNode);
          var height = activeTab.offsetHeight;

          if (inkBarStyle && inkBarStyle.height !== undefined) {
            height = parseFloat(inkBarStyle.height);

            if (height) {
              top += (activeTab.offsetHeight - height) / 2;
            }
          }

          if (transformSupported) {
            (0, _utils.setTransform)(inkBarNodeStyle, "translate3d(0,".concat(top, "px,0)"));
            inkBarNodeStyle.height = "".concat(height, "px");
            inkBarNodeStyle.width = '';
          } else {
            inkBarNodeStyle.left = '';
            inkBarNodeStyle.right = '';
            inkBarNodeStyle.top = "".concat(top, "px");
            inkBarNodeStyle.bottom = "".concat(wrapNode.offsetHeight - top - height, "px");
          }
        }
      }

      inkBarNodeStyle.visibility = activeTab ? 'visible' : 'hidden';
    }
  };

  (0, _react.useLayoutEffect)(function () {
    renderInkBar();
  });
  (0, _react.useEffect)(function () {
    handleScrollEvent({
      target: {
        scrollLeft: 0,
        scrollTop: 0
      }
    });
    var debouncedScroll = (0, _debounce["default"])(function (e) {
      handleScrollEvent(e);
    }, 200);
    var debouncedWheel = (0, _debounce["default"])(function (e) {
      var originalScrollLeft = navScrollRef && navScrollRef.current ? navScrollRef.current.scrollLeft : 0;
      var scrollLeft = originalScrollLeft + e.deltaY;
      handleScrollEvent({
        target: {
          scrollLeft: scrollLeft > 0 ? scrollLeft : 0,
          scrollTop: 0
        }
      });
    }, 50);

    var debouncedWheelWrap = function debouncedWheelWrap(e) {
      // 仅处理横向显示且为鼠标滚动
      if ((0, _utils.isVertical)(tabBarPosition) || Math.abs(e.deltaX) > 0) {
        return;
      }

      if (navScrollRef && navScrollRef.current && navRef && navRef.current && navRef.current.offsetWidth > navScrollRef.current.offsetWidth) {
        e.preventDefault();
        e.stopPropagation();
        debouncedWheel(e);
      }
    };

    var scrollEvent = new _EventManager["default"](navScrollRef.current);
    scrollEvent.addEventListener('scroll', debouncedScroll);
    scrollEvent.addEventListener('wheel', debouncedWheelWrap);
    return function () {
      scrollEvent.removeEventListener('scroll', debouncedScroll);
      scrollEvent.removeEventListener('wheel', debouncedWheelWrap);
      debouncedScroll.cancel();
      debouncedWheel.cancel();
    };
  }, [tabBarPosition]);
  (0, _react.useLayoutEffect)(function () {
    var currentNextPrev = {
      prev: prev,
      next: next
    };
    var nextPrev = setNextPrev(); // wait next, prev show hide

    /* eslint react/no-did-update-set-state:0 */

    if (isNextPrevShown(currentNextPrev) !== isNextPrevShown(nextPrev)) {
      scrollToActiveTab();
    } else if (activeKey !== prevActiveKey) {
      setActiveKey(activeKey); // can not use props.activeKey

      scrollToActiveTab();
    }
  }, [setNextPrev, isNextPrevShown, prev, next, activeKey, prevActiveKey]);
  (0, _react.useEffect)(function () {
    var debouncedResize = (0, _debounce["default"])(function () {
      setNextPrev();
      scrollToActiveTab();
    }, 200);
    resizeEvent.addEventListener('resize', debouncedResize);
    return function () {
      resizeEvent.removeEventListener('resize', debouncedResize);
      debouncedResize.cancel();
    };
  }, [setNextPrev, scrollToActiveTab, resizeEvent]); // 内容变化判断是否显示更多

  (0, _react.useEffect)(function () {
    setNextPrev();
  }, [getContent]);
  var inkBarNode = getInkBarNode();
  var tabs = getTabs();
  var groupNode = getGroupNode();
  var scrollbarNode = getScrollBarNode([inkBarNode, tabs]);
  var classString = (0, _classnames7["default"])("".concat(prefixCls, "-bar"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-bar-with-groups"), groupNode), className);
  var tabBarProps = {
    role: 'tablist',
    className: classString,
    ref: rootRef,
    style: style
  };

  if (keyboard) {
    tabBarProps.tabIndex = 0;
    tabBarProps.onKeyDown = handleKeyDown;
  }

  return /*#__PURE__*/_react["default"].createElement(_resizeObserver["default"], {
    resizeProp: (0, _utils.isVertical)(tabBarPosition) ? 'height' : 'width',
    onResize: (0, _debounce["default"])(function () {
      setNextPrev();
      scrollToActiveTab();
    }, 200)
  }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, tabBarProps, (0, _utils.getDataAttr)(restProps)), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-bar-inner")
  }, groupNode, groupNode && /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-bar-divider")
  }), getContent(scrollbarNode))));
};

TabBar.displayName = 'TabBar';
TabBar.defaultProps = {
  inkBarAnimated: true,
  scrollAnimated: true
};
var _default = TabBar;
exports["default"] = _default;
//# sourceMappingURL=TabBar.js.map