90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
import { snackbar as mduiSnackbar, Snackbar } from "mdui"
|
||
|
||
interface Options {
|
||
/**
|
||
* Snackbar 出现的位置。默认为 `bottom`。可选值为：
|
||
* * `top`：位于顶部，居中对齐
|
||
* * `top-start`：位于顶部，左对齐
|
||
* * `top-end`：位于顶部，右对齐
|
||
* * `bottom`：位于底部，居中对齐
|
||
* * `bottom-start`：位于底部，左对齐
|
||
* * `bottom-end`：位于底部，右对齐
|
||
*/
|
||
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
|
||
/**
|
||
* 操作按钮的文本
|
||
*/
|
||
action?: string;
|
||
/**
|
||
* 是否在右侧显示关闭按钮
|
||
*/
|
||
closeable?: boolean;
|
||
/**
|
||
* 消息文本最多显示几行。默认不限制行数。可选值为
|
||
* * `1`：消息文本最多显示一行
|
||
* * `2`：消息文本最多显示两行
|
||
*/
|
||
messageLine?: 1 | 2;
|
||
/**
|
||
* 在多长时间后自动关闭（单位为毫秒）。设置为 0 时，不自动关闭。默认为 5 秒后自动关闭。
|
||
*/
|
||
autoCloseDelay?: number;
|
||
/**
|
||
* 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar
|
||
*/
|
||
closeOnOutsideClick?: boolean;
|
||
/**
|
||
* 队列名称。
|
||
* 默认不启用队列，在多次调用该函数时，将同时显示多个 snackbar。
|
||
* 可在该参数中传入一个队列名称，具有相同队列名称的 snackbar 函数，将在上一个 snackbar 关闭后才打开下一个 snackbar。
|
||
*/
|
||
queue?: string;
|
||
/**
|
||
* 点击 Snackbar 时的回调函数。
|
||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||
* @param snackbar
|
||
*/
|
||
onClick?: (snackbar: Snackbar) => void;
|
||
/**
|
||
* 点击操作按钮时的回调函数。
|
||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||
* 默认点击后会关闭 snackbar；若返回值为 false，则不关闭 snackbar；若返回值为 promise，则将在 promise 被 resolve 后，关闭 snackbar。
|
||
* @param snackbar
|
||
*/
|
||
onActionClick?: (snackbar: Snackbar) => void | boolean | Promise<void>;
|
||
/**
|
||
* Snackbar 开始显示时的回调函数。
|
||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||
* @param snackbar
|
||
*/
|
||
onOpen?: (snackbar: Snackbar) => void;
|
||
/**
|
||
* Snackbar 显示动画完成时的回调函数。
|
||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||
* @param snackbar
|
||
*/
|
||
onOpened?: (snackbar: Snackbar) => void;
|
||
/**
|
||
* Snackbar 开始隐藏时的回调函数。
|
||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||
* @param snackbar
|
||
*/
|
||
onClose?: (snackbar: Snackbar) => void;
|
||
/**
|
||
* Snackbar 隐藏动画完成时的回调函数。
|
||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||
* @param snackbar
|
||
*/
|
||
onClosed?: (snackbar: Snackbar) => void;
|
||
}
|
||
|
||
interface SnackbarOptions extends Options {
|
||
message: string
|
||
}
|
||
|
||
export default function showSnackbar(opinions: SnackbarOptions) {
|
||
opinions.autoCloseDelay == null && (opinions.autoCloseDelay = 3500)
|
||
opinions.placement == null && (opinions.placement = 'top')
|
||
return mduiSnackbar(opinions)
|
||
}
|