@alifd/next
Version:
A configurable component library for web built on React.
328 lines (327 loc) • 11.5 kB
TypeScript
import type React from 'react';
import type { PopupProps } from '../overlay';
import type { CommonProps } from '../util';
import type { ComponentLocaleObject } from '../locale/types';
/**
* @api
*/
export type CloseMode = 'close' | 'mask' | 'esc';
/**
* @api Drawer
*/
export interface DrawerV1Props extends Omit<PopupProps, 'content' | 'onClose' | 'title' | 'children'>, CommonProps {
/**
* [废弃] 同 closeMode, 控制对话框关闭的方式，
* @en [Deprecated] Control the way the drawer is closed
* @deprecated 由于设计变更，该属性已被弃用。请使用 `closeMode` 属性来控制对话框关闭的方式。
* @defaultValue true
* @remarks
* 值可以为字符串或者布尔值，其中字符串是由以下值组成：
* **close** 表示点击关闭按钮可以关闭对话框，
* **mask** 表示点击遮罩区域可以关闭对话框，
* **esc** 表示按下 esc 键可以关闭对话框，
* 如 'mask' 或 'esc,mask'，
* 如果设置为 true，则以上关闭方式全部生效，
* 如果设置为 false，则以上关闭方式全部失效。
* -
* The value can be a string or a Boolean value, where the string is composed of the following values:
* **close** (Click the close button to close the drawer),
* **mask** (Click the mask area to close the drawer),
* **esc** (Press the esc key to close the drawer),
* For example: 'close' or 'close,esc,mask', [],
* If set to true, the above close modes are all effective,
* If set to false, the above close modes are all invalid.
*/
closeable?: 'close' | 'mask' | 'esc' | boolean | 'close,mask' | 'close,esc' | 'mask,esc';
/**
* [推荐] 控制对话框关闭的方式
* @en Control the way the dialog is closed
* @version 1.21
* @remarks
* 值可以为字符串或者数组，其中字符串、数组均为以下值的枚举：
* **close** 表示点击关闭按钮可以关闭对话框，
* **mask** 表示点击遮罩区域可以关闭对话框，
* **esc** 表示按下 esc 键可以关闭对话框，
* 如 'close' 或 ['close','esc','mask'], []。
* -
* The value can be a string or array, where the string and array are enumerated values of the following:
* **close** (Click the close button to close the dialog),
* **mask** (Click the mask area to close the dialog),
* **esc** (Press the esc key to close the dialog),
* For example: 'close' or ['close','esc','mask'], [].
*/
closeMode?: CloseMode | CloseMode[];
/**
* 隐藏时是否保留子节点，不销毁
* @en Whether to retain the child node when hiding
*/
cache?: boolean;
/**
* 标题
* @en Title
*/
title?: React.ReactNode;
/**
* body 上的样式
* @en Style on body
*/
bodyStyle?: React.CSSProperties;
/**
* header 上的样式
* @en Style on header
*/
headerStyle?: React.CSSProperties;
/**
* 显示隐藏时动画的播放方式
* @en Animation playback method when showing and hiding
* @defaultValue \{ in: 'expandInDown', out: 'expandOutUp' \}
* @remarks
* `animation` 对象包含两个属性：`in` 和 `out`。
* - `in`: 进场动画
* - `out`: 出场动画
* @param animation - 指定进场和出场动画的对象。
*/
animation?: {
in: string;
out: string;
} | false;
/**
* 是否显示
* @en Whether to show
*/
visible?: boolean;
/**
* 宽度，仅在 placement 是 left right 的时候生效
* @en Width, only effective when placement is left right
*/
width?: number | string;
/**
* 高度，仅在 placement 是 top bottom 的时候生效
* @en Height, only effective when placement is the top bottom
*/
height?: number | string;
/**
* 对话框关闭时触发的回调函数
* @en Callback when the dialog is closed
* @defaultValue `() => {}`
*/
onClose?: (reason: string, e: React.MouseEvent | KeyboardEvent) => void;
/**
* 位于页面的位置
* @en The position of the page
* @defaultValue 'right'
*/
placement?: 'top' | 'right' | 'bottom' | 'left';
/**
* 开启 v2
* @en Enable v2 version
* @defaultValue false
*/
v2?: false | undefined;
/**
* 内容
* @en Content
*/
content?: React.ReactNode;
/**
* 子元素
* @skip
* @en Child elements
*/
children?: React.ReactNode;
/**
* 渲染组件的容器
* @en Render component container
* @remarks
* 如果是函数需要返回 ref，
* 如果是字符串则是该 DOM 的 id，
* 也可以直接传入 DOM 节点。
* -
* If it is a function, it needs to return ref,
* if it is a string, it is the id of the DOM,
* or you can directly pass in DOM nodes
*/
popupContainer?: string | HTMLElement | null;
/**
* 是否显示遮罩
* @en Whether there is a mask
* @defaultValue true
*/
hasMask?: boolean;
/**
* [v2 废弃] 对话框打开后的回调函数
* @en Callback after the dialog is opened
*/
afterOpen?: () => void;
/**
* [v2 废弃] 受控模式下 (没有 trigger 的时候)，只会在关闭时触发，相当于 onClose
* @en [v2 Deprecated] Controlled mode (without trigger), only triggered when closed, equivalent to onClose
* @remarks
* 该属性在 v2 版本已被废弃，不再推荐使用。
* 请改用 `onClose` 事件处理器来处理关闭事件。
* -
* This attribute has been deprecated in version v2 and is no longer recommended for use.
* Please use the 'onClose' event handler to handle the shutdown event instead.
*/
onVisibleChange?: (visible: boolean, reason: string, e?: React.MouseEvent) => void;
}
/**
* @api Drawer V2
*/
export interface DrawerV2Props extends Omit<PopupProps, 'content' | 'onClose' | 'title' | 'children'>, CommonProps {
/**
* [废弃] 同 closeMode, 控制对话框关闭的方式，
* @en [Deprecated] Control the way the drawer is closed
* @deprecated 由于设计变更，该属性已被弃用。请使用 `closeMode` 属性来控制对话框关闭的方式。
* @defaultValue true
* @remarks
* 值可以为字符串或者布尔值，其中字符串是由以下值组成：
* **close** 表示点击关闭按钮可以关闭对话框，
* **mask** 表示点击遮罩区域可以关闭对话框，
* **esc** 表示按下 esc 键可以关闭对话框，
* 如 'mask' 或 'esc,mask'，
* 如果设置为 true，则以上关闭方式全部生效，
* 如果设置为 false，则以上关闭方式全部失效。
* -
* The value can be a string or a Boolean value, where the string is composed of the following values:
* **close** (Click the close button to close the drawer),
* **mask** (Click the mask area to close the drawer),
* **esc** (Press the esc key to close the drawer),
* For example: 'close' or 'close,esc,mask', [],
* If set to true, the above close modes are all effective,
* If set to false, the above close modes are all invalid.
*/
closeable?: 'close' | 'mask' | 'esc' | boolean | 'close,mask' | 'close,esc' | 'mask,esc';
/**
* [推荐] 控制对话框关闭的方式
* @en Control the way the dialog is closed
* @version 1.21
* @remarks
* 值可以为字符串或者数组，其中字符串、数组均为以下值的枚举：
* **close** 表示点击关闭按钮可以关闭对话框，
* **mask** 表示点击遮罩区域可以关闭对话框，
* **esc** 表示按下 esc 键可以关闭对话框，
* 如 'close' 或 ['close','esc','mask'], []。
* -
* The value can be a string or array, where the string and array are enumerated values of the following:
* **close** (Click the close button to close the dialog),
* **mask** (Click the mask area to close the dialog),
* **esc** (Press the esc key to close the dialog),
* For example: 'close' or ['close','esc','mask'], [].
*/
closeMode?: CloseMode | CloseMode[];
/**
* 隐藏时是否保留子节点，不销毁
* @en Whether to retain the child node when hiding
*/
cache?: boolean;
/**
* 标题
* @en Title
*/
title?: React.ReactNode;
/**
* body 上的样式
* @en Style on body
*/
bodyStyle?: React.CSSProperties;
/**
* header 上的样式
* @en Style on header
*/
headerStyle?: React.CSSProperties;
/**
* 显示隐藏时动画的播放方式
* @en Animation playback method when showing and hiding
* @defaultValue \{ in: 'expandInDown', out: 'expandOutUp' \}
* @remarks
* `animation` 对象包含两个属性：`in` 和 `out`。
* - `in`: 进场动画
* - `out`: 出场动画
* @param animation - 指定进场和出场动画的对象。
*/
animation?: {
in: string;
out: string;
} | false;
/**
* 是否显示
* @en Whether to show
*/
visible?: boolean;
/**
* 宽度，仅在 placement 是 left right 的时候生效
* @en Width, only effective when placement is left right
*/
width?: number | string;
/**
* 高度，仅在 placement 是 top bottom 的时候生效
* @en Height, only effective when placement is the top bottom
*/
height?: number | string;
/**
* [v2] 弹窗关闭后的回调
* @en Callback after the dialog is closed
*/
afterClose?: () => void;
/**
* 对话框关闭时触发的回调函数
* @en Callback when the dialog is closed
* @defaultValue `() => {}`
*/
onClose?: (reason: string, e: React.MouseEvent | KeyboardEvent) => void;
/**
* 位于页面的位置
* @en The position of the page
* @defaultValue 'right'
*/
placement?: 'top' | 'right' | 'bottom' | 'left';
/**
* 开启 v2
* @en Enable v2 version
* @defaultValue false
*/
v2?: true;
/**
* 内容
* @en Content
*/
content?: React.ReactNode;
/**
* 子元素
* @skip
* @en Child elements
*/
children?: React.ReactNode;
/**
* 渲染组件的容器
* @en Render component container
* @remarks
* 如果是函数需要返回 ref，
* 如果是字符串则是该 DOM 的 id，
* 也可以直接传入 DOM 节点。
* -
* If it is a function, it needs to return ref,
* if it is a string, it is the id of the DOM,
* or you can directly pass in DOM nodes
*/
popupContainer?: string | HTMLElement | null;
/**
* 是否显示遮罩
* @en Whether there is a mask
* @defaultValue true
*/
hasMask?: boolean;
}
export type DrawerProps = DrawerV2Props | DrawerV1Props;
export interface InnerProps extends Omit<DrawerProps, 'onClose'> {
prefix?: string;
className?: string | undefined;
role?: string;
rtl?: boolean | undefined;
onClose?: (e: React.MouseEvent) => void;
locale?: ComponentLocaleObject | undefined;
beforeOpen?: () => void;
beforeClose?: () => void;
shouldUpdatePosition?: boolean;
}