refactor(notification): component used by composition , and add notification recycle effect

src/notification/notification.tsx

@@ -1,76 +1,76 @@
-import { defineComponent, h, VNodeChild } from 'vue';
+import { defineComponent, h, onMounted } from 'vue';
 import { InfoCircleFilledIcon, CheckCircleFilledIcon, CloseIcon } from 'tdesign-icons-vue-next';
 import isFunction from 'lodash/isFunction';
-import { prefix } from '../config';
-import { renderTNodeJSX, renderContent } from '../utils/render-tnode';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
 import props from './props';
-import { emitEvent } from '../utils/event';
-
-const name = `${prefix}-notification`;
+import { TdNotificationProps } from './type';
+import { useConfig, usePrefixClass } from '../config-provider';
 
 export default defineComponent({
   name: 'TNotification',
-  props: { ...props },
-  emits: ['duration-end', 'click-close-btn'],
-  mounted() {
-    if (this.duration > 0) {
-      const timer = setTimeout(() => {
-        clearTimeout(timer);
-        emitEvent(this, 'duration-end', this);
-      }, this.duration);
-    }
-  },
-  methods: {
-    close(e?: MouseEvent) {
-      emitEvent(this, 'click-close-btn', e, this);
-    },
-    renderIcon() {
-      let icon;
-      if (this.icon === false) return null;
-      if (isFunction(this.icon)) {
-        icon = this.icon(h);
-      } else if (this.$slots.icon) {
-        icon = this.$slots.icon(null);
-      } else if (this.theme) {
+  props,
+  setup(props: TdNotificationProps, { slots, expose }) {
+    const COMPONENT_NAME = usePrefixClass('notification');
+    const { classPrefix } = useConfig('classPrefix');
+    const renderTNode = useTNodeJSX();
+    const renderContent = useContent();
+
+    const close = (e?: MouseEvent) => {
+      props.onCloseBtnClick?.({ e });
+    };
+
+    const renderIcon = () => {
+      let iconContent;
+      if (props.icon === false) return null;
+      if (isFunction(props.icon)) {
+        iconContent = props.icon(h);
+      } else if (slots.icon) {
+        iconContent = slots.icon(null);
+      } else if (props.theme) {
         const iconType =
-          this.theme === 'success' ? (
-            <CheckCircleFilledIcon class={`t-is-${this.theme}`} />
+          props.theme === 'success' ? (
+            <CheckCircleFilledIcon class={`t-is-${props.theme}`} />
           ) : (
-            <InfoCircleFilledIcon class={`t-is-${this.theme}`} />
+            <InfoCircleFilledIcon class={`t-is-${props.theme}`} />
           );
-        icon = <div class="t-notification__icon">{iconType}</div>;
+        iconContent = <div class="t-notification__icon">{iconType}</div>;
       }
-      return icon;
-    },
-    renderClose() {
+      return iconContent;
+    };
+
+    const renderClose = () => {
       const defaultClose = <CloseIcon />;
       return (
-        <span class={`${prefix}-message__close`} onClick={this.close}>
-          {renderTNodeJSX(this, 'closeBtn', defaultClose)}
+        <span class={`${classPrefix.value}-message__close`} onClick={close}>
+          {renderTNode('closeBtn', defaultClose)}
         </span>
       );
-    },
-    renderContent() {
-      return <div class={`${name}__content`}>{renderContent(this, 'default', 'content')}</div>;
-    },
-  },
-  render() {
-    const icon = this.renderIcon();
-    const close = this.renderClose();
-    const content = this.renderContent();
-    const footer = renderTNodeJSX(this, 'footer');
-    const title = renderTNodeJSX(this, 'title');
+    };
+
+    const renderMainContent = () => {
+      return <div class={`${COMPONENT_NAME.value}__content`}>{renderContent('default', 'content')}</div>;
+    };
+
+    onMounted(() => {
+      if (props.duration > 0) {
+        const timer = setTimeout(() => {
+          clearTimeout(timer);
+          props.onDurationEnd?.();
+        }, props.duration);
+      }
+    });
 
-    return (
-      <div class={`${name}`}>
-        {icon}
-        <div class={`${name}__main`}>
-          <div class={`${name}__title__wrap`}>
-            <span class={`${name}__title`}>{title}</span>
-            {close}
+    expose({ close });
+    return () => (
+      <div class={`${COMPONENT_NAME.value}`}>
+        {renderIcon()}
+        <div class={`${COMPONENT_NAME.value}__main`}>
+          <div class={`${COMPONENT_NAME.value}__title__wrap`}>
+            <span class={`${COMPONENT_NAME.value}__title`}>{renderTNode('title')}</span>
+            {renderClose()}
           </div>
-          {content}
-          {footer}
+          {renderMainContent()}
+          {renderTNode('footer')}
         </div>
       </div>
     );

src/notification/notificationList.tsx

@@ -1,9 +1,9 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ref, computed, TransitionGroup, Ref } from 'vue';
 import Notification from './notification';
-import { prefix } from '../config';
 import { TdNotificationProps, NotificationOptions } from './type';
 import { Styles } from '../common';
 import { DEFAULT_Z_INDEX, PLACEMENT_OFFSET, DISTANCE } from './const';
+import { usePrefixClass } from '../config-provider';
 
 export default defineComponent({
   props: {
@@ -15,66 +15,71 @@ export default defineComponent({
       },
     },
   },
-  data() {
-    return {
-      list: [],
+  setup(props, { expose }) {
+    const COMPONENT_NAME = usePrefixClass('notification-list');
+
+    const { placement } = props as NotificationOptions;
+
+    const list: Ref<NotificationOptions[]> = ref([]);
+
+    const styles = computed(() => ({
+      zIndex: DEFAULT_Z_INDEX,
+      ...PLACEMENT_OFFSET[placement],
+    }));
+
+    const add = (options: TdNotificationProps): number => {
+      list.value.push(options);
+      return list.value.length - 1;
     };
-  },
-  computed: {
-    styles(): Styles {
-      return {
-        zIndex: DEFAULT_Z_INDEX,
-        ...PLACEMENT_OFFSET[this.placement],
-      };
-    },
-  },
-  methods: {
-    add(options: TdNotificationProps): number {
-      this.list.push(options);
-      return this.list.length - 1;
-    },
-    remove(index: number) {
-      this.list.splice(index, 1);
-    },
-    removeAll() {
-      this.list = [];
-    },
-    getOffset(val: string | number) {
+
+    const remove = (index: number) => {
+      list.value.splice(index, 1);
+    };
+
+    const removeAll = () => {
+      list.value = [];
+    };
+
+    const getOffset = (val: string | number) => {
       if (!val) return;
       return isNaN(Number(val)) ? val : `${val}px`;
-    },
-    notificationStyles(item: { offset: NotificationOptions['offset']; zIndex: number }) {
+    };
+
+    const notificationStyles = (item: { offset: NotificationOptions['offset']; zIndex: number }) => {
       const styles: Styles = {
         marginBottom: DISTANCE,
       };
       if (item.offset) {
         styles.position = 'relative';
-        styles.left = this.getOffset(item.offset[0]);
-        styles.top = this.getOffset(item.offset[1]);
+        styles.left = getOffset(item.offset[0]);
+        styles.top = getOffset(item.offset[1]);
       }
       if (item.zIndex) styles['z-index'] = item.zIndex;
       return styles;
-    },
-    getListeners(index: number) {
+    };
+
+    const getListeners = (index: number) => {
       return {
-        onClickCloseBtn: () => this.remove(index),
-        onDurationEnd: () => this.remove(index),
+        onCloseBtnClick: () => remove(index),
+        onDurationEnd: () => remove(index),
       };
-    },
-  },
-  render() {
-    if (!this.list.length) return;
-    return (
-      <div class={`${prefix}-notification__show--${this.placement}`} style={this.styles}>
-        {this.list.map((item, index) => (
-          <Notification
-            ref={`notification${index}`}
-            key={item.id}
-            style={this.notificationStyles(item)}
-            {...item}
-            {...this.getListeners(index)}
-          />
-        ))}
+    };
+
+    expose({ add, remove, removeAll });
+
+    return () => (
+      <div class={`${COMPONENT_NAME.value}__show-transition--${placement}`} style={styles.value}>
+        <TransitionGroup name="notification-slide-fade">
+          {list.value.map((item: { offset: NotificationOptions['offset']; zIndex: number; id: number }, index) => (
+            <Notification
+              ref={`notification${index}`}
+              key={item.id}
+              style={notificationStyles(item)}
+              {...item}
+              {...getListeners(index)}
+            />
+          ))}
+        </TransitionGroup>
       </div>
     );
   },

src/notification/plugin.ts

@@ -52,7 +52,7 @@ const NotificationFunction = (options: NotificationOptions): Promise<Notificatio
 
   return new Promise((resolve) => {
     nextTick(() => {
-      const lastChild = tmpInstance.$children;
+      const lastChild = tmpInstance.$refs?.notification0 as NotificationInstance;
       resolve(lastChild);
     });
   });