@fairys/taro-tools-react 0.0.1

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@fairys/taro-tools-react",
+  "author": "SunLxy <1011771396@qq.com>",
+  "description": "框架组件库",
+  "homepage": "https://github.com/autumn-fairy-tales/fairys-taro-react",
+  "version": "0.0.1",
+  "main": "lib/index.js",
+  "types": "esm/index.d.ts",
+  "module": "esm/index.js",
+  "license": "ISC",
+  "scripts": {
+    "build": "carefrees-rslib build --config=./rslib.config.ts",
+    "watch": "carefrees-rslib build --watch --config=./rslib.config.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/autumn-fairy-tales/fairys-taro-react.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "src",
+    "esm"
+  ],
+  "dependencies": {
+    "clsx": "2.1.1",
+    "valtio": "~2.1.5"
+  },
+  "devDependencies": {
+    "@nutui/nutui-react-taro": "^3.0.18",
+    "@tarojs/components": "4.1.7",
+    "@tarojs/react": "4.1.7",
+    "@tarojs/taro": "4.1.7",
+    "@types/react": "~18.2.21",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}

package/src/components/EnterLoading/index.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import { View, Text } from '@tarojs/components';
+import { ViewProps } from '@tarojs/components';
+import { forwardRef, Fragment, ReactNode, Ref, useMemo } from 'react';
+import { FairysTaroPortal } from '../Portal';
+
+export interface FairysTaroLoadingProps extends ViewProps {
+  /**加载标题*/
+  title?: ReactNode;
+  /**加载提示*/
+  tips?: ReactNode;
+  /**是否显示加载动画*/
+  loading?: boolean;
+  /**是否显示在 Portal 中*/
+  isPortal?: boolean;
+}
+
+export const FairysTaroLoadingMain = forwardRef(
+  (props: Omit<FairysTaroLoadingProps, 'loading' | 'isPortal'>, ref: Ref<ViewProps>) => {
+    const { title = '', tips = '载入中', className, ...rest } = props;
+
+    const classNames = useMemo(() => clsx('fairys_taro_loading fairystaro__bg-white/90', className), [className]);
+
+    return (
+      <Fragment>
+        <View {...rest} ref={ref} className={classNames}>
+          <View className="fairys_taro_loading-main">
+            <View className="square"></View>
+            <View className="square"></View>
+            <View className="square"></View>
+            <View className="square"></View>
+          </View>
+          {title ? <View className="name">{title}</View> : <Fragment />}
+          <View className="tips">
+            <Text>{tips}</Text>
+            <Text className="loading-dots" />
+          </View>
+        </View>
+      </Fragment>
+    );
+  },
+);
+
+export const FairysTaroLoading = forwardRef((props: FairysTaroLoadingProps, ref: Ref<ViewProps>) => {
+  const { loading = false, isPortal = true, ...rest } = props;
+  return loading ? (
+    isPortal ? (
+      <FairysTaroPortal>
+        <FairysTaroLoadingMain {...rest} ref={ref} />
+      </FairysTaroPortal>
+    ) : (
+      <FairysTaroLoadingMain {...rest} ref={ref} />
+    )
+  ) : (
+    <Fragment />
+  );
+});

package/src/components/MainPage/index.tsx

@@ -0,0 +1,72 @@
+import { ViewProps, View } from '@tarojs/components';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+export interface FairysTaroMainPageProps extends ViewProps {}
+
+export const FairysTaroMainPage = (props: FairysTaroMainPageProps) => {
+  const { className: itemClassName, children, ...rest } = props;
+
+  const cls = useMemo(
+    () =>
+      clsx(
+        'fairys_taro-ui-main-page fairystaro__box-border fairystaro__w-full fairystaro__h-full fairystaro__flex fairystaro__flex-col fairystaro__overflow-auto',
+        itemClassName,
+      ),
+    [itemClassName],
+  );
+
+  return (
+    <View className={cls} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+/**查询*/
+export const FairysTaroMainPageSearch = (props: FairysTaroMainPageProps) => {
+  const { className: itemClassName, children, ...rest } = props;
+  const cls = useMemo(
+    () => clsx('fairys_taro-ui-main-page-search fairystaro__box-border fairystaro__w-full', itemClassName),
+    [itemClassName],
+  );
+
+  return (
+    <View className={cls} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+/**内容*/
+export const FairysTaroMainPageBody = (props: FairysTaroMainPageProps) => {
+  const { className: itemClassName, children, ...rest } = props;
+  const cls = useMemo(
+    () =>
+      clsx(
+        'fairys_taro-ui-main-page-body fairystaro__box-border fairystaro__w-full fairystaro__flex-1 fairystaro__overflow-auto',
+        itemClassName,
+      ),
+    [itemClassName],
+  );
+  return (
+    <View className={cls} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+/**底部*/
+export const FairysTaroMainPageFooter = (props: FairysTaroMainPageProps) => {
+  const { className: itemClassName, children, ...rest } = props;
+  const cls = useMemo(
+    () => clsx('fairys_taro-ui-main-page-footer fairystaro__box-border fairystaro__w-full', itemClassName),
+    [itemClassName],
+  );
+
+  return (
+    <View className={cls} {...rest}>
+      {children}
+    </View>
+  );
+};

package/src/components/Mesage/index.tsx

@@ -0,0 +1,217 @@
+import { View, ViewProps } from '@tarojs/components';
+import { Fragment, useMemo } from 'react';
+import { useGlobalData } from 'context/global.data.instance';
+import { FairysTaroPortal } from 'components/Portal';
+import clsx from 'clsx';
+import type { MessageDataType } from 'context/global.data.instance';
+
+export interface FairysTaroMessageItemProps extends Omit<ViewProps, 'style'> {
+  /**
+   * 提示内容
+   */
+  title?: React.ReactNode;
+  /**
+   * 提示框类型
+   * @default none
+   */
+  type?: 'none' | 'success' | 'error' | 'warning' | 'info';
+  /**
+   * 自定义图标
+   */
+  icon?: React.ReactNode;
+  /**消息项是否显示边框*/
+  bordered?: boolean;
+  /**图标 className*/
+  iconClassName?: string;
+  /**图标 style*/
+  iconStyle?: React.CSSProperties;
+  /**标题 className*/
+  titleClassName?: string;
+  /**标题 style*/
+  titleStyle?: React.CSSProperties;
+  /**内容 className*/
+  bodyClassName?: string;
+  /**内容 style*/
+  bodyStyle?: React.CSSProperties;
+  /**样式*/
+  style?: React.CSSProperties;
+  /**图标颜色*/
+  iconColor?: string;
+  /**边框颜色*/
+  borderColor?: string;
+  /**背景颜色*/
+  backgroundColor?: string;
+  /**文本颜色*/
+  color?: string;
+  /**是否显示图标*/
+  showIcon?: boolean;
+}
+
+export const FairysTaroMessageItem = (props: FairysTaroMessageItemProps) => {
+  const {
+    title,
+    children,
+    type = 'info',
+    className: itemClassName,
+    bordered = true,
+    iconClassName,
+    iconStyle = {},
+    titleClassName,
+    titleStyle,
+    bodyClassName,
+    bodyStyle,
+    icon,
+    iconColor,
+    borderColor,
+    backgroundColor,
+    style = {},
+    color,
+    showIcon = true,
+    ...rest
+  } = props;
+  const isIcon = !!icon;
+  const isIconString = typeof icon === 'string';
+
+  const className = useMemo(
+    () =>
+      clsx(
+        'fairys_taro-ui-message-item',
+        `fairys_taro-ui-message-icon-${type}`,
+        'fairystaro__box-border fairystaro__flex fairystaro__flex-row fairystaro__gap-[0.4rem] fairystaro__p-y-[0.4rem] fairystaro__p-x-[0.4rem]  fairystaro__rounded-md fairystaro__text-[0.8rem]',
+        {
+          'fairystaro__border fairystaro__border-solid': bordered,
+        },
+        itemClassName,
+      ),
+    [type, itemClassName, bordered],
+  );
+
+  const classIconName = useMemo(
+    () =>
+      clsx('fairys_taro-ui-message-icon fairystaro__box-border ', iconClassName, {
+        'ant-design--close-circle-outlined': type === 'error' && !isIcon,
+        'ant-design--exclamation-circle-outlined': type === 'warning' && !isIcon,
+        'ant-design--check-circle-outlined': type === 'success' && !isIcon,
+        'ant-design--info-circle-outlined': type === 'info' && !isIcon,
+        'fairystaro__text-color-[red]': type === 'error',
+        'fairystaro__text-color-[orange]': type === 'warning',
+        'fairystaro__text-color-[green]': type === 'success',
+        'fairystaro__text-color-[blue]': type === 'info',
+      }),
+    [type, iconClassName, isIcon],
+  );
+
+  const lastIconClassName = useMemo(
+    () => clsx(classIconName, isIconString ? icon : ''),
+    [classIconName, isIconString, icon],
+  );
+
+  const titleClassNames = useMemo(
+    () => clsx('fairys_taro-ui-message-item-title fairystaro__font-bold', titleClassName),
+    [titleClassName],
+  );
+
+  // 图标颜色
+  const _iconStyle = { ...iconStyle };
+  if (iconColor) {
+    _iconStyle.color = iconColor;
+  }
+
+  const _style = { ...style };
+  if (borderColor) {
+    _style.borderColor = borderColor;
+  }
+
+  if (backgroundColor) {
+    _style.backgroundColor = backgroundColor;
+  }
+  if (color) {
+    _style.color = color;
+  }
+
+  return (
+    <View className={className} {...rest} style={_style}>
+      {showIcon ? (
+        <View className="fairystaro__flex fairystaro__flex-row fairystaro__justify-center fairystaro__p-t-[0.15rem]">
+          {/* 图标 */}
+          {!isIcon ? <View className={classIconName} style={_iconStyle} /> : <Fragment />}
+          {isIcon && !isIconString ? (
+            <View className={classIconName} style={_iconStyle}>
+              {icon}
+            </View>
+          ) : (
+            <Fragment />
+          )}
+          {isIcon && isIconString ? <View className={lastIconClassName} style={_iconStyle} /> : <Fragment />}
+        </View>
+      ) : (
+        <Fragment />
+      )}
+      <View>
+        {/* 内容 */}
+        {title ? (
+          <View className={titleClassNames} style={titleStyle}>
+            {title}
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        {children ? (
+          <View className={clsx('fairys_taro-ui-message-item-body', bodyClassName)} style={bodyStyle}>
+            {children}
+          </View>
+        ) : (
+          <Fragment />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export interface FairysTaroMessageProps extends ViewProps {}
+
+export const FairysTaroMessage = (props: FairysTaroMessageProps) => {
+  const { className: messageClassName, ...rest } = props;
+  const classNames = useMemo(
+    () =>
+      clsx(
+        'fairys_taro-ui-message fairystaro__box-border fairystaro__p-2 fairystaro__flex fairystaro__flex-col fairystaro__items-center fairystaro__gap-2 fairystaro__max-w-full fairystaro__max-h-full',
+        messageClassName,
+      ),
+    [messageClassName],
+  );
+  return <View {...rest} className={classNames} />;
+};
+
+/**消息组件(用于全局消息提示)*/
+export const FairysTaroPortalMessage = (props: FairysTaroMessageProps) => {
+  const { className: messageClassName, ...rest } = props;
+
+  const [state] = useGlobalData();
+  const messageData = state.messageData;
+  const classNames = useMemo(
+    () =>
+      clsx(
+        'fairys_taro-ui-portal-message fairystaro__pointer-events-none fairystaro__position-fixed  fairystaro__top-0  fairystaro__right-0  fairystaro__bottom-0  fairystaro__left-0',
+        messageClassName,
+      ),
+    [messageClassName],
+  );
+
+  return (
+    <FairysTaroPortal>
+      <FairysTaroMessage {...rest} className={classNames}>
+        {messageData.map((item) => {
+          const { content, visible, __id, ...rest } = item as MessageDataType;
+          if (visible)
+            return (
+              <FairysTaroMessageItem {...rest} key={__id}>
+                {content}
+              </FairysTaroMessageItem>
+            );
+          return <Fragment key={`${__id}_hidden`} />;
+        })}
+      </FairysTaroMessage>
+    </FairysTaroPortal>
+  );
+};

package/src/components/Portal/index.tsx

@@ -0,0 +1,18 @@
+import { createPortal } from 'react-dom';
+import { RootPortal } from '@tarojs/components';
+
+export interface FairysTaroPortalProps {
+  children: React.ReactNode;
+  /**
+   * 自定义容器(h5环境)
+   */
+  domContainer?: HTMLElement;
+}
+
+export const FairysTaroPortal = (props: FairysTaroPortalProps) => {
+  const { children, domContainer } = props;
+  if (process.env.TARO_ENV === 'weapp') {
+    return <RootPortal>{children}</RootPortal>;
+  }
+  return createPortal(children, domContainer || document.body);
+};

package/src/components/Toast/index.tsx

@@ -0,0 +1,22 @@
+import { Toast } from '@nutui/nutui-react-taro';
+import { FairysTaroPortal } from 'components/Portal';
+import { useGlobalData } from 'context/global.data.instance';
+
+export const FairysTaroToast = () => {
+  const [state, proxyInstance] = useGlobalData();
+  const toastConfig = state.toastData as any;
+
+  return (
+    <FairysTaroPortal>
+      <Toast
+        type="text"
+        {...toastConfig}
+        visible={toastConfig?.visible || false}
+        onClose={() => {
+          toastConfig?.onClose?.();
+          proxyInstance.hideToast();
+        }}
+      />
+    </FairysTaroPortal>
+  );
+};

package/src/components/connectToastMessage/index.tsx

@@ -0,0 +1,41 @@
+import { FairysTaroPortalMessage } from 'components/Mesage';
+import { FairysTaroToast } from 'components/Toast';
+import React, { Fragment } from 'react';
+
+export interface ConnectToastMessageOptions {
+  /**
+   * 是否是根页面,
+   * 在 h5 中，只有入口文件才需要展示 message 组件 和 toast 组件
+   * 在微信中，所有页面都需要展示 message 组件 和 toast 组件, 入口文件不展示
+   */
+  isRoot?: boolean;
+}
+
+export const connectToastMessage = (Component: React.FC, options: ConnectToastMessageOptions = {}) => {
+  const { isRoot = false } = options;
+  return (props: any) => {
+    // 在 h5 中，只有根页面才需要展示 message 组件 和 toast 组件，其他页面只是渲染组件就好
+
+    // 微信中，根目录不显示 message 组件 和 toast 组件，因为会遮挡页面内容
+    if (process.env.TARO_ENV === 'weapp') {
+      return (
+        <Fragment>
+          <Component {...props} />
+          {/* toast */}
+          {!isRoot ? <FairysTaroToast /> : <Fragment />}
+          {/* message */}
+          {!isRoot ? <FairysTaroPortalMessage /> : <Fragment />}
+        </Fragment>
+      );
+    }
+    return (
+      <Fragment>
+        <Component {...props} />
+        {/* toast */}
+        {isRoot ? <FairysTaroToast /> : <Fragment />}
+        {/* message */}
+        {isRoot ? <FairysTaroPortalMessage /> : <Fragment />}
+      </Fragment>
+    );
+  };
+};

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './EnterLoading';
+export * from './Portal';
+export * from './Mesage';
+export * from './Toast';
+export * from './connectToastMessage';
+export * from './MainPage';

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

@@ -0,0 +1,106 @@
+import { proxy, ref, useSnapshot } from 'valtio';
+import { TaroToastProps } from '@nutui/nutui-react-taro';
+import navigate from 'utils/navigate';
+import { createUseId } from 'utils/useId';
+import React from 'react';
+import { FairysTaroMessageItemProps } from 'components/Mesage';
+import { ProxyInstanceObjectBase } from 'utils/valtio/instance';
+
+export interface MessageDataType extends FairysTaroMessageItemProps {
+  /**用于唯一标识提示框(默认自动生成)*/
+  __id: string | number;
+  /**
+   * 提示内容
+   */
+  content?: React.ReactNode;
+  /**
+   * 提示框是否可见
+   * @default false
+   */
+  visible?: boolean;
+}
+
+export interface ToastDataType extends Partial<TaroToastProps> {}
+
+export interface GlobalDataInstanceState {
+  /**弹框提示框*/
+  messageData?: MessageDataType[];
+  /**提示框数据*/
+  toastData?: ToastDataType;
+  /**数据默认值不使用*/
+  __defaultValue?: string;
+}
+
+export class GlobalDataInstance extends ProxyInstanceObjectBase<GlobalDataInstanceState> {
+  /**
+   * 设置登录页面路由(需要在入口文件中进行设置)
+   * @param loginPageRoute 登录页面路由(默认pages/login/index)
+   */
+  public loginPageRoute = 'pages/login/index';
+
+  store = proxy<GlobalDataInstanceState>({
+    messageData: ref([]),
+    toastData: undefined,
+  });
+
+  /**用于提示信息*/
+  showMessage = (options: Omit<MessageDataType, '__id'> & { __id?: string }, timeout: number = 3000) => {
+    const _that = this;
+    let newItem = { ...options } as MessageDataType;
+    if (!_that.store.messageData) {
+      _that.store.messageData = ref([]);
+    }
+    newItem.visible = true;
+    if (!newItem.__id) {
+      newItem.__id = `${new Date().valueOf()}__${_that.store.messageData.length + 1}` + '__' + createUseId('message');
+    }
+    _that.store.messageData = ref([..._that.store.messageData].concat([newItem]));
+    if (timeout) {
+      const timer = setTimeout(() => {
+        newItem.visible = false;
+        _that.store.messageData = ref((_that.store.messageData || []).filter((it) => it.__id !== newItem.__id));
+        clearTimeout(timer);
+      }, timeout);
+    }
+    return newItem.__id;
+  };
+
+  /**隐藏指定id的提示框*/
+  hideMessage = (id: string | number) => {
+    this.store.messageData = ref((this.store.messageData || []).filter((it) => it.__id !== id));
+  };
+
+  /**显示Toast */
+  showToast = (config: Partial<ToastDataType> = {}) => {
+    this.store.toastData = ref({ visible: true, ...config });
+  };
+
+  /**隐藏Toast */
+  hideToast = () => {
+    this.store.toastData = ref({ ...this.store.toastData, visible: false });
+  };
+
+  /**跳转登录页面*/
+  toLoginPage = () => {
+    const isLoginPage = navigate.isCurrentPage(this.loginPageRoute || '');
+    const _loginPageRoute = `${this.loginPageRoute || ''}`.replace(/^\//, '');
+    if (isLoginPage) {
+      // 如果是登录页面不进行跳转
+      return;
+    }
+    // 跳转登录页面
+    navigate.navigateTo({ url: `/${_loginPageRoute}` });
+  };
+}
+/**
+ * 全局数据实例
+ */
+export const globalDataInstance = new GlobalDataInstance();
+
+/**
+ * 全局数据状态管理
+ */
+export const useGlobalData = () => {
+  const store = useSnapshot(globalDataInstance.store);
+  return [store, globalDataInstance, store.__defaultValue] as const;
+};

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

@@ -0,0 +1,36 @@
+import { proxy, useSnapshot } from 'valtio';
+import { ProxyInstanceObjectBase } from 'utils/valtio/instance';
+
+export interface GlobalSettingDataInstanceState {
+  /**
+   * 请求成功返回code
+   * @default 200
+   */
+  requestSuccessCode?: number;
+  /**数据默认值不使用*/
+  __defaultValue?: string;
+}
+
+export class GlobalSettingDataInstance extends ProxyInstanceObjectBase<GlobalSettingDataInstanceState> {
+  store = proxy<GlobalSettingDataInstanceState>({
+    requestSuccessCode: 200,
+  });
+  /**
+   * 扩展全局设置数据状态
+   */
+  extendStore = (state: Partial<GlobalSettingDataInstanceState>) => {
+    this._setValues(state);
+  };
+}
+/**
+ * 全局设置数据实例
+ */
+export const globalSettingDataInstance = new GlobalSettingDataInstance();
+
+/**
+ * 全局设置数据状态管理
+ */
+export const useGlobalSettingData = () => {
+  const store = useSnapshot(globalSettingDataInstance.store);
+  return [store, globalSettingDataInstance, store.__defaultValue] as const;
+};

package/src/context/index.ts

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