@zamlia/mini-ui 0.0.1

package/lib/index.d.ts

@@ -0,0 +1,585 @@
+import React, { CSSProperties, PropsWithChildren, MutableRefObject } from 'react';
+import { PopupProps, DialogProps } from '@nutui/nutui-react-taro';
+import { ITouchEvent } from '@tarojs/components';
+
+type BottomPopupProps = {
+    /**
+     * 标题
+     */
+    title?: string | React.ReactElement;
+    /**
+     * 弹窗是否开启
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 弹窗高度
+     */
+    height?: number;
+    /**
+     * 是否展示关闭按钮
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * 点击遮罩是否关闭
+     * @default false
+     */
+    maskClose?: boolean;
+    /**
+     * 自定义头部导航样式
+    */
+    customHeaderStyles?: CSSProperties;
+    /**
+     * 底部固定区域
+     */
+    bottomFixedCard?: React.ReactElement;
+} & Partial<Omit<PopupProps, 'round' | 'transition' | 'position' | 'title'>>;
+type BottomPopupRef = {
+    /** 打开弹窗 */
+    open: () => void;
+    /** 关闭弹窗 */
+    close: () => void;
+} | undefined;
+declare const _default: React.ForwardRefExoticComponent<{
+    /**
+     * 标题
+     */
+    title?: string | React.ReactElement;
+    /**
+     * 弹窗是否开启
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 弹窗高度
+     */
+    height?: number;
+    /**
+     * 是否展示关闭按钮
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * 点击遮罩是否关闭
+     * @default false
+     */
+    maskClose?: boolean;
+    /**
+     * 自定义头部导航样式
+    */
+    customHeaderStyles?: CSSProperties;
+    /**
+     * 底部固定区域
+     */
+    bottomFixedCard?: React.ReactElement;
+} & Partial<Omit<PopupProps, "round" | "transition" | "position" | "title">> & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<BottomPopupRef>>;
+
+type CardItemProps = {
+    /** label */
+    label: string | React.ReactElement;
+    /** 值 */
+    value: string | number | React.ReactElement | null;
+    /**
+     * label分割方式
+     * @default :
+     */
+    labelDivider?: string;
+    /**
+   * 是隐藏分割符
+   * @default false
+   */
+    disabledLabelDivider?: boolean;
+    /**
+     * 右边区域
+     * x轴排列方向 justify = 'start' 才显示
+    */
+    extra?: React.ReactElement | string | number | null;
+    /**
+     * x轴排列方向
+     * @default start
+     */
+    justify?: 'start' | 'between';
+    /**
+   * y轴排列方向
+   * @default center
+   */
+    align?: 'center' | 'start' | 'end';
+    /**
+     * 排列方式
+     * @default inline
+     */
+    layout?: 'inline' | 'vertical';
+    /**
+     * value DOM是否脱离文档流
+     * 仅在layout == 'inline' 支持
+     * 不会影响上下item的间距
+     * @default false
+     */
+    valueAbsolute?: boolean;
+    /** 自定义字体样式 */
+    labelStyle?: CSSProperties;
+    valueStyle?: CSSProperties;
+    className?: string;
+    /** 点击事件 */
+    onClick?: (e: ITouchEvent) => void;
+    /**
+     * 是否隐藏该组件
+     * @default false
+    */
+    hide?: boolean;
+};
+
+type CardProps = {
+    /**
+     * 是否显示Header
+     * @default true
+     */
+    showHeader?: boolean;
+    /**
+     * 是否显示Header Border
+     * @default true
+    */
+    showHeaderBorder?: boolean;
+    /** 标题 */
+    title?: string | React.ReactElement;
+    /** header右边区域 */
+    extra?: React.ReactElement;
+    /**
+     * 底部模块
+     * @type {React.ReactElement | React.ReactElement[]}
+     * 如果是类型是数组 则是一个按钮集群，
+     * 超出部分可以一点点点显示剩下的按钮
+    */
+    footer?: React.ReactElement | React.ReactElement[];
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+};
+interface CardComponent extends React.FC<PropsWithChildren<CardProps>> {
+    Item: React.FC<CardItemProps>;
+}
+declare const Card: CardComponent;
+
+type ModalProps = {
+    /** 底部 */
+    content?: React.ReactElement | string;
+    /**
+     * 是否显示右上角关闭按钮
+     * @default true
+     */
+    showCloseIcon?: boolean;
+    /**
+     * 是否显示取消按钮
+     * @default true
+     */
+    showCancel?: boolean;
+    /**
+     * 是否显示确认按钮
+     * @default true
+     */
+    showConfirm?: boolean;
+    /**
+     *自定义确定按钮文字
+     */
+    confirmText?: React.ReactElement | string;
+    className?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+} & Omit<DialogProps, 'content' | 'onCancel' | 'onConfirm' | 'confirmText'>;
+declare const Modal: React.FC<PropsWithChildren<ModalProps>>;
+
+type NavBarProps = {
+    title?: string | React.ReactElement;
+    /**
+     * 标题剧中
+     * @default false
+     */
+    titleCenter?: boolean;
+    /**
+     * 是否是头像
+     * @default false
+     * @description 如果该值是true titleCenter则为true
+     */
+    isHeader?: boolean;
+    /**
+     * 背景颜色
+     * @default transparent
+     * @description 只有isHeader才生效
+     */
+    backageColor?: string;
+    /**
+     * 是否穿透
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * 返回按钮
+     * @default false
+     */
+    back?: boolean;
+    /**
+     * 返回事件
+     */
+    onBack?: () => void;
+};
+declare const NavBar: React.FC<NavBarProps>;
+
+type PageProps = {
+    error: boolean;
+    loading: boolean;
+    loadingColor?: string;
+    loadingText?: string;
+    errorText?: string;
+    emptyDataText?: string;
+    emptyDataRender?: React.ReactElement;
+    dataSource: Array<any> | any;
+    onRequest?: () => void;
+    renderLoading?: any;
+};
+declare const Page: React.FC<PropsWithChildren<PageProps>>;
+
+type PullToPushRefreshProps<T = Record<string, any>> = {
+    pageSize?: number;
+    /** 没有数据展示内容 */
+    emptyRender?: React.ReactElement;
+    /** 加载文案
+   * @default 加载中...
+   */
+    loadingText?: string;
+    /**
+  * 错误文案
+  * @default 加载失败，请点击重试
+  */
+    errorText?: string;
+    /**
+     * 没有数据文案
+     * @default emptyText
+     * */
+    emptyText?: string;
+    /**
+    * 底部文案
+    * @default 没有更多了
+    * */
+    bottomText?: string;
+    /**
+     * 是否展示底部文案
+     * @default true
+    */
+    showBottomText?: boolean;
+    /**
+     * 是否展示加载图标
+     * @default true
+    */
+    showLoding?: boolean;
+    /**
+     * 下拉刷新文案
+     * @default '松开即可刷新'
+     */
+    refreshText?: string;
+    /**
+    * show页面是否加载数据
+    * @default false
+    */
+    showPageRequest?: boolean;
+    /**
+     * 是否首次进入页面自动掉接口
+     * @default true
+     */
+    hasFirstPageAutoRequest?: boolean;
+    /**
+     * 自定义每条数据的内容
+     * @param {T} item 当前条数据
+     * @param {number} index
+    */
+    renderItem: (item: T, index: number) => React.ReactElement;
+    /**
+     * 请求方法
+     * @param {T} skip 当前页码
+     * @param {T} first pageSize
+     * @param {Record<string, any>} restParams 可以传其余的饿默认参数
+    */
+    request: (skip: number, first: number, restParams?: Record<string, any>) => void;
+};
+type PullToPushRefreshRef = {
+    /**
+     * 刷新
+     * @param isFirst 是否是第一次调用
+     * @param restParams 可以传其余的饿默认参数
+     */
+    reload: (isFirst?: boolean, restParams?: Record<string, any>) => void;
+    /**
+     * 设置是否可以页面show刷新
+     * @param {boolean}bol
+     */
+    showPageRequest: (bol: boolean) => void;
+} | undefined;
+type WrappedPullToPushRefreshProps<T> = {
+    actionRef: MutableRefObject<PullToPushRefreshRef>;
+} & PullToPushRefreshProps<T>;
+declare const WrappedPullToPushRefresh: <T extends Record<string, any>>(props: WrappedPullToPushRefreshProps<T>) => React.JSX.Element;
+
+type TabPaneProps = {
+    /** 标题 */
+    title: string;
+};
+
+type TabsProps = {
+    /**
+     * 标签栏样式
+     * @default {}
+     */
+    tabStyle?: CSSProperties;
+    /**
+    * 当前激活 tab 面板的值
+    * @default 0
+    */
+    value: number;
+    className?: string;
+    /** 是否需要滚动 */
+    scroll?: boolean;
+    tabsRender?: (dom: {
+        tabsDom: React.ReactNode;
+    }) => React.ReactNode;
+    onChange: (value: number) => void;
+};
+interface TabsComponent extends React.FC<PropsWithChildren<TabsProps>> {
+    TabPane: React.FC<PropsWithChildren<TabPaneProps>>;
+}
+declare const Tabs: TabsComponent;
+
+type VideoViewProps = {
+    url: string;
+    hasToH5Show?: boolean;
+    width?: number;
+    height?: number;
+    onH5Open?: (url: string) => void;
+};
+/**
+ * 视频显示
+ */
+declare const VideoView: React.FC<VideoViewProps>;
+
+type UploadFileOption = {
+    file: string;
+    dir: string;
+    /**
+     * 扩展参数
+    */
+    extraData?: Record<string, any>;
+    host: string;
+};
+
+type UploadFileProps = {
+    host: string;
+    /**
+     * 可上传文件类型
+     */
+    fileTypes?: string[];
+    value?: any;
+    /**
+     * 最大文件大小，单位MB（暂时没有）
+     */
+    maxSize?: number;
+    /**
+     * 最多上传多少个文件
+     * 最多是8张图片
+     */
+    maxCount?: number;
+    /**
+     * 是否展示删除按钮
+     */
+    showDelete?: boolean;
+    chooseType?: 'img' | 'video' | 'media';
+    dir?: string;
+    /**
+     * 扩展参数
+     */
+    extraData?: Record<string, any>;
+    onChange?: (v?: any) => void;
+};
+interface UploadFileConponent extends React.FC<UploadFileProps> {
+    upload?: (options: UploadFileOption) => Promise<string>;
+    /** 文件类型 */
+    UPLOAD_TYPES: string[];
+    /** 图片类型 */
+    UPLOAD_IMAGE_TYPES: string[];
+    /** 视频类型 */
+    UPLOAD_VIDEO_TYPES: string[];
+}
+type UploadFile = {
+    url: string;
+};
+/**
+ *
+ * @param props
+ * @returns React.ReactElement
+ */
+declare const UploadFile: UploadFileConponent;
+
+type RadioProps = {
+    /**
+     * 是否选中
+     * @default false
+     */
+    visible: boolean;
+    /**
+     * 大小 大小等同于圆圈宽度
+     * @default 10
+     */
+    size?: number;
+    /**
+     * 边框颜色
+     * @default '#AAAAAA'
+     */
+    borderColor?: string;
+    /**
+     * 边框宽度
+     * @default 1
+     */
+    borderWidth?: number;
+};
+declare const Radio: React.FC<RadioProps>;
+
+type DataSelectProps = {
+    dataSource: any[];
+    rangeKey: string;
+    remoteValue?: any;
+    onChange: (currentItem: any) => void;
+    childRender?: (currentItem: any) => React.ReactElement;
+    defaultSeletItem?: any;
+    defaultValue?: string;
+    isSelectFirstItem?: boolean;
+    classNmaes?: string;
+};
+declare const DataSelect: React.FC<DataSelectProps>;
+
+type PaymentMethod = 'WECHAT' | 'ALIPAY';
+interface PaymentMethodSelectProps {
+    /**
+     * 实例 ID，用于区分多个实例
+     */
+    id: string;
+    /**
+     * 默认选中的支付方式
+     * @default 'wechat'
+     */
+    defaultMethod?: PaymentMethod;
+    /**
+     * 确认按钮文本
+     * @default '确认支付'
+     */
+    confirmText?: string;
+}
+declare const PaymentMethodSelectComponent: React.FC<PaymentMethodSelectProps>;
+declare const PaymentMethodSelect: typeof PaymentMethodSelectComponent & {
+    /**
+     * 打开支付方式选择弹窗（静态方法）
+     *
+     * @param id 实例 ID，需要在页面中先渲染 <PaymentMethodSelect id={id} />
+     * @param options 可选配置
+     * @returns Promise<PaymentMethod | null> 返回选择的支付方式，取消时返回 null
+     *
+     * @example
+     * ```tsx
+     * // 在页面中渲染组件
+     * <PaymentMethodSelect id="payment" />
+     *
+     * // 然后调用静态方法
+     * const method = await PaymentMethodSelect.open('payment')
+     * if (method) {
+     *   console.log('选择的支付方式:', method) // 'wechat' | 'alipay'
+     * } else {
+     *   console.log('用户取消了选择')
+     * }
+     * ```
+     */
+    open: (id: string, options?: {
+        defaultMethod?: PaymentMethod;
+        confirmText?: string;
+    }) => Promise<PaymentMethod | null>;
+    /**
+     * 关闭支付方式选择弹窗（静态方法）
+     *
+     * @param id 实例 ID
+     *
+     * @example
+     * ```tsx
+     * PaymentMethodSelect.close('payment')
+     * ```
+     */
+    close: (id: string) => void;
+};
+
+type CityData = {
+    id: string;
+    value: string;
+};
+
+type CitySelectButtonProps = {
+    className?: string;
+    onChange?: (value: CityData) => void;
+    /**
+     * @param {CityData} value
+     * @returns {React.ReactElement}
+    */
+    buttonRender: (value: CityData) => React.ReactElement;
+};
+/**
+ * 顶部选择城市按钮
+ */
+declare const CitySelectButton: React.FC<CitySelectButtonProps>;
+
+/**
+ * 工具函数
+ */
+declare const Utils: {
+    /**
+     * 检查值是否为空
+     * @param value 要检查的值
+     * @returns 如果值为空返回 true，否则返回 false
+     */
+    isEmpty(value: any): boolean;
+    /**
+     * 深拷贝对象
+     * @param obj 要拷贝的对象
+     * @returns 深拷贝后的新对象
+     */
+    cloneDeep<T>(obj: T): T;
+    /**
+     * 判断 URL 是否是图片
+     * @param url 要检查的 URL
+     * @returns 如果是图片返回 true，否则返回 false
+     *
+     * @example
+     * isImg('https://example.com/image.jpg') // => true
+     * isImg('https://example.com/image.png') // => true
+     * isImg('https://example.com/video.mp4') // => false
+     */
+    isImg(url: string): boolean;
+    /**
+     * 判断 URL 是否是视频
+     * @param url 要检查的 URL
+     * @returns 如果是视频返回 true，否则返回 false
+     *
+     * @example
+     * isVideo('https://example.com/video.mp4') // => true
+     * isVideo('https://example.com/video.mov') // => true
+     * isVideo('https://example.com/image.jpg') // => false
+     */
+    isVideo(url: string): boolean;
+    /**
+     * 将字符串多余长度转化为...
+     * @param str 字符串
+     * @param len 字符串长度
+     */
+    substr(str: string, len: number): string;
+    /**
+     * 等待
+     */
+    delay: (delayTime?: number) => Promise<void>;
+};
+
+export { _default as BottomPopup, Card, CitySelectButton, DataSelect, Modal, NavBar, Page, PaymentMethodSelect, WrappedPullToPushRefresh as PullToPushRefresh, Radio, Tabs, UploadFile, Utils, VideoView };
+export type { BottomPopupProps, CardProps, CitySelectButtonProps, DataSelectProps, ModalProps, NavBarProps, PageProps, PaymentMethod, PaymentMethodSelectProps, PullToPushRefreshProps, RadioProps, TabsProps, UploadFileProps, VideoViewProps };

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAA;AAGnC,cAAc,uBAAuB,CAAA;AAGrC,cAAc,SAAS,CAAA"}