@nutui/nutui-react-taro 2.3.12 → 2.4.1-beta.0

package/dist/esm/swipe.taro-aEnunftO.js

@@ -0,0 +1,185 @@
+import { a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { forwardRef, useRef, useState, useImperativeHandle, useEffect } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { useReady, nextTick } from "@tarojs/taro";
+import { u as useTouch } from "./use-touch-OfEaR5qi.js";
+import { g as getRectByTaro } from "./get-rect-by-taro-CSN0TGnD.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+function preventDefault(event, isStopPropagation) {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    event.stopPropagation();
+  }
+}
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { name: "" });
+const Swipe = forwardRef((props, instanceRef) => {
+  const classPrefix = "nut-swipe";
+  const touch = useTouch();
+  useReady(() => {
+    const getWidth = () => __awaiter(void 0, void 0, void 0, function* () {
+      if (leftWrapper.current) {
+        const leftRect = yield getRectByTaro(leftWrapper.current);
+        leftRect && setActionWidth((v) => Object.assign(Object.assign({}, v), { left: leftRect.width }));
+      }
+      if (rightWrapper.current) {
+        const rightRect = yield getRectByTaro(rightWrapper.current);
+        rightRect && setActionWidth((v) => Object.assign(Object.assign({}, v), { right: rightRect.width }));
+      }
+    });
+    nextTick(() => getWidth());
+  });
+  const { children, className, style } = Object.assign(Object.assign({}, defaultProps), props);
+  const root = useRef();
+  const opened = useRef(false);
+  const lockClick = useRef(false);
+  const startOffset = useRef(0);
+  const [state, setState] = useState({
+    offset: 0,
+    dragging: false
+  });
+  const [actionWidth, setActionWidth] = useState({
+    left: 0,
+    right: 0
+  });
+  const wrapperStyle = {
+    transform: `translate3d(${state.offset}px, 0, 0)`,
+    transitionDuration: state.dragging ? "0s" : ".6s"
+  };
+  const leftWidth = actionWidth.left;
+  const rightWidth = actionWidth.right;
+  const onTouchStart = (event) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    if (leftWrapper.current) {
+      const leftRect = yield getRectByTaro(leftWrapper.current);
+      leftRect && setActionWidth((v) => Object.assign(Object.assign({}, v), { left: leftRect.width }));
+    }
+    if (rightWrapper.current) {
+      const rightRect = yield getRectByTaro(rightWrapper.current);
+      rightRect && setActionWidth((v) => Object.assign(Object.assign({}, v), { right: rightRect.width }));
+    }
+    if (!props.disabled) {
+      startOffset.current = state.offset;
+      touch.start(event);
+      (_a = props.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    }
+  });
+  const onTouchMove = (event) => {
+    var _a;
+    if (props.disabled) {
+      return;
+    }
+    touch.move(event);
+    (_a = props.onTouchMove) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    if (touch.isHorizontal()) {
+      lockClick.current = true;
+      props.onTouchMove && props.onTouchMove(event);
+      const newState = Object.assign(Object.assign({}, state), { dragging: true });
+      const isEdge = !opened || touch.deltaX.current * startOffset.current < 0;
+      if (isEdge) {
+        preventDefault(event, true);
+      }
+      newState.offset = rangeCalculation(touch.deltaX.current + startOffset.current, -rightWidth || 0, leftWidth || 0);
+      setState(newState);
+    }
+  };
+  const onTouchEnd = (event) => {
+    var _a;
+    if (state.dragging) {
+      setState((v) => Object.assign(Object.assign({}, v), { dragging: false }));
+      toggle(state.offset > 0 ? "left" : "right");
+      setTimeout(() => {
+        lockClick.current = false;
+      }, 0);
+      (_a = props.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    }
+  };
+  const toggle = (side) => {
+    const offset = Math.abs(state.offset);
+    const base = 0.3;
+    const baseNum = opened ? 1 - base : base;
+    const width = side === "left" ? leftWidth : rightWidth;
+    if (width && offset > Number(width) * baseNum) {
+      open(side);
+    } else {
+      close(side);
+    }
+  };
+  const open = (side) => {
+    var _a;
+    opened.current = true;
+    const offset = side === "left" ? leftWidth : -rightWidth;
+    const name = props.name;
+    (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, { name, position: side });
+    setState((v) => Object.assign(Object.assign({}, v), { offset: Number(offset) || 0 }));
+  };
+  const close = (position) => {
+    var _a;
+    if (opened.current) {
+      opened.current = false;
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, {
+        name: props.name,
+        position: position || "left"
+      });
+    }
+    setState((v) => Object.assign(Object.assign({}, v), { offset: 0 }));
+  };
+  const rangeCalculation = (num, min, max) => {
+    return Math.min(Math.max(Number(num), Number(min)), Number(max));
+  };
+  const leftWrapper = useRef(null);
+  const rightWrapper = useRef(null);
+  const renderActionContent = (side) => {
+    if (props[`${side}Action`]) {
+      return React__default.createElement("div", { ref: side === "left" ? leftWrapper : rightWrapper, className: `${classPrefix}-${side}`, onClick: (e) => handleOperate(e, side) }, props[`${side}Action`]);
+    }
+    return null;
+  };
+  const handleOperate = (event, position) => {
+    var _a;
+    event.stopPropagation();
+    if (props.beforeClose) {
+      props.beforeClose(position);
+    } else {
+      (_a = props.onActionClick) === null || _a === void 0 ? void 0 : _a.call(props, event, position);
+    }
+  };
+  useImperativeHandle(instanceRef, () => ({
+    open,
+    close: () => close()
+  }));
+  useEffect(() => {
+    const handler = (event) => {
+      const targets = [root];
+      if (targets.some((targetItem) => {
+        const targetElement = targetItem.current || targetItem;
+        return !targetElement || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.contains(event.target));
+      })) {
+        return;
+      }
+      close();
+    };
+    document.addEventListener("touchstart", handler);
+    return () => {
+      document.removeEventListener("touchstart", handler);
+    };
+  }, []);
+  return React__default.createElement(
+    View,
+    { ref: root, className: classNames(classPrefix, className), onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(e), style },
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix}-wrapper`, style: wrapperStyle },
+      renderActionContent("left"),
+      children,
+      renderActionContent("right")
+    )
+  );
+});
+Swipe.defaultProps = defaultProps;
+Swipe.displayName = "NutSwipe";
+export {
+  Swipe as S
+};

package/dist/esm/tabbar.taro-CVp3ZaqP.js

@@ -0,0 +1,44 @@
+import React__default from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
+import { a as TabbarContext, T as TabbarItem } from "./tabbaritem.taro-C_90fvMh.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { defaultValue: 0, fixed: false, inactiveColor: "", activeColor: "", safeArea: false, onSwitch: (value) => {
+} });
+const Tabbar = (props) => {
+  const { children, defaultValue, value, fixed, activeColor, inactiveColor, safeArea, className, style, onSwitch } = Object.assign(Object.assign({}, defaultProps), props);
+  const classPrefix = "nut-tabbar";
+  const [selectIndex, setSelectIndex] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: onSwitch
+  });
+  return React__default.createElement(
+    "div",
+    { className: classNames(classPrefix, {
+      [`${classPrefix}-fixed`]: fixed
+    }, className), style },
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix}-wrap` },
+      React__default.createElement(TabbarContext.Provider, { value: {
+        selectIndex,
+        activeColor,
+        inactiveColor,
+        handleClick: setSelectIndex
+      } }, React__default.Children.map(children, (child, index) => {
+        if (!React__default.isValidElement(child))
+          return null;
+        return React__default.cloneElement(child, Object.assign(Object.assign({}, child.props), { index }));
+      }))
+    ),
+    (fixed || safeArea) && React__default.createElement("div", { className: `${classPrefix}-safe-area` })
+  );
+};
+Tabbar.defaultProps = defaultProps;
+Tabbar.displayName = "NutTabbar";
+Tabbar.Item = TabbarItem;
+export {
+  Tabbar as T
+};

package/dist/esm/tabbaritem.taro-C_90fvMh.js

@@ -0,0 +1,58 @@
+import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useContext } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { B as Badge } from "./badge.taro-B0spW6jr.js";
+const TabbarContext = React__default.createContext(null);
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { title: "", icon: null, value: "", dot: false, max: 99, top: "0", right: "5" });
+const TabbarItem = (props) => {
+  const ctx = useContext(TabbarContext);
+  const _a = Object.assign(Object.assign({}, defaultProps), props), {
+    className,
+    style,
+    title,
+    icon,
+    value,
+    dot,
+    max,
+    top,
+    right,
+    // @ts-ignore
+    index
+  } = _a, rest = __rest(_a, ["className", "style", "title", "icon", "value", "dot", "max", "top", "right", "index"]);
+  const active = index === (ctx === null || ctx === void 0 ? void 0 : ctx.selectIndex);
+  const classPrefix = "nut-tabbar-item";
+  const tabbarItemClass = classNames(classPrefix, {
+    [`${classPrefix}-active`]: active
+  }, className);
+  const boxPrefix = `${classPrefix}-icon-box`;
+  const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
+    [`${boxPrefix}-large`]: !icon
+  });
+  const badgeProps = {
+    value,
+    dot,
+    max,
+    top,
+    right,
+    color: ctx === null || ctx === void 0 ? void 0 : ctx.activeColor
+  };
+  return React__default.createElement("div", Object.assign({ className: tabbarItemClass, style: Object.assign({ color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor }, style), onClick: () => ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index) }, rest), icon ? React__default.createElement(
+    React__default.Fragment,
+    null,
+    React__default.createElement(
+      Badge,
+      Object.assign({}, badgeProps),
+      React__default.createElement("div", { className: boxPrefix }, icon)
+    ),
+    React__default.createElement("div", { className: titleClass }, title)
+  ) : React__default.createElement(
+    Badge,
+    Object.assign({}, badgeProps),
+    React__default.createElement("div", { className: titleClass }, title)
+  ));
+};
+export {
+  TabbarItem as T,
+  TabbarContext as a
+};

package/dist/esm/table.taro-ClLmfqz3.js

@@ -0,0 +1,174 @@
+import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useState, useEffect, useCallback, useRef } from "react";
+import classNames from "classnames";
+import { ArrowDown } from "@nutui/icons-react-taro";
+import { u as useConfig, a as useRtl } from "./configprovider.taro-CyU_tvNJ.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
+function useTableSticky(columns, rtl = false) {
+  const [isSticky, setIsSticky] = useState(false);
+  const [stickyColumnStyleMap, setStickyColumnStyleMap] = useState({});
+  const [stickyColumnClassMap, setStickyColumnClassMap] = useState({});
+  const [stickyLeftWidth, setStickyLeftWidth] = useState(0);
+  const [stickyRightWidth, setStickyRightWidth] = useState(0);
+  useEffect(() => {
+    const leftColumns = columns.filter((item) => item.fixed === "left") || [];
+    const rightColumns = columns.filter((item) => item.fixed === "right") || [];
+    const middleColumns = columns.filter((item) => !item.fixed) || [];
+    const _columnStyleMap = {};
+    const _columnClassMap = {};
+    let _stickyLeftWidth = 0;
+    let _stickyRightWidth = 0;
+    leftColumns.forEach((curr, index) => {
+      const dir = rtl ? "right" : "left";
+      _columnStyleMap[curr.key] = {
+        [dir]: _stickyLeftWidth || 0,
+        width: curr.width || "auto"
+      };
+      _columnClassMap[curr.key] = {
+        "nut-table-fixed-left": true,
+        "nut-table-fixed-left-last": index === leftColumns.length - 1
+      };
+      _stickyLeftWidth += curr.width || 0;
+    });
+    middleColumns.forEach((curr) => {
+      _columnStyleMap[curr.key] = {
+        width: curr.width || "auto"
+      };
+    });
+    for (let i = rightColumns.length - 1; i >= 0; i--) {
+      const curr = rightColumns[i];
+      const dir = rtl ? "left" : "right";
+      _columnStyleMap[curr.key] = {
+        [dir]: _stickyRightWidth || 0,
+        width: curr.width || "auto"
+      };
+      _columnClassMap[curr.key] = {
+        "nut-table-fixed-right": true,
+        "nut-table-fixed-right-first": i === 0
+      };
+      _stickyRightWidth += curr.width || 0;
+    }
+    setIsSticky(leftColumns.length > 0 || rightColumns.length > 0);
+    setStickyColumnStyleMap(_columnStyleMap);
+    setStickyColumnClassMap(_columnClassMap);
+    setStickyLeftWidth(_stickyLeftWidth);
+    setStickyRightWidth(_stickyRightWidth);
+  }, [columns]);
+  const getStickyStyle = useCallback((key) => {
+    return stickyColumnStyleMap[key];
+  }, [stickyColumnStyleMap]);
+  const getStickyClass = useCallback((key) => {
+    return stickyColumnClassMap[key];
+  }, [stickyColumnClassMap]);
+  return {
+    isSticky,
+    stickyLeftWidth,
+    stickyRightWidth,
+    getStickyClass,
+    getStickyStyle
+  };
+}
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { columns: [], data: [], bordered: true, striped: false, noData: "", sorterIcon: null, showHeader: true });
+const Table = (props) => {
+  const { locale } = useConfig();
+  const rtl = useRtl();
+  defaultProps.noData = locale.noData;
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, style, columns, data, bordered, summary, striped, noData, sorterIcon, showHeader, onSort } = _a, rest = __rest(_a, ["children", "className", "style", "columns", "data", "bordered", "summary", "striped", "noData", "sorterIcon", "showHeader", "onSort"]);
+  const sortedMapping = useRef({});
+  const [innerValue, setValue] = usePropsValue({
+    defaultValue: data,
+    finalValue: []
+  });
+  const { isSticky, stickyLeftWidth, stickyRightWidth, getStickyClass, getStickyStyle } = useTableSticky(columns, rtl);
+  useEffect(() => {
+    setValue(data);
+  }, [data]);
+  const classPrefix = "nut-table";
+  const headerClassPrefix = `${classPrefix}-main-head-tr`;
+  const bodyClassPrefix = `${classPrefix}-main-body-tr`;
+  const cls = classNames(classPrefix, className);
+  const handleSorterClick = (item) => {
+    if (item.sorter && !sortedMapping.current[item.key]) {
+      const copied = [...innerValue];
+      if (typeof item.sorter === "function") {
+        copied.sort(item.sorter);
+      } else if (item.sorter === "default") {
+        copied.sort();
+      }
+      sortedMapping.current[item.key] = true;
+      setValue(copied, true);
+      onSort && onSort(item, copied);
+    } else {
+      sortedMapping.current[item.key] = false;
+      setValue(data);
+    }
+  };
+  const cellClasses = (item) => {
+    return {
+      [`${headerClassPrefix}-border`]: props.bordered,
+      [`${headerClassPrefix}-align${item.align ? item.align : ""}`]: true
+    };
+  };
+  const getColumnItem = (value) => {
+    return columns.filter((item) => item.key === value)[0];
+  };
+  const renderHeadCells = () => {
+    return columns.map((item, index) => {
+      return React__default.createElement(
+        "div",
+        { className: classNames(`${headerClassPrefix}-th`, cellClasses(item), getStickyClass(item.key)), key: item.key, onClick: () => handleSorterClick(item), style: getStickyStyle(item.key) },
+        item.title,
+        " ",
+        item.sorter && (sorterIcon || React__default.createElement(ArrowDown, { width: "12px", height: "12px" }))
+      );
+    });
+  };
+  const sortDataItem = () => {
+    return columns.map((columns2) => {
+      return [columns2.key, columns2.render];
+    });
+  };
+  const renderBodyTds = (item, rowIndex) => {
+    return sortDataItem().map(([value, render]) => {
+      return React__default.createElement("div", { className: classNames(`${bodyClassPrefix}-td`, cellClasses(getColumnItem(value)), getStickyClass(value)), key: value, style: getStickyStyle(value) }, typeof item[value] === "function" || typeof render === "function" ? React__default.createElement("div", null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
+    });
+  };
+  const renderBodyTrs = () => {
+    return innerValue.map((item, index) => {
+      return React__default.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item, index));
+    });
+  };
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: cls }, rest),
+    React__default.createElement(
+      "div",
+      { className: classNames(`${classPrefix}-wrapper ${isSticky ? `${classPrefix}-wrapper-sticky` : ""}`), style },
+      React__default.createElement(
+        "div",
+        { className: classNames(`${classPrefix}-main`, {
+          [`${classPrefix}-main-striped`]: striped
+        }) },
+        showHeader && React__default.createElement(
+          "div",
+          { className: `${classPrefix}-main-head` },
+          React__default.createElement("div", { className: headerClassPrefix }, renderHeadCells())
+        ),
+        React__default.createElement("div", { className: `${classPrefix}-main-body` }, renderBodyTrs())
+      )
+    ),
+    isSticky ? React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement("div", { className: `${classPrefix}-sticky-left`, style: { width: stickyLeftWidth } }),
+      React__default.createElement("div", { className: `${classPrefix}-sticky-right`, style: { width: stickyRightWidth } })
+    ) : null,
+    (summary || innerValue.length === 0) && React__default.createElement("div", { className: `${classPrefix}-summary` }, summary || noData)
+  );
+};
+Table.defaultProps = defaultProps;
+Table.displayName = "NutTable";
+export {
+  Table as T
+};

package/dist/esm/tabs.taro-BxPmx5n5.js

@@ -0,0 +1,213 @@
+import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useRef, useState, useEffect } from "react";
+import { View, ScrollView } from "@tarojs/components";
+import classNames from "classnames";
+import { JoySmile } from "@nutui/icons-react-taro";
+import Taro, { nextTick, createSelectorQuery } from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { T as TabPane } from "./tabpane.taro-BAe86j3t.js";
+import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
+import { u as useForceUpdate } from "./use-force-update-CudFjCsy.js";
+import { r as requestAniFrame } from "./raf-zwv-SBjP.js";
+import { a as useRtl } from "./configprovider.taro-CyU_tvNJ.js";
+const idCounter = {};
+function uniqueId(prefix = "$nut$") {
+  if (!idCounter[prefix]) {
+    idCounter[prefix] = 0;
+  }
+  const id = ++idCounter[prefix];
+  if (prefix === "$nut$") {
+    return `${id}`;
+  }
+  return `${prefix}${id}`;
+}
+function useUuid() {
+  const idRef = useRef(uniqueId());
+  return idRef.current;
+}
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { tabStyle: {}, activeColor: "", direction: "horizontal", activeType: "line", duration: 300, autoHeight: false });
+const classPrefix = "nut-tabs";
+const Tabs = (props) => {
+  const rtl = useRtl();
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { activeColor, tabStyle, direction, activeType, duration, align, title, name, children, onClick, onChange, className, autoHeight } = _a, rest = __rest(_a, ["activeColor", "tabStyle", "direction", "activeType", "duration", "align", "title", "name", "children", "onClick", "onChange", "className", "autoHeight"]);
+  const uuid = useUuid();
+  const [value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    finalValue: 0,
+    onChange
+  });
+  const [contentStyle, setContentStyle] = useState({});
+  const titleItemsRef = useRef([]);
+  const navRef = useRef(null);
+  const getTitles = () => {
+    const titles2 = [];
+    React__default.Children.forEach(children, (child, idx) => {
+      if (React__default.isValidElement(child)) {
+        const props2 = child === null || child === void 0 ? void 0 : child.props;
+        if ((props2 === null || props2 === void 0 ? void 0 : props2.title) || (props2 === null || props2 === void 0 ? void 0 : props2.value)) {
+          titles2.push({
+            title: props2.title,
+            value: props2.value || idx,
+            disabled: props2.disabled
+          });
+        }
+      }
+    });
+    return titles2;
+  };
+  const titles = useRef(getTitles());
+  const forceUpdate = useForceUpdate();
+  useEffect(() => {
+    titles.current = getTitles();
+    let current = "";
+    titles.current.forEach((title2) => {
+      if (title2.value === value) {
+        current = value;
+      }
+    });
+    if (current !== "" && current !== value) {
+      setValue(current);
+    } else {
+      forceUpdate();
+    }
+  }, [children]);
+  const classes = classNames(classPrefix, `${classPrefix}-${direction}`, className);
+  const classesTitle = classNames(`${classPrefix}-titles`, {
+    [`${classPrefix}-titles-${activeType}`]: activeType,
+    [`${classPrefix}-titles-scrollable`]: true,
+    [`${classPrefix}-titles-${align}`]: align
+  });
+  const tabsActiveStyle = {
+    color: activeType === "smile" ? activeColor : "",
+    background: activeType === "line" ? activeColor : ""
+  };
+  const getRect = (selector) => {
+    return new Promise((resolve) => {
+      createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
+        resolve(rect[0]);
+      });
+    });
+  };
+  const getAllRect = (selector) => {
+    return new Promise((resolve) => {
+      createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => {
+        resolve(rect[0]);
+      });
+    });
+  };
+  const scrollWithAnimation = useRef(false);
+  const navRectRef = useRef();
+  const titleRectRef = useRef([]);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const [scrollTop, setScrollTop] = useState(0);
+  const scrollDirection = (to, direction2) => {
+    let count = 0;
+    const frames = 1;
+    function animate() {
+      if (direction2 === "horizontal") {
+        setScrollLeft(to);
+      } else {
+        setScrollTop(to);
+      }
+      if (++count < frames) {
+        requestAniFrame(animate);
+      }
+    }
+    animate();
+  };
+  const scrollIntoView = (index) => {
+    requestAniFrame(() => {
+      Promise.all([
+        getRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`),
+        getAllRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-titles-item`)
+      ]).then(([navRect, titleRects]) => {
+        navRectRef.current = navRect;
+        titleRectRef.current = titleRects;
+        const titleRect = titleRectRef.current[index];
+        if (!titleRect)
+          return;
+        let to = 0;
+        if (props.direction === "vertical") {
+          const DEFAULT_PADDING = 11;
+          const top = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.height, DEFAULT_PADDING);
+          to = top - (navRectRef.current.height - titleRect.height) / 2;
+        } else {
+          const DEFAULT_PADDING = 20;
+          const left = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.width, DEFAULT_PADDING);
+          to = left - (navRectRef.current.width - titleRect.width) / 2;
+          to = rtl ? -to : to;
+        }
+        nextTick(() => {
+          scrollWithAnimation.current = true;
+        });
+        scrollDirection(to, direction);
+      });
+    });
+  };
+  useEffect(() => {
+    let index = titles.current.findIndex((t) => String(t.value) === String(value));
+    index = index < 0 ? 0 : index;
+    setContentStyle({
+      transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+      transitionDuration: `${duration}ms`
+    });
+    scrollIntoView(index);
+  }, [value]);
+  const tabChange = (item, index) => {
+    onClick && onClick(item.value);
+    if (item.disabled) {
+      return;
+    }
+    setValue(item.value);
+  };
+  return React__default.createElement(
+    View,
+    Object.assign({ className: classes }, rest),
+    React__default.createElement(
+      ScrollView,
+      { enableFlex: true, scrollX: direction === "horizontal", scrollY: direction === "vertical", scrollLeft, scrollTop, showScrollbar: false, scrollWithAnimation: rtl && Taro.getEnv() !== "WEB" ? false : scrollWithAnimation.current, id: `nut-tabs-titles-${name || uuid}`, className: classesTitle, style: Object.assign({}, tabStyle) },
+      React__default.createElement(View, { className: "nut-tabs-list", ref: navRef }, !!title && typeof title === "function" ? title() : titles.current.map((item, index) => {
+        return React__default.createElement(
+          View,
+          { ref: (ref) => titleItemsRef.current.push(ref), id: `scrollIntoView${index}`, onClick: (e) => {
+            tabChange(item);
+          }, className: classNames(`${classPrefix}-titles-item`, {
+            [`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value),
+            [`nut-tabs-titles-item-disabled`]: item.disabled,
+            [`nut-tabs-titles-item-${align}`]: align
+          }), key: item.value },
+          activeType === "line" && React__default.createElement(View, { className: classNames(`${classPrefix}-titles-item-line`, {
+            [`${classPrefix}-titles-item-line-${direction}`]: true
+          }), style: tabsActiveStyle }),
+          activeType === "smile" && React__default.createElement(
+            View,
+            { className: `${classPrefix}-titles-item-smile`, style: tabsActiveStyle },
+            React__default.createElement(JoySmile, { color: activeColor })
+          ),
+          React__default.createElement(View, { className: classNames(`${classPrefix}-ellipsis`, `${classPrefix}-titles-item-text`) }, item.title)
+        );
+      }))
+    ),
+    React__default.createElement(
+      View,
+      { className: `${classPrefix}-content-wrap` },
+      React__default.createElement(View, { className: `${classPrefix}-content`, style: contentStyle }, React__default.Children.map(children, (child, idx) => {
+        if (!React__default.isValidElement(child)) {
+          return null;
+        }
+        let childProps = Object.assign(Object.assign({}, child.props), { active: value === child.props.value });
+        if (String(value) !== String(child.props.value || idx) && autoHeight) {
+          childProps = Object.assign(Object.assign({}, childProps), { autoHeightClassName: "inactive" });
+        }
+        return React__default.cloneElement(child, childProps);
+      }))
+    )
+  );
+};
+Tabs.defaultProps = defaultProps;
+Tabs.displayName = "NutTabs";
+Tabs.TabPane = TabPane;
+export {
+  Tabs as T
+};