import type { ActionObject, PickClassStyleType, ReactPropsBase, RendererEvent, RendererProps, SchemaClassName, SchemaExpression } from 'jamis-core'; import type { CSSProperties, PropsWithChildren } from 'react'; import type { ActionSchema, BaseSchemaScoped, BaseSchemaWithoutType, IModalStore, SchemaCollection, SizeUnit } from '../types'; export type { IModalStore } from './ModalStore'; export interface CommonDialogDrawer extends BaseSchemaScoped { /** * 默认不用填写,自动会创建确认和取消按钮。 */ actions?: Array JSX.Element) | null; actionType: undefined; } & BaseSchemaWithoutType)>; /** * 内容区域 */ body?: SchemaCollection; /** * 配置 Body 容器 className */ bodyClassName?: SchemaClassName; /** * 元素`.cxd-Modal-content`的样式类 */ contentClassName?: SchemaClassName; /** * 是否支持按 ESC 关闭 Dialog */ closeOnEsc?: boolean; /** * 是否支持点其它区域关闭 Dialog */ closeOnOutside?: boolean; /** * Dialog 大小 */ size?: SizeUnit; sizeExpr?: SchemaExpression; /** * Dialog 宽度 */ width?: string | number; /** * Dialog 高度 */ height?: string | number; /** * 请通过配置 title 设置标题 */ title?: SchemaCollection; titleClassName?: SchemaClassName; header?: SchemaCollection; headerClassName?: SchemaClassName; footer?: SchemaCollection; footerClassName?: SchemaClassName; actionsClassName?: SchemaClassName; /** * 影响自动生成的按钮,如果自己配置了按钮这个配置无效。 */ confirm?: boolean; /** * 确认按钮的文本 */ confirmText?: string; /** * 取消按钮的文本 */ cancelText?: string; /** * 是否显示关闭按钮 */ showCloseButton?: boolean; /** * 是否显示错误信息 */ showErrorMsg?: boolean; /** * 是否显示 spinner */ showLoading?: boolean; showToggleScreen?: boolean; /** * 关闭弹窗的回调 * @deprecated 使用 `cancel` 事件替代 */ onClose?: (confirmed?: boolean) => void; /** * 弹窗确认回调 * @deprecated 使用 `confirm` 事件替代 */ onConfirm?: (values: Array, action: ActionObject, ctx: object, targets: Array) => void; } /** * Dialog 弹框组件。 */ export interface DialogSchema extends CommonDialogDrawer { type: 'dialog'; } export interface DialogSchemaBase extends Omit { type?: 'dialog'; } export interface DialogProps extends RendererProps, Omit { children?: React.ReactNode | ((props?: any) => React.ReactNode); store: IModalStore; show?: boolean; wrapperComponent: React.ElementType; dispatchEvent: (event: IDialogEvent, data?: any) => Promise; onClose: (confirmed?: boolean) => void; onConfirm: (values: Array, action: ActionObject, ctx: object, targets: Array) => void; } export type IDialogEvent = 'cancel' | 'confirm' | 'close'; /** * Drawer 抽出式弹框。 * */ export interface DrawerSchema extends CommonDialogDrawer { type: 'drawer'; /** * 从什么位置弹出 */ position?: DrawerPosition; /** * 是否可以拖动弹窗大小 */ resizable?: boolean; resizableOn?: SchemaExpression; /** * 是否显示蒙层 */ overlay?: boolean; } export interface DrawerSchemaBase extends Omit { type?: 'drawer'; } export interface DrawerRendererProps extends RendererProps, Omit { onClose: () => void; children?: React.ReactNode | ((props?: any) => React.ReactNode); wrapperComponent: React.ElementType; store: IModalStore; show?: boolean; drawerContainer?: () => HTMLElement; } export type DrawerPosition = 'top' | 'right' | 'bottom' | 'left'; export interface DrawerProps extends PropsWithChildren, ReactPropsBase, PickClassStyleType { className?: SchemaClassName; contentClassName?: SchemaClassName; /** 等同于 contentClassName */ bodyClassName?: SchemaClassName; size?: SizeUnit; overlay?: boolean; closeOnEsc?: boolean; container?: any; show?: boolean; showCloseButton?: boolean; showToggleScreen?: boolean; isFullScreen?: boolean; onToggleScreen?: () => void; width?: number | string; height?: number | string; position?: DrawerPosition; disabled?: boolean; closeOnOutside?: boolean; resizable?: boolean; style?: CSSProperties; headerClassName?: SchemaClassName; titleClassName?: SchemaClassName; titleElement?: React.ReactNode; contentRef?: React.MutableRefObject; elementDataAttrs?: Record<`data-${string}`, any>; onExited?: () => void; onEntered?: () => void; onHide?: (e: any) => void; } export interface DrawerForwardRef { props: DrawerProps; modalDom: HTMLElement | null; }