@fairys/taro-tools-react 1.0.32 → 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,9 +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";
 class GlobalMessageDataInstance extends ProxyInstanceObjectBase {
     store = proxy({
         messageData: ref([]),
@@ -46,26 +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 = ()=>{
-        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/context/page.data.instance.d.ts

@@ -160,6 +160,8 @@ export interface PageDataInstanceContextProviderProps<T extends PageDataInstance
     valueFields?: M['valueFields'];
     /**是否是第一次加载*/
     isMountLoad?: boolean;
+    /**是否使用 useDidShow*/
+    isDidShowLoad?: boolean;
     /**页面标题*/
     title?: string;
     /**成功状态码

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

@@ -307,7 +307,7 @@ const usePageDataInstanceContext = ()=>{
     return PageDataInstance;
 };
 function PageDataInstanceContextProvider(props) {
-    const { instance, children, initialValues, is_scroll_page, defaultTabKey, tabItems, defaultPageSize, onBefore, getList, onAfter, onExtraData, onError, getResetValues, defaultQuery, codeFields, valueFields, isMountLoad, title, responseSuccessCode, responseListField, responseTotalField } = props;
+    const { instance, children, initialValues, is_scroll_page, defaultTabKey, tabItems, defaultPageSize, onBefore, getList, onAfter, onExtraData, onError, getResetValues, defaultQuery, codeFields, valueFields, isMountLoad, title, responseSuccessCode, responseListField, responseTotalField, isDidShowLoad } = props;
     const pageInstance = usePageDataInstance(instance);
     instance.onBefore = onBefore;
     instance.getList = getList;
@@ -333,6 +333,9 @@ function PageDataInstanceContextProvider(props) {
     useEffect(()=>{
         if (isMountLoad) pageInstance.main_onSearch();
     }, []);
+    useDidShow(()=>{
+        if (isDidShowLoad) pageInstance.main_onSearch();
+    });
     useDidShow(()=>{
         if (title) taro.setNavigationBarTitle({
             title

package/esm/context/page.info.data.instance.d.ts

@@ -83,6 +83,8 @@ export interface PageInfoDataInstanceContextProviderProps<T extends PageInfoData
     title?: string;
     /**页面一加载是否请求详情接口*/
     isMountRequestInfo?: boolean;
+    /**是否使用 useDidShow*/
+    isDidShowRequestInfo?: boolean;
     /**自定义hooks,挂载参数和设置完初始值后执行*/
     useHooks?: (instance: M) => void;
 }

package/esm/context/page.info.data.instance.js

@@ -133,7 +133,7 @@ const usePageInfoDataInstanceContext = ()=>{
     return PageInfoDataInstance;
 };
 function PageInfoDataInstanceContextProvider(props) {
-    const { instance, children, initialValues, requestInfoConfig, requestSaveInfoConfig, isProxy, title, isMountRequestInfo, useHooks } = props;
+    const { instance, children, initialValues, requestInfoConfig, requestSaveInfoConfig, isProxy, title, isMountRequestInfo, useHooks, isDidShowRequestInfo } = props;
     const pageInfoInstance = usePageInfoDataInstance(instance);
     pageInfoInstance.requestInfoConfig = requestInfoConfig;
     pageInfoInstance.requestSaveInfoConfig = requestSaveInfoConfig;
@@ -152,6 +152,9 @@ function PageInfoDataInstanceContextProvider(props) {
     useEffect(()=>{
         if (isMountRequestInfo) pageInfoInstance.main_getInfo();
     }, []);
+    useDidShow(()=>{
+        if (isDidShowRequestInfo) pageInfoInstance.main_getInfo();
+    });
     return /*#__PURE__*/ jsx(PageInfoDataInstanceContext.Provider, {
         value: pageInfoInstance,
         children: children

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;
+};