types(Notify): use tsx (#8158)

src/notify/Notify.tsx

@@ -1,17 +1,20 @@
-import { createNamespace } from '../utils';
+import { PropType } from 'vue';
+import { createNamespace, UnknownProp } from '../utils';
 import Popup, { popupSharedProps } from '../popup';
 
 const [createComponent, bem] = createNamespace('notify');
 
+export type NotifyType = 'primary' | 'success' | 'danger' | 'warning';
+
 export default createComponent({
   props: {
     ...popupSharedProps,
     color: String,
     message: [Number, String],
-    className: null,
+    className: UnknownProp,
     background: String,
     type: {
-      type: String,
+      type: String as PropType<NotifyType>,
       default: 'danger',
     },
   },

src/notify/README.md

@@ -107,9 +107,9 @@ export default {
 | color | Message color | _string_ | `white` |  |
 | background | Background color | _string_ | - |
 | className | Custom className | _string \| Array \| object_ | - |
-| onClick | Callback function after click | _Function_ | - |
+| onClick | Callback function after click | _(event: MouseEvent) => void_ | - |
-| onOpened | Callback function after opened | _Function_ | - |
+| onOpened | Callback function after opened | _() => void_ | - |
-| onClose | Callback function after close | _Function_ | - |
+| onClose | Callback function after close | _() => void_ | - |
 
 ### Less Variables
 

src/notify/README.zh-CN.md

@@ -144,9 +144,9 @@ export default {
 | color | 字体颜色 | _string_ | `white` |
 | background | 背景颜色 | _string_ | - |
 | className | 自定义类名 | _string \| Array \| object_ | - |
-| onClick | 点击时的回调函数 | _Function_ | - |
+| onClick | 点击时的回调函数 | _(event: MouseEvent): void_ | - |
-| onOpened | 完全展示后的回调函数 | _Function_ | - |
+| onOpened | 完全展示后的回调函数 | _() => void_ | - |
-| onClose | 关闭时的回调函数 | _Function_ | - |
+| onClose | 关闭时的回调函数 | _() => void_ | - |
 
 ### 样式变量
 

src/notify/demo/index.vue

@@ -33,6 +33,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Notify from '..';
+import { NotifyType } from '../Notify';
 
 const i18n = {
   'zh-CN': {
@@ -85,7 +86,7 @@ export default {
       });
     };
 
-    const showType = (type: string) => {
+    const showType = (type: NotifyType) => {
       Notify({
         message: t('content'),
         type,

src/notify/index.tsx

@@ -1,11 +1,26 @@
-import { isObject, inBrowser } from '../utils';
+import { App } from 'vue';
+import { isObject, inBrowser, ComponentInstance } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanNotify from './Notify';
+import VanNotify, { NotifyType } from './Notify';
 
-let timer;
+let timer: number;
-let instance;
+let instance: ComponentInstance;
 
-function parseOptions(message) {
+export type NotifyMessage = string | number;
+
+export type NotifyOptions = {
+  type?: NotifyType;
+  color?: string;
+  message?: NotifyMessage;
+  duration?: number;
+  className?: unknown;
+  background?: string;
+  onClick?: (event: MouseEvent) => void;
+  onClose?: () => void;
+  onOpened?: () => void;
+};
+
+function parseOptions(message: NotifyMessage | NotifyOptions) {
   return isObject(message) ? message : { message };
 }
 
@@ -25,7 +40,7 @@ function initInstance() {
   }));
 }
 
-function Notify(options) {
+function Notify(options: NotifyMessage | NotifyOptions) {
   if (!inBrowser) {
     return;
   }
@@ -42,7 +57,7 @@ function Notify(options) {
   instance.open(options);
   clearTimeout(timer);
 
-  if (options.duration > 0) {
+  if (options.duration! > 0) {
     timer = setTimeout(Notify.clear, options.duration);
   }
 
@@ -54,13 +69,13 @@ function defaultOptions() {
     type: 'danger',
     color: undefined,
     message: '',
-    onClose: null,
+    onClose: undefined,
-    onClick: null,
+    onClick: undefined,
-    onOpened: null,
+    onOpened: undefined,
     duration: 3000,
     className: '',
     background: undefined,
-  };
+  } as NotifyOptions;
 }
 
 Notify.clear = () => {
@@ -71,7 +86,7 @@ Notify.clear = () => {
 
 Notify.currentOptions = defaultOptions();
 
-Notify.setDefaultOptions = (options) => {
+Notify.setDefaultOptions = (options: NotifyOptions) => {
   Object.assign(Notify.currentOptions, options);
 };
 
@@ -79,8 +94,8 @@ Notify.resetDefaultOptions = () => {
   Notify.currentOptions = defaultOptions();
 };
 
-Notify.install = (app) => {
+Notify.install = (app: App) => {
-  app.use(VanNotify);
+  app.use(VanNotify as any);
   app.config.globalProperties.$notify = Notify;
 };