@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/tab-bar/style/index.less

@@ -0,0 +1,96 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-tab-bar {
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    align-items: stretch;
+    overflow: hidden;
+    .use-var(font-size, tab-bar-font-size);
+    .use-var(min-height, tab-bar-height);
+    &-fixed{
+        position: fixed;
+        bottom: 0;
+    }
+
+    &-item{
+        display: flex;
+        flex: 1 1;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        .use-var(color,tab-bar-color);
+        &-title{
+           color: inherit;
+           .use-var(line-height, tab-bar-title-line-height);
+           .use-var(font-size,tab-bar-font-size);
+           .use-var(margin,tab-bar-title-margin);
+        }
+        &-children{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        &-only-title{
+            .use-var(line-height, tab-bar-only-title-line-height);
+            .use-var(font-size, tab-bar-only-title-font-size);
+            margin: 0;
+        }
+        &-active{
+            .use-var(color, tab-bar-active-color);
+        }
+        .@{prefix}-extra-wrap{
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .use-var(font-size, tab-bar-icon-size);
+            color: inherit;
+        }
+        .@{prefix}-tab-bar-item-icon{
+            display: flex;
+            .use-var(font-size, tab-bar-icon-size);
+            color: inherit;
+            .use-var(margin, tab-bar-item-icon-margin);
+        }
+    }
+}
+
+
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-tab-bar {
+    &-item {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-tab-bar-color);
+      }
+      &-active {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-tab-bar-active-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/tab-bar/tab-bar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TabBarItemProps, TabBarItemRef, TabBarRef, TabBarProps } from './type';
+export declare const TabBarContext: React.Context<TabBarContextParams>;
+interface TabBarContextParams {
+    changeIndex: (index: number) => void;
+    active: boolean;
+    index: number;
+    activeCustomStyle?: React.CSSProperties;
+}
+export declare function componentGenerator<P extends TabBarItemProps = TabBarItemProps, R extends TabBarItemRef = TabBarItemRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<TabBarProps<P> & React.RefAttributes<TabBarRef>>;
+export {};

package/esnext/tab-bar/tab-bar.js

@@ -0,0 +1,40 @@
+import React, { Children, createContext, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { useRefState } from '../_helpers';
+export const TabBarContext = createContext({
+    changeIndex: () => { },
+    active: false,
+    index: 0,
+    activeCustomStyle: {},
+});
+export function componentGenerator(Comp) {
+    return forwardRef((props, ref) => {
+        const { defaultActiveIndex = 0, activeIndex: activeIndexProps, className, fixed = true, style, dataSource, children, onChange, activeCustomStyle, } = props;
+        const [innerIndex, setInnerIndex] = useState(defaultActiveIndex);
+        const [activeIndex, activeRefIndex, setActiveIndex] = useRefState(activeIndexProps === void 0 ? innerIndex : activeIndexProps);
+        useEffect(() => {
+            setActiveIndex(activeIndexProps === void 0 ? innerIndex : activeIndexProps);
+        }, [activeIndexProps, innerIndex]);
+        const domRef = useRef(null);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+            changeIndex,
+        }));
+        const renderItem = useCallback((child, index) => (React.createElement(TabBarContext.Provider, { value: {
+                active: index === activeIndex,
+                changeIndex,
+                index,
+                activeCustomStyle,
+            }, key: index }, child)), [activeIndex]);
+        function changeIndex(index) {
+            setInnerIndex(index);
+            index !== activeRefIndex.current && onChange?.(index);
+        }
+        return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: cls(`${prefixCls}-tab-bar`, className, {
+                [`${prefixCls}-tab-bar-fixed`]: fixed,
+            }), style: style, ref: domRef }, dataSource
+            ? dataSource.map((data, index) => renderItem(React.createElement(Comp, Object.assign({ key: index }, data)), index))
+            : Children.toArray(children).map((child, index) => renderItem(child, index))))));
+    });
+}

package/esnext/tab-bar/type.d.ts

@@ -0,0 +1,95 @@
+import React, { ReactNode } from 'react';
+import { SimpleBaseProps } from '../_helpers';
+export interface TabBarProps<T extends TabBarItemProps = TabBarItemProps> {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     * @default ""
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     * @default {}
+     */
+    style?: React.CSSProperties;
+    /**
+     * 内部标签内容
+     * @en Inner Content
+     * @default null
+     */
+    children?: React.ReactNode;
+    /**
+     * 选中标签的索引值
+     * @en The index value of the selected label
+     */
+    activeIndex?: number;
+    /**
+     * 默认选中的索引值
+     * @en The index value of the default selected label
+     * @default 0
+     */
+    defaultActiveIndex?: number;
+    /**
+     * 切换标签时的回调函数
+     * @en Callback when switching tabs
+     */
+    onChange?: (index: number) => void;
+    /**
+     * 数据源，传了 dataSource 则 TabBar.TabBarItem 失效
+     * @en Data source, if it is passed, TabBar.TabBarItem will be invalid
+     */
+    dataSource?: T[];
+    /**
+     * 当前选中标签的样式
+     * @en The style of the currently selected label
+     */
+    activeCustomStyle?: React.CSSProperties;
+    /**
+     * 是否固定在底部
+     * @en Whether it is fixed at the bottom
+     * @default true
+     */
+    fixed?: boolean;
+}
+export interface TabBarItemProps extends SimpleBaseProps {
+    /**
+     * 标题
+     * @en Title
+     */
+    title?: ReactNode | ((active: boolean) => ReactNode);
+    /**
+     * 附加元素 (如徽标)
+     * @en Additional elements (such as badge)
+     */
+    extra?: ReactNode | ((active: boolean) => ReactNode);
+    /**
+     * 图标
+     * @en Icon
+     */
+    icon?: ReactNode | ((active: boolean) => ReactNode);
+    /**
+     * 自定义内容
+     * @en Custom content
+     */
+    child?: ReactNode | ((active: boolean) => ReactNode);
+    /**
+     * 点击事件
+     * @en Click event
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}
+export interface TabBarRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export interface TabBarItemRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/esnext/tab-bar/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/tabs/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TabsProps, TabsRef } from './type';
+export * from './type';
+/**
+ * 用于让用户在不同的视图中进行切换。为优化移动端渲染性能，如有替换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
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsRef>>;
+export default Tabs;

package/esnext/tabs/index.js

@@ -0,0 +1,340 @@
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useCallback, useContext, } from 'react';
+import { cls, nextTick, getOffset } from '@arco-design/mobile-utils';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import TabCell from './tab-cell';
+import TabPane from './tab-pane';
+import { useRefState, useListenResize, useUpdateEffect, useSwiperInnerScroll, useSystem, } from '../_helpers';
+export * from './type';
+/**
+ * 用于让用户在不同的视图中进行切换。为优化移动端渲染性能，如有替换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
+ */
+const Tabs = forwardRef((props, ref) => {
+    const { className, style, tabs = [], tabBarPosition = 'top', activeTab, defaultActiveTab = 0, children, onChange, onAfterChange, onTabClick, onTabBarOverflowChange, onTouchStart, onTouchMove, onTouchEnd, onTabBarScroll, onDistanceChange, onScroll, type = 'line', swipeable = true, disabled, tabBarArrange = 'center', tabBarScroll = true, tabBarFixed, tabBarExtra, tabBarScrollBezier, tabBarScrollDuration, tabBarScrollChance = 'jump', tabBarHasDivider, tabBarResetWhenScroll = 'touchmove', stopPropagation = true, getInnerScrollContainer, mode = 'swipe', getScrollContainer, scrollThrottle = 300, scrollOffset = 0, scrollWhenMounted, goLastWhenScrollBottom = true, scrollVertical = true, renderUnderline, renderTabBar, renderTabBarItem, renderTabBarInner, duration = 240, transitionDuration = 300, useCaterpillar = false, distanceToChangeTab = 10, percentToChangeTab = 0.3, speedToChangeTab = 200, disableClickTransition = true, lazyloadCount, hideContentStyle = null, renderHideContent, hideTabBarBeforeMounted, overflowThreshold = 5, tabBarGutter, tabBarPadding, underlineSize, underlineThick, underlineInnerStyle, caterpillarMaxScale, caterpillarProperty = 'scale', showUnderline = true, underlineAdaptive = false, stopTouchThreshold = 0, touchSideDisableThreshold = 0, onTouchStopped, tabBarStyle, tabPaneStyle, tabBarClass, tabPaneClass, tabPaneExtra, translateZ = true, fullScreen, autoHeight, tabBarStopPropagation = true, swipeEnergySaving = false, } = props;
+    const { useRtl } = useContext(GlobalContext);
+    const domRef = useRef(null);
+    const cellRef = useRef(null);
+    const paneRef = useRef(null);
+    const [innerIndex, setInnerIndex] = useState(defaultActiveTab);
+    const [jumpingDis, setJumpingDis] = useState(0);
+    const [wrapWidth, setWrapWidth] = useState(0);
+    const [wrapHeight, setWrapHeight] = useState(0);
+    const [cellTrans, setCellTrans] = useState(false);
+    const [paneTrans, setPaneTrans] = useState(false);
+    const [activeIndex, activeIndexRef, setActiveIndex] = useRefState(activeTab === void 0 ? innerIndex : activeTab);
+    const [distance, distanceRef, setDistance] = useRefState(0);
+    const posAdjustingRef = useRef(false);
+    const touchStartedRef = useRef(false);
+    const touchStartXRef = useRef(0);
+    const touchStartYRef = useRef(0);
+    const touchStartTimeRef = useRef(0);
+    const touchMovedRef = useRef(false);
+    const scrollingRef = useRef(null);
+    const touchStoppedRef = useRef(false);
+    const changeFromRef = useRef('');
+    const touchMoveBarScrollRef = useRef(false);
+    const system = useSystem();
+    const allPanes = getAllPanes();
+    const tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
+    const canSwipe = mode === 'swipe' &&
+        !disabled &&
+        swipeable &&
+        tabDirection === 'vertical' &&
+        tabs.length > 1;
+    const horizontalUseRtl = tabDirection === 'vertical' && useRtl;
+    const rtlRatio = horizontalUseRtl ? -1 : 1;
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        bar: cellRef.current,
+        pane: paneRef.current,
+        barOverflow: cellRef.current ? cellRef.current.hasOverflow : false,
+        updateLayout,
+        changeIndex: (newIndex, rightNow) => changeIndex(newIndex, 'manual', rightNow),
+        scrollToIndex: paneRef.current ? paneRef.current.scrollToIndex : () => { },
+    }));
+    useListenResize(updateLayout);
+    useSwiperInnerScroll(getInnerScrollContainer);
+    useEffect(() => {
+        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(() => {
+        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
+            const needScroll = scrollWhenMounted === void 0 ? activeIndex !== 0 : scrollWhenMounted;
+            if (needScroll) {
+                paneRef.current?.scrollToIndex(activeIndex, true);
+            }
+        }
+    }, []);
+    useEffect(() => {
+        paneRef.current && paneRef.current.setCurrentHeight();
+    }, [children, activeIndex, autoHeight]);
+    useEffect(() => {
+        // 受控时用受控值，否则用内部值
+        // @en When controlled, use the controlled value, otherwise use the internal value
+        setActiveIndex(activeTab === void 0 ? innerIndex : activeTab);
+    }, [activeTab, innerIndex]);
+    useUpdateEffect(() => {
+        // 利用受控手动更改index时，给cell line加上动画
+        // @en Animate the cell line when changeing the index
+        setCellTrans(true);
+        if (!changeFromRef.current) {
+            changeFromRef.current = 'manual';
+        }
+    }, [activeTab]);
+    useUpdateEffect(() => {
+        onDistanceChange && onDistanceChange(distance, wrapWidth, activeIndex);
+    }, [distance, wrapWidth, activeIndex]);
+    useUpdateEffect(() => {
+        if (changeFromRef.current !== 'scroll' && mode === 'scroll') {
+            paneRef.current?.scrollToIndex(activeIndex);
+        }
+        if (changeFromRef.current === 'click' && useCaterpillar) {
+            cellRef.current?.setCaterpillarAnimate();
+        }
+        const changeFrom = changeFromRef.current;
+        changeFromRef.current = '';
+        nextTick(() => {
+            setTimeout(() => {
+                onAfterChange && onAfterChange(tabs[activeIndex], activeIndex, changeFrom);
+            }, paneRef.current ? paneRef.current.getTransition() : 0);
+        });
+    }, [activeIndex]);
+    const handlePaneTouchStart = useCallback((e) => {
+        if (onTouchStart && onTouchStart(e, activeIndexRef.current)) {
+            return;
+        }
+        if (posAdjustingRef.current) {
+            return;
+        }
+        touchStartedRef.current = true;
+        touchMovedRef.current = false;
+        setCellTrans(false);
+        setPaneTrans(false);
+        const 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]);
+    const handlePaneTouchMove = useCallback((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;
+        }
+        touchMovedRef.current = true;
+        const evt = e.changedTouches[0];
+        const touchMoveX = evt.clientX || 0;
+        const touchMoveY = evt.clientY || 0;
+        // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况，安卓有折叠屏，触点会有超出屏幕(clientX < 0)的情况，因此这里限定ios系统
+        // @en bugfix: bugfix: Compatible with the case in safari where clientX is negative when swiping right back to the previous page
+        const posDisX = system === 'ios' && touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
+        const posDisY = touchMoveY - touchStartYRef.current;
+        const absDisX = Math.abs(posDisX);
+        const absDisY = Math.abs(posDisY);
+        const comparedDis = posDisX * rtlRatio;
+        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 && comparedDis > 0) ||
+            (activeIndexRef.current === tabs.length - 1 && comparedDis < 0)) {
+            if (!touchStoppedRef.current && absDisX > stopTouchThreshold) {
+                touchStoppedRef.current = true;
+                onTouchStopped && onTouchStopped(comparedDis >= 0 ? -1 : 1);
+            }
+            setDistance(0);
+            return;
+        }
+        e.cancelable && e.preventDefault();
+        setDistance(posDisX);
+    }, [
+        onTouchMove,
+        onTouchStopped,
+        stopTouchThreshold,
+        tabs.length,
+        touchSideDisableThreshold,
+        tabBarResetWhenScroll,
+        stopPropagation,
+    ]);
+    useEffect(() => {
+        if (paneRef.current && paneRef.current.dom && canSwipe) {
+            paneRef.current.dom.addEventListener('touchstart', handlePaneTouchStart);
+            paneRef.current.dom.addEventListener('touchmove', handlePaneTouchMove);
+        }
+        return () => {
+            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 ||
+            !touchMovedRef.current) {
+            return;
+        }
+        touchStartedRef.current = false;
+        setCellTrans(true);
+        setPaneTrans(true);
+        const touchEndTime = new Date().getTime();
+        const dis = distanceRef.current;
+        const speed = (dis / (touchEndTime - touchStartTimeRef.current)) * 1000;
+        const maxSlice = wrapWidth * percentToChangeTab;
+        const index = activeIndexRef.current;
+        const needJump = (Math.abs(dis) > maxSlice && Math.abs(dis) > distanceToChangeTab) ||
+            Math.abs(speed) > speedToChangeTab;
+        let newIndex = index;
+        const comparedDis = dis * rtlRatio;
+        if (comparedDis > 0 && needJump) {
+            newIndex = index - 1;
+        }
+        else if (comparedDis < 0 && needJump) {
+            newIndex = index + 1;
+        }
+        nextTick(() => {
+            jumpTo(newIndex);
+        });
+    }
+    function jumpTo(newIndex) {
+        posAdjustingRef.current = true;
+        if (newIndex !== activeIndexRef.current) {
+            setJumpingDis(distanceRef.current);
+        }
+        changeIndex(newIndex, 'swipe');
+        touchStartTimeRef.current = 0;
+        setTimeout(() => {
+            posAdjustingRef.current = false;
+            setJumpingDis(0);
+        }, transitionDuration);
+    }
+    function updateLayout() {
+        const { width, height } = getOffset(domRef.current);
+        cellRef.current && cellRef.current.resetUnderlineStyle();
+        setWrapWidth(width || domRef.current?.offsetWidth || 0);
+        setWrapHeight(height || domRef.current?.offsetHeight || 0);
+        paneRef.current && paneRef.current.setCurrentHeight();
+    }
+    function getAllPanes() {
+        let 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);
+        if (newIndex !== activeIndexRef.current) {
+            onChange && onChange(tabs[newIndex], newIndex, changeFrom);
+        }
+        setDistance(0);
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => {
+        const prefix = `${prefixCls}-tabs`;
+        const commonProps = {
+            prefixCls,
+            activeIndex,
+            activeIndexRef,
+            tabDirection: tabDirection,
+            changeIndex,
+            duration,
+            transitionDuration,
+            wrapWidth,
+            wrapHeight,
+            distance,
+            mode,
+            translateZ,
+            fullScreen,
+        };
+        const cellProps = {
+            ref: cellRef,
+            tabs,
+            onTabClick,
+            type,
+            tabBarPosition,
+            tabBarArrange,
+            tabBarScroll,
+            renderUnderline,
+            useCaterpillar,
+            cellTrans,
+            jumpingDis,
+            tabBarExtra,
+            onTabBarOverflowChange,
+            tabBarGutter,
+            tabBarPadding,
+            tabBarFixed,
+            tabBarScrollBezier,
+            tabBarScrollDuration,
+            tabBarScrollChance,
+            tabBarHasDivider,
+            underlineSize,
+            underlineThick,
+            underlineInnerStyle,
+            caterpillarMaxScale,
+            caterpillarProperty,
+            onTabBarScroll,
+            hideTabBarBeforeMounted,
+            overflowThreshold,
+            showUnderline,
+            underlineAdaptive,
+            disabled,
+            renderTabBarItem,
+            renderTabBarInner,
+            tabBarStyle,
+            tabBarClass,
+            tabBarStopPropagation,
+            ...commonProps,
+        };
+        const CellComp = React.createElement(TabCell, Object.assign({}, cellProps));
+        return (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,
+            React.createElement(TabPane, Object.assign({ 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, swipeEnergySaving: swipeEnergySaving, rtlRatio: rtlRatio }, commonProps))));
+    }));
+});
+export default Tabs;