@fairys/taro-tools-react 1.0.33 → 1.0.34

package/esm/components/custom-tab-bar/index.css

@@ -0,0 +1,39 @@
+.fairys_taro_custom_tab_bar {
+  height: 60px;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: #fff;
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.fairys_taro_custom_tab_bar-border {
+  background-color: #00000054;
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: scaleY(.5);
+}
+
+.fairys_taro_custom_tab_bar_item {
+  text-align: center;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.fairys_taro_custom_tab_bar_item cover-image {
+  width: 54px;
+  height: 54px;
+}
+
+.fairys_taro_custom_tab_bar_item cover-view {
+  font-size: 14px;
+}
+

package/esm/components/custom-tab-bar/index.d.ts

@@ -0,0 +1,57 @@
+/**自定义底部导航栏状态管理*/
+export declare const fairysTaroCustomTabBarState: {
+    /**当前选中的项*/
+    selected: string;
+    items: FairysTaroCustomTabBarItemItem[];
+    isUpdatedItems: boolean;
+    /**未选中颜色*/
+    color: string;
+    /**选中颜色*/
+    selectedColor: string;
+    /**切换标签*/
+    onSwitchTab: (url: string) => void;
+    /**更新自定义底部导航栏项*/
+    onUpdatedItems: (items: FairysTaroCustomTabBarItemItem[]) => void;
+    /**设置自定义底部导航栏渲染*/
+    onSetTabBarRender: (_tabBarRender: React.ReactNode) => void;
+};
+export interface FairysTaroCustomTabBarItemItem {
+    /**自定义底部导航栏项文本*/
+    text: string;
+    /**自定义底部导航栏项 URL*/
+    url: string;
+    /**自定义底部导航栏项图标*/
+    icon?: string;
+    /**自定义底部导航栏项样式*/
+    style?: React.CSSProperties;
+    /**自定义底部导航栏项类名*/
+    className?: string;
+    /**自定义底部导航栏项选中图标*/
+    selectedIcon?: string;
+    /**自定义底部导航栏项选中图标样式*/
+    selectedIconStyle?: React.CSSProperties;
+    /**自定义底部导航栏项图标样式*/
+    iconStyle?: React.CSSProperties;
+    /**自定义底部导航栏项选中图标类名*/
+    selectedIconClassName?: string;
+    /**自定义底部导航栏项选中文本样式*/
+    selectedTextStyle?: React.CSSProperties;
+    /**自定义底部导航栏项文本样式*/
+    textStyle?: React.CSSProperties;
+    /**自定义底部导航栏项选中文本类名*/
+    selectedTextClassName?: string;
+}
+export interface FairysTaroCustomTabBarProps {
+}
+export interface FairysTaroCustomTabBarItemProps {
+    /**自定义底部导航栏项*/
+    item: FairysTaroCustomTabBarItemItem;
+}
+export declare const FairysTaroCustomTabBar: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+/**
+ * 页面高度问题
+ */
+export declare const useFairysTaroCustomTabBarPageStyle: () => {
+    height: number;
+    overflowY: string;
+};

package/esm/components/custom-tab-bar/index.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { proxy, ref, useSnapshot } from "valtio";
+import { CoverImage, CoverView } from "@tarojs/components";
+import taro from "@tarojs/taro";
+import { Fragment, memo, useMemo } from "react";
+import clsx from "clsx";
+let fairysTaroCustomTabBarRender;
+const fairysTaroCustomTabBarState = proxy({
+    selected: '',
+    items: ref([]),
+    isUpdatedItems: false,
+    color: 'rgb(156 163 175)',
+    selectedColor: '#000',
+    onSwitchTab: (url)=>{
+        fairysTaroCustomTabBarState.selected = url;
+        taro.switchTab({
+            url
+        });
+    },
+    onUpdatedItems: (items)=>{
+        fairysTaroCustomTabBarState.items = ref(items);
+        fairysTaroCustomTabBarState.isUpdatedItems = true;
+    },
+    onSetTabBarRender: (_tabBarRender)=>{
+        fairysTaroCustomTabBarRender = _tabBarRender;
+        fairysTaroCustomTabBarState.isUpdatedItems = false;
+    }
+});
+const FairysTaroCustomTabBarItemBase = (props)=>{
+    const { item } = props;
+    const { selected, color, selectedColor } = useSnapshot(fairysTaroCustomTabBarState);
+    const isSelected = selected === item.url;
+    const className = useMemo(()=>clsx('fairys_taro_custom_tab_bar_item', item.className), [
+        item.className
+    ]);
+    const imgClassName = useMemo(()=>clsx('fairys_taro_custom_tab_bar_item_img', item.selectedIconClassName, {
+            fairys_taro_custom_tab_bar_item_img_selected: isSelected
+        }), [
+        item.selectedIconClassName,
+        isSelected
+    ]);
+    const imgStyle = useMemo(()=>({
+            opacity: isSelected ? 1 : 0.6
+        }), [
+        isSelected
+    ]);
+    const textClassName = useMemo(()=>clsx('fairys_taro_custom_tab_bar_item_text', item.selectedTextClassName, {
+            fairys_taro_custom_tab_bar_item_text_selected: isSelected
+        }), [
+        item.selectedTextClassName,
+        isSelected
+    ]);
+    const textStyle = useMemo(()=>({
+            color: isSelected ? selectedColor : color
+        }), [
+        isSelected,
+        color,
+        selectedColor
+    ]);
+    return /*#__PURE__*/ jsxs(CoverView, {
+        onClick: ()=>fairysTaroCustomTabBarState.onSwitchTab(item.url),
+        style: item.style,
+        className: className,
+        children: [
+            item.icon ? /*#__PURE__*/ jsx(CoverImage, {
+                src: isSelected ? item.selectedIcon || item.icon : item.icon,
+                className: imgClassName,
+                style: {
+                    ...imgStyle,
+                    ...(isSelected ? item.selectedIconStyle : item.iconStyle) || {}
+                }
+            }) : /*#__PURE__*/ jsx(Fragment, {}),
+            /*#__PURE__*/ jsx(CoverView, {
+                className: textClassName,
+                style: {
+                    ...(isSelected ? item.selectedTextStyle : item.textStyle) || {},
+                    ...textStyle
+                },
+                children: item.text
+            })
+        ]
+    }, item.url);
+};
+const FairysTaroCustomTabBarBase = ()=>{
+    const { items } = useSnapshot(fairysTaroCustomTabBarState);
+    const _itemsRender = useMemo(()=>{
+        if (false === fairysTaroCustomTabBarState.isUpdatedItems && fairysTaroCustomTabBarRender) return fairysTaroCustomTabBarRender;
+        const render = items.map((item)=>/*#__PURE__*/ jsx(FairysTaroCustomTabBarItemBase, {
+                item: item
+            }, item.url));
+        fairysTaroCustomTabBarState.onSetTabBarRender(render);
+        return render;
+    }, [
+        items
+    ]);
+    return /*#__PURE__*/ jsxs(CoverView, {
+        className: "fairys_taro_custom_tab_bar",
+        children: [
+            /*#__PURE__*/ jsx(CoverView, {
+                className: "fairys_taro_custom_tab_bar-border"
+            }),
+            _itemsRender
+        ]
+    });
+};
+const FairysTaroCustomTabBar = /*#__PURE__*/ memo(()=>useMemo(()=>/*#__PURE__*/ jsx(FairysTaroCustomTabBarBase, {}), []));
+const useFairysTaroCustomTabBarPageStyle = ()=>useMemo(()=>{
+        const height = taro.getSystemInfoSync().windowHeight;
+        return {
+            height: height - 60,
+            overflowY: 'auto'
+        };
+    }, []);
+export { FairysTaroCustomTabBar, fairysTaroCustomTabBarState, useFairysTaroCustomTabBarPageStyle };

package/esm/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './Mesage';
 export * from './Toast';
 export * from './connectToastMessage';
 export * from './MainPage';
+export * from './custom-tab-bar';

package/esm/components/index.js

@@ -4,3 +4,4 @@ export * from "./Mesage/index.js";
 export * from "./Toast/index.js";
 export * from "./connectToastMessage/index.js";
 export * from "./MainPage/index.js";
+export * from "./custom-tab-bar/index.js";

package/esm/context/global.data.instance.d.ts

@@ -0,0 +1,27 @@
+import { ProxyInstanceObjectBase } from '../utils/valtio/instance';
+export interface GlobalDataInstanceState {
+    /**数据默认值不使用*/
+    __defaultValue?: string;
+}
+/**
+ * 全局数据实例
+ */
+export declare class GlobalDataInstance extends ProxyInstanceObjectBase<GlobalDataInstanceState> {
+    store: GlobalDataInstanceState;
+    /**
+     * 跳转登录页面前执行
+     */
+    onBeforetToLoginPage?: () => boolean | void;
+    /**跳转 redirect 路由*/
+    toRedirect: () => void;
+    /**跳转登录页面*/
+    toLoginPage: () => void;
+}
+/**
+ * 全局数据实例
+ */
+export declare const globalDataInstance: GlobalDataInstance;
+/**
+ * 全局数据状态管理
+ */
+export declare const useGlobalData: () => [GlobalDataInstanceState, GlobalDataInstance, string | undefined];

package/esm/context/global.data.instance.js

@@ -0,0 +1,40 @@
+import { proxy, useSnapshot } from "valtio";
+import utils_navigate from "../utils/navigate.js";
+import { ProxyInstanceObjectBase } from "../utils/valtio/instance.js";
+import { globalSettingDataInstance } from "./global.setting.data.instance.js";
+import taro from "@tarojs/taro";
+import { authDataInstance } from "./auth.data.instance.js";
+class GlobalDataInstance extends ProxyInstanceObjectBase {
+    store = proxy({});
+    onBeforetToLoginPage;
+    toRedirect = ()=>{
+        const currentPath = taro.getCurrentInstance().router?.params?.redirect || '';
+        if (currentPath) utils_navigate.navigateTo({
+            url: currentPath
+        });
+    };
+    toLoginPage = ()=>{
+        authDataInstance.clear();
+        if (this.onBeforetToLoginPage) {
+            const f = this.onBeforetToLoginPage();
+            if (false === f) return;
+        }
+        const loginPageRoute = globalSettingDataInstance.store.loginPageRoute || '';
+        const isLoginPage = utils_navigate.isCurrentPage(loginPageRoute || '');
+        const _loginPageRoute = `${loginPageRoute || ''}`.replace(/^\//, '');
+        if (isLoginPage) return;
+        taro.navigateTo({
+            url: `/${_loginPageRoute}`
+        });
+    };
+}
+const globalDataInstance = new GlobalDataInstance();
+const useGlobalData = ()=>{
+    const store = useSnapshot(globalDataInstance.store);
+    return [
+        store,
+        globalDataInstance,
+        store.__defaultValue
+    ];
+};
+export { GlobalDataInstance, globalDataInstance, useGlobalData };

package/esm/context/global.message.data.instance.d.ts

@@ -40,13 +40,6 @@ export declare class GlobalMessageDataInstance extends ProxyInstanceObjectBase<G
     showToast: (config?: Partial<ToastDataType>) => void;
     /**隐藏Toast */
     hideToast: () => void;
-    /**
-     * 跳转登录页面前执行
-     */
-    onBeforetToLoginPage?: () => boolean | void;
-    toRedirect: () => void;
-    /**跳转登录页面*/
-    toLoginPage: () => void;
 }
 /**
  * 全局消息数据实例

package/esm/context/global.message.data.instance.js

@@ -1,10 +1,6 @@
 import { proxy, ref, useSnapshot } from "valtio";
-import utils_navigate from "../utils/navigate.js";
 import { createUseId } from "../utils/useId.js";
 import { ProxyInstanceObjectBase } from "../utils/valtio/instance.js";
-import { globalSettingDataInstance } from "./global.setting.data.instance.js";
-import taro from "@tarojs/taro";
-import { authDataInstance } from "./auth.data.instance.js";
 class GlobalMessageDataInstance extends ProxyInstanceObjectBase {
     store = proxy({
         messageData: ref([]),
@@ -47,27 +43,6 @@ class GlobalMessageDataInstance extends ProxyInstanceObjectBase {
             visible: false
         });
     };
-    onBeforetToLoginPage;
-    toRedirect = ()=>{
-        const currentPath = taro.getCurrentInstance().router?.params?.redirect || '';
-        if (currentPath) utils_navigate.navigateTo({
-            url: currentPath
-        });
-    };
-    toLoginPage = ()=>{
-        authDataInstance.clear();
-        if (this.onBeforetToLoginPage) {
-            const f = this.onBeforetToLoginPage();
-            if (false === f) return;
-        }
-        const loginPageRoute = globalSettingDataInstance.store.loginPageRoute || '';
-        const isLoginPage = utils_navigate.isCurrentPage(loginPageRoute || '');
-        const _loginPageRoute = `${loginPageRoute || ''}`.replace(/^\//, '');
-        if (isLoginPage) return;
-        taro.navigateTo({
-            url: `/${_loginPageRoute}`
-        });
-    };
 }
 const globalMessageDataInstance = new GlobalMessageDataInstance();
 const useGlobalMessageData = ()=>{

package/esm/context/index.d.ts

@@ -3,3 +3,4 @@ export * from './page.data.instance';
 export * from './page.info.data.instance';
 export * from './auth.data.instance';
 export * from './global.setting.data.instance';
+export * from './global.data.instance';

package/esm/context/index.js

@@ -3,3 +3,4 @@ export * from "./page.data.instance.js";
 export * from "./page.info.data.instance.js";
 export * from "./auth.data.instance.js";
 export * from "./global.setting.data.instance.js";
+export * from "./global.data.instance.js";

package/esm/styles/index.css

@@ -181,6 +181,11 @@
   font-size: 12.8px;
 }
 
+.fairystaro__text-black {
+  --un-text-opacity: 1;
+  color: rgb(0 0 0 / var(--un-text-opacity));
+}
+
 .fairystaro__text-color-_zkh1_blue_zhk2_ {
   color: #00f;
 }
@@ -197,10 +202,23 @@
   color: red;
 }
 
+.fairystaro__text-gray-400 {
+  --un-text-opacity: 1;
+  color: rgb(156 163 175 / var(--un-text-opacity));
+}
+
 .fairystaro__font-bold {
   font-weight: 700;
 }
 
+.fairystaro__opacity-100 {
+  opacity: 1;
+}
+
+.fairystaro__opacity-60 {
+  opacity: .6;
+}
+
 @keyframes fairys_taro_loading_transform {
   0% {
     --fairys-enter-loading-transform-color: #00a98e;

package/esm/utils/request.js

@@ -1,6 +1,7 @@
 import taro from "@tarojs/taro";
 import { globalSettingDataInstance } from "../context/global.setting.data.instance.js";
 import { globalMessageDataInstance } from "../context/global.message.data.instance.js";
+import { globalDataInstance } from "../context/global.data.instance.js";
 const codeMessage = {
     400: "\u53D1\u51FA\u7684\u8BF7\u6C42\u9519\u8BEF",
     401: "\u7528\u6237\u6CA1\u6709\u6743\u9650",
@@ -22,7 +23,7 @@ const requestResponseHandle = (result, options)=>{
         const code = result?.data?.code;
         if (401 === statusCode || 401 === code || code === globalSettingDataInstance.store.tokenExpiredCode) {
             msg = "\u8BF7\u91CD\u65B0\u767B\u5F55";
-            globalMessageDataInstance.toLoginPage();
+            globalDataInstance.toLoginPage();
         } else msg = [
             globalSettingDataInstance.store.requestSuccessCode,
             requestSuccessCode,
@@ -134,7 +135,7 @@ class RequestInstance {
             options?.fail?.({
                 errMsg: "\u672A\u767B\u5F55"
             });
-            globalMessageDataInstance.toLoginPage();
+            globalDataInstance.toLoginPage();
             return;
         }
         return {

package/lib/components/custom-tab-bar/index.css

@@ -0,0 +1,39 @@
+.fairys_taro_custom_tab_bar {
+  height: 60px;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: #fff;
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.fairys_taro_custom_tab_bar-border {
+  background-color: #00000054;
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: scaleY(.5);
+}
+
+.fairys_taro_custom_tab_bar_item {
+  text-align: center;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.fairys_taro_custom_tab_bar_item cover-image {
+  width: 54px;
+  height: 54px;
+}
+
+.fairys_taro_custom_tab_bar_item cover-view {
+  font-size: 14px;
+}
+

package/lib/components/custom-tab-bar/index.d.ts

@@ -0,0 +1,57 @@
+/**自定义底部导航栏状态管理*/
+export declare const fairysTaroCustomTabBarState: {
+    /**当前选中的项*/
+    selected: string;
+    items: FairysTaroCustomTabBarItemItem[];
+    isUpdatedItems: boolean;
+    /**未选中颜色*/
+    color: string;
+    /**选中颜色*/
+    selectedColor: string;
+    /**切换标签*/
+    onSwitchTab: (url: string) => void;
+    /**更新自定义底部导航栏项*/
+    onUpdatedItems: (items: FairysTaroCustomTabBarItemItem[]) => void;
+    /**设置自定义底部导航栏渲染*/
+    onSetTabBarRender: (_tabBarRender: React.ReactNode) => void;
+};
+export interface FairysTaroCustomTabBarItemItem {
+    /**自定义底部导航栏项文本*/
+    text: string;
+    /**自定义底部导航栏项 URL*/
+    url: string;
+    /**自定义底部导航栏项图标*/
+    icon?: string;
+    /**自定义底部导航栏项样式*/
+    style?: React.CSSProperties;
+    /**自定义底部导航栏项类名*/
+    className?: string;
+    /**自定义底部导航栏项选中图标*/
+    selectedIcon?: string;
+    /**自定义底部导航栏项选中图标样式*/
+    selectedIconStyle?: React.CSSProperties;
+    /**自定义底部导航栏项图标样式*/
+    iconStyle?: React.CSSProperties;
+    /**自定义底部导航栏项选中图标类名*/
+    selectedIconClassName?: string;
+    /**自定义底部导航栏项选中文本样式*/
+    selectedTextStyle?: React.CSSProperties;
+    /**自定义底部导航栏项文本样式*/
+    textStyle?: React.CSSProperties;
+    /**自定义底部导航栏项选中文本类名*/
+    selectedTextClassName?: string;
+}
+export interface FairysTaroCustomTabBarProps {
+}
+export interface FairysTaroCustomTabBarItemProps {
+    /**自定义底部导航栏项*/
+    item: FairysTaroCustomTabBarItemItem;
+}
+export declare const FairysTaroCustomTabBar: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+/**
+ * 页面高度问题
+ */
+export declare const useFairysTaroCustomTabBarPageStyle: () => {
+    height: number;
+    overflowY: string;
+};

package/lib/components/custom-tab-bar/index.js

@@ -0,0 +1,165 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    fairysTaroCustomTabBarState: ()=>fairysTaroCustomTabBarState,
+    useFairysTaroCustomTabBarPageStyle: ()=>useFairysTaroCustomTabBarPageStyle,
+    FairysTaroCustomTabBar: ()=>FairysTaroCustomTabBar
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_valtio_namespaceObject = require("valtio");
+const components_namespaceObject = require("@tarojs/components");
+const taro_namespaceObject = require("@tarojs/taro");
+var taro_default = /*#__PURE__*/ __webpack_require__.n(taro_namespaceObject);
+const external_react_namespaceObject = require("react");
+const external_clsx_namespaceObject = require("clsx");
+var external_clsx_default = /*#__PURE__*/ __webpack_require__.n(external_clsx_namespaceObject);
+let fairysTaroCustomTabBarRender;
+const fairysTaroCustomTabBarState = (0, external_valtio_namespaceObject.proxy)({
+    selected: '',
+    items: (0, external_valtio_namespaceObject.ref)([]),
+    isUpdatedItems: false,
+    color: 'rgb(156 163 175)',
+    selectedColor: '#000',
+    onSwitchTab: (url)=>{
+        fairysTaroCustomTabBarState.selected = url;
+        taro_default().switchTab({
+            url
+        });
+    },
+    onUpdatedItems: (items)=>{
+        fairysTaroCustomTabBarState.items = (0, external_valtio_namespaceObject.ref)(items);
+        fairysTaroCustomTabBarState.isUpdatedItems = true;
+    },
+    onSetTabBarRender: (_tabBarRender)=>{
+        fairysTaroCustomTabBarRender = _tabBarRender;
+        fairysTaroCustomTabBarState.isUpdatedItems = false;
+    }
+});
+const FairysTaroCustomTabBarItemBase = (props)=>{
+    const { item } = props;
+    const { selected, color, selectedColor } = (0, external_valtio_namespaceObject.useSnapshot)(fairysTaroCustomTabBarState);
+    const isSelected = selected === item.url;
+    const className = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('fairys_taro_custom_tab_bar_item', item.className), [
+        item.className
+    ]);
+    const imgClassName = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('fairys_taro_custom_tab_bar_item_img', item.selectedIconClassName, {
+            fairys_taro_custom_tab_bar_item_img_selected: isSelected
+        }), [
+        item.selectedIconClassName,
+        isSelected
+    ]);
+    const imgStyle = (0, external_react_namespaceObject.useMemo)(()=>({
+            opacity: isSelected ? 1 : 0.6
+        }), [
+        isSelected
+    ]);
+    const textClassName = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('fairys_taro_custom_tab_bar_item_text', item.selectedTextClassName, {
+            fairys_taro_custom_tab_bar_item_text_selected: isSelected
+        }), [
+        item.selectedTextClassName,
+        isSelected
+    ]);
+    const textStyle = (0, external_react_namespaceObject.useMemo)(()=>({
+            color: isSelected ? selectedColor : color
+        }), [
+        isSelected,
+        color,
+        selectedColor
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(components_namespaceObject.CoverView, {
+        onClick: ()=>fairysTaroCustomTabBarState.onSwitchTab(item.url),
+        style: item.style,
+        className: className,
+        children: [
+            item.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.CoverImage, {
+                src: isSelected ? item.selectedIcon || item.icon : item.icon,
+                className: imgClassName,
+                style: {
+                    ...imgStyle,
+                    ...(isSelected ? item.selectedIconStyle : item.iconStyle) || {}
+                }
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.CoverView, {
+                className: textClassName,
+                style: {
+                    ...(isSelected ? item.selectedTextStyle : item.textStyle) || {},
+                    ...textStyle
+                },
+                children: item.text
+            })
+        ]
+    }, item.url);
+};
+const FairysTaroCustomTabBarBase = ()=>{
+    const { items } = (0, external_valtio_namespaceObject.useSnapshot)(fairysTaroCustomTabBarState);
+    const _itemsRender = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (false === fairysTaroCustomTabBarState.isUpdatedItems && fairysTaroCustomTabBarRender) return fairysTaroCustomTabBarRender;
+        const render = items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FairysTaroCustomTabBarItemBase, {
+                item: item
+            }, item.url));
+        fairysTaroCustomTabBarState.onSetTabBarRender(render);
+        return render;
+    }, [
+        items
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(components_namespaceObject.CoverView, {
+        className: "fairys_taro_custom_tab_bar",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_namespaceObject.CoverView, {
+                className: "fairys_taro_custom_tab_bar-border"
+            }),
+            _itemsRender
+        ]
+    });
+};
+const FairysTaroCustomTabBar = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(()=>(0, external_react_namespaceObject.useMemo)(()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FairysTaroCustomTabBarBase, {}), []));
+const useFairysTaroCustomTabBarPageStyle = ()=>(0, external_react_namespaceObject.useMemo)(()=>{
+        const height = taro_default().getSystemInfoSync().windowHeight;
+        return {
+            height: height - 60,
+            overflowY: 'auto'
+        };
+    }, []);
+exports.FairysTaroCustomTabBar = __webpack_exports__.FairysTaroCustomTabBar;
+exports.fairysTaroCustomTabBarState = __webpack_exports__.fairysTaroCustomTabBarState;
+exports.useFairysTaroCustomTabBarPageStyle = __webpack_exports__.useFairysTaroCustomTabBarPageStyle;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FairysTaroCustomTabBar",
+    "fairysTaroCustomTabBarState",
+    "useFairysTaroCustomTabBarPageStyle"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});