@aplus-frontend/antdv/es/vc-notification/HookNotification.js

Vue basic component library maintained based on ant-design-vue

import { watch, computed, defineComponent, ref, createVNode as _createVNode } from 'vue';
import { getTransitionGroupProps } from '../_util/transition';
import Portal from '../_util/Portal';
import { NoticeList } from './NoticeList';
let seed = 0;
const now = Date.now();
export function getUuid() {
  const id = seed;
  seed += 1;
  return `rcNotification_${now}_${id}`;
}
const Notification = defineComponent({
  name: 'HookNotification',
  inheritAttrs: false,
  props: ['prefixCls', 'transitionName', 'animation', 'maxCount', 'closeIcon', 'hashId', 'remove', 'notices', 'getStyles', 'getClassName', 'onAllRemoved', 'getContainer', 'stack'],
  setup(props, _ref) {
    let {
      attrs,
      slots
    } = _ref;
    const notices = computed(() => props.notices);
    const transitionProps = computed(() => {
      let name = props.transitionName;
      if (!name && props.animation) {
        switch (typeof props.animation) {
          case 'string':
            name = props.animation;
            break;
          case 'function':
            name = props.animation().name;
            break;
          case 'object':
            name = props.animation.name;
            break;
          default:
            name = `${props.prefixCls}-fade`;
            break;
        }
      }
      return getTransitionGroupProps(name);
    });
    const remove = key => props.remove(key);
    const placements = ref({});
    watch(notices, () => {
      const nextPlacements = {};
      // init placements with animation
      Object.keys(placements.value).forEach(placement => {
        nextPlacements[placement] = [];
      });
      props.notices.forEach(config => {
        const {
          placement = 'topRight'
        } = config.notice;
        if (placement) {
          nextPlacements[placement] = nextPlacements[placement] || [];
          nextPlacements[placement].push(config);
        }
      });
      placements.value = nextPlacements;
    });
    const placementList = computed(() => Object.keys(placements.value));
    return () => {
      var _a;
      const {
        prefixCls,
        closeIcon = (_a = slots.closeIcon) === null || _a === void 0 ? void 0 : _a.call(slots, {
          prefixCls
        })
      } = props;
      const noticeNodes = placementList.value.map(placement => {
        var _a;
        const noticesForPlacement = placements.value[placement];
        const classes = (_a = props.getClassName) === null || _a === void 0 ? void 0 : _a.call(props, placement);
        function onAfterLeave() {
          var _a;
          if (noticesForPlacement.length > 0) {
            return;
          }
          Reflect.deleteProperty(placements.value, placement);
          (_a = props.onAllRemoved) === null || _a === void 0 ? void 0 : _a.call(props);
        }
        const className = {
          [prefixCls]: 1,
          [`${prefixCls}-${placement}`]: 1,
          [attrs.class]: !!attrs.class,
          [props.hashId]: true,
          [classes]: !!classes
        };
        return (// @ts-ignore
          _createVNode(NoticeList, {
            "configList": noticesForPlacement,
            "placement": placement,
            "notices": notices.value,
            "prefixCls": prefixCls,
            "closeIcon": closeIcon,
            "hashId": props.hashId,
            "onClose": noticeKey => remove(noticeKey),
            "getStyles": props.getStyles,
            "transitionProps": transitionProps.value,
            "onAfterLeave": onAfterLeave,
            "wrapperClassName": className,
            "stack": props.stack
          }, null)
        );
      });
      return _createVNode(Portal, {
        "getContainer": props.getContainer
      }, {
        default: () => [noticeNodes]
      });
    };
  }
});
export default Notification;