ant-design-vue/components/vc-notification/Notification.jsx

165 lines
4.7 KiB
Vue
Raw Normal View History

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';
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'),
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
maxCount: PropTypes.number,
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();
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
if (noticeIndex !== -1) {
2019-01-12 03:33:27 +00:00
updatedNotices.splice(noticeIndex, 1, notice);
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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);
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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
},
},
render() {
const { prefixCls, notices, remove, getTransitionName, $attrs } = this;
2020-10-20 09:41:11 +00:00
const transitionProps = getTransitionGroupProps(getTransitionName());
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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;
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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;
const close = createChainedFunction(remove.bind(this, notice.key), onClose);
2018-02-05 11:12:41 +00:00
const noticeProps = {
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 (
<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={
$attrs.style || {
2019-01-12 03:33:27 +00:00
top: '65px',
left: '50%',
}
}
>
<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
}
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() {
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 = {
...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
});
app.mount(div);
2019-01-12 03:33:27 +00:00
};
export default Notification;