ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
232 lines • 9.09 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var _excluded = ["name", "getContainer", "appContext", "prefixCls", "rootPrefixCls", "transitionName", "hasTransitionName"];
import { createVNode as _createVNode } from "vue";
import { getTransitionGroupProps } from '../_util/transition';
import { createVNode, computed, defineComponent, ref, TransitionGroup, onMounted, render as vueRender } from 'vue';
import Notice from './Notice';
import ConfigProvider, { globalConfigForApi } from '../config-provider';
var seed = 0;
var now = Date.now();
function getUuid() {
var id = seed;
seed += 1;
return "rcNotification_".concat(now, "_").concat(id);
}
var Notification = defineComponent({
name: 'Notification',
inheritAttrs: false,
props: ['prefixCls', 'transitionName', 'animation', 'maxCount', 'closeIcon'],
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
expose = _ref.expose,
slots = _ref.slots;
var hookRefs = new Map();
var notices = ref([]);
var transitionProps = computed(function () {
var prefixCls = props.prefixCls,
_props$animation = props.animation,
animation = _props$animation === void 0 ? 'fade' : _props$animation;
var name = props.transitionName;
if (!name && animation) {
name = "".concat(prefixCls, "-").concat(animation);
}
return getTransitionGroupProps(name);
});
var add = function add(originNotice, holderCallback) {
var key = originNotice.key || getUuid();
var notice = _objectSpread(_objectSpread({}, originNotice), {}, {
key: key
});
var maxCount = props.maxCount;
var noticeIndex = notices.value.map(function (v) {
return v.notice.key;
}).indexOf(key);
var updatedNotices = notices.value.concat();
if (noticeIndex !== -1) {
updatedNotices.splice(noticeIndex, 1, {
notice: notice,
holderCallback: holderCallback
});
} else {
if (maxCount && notices.value.length >= maxCount) {
// XXX, use key of first item to update new added (let React to move exsiting
// instead of remove and mount). Same key was used before for both a) external
// manual control and b) internal react 'key' prop , which is not that good.
// eslint-disable-next-line no-param-reassign
// zombieJ: Not know why use `updateKey`. This makes Notice infinite loop in jest.
// Change to `updateMark` for compare instead.
// https://github.com/react-component/notification/commit/32299e6be396f94040bfa82517eea940db947ece
notice.key = updatedNotices[0].notice.key;
notice.updateMark = getUuid();
// zombieJ: That's why. User may close by key directly.
// We need record this but not re-render to avoid upper issue
// https://github.com/react-component/notification/issues/129
notice.userPassKey = key;
updatedNotices.shift();
}
updatedNotices.push({
notice: notice,
holderCallback: holderCallback
});
}
notices.value = updatedNotices;
};
var remove = function remove(removeKey) {
notices.value = notices.value.filter(function (_ref2) {
var _ref2$notice = _ref2.notice,
key = _ref2$notice.key,
userPassKey = _ref2$notice.userPassKey;
var mergedKey = userPassKey || key;
return mergedKey !== removeKey;
});
};
expose({
add: add,
remove: remove,
notices: notices
});
return function () {
var _slots$closeIcon, _className;
var prefixCls = props.prefixCls,
_props$closeIcon = props.closeIcon,
closeIcon = _props$closeIcon === void 0 ? (_slots$closeIcon = slots.closeIcon) === null || _slots$closeIcon === void 0 ? void 0 : _slots$closeIcon.call(slots, {
prefixCls: prefixCls
}) : _props$closeIcon;
var noticeNodes = notices.value.map(function (_ref3, index) {
var notice = _ref3.notice,
holderCallback = _ref3.holderCallback;
var updateMark = index === notices.value.length - 1 ? notice.updateMark : undefined;
var key = notice.key,
userPassKey = notice.userPassKey;
var content = notice.content;
var noticeProps = _objectSpread(_objectSpread(_objectSpread({
prefixCls: prefixCls,
closeIcon: typeof closeIcon === 'function' ? closeIcon({
prefixCls: prefixCls
}) : closeIcon
}, notice), notice.props), {}, {
key: key,
noticeKey: userPassKey || key,
updateMark: updateMark,
onClose: function onClose(noticeKey) {
var _notice$onClose;
remove(noticeKey);
(_notice$onClose = notice.onClose) === null || _notice$onClose === void 0 ? void 0 : _notice$onClose.call(notice);
},
onClick: notice.onClick
});
if (holderCallback) {
return _createVNode("div", {
"key": key,
"class": "".concat(prefixCls, "-hook-holder"),
"ref": function ref(div) {
if (typeof key === 'undefined') {
return;
}
if (div) {
hookRefs.set(key, div);
holderCallback(div, noticeProps);
} else {
hookRefs.delete(key);
}
}
}, null);
}
return _createVNode(Notice, noticeProps, {
default: function _default() {
return [typeof content === 'function' ? content({
prefixCls: prefixCls
}) : content];
}
});
});
var className = (_className = {}, _defineProperty(_className, prefixCls, 1), _defineProperty(_className, attrs.class, !!attrs.class), _className);
return _createVNode("div", {
"class": className,
"style": attrs.style || {
top: '65px',
left: '50%'
}
}, [_createVNode(TransitionGroup, _objectSpread({
"tag": "div"
}, transitionProps.value), {
default: function _default() {
return [noticeNodes];
}
})]);
};
}
});
Notification.newInstance = function newNotificationInstance(properties, callback) {
var _ref4 = properties || {},
_ref4$name = _ref4.name,
name = _ref4$name === void 0 ? 'notification' : _ref4$name,
getContainer = _ref4.getContainer,
appContext = _ref4.appContext,
customizePrefixCls = _ref4.prefixCls,
customRootPrefixCls = _ref4.rootPrefixCls,
customTransitionName = _ref4.transitionName,
hasTransitionName = _ref4.hasTransitionName,
props = _objectWithoutProperties(_ref4, _excluded);
var div = document.createElement('div');
if (getContainer) {
var root = getContainer();
root.appendChild(div);
} else {
document.body.appendChild(div);
}
var Wrapper = defineComponent({
compatConfig: {
MODE: 3
},
name: 'NotificationWrapper',
setup: function setup(_props, _ref5) {
var attrs = _ref5.attrs;
var notiRef = ref();
onMounted(function () {
callback({
notice: function notice(noticeProps) {
var _notiRef$value;
(_notiRef$value = notiRef.value) === null || _notiRef$value === void 0 ? void 0 : _notiRef$value.add(noticeProps);
},
removeNotice: function removeNotice(key) {
var _notiRef$value2;
(_notiRef$value2 = notiRef.value) === null || _notiRef$value2 === void 0 ? void 0 : _notiRef$value2.remove(key);
},
destroy: function destroy() {
vueRender(null, div);
if (div.parentNode) {
div.parentNode.removeChild(div);
}
},
component: notiRef
});
});
return function () {
var global = globalConfigForApi;
var prefixCls = global.getPrefixCls(name, customizePrefixCls);
var rootPrefixCls = global.getRootPrefixCls(customRootPrefixCls, prefixCls);
var transitionName = hasTransitionName ? customTransitionName : "".concat(rootPrefixCls, "-").concat(customTransitionName);
return _createVNode(ConfigProvider, _objectSpread(_objectSpread({}, global), {}, {
"notUpdateGlobalConfig": true,
"prefixCls": rootPrefixCls
}), {
default: function _default() {
return [_createVNode(Notification, _objectSpread(_objectSpread({
"ref": notiRef
}, attrs), {}, {
"prefixCls": prefixCls,
"transitionName": transitionName
}), null)];
}
});
};
}
});
var vm = createVNode(Wrapper, props);
vm.appContext = appContext || vm.appContext;
vueRender(vm, div);
};
export default Notification;