@ray-js/smart-ui
Version:
轻量、可靠的智能小程序 UI 组件库
178 lines (177 loc) • 3.62 kB
TypeScript
/// <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>;