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

src/notification/notification.tsx

@@ -1,65 +1,83 @@
-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 } from '../config-provider/useConfig';
 
 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);
-    }
+  props: {
+    ...props,
   },
-  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) {
+  setup(props: TdNotificationProps, { slots }) {
+    const renderTNode = useTNodeJSX();
+    const renderContent = useContent();
+    const { classPrefix } = useConfig('classPrefix');
+    const name = `${classPrefix.value}-notification`;
+
+    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>;
-    },
+    };
+
+    const renderMainContent = () => {
+      return <div class={`${name}__content`}>{renderContent('default', 'content')}</div>;
+    };
+
+    onMounted(() => {
+      if (props.duration > 0) {
+        const timer = setTimeout(() => {
+          clearTimeout(timer);
+          props.onDurationEnd?.();
+        }, props.duration);
+      }
+    });
+
+    return {
+      name,
+      close,
+      renderIcon,
+      renderClose,
+      renderMainContent,
+      renderTNode,
+    };
   },
   render() {
-    const icon = this.renderIcon();
-    const close = this.renderClose();
-    const content = this.renderContent();
-    const footer = renderTNodeJSX(this, 'footer');
-    const title = renderTNodeJSX(this, 'title');
+    const { renderIcon, renderClose, renderMainContent, renderTNode, name } = this;
+    const icon = renderIcon();
+    const close = renderClose();
+    const content = renderMainContent();
+    const footer = renderTNode('footer');
+    const title = renderTNode('title');
 
     return (
       <div class={`${name}`}>

src/notification/notificationList.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ref, computed, TransitionGroup } from 'vue';
 import Notification from './notification';
 import { prefix } from '../config';
 import { TdNotificationProps, NotificationOptions } from './type';
@@ -15,66 +15,80 @@ export default defineComponent({
       },
     },
   },
-  data() {
-    return {
-      list: [],
+  setup(props) {
+    const { placement } = props as NotificationOptions;
+
+    const list = ref([]);
+
+    const styles = computed<Styles>(() => ({
+      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),
       };
-    },
+    };
+
+    return {
+      list,
+      styles,
+      add,
+      remove,
+      removeAll,
+      getOffset,
+      notificationStyles,
+      getListeners,
+    };
   },
   render() {
-    if (!this.list.length) return;
+    const { placement, styles, list } = this;
     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)}
-          />
-        ))}
+      <div class={`${prefix}-notification__show--${placement}`} style={styles}>
+        <TransitionGroup name="notification-slide-fade">
+          {list.map((item, index) => (
+            <Notification
+              ref={`notification${index}`}
+              key={item.id}
+              style={this.notificationStyles(item)}
+              {...item}
+              {...this.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);
     });
   });