@arco-design/mobile-react 2.19.0

package/esm/tabs/index.js

@@ -0,0 +1,506 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useCallback } from 'react';
+import { cls, nextTick } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import TabCell from './tab-cell';
+import TabPane from './tab-pane';
+import { useRefState, useListenResize, useUpdateEffect, useSwiperInnerScroll } from '../_helpers';
+
+/**
+ * 用于让用户在不同的视图中进行切换。为优化移动端渲染性能，如有替换DOM、发请求更新数据等操作，请在`onAfterChange`而非`onChange`回调中进行。
+ * @en Used to let the user switch between different views. In order to optimize the rendering performance of the mobile terminal, if you need to replace the DOM, send a request to update data, etc., please do it in the `onAfterChange` instead of the `onChange` callback.
+ * @type 导航
+ * @type_en Navigation
+ * @name 选项卡
+ * @name_en Tabs
+ */
+var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      style = props.style,
+      _props$tabs = props.tabs,
+      tabs = _props$tabs === void 0 ? [] : _props$tabs,
+      _props$tabBarPosition = props.tabBarPosition,
+      tabBarPosition = _props$tabBarPosition === void 0 ? 'top' : _props$tabBarPosition,
+      activeTab = props.activeTab,
+      _props$defaultActiveT = props.defaultActiveTab,
+      defaultActiveTab = _props$defaultActiveT === void 0 ? 0 : _props$defaultActiveT,
+      children = props.children,
+      onChange = props.onChange,
+      onAfterChange = props.onAfterChange,
+      onTabClick = props.onTabClick,
+      onTabBarOverflowChange = props.onTabBarOverflowChange,
+      onTouchStart = props.onTouchStart,
+      onTouchMove = props.onTouchMove,
+      onTouchEnd = props.onTouchEnd,
+      onTabBarScroll = props.onTabBarScroll,
+      onDistanceChange = props.onDistanceChange,
+      onScroll = props.onScroll,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'line' : _props$type,
+      _props$swipeable = props.swipeable,
+      swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
+      disabled = props.disabled,
+      _props$tabBarArrange = props.tabBarArrange,
+      tabBarArrange = _props$tabBarArrange === void 0 ? 'center' : _props$tabBarArrange,
+      _props$tabBarScroll = props.tabBarScroll,
+      tabBarScroll = _props$tabBarScroll === void 0 ? true : _props$tabBarScroll,
+      tabBarFixed = props.tabBarFixed,
+      tabBarExtra = props.tabBarExtra,
+      tabBarScrollBezier = props.tabBarScrollBezier,
+      tabBarScrollDuration = props.tabBarScrollDuration,
+      _props$tabBarScrollCh = props.tabBarScrollChance,
+      tabBarScrollChance = _props$tabBarScrollCh === void 0 ? 'jump' : _props$tabBarScrollCh,
+      tabBarHasDivider = props.tabBarHasDivider,
+      _props$tabBarResetWhe = props.tabBarResetWhenScroll,
+      tabBarResetWhenScroll = _props$tabBarResetWhe === void 0 ? 'touchmove' : _props$tabBarResetWhe,
+      _props$stopPropagatio = props.stopPropagation,
+      stopPropagation = _props$stopPropagatio === void 0 ? true : _props$stopPropagatio,
+      getInnerScrollContainer = props.getInnerScrollContainer,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'swipe' : _props$mode,
+      getScrollContainer = props.getScrollContainer,
+      _props$scrollThrottle = props.scrollThrottle,
+      scrollThrottle = _props$scrollThrottle === void 0 ? 300 : _props$scrollThrottle,
+      _props$scrollOffset = props.scrollOffset,
+      scrollOffset = _props$scrollOffset === void 0 ? 0 : _props$scrollOffset,
+      scrollWhenMounted = props.scrollWhenMounted,
+      _props$goLastWhenScro = props.goLastWhenScrollBottom,
+      goLastWhenScrollBottom = _props$goLastWhenScro === void 0 ? true : _props$goLastWhenScro,
+      _props$scrollVertical = props.scrollVertical,
+      scrollVertical = _props$scrollVertical === void 0 ? true : _props$scrollVertical,
+      renderUnderline = props.renderUnderline,
+      renderTabBar = props.renderTabBar,
+      renderTabBarItem = props.renderTabBarItem,
+      renderTabBarInner = props.renderTabBarInner,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 240 : _props$duration,
+      _props$transitionDura = props.transitionDuration,
+      transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+      _props$useCaterpillar = props.useCaterpillar,
+      useCaterpillar = _props$useCaterpillar === void 0 ? false : _props$useCaterpillar,
+      _props$distanceToChan = props.distanceToChangeTab,
+      distanceToChangeTab = _props$distanceToChan === void 0 ? 10 : _props$distanceToChan,
+      _props$percentToChang = props.percentToChangeTab,
+      percentToChangeTab = _props$percentToChang === void 0 ? 0.3 : _props$percentToChang,
+      _props$speedToChangeT = props.speedToChangeTab,
+      speedToChangeTab = _props$speedToChangeT === void 0 ? 200 : _props$speedToChangeT,
+      _props$disableClickTr = props.disableClickTransition,
+      disableClickTransition = _props$disableClickTr === void 0 ? true : _props$disableClickTr,
+      lazyloadCount = props.lazyloadCount,
+      _props$hideContentSty = props.hideContentStyle,
+      hideContentStyle = _props$hideContentSty === void 0 ? null : _props$hideContentSty,
+      renderHideContent = props.renderHideContent,
+      hideTabBarBeforeMounted = props.hideTabBarBeforeMounted,
+      _props$overflowThresh = props.overflowThreshold,
+      overflowThreshold = _props$overflowThresh === void 0 ? 5 : _props$overflowThresh,
+      tabBarGutter = props.tabBarGutter,
+      tabBarPadding = props.tabBarPadding,
+      underlineSize = props.underlineSize,
+      underlineThick = props.underlineThick,
+      underlineInnerStyle = props.underlineInnerStyle,
+      caterpillarMaxScale = props.caterpillarMaxScale,
+      _props$caterpillarPro = props.caterpillarProperty,
+      caterpillarProperty = _props$caterpillarPro === void 0 ? 'scale' : _props$caterpillarPro,
+      _props$showUnderline = props.showUnderline,
+      showUnderline = _props$showUnderline === void 0 ? true : _props$showUnderline,
+      _props$stopTouchThres = props.stopTouchThreshold,
+      stopTouchThreshold = _props$stopTouchThres === void 0 ? 0 : _props$stopTouchThres,
+      _props$touchSideDisab = props.touchSideDisableThreshold,
+      touchSideDisableThreshold = _props$touchSideDisab === void 0 ? 0 : _props$touchSideDisab,
+      onTouchStopped = props.onTouchStopped,
+      tabBarStyle = props.tabBarStyle,
+      tabPaneStyle = props.tabPaneStyle,
+      tabBarClass = props.tabBarClass,
+      tabPaneClass = props.tabPaneClass,
+      tabPaneExtra = props.tabPaneExtra,
+      _props$translateZ = props.translateZ,
+      translateZ = _props$translateZ === void 0 ? true : _props$translateZ,
+      fullScreen = props.fullScreen,
+      autoHeight = props.autoHeight;
+  var domRef = useRef(null);
+  var cellRef = useRef(null);
+  var paneRef = useRef(null);
+
+  var _useState = useState(defaultActiveTab),
+      innerIndex = _useState[0],
+      setInnerIndex = _useState[1];
+
+  var _useState2 = useState(0),
+      jumpingDis = _useState2[0],
+      setJumpingDis = _useState2[1];
+
+  var _useState3 = useState(0),
+      wrapWidth = _useState3[0],
+      setWrapWidth = _useState3[1];
+
+  var _useState4 = useState(0),
+      wrapHeight = _useState4[0],
+      setWrapHeight = _useState4[1];
+
+  var _useState5 = useState(false),
+      cellTrans = _useState5[0],
+      setCellTrans = _useState5[1];
+
+  var _useState6 = useState(false),
+      paneTrans = _useState6[0],
+      setPaneTrans = _useState6[1];
+
+  var _useRefState = useRefState(activeTab === void 0 ? innerIndex : activeTab),
+      activeIndex = _useRefState[0],
+      activeIndexRef = _useRefState[1],
+      setActiveIndex = _useRefState[2];
+
+  var _useRefState2 = useRefState(0),
+      distance = _useRefState2[0],
+      distanceRef = _useRefState2[1],
+      setDistance = _useRefState2[2];
+
+  var posAdjustingRef = useRef(false);
+  var touchStartedRef = useRef(false);
+  var touchStartXRef = useRef(0);
+  var touchStartYRef = useRef(0);
+  var touchStartTimeRef = useRef(0);
+  var scrollingRef = useRef(null);
+  var touchStoppedRef = useRef(false);
+  var changeFromRef = useRef('');
+  var touchMoveBarScrollRef = useRef(false);
+  var allPanes = getAllPanes();
+  var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
+  var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current,
+      bar: cellRef.current,
+      pane: paneRef.current,
+      barOverflow: cellRef.current ? cellRef.current.hasOverflow : false,
+      updateLayout: updateLayout,
+      changeIndex: function changeIndex(newIndex, rightNow) {
+        return _changeIndex(newIndex, 'manual', rightNow);
+      },
+      scrollToIndex: paneRef.current ? paneRef.current.scrollToIndex : function () {}
+    };
+  });
+  useListenResize(updateLayout);
+  useSwiperInnerScroll(getInnerScrollContainer);
+  useEffect(function () {
+    if (distanceToChangeTab > 0 && distanceToChangeTab < 1) {
+      console.warn("[Tabs Props Warning] The value of the prop `distanceToChangeTab` is too small(" + distanceToChangeTab + "). Do you meant to use the prop `percentToChangeTab`?");
+    }
+  }, [distanceToChangeTab]);
+  useEffect(function () {
+    updateLayout();
+
+    if (mode === 'scroll') {
+      // 判断初始是否滚动时，如果指定了scrollWhenMounted则看它的值，否则看是否默认选中第一个
+      // @en When judging whether to scroll initially, if scrollWhenMounted is specified, see its value, otherwise, see if the first one is selected by default
+      var needScroll = scrollWhenMounted === void 0 ? activeIndex !== 0 : scrollWhenMounted;
+
+      if (needScroll) {
+        var _paneRef$current;
+
+        (_paneRef$current = paneRef.current) == null ? void 0 : _paneRef$current.scrollToIndex(activeIndex, true);
+      }
+    }
+  }, []);
+  useEffect(function () {
+    paneRef.current && paneRef.current.setCurrentHeight();
+  }, [children, activeIndex, autoHeight]);
+  useEffect(function () {
+    // 受控时用受控值，否则用内部值
+    // @en When controlled, use the controlled value, otherwise use the internal value
+    setActiveIndex(activeTab === void 0 ? innerIndex : activeTab);
+  }, [activeTab, innerIndex]);
+  useUpdateEffect(function () {
+    // 利用受控手动更改index时，给cell line加上动画
+    // @en Animate the cell line when changeing the index
+    setCellTrans(true);
+  }, [activeTab]);
+  useUpdateEffect(function () {
+    onDistanceChange && onDistanceChange(distance, wrapWidth, activeIndex);
+  }, [distance, wrapWidth, activeIndex]);
+  useUpdateEffect(function () {
+    if (changeFromRef.current !== 'scroll' && mode === 'scroll') {
+      var _paneRef$current2;
+
+      (_paneRef$current2 = paneRef.current) == null ? void 0 : _paneRef$current2.scrollToIndex(activeIndex);
+    }
+
+    if (changeFromRef.current === 'click' && useCaterpillar) {
+      var _cellRef$current;
+
+      (_cellRef$current = cellRef.current) == null ? void 0 : _cellRef$current.setCaterpillarAnimate();
+    }
+
+    var changeFrom = changeFromRef.current;
+    changeFromRef.current = '';
+    nextTick(function () {
+      setTimeout(function () {
+        onAfterChange && onAfterChange(tabs[activeIndex], activeIndex, changeFrom);
+      }, paneRef.current ? paneRef.current.getTransition() : 0);
+    });
+  }, [activeIndex]);
+  var handlePaneTouchStart = useCallback(function (e) {
+    if (onTouchStart && onTouchStart(e, activeIndexRef.current)) {
+      return;
+    }
+
+    if (posAdjustingRef.current) {
+      return;
+    }
+
+    touchStartedRef.current = true;
+    setCellTrans(false);
+    setPaneTrans(false);
+    var evt = e.touches[0];
+    touchStartXRef.current = evt.clientX || 0;
+    touchStartYRef.current = evt.clientY || 0;
+    scrollingRef.current = null;
+    posAdjustingRef.current = false;
+    touchStartTimeRef.current = new Date().getTime();
+    touchStoppedRef.current = false;
+  }, [onTouchStart]);
+  var handlePaneTouchMove = useCallback(function (e) {
+    if (onTouchMove && onTouchMove(e, activeIndexRef.current)) {
+      return;
+    } // 从屏幕边缘开始滑动时，屏蔽tabs滑动事件
+
+
+    if (touchStartXRef.current < touchSideDisableThreshold) {
+      return;
+    }
+
+    stopPropagation && e.stopPropagation();
+
+    if (!touchStartedRef.current || posAdjustingRef.current) {
+      e.cancelable && e.preventDefault();
+      return;
+    }
+
+    var evt = e.changedTouches[0];
+    var touchMoveX = evt.clientX || 0;
+    var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况
+    // @en bugfix: bugfix: Compatible with the case in safari where clientX is negative when swiping right back to the previous page
+
+    var posDisX = touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
+    var posDisY = touchMoveY - touchStartYRef.current;
+    var absDisX = Math.abs(posDisX);
+    var absDisY = Math.abs(posDisY);
+
+    if (scrollingRef.current === null) {
+      scrollingRef.current = absDisX < absDisY;
+    } // 如果是在上下滚动页面则禁用滑动手势
+    // @en Disable swipe gestures if scrolling up and down
+
+
+    if (scrollingRef.current) {
+      if (tabBarResetWhenScroll === 'touchmove' && !touchMoveBarScrollRef.current) {
+        cellRef.current && cellRef.current.scrollToCenter();
+        touchMoveBarScrollRef.current = true;
+      }
+
+      setDistance(0);
+      return;
+    }
+
+    if (activeIndexRef.current === 0 && posDisX > 0 || activeIndexRef.current === tabs.length - 1 && posDisX < 0) {
+      if (!touchStoppedRef.current && absDisX > stopTouchThreshold) {
+        touchStoppedRef.current = true;
+        onTouchStopped && onTouchStopped(posDisX >= 0 ? -1 : 1);
+      }
+
+      setDistance(0);
+      return;
+    }
+
+    e.cancelable && e.preventDefault();
+    setDistance(posDisX);
+  }, [onTouchMove, onTouchStopped, stopTouchThreshold, tabs.length, touchSideDisableThreshold, tabBarResetWhenScroll, stopPropagation]);
+  useEffect(function () {
+    if (paneRef.current && paneRef.current.dom && canSwipe) {
+      paneRef.current.dom.addEventListener('touchstart', handlePaneTouchStart);
+      paneRef.current.dom.addEventListener('touchmove', handlePaneTouchMove);
+    }
+
+    return function () {
+      if (paneRef.current && paneRef.current.dom && canSwipe) {
+        paneRef.current.dom.removeEventListener('touchstart', handlePaneTouchStart);
+        paneRef.current.dom.removeEventListener('touchmove', handlePaneTouchMove);
+      }
+    };
+  }, [handlePaneTouchStart, handlePaneTouchMove, canSwipe]);
+
+  function handlePaneTouchEnd(e) {
+    if (onTouchEnd && onTouchEnd(e.nativeEvent, activeIndexRef.current)) {
+      return;
+    }
+
+    stopPropagation && e.stopPropagation();
+    touchMoveBarScrollRef.current = false;
+
+    if (scrollingRef.current && tabBarResetWhenScroll === 'touchend') {
+      cellRef.current && cellRef.current.scrollToCenter();
+    }
+
+    if (!touchStartedRef.current || posAdjustingRef.current || scrollingRef.current) {
+      return;
+    }
+
+    touchStartedRef.current = false;
+    setCellTrans(true);
+    setPaneTrans(true);
+    var touchEndTime = new Date().getTime();
+    var dis = distanceRef.current;
+    var speed = dis / (touchEndTime - touchStartTimeRef.current) * 1000;
+    var maxSlice = wrapWidth * percentToChangeTab;
+    var index = activeIndexRef.current;
+    var needJump = Math.abs(dis) > maxSlice && Math.abs(dis) > distanceToChangeTab || Math.abs(speed) > speedToChangeTab;
+    var newIndex = index;
+
+    if (dis > 0 && needJump) {
+      newIndex = index - 1;
+    } else if (dis < 0 && needJump) {
+      newIndex = index + 1;
+    }
+
+    nextTick(function () {
+      jumpTo(newIndex);
+    });
+  }
+
+  function jumpTo(newIndex) {
+    posAdjustingRef.current = true;
+
+    if (newIndex !== activeIndexRef.current) {
+      setJumpingDis(distanceRef.current);
+    }
+
+    _changeIndex(newIndex, 'swipe');
+
+    touchStartTimeRef.current = 0;
+    setTimeout(function () {
+      posAdjustingRef.current = false;
+      setJumpingDis(0);
+    }, transitionDuration);
+  }
+
+  function updateLayout() {
+    cellRef.current && cellRef.current.resetUnderlineStyle();
+    setWrapWidth(domRef.current ? domRef.current.offsetWidth : 0);
+    setWrapHeight(domRef.current ? domRef.current.offsetHeight : 0);
+    paneRef.current && paneRef.current.setCurrentHeight();
+  }
+
+  function getAllPanes() {
+    var panes = children ? [children] : [];
+
+    if (children && Object.prototype.toString.call(children) === '[object Array]') {
+      panes = children;
+    } // panes不可超过tabs.length
+
+
+    return panes.slice(0, tabs.length);
+  }
+
+  function _changeIndex(newIndex, changeFrom, rightNow) {
+    if (rightNow || changeFrom === 'click' && disableClickTransition) {
+      setPaneTrans(false);
+    } else {
+      setPaneTrans(true);
+    }
+
+    changeFromRef.current = changeFrom || '';
+    setCellTrans(true);
+    setInnerIndex(newIndex);
+    setDistance(0);
+
+    if (newIndex !== activeIndexRef.current) {
+      onChange && onChange(tabs[newIndex], newIndex, changeFrom);
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    var prefix = prefixCls + "-tabs";
+    var commonProps = {
+      prefixCls: prefixCls,
+      activeIndex: activeIndex,
+      activeIndexRef: activeIndexRef,
+      tabDirection: tabDirection,
+      changeIndex: _changeIndex,
+      duration: duration,
+      transitionDuration: transitionDuration,
+      wrapWidth: wrapWidth,
+      wrapHeight: wrapHeight,
+      distance: distance,
+      mode: mode,
+      translateZ: translateZ,
+      fullScreen: fullScreen
+    };
+
+    var cellProps = _extends({
+      ref: cellRef,
+      tabs: tabs,
+      onTabClick: onTabClick,
+      type: type,
+      tabBarPosition: tabBarPosition,
+      tabBarArrange: tabBarArrange,
+      tabBarScroll: tabBarScroll,
+      renderUnderline: renderUnderline,
+      useCaterpillar: useCaterpillar,
+      cellTrans: cellTrans,
+      jumpingDis: jumpingDis,
+      tabBarExtra: tabBarExtra,
+      onTabBarOverflowChange: onTabBarOverflowChange,
+      tabBarGutter: tabBarGutter,
+      tabBarPadding: tabBarPadding,
+      tabBarFixed: tabBarFixed,
+      tabBarScrollBezier: tabBarScrollBezier,
+      tabBarScrollDuration: tabBarScrollDuration,
+      tabBarScrollChance: tabBarScrollChance,
+      tabBarHasDivider: tabBarHasDivider,
+      underlineSize: underlineSize,
+      underlineThick: underlineThick,
+      underlineInnerStyle: underlineInnerStyle,
+      caterpillarMaxScale: caterpillarMaxScale,
+      caterpillarProperty: caterpillarProperty,
+      onTabBarScroll: onTabBarScroll,
+      hideTabBarBeforeMounted: hideTabBarBeforeMounted,
+      overflowThreshold: overflowThreshold,
+      showUnderline: showUnderline,
+      disabled: disabled,
+      renderTabBarItem: renderTabBarItem,
+      renderTabBarInner: renderTabBarInner,
+      tabBarStyle: tabBarStyle,
+      tabBarClass: tabBarClass
+    }, commonProps);
+
+    var CellComp = /*#__PURE__*/React.createElement(TabCell, cellProps);
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls(prefix + " " + prefix + "-" + tabBarPosition + " " + prefix + "-" + tabDirection + " all-border-box", {
+        'full-screen': fullScreen
+      }, className || ''),
+      style: style,
+      ref: domRef
+    }, renderTabBar ? renderTabBar(CellComp, cellProps) : CellComp, /*#__PURE__*/React.createElement(TabPane, _extends({
+      ref: paneRef,
+      panes: allPanes,
+      handlePaneTouchEnd: handlePaneTouchEnd,
+      paneTrans: paneTrans,
+      swipeable: canSwipe,
+      lazyloadCount: lazyloadCount,
+      hideContentStyle: hideContentStyle,
+      renderHideContent: renderHideContent,
+      tabPaneStyle: tabPaneStyle,
+      getScrollContainer: getScrollContainer,
+      scrollThrottle: scrollThrottle,
+      scrollOffset: scrollOffset,
+      goLastWhenScrollBottom: goLastWhenScrollBottom,
+      scrollVertical: scrollVertical,
+      tabPaneClass: tabPaneClass,
+      tabPaneExtra: tabPaneExtra,
+      autoHeight: autoHeight,
+      onScroll: onScroll
+    }, commonProps)));
+  });
+});
+export default Tabs;