@fairys/taro-tools-react 1.0.32 → 1.0.34

package/src/components/custom-tab-bar/index.tsx

@@ -0,0 +1,169 @@
+import { proxy, useSnapshot, ref } 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: React.ReactNode | undefined;
+
+/**自定义底部导航栏状态管理*/
+export const fairysTaroCustomTabBarState = proxy({
+  /**当前选中的项*/
+  selected: '',
+  items: ref([]) as FairysTaroCustomTabBarItemItem[],
+  isUpdatedItems: false,
+  /**未选中颜色*/
+  color: 'rgb(156 163 175)',
+  /**选中颜色*/
+  selectedColor: '#000',
+  /**切换标签*/
+  onSwitchTab: (url: string) => {
+    fairysTaroCustomTabBarState.selected = url;
+    Taro.switchTab({ url });
+  },
+  /**更新自定义底部导航栏项*/
+  onUpdatedItems: (items: FairysTaroCustomTabBarItemItem[]) => {
+    fairysTaroCustomTabBarState.items = ref(items);
+    fairysTaroCustomTabBarState.isUpdatedItems = true;
+  },
+  /**设置自定义底部导航栏渲染*/
+  onSetTabBarRender: (_tabBarRender: React.ReactNode) => {
+    fairysTaroCustomTabBarRender = _tabBarRender;
+    fairysTaroCustomTabBarState.isUpdatedItems = false;
+  },
+});
+
+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;
+}
+
+const FairysTaroCustomTabBarItemBase = (props: FairysTaroCustomTabBarItemProps) => {
+  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,
+        // 'fairystaro__opacity-100': isSelected,
+        // 'fairystaro__opacity-60': !isSelected,
+      }),
+    [item.selectedIconClassName, isSelected],
+  );
+  const imgStyle = useMemo(() => {
+    return {
+      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,
+        // 'fairystaro__text-black': isSelected,
+        // 'fairystaro__text-gray-400': !isSelected,
+      }),
+    [item.selectedTextClassName, isSelected],
+  );
+
+  const textStyle = useMemo(() => {
+    return { color: isSelected ? selectedColor : color };
+  }, [isSelected, color, selectedColor]);
+
+  return (
+    <CoverView
+      onClick={() => fairysTaroCustomTabBarState.onSwitchTab(item.url)}
+      key={item.url}
+      style={item.style}
+      className={className}
+    >
+      {item.icon ? (
+        <CoverImage
+          src={isSelected ? item.selectedIcon || item.icon : item.icon}
+          className={imgClassName}
+          style={{ ...imgStyle, ...((isSelected ? item.selectedIconStyle : item.iconStyle) || {}) }}
+        />
+      ) : (
+        <Fragment />
+      )}
+      <CoverView
+        className={textClassName}
+        style={{
+          ...((isSelected ? item.selectedTextStyle : item.textStyle) || {}),
+          ...textStyle,
+        }}
+      >
+        {item.text}
+      </CoverView>
+    </CoverView>
+  );
+};
+
+const FairysTaroCustomTabBarBase = () => {
+  const { items } = useSnapshot(fairysTaroCustomTabBarState);
+  const _itemsRender = useMemo(() => {
+    if (fairysTaroCustomTabBarState.isUpdatedItems === false && fairysTaroCustomTabBarRender) {
+      return fairysTaroCustomTabBarRender;
+    }
+    const render = items.map((item) => {
+      return <FairysTaroCustomTabBarItemBase key={item.url} item={item} />;
+    });
+    fairysTaroCustomTabBarState.onSetTabBarRender(render);
+    return render;
+  }, [items]);
+
+  return (
+    <CoverView className="fairys_taro_custom_tab_bar">
+      <CoverView className="fairys_taro_custom_tab_bar-border"></CoverView>
+      {_itemsRender}
+    </CoverView>
+  );
+};
+
+export const FairysTaroCustomTabBar = memo(() => {
+  return useMemo(() => <FairysTaroCustomTabBarBase />, []);
+});
+
+/**
+ * 页面高度问题
+ */
+export const useFairysTaroCustomTabBarPageStyle = () => {
+  return useMemo(() => {
+    const height = Taro.getSystemInfoSync().windowHeight;
+    return {
+      height: height - 60,
+      overflowY: 'auto',
+    };
+  }, []);
+};

package/src/components/index.ts

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

package/src/context/global.data.instance.ts

@@ -0,0 +1,69 @@
+import { proxy, useSnapshot } from 'valtio';
+import navigate from 'utils/navigate';
+import { ProxyInstanceObjectBase } from 'utils/valtio/instance';
+import { globalSettingDataInstance } from './global.setting.data.instance';
+import Taro from '@tarojs/taro';
+import { authDataInstance } from './auth.data.instance';
+
+export interface GlobalDataInstanceState {
+  /**数据默认值不使用*/
+  __defaultValue?: string;
+}
+
+/**
+ * 全局数据实例
+ */
+export class GlobalDataInstance extends ProxyInstanceObjectBase<GlobalDataInstanceState> {
+  store = proxy<GlobalDataInstanceState>({});
+  /**
+   * 跳转登录页面前执行
+   */
+  onBeforetToLoginPage?: () => boolean | void;
+  /**跳转 redirect 路由*/
+  toRedirect = () => {
+    //  获取当前路由参数
+    const currentPath = Taro.getCurrentInstance().router?.params?.redirect || '';
+    if (currentPath) {
+      // 跳转 redirect 路由
+      navigate.navigateTo({ url: currentPath });
+    }
+  };
+
+  /**跳转登录页面*/
+  toLoginPage = () => {
+    // 清除登录凭证（token）、权限列表、菜单权限列表、用户信息
+    authDataInstance.clear();
+    if (this.onBeforetToLoginPage) {
+      const f = this.onBeforetToLoginPage();
+      if (f === false) {
+        // 如果返回false则不跳转登录页面
+        return;
+      }
+    }
+    const loginPageRoute = globalSettingDataInstance.store.loginPageRoute || '';
+    const isLoginPage = navigate.isCurrentPage(loginPageRoute || '');
+    const _loginPageRoute = `${loginPageRoute || ''}`.replace(/^\//, '');
+    if (isLoginPage) {
+      // 如果是登录页面不进行跳转
+      return;
+    }
+    // 跳转登录页面
+    Taro.navigateTo({ url: `/${_loginPageRoute}` });
+  };
+}
+/**
+ * 全局数据实例
+ */
+export const globalDataInstance = new GlobalDataInstance();
+
+/**
+ * 全局数据状态管理
+ */
+export const useGlobalData = () => {
+  const store = useSnapshot(globalDataInstance.store);
+  return [store, globalDataInstance, store.__defaultValue] as [
+    GlobalDataInstanceState,
+    GlobalDataInstance,
+    string | undefined,
+  ];
+};

package/src/context/global.message.data.instance.ts

@@ -7,6 +7,7 @@ import type { FairysTaroMessageItemProps } from 'components/Mesage';
 import { ProxyInstanceObjectBase } from 'utils/valtio/instance';
 import { globalSettingDataInstance } from './global.setting.data.instance';
 import Taro from '@tarojs/taro';
+import { authDataInstance } from './auth.data.instance';
 
 export interface MessageDataType extends FairysTaroMessageItemProps {
   /**用于唯一标识提示框(默认自动生成)*/
@@ -77,40 +78,6 @@ export class GlobalMessageDataInstance extends ProxyInstanceObjectBase<GlobalMes
   hideToast = () => {
     this.store.toastData = ref({ ...this.store.toastData, visible: false });
   };
-
-  /**
-   * 跳转登录页面前执行
-   */
-  onBeforetToLoginPage?: () => boolean | void;
-  // 跳转 redirect 路由
-  toRedirect = () => {
-    //  获取当前路由参数
-    const currentPath = Taro.getCurrentInstance().router?.params?.redirect || '';
-    if (currentPath) {
-      // 跳转 redirect 路由
-      navigate.navigateTo({ url: currentPath });
-    }
-  };
-
-  /**跳转登录页面*/
-  toLoginPage = () => {
-    if (this.onBeforetToLoginPage) {
-      const f = this.onBeforetToLoginPage();
-      if (f === false) {
-        // 如果返回false则不跳转登录页面
-        return;
-      }
-    }
-    const loginPageRoute = globalSettingDataInstance.store.loginPageRoute || '';
-    const isLoginPage = navigate.isCurrentPage(loginPageRoute || '');
-    const _loginPageRoute = `${loginPageRoute || ''}`.replace(/^\//, '');
-    if (isLoginPage) {
-      // 如果是登录页面不进行跳转
-      return;
-    }
-    // 跳转登录页面
-    Taro.navigateTo({ url: `/${_loginPageRoute}` });
-  };
 }
 /**
  * 全局消息数据实例

package/src/context/index.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/src/context/page.data.instance.tsx

@@ -494,6 +494,8 @@ export interface PageDataInstanceContextProviderProps<
   valueFields?: M['valueFields'];
   /**是否是第一次加载*/
   isMountLoad?: boolean;
+  /**是否使用 useDidShow*/
+  isDidShowLoad?: boolean;
   /**页面标题*/
   title?: string;
   /**成功状态码
@@ -535,6 +537,7 @@ export function PageDataInstanceContextProvider<
     responseSuccessCode,
     responseListField,
     responseTotalField,
+    isDidShowLoad,
   } = props;
 
   const pageInstance = usePageDataInstance(instance);
@@ -563,6 +566,12 @@ export function PageDataInstanceContextProvider<
     }
   }, []);
 
+  useDidShow(() => {
+    if (isDidShowLoad) {
+      pageInstance.main_onSearch();
+    }
+  });
+
   useDidShow(() => {
     if (title) {
       // 列表查询才调用

package/src/context/page.info.data.instance.tsx

@@ -235,6 +235,8 @@ export interface PageInfoDataInstanceContextProviderProps<
   title?: string;
   /**页面一加载是否请求详情接口*/
   isMountRequestInfo?: boolean;
+  /**是否使用 useDidShow*/
+  isDidShowRequestInfo?: boolean;
   /**自定义hooks,挂载参数和设置完初始值后执行*/
   useHooks?: (instance: M) => void;
 }
@@ -254,6 +256,7 @@ export function PageInfoDataInstanceContextProvider<
     title,
     isMountRequestInfo,
     useHooks,
+    isDidShowRequestInfo,
   } = props;
   const pageInfoInstance = usePageInfoDataInstance(instance);
   pageInfoInstance.requestInfoConfig = requestInfoConfig;
@@ -276,6 +279,11 @@ export function PageInfoDataInstanceContextProvider<
     }
   }, []);
 
+  useDidShow(() => {
+    if (isDidShowRequestInfo) {
+      pageInfoInstance.main_getInfo();
+    }
+  });
   return (
     <PageInfoDataInstanceContext.Provider value={pageInfoInstance}>{children}</PageInfoDataInstanceContext.Provider>
   );

package/src/utils/request.ts

@@ -1,6 +1,7 @@
 import Taro from '@tarojs/taro';
 import { globalSettingDataInstance } from 'context/global.setting.data.instance';
 import { globalMessageDataInstance } from 'context/global.message.data.instance';
+import { globalDataInstance } from 'context/global.data.instance';
 
 const codeMessage = {
   400: '发出的请求错误',
@@ -56,7 +57,7 @@ const requestResponseHandle = (
       // 权限问题 ，重新登录
       msg = '请重新登录';
       /**重新跳转登录页面*/
-      globalMessageDataInstance.toLoginPage();
+      globalDataInstance.toLoginPage();
     } else if (![globalSettingDataInstance.store.requestSuccessCode, requestSuccessCode, 1, 200].includes(code)) {
       // 提示内容
       // @ts-ignore
@@ -244,7 +245,7 @@ export class RequestInstance {
           }
         }
         options?.fail?.({ errMsg: '未登录' });
-        globalMessageDataInstance.toLoginPage();
+        globalDataInstance.toLoginPage();
         return undefined;
       }
     }