@bifrostui/react 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "value" | "defaultValue" | "onChange" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "defaultValue" | "onChange" | "value" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/dist/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "onClose" | "hideBackdrop" | "BackdropProps" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Tabs/miniapp/Tab.js

@@ -32,7 +32,6 @@ __export(Tab_exports, {
 module.exports = __toCommonJS(Tab_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
-var import_components = require("@tarojs/components");
 var import_utils = require("@bifrostui/utils");
 var import_TabsContext = __toESM(require("./TabsContext"));
 var import_classes = require("../classes");
@@ -83,7 +82,7 @@ const Tab = (props) => {
   );
   const tabId = tabsContainerId ? `${tabsContainerId}-tab-${index}` : void 0;
   return /* @__PURE__ */ import_react.default.createElement(
-    import_components.View,
+    "div",
     {
       id: tabId,
       className: rootCls,

package/dist/Tabs/miniapp/TabIndicator.js

@@ -53,7 +53,6 @@ module.exports = __toCommonJS(TabIndicator_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_taro = __toESM(require("@tarojs/taro"));
-var import_components = require("@tarojs/components");
 var import_utils = require("@bifrostui/utils");
 var import_classes = require("../classes");
 var import_queryBatch = require("./utils/queryBatch");
@@ -191,7 +190,7 @@ const TabIndicator = ({
     };
   }, [initializePositions]);
   return /* @__PURE__ */ import_react.default.createElement(
-    import_components.View,
+    "div",
     {
       id: `${wrapperId}-indicator`,
       className: (0, import_clsx.default)(import_classes.tabIndicatorClass),

package/dist/Tabs/miniapp/TabMask.js

@@ -32,7 +32,6 @@ __export(TabMask_exports, {
 module.exports = __toCommonJS(TabMask_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
-var import_components = require("@tarojs/components");
 var import_classes = require("../classes");
 const TabMask = ({
   position,
@@ -48,7 +47,7 @@ const TabMask = ({
     return rightRange > 1;
   }, [position, scrollLeft, containerWidth, scrollWidth]);
   return /* @__PURE__ */ import_react.default.createElement(
-    import_components.View,
+    "div",
     {
       className: (0, import_clsx.default)(
         import_classes.tabMaskClass,

package/dist/Tabs/miniapp/Tabs.js

@@ -126,8 +126,8 @@ const Tabs = (props) => {
   });
   const handleClick = (0, import_utils.useEventCallback)(
     (e, item) => {
-      const { index, disabled: isDisabled = false } = item;
-      if (isDisabled || [void 0, null].includes(index))
+      const { index, disabled = false } = item;
+      if (disabled || [void 0, null].includes(index))
         return;
       if (index !== currentValue) {
         triggerValueChange(e, index);
@@ -164,33 +164,47 @@ const Tabs = (props) => {
       }
     }));
   }, [scrollViewId, registrationVersion, registeredTabValues.length]);
+  const centerActiveTab = (0, import_utils.useEventCallback)(() => __async(void 0, null, function* () {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    const { scrollView, scrollFields, wrapper, currentTab } = yield (0, import_queryBatch.batchQueryForScroll)({
+      scrollViewId,
+      wrapperId,
+      currentTabValue: currentValue
+    });
+    if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
+      return;
+    }
+    const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
+    const tabWidth = currentTab.width;
+    const containerViewWidth = scrollView.width;
+    const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
+    const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
+    const maxScrollDistance = currentScrollWidth - containerViewWidth;
+    const finalScrollLeft = Math.max(
+      0,
+      Math.min(targetScrollLeft, maxScrollDistance)
+    );
+    setScrollLeft(finalScrollLeft);
+    lastScrollLeftRef.current = finalScrollLeft;
+  }));
   import_react.default.useEffect(() => {
     if (!currentValue || registeredTabValues.length === 0) {
       return;
     }
-    import_taro.default.nextTick(() => __async(void 0, null, function* () {
-      const { scrollView, scrollFields, wrapper, currentTab } = yield (0, import_queryBatch.batchQueryForScroll)({
-        scrollViewId,
-        wrapperId,
-        currentTabValue: currentValue
-      });
-      if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
-        return;
-      }
-      const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
-      const tabWidth = currentTab.width;
-      const containerViewWidth = scrollView.width;
-      const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
-      const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
-      const maxScrollDistance = currentScrollWidth - containerViewWidth;
-      const finalScrollLeft = Math.max(
-        0,
-        Math.min(targetScrollLeft, maxScrollDistance)
-      );
-      setScrollLeft(finalScrollLeft);
-      lastScrollLeftRef.current = finalScrollLeft;
-    }));
-  }, [currentValue, scrollViewId, wrapperId]);
+    import_taro.default.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [currentValue, centerActiveTab]);
+  import_react.default.useEffect(() => {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    import_taro.default.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [registrationVersion, centerActiveTab]);
   const contextValue = (0, import_react.useMemo)(
     () => ({
       value: currentValue,
@@ -214,7 +228,7 @@ const Tabs = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: (0, import_clsx.default)(import_classes.tabsRootClass, className), style }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(import_classes.tabsRootClass, className), style }, /* @__PURE__ */ import_react.default.createElement(
     import_TabMask.default,
     {
       position: "left",
@@ -245,7 +259,7 @@ const Tabs = (props) => {
       enablePassive: true,
       enableFlex: true
     },
-    /* @__PURE__ */ import_react.default.createElement(import_components.View, { id: wrapperId, className: import_classes.tabsScrollWrapperClass }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { id: wrapperId, className: import_classes.tabsScrollWrapperClass }, /* @__PURE__ */ import_react.default.createElement(
       import_TabIndicator.default,
       {
         currentValue,

package/es/Tabs/miniapp/Tab.js

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import clsx from "clsx";
-import { View } from "@tarojs/components";
 import { useContextSelector } from "@bifrostui/utils";
 import TabsContext from "./TabsContext";
 import { tabRootClass, tabActiveClass, tabDisabledClass } from "../classes";
@@ -51,7 +50,7 @@ const Tab = (props) => {
   );
   const tabId = tabsContainerId ? `${tabsContainerId}-tab-${index}` : void 0;
   return /* @__PURE__ */ React.createElement(
-    View,
+    "div",
     {
       id: tabId,
       className: rootCls,

package/es/Tabs/miniapp/TabIndicator.js

@@ -21,7 +21,6 @@ var __async = (__this, __arguments, generator) => {
 import React, { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import Taro from "@tarojs/taro";
-import { View } from "@tarojs/components";
 import { useEventCallback } from "@bifrostui/utils";
 import { tabIndicatorClass } from "../classes";
 import { batchQueryTabs } from "./utils/queryBatch";
@@ -159,7 +158,7 @@ const TabIndicator = ({
     };
   }, [initializePositions]);
   return /* @__PURE__ */ React.createElement(
-    View,
+    "div",
     {
       id: `${wrapperId}-indicator`,
       className: clsx(tabIndicatorClass),

package/es/Tabs/miniapp/TabMask.js

@@ -1,6 +1,5 @@
 import React from "react";
 import clsx from "clsx";
-import { View } from "@tarojs/components";
 import { tabMaskClass, tabMaskLeftClass, tabMaskRightClass } from "../classes";
 const TabMask = ({
   position,
@@ -16,7 +15,7 @@ const TabMask = ({
     return rightRange > 1;
   }, [position, scrollLeft, containerWidth, scrollWidth]);
   return /* @__PURE__ */ React.createElement(
-    View,
+    "div",
     {
       className: clsx(
         tabMaskClass,

package/es/Tabs/miniapp/Tabs.js

@@ -21,7 +21,7 @@ var __async = (__this, __arguments, generator) => {
 import React, { useMemo, useState } from "react";
 import clsx from "clsx";
 import Taro from "@tarojs/taro";
-import { View, ScrollView } from "@tarojs/components";
+import { ScrollView } from "@tarojs/components";
 import { useValue, useEventCallback } from "@bifrostui/utils";
 import Tab from "./Tab";
 import TabIndicator from "./TabIndicator";
@@ -101,8 +101,8 @@ const Tabs = (props) => {
   });
   const handleClick = useEventCallback(
     (e, item) => {
-      const { index, disabled: isDisabled = false } = item;
-      if (isDisabled || [void 0, null].includes(index))
+      const { index, disabled = false } = item;
+      if (disabled || [void 0, null].includes(index))
         return;
       if (index !== currentValue) {
         triggerValueChange(e, index);
@@ -139,33 +139,47 @@ const Tabs = (props) => {
       }
     }));
   }, [scrollViewId, registrationVersion, registeredTabValues.length]);
+  const centerActiveTab = useEventCallback(() => __async(void 0, null, function* () {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    const { scrollView, scrollFields, wrapper, currentTab } = yield batchQueryForScroll({
+      scrollViewId,
+      wrapperId,
+      currentTabValue: currentValue
+    });
+    if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
+      return;
+    }
+    const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
+    const tabWidth = currentTab.width;
+    const containerViewWidth = scrollView.width;
+    const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
+    const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
+    const maxScrollDistance = currentScrollWidth - containerViewWidth;
+    const finalScrollLeft = Math.max(
+      0,
+      Math.min(targetScrollLeft, maxScrollDistance)
+    );
+    setScrollLeft(finalScrollLeft);
+    lastScrollLeftRef.current = finalScrollLeft;
+  }));
   React.useEffect(() => {
     if (!currentValue || registeredTabValues.length === 0) {
       return;
     }
-    Taro.nextTick(() => __async(void 0, null, function* () {
-      const { scrollView, scrollFields, wrapper, currentTab } = yield batchQueryForScroll({
-        scrollViewId,
-        wrapperId,
-        currentTabValue: currentValue
-      });
-      if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
-        return;
-      }
-      const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
-      const tabWidth = currentTab.width;
-      const containerViewWidth = scrollView.width;
-      const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
-      const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
-      const maxScrollDistance = currentScrollWidth - containerViewWidth;
-      const finalScrollLeft = Math.max(
-        0,
-        Math.min(targetScrollLeft, maxScrollDistance)
-      );
-      setScrollLeft(finalScrollLeft);
-      lastScrollLeftRef.current = finalScrollLeft;
-    }));
-  }, [currentValue, scrollViewId, wrapperId]);
+    Taro.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [currentValue, centerActiveTab]);
+  React.useEffect(() => {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    Taro.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [registrationVersion, centerActiveTab]);
   const contextValue = useMemo(
     () => ({
       value: currentValue,
@@ -189,7 +203,7 @@ const Tabs = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(View, { className: clsx(tabsRootClass, className), style }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(tabsRootClass, className), style }, /* @__PURE__ */ React.createElement(
     TabMask,
     {
       position: "left",
@@ -220,7 +234,7 @@ const Tabs = (props) => {
       enablePassive: true,
       enableFlex: true
     },
-    /* @__PURE__ */ React.createElement(View, { id: wrapperId, className: tabsScrollWrapperClass }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { id: wrapperId, className: tabsScrollWrapperClass }, /* @__PURE__ */ React.createElement(
       TabIndicator,
       {
         currentValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.15",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -43,10 +43,10 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/styles": "2.0.0-alpha.13",
-    "@bifrostui/icons": "2.0.0-alpha.13",
-    "@bifrostui/types": "2.0.0-alpha.13",
-    "@bifrostui/utils": "2.0.0-alpha.13"
+    "@bifrostui/icons": "2.0.0-alpha.15",
+    "@bifrostui/styles": "2.0.0-alpha.15",
+    "@bifrostui/types": "2.0.0-alpha.15",
+    "@bifrostui/utils": "2.0.0-alpha.15"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",