@fairys/taro-tools-react 0.0.1

package/README.md

@@ -0,0 +1 @@
+# 框架 ui 组件库

package/esm/components/EnterLoading/index.d.ts

@@ -0,0 +1,14 @@
+import { ViewProps } from '@tarojs/components';
+import { ReactNode } from 'react';
+export interface FairysTaroLoadingProps extends ViewProps {
+    /**加载标题*/
+    title?: ReactNode;
+    /**加载提示*/
+    tips?: ReactNode;
+    /**是否显示加载动画*/
+    loading?: boolean;
+    /**是否显示在 Portal 中*/
+    isPortal?: boolean;
+}
+export declare const FairysTaroLoadingMain: import("react").ForwardRefExoticComponent<Omit<Omit<FairysTaroLoadingProps, "loading" | "isPortal">, "ref"> & import("react").RefAttributes<ViewProps>>;
+export declare const FairysTaroLoading: import("react").ForwardRefExoticComponent<Omit<FairysTaroLoadingProps, "ref"> & import("react").RefAttributes<ViewProps>>;

package/esm/components/EnterLoading/index.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Text, View } from "@tarojs/components";
+import { Fragment, forwardRef, useMemo } from "react";
+import { FairysTaroPortal } from "../Portal/index.js";
+const FairysTaroLoadingMain = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { title = '', tips = "\u8F7D\u5165\u4E2D", className, ...rest } = props;
+    const classNames = useMemo(()=>clsx('fairys_taro_loading fairystaro__bg-white_xg_90', className), [
+        className
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs(View, {
+            ...rest,
+            ref: ref,
+            className: classNames,
+            children: [
+                /*#__PURE__*/ jsxs(View, {
+                    className: "fairys_taro_loading-main",
+                    children: [
+                        /*#__PURE__*/ jsx(View, {
+                            className: "square"
+                        }),
+                        /*#__PURE__*/ jsx(View, {
+                            className: "square"
+                        }),
+                        /*#__PURE__*/ jsx(View, {
+                            className: "square"
+                        }),
+                        /*#__PURE__*/ jsx(View, {
+                            className: "square"
+                        })
+                    ]
+                }),
+                title ? /*#__PURE__*/ jsx(View, {
+                    className: "name",
+                    children: title
+                }) : /*#__PURE__*/ jsx(Fragment, {}),
+                /*#__PURE__*/ jsxs(View, {
+                    className: "tips",
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            children: tips
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            className: "loading-dots"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+});
+const FairysTaroLoading = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { loading = false, isPortal = true, ...rest } = props;
+    return loading ? isPortal ? /*#__PURE__*/ jsx(FairysTaroPortal, {
+        children: /*#__PURE__*/ jsx(FairysTaroLoadingMain, {
+            ...rest,
+            ref: ref
+        })
+    }) : /*#__PURE__*/ jsx(FairysTaroLoadingMain, {
+        ...rest,
+        ref: ref
+    }) : /*#__PURE__*/ jsx(Fragment, {});
+});
+export { FairysTaroLoading, FairysTaroLoadingMain };

package/esm/components/MainPage/index.d.ts

@@ -0,0 +1,10 @@
+import { ViewProps } from '@tarojs/components';
+export interface FairysTaroMainPageProps extends ViewProps {
+}
+export declare const FairysTaroMainPage: (props: FairysTaroMainPageProps) => import("react/jsx-runtime").JSX.Element;
+/**查询*/
+export declare const FairysTaroMainPageSearch: (props: FairysTaroMainPageProps) => import("react/jsx-runtime").JSX.Element;
+/**内容*/
+export declare const FairysTaroMainPageBody: (props: FairysTaroMainPageProps) => import("react/jsx-runtime").JSX.Element;
+/**底部*/
+export declare const FairysTaroMainPageFooter: (props: FairysTaroMainPageProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/MainPage/index.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import clsx from "clsx";
+import { useMemo } from "react";
+const FairysTaroMainPage = (props)=>{
+    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 /*#__PURE__*/ jsx(View, {
+        className: cls,
+        ...rest,
+        children: children
+    });
+};
+const FairysTaroMainPageSearch = (props)=>{
+    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 /*#__PURE__*/ jsx(View, {
+        className: cls,
+        ...rest,
+        children: children
+    });
+};
+const FairysTaroMainPageBody = (props)=>{
+    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 /*#__PURE__*/ jsx(View, {
+        className: cls,
+        ...rest,
+        children: children
+    });
+};
+const FairysTaroMainPageFooter = (props)=>{
+    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 /*#__PURE__*/ jsx(View, {
+        className: cls,
+        ...rest,
+        children: children
+    });
+};
+export { FairysTaroMainPage, FairysTaroMainPageBody, FairysTaroMainPageFooter, FairysTaroMainPageSearch };

package/esm/components/Mesage/index.d.ts

@@ -0,0 +1,48 @@
+import { ViewProps } from '@tarojs/components';
+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 declare const FairysTaroMessageItem: (props: FairysTaroMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export interface FairysTaroMessageProps extends ViewProps {
+}
+export declare const FairysTaroMessage: (props: FairysTaroMessageProps) => import("react/jsx-runtime").JSX.Element;
+/**消息组件(用于全局消息提示)*/
+export declare const FairysTaroPortalMessage: (props: FairysTaroMessageProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/Mesage/index.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createElement, useMemo } from "react";
+import { View } from "@tarojs/components";
+import { useGlobalData } from "../../context/global.data.instance.js";
+import { FairysTaroPortal } from "../Portal/index.js";
+import clsx from "clsx";
+const FairysTaroMessageItem = (props)=>{
+    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 = 'string' == typeof icon;
+    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-_zkh1_0_dl_4rem_zhk2_ fairystaro__p-y-_zkh1_0_dl_4rem_zhk2_ fairystaro__p-x-_zkh1_0_dl_4rem_zhk2_  fairystaro__rounded-md fairystaro__text-_zkh1_0_dl_8rem_zhk2_', {
+            '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': 'error' === type && !isIcon,
+            'ant-design--exclamation-circle-outlined': 'warning' === type && !isIcon,
+            'ant-design--check-circle-outlined': 'success' === type && !isIcon,
+            'ant-design--info-circle-outlined': 'info' === type && !isIcon,
+            'fairystaro__text-color-_zkh1_red_zhk2_': 'error' === type,
+            'fairystaro__text-color-_zkh1_orange_zhk2_': 'warning' === type,
+            'fairystaro__text-color-_zkh1_green_zhk2_': 'success' === type,
+            'fairystaro__text-color-_zkh1_blue_zhk2_': 'info' === type
+        }), [
+        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 /*#__PURE__*/ jsxs(View, {
+        className: className,
+        ...rest,
+        style: _style,
+        children: [
+            showIcon ? /*#__PURE__*/ jsxs(View, {
+                className: "fairystaro__flex fairystaro__flex-row fairystaro__justify-center fairystaro__p-t-_zkh1_0_dl_15rem_zhk2_",
+                children: [
+                    isIcon ? /*#__PURE__*/ jsx(Fragment, {}) : /*#__PURE__*/ jsx(View, {
+                        className: classIconName,
+                        style: _iconStyle
+                    }),
+                    isIcon && !isIconString ? /*#__PURE__*/ jsx(View, {
+                        className: classIconName,
+                        style: _iconStyle,
+                        children: icon
+                    }) : /*#__PURE__*/ jsx(Fragment, {}),
+                    isIcon && isIconString ? /*#__PURE__*/ jsx(View, {
+                        className: lastIconClassName,
+                        style: _iconStyle
+                    }) : /*#__PURE__*/ jsx(Fragment, {})
+                ]
+            }) : /*#__PURE__*/ jsx(Fragment, {}),
+            /*#__PURE__*/ jsxs(View, {
+                children: [
+                    title ? /*#__PURE__*/ jsx(View, {
+                        className: titleClassNames,
+                        style: titleStyle,
+                        children: title
+                    }) : /*#__PURE__*/ jsx(Fragment, {}),
+                    children ? /*#__PURE__*/ jsx(View, {
+                        className: clsx('fairys_taro-ui-message-item-body', bodyClassName),
+                        style: bodyStyle,
+                        children: children
+                    }) : /*#__PURE__*/ jsx(Fragment, {})
+                ]
+            })
+        ]
+    });
+};
+const FairysTaroMessage = (props)=>{
+    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 /*#__PURE__*/ jsx(View, {
+        ...rest,
+        className: classNames
+    });
+};
+const FairysTaroPortalMessage = (props)=>{
+    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 /*#__PURE__*/ jsx(FairysTaroPortal, {
+        children: /*#__PURE__*/ jsx(FairysTaroMessage, {
+            ...rest,
+            className: classNames,
+            children: messageData.map((item)=>{
+                const { content, visible, __id, ...rest } = item;
+                if (visible) return /*#__PURE__*/ createElement(FairysTaroMessageItem, {
+                    ...rest,
+                    key: __id
+                }, content);
+                return /*#__PURE__*/ jsx(Fragment, {}, `${__id}_hidden`);
+            })
+        })
+    });
+};
+export { FairysTaroMessage, FairysTaroMessageItem, FairysTaroPortalMessage };

package/esm/components/Portal/index.d.ts

@@ -0,0 +1,8 @@
+export interface FairysTaroPortalProps {
+    children: React.ReactNode;
+    /**
+     * 自定义容器(h5环境)
+     */
+    domContainer?: HTMLElement;
+}
+export declare const FairysTaroPortal: (props: FairysTaroPortalProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/Portal/index.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { RootPortal } from "@tarojs/components";
+const FairysTaroPortal = (props)=>{
+    const { children, domContainer } = props;
+    if ('weapp' === process.env.TARO_ENV) return /*#__PURE__*/ jsx(RootPortal, {
+        children: children
+    });
+    return /*#__PURE__*/ createPortal(children, domContainer || document.body);
+};
+export { FairysTaroPortal };

package/esm/components/Toast/index.d.ts

@@ -0,0 +1 @@
+export declare const FairysTaroToast: () => import("react/jsx-runtime").JSX.Element;

package/esm/components/Toast/index.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@nutui/nutui-react-taro";
+import { FairysTaroPortal } from "../Portal/index.js";
+import { useGlobalData } from "../../context/global.data.instance.js";
+const FairysTaroToast = ()=>{
+    const [state, proxyInstance] = useGlobalData();
+    const toastConfig = state.toastData;
+    return /*#__PURE__*/ jsx(FairysTaroPortal, {
+        children: /*#__PURE__*/ jsx(Toast, {
+            type: "text",
+            ...toastConfig,
+            visible: toastConfig?.visible || false,
+            onClose: ()=>{
+                toastConfig?.onClose?.();
+                proxyInstance.hideToast();
+            }
+        })
+    });
+};
+export { FairysTaroToast };

package/esm/components/connectToastMessage/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ConnectToastMessageOptions {
+    /**
+     * 是否是根页面,
+     * 在 h5 中，只有入口文件才需要展示 message 组件 和 toast 组件
+     * 在微信中，所有页面都需要展示 message 组件 和 toast 组件, 入口文件不展示
+     */
+    isRoot?: boolean;
+}
+export declare const connectToastMessage: (Component: React.FC, options?: ConnectToastMessageOptions) => (props: any) => import("react/jsx-runtime").JSX.Element;

package/esm/components/connectToastMessage/index.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FairysTaroPortalMessage } from "../Mesage/index.js";
+import { FairysTaroToast } from "../Toast/index.js";
+import { Fragment } from "react";
+const connectToastMessage = (Component, options = {})=>{
+    const { isRoot = false } = options;
+    return (props)=>{
+        if ('weapp' === process.env.TARO_ENV) return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Component, {
+                    ...props
+                }),
+                isRoot ? /*#__PURE__*/ jsx(Fragment, {}) : /*#__PURE__*/ jsx(FairysTaroToast, {}),
+                isRoot ? /*#__PURE__*/ jsx(Fragment, {}) : /*#__PURE__*/ jsx(FairysTaroPortalMessage, {})
+            ]
+        });
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Component, {
+                    ...props
+                }),
+                isRoot ? /*#__PURE__*/ jsx(FairysTaroToast, {}) : /*#__PURE__*/ jsx(Fragment, {}),
+                isRoot ? /*#__PURE__*/ jsx(FairysTaroPortalMessage, {}) : /*#__PURE__*/ jsx(Fragment, {})
+            ]
+        });
+    };
+};
+export { connectToastMessage };

package/esm/components/index.d.ts

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

package/esm/components/index.js

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