react-vant-nova 1.0.0-test

package/lib/tabs/PropsType.d.ts

@@ -0,0 +1,149 @@
+import React from 'react';
+import { BadgeProps } from '../badge';
+import { SwiperInstance, SwiperProps } from '../swiper/PropsType';
+import { BaseTypeProps } from '../utils';
+declare type ScrollspyConfig = {
+    /** 滚动导航模式下，容器滚动触底时是否将最后一个tab转为Active状态 */
+    autoFocusLast?: boolean;
+    /** 触底偏移量 */
+    reachBottomThreshold?: number;
+    /** 点击标签，立即展示对应内容区域，取消滚动动画 */
+    scrollImmediate?: boolean;
+};
+declare type TabPaneTitle = React.ReactNode | ((active: boolean) => React.ReactNode);
+export interface TabsProps extends BaseTypeProps {
+    /** 样式风格类型 */
+    type?: 'line' | 'card' | 'capsule' | 'jumbo';
+    /**
+     * 标签栏对齐方式
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | string;
+    /** 标签主题色	 */
+    color?: string;
+    /** 是否显示标签栏外边框，仅在 type="line" 时有效	 */
+    border?: boolean;
+    /** 是否使用粘性定位布局	 */
+    sticky?: boolean;
+    /**
+     * sticky模式下点击标签重置滚动条位置
+     * @default true
+     */
+    stickyInitScrollbar?: boolean;
+    /** 是否开启切换标签内容时的转场动画	 */
+    animated?: boolean;
+    /** 是否开启手势左右滑动切换	 */
+    swipeable?: boolean | Pick<SwiperProps, 'autoHeight' | 'preventScroll'>;
+    /** 是否开启滚动导航	 */
+    scrollspy?: boolean | ScrollspyConfig;
+    /** 标签栏背景色	 */
+    background?: string;
+    /** 底部条宽度，默认单位 px	 */
+    lineWidth?: number | string;
+    /** 底部条高度，默认单位 px	 */
+    lineHeight?: number | string;
+    /** 切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise	 */
+    beforeChange?: (name: number | string) => boolean | Promise<boolean>;
+    /** 标题选中态颜色	 */
+    titleActiveColor?: string;
+    /** 标题默认态颜色	 */
+    titleInactiveColor?: string;
+    /** 当前选中项的标识符 */
+    active?: number | string;
+    /** 默认选项 */
+    defaultActive?: number | string;
+    /** 是否省略过长的标题文字	 */
+    ellipsis?: boolean;
+    /** 动画时间，单位毫秒，设置为 0 可以禁用动画	 */
+    duration?: number | string;
+    /** 粘性定位布局下与顶部的最小距离，支持 px vw vh rem 单位，默认 px	 */
+    offsetTop?: number | string;
+    /** 是否开启延迟渲染（首次切换到标签时才触发内容渲染）	 */
+    lazyRender?: boolean;
+    /** 延迟渲染占位符 */
+    lazyRenderPlaceholder?: React.ReactNode;
+    /**
+     * 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动
+     * @default 5
+     */
+    swipeThreshold?: number | string;
+    /** 标签栏左侧内容 */
+    navLeft?: React.ReactNode;
+    /** 标签栏右侧内容 */
+    navRight?: React.ReactNode;
+    /** 标签栏下方内容 */
+    navBottom?: React.ReactNode;
+    /** @deprecated */
+    onClick?: (name: string | number, title: any) => void;
+    /** 点击标签时触发	 */
+    onClickTab?: (tab: any) => void;
+    /** 当前激活的标签改变时触发	 */
+    onChange?: (name: string | number, tabIndex: number) => void;
+    /** 滚动时触发，仅在 sticky 模式下生效	 */
+    onScroll?: (params: {
+        scrollTop: number;
+        isFixed: boolean;
+    }) => void;
+    children?: React.ReactNode;
+}
+export interface TabsTitleProps extends BaseTypeProps {
+    key?: React.Key;
+    type: string;
+    color: string;
+    title: TabPaneTitle;
+    description?: TabPaneTitle;
+    /** 图标右上角徽标的内容	 */
+    badge?: number | string | Omit<BadgeProps, 'children' | 'onClick' | 'onTouchStart'>;
+    isActive: boolean;
+    disabled: boolean;
+    scrollable: boolean;
+    activeColor: string;
+    inactiveColor: string;
+    onClick: (event: any) => void;
+}
+export interface TabsContentProps {
+    inited?: boolean;
+    animated?: boolean;
+    swipeable?: TabsProps['swipeable'];
+    lazyRender?: boolean;
+    count: number;
+    duration: number | string;
+    currentIndex: number;
+    swiperRef: React.RefObject<SwiperInstance>;
+    onChange?: (index: any) => void;
+    children?: React.ReactNode;
+}
+export interface TabPaneProps {
+    key?: React.Key;
+    /** @private */
+    index?: number;
+    /** 标签名称，作为匹配的标识符	 */
+    name?: number | string;
+    /** 图标右上角徽标的内容	 */
+    badge?: number | string | Omit<BadgeProps, 'children' | 'onClick' | 'onTouchStart'>;
+    /** 标题 */
+    title?: TabPaneTitle;
+    /** 描述信息 */
+    description?: TabPaneTitle;
+    /** 自定义标题样式	 */
+    titleStyle?: React.CSSProperties;
+    /** 自定义标题类名	 */
+    titleClass?: string;
+    /** 是否禁用标签	 */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export declare type TabsClickTabEventParams = {
+    name: string | number;
+    event: React.MouseEvent;
+    disabled: boolean;
+    index: number;
+};
+export declare type TabsInstance = {
+    /** 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘	 */
+    /** 滚动到指定的标签页，在滚动导航模式下可用 */
+    scrollTo: (name: number | string) => void;
+    /** 调用 swiper 方法 */
+    swiper?: Partial<Pick<SwiperInstance, 'disable' | 'enable'>>;
+};
+export {};

package/lib/tabs/PropsType.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/tabs/TabPane.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabPaneProps } from './PropsType';
+declare const TabPane: React.ForwardRefExoticComponent<TabPaneProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPane;

package/lib/tabs/TabPane.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _TabsContext = _interopRequireDefault(require("./TabsContext"));
+var _utils = require("../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const [bem] = (0, _utils.createNamespace)('tab');
+const TabPane = (0, _react().forwardRef)((props, ref) => {
+  const parent = (0, _react().useContext)(_TabsContext.default);
+  const {
+    animated,
+    swipeable,
+    scrollspy,
+    lazyRender,
+    lazyRenderPlaceholder
+  } = parent.props;
+  const {
+    index
+  } = props;
+  const name = (0, _react().useMemo)(() => {
+    var _a;
+    return (_a = props.name) !== null && _a !== void 0 ? _a : index;
+  }, [index, props.name]);
+  const active = (0, _react().useMemo)(() => name === parent.currentName, [name, parent.currentName]);
+  const [inited, setInited] = (0, _react().useState)(() => active);
+  const init = () => {
+    setInited(true);
+  };
+  const isActive = (0, _react().useMemo)(() => {
+    if (active && !inited) {
+      init();
+    }
+    return active;
+  }, [active, inited]);
+  const show = scrollspy || isActive;
+  const shouldRender = inited || scrollspy || !lazyRender;
+  const Content = shouldRender ? props.children : lazyRenderPlaceholder;
+  if (animated || swipeable) {
+    return (0, _jsxRuntime().jsx)("div", Object.assign({
+      ref: ref,
+      role: 'tabpanel',
+      className: (0, _clsx().default)(bem('pane'))
+    }, {
+      children: Content
+    }));
+  }
+  return (0, _jsxRuntime().jsx)("div", Object.assign({
+    ref: ref,
+    style: {
+      display: show ? 'block' : 'none'
+    },
+    role: 'tabpanel',
+    className: (0, _clsx().default)(bem('pane'))
+  }, {
+    children: Content
+  }));
+});
+var _default = exports.default = TabPane;

package/lib/tabs/Tabs.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabsInstance, TabsProps } from './PropsType';
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsInstance>>;
+export default Tabs;

package/lib/tabs/Tabs.js

@@ -0,0 +1,367 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _useRefs = _interopRequireDefault(require("../hooks/use-refs"));
+var _useScrollParent = _interopRequireDefault(require("../hooks/use-scroll-parent"));
+var _sticky = _interopRequireDefault(require("../sticky"));
+var _TabsTitle = _interopRequireDefault(require("./TabsTitle"));
+var _TabsContent = _interopRequireDefault(require("./TabsContent"));
+var _TabsContext = _interopRequireDefault(require("./TabsContext"));
+var _utils = require("../utils");
+var _interceptor = require("../utils/interceptor");
+var _constant = require("../utils/constant");
+var _hooks = require("../hooks");
+var _useEventListener = _interopRequireDefault(require("../hooks/use-event-listener"));
+var _utils2 = require("./utils");
+var _useRefState = _interopRequireDefault(require("../hooks/use-ref-state"));
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const [bem] = (0, _utils.createNamespace)('tabs');
+const getTabName = (tab, index) => {
+  var _a;
+  return (_a = tab === null || tab === void 0 ? void 0 : tab.name) !== null && _a !== void 0 ? _a : index;
+};
+const Tabs = (0, _react().forwardRef)((p, ref) => {
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    type: 'line',
+    duration: 300,
+    swipeThreshold: 5,
+    offsetTop: 0,
+    ellipsis: true,
+    lazyRender: true,
+    stickyInitScrollbar: true,
+    defaultActive: 0,
+    align: 'center'
+  });
+  const {
+    children,
+    color,
+    align,
+    background
+  } = props;
+  const root = (0, _react().useRef)(null);
+  const swiperRef = (0, _react().useRef)(null);
+  const wrapRef = (0, _react().useRef)(null);
+  const lockScroll = (0, _react().useRef)(false);
+  const stickyFixed = (0, _react().useRef)(false);
+  const immediateRef = (0, _react().useRef)(true);
+  const navRef = (0, _react().useRef)(null);
+  const scroller = (0, _useScrollParent.default)(root);
+  const [titleRefs, setTitleRefs] = (0, _useRefs.default)();
+  const [contentRefs, setContentRefs] = (0, _useRefs.default)();
+  const wrapHeight = (0, _react().useMemo)(() => {
+    if (!wrapRef.current) return 0;
+    return (0, _utils.getVisibleHeight)(wrapRef.current);
+  }, [wrapRef.current]);
+  const childrenList = (0, _react().useMemo)(() => (0, _utils.parseChildList)(props.children), [props.children]);
+  const defaultIndex = (0, _react().useMemo)(() => {
+    if (props.scrollspy) return 0;
+    const ac = props.active === undefined ? props.defaultActive : props.active;
+    let idx = childrenList.findIndex((tab, index) => getTabName(tab, index) === ac);
+    if (idx < 0) idx = 0;
+    return idx;
+  }, [props.scrollspy, props.active, props.defaultActive]);
+  const [index, setIndex] = (0, _useRefState.default)(defaultIndex);
+  // whether the nav is scrollable
+  const scrollable = (0, _react().useMemo)(() => childrenList.length > props.swipeThreshold || !props.ellipsis, [childrenList.length, props.swipeThreshold, props.ellipsis]);
+  const navStyle = (0, _react().useMemo)(() => ({
+    borderColor: props.type === 'card' ? color : undefined,
+    background
+  }), [color, background]);
+  const currentName = (0, _react().useMemo)(() => {
+    const activeTab = childrenList === null || childrenList === void 0 ? void 0 : childrenList[index];
+    return activeTab ? getTabName(activeTab, index) : 0;
+  }, [childrenList, index]);
+  const offsetTopPx = (0, _react().useMemo)(() => (0, _utils.unitToPx)(props.offsetTop), [props.offsetTop]);
+  // 下划线偏移量
+  const [lineTranslateLeft, setLineTranslateLeft] = (0, _react().useState)(0);
+  const [showLine, setShowLine] = (0, _react().useState)(false);
+  (0, _hooks.useUpdateEffect)(() => {
+    const hidden = (0, _utils.isHidden)(root.current);
+    const title = titleRefs === null || titleRefs === void 0 ? void 0 : titleRefs[index];
+    if (!title || hidden || props.type !== 'line') {
+      return;
+    }
+    setShowLine(true);
+    setLineTranslateLeft(title.offsetLeft + title.offsetWidth / 2);
+  }, [root.current, titleRefs, props.type, index, childrenList]);
+  // 下划线样式
+  const lineStyle = (0, _react().useMemo)(() => {
+    const {
+      lineWidth,
+      lineHeight
+    } = props;
+    const measureStyle = {
+      width: (0, _utils.addUnit)(lineWidth),
+      backgroundColor: color,
+      transitionDuration: `${immediateRef.current ? 0 : props.duration}ms`,
+      display: showLine ? 'inherit' : 'none'
+    };
+    if (lineTranslateLeft) {
+      measureStyle.transform = `translateX(${lineTranslateLeft}px) translateX(-50%)`;
+    }
+    if (lineHeight) {
+      const height = (0, _utils.addUnit)(lineHeight);
+      measureStyle.height = height;
+      measureStyle.borderRadius = height;
+    }
+    return measureStyle;
+  }, [color, props.lineHeight, props.lineWidth, lineTranslateLeft, immediateRef.current, showLine]);
+  const getAvailableTab = targetIndex => {
+    var _a;
+    const diff = targetIndex < index ? -1 : 1;
+    while (targetIndex >= 0 && targetIndex < childrenList.length) {
+      if (!((_a = childrenList[targetIndex]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+        return targetIndex;
+      }
+      targetIndex += diff;
+    }
+    return null;
+  };
+  const setCurrentIndex = currentIndex => {
+    var _a;
+    const availableIndex = getAvailableTab(currentIndex);
+    if (availableIndex === null) return;
+    const newTab = childrenList[availableIndex];
+    const newName = getTabName(newTab, availableIndex);
+    setIndex(availableIndex);
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newName, availableIndex);
+  };
+  // sync scrollspy content position
+  const scrollToCurrentContent = current => {
+    var _a, _b;
+    if (!props.scrollspy) return;
+    const contentTarget = contentRefs[current !== null && current !== void 0 ? current : index];
+    if (contentTarget && scroller) {
+      const immediate = (0, _utils.isObject)(props.scrollspy) ? (_b = (_a = props.scrollspy) === null || _a === void 0 ? void 0 : _a.scrollImmediate) !== null && _b !== void 0 ? _b : true : true;
+      // void ui shake use math.ceil to get `to` value
+      const to = Math.ceil((0, _utils.getElementTop)(contentTarget, scroller) - (offsetTopPx + wrapHeight));
+      lockScroll.current = true;
+      (0, _utils.scrollTopTo)(scroller, to, immediate ? 0 : +props.duration, () => {
+        lockScroll.current = false;
+      });
+    }
+  };
+  const onClickTab = (item, targetIndex, event) => {
+    var _a;
+    const {
+      disabled = false
+    } = item;
+    const name = getTabName(item, targetIndex);
+    (_a = props.onClickTab) === null || _a === void 0 ? void 0 : _a.call(props, {
+      name,
+      event,
+      disabled,
+      index: targetIndex
+    });
+    if (disabled) return;
+    (0, _interceptor.callInterceptor)({
+      interceptor: props.beforeChange,
+      args: [name],
+      done: () => {
+        if (targetIndex !== index) {
+          setCurrentIndex(targetIndex);
+          scrollToCurrentContent(targetIndex);
+        }
+      }
+    });
+  };
+  // scroll active tab into view
+  const scrollIntoView = immediate => {
+    const nav = navRef.current;
+    const title = titleRefs === null || titleRefs === void 0 ? void 0 : titleRefs[index];
+    if (!scrollable || !nav || !title) {
+      return;
+    }
+    const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
+    (0, _utils.scrollLeftTo)(nav, to, immediate ? 0 : +props.duration);
+  };
+  const getCurrentIndexOnScroll = () => {
+    const scrollOffset = offsetTopPx + wrapHeight;
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < contentRefs.length; index++) {
+      const $el = contentRefs[index];
+      const top = (0, _utils.getVisibleTop)($el);
+      if (top > scrollOffset) {
+        return index === 0 ? 0 : index - 1;
+      }
+    }
+    return titleRefs.length - 1;
+  };
+  const onScroll = () => {
+    if (!props.scrollspy || lockScroll.current) return;
+    let currentIndex = getCurrentIndexOnScroll();
+    if (typeof props.scrollspy === 'object') {
+      if (props.scrollspy.autoFocusLast && (0, _utils2.isReachBottom)(props.scrollspy.reachBottomThreshold)) {
+        currentIndex = titleRefs.length - 1;
+      }
+    }
+    if (currentIndex !== index) {
+      setCurrentIndex(currentIndex);
+    }
+  };
+  const onStickyScroll = params => {
+    var _a;
+    stickyFixed.current = params.isFixed;
+    (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, params);
+  };
+  const renderNav = () => {
+    return childrenList.map((item, itemIndex) => {
+      return (0, _jsxRuntime().jsx)(_TabsTitle.default, {
+        ref: setTitleRefs(itemIndex),
+        type: props.type,
+        badge: item.badge,
+        title: item.title,
+        description: item.description,
+        color: color,
+        style: item.titleStyle,
+        className: item.titleClass,
+        isActive: itemIndex === index,
+        disabled: item.disabled,
+        scrollable: scrollable,
+        activeColor: props.titleActiveColor,
+        inactiveColor: props.titleInactiveColor,
+        onClick: event => {
+          onClickTab(item, itemIndex, event);
+        }
+      }, item.key);
+    });
+  };
+  const renderHeader = () => {
+    const {
+      type,
+      border
+    } = props;
+    return (0, _jsxRuntime().jsx)("div", Object.assign({
+      ref: wrapRef,
+      className: (0, _clsx().default)([bem('wrap', {
+        scrollable
+      }), {
+        [_constant.BORDER_TOP_BOTTOM]: type !== 'card' && border
+      }])
+    }, {
+      children: (0, _jsxRuntime().jsxs)("div", Object.assign({
+        ref: navRef,
+        role: 'tablist',
+        className: (0, _clsx().default)(bem('nav', [type, {
+          complete: scrollable,
+          start: align === 'start'
+        }])),
+        style: navStyle
+      }, {
+        children: [props.navLeft, renderNav(), type === 'line' && !immediateRef.current && (0, _jsxRuntime().jsx)("div", {
+          className: (0, _clsx().default)(bem('line')),
+          style: lineStyle
+        }), props.navRight]
+      }))
+    }));
+  };
+  // sync props.active to inner index value
+  (0, _hooks.useUpdateEffect)(() => {
+    if (props.active === undefined) return;
+    if (props.active !== currentName) {
+      const currentIndex = childrenList.findIndex((tab, index) => getTabName(tab, index) === props.active);
+      if (currentIndex > -1 && currentIndex !== index) {
+        setIndex(currentIndex);
+        scrollToCurrentContent(currentIndex);
+      }
+    }
+  }, [props.active]);
+  // sync tab.pane title in correct postion when index change
+  (0, _hooks.useUpdateEffect)(() => {
+    scrollIntoView();
+    // scrollspy situation
+    if (stickyFixed.current && props.stickyInitScrollbar && !props.scrollspy) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      (0, _utils.setRootScrollTop)(Math.ceil((0, _utils.getElementTop)(root.current) - offsetTopPx));
+    }
+  }, [index]);
+  // init
+  (0, _react().useEffect)(() => {
+    immediateRef.current = false;
+    scrollIntoView(true);
+  }, []);
+  (0, _useEventListener.default)('scroll', onScroll, {
+    target: scroller,
+    depends: [index]
+  });
+  (0, _react().useImperativeHandle)(ref, () => {
+    var _a, _b;
+    return {
+      scrollTo: name => {
+        const currentIndex = childrenList.findIndex((tab, index) => getTabName(tab, index) === name);
+        if (currentIndex > -1 && currentIndex !== index) {
+          setIndex(currentIndex);
+          scrollToCurrentContent(currentIndex);
+        }
+      },
+      swiper: swiperRef.current ? {
+        enable: (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.enable,
+        disable: (_b = swiperRef.current) === null || _b === void 0 ? void 0 : _b.disable
+      } : undefined
+    };
+  });
+  return (0, _jsxRuntime().jsx)(_TabsContext.default.Provider, Object.assign({
+    value: {
+      props,
+      currentName,
+      scrollIntoView
+    }
+  }, {
+    children: (0, _jsxRuntime().jsxs)("div", Object.assign({
+      ref: root,
+      className: (0, _clsx().default)(props.className, bem([props.type])),
+      style: props.style
+    }, {
+      children: [props.sticky ? (0, _jsxRuntime().jsxs)(_sticky.default, Object.assign({
+        container: root,
+        offsetTop: offsetTopPx,
+        onScroll: onStickyScroll
+      }, {
+        children: [renderHeader(), props.navBottom]
+      })) : (0, _jsxRuntime().jsxs)(_jsxRuntime().Fragment, {
+        children: [renderHeader(), props.navBottom]
+      }), (0, _jsxRuntime().jsx)(_TabsContent.default, Object.assign({
+        swiperRef: swiperRef,
+        count: childrenList.length,
+        animated: props.animated,
+        duration: props.duration,
+        swipeable: props.swipeable,
+        lazyRender: props.lazyRender,
+        currentIndex: index,
+        onChange: setCurrentIndex
+      }, {
+        children: _react().default.Children.toArray(children).filter(Boolean).map((node, index) => _react().default.cloneElement(node, {
+          index,
+          ref: setContentRefs(index)
+        }))
+      }))]
+    }))
+  }));
+});
+var _default = exports.default = Tabs;

package/lib/tabs/TabsContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabsContentProps } from './PropsType';
+declare const TabsContent: React.FC<TabsContentProps>;
+export default TabsContent;