2020-10-12 05:27:16 +00:00
|
|
|
import { createApp, defineComponent, TransitionGroup } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
2020-06-14 13:41:29 +00:00
|
|
|
import { getComponent } from '../_util/props-util';
|
2019-01-12 03:33:27 +00:00
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
|
|
import createChainedFunction from '../_util/createChainedFunction';
|
|
|
|
import Notice from './Notice';
|
2020-10-20 09:41:11 +00:00
|
|
|
import getTransitionGroupProps from '../_util/getTransitionGroupProps';
|
2018-03-19 02:16:27 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
function noop() {}
|
2018-02-05 11:12:41 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
let seed = 0;
|
|
|
|
const now = Date.now();
|
2018-02-05 11:12:41 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
function getUuid() {
|
|
|
|
return `rcNotification_${now}_${seed++}`;
|
2018-02-05 11:12:41 +00:00
|
|
|
}
|
|
|
|
|
2020-10-12 05:27:16 +00:00
|
|
|
const Notification = defineComponent({
|
2018-02-05 11:12:41 +00:00
|
|
|
mixins: [BaseMixin],
|
|
|
|
props: {
|
|
|
|
prefixCls: PropTypes.string.def('rc-notification'),
|
|
|
|
transitionName: PropTypes.string,
|
|
|
|
animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).def('fade'),
|
2018-09-05 13:28:54 +00:00
|
|
|
maxCount: PropTypes.number,
|
2018-11-08 11:59:09 +00:00
|
|
|
closeIcon: PropTypes.any,
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
data() {
|
2018-02-05 11:12:41 +00:00
|
|
|
return {
|
|
|
|
notices: [],
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 03:33:27 +00:00
|
|
|
getTransitionName() {
|
|
|
|
const props = this.$props;
|
|
|
|
let transitionName = props.transitionName;
|
2018-02-05 11:12:41 +00:00
|
|
|
if (!transitionName && props.animation) {
|
2019-01-12 03:33:27 +00:00
|
|
|
transitionName = `${props.prefixCls}-${props.animation}`;
|
2018-02-05 11:12:41 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return transitionName;
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
add(notice) {
|
|
|
|
const key = (notice.key = notice.key || getUuid());
|
|
|
|
const { maxCount } = this.$props;
|
2018-02-05 11:12:41 +00:00
|
|
|
this.setState(previousState => {
|
2019-01-12 03:33:27 +00:00
|
|
|
const notices = previousState.notices;
|
|
|
|
const noticeIndex = notices.map(v => v.key).indexOf(key);
|
|
|
|
const updatedNotices = notices.concat();
|
2018-09-05 13:28:54 +00:00
|
|
|
if (noticeIndex !== -1) {
|
2019-01-12 03:33:27 +00:00
|
|
|
updatedNotices.splice(noticeIndex, 1, notice);
|
2018-09-05 13:28:54 +00:00
|
|
|
} else {
|
|
|
|
if (maxCount && notices.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.
|
2019-01-12 03:33:27 +00:00
|
|
|
notice.updateKey = updatedNotices[0].updateKey || updatedNotices[0].key;
|
|
|
|
updatedNotices.shift();
|
2018-02-05 11:12:41 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
updatedNotices.push(notice);
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
|
|
|
return {
|
|
|
|
notices: updatedNotices,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
});
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
remove(key) {
|
2018-02-05 11:12:41 +00:00
|
|
|
this.setState(previousState => {
|
|
|
|
return {
|
|
|
|
notices: previousState.notices.filter(notice => notice.key !== key),
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
});
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2020-06-14 13:41:29 +00:00
|
|
|
render() {
|
|
|
|
const { prefixCls, notices, remove, getTransitionName, $attrs } = this;
|
2020-10-20 09:41:11 +00:00
|
|
|
const transitionProps = getTransitionGroupProps(getTransitionName());
|
2018-09-05 13:28:54 +00:00
|
|
|
const noticeNodes = notices.map((notice, index) => {
|
2019-01-12 03:33:27 +00:00
|
|
|
const update = Boolean(index === notices.length - 1 && notice.updateKey);
|
|
|
|
const key = notice.updateKey ? notice.updateKey : notice.key;
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const { content, duration, closable, onClose, style, class: className } = notice;
|
2019-01-23 01:43:29 +00:00
|
|
|
const close = createChainedFunction(remove.bind(this, notice.key), onClose);
|
2018-02-05 11:12:41 +00:00
|
|
|
const noticeProps = {
|
2020-06-14 13:41:29 +00:00
|
|
|
prefixCls,
|
|
|
|
duration,
|
|
|
|
closable,
|
|
|
|
update,
|
|
|
|
closeIcon: getComponent(this, 'closeIcon'),
|
|
|
|
onClose: close,
|
|
|
|
onClick: notice.onClick || noop,
|
2018-02-06 07:21:13 +00:00
|
|
|
style,
|
|
|
|
class: className,
|
|
|
|
key,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-06 07:21:13 +00:00
|
|
|
return (
|
2020-06-14 13:41:29 +00:00
|
|
|
<Notice {...noticeProps}>{typeof content === 'function' ? content() : content}</Notice>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
|
|
|
});
|
2018-02-05 11:12:41 +00:00
|
|
|
const className = {
|
|
|
|
[prefixCls]: 1,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-05 11:12:41 +00:00
|
|
|
return (
|
2019-01-12 03:33:27 +00:00
|
|
|
<div
|
|
|
|
class={className}
|
|
|
|
style={
|
2020-06-14 13:41:29 +00:00
|
|
|
$attrs.style || {
|
2019-01-12 03:33:27 +00:00
|
|
|
top: '65px',
|
|
|
|
left: '50%',
|
|
|
|
}
|
|
|
|
}
|
|
|
|
>
|
2020-06-14 13:41:29 +00:00
|
|
|
<TransitionGroup tag="span" {...transitionProps}>
|
|
|
|
{noticeNodes}
|
|
|
|
</TransitionGroup>
|
2018-02-05 11:12:41 +00:00
|
|
|
</div>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
2020-10-12 05:27:16 +00:00
|
|
|
});
|
2018-02-05 11:12:41 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
Notification.newInstance = function newNotificationInstance(properties, callback) {
|
|
|
|
const { getContainer, style, class: className, ...props } = properties || {};
|
|
|
|
const div = document.createElement('div');
|
2018-02-05 11:12:41 +00:00
|
|
|
if (getContainer) {
|
2019-01-12 03:33:27 +00:00
|
|
|
const root = getContainer();
|
|
|
|
root.appendChild(div);
|
2018-02-05 11:12:41 +00:00
|
|
|
} else {
|
2019-01-12 03:33:27 +00:00
|
|
|
document.body.appendChild(div);
|
2018-02-05 11:12:41 +00:00
|
|
|
}
|
2020-06-14 13:41:29 +00:00
|
|
|
const app = createApp({
|
2019-01-12 03:33:27 +00:00
|
|
|
mounted() {
|
|
|
|
const self = this;
|
2018-02-05 11:12:41 +00:00
|
|
|
this.$nextTick(() => {
|
|
|
|
callback({
|
2019-01-12 03:33:27 +00:00
|
|
|
notice(noticeProps) {
|
|
|
|
self.$refs.notification.add(noticeProps);
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
removeNotice(key) {
|
|
|
|
self.$refs.notification.remove(key);
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
|
|
|
component: self,
|
2019-01-12 03:33:27 +00:00
|
|
|
destroy() {
|
2020-06-14 13:41:29 +00:00
|
|
|
app.unmount(div);
|
|
|
|
if (div.parentNode) {
|
|
|
|
div.parentNode.removeChild(div);
|
|
|
|
}
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
|
|
|
});
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2018-02-05 11:12:41 +00:00
|
|
|
const p = {
|
2020-06-14 13:41:29 +00:00
|
|
|
...props,
|
2018-02-05 11:12:41 +00:00
|
|
|
ref: 'notification',
|
|
|
|
style,
|
|
|
|
class: className,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
return <Notification {...p} />;
|
2018-02-05 11:12:41 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2020-06-14 13:41:29 +00:00
|
|
|
app.mount(div);
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
export default Notification;
|