fat-design 0.0.1-beta.20250505154859

package/types/dialog/index.d.ts

@@ -0,0 +1,328 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+import { ButtonProps } from '../button';
+import { OverlayProps } from '../overlay';
+import { IUseTableProParams } from "../0buildTypes/table-pro/types";
+import { FormProps } from "../0buildTypes/form2/form-types";
+
+export type CloseMode = 'close' | 'mask' | 'esc';
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    title?: any;
+}
+
+export interface IFooterActionsProps {
+    onClick?: (event: React.MouseEvent) => void;
+    children?: React.ReactNode;
+    text?: React.ReactNode;
+    className?: string;
+}
+
+export interface DialogProps extends Omit<HTMLAttributesWeak, 'content'>, CommonProps {
+    /**
+     * 是否显示
+     */
+    visible?: boolean;
+
+    /**
+     * 标题
+     */
+    title?: React.ReactNode;
+
+    /**
+     * 内容
+     */
+    children?: React.ReactNode;
+
+    /**
+     * 底部内容，设置为 false，则不进行显示
+     */
+    footer?: boolean | React.ReactNode;
+
+    /**
+     * 底部按钮的对齐方式
+     */
+    footerAlign?: 'left' | 'center' | 'right';
+
+    /**
+     * 指定确定按钮和取消按钮是否存在以及如何排列,<br><br>**可选值**：
+     * ['ok', 'cancel']（确认取消按钮同时存在，确认按钮在左）
+     * ['cancel', 'ok']（确认取消按钮同时存在，确认按钮在右）
+     * ['ok']（只存在确认按钮）
+     * ['cancel']（只存在取消按钮）
+     */
+    footerActions?: Array<string>;
+
+    /**
+     * 隐藏时是否保留子节点，不销毁
+     */
+    cache?: boolean;
+
+    /**
+     * 在点击确定按钮时触发的回调函数
+     */
+    onOk?: (event: React.MouseEvent) => void;
+
+    /**
+     * 在点击取消按钮时触发的回调函数
+     */
+    onCancel?: (event: React.MouseEvent) => void;
+
+    /**
+     * 应用于确定按钮的属性对象
+     */
+    okProps?: ButtonProps;
+
+    /**
+     * 应用于取消按钮的属性对象
+     */
+    cancelProps?: ButtonProps;
+
+    /**
+     * [废弃]同closeMode, 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：
+     * **close** 表示点击关闭按钮可以关闭对话框
+     * **mask** 表示点击遮罩区域可以关闭对话框
+     * **esc** 表示按下 esc 键可以关闭对话框
+     * 如 'close' 或 'close,esc,mask'
+     * 如果设置为 true，则以上关闭方式全部生效
+     * 如果设置为 false，则以上关闭方式全部失效
+     */
+    closeable?: 'close' | 'mask' | 'esc' | boolean | 'close,mask' | 'close,esc' | 'mask,esc';
+    /**
+     * [推荐]控制对话框关闭的方式，值可以为字符串或者数组，其中字符串、数组均为以下值的枚举：
+     * **close** 表示点击关闭按钮可以关闭对话框
+     * **mask** 表示点击遮罩区域可以关闭对话框
+     * **esc** 表示按下 esc 键可以关闭对话框
+     * 如 'close' 或 ['close','esc','mask'], []
+     */
+    closeMode?: CloseMode[] | 'close' | 'mask' | 'esc';
+
+    /**
+     * 对话框关闭时触发的回调函数
+     */
+    onClose?: (trigger: string, event: React.MouseEvent) => void;
+
+    /**
+     * 对话框关闭后触发的回调函数, 如果有动画，则在动画结束后触发
+     */
+    afterClose?: () => void;
+
+    /**
+     * 是否显示遮罩
+     */
+    hasMask?: boolean;
+
+    /**
+     * 显示隐藏时动画的播放方式
+     */
+    animation?: any | boolean;
+
+    /**
+     * 对话框弹出时是否自动获得焦点
+     */
+    autoFocus?: boolean;
+
+    /**
+     * [v2废弃] 对话框对齐方式, 具体见Overlay文档
+     * @deprecated
+     */
+    align?: string | boolean;
+    /**
+     * [v2废弃] 当对话框高度超过浏览器视口高度时，是否显示所有内容而不是出现滚动条以保证对话框完整显示在浏览器视口内，该属性仅在对话框垂直水平居中时生效，即 align 被设置为 'cc cc' 时
+     * @deprecated
+     */
+    isFullScreen?: boolean;
+
+    /**
+     * [v2废弃] 是否在对话框重新渲染时及时更新对话框位置，一般用于对话框高度变化后依然能保证原来的对齐方式
+     * @deprecated
+     */
+    shouldUpdatePosition?: boolean;
+
+    /**
+     * [v2废弃] 对话框距离浏览器顶部和底部的最小间距，align 被设置为 'cc cc' 并且 isFullScreen 被设置为 true 时不生效
+     * @deprecated
+     */
+    minMargin?: number;
+    /**
+     * 透传到弹层组件的属性对象
+     */
+    overlayProps?: OverlayProps;
+
+    /**
+     * 自定义国际化文案对象
+     */
+    locale?: {
+        ok: string;
+        cancel: string;
+    };
+
+    /**
+     * 对话框的高度样式属性
+     */
+    height?: string | number;
+    popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+    /**
+     * 开启 v2 版本弹窗
+     */
+    v2?: boolean;
+    /**
+     * [v2] 定制关闭按钮 icon
+     */
+    closeIcon?: React.ReactNode;
+    /**
+     * [v2] 弹窗宽度 v2 生效
+     */
+    width?: string | number;
+    /**
+     * [v2] 弹窗上边距。默认 100，设置 centered=true 后默认 40
+     */
+    top?: number;
+    /**
+     * [v2] 弹窗下边距, 默认 40
+     */
+    bottom?: number;
+    /**
+     * [v2] 对话框高度超过浏览器视口高度时，对话框是否展示滚动条。关闭此功后对话框会随高度撑开页面
+     */
+    overflowScroll?: boolean;
+    /**
+     * [v2] 弹窗居中对齐
+     */
+    centered?: boolean;
+    /**
+     * [v2] 自定义渲染弹窗
+     */
+    dialogRender?: (modal: React.ReactNode) => React.ReactNode;
+    /**
+     * [v2] 最外包裹层 className
+     */
+    wrapperClassName?: string;
+
+    footerActionsProps?: Record<string, IFooterActionsProps>
+}
+
+
+export interface QuickShowConfigOnOKEvent extends React.MouseEvent {
+    formActions?: any;
+    formStore?: any;
+    formValues?: any;
+}
+
+export interface QuickShowConfig extends DialogProps {
+    prefix?: string;
+    type?: 'alert' | 'confirm';
+    messageProps?: object;
+    content?: React.ReactNode;
+    onOk?: (event: QuickShowConfigOnOKEvent) => any;
+    onCancel?: () => void;
+    okProps?: object;
+    needWrapper?: boolean;
+}
+
+export interface QuickShowRet {
+    hide: () => void;
+}
+
+export interface IShowTableCfg extends QuickShowConfig {
+    tableProProps: IUseTableProParams;
+    contentStyle?: any;
+    className?: string;
+}
+
+export interface IShowBatchInputCfg extends QuickShowConfig {
+
+    /**
+     * 对话框标题
+     */
+    title?: string;
+
+    /**
+     * 输入框placeholder
+     */
+    placeholder?: string;
+
+    /**
+     * 显示内容为空时的文案
+     */
+    requiredMessage?: string;
+
+    /**
+     * 显示数量的文案
+     */
+    countMessage?: string;
+
+    /**
+     * 用于提取正确内容项的正则表达式
+     */
+    matchPattern?: RegExp;
+    /**
+     * 顶部自定义提示信息
+     */
+    topTips?: any;
+}
+
+export interface IShowCompCfg extends QuickShowConfig {
+    component: any,
+    xProps: any,
+}
+
+export interface TypeShowFormCfgOnOKParams {
+    formActions: any;
+    formStore: any;
+    formValues: any;
+}
+
+export type TypeShowFormCfgOnOK = (p: TypeShowFormCfgOnOKParams, ...args: any) => any;
+
+export interface IShowFormCfg extends QuickShowConfig {
+    formProps: FormProps;
+    bottomTips?: any;
+    topTips?: any;
+    validate?: boolean;
+    contentStyle?: any;
+    contentClass?: string;
+    className?: string;
+    slots?: any;
+    onOk?: TypeShowFormCfgOnOK
+}
+
+export interface TypeShowInputCfgOnOKParams extends TypeShowFormCfgOnOKParams {
+    formInputValue: string
+}
+
+export type TypeShowInputCfgOnOK = (p:TypeShowInputCfgOnOKParams, ...args: any)=>any;
+export type IShowInputCfgMode = 'textareaMode' | 'inputMode';
+export interface IShowInputCfg extends IShowFormCfg {
+    title?: string;
+    label?: string;
+    placeholder?: string;
+    validate?: boolean;
+    required?: boolean;
+    requiredMessage?: string;
+    maxLength?: number;
+    defaultValue?: string;
+    mode?: IShowInputCfgMode;
+    specialReg?: RegExp;
+    onOk?: TypeShowInputCfgOnOK
+}
+
+
+
+export default class Dialog extends React.Component<DialogProps, any> {
+    static showComp(config: IShowCompCfg): QuickShowRet;
+    static showForm(config: IShowFormCfg): QuickShowRet;
+    static showInput(config: IShowInputCfg): QuickShowRet;
+    static showTable(config: IShowTableCfg): QuickShowRet;
+    static showBatchInput(config: IShowBatchInputCfg): QuickShowRet;
+    static confirmPromise(config: QuickShowConfig): Promise<boolean>;
+    static show(config: QuickShowConfig): QuickShowRet;
+    static alert(config: QuickShowConfig): QuickShowRet;
+    static confirm(config: QuickShowConfig): QuickShowRet;
+    static success(config: QuickShowConfig): QuickShowRet;
+    static error(config: QuickShowConfig): QuickShowRet;
+    static warning(config: QuickShowConfig): QuickShowRet;
+    static notice(config: QuickShowConfig): QuickShowRet;
+    static help(config: QuickShowConfig): QuickShowRet;
+}

package/types/divider/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 是否为虚线
+     */
+    dashed?: boolean;
+    /**
+     * 线是水平还是垂直类型
+     */
+    direction?: 'hoz' | 'ver';
+    /**
+     * 分割线标题的位置
+     */
+    orientation?: 'left' | 'right' | 'center';
+}
+
+export default class Divider extends React.Component<DividerProps, any> {}

package/types/drawer/index.d.ts

@@ -0,0 +1,121 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import { PopupProps } from '../overlay';
+import { CloseMode } from '../dialog';
+import CommonProps from '../util';
+import {ButtonProps} from "../button";
+
+interface HTMLAttributesWeak extends PopupProps {
+    title?: any;
+    onClose?: any;
+}
+
+export interface DrawerProps extends Omit<HTMLAttributesWeak, 'content'>, CommonProps {
+    /**
+     * [废弃]同closeMode, 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：
+     * **mask** 表示点击遮罩区域可以关闭对话框
+     * **esc** 表示按下 esc 键可以关闭对话框
+     * 如 'mask' 或 'esc,mask'
+     * 如果设置为 true，则以上关闭方式全部生效
+     * 如果设置为 false，则以上关闭方式全部失效
+     * @deprecated
+     */
+    closeable?: 'close' | 'mask' | 'esc' | boolean | 'close,mask' | 'close,esc' | 'mask,esc';
+    /**
+     * [推荐]控制对话框关闭的方式，值可以为字符串或者数组，其中字符串、数组均为以下值的枚举：
+     * **close** 表示点击关闭按钮可以关闭对话框
+     * **mask** 表示点击遮罩区域可以关闭对话框
+     * **esc** 表示按下 esc 键可以关闭对话框
+     * 如 'close' 或 ['close','esc','mask'], []
+     */
+    closeMode?: CloseMode[] | 'close' | 'mask' | 'esc';
+    /**
+     * 隐藏时是否保留子节点，不销毁
+     */
+    cache?: boolean;
+    /**
+     * 标题
+     */
+    title?: React.ReactNode;
+    /**
+     * body上的样式
+     */
+    bodyStyle?: React.CSSProperties;
+    headerStyle?: React.CSSProperties;
+    /**
+     * 显示隐藏时动画的播放方式
+     * @property {String} in 进场动画
+     * @property {String} out 出场动画
+     */
+    animation?: { in: string; out: string } | boolean;
+    visible?: boolean;
+
+    /**
+     * 宽度，仅在 placement是 left right 的时候生效
+     */
+    width?: number | string;
+
+    /**
+     * 高度，仅在 placement是 top bottom 的时候生效
+     */
+    height?: number | string;
+    /**
+     * [v2 废弃] 受控模式下(没有 trigger 的时候)，只会在关闭时触发，相当于onClose
+     * @deprecated
+     */
+    onVisibleChange?: (visible: boolean, reason: string) => void;
+    /**
+     * [v2] 弹窗关闭后的回调
+     */
+    afterClose?: () => void;
+    onClose?: (reason: string, e: React.MouseEvent) => void;
+    /**
+     * 位于页面的位置
+     */
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * 开启v2版本
+     */
+    v2?: boolean;
+
+    /**
+     * 内容
+     */
+    content?: React.ReactNode;
+
+    /**
+     * 底部内容，设置为 false，则不进行显示
+     */
+    footer?: boolean | React.ReactNode;
+
+
+    /**
+     * 指定确定按钮和取消按钮是否存在以及如何排列,<br><br>**可选值**：
+     * ['ok', 'cancel']（确认取消按钮同时存在，确认按钮在左）
+     * ['cancel', 'ok']（确认取消按钮同时存在，确认按钮在右）
+     * ['ok']（只存在确认按钮）
+     * ['cancel']（只存在取消按钮）
+     */
+    footerActions?: Array<string>
+
+
+
+    /**
+     * 应用于确定按钮的属性对象
+     */
+    okProps?: ButtonProps;
+
+    /**
+     * 应用于取消按钮的属性对象
+     */
+    cancelProps?: ButtonProps;
+}
+
+export interface QuickShowRet {
+    hide: () => void;
+}
+
+export default class Drawer extends React.Component<DrawerProps, any> {
+    static show(config: DrawerProps): QuickShowRet;
+}

package/types/dropdown/index.d.ts

@@ -0,0 +1,198 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+
+export interface DropdownProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 弹层内容
+     */
+    children?: React.ReactNode;
+
+    /**
+     * 弹层当前是否显示
+     */
+    visible?: boolean;
+
+    /**
+     * 弹层请求关闭时触发事件的回调函数
+     */
+    onRequestClose?: (type: string, e: {}) => void;
+
+    /**
+     * 弹层定位的参照元素
+     */
+    target?: any;
+
+    /**
+     * 弹层相对于触发元素的定位, 详见 Overlay 的定位部分
+     */
+    align?: string;
+
+    /**
+     * 弹层相对于触发元素定位的微调
+     */
+    offset?: Array<any>;
+
+    /**
+     * 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点
+     */
+    container?: any;
+
+    /**
+     * 是否显示遮罩
+     */
+    hasMask?: boolean;
+
+    /**
+     * 是否支持 esc 按键关闭弹层
+     */
+    canCloseByEsc?: boolean;
+
+    /**
+     * 点击弹层外的区域是否关闭弹层，不显示遮罩时生效
+     */
+    canCloseByOutSideClick?: boolean;
+
+    /**
+     * 点击遮罩区域是否关闭弹层，显示遮罩时生效
+     */
+    canCloseByMask?: boolean;
+
+    /**
+     * 弹层打开前触发事件的回调函数
+     */
+    beforeOpen?: () => void;
+
+    /**
+     * 弹层打开时触发事件的回调函数
+     */
+    onOpen?: () => void;
+
+    /**
+     * 弹层打开后触发事件的回调函数, 如果有动画，则在动画结束后触发
+     */
+    afterOpen?: () => void;
+
+    /**
+     * 弹层关闭前触发事件的回调函数
+     */
+    beforeClose?: () => void;
+
+    /**
+     * 弹层关闭时触发事件的回调函数
+     */
+    onClose?: () => void;
+
+    /**
+     * 弹层关闭后触发事件的回调函数, 如果有动画，则在动画结束后触发
+     */
+    afterClose?: () => void;
+
+    /**
+     * 弹层定位完成前触发的事件
+     */
+    beforePosition?: () => void;
+
+    /**
+     * 弹层定位完成时触发的事件
+     */
+    onPosition?: (config: {}, node: {}) => void;
+
+    /**
+     * 是否在每次弹层重新渲染后强制更新定位信息，一般用于弹层内容区域大小发生变化时，仍需保持原来的定位方式
+     */
+    shouldUpdatePosition?: boolean;
+
+    /**
+     * 弹层打开时是否让其中的元素自动获取焦点
+     */
+    autoFocus?: boolean;
+
+    /**
+     * 当弹层由于页面滚动等情况不在可视区域时，是否自动调整定位以出现在可视区域
+     */
+    needAdjust?: boolean;
+
+    /**
+     * 是否禁用页面滚动
+     */
+    disableScroll?: boolean;
+
+    /**
+     * 隐藏时是否保留子节点
+     */
+    cache?: boolean;
+
+    /**
+     * 安全节点，当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组
+     */
+    safeNode?: any;
+
+    /**
+     * 弹层的根节点的样式类
+     */
+    wrapperClassName?: string;
+
+    /**
+     * 弹层的根节点的内联样式
+     */
+    wrapperStyle?: React.CSSProperties;
+
+    /**
+     * 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画
+     */
+    animation?: any | boolean;
+
+    /**
+     * 触发弹层显示或者隐藏的元素
+     */
+    trigger?: React.ReactNode;
+
+    /**
+     * 触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，或者它们组成的数组，如 ['hover', 'click']
+     */
+    triggerType?: string | Array<any>;
+
+    /**
+     * 当 triggerType 为 click 时才生效，可自定义触发弹层显示的键盘码
+     */
+    triggerClickKeycode?: number | Array<any>;
+
+    /**
+     * 弹层默认是否显示
+     */
+    defaultVisible?: boolean;
+
+    /**
+     * 开启后，默认点击children弹窗就收起 0.x 2.x中默认是true
+     */
+    autoClose?: boolean;
+
+    /**
+     * 弹层显示或隐藏时触发的回调函数
+     */
+    onVisibleChange?: (visible: boolean, type: string, e: {}) => void;
+
+    /**
+     * 设置此属性，弹层无法显示或隐藏
+     */
+    disabled?: boolean;
+
+    /**
+     * 弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效
+     */
+    delay?: number;
+
+    /**
+     * trigger 是否可以关闭弹层
+     */
+    canCloseByTrigger?: boolean;
+
+    /**
+     * 是否跟随trigger滚动
+     */
+    followTrigger?: boolean;
+}
+
+export default class Dropdown extends React.Component<DropdownProps, any> {}

package/types/field/index.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+
+import { FieldOption } from '@alifd/field';
+import innerField from '@alifd/field';
+
+export * from '@alifd/field';
+export default class Field extends innerField {
+    /**
+     *
+     * @param contextComp 传入调用class的this
+     * @param options 一些事件配置
+     */
+    constructor(contextComp: any, options?: FieldOption);
+
+    /**
+     * 校验
+     * @param callback
+     */
+    validate(callback?: (errors: object[], values: object) => void): void;
+
+    /**
+     * 校验
+     * @param names
+     * @param callback
+     */
+    validate(names?: string[] | string, callback?: (errors: object[], values: object) => void): void;
+
+    /**
+     * react hooks 风格使用 Field
+     * @param options
+     */
+    static useField(options?: FieldOption): Field;
+}

package/types/filter/index.d.ts

@@ -0,0 +1,2 @@
+import Filter from '../0buildTypes/filter/index'
+export default Filter

package/types/form/index.d.ts

@@ -0,0 +1,5 @@
+import Form from '../0buildTypes/form2/index';
+import FormActions from '../0buildTypes/form2/form-actions';
+
+export default Form;
+export { Form, FormActions };