@arco-design/mobile-react 2.19.0

package/esm/tabs/tab-cell.js

@@ -0,0 +1,500 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo } from 'react';
+import { cls, scrollWithAnimation, nextTick, addCssKeyframes, removeCssStyleDom } from '@arco-design/mobile-utils';
+import { useSystem, getStyleWithVendor, useRefState } from '../_helpers';
+var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
+  var tabs = props.tabs,
+      prefixCls = props.prefixCls,
+      activeIndex = props.activeIndex,
+      activeIndexRef = props.activeIndexRef,
+      tabDirection = props.tabDirection,
+      type = props.type,
+      onTabClick = props.onTabClick,
+      changeIndex = props.changeIndex,
+      tabBarPosition = props.tabBarPosition,
+      tabBarArrange = props.tabBarArrange,
+      tabBarScroll = props.tabBarScroll,
+      tabBarFixed = props.tabBarFixed,
+      renderUnderline = props.renderUnderline,
+      duration = props.duration,
+      transitionDuration = props.transitionDuration,
+      useCaterpillar = props.useCaterpillar,
+      wrapWidth = props.wrapWidth,
+      wrapHeight = props.wrapHeight,
+      cellTrans = props.cellTrans,
+      distance = props.distance,
+      jumpingDis = props.jumpingDis,
+      tabBarExtra = props.tabBarExtra,
+      onTabBarOverflowChange = props.onTabBarOverflowChange,
+      tabBarGutter = props.tabBarGutter,
+      tabBarPadding = props.tabBarPadding,
+      underlineSize = props.underlineSize,
+      underlineThick = props.underlineThick,
+      underlineInnerStyle = props.underlineInnerStyle,
+      caterpillarMaxScale = props.caterpillarMaxScale,
+      caterpillarProperty = props.caterpillarProperty,
+      onTabBarScroll = props.onTabBarScroll,
+      hideTabBarBeforeMounted = props.hideTabBarBeforeMounted,
+      _props$overflowThresh = props.overflowThreshold,
+      overflowThreshold = _props$overflowThresh === void 0 ? 5 : _props$overflowThresh,
+      tabBarScrollBezier = props.tabBarScrollBezier,
+      tabBarScrollDuration = props.tabBarScrollDuration,
+      tabBarScrollChance = props.tabBarScrollChance,
+      tabBarHasDivider = props.tabBarHasDivider,
+      showUnderline = props.showUnderline,
+      disabled = props.disabled,
+      renderTabBarItem = props.renderTabBarItem,
+      renderTabBarInner = props.renderTabBarInner,
+      tabBarStyle = props.tabBarStyle,
+      tabBarClass = props.tabBarClass,
+      translateZ = props.translateZ;
+  var prefix = prefixCls + "-tab-cell";
+  var domRef = useRef(null);
+  var lineRef = useRef(null);
+  var timeRef = useRef(0);
+  var allCellRectRef = useRef([]);
+
+  var _useState = useState({}),
+      underlineStyle = _useState[0],
+      setUnderlineStyle = _useState[1];
+
+  var _useRefState = useRefState(false),
+      caterpillar = _useRefState[0],
+      caterpillarRef = _useRefState[1],
+      setCaterpillar = _useRefState[2];
+
+  var _useState2 = useState(0),
+      caterpillarDelay = _useState2[0],
+      setCaterpillarDelay = _useState2[1];
+
+  var _useState3 = useState(false),
+      hasOverflow = _useState3[0],
+      setHasOverflow = _useState3[1];
+
+  var _useState4 = useState(function () {
+    return tabs.length < overflowThreshold ? tabBarArrange : 'start';
+  }),
+      originArrange = _useState4[0],
+      setOriginArrange = _useState4[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+
+
+  var _useState5 = useState(function () {
+    return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
+  }),
+      showTab = _useState5[0],
+      setShowTab = _useState5[1];
+
+  var _useState6 = useState(false),
+      showLine = _useState6[0],
+      setShowLine = _useState6[1];
+
+  var isVertical = tabDirection === 'vertical';
+  var isLine = (type || '').indexOf('line') !== -1;
+  var isCard = type === 'card';
+  /**
+   * 非card类型才有间隙和两侧留白
+   * @en Non-card types have gaps and blank on both sides
+   */
+
+  var cellPadding = isCard ? void 0 : tabBarPadding;
+  var cellGutter = isCard ? void 0 : tabBarGutter;
+  var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
+  var wrapSize = isVertical ? wrapWidth : wrapHeight;
+  var translateZStr = translateZ ? ' translateZ(0)' : '';
+  var system = useSystem();
+  var maxScaleWithDefault = caterpillarMaxScale || 2;
+  var animationKey = useMemo(function () {
+    if (!showUnderline || !useCaterpillar) {
+      return '';
+    }
+
+    if (caterpillarProperty === 'size') {
+      return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
+    }
+
+    if (caterpillarMaxScale) {
+      return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
+    }
+
+    return '';
+  }, [showUnderline, useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
+  useEffect(function () {
+    if (!animationKey) {
+      return;
+    }
+
+    var dir = isVertical ? 'X' : 'Y';
+
+    if (caterpillarProperty === 'size') {
+      var attr = isVertical ? 'width' : 'height';
+      addCssKeyframes(animationKey, "{\n                    0% {\n                        " + attr + ": 100%;\n                    }\n                    50% {\n                        " + attr + ": " + 100 * maxScaleWithDefault + "%;\n                    }\n                    100% {\n                        " + attr + ": 100%;\n                    }\n                }");
+      return;
+    }
+
+    addCssKeyframes(animationKey, "{\n                0% {\n                    transform: scale" + dir + "(1)" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                }\n                50% {\n                    transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                }\n                100% {\n                    transform: scale" + dir + "(1)" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                }\n            }");
+    return function () {
+      removeCssStyleDom(animationKey);
+    };
+  }, [animationKey]);
+  useEffect(function () {
+    nextTick(function () {
+      setCellOverflow(); // dom出来之后originArrange置空，交由tabBarArrange控制
+      // @en After the dom comes out, originArrange is left empty and controlled by tabBarArrange
+
+      setOriginArrange(void 0); // dom出来了才知道布局，计算完成后展示出来防止跳动的情况
+      // @en The layout is determined only when the dom comes out. It is displayed to prevent the jumping after the calculation is completed
+
+      setShowTab(true);
+      setShowLine(true);
+    });
+  }, [domRef.current, wrapSize, tabs]);
+  useEffect(function () {
+    resetUnderlineStyle();
+  }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
+  useEffect(function () {
+    nextTick(function () {
+      resetUnderlineStyle();
+    });
+  }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current,
+      scrollTo: scrollTo,
+      scrollToCenter: scrollToCenter,
+      hasOverflow: hasOverflow,
+      setCaterpillarAnimate: setCaterpillarAnimate,
+      resetUnderlineStyle: resetUnderlineStyle
+    };
+  }, [scrollToCenter, scrollTo, hasOverflow, setCaterpillarAnimate, resetUnderlineStyle]);
+  useEffect(function () {
+    if (wrapSize && tabBarScrollChance !== 'none') {
+      setTimeout(function () {
+        scrollToCenter();
+      }, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
+    }
+  }, [activeIndex, wrapSize]);
+  useEffect(function () {
+    tabBarScrollChance !== 'none' && scrollToCenter(true); // TabCell左右可滚动时，防止触发父级touchmove事件导致滚不动
+    // @en When the TabCell can be scrolled left and right, prevent the parent touchmove event from being triggered which result in inability to scroll
+
+    var stopFunc = function stopFunc(e) {
+      return e.stopPropagation();
+    };
+
+    if (isVertical && hasOverflow && domRef.current) {
+      domRef.current.addEventListener('touchstart', stopFunc);
+      domRef.current.addEventListener('touchmove', stopFunc);
+    }
+
+    return function () {
+      if (isVertical && hasOverflow && domRef.current) {
+        domRef.current.removeEventListener('touchstart', stopFunc);
+        domRef.current.removeEventListener('touchmove', stopFunc);
+      }
+    };
+  }, [hasOverflow]);
+  useEffect(function () {
+    if (jumpingDis && useCaterpillar && system !== 'ios') {
+      var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
+      setCaterpillarAnimate(movedRatio);
+    }
+  }, [jumpingDis]);
+
+  function resetUnderlineStyle() {
+    setUnderlineStyle(getUnderlineStyle());
+  }
+
+  function setCellOverflow() {
+    var overflow = false;
+
+    if (domRef.current) {
+      overflow = isVertical ? domRef.current.scrollWidth > domRef.current.offsetWidth : domRef.current.scrollHeight > domRef.current.offsetHeight;
+    }
+
+    if (overflow !== hasOverflow) {
+      onTabBarOverflowChange && onTabBarOverflowChange(overflow);
+    }
+
+    setHasOverflow(overflow);
+  }
+
+  function scrollToCenter(rightNow) {
+    if (!wrapSize || !hasOverflow) {
+      return;
+    }
+
+    var currentTabLeft = getTabCenterLeft(activeIndexRef.current);
+    var newLeft = currentTabLeft - wrapSize / 2;
+    scrollTo(newLeft, rightNow);
+  }
+
+  function scrollTo(position, rightNow) {
+    if (!domRef.current) {
+      return;
+    }
+
+    var needRafScroll = false; // 部分安卓机在动画和raf同时执行时会卡顿
+    // @en Some Android machines will freeze when animation and raf are executed at the same time
+    // 如果是安卓机，且对滚动的时长和变化曲线无要求时，优先用原生顺滑滚动
+    // @en If it is an Android device, and there is no requirement for the scrolling duration and change curve, the native smooth scrolling is preferred
+    // 当浏览器不支持原生顺滑滚动，或对上述滚动参数有要求时，用raf滚动兜底
+    // @en When the browser does not support native smooth scrolling, or there are requirements for the above scrolling parameters, use raf to scroll the bottom line
+
+    if (system === 'android' && tabBarScrollBezier === void 0 && tabBarScrollDuration === void 0) {
+      try {
+        var disObj = isVertical ? {
+          left: position
+        } : {
+          top: position
+        };
+        domRef.current.scrollTo(_extends({}, disObj, rightNow ? {} : {
+          behavior: 'smooth'
+        }));
+      } catch (e) {
+        needRafScroll = true;
+      }
+    } else {
+      needRafScroll = true;
+    }
+
+    if (needRafScroll) {
+      scrollWithAnimation(isVertical ? domRef.current.scrollLeft : domRef.current.scrollTop, position, function (top) {
+        if (domRef.current) {
+          if (isVertical) {
+            domRef.current.scrollLeft = top;
+          } else {
+            domRef.current.scrollTop = top;
+          }
+        }
+      }, rightNow ? 0 : tabBarScrollDuration, tabBarScrollBezier);
+    }
+  }
+
+  function getUnderlineStyle() {
+    var transStyle = {};
+
+    if (useCaterpillar) {
+      transStyle.animationDuration = duration + "ms";
+    }
+
+    if (caterpillarRef.current && animationKey) {
+      transStyle.animationName = animationKey;
+    }
+
+    if (caterpillarDelay) {
+      transStyle.animationDelay = "-" + caterpillarDelay + "ms";
+    }
+
+    var lineStyle = getLineStyle();
+    return {
+      outer: getStyleWithVendor(_extends({
+        transitionDuration: cellTrans ? duration + "ms" : '0ms'
+      }, lineStyle.outer || {})),
+      inner: getStyleWithVendor(_extends({}, transStyle, lineStyle.inner || {}))
+    };
+  }
+
+  function getLineStyle() {
+    var _ref;
+
+    if (!lineRef.current || !domRef.current) {
+      return {};
+    }
+
+    var currentLeft = getLineLeft(activeIndex);
+    var descIndex = getDescIndex();
+    var descLeft = getLineLeft(descIndex);
+    var moveRatio = wrapWidth ? distance / wrapWidth : 0;
+    var leftOffset = moveRatio * (currentLeft - descLeft);
+    var direc = isVertical ? 'X' : 'Y';
+    var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
+      transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
+    } : {};
+    var outerSize = isVertical ? {
+      width: underlineSize,
+      height: underlineThick
+    } : {
+      height: underlineSize,
+      width: underlineThick
+    };
+    return {
+      outer: _extends({
+        transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
+      }, outerSize),
+      inner: _extends({}, transStyle)
+    };
+  }
+
+  function getLineLeft(index) {
+    var _lineRef$current, _lineRef$current2;
+
+    var offsetSize = isVertical ? (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.offsetWidth : (_lineRef$current2 = lineRef.current) == null ? void 0 : _lineRef$current2.offsetHeight;
+    var lineWidth = offsetSize || 0;
+    return getTabCenterLeft(index) - lineWidth / 2;
+  }
+
+  function getTabCenterLeft(index) {
+    var currentTab = allCellRectRef.current[index] || {};
+    var currentTabWidth = (isVertical ? currentTab.width : currentTab.height) || 0;
+    var currentTabLeft = (isVertical ? currentTab.left : currentTab.top) || 0;
+    return currentTabLeft + currentTabWidth / 2;
+  }
+
+  function getLineScale(ratio) {
+    var absRatio = Math.abs(ratio);
+    return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
+  }
+
+  function getDescIndex() {
+    if (distance > 0) {
+      return activeIndex - 1;
+    }
+
+    if (distance < 0) {
+      return activeIndex + 1;
+    }
+
+    return activeIndex;
+  }
+
+  function setCaterpillarAnimate(movedRatio) {
+    if (movedRatio === void 0) {
+      movedRatio = 0;
+    }
+
+    if (!duration) {
+      return;
+    }
+
+    var movedTime = (duration || 0) * Math.abs(movedRatio);
+    setCaterpillarDelay(movedTime);
+    nextTick(function () {
+      setCaterpillar(true);
+    });
+
+    if (timeRef.current) {
+      clearTimeout(timeRef.current);
+    }
+
+    timeRef.current = window.setTimeout(function () {
+      setCaterpillar(false);
+      setCaterpillarDelay(0);
+    }, (duration || 0) - movedTime + 20);
+  }
+
+  function getCellPadding(pType) {
+    if (typeof cellPadding === 'object') {
+      return cellPadding[pType];
+    }
+
+    return cellPadding;
+  }
+
+  function getCellStyle(index) {
+    if (!isVertical) {
+      return {};
+    }
+
+    if (index === 0) {
+      return {
+        marginRight: cellGutter,
+        marginLeft: getCellPadding('left')
+      };
+    }
+
+    return {
+      marginRight: index === tabs.length - 1 ? void 0 : cellGutter
+    };
+  }
+
+  function renderBarItem(tab, index) {
+    if (renderTabBarItem) {
+      return renderTabBarItem(tab, index, {
+        active: index === activeIndex
+      });
+    }
+
+    return typeof tab === 'string' ? tab : tab.title;
+  }
+
+  function renderTabUnderline() {
+    if (!showUnderline || !isLine) {
+      return null;
+    }
+
+    return renderUnderline ? renderUnderline(underlineStyle, showLine, lineRef) : /*#__PURE__*/React.createElement("div", {
+      className: cls(prefix + "-underline", {
+        show: showLine
+      }),
+      ref: lineRef,
+      style: underlineStyle.outer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefix + "-underline-inner", {
+        caterpillar: caterpillar,
+        'custom-animate': animationKey,
+        'caterpillar-moving': caterpillar || useCaterpillar && distance
+      }, tabDirection),
+      style: _extends({}, underlineStyle.inner || {}, underlineInnerStyle || {})
+    }));
+  }
+
+  var cellInner = /*#__PURE__*/React.createElement(React.Fragment, null, tabs.map(function (tab, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: cls(prefix, tabDirection, type, system, {
+        active: index === activeIndex
+      }, {
+        'no-shrink': tabBarScroll
+      }, {
+        last: index === tabs.length - 1
+      }, {
+        custom: Boolean(renderTabBarItem)
+      }),
+      style: getCellStyle(index),
+      onClick: function onClick(e) {
+        if (disabled) {
+          return;
+        }
+
+        changeIndex(index, 'click');
+        onTabClick && onTabClick(tab, index, e);
+      },
+      ref: function ref(innerRef) {
+        // distance=0 说明不在滑动切换，减少计算次数
+        if (innerRef && !distance) {
+          allCellRectRef.current[index] = {
+            top: innerRef.offsetTop,
+            left: innerRef.offsetLeft,
+            width: innerRef.offsetWidth,
+            height: innerRef.offsetHeight
+          };
+        }
+      }
+    }, renderBarItem(tab, index));
+  }), cellPadding && !isCard && isVertical ? /*#__PURE__*/React.createElement("div", {
+    className: "fake-padding",
+    style: {
+      width: getCellPadding('right'),
+      height: '100%'
+    }
+  }) : null);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefix + "-container-wrap", tabDirection, "type-" + type, tabBarClass, system),
+    style: tabBarStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls(prefix + "-container-inner", tabDirection, "pos-" + tabBarPosition, "type-" + type, {
+      fixed: tabBarFixed
+    }, {
+      'has-divider': hasDivider
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls(prefix + "-container", tabDirection, "pos-" + tabBarPosition, "arrange-" + (originArrange || tabBarArrange), "type-" + type, {
+      overflow: hasOverflow
+    }, {
+      shown: showTab
+    }),
+    ref: domRef,
+    onScroll: onTabBarScroll
+  }, renderTabBarInner ? renderTabBarInner(cellInner) : cellInner, renderTabUnderline()), tabBarExtra));
+});
+export default TabCell;

package/esm/tabs/tab-pane.d.ts

@@ -0,0 +1,40 @@
+import React, { ReactNodeArray } from 'react';
+import { TabsProps } from '.';
+export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll'> {
+    prefixCls?: string;
+    panes: ReactNodeArray;
+    activeIndex: number;
+    activeIndexRef: React.MutableRefObject<number>;
+    tabDirection: 'horizontal' | 'vertical';
+    distance: number;
+    wrapWidth: number;
+    wrapHeight: number;
+    handlePaneTouchEnd: (e: any) => void;
+    paneTrans: boolean;
+    swipeable: boolean;
+    changeIndex: (newIndex: number, from?: string) => void;
+}
+export interface TabPaneRef {
+    /**
+     * 外层元素 DOM
+     * @en Outer element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 获取当前 transitionDuration
+     * @en Get the current transitionDuration
+     */
+    getTransition: () => number;
+    /**
+     * 滚动到指定 Tab，仅滚动监听模式下可用
+     * @en Scroll to the specified Tab, only available in scroll monitor mode
+     */
+    scrollToIndex: (index: number, rightNow?: boolean) => void;
+    /**
+     * autoHeight=true时，更新当前tabpane高度
+     * @en Update the current tabpane height, which takes effect when autoHeight=true
+     */
+    setCurrentHeight: () => void;
+}
+declare const TabPane: React.ForwardRefExoticComponent<TabPaneProps & React.RefAttributes<TabPaneRef>>;
+export default TabPane;