From 62eda87c998330eb4ff636d2d8bf27107018d9ab Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 29 Mar 2021 17:47:24 +0800 Subject: [PATCH] chore: split function call (#8424) --- src/dialog/function-call.tsx | 130 +++++++++++++++++ src/dialog/index.tsx | 132 +----------------- src/dialog/test/funciton-call.spec.js | 2 +- .../{index.tsx => function-call.tsx} | 1 - src/image-preview/index.ts | 5 + ...function.spec.ts => function-call.spec.ts} | 2 +- src/image-preview/test/index.spec.ts | 2 +- src/notify/{index.tsx => function-call.tsx} | 1 - src/notify/index.ts | 6 + src/notify/test/index.spec.js | 2 +- src/toast/{index.tsx => function-call.tsx} | 2 - src/toast/index.ts | 6 + src/toast/test/function.spec.ts | 6 +- 13 files changed, 157 insertions(+), 140 deletions(-) create mode 100644 src/dialog/function-call.tsx rename src/image-preview/{index.tsx => function-call.tsx} (98%) create mode 100644 src/image-preview/index.ts rename src/image-preview/test/{function.spec.ts => function-call.spec.ts} (89%) rename src/notify/{index.tsx => function-call.tsx} (98%) create mode 100644 src/notify/index.ts rename src/toast/{index.tsx => function-call.tsx} (98%) create mode 100644 src/toast/index.ts diff --git a/src/dialog/function-call.tsx b/src/dialog/function-call.tsx new file mode 100644 index 000000000..55a2d46ed --- /dev/null +++ b/src/dialog/function-call.tsx @@ -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 () => ; + }, + }; + + ({ 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(VanDialog)); + app.config.globalProperties.$dialog = Dialog; +}; + +Dialog.Component = withInstall(VanDialog); + +export { Dialog }; diff --git a/src/dialog/index.tsx b/src/dialog/index.tsx index 87a561ab9..cc6ad11d5 100644 --- a/src/dialog/index.tsx +++ b/src/dialog/index.tsx @@ -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 () => ; - }, - }; - - ({ 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(VanDialog)); - app.config.globalProperties.$dialog = Dialog; -}; - -Dialog.Component = withInstall(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 }; diff --git a/src/dialog/test/funciton-call.spec.js b/src/dialog/test/funciton-call.spec.js index 5c89ec29a..5cc351df7 100644 --- a/src/dialog/test/funciton-call.spec.js +++ b/src/dialog/test/funciton-call.spec.js @@ -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', () => { diff --git a/src/image-preview/index.tsx b/src/image-preview/function-call.tsx similarity index 98% rename from src/image-preview/index.tsx rename to src/image-preview/function-call.tsx index 8954dab12..9e06afc86 100644 --- a/src/image-preview/index.tsx +++ b/src/image-preview/function-call.tsx @@ -103,5 +103,4 @@ ImagePreview.install = (app: App) => { app.use(withInstall(VanImagePreview)); }; -export default ImagePreview; export { ImagePreview }; diff --git a/src/image-preview/index.ts b/src/image-preview/index.ts new file mode 100644 index 000000000..60e98c6ed --- /dev/null +++ b/src/image-preview/index.ts @@ -0,0 +1,5 @@ +import { ImagePreview, ImagePreviewOptions } from './function-call'; + +export default ImagePreview; +export { ImagePreview }; +export type { ImagePreviewOptions }; diff --git a/src/image-preview/test/function.spec.ts b/src/image-preview/test/function-call.spec.ts similarity index 89% rename from src/image-preview/test/function.spec.ts rename to src/image-preview/test/function-call.spec.ts index d2412a710..3eb380cf8 100644 --- a/src/image-preview/test/function.spec.ts +++ b/src/image-preview/test/function-call.spec.ts @@ -1,5 +1,5 @@ import { createApp } from 'vue'; -import { ImagePreview } from '..'; +import { ImagePreview } from '../function-call'; import ImagePreviewComponent from '../ImagePreview'; test('should expose ImagePreviewComponent in ImagePreview.Component', () => { diff --git a/src/image-preview/test/index.spec.ts b/src/image-preview/test/index.spec.ts index b58ee2663..561fad635 100644 --- a/src/image-preview/test/index.spec.ts +++ b/src/image-preview/test/index.spec.ts @@ -7,7 +7,7 @@ import { triggerDrag, mockGetBoundingClientRect, } from '../../../test'; -import { ImagePreview } from '..'; +import { ImagePreview } from '../function-call'; import ImagePreviewComponent from '../ImagePreview'; const images = [ diff --git a/src/notify/index.tsx b/src/notify/function-call.tsx similarity index 98% rename from src/notify/index.tsx rename to src/notify/function-call.tsx index 6fb0a6173..e01fef390 100644 --- a/src/notify/index.tsx +++ b/src/notify/function-call.tsx @@ -103,5 +103,4 @@ Notify.install = (app: App) => { Notify.Component = withInstall(VanNotify); -export default Notify; export { Notify }; diff --git a/src/notify/index.ts b/src/notify/index.ts new file mode 100644 index 000000000..8a6aa185c --- /dev/null +++ b/src/notify/index.ts @@ -0,0 +1,6 @@ +import { Notify, NotifyOptions } from './function-call'; +import type { NotifyType } from './Notify'; + +export default Notify; +export { Notify }; +export type { NotifyType, NotifyOptions }; diff --git a/src/notify/test/index.spec.js b/src/notify/test/index.spec.js index 777677e6a..a66520dac 100644 --- a/src/notify/test/index.spec.js +++ b/src/notify/test/index.spec.js @@ -1,7 +1,7 @@ import { createApp } from 'vue'; import { later } from '../../../test'; import { trigger } from '../../utils'; -import { Notify } from '..'; +import { Notify } from '../function-call'; import NotifyComponent from '../Notify'; test('should not throw error if calling clear method before render notify', () => { diff --git a/src/toast/index.tsx b/src/toast/function-call.tsx similarity index 98% rename from src/toast/index.tsx rename to src/toast/function-call.tsx index 0f2eccdcb..bacbc6664 100644 --- a/src/toast/index.tsx +++ b/src/toast/function-call.tsx @@ -185,6 +185,4 @@ Toast.install = (app: App) => { app.config.globalProperties.$toast = Toast; }; -export default Toast; export { Toast }; -export type { ToastType, ToastPosition }; diff --git a/src/toast/index.ts b/src/toast/index.ts new file mode 100644 index 000000000..6e99616d4 --- /dev/null +++ b/src/toast/index.ts @@ -0,0 +1,6 @@ +import { Toast, ToastOptions } from './function-call'; +import type { ToastType, ToastPosition } from './Toast'; + +export default Toast; +export { Toast }; +export type { ToastType, ToastOptions, ToastPosition }; diff --git a/src/toast/test/function.spec.ts b/src/toast/test/function.spec.ts index af9ecfae4..a0036c168 100644 --- a/src/toast/test/function.spec.ts +++ b/src/toast/test/function.spec.ts @@ -1,7 +1,7 @@ -import { later } from '../../../test'; -import Toast from '../index'; -import ToastComponent from '../Toast'; import { createApp } from 'vue'; +import { later } from '../../../test'; +import { Toast } from '../function-call'; +import ToastComponent from '../Toast'; test('toast disappeared after duration', async () => { const onClose = jest.fn();