chore: split function call (#8424)

This commit is contained in:
neverland
2021-03-29 17:47:24 +08:00
committed by GitHub
parent eec186ac19
commit 62eda87c99
13 changed files with 157 additions and 140 deletions
+130
View File
@@ -0,0 +1,130 @@
import { App, CSSProperties, TeleportProps } from 'vue';
import { inBrowser, ComponentInstance, withInstall } from '../utils';
import { Interceptor } from '../utils/interceptor';
import { mountComponent, usePopupState } from '../utils/mount-component';
import VanDialog, {
DialogTheme,
DialogAction,
DialogMessage,
DialogMessageAlign,
} from './Dialog';
export type DialogOptions = {
title?: string;
width?: string | number;
theme?: DialogTheme;
message?: DialogMessage;
overlay?: boolean;
teleport?: TeleportProps['to'];
className?: unknown;
allowHtml?: boolean;
lockScroll?: boolean;
transition?: string;
beforeClose?: Interceptor;
messageAlign?: DialogMessageAlign;
overlayClass?: string;
overlayStyle?: CSSProperties;
closeOnPopstate?: boolean;
cancelButtonText?: string;
showCancelButton?: boolean;
showConfirmButton?: boolean;
cancelButtonColor?: string;
confirmButtonText?: string;
confirmButtonColor?: string;
closeOnClickOverlay?: boolean;
};
let instance: ComponentInstance;
function initInstance() {
const Wrapper = {
setup() {
const { state, toggle } = usePopupState();
return () => <VanDialog {...{ ...state, 'onUpdate:show': toggle }} />;
},
};
({ instance } = mountComponent(Wrapper));
}
function Dialog(options: DialogOptions) {
/* istanbul ignore if */
if (!inBrowser) {
return Promise.resolve();
}
return new Promise((resolve, reject) => {
if (!instance) {
initInstance();
}
instance.open({
...Dialog.currentOptions,
...options,
callback: (action: DialogAction) => {
(action === 'confirm' ? resolve : reject)(action);
},
});
});
}
Dialog.defaultOptions = {
title: '',
width: '',
theme: null,
message: '',
overlay: true,
callback: null,
teleport: 'body',
className: '',
allowHtml: false,
lockScroll: true,
transition: 'van-dialog-bounce',
beforeClose: null,
overlayClass: '',
overlayStyle: undefined,
messageAlign: '',
cancelButtonText: '',
cancelButtonColor: null,
confirmButtonText: '',
confirmButtonColor: null,
showConfirmButton: true,
showCancelButton: false,
closeOnPopstate: true,
closeOnClickOverlay: false,
};
Dialog.currentOptions = {
...Dialog.defaultOptions,
};
Dialog.alert = Dialog;
Dialog.confirm = (options: DialogOptions) =>
Dialog({
showCancelButton: true,
...options,
});
Dialog.close = () => {
if (instance) {
instance.toggle(false);
}
};
Dialog.setDefaultOptions = (options: DialogOptions) => {
Object.assign(Dialog.currentOptions, options);
};
Dialog.resetDefaultOptions = () => {
Dialog.currentOptions = { ...Dialog.defaultOptions };
};
Dialog.install = (app: App) => {
app.use(withInstall<typeof VanDialog>(VanDialog));
app.config.globalProperties.$dialog = Dialog;
};
Dialog.Component = withInstall<typeof VanDialog>(VanDialog);
export { Dialog };
+3 -129
View File
@@ -1,132 +1,6 @@
import { App, CSSProperties, TeleportProps } from 'vue';
import { inBrowser, ComponentInstance, withInstall } from '../utils';
import { Interceptor } from '../utils/interceptor';
import { mountComponent, usePopupState } from '../utils/mount-component';
import VanDialog, {
DialogTheme,
DialogAction,
DialogMessage,
DialogMessageAlign,
} from './Dialog';
export type DialogOptions = {
title?: string;
width?: string | number;
theme?: DialogTheme;
message?: DialogMessage;
overlay?: boolean;
teleport?: TeleportProps['to'];
className?: unknown;
allowHtml?: boolean;
lockScroll?: boolean;
transition?: string;
beforeClose?: Interceptor;
messageAlign?: DialogMessageAlign;
overlayClass?: string;
overlayStyle?: CSSProperties;
closeOnPopstate?: boolean;
cancelButtonText?: string;
showCancelButton?: boolean;
showConfirmButton?: boolean;
cancelButtonColor?: string;
confirmButtonText?: string;
confirmButtonColor?: string;
closeOnClickOverlay?: boolean;
};
let instance: ComponentInstance;
function initInstance() {
const Wrapper = {
setup() {
const { state, toggle } = usePopupState();
return () => <VanDialog {...{ ...state, 'onUpdate:show': toggle }} />;
},
};
({ instance } = mountComponent(Wrapper));
}
function Dialog(options: DialogOptions) {
/* istanbul ignore if */
if (!inBrowser) {
return Promise.resolve();
}
return new Promise((resolve, reject) => {
if (!instance) {
initInstance();
}
instance.open({
...Dialog.currentOptions,
...options,
callback: (action: DialogAction) => {
(action === 'confirm' ? resolve : reject)(action);
},
});
});
}
Dialog.defaultOptions = {
title: '',
width: '',
theme: null,
message: '',
overlay: true,
callback: null,
teleport: 'body',
className: '',
allowHtml: false,
lockScroll: true,
transition: 'van-dialog-bounce',
beforeClose: null,
overlayClass: '',
overlayStyle: undefined,
messageAlign: '',
cancelButtonText: '',
cancelButtonColor: null,
confirmButtonText: '',
confirmButtonColor: null,
showConfirmButton: true,
showCancelButton: false,
closeOnPopstate: true,
closeOnClickOverlay: false,
};
Dialog.currentOptions = {
...Dialog.defaultOptions,
};
Dialog.alert = Dialog;
Dialog.confirm = (options: DialogOptions) =>
Dialog({
showCancelButton: true,
...options,
});
Dialog.close = () => {
if (instance) {
instance.toggle(false);
}
};
Dialog.setDefaultOptions = (options: DialogOptions) => {
Object.assign(Dialog.currentOptions, options);
};
Dialog.resetDefaultOptions = () => {
Dialog.currentOptions = { ...Dialog.defaultOptions };
};
Dialog.install = (app: App) => {
app.use(withInstall<typeof VanDialog>(VanDialog));
app.config.globalProperties.$dialog = Dialog;
};
Dialog.Component = withInstall<typeof VanDialog>(VanDialog);
import { Dialog, DialogOptions } from './function-call';
import type { DialogTheme, DialogMessage, DialogMessageAlign } from './Dialog';
export default Dialog;
export { Dialog };
export type { DialogTheme, DialogMessage, DialogMessageAlign };
export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign };
+1 -1
View File
@@ -1,6 +1,6 @@
import { createApp } from 'vue';
import { later } from '../../../test';
import { Dialog } from '..';
import { Dialog } from '../function-call';
import DialogComponent from '../Dialog';
test('should update default options when calling setDefaultOptions method', () => {