UNPKG

@ray-js/smart-ui

Version:

轻量、可靠的智能小程序 UI 组件库

178 lines (177 loc) 3.62 kB
/// <reference types="react" /> import { SmartComponent, SmartEventHandler, SmartOpenTypeProps } from '../base'; export interface SmartDialogProps extends SmartOpenTypeProps { /** * 是否显示弹窗 */ show?: boolean; /** * 标题 */ title?: string; /** * 是否显示警告图标 */ icon?: boolean; /** * 输入框的值 */ value?: string; /** * 输入框的类型 */ type?: string; /** * 是否是密码类型 */ password?: boolean; /** * 输入框为空时的占位符 */ placeholder?: string; /** * 输入框的最大输入长度 */ maxlength?: number; /** * 弹窗宽度,默认单位为`px` * * @default '320px' */ width?: string | number; /** * 文本内容,支持通过`\n`换行 */ message?: string; /** * 样式风格 * * @default 'default' */ theme?: 'default' | 'round-button'; /** * 内容对齐方式 * * @default 'center' */ messageAlign?: 'left' | 'center' | 'right' | 'justify'; /** * `z-index`层级 * * @default 100 */ zIndex?: number; /** * 自定义类名,`dialog` 在自定义组件内时无效 * * @default '' */ className?: string; /** * 自定义样式 * * @default '' */ customStyle?: React.CSSProperties; /** * 根节点样式类 */ customClass?: string; /** * 取消按钮样式类 */ cancelButtonClass?: string; /** * 确认按钮样式类 */ confirmButtonClass?: string; /** * 是否展示确认按钮 * * @default true */ showConfirmButton?: boolean; /** * 是否展示取消按钮 * * @default false */ showCancelButton?: boolean; /** * 确认按钮的文案 * * @default 'Confirm' */ confirmButtonText?: string; /** * 取消按钮的文案 * * @default 'Cancel' */ cancelButtonText?: string; /** * 确认按钮的字体颜色 * * @default '#ee0a24' */ confirmButtonColor?: string; /** * 取消按钮的字体颜色 * * @default '#333' */ cancelButtonColor?: string; /** * 是否展示遮罩层 * * @default true */ overlay?: boolean; /** * 自定义遮罩层样式 */ overlayStyle?: Partial<CSSStyleDeclaration>; /** * 点击遮罩层时是否关闭弹窗 * * @default false */ closeOnClickOverlay?: boolean; /** * 是否使用自定义内容的插槽 * * @default false */ useSlot?: boolean; /** * 是否使用自定义标题的插槽 * * @default false */ useTitleSlot?: boolean; /** * 关闭前的回调函数,返回 `false` 可阻止关闭,支持返回 `Promise` */ beforeClose?: (action: 'confirm' | 'cancel' | 'overlay', value?: string) => boolean | Promise<boolean>; /** * 动画名称 * * @default 'scale' */ transition?: 'fade' | 'scale' | 'none'; } export interface SmartDialogEvents { /** * 弹窗关闭时触发 */ onClose?: SmartEventHandler; /** * 点击确认按钮时触发 */ onConfirm?: SmartEventHandler; /** * 点击取消按钮时触发 */ onCancel?: SmartEventHandler; } export type SmartDialog = SmartComponent<Omit<SmartDialogProps, 'beforeClose'>, SmartDialogEvents>;