choerodon-ui/es/tabs/TabBar.js

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["scrollAnimated", "className", "style", "inkBarStyle", "extraContent", "tabBarGutter", "inkBarAnimated", "type", "showMore", "hideAdd", "onRemoveTab", "onEdit"];
import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import classnames from 'classnames';
import debounce from 'lodash/debounce';
import Button from '../../pro/es/button';
import { FuncType } from '../../pro/es/button/enum';
import { useModal } from '../../pro/es/modal-provider/ModalProvider';
import { iteratorReduce, iteratorSome } from '../../pro/es/_util/iteratorUtils';
import Dropdown from '../../pro/es/dropdown';
import { $l } from '../../pro/es/locale-context';
import { getActiveKeyByGroupKey, getDataAttr, getHeader, getLeft, getStyle, getTop, isTransformSupported, isVertical, setTransform } from './utils';
import warning from '../_util/warning';
import Ripple from '../ripple';
import TabBarInner from './TabBarInner';
import EventManager from '../_util/EventManager';
import { TabsType } from './enum';
import Icon from '../icon';
import Menu from '../menu';
import MenuItem from '../menu/MenuItem';
import Badge from '../badge';
import TabsContext from './TabsContext';
import KeyCode from '../_util/KeyCode';
import { Size } from '../_util/enum';
import CustomizationSettings from './customization-settings';
import Count from './Count';
import TabsAddBtn from './TabsAddBtn';
import InvalidBadge from './InvalidBadge';
import ReactResizeObserver from '../_util/resizeObserver';

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 = _objectWithoutProperties(props, _excluded);

  var _useContext = useContext(TabsContext),
      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 = useModal();
  var openCustomizationModal = useCallback(function () {
    if (customizable) {
      var modalProps = {
        drawer: true,
        size: Size.small,
        title: $l('Tabs', 'customization_settings'),
        children: /*#__PURE__*/React.createElement(CustomizationSettings, null),
        bodyStyle: {
          overflow: 'hidden auto',
          padding: 0
        }
      };
      modalProps.okText = $l('Tabs', 'save');
      modal.open(modalProps);
    }
  }, [customizable, modal]);
  var getNextActiveKey = 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 = useCallback(function (e) {
    var keyCode = e.keyCode;

    if (keyCode === KeyCode.RIGHT || keyCode === KeyCode.DOWN) {
      e.preventDefault();
      var nextKey = getNextActiveKey(true);

      if (nextKey) {
        changeActiveKey(nextKey);
      }
    } else if (keyCode === KeyCode.LEFT || keyCode === KeyCode.UP) {
      e.preventDefault();
      var previousKey = getNextActiveKey(false);

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

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

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

      if (newActiveKey) {
        changeActiveKey(newActiveKey, true);
      }
    }
  }, [changeActiveKey, activeGroupKey, groupedPanelsMap]);
  var getOffsetWH = useCallback(function (node) {
    return node[isVertical(tabBarPosition) ? 'offsetHeight' : 'offsetWidth'];
  }, [tabBarPosition]);
  var getScrollWH = useCallback(function (node) {
    return node[isVertical(tabBarPosition) ? 'scrollHeight' : 'scrollWidth'];
  }, [tabBarPosition]);
  var getOffsetLT = useCallback(function (node) {
    return node.getBoundingClientRect()[isVertical(tabBarPosition) ? 'top' : 'left'];
  }, [tabBarPosition]);
  var resizeEvent = useMemo(function () {
    return new EventManager(typeof window === 'undefined' ? undefined : window);
  }, []);
  var lastNextPrevShownRef = useRef();
  var offsetRef = useRef(0);
  var containerRef = useRef(null);
  var navWrapRef = useRef(null);
  var navScrollRef = useRef(null);
  var navRef = useRef(null);
  var rootRef = useRef(null);
  var activeTabRef = useRef(null);
  var inkBarRef = 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(activeKey),
      _useState6 = _slicedToArray(_useState5, 2),
      prevActiveKey = _useState6[0],
      setActiveKey = _useState6[1];

  var _useState7 = useState([]),
      _useState8 = _slicedToArray(_useState7, 2),
      menuList = _useState8[0],
      setMenuList = _useState8[1];

  var tabsRef = useRef([]);

  var getTabs = function getTabs() {
    var length = currentPanelMap.size;

    var tabBarRef = _toConsumableArray(currentPanelMap.entries()).map(function (item) {
      return {
        key: item[0],
        value: item[1],
        ref: /*#__PURE__*/React.createRef()
      };
    });

    tabsRef.current = tabBarRef;
    var isSecond = type === TabsType['second-level'];
    return iteratorReduce(currentPanelMap.entries(), function (rst, _ref, index) {
      var _ref2 = _slicedToArray(_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(' ');
      warning('tab' in child || 'title' in child, 'There must be `tab` or `title` property on children of Tabs.');
      var title = /*#__PURE__*/React.createElement(React.Fragment, null, getHeader(child), showCount && /*#__PURE__*/React.createElement(Count, {
        prefixCls: prefixCls,
        count: count,
        renderer: countRenderer,
        overflowCount: overflowCount,
        asyncCount: renderInkBar
      }));
      rst.push( /*#__PURE__*/React.createElement(Ripple, {
        disabled: disabled || rippleDisabled,
        key: key
      }, /*#__PURE__*/React.createElement(TabBarInner, _extends({
        ref: tabBarRef[index].ref
      }, tabProps), /*#__PURE__*/React.createElement(InvalidBadge, {
        prefixCls: prefixCls,
        isInvalid: function isInvalid() {
          return key !== activeKey && validationMap.get(key) === false;
        }
      }, type === TabsType['editable-card'] ? /*#__PURE__*/React.createElement("div", {
        className: closable ? undefined : "".concat(prefixCls, "-tab-unclosable")
      }, title, closable && /*#__PURE__*/React.createElement(Icon, {
        type: "close",
        onClick: function onClick(e) {
          return onRemoveTab(key, e);
        }
      })) : title))));
      return rst;
    }, []);
  };

  var isNextPrevShown = 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.createElement(Menu, {
      style: {
        maxHeight: 200,
        overflow: 'auto'
      },
      onClick: onMenuClick
    }, menuList.map(function (x) {
      return /*#__PURE__*/React.createElement(Menu.Item, {
        key: x.key
      }, /*#__PURE__*/React.createElement("a", {
        target: "_blank"
      }, getHeader(x)));
    }));
  };

  var getContent = function getContent(contents) {
    var vertical = isVertical(tabBarPosition);
    var isEditCard = type === TabsType['editable-card'];
    var classes = classnames("".concat(prefixCls, "-extra-content"), _defineProperty({}, "".concat(prefixCls, "-extra-vertical-content"), vertical));
    var dropDownClass = classnames("".concat(prefixCls, "-more-tab"), _defineProperty({}, "".concat(prefixCls, "-more-vertical-tab"), vertical));
    var nextPrevShown = isNextPrevShown();
    var moreTool = nextPrevShown && !!showMore && /*#__PURE__*/React.createElement(Dropdown, {
      overlay: menu,
      key: "more"
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "more_horiz",
      className: dropDownClass
    }));
    var addTool = isEditCard && nextPrevShown && !hideAdd && /*#__PURE__*/React.createElement(TabsAddBtn, {
      key: "add",
      onEdit: onEdit,
      vertical: vertical,
      isFixed: true
    }); // 这里是固定项

    var toolBar = [moreTool, addTool];

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

    return [contents, /*#__PURE__*/React.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.createElement(MenuItem, {
            key: String(key),
            disabled: disabled
          }, /*#__PURE__*/React.createElement(InvalidBadge, {
            prefixCls: prefixCls,
            isInvalid: function isInvalid() {
              return activeGroupKey !== key && iteratorSome(panelsMap.keys(), function (paneKey) {
                return validationMap.get(paneKey) === false;
              });
            }
          }, /*#__PURE__*/React.createElement(Badge, {
            dot: dot
          }, tab))));
        }
      });

      if (items.length > 1) {
        return /*#__PURE__*/React.createElement(Menu, {
          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 = classnames(inkBarClassName, inkBarAnimated ? "".concat(inkBarClassName, "-animated") : "".concat(inkBarClassName, "-no-animated"));
    return /*#__PURE__*/React.createElement("div", {
      style: inkBarStyle,
      className: classes,
      key: "inkBar",
      ref: inkBarRef
    });
  };

  var setOffset = 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 = isTransformSupported(navStyle);

        if (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) {
          setTransform(navStyle, navOffset.value);
        } else if (navOffset.name) {
          navStyle[navOffset.name] = navOffset.value;
        }

        if (callback) {
          callback();
        }
      }
    }
  }, [offsetRef, navRef, tabBarPosition]);
  var setNextPrev = 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 = 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 = 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 = useCallback(function (e) {
    var vertical = 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) + 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 = 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.createElement("span", {
      onClick: prev ? toPrev : undefined,
      unselectable: "on",
      className: classnames("".concat(prefixCls, "-tab-prev"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-tab-btn-disabled"), !prev), _defineProperty(_classnames3, "".concat(prefixCls, "-tab-arrow-show"), showNextPrev), _classnames3)),
      onTransitionEnd: prevTransitionEnd
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-tab-prev-icon")
    }));
    var nextButton = /*#__PURE__*/React.createElement("span", {
      onClick: next ? toNext : undefined,
      unselectable: "on",
      className: classnames((_classnames4 = {}, _defineProperty(_classnames4, "".concat(prefixCls, "-tab-next"), 1), _defineProperty(_classnames4, "".concat(prefixCls, "-tab-btn-disabled"), !next), _defineProperty(_classnames4, "".concat(prefixCls, "-tab-arrow-show"), showNextPrev), _classnames4))
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-tab-next-icon")
    }));
    var navClassName = type === TabsType['second-level'] ? "".concat(prefixCls, "-second-nav") : "".concat(prefixCls, "-nav");
    var navClasses = classnames(navClassName, scrollAnimated ? "".concat(navClassName, "-animated") : "".concat(navClassName, "-no-animated"));
    var vertical = isVertical(tabBarPosition);
    var isEditCard = type === TabsType['editable-card'];
    return /*#__PURE__*/React.createElement("div", {
      className: classnames((_classnames5 = {}, _defineProperty(_classnames5, "".concat(prefixCls, "-nav-container"), 1), _defineProperty(_classnames5, "".concat(prefixCls, "-nav-container-scrolling"), showNextPrev && !showMore), _classnames5)),
      key: "container",
      ref: containerRef
    }, !showMore && prevButton, !showMore && nextButton, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-nav-wrap"),
      ref: navWrapRef
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-nav-scroll"),
      ref: navScrollRef
    }, /*#__PURE__*/React.createElement("div", {
      className: navClasses,
      ref: navRef
    }, content, !hideAdd && isEditCard && /*#__PURE__*/React.createElement(TabsAddBtn, {
      prefixCls: prefixCls,
      extraPrefixCls: showNextPrev ? 'none' : 'inline-flex',
      vertical: vertical,
      onEdit: onEdit
    })))));
  }; // 发生滚动事件，改变更多的菜单。


  var handleScrollEvent = useCallback(function (_ref4) {
    var target = _ref4.target;
    var vertical = 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 + getStyle(dom, 'margin-bottom') : dom.offsetWidth + getStyle(dom, 'margin-right');
      }

      hiddenOffset += currentTabOffset || 0;

      if (!vertical && scrollLeft > 0 || vertical && scrollTop > 0) {
        prevMenuList.push(_objectSpread({
          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 + getStyle(_dom, 'margin-bottom') : _dom.offsetWidth + getStyle(_dom, 'margin-right');
      }

      hiddenBackOffset += endTabOffset || 0;

      if (totalHiddenOffset > 0) {
        nextMenuList.push(_objectSpread({
          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 = isTransformSupported(inkBarNodeStyle);

        if (!isVertical(tabBarPosition)) {
          var left = 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) {
            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 = 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) {
            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';
    }
  };

  useLayoutEffect(function () {
    renderInkBar();
  });
  useEffect(function () {
    handleScrollEvent({
      target: {
        scrollLeft: 0,
        scrollTop: 0
      }
    });
    var debouncedScroll = debounce(function (e) {
      handleScrollEvent(e);
    }, 200);
    var debouncedWheel = debounce(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 (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(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]);
  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]);
  useEffect(function () {
    var debouncedResize = debounce(function () {
      setNextPrev();
      scrollToActiveTab();
    }, 200);
    resizeEvent.addEventListener('resize', debouncedResize);
    return function () {
      resizeEvent.removeEventListener('resize', debouncedResize);
      debouncedResize.cancel();
    };
  }, [setNextPrev, scrollToActiveTab, resizeEvent]); // 内容变化判断是否显示更多

  useEffect(function () {
    setNextPrev();
  }, [getContent]);
  var inkBarNode = getInkBarNode();
  var tabs = getTabs();
  var groupNode = getGroupNode();
  var scrollbarNode = getScrollBarNode([inkBarNode, tabs]);
  var classString = classnames("".concat(prefixCls, "-bar"), _defineProperty({}, "".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.createElement(ReactResizeObserver, {
    resizeProp: isVertical(tabBarPosition) ? 'height' : 'width',
    onResize: debounce(function () {
      setNextPrev();
      scrollToActiveTab();
    }, 200)
  }, /*#__PURE__*/React.createElement("div", _extends({}, tabBarProps, getDataAttr(restProps)), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-bar-inner")
  }, groupNode, groupNode && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-bar-divider")
  }), getContent(scrollbarNode))));
};

TabBar.displayName = 'TabBar';
TabBar.defaultProps = {
  inkBarAnimated: true,
  scrollAnimated: true
};
export default TabBar;
//# sourceMappingURL=TabBar.js.map