231 lines
6.5 KiB
Java
231 lines
6.5 KiB
Java
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
|
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
|
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
|
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
|
|
|
var _vue = require('vue');
|
|
|
|
var _vue2 = _interopRequireDefault(_vue);
|
|
|
|
var _vueTypes = require('../_util/vue-types');
|
|
|
|
var _vueTypes2 = _interopRequireDefault(_vueTypes);
|
|
|
|
var _propsUtil = require('../_util/props-util');
|
|
|
|
var _BaseMixin = require('../_util/BaseMixin');
|
|
|
|
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
|
|
|
|
var _createChainedFunction = require('../_util/createChainedFunction');
|
|
|
|
var _createChainedFunction2 = _interopRequireDefault(_createChainedFunction);
|
|
|
|
var _getTransitionProps = require('../_util/getTransitionProps');
|
|
|
|
var _getTransitionProps2 = _interopRequireDefault(_getTransitionProps);
|
|
|
|
var _Notice = require('./Notice');
|
|
|
|
var _Notice2 = _interopRequireDefault(_Notice);
|
|
|
|
var _base = require('../base');
|
|
|
|
var _base2 = _interopRequireDefault(_base);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function noop() {}
|
|
|
|
var seed = 0;
|
|
var now = Date.now();
|
|
|
|
function getUuid() {
|
|
return 'rcNotification_' + now + '_' + seed++;
|
|
}
|
|
|
|
var Notification = {
|
|
mixins: [_BaseMixin2['default']],
|
|
props: {
|
|
prefixCls: _vueTypes2['default'].string.def('rc-notification'),
|
|
transitionName: _vueTypes2['default'].string,
|
|
animation: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].object]).def('fade'),
|
|
maxCount: _vueTypes2['default'].number,
|
|
closeIcon: _vueTypes2['default'].any
|
|
},
|
|
data: function data() {
|
|
return {
|
|
notices: []
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
getTransitionName: function getTransitionName() {
|
|
var props = this.$props;
|
|
var transitionName = props.transitionName;
|
|
if (!transitionName && props.animation) {
|
|
transitionName = props.prefixCls + '-' + props.animation;
|
|
}
|
|
return transitionName;
|
|
},
|
|
add: function add(notice) {
|
|
var key = notice.key = notice.key || getUuid();
|
|
var maxCount = this.$props.maxCount;
|
|
|
|
this.setState(function (previousState) {
|
|
var notices = previousState.notices;
|
|
var noticeIndex = notices.map(function (v) {
|
|
return v.key;
|
|
}).indexOf(key);
|
|
var updatedNotices = notices.concat();
|
|
if (noticeIndex !== -1) {
|
|
updatedNotices.splice(noticeIndex, 1, notice);
|
|
} 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.
|
|
notice.updateKey = updatedNotices[0].updateKey || updatedNotices[0].key;
|
|
updatedNotices.shift();
|
|
}
|
|
updatedNotices.push(notice);
|
|
}
|
|
return {
|
|
notices: updatedNotices
|
|
};
|
|
});
|
|
},
|
|
remove: function remove(key) {
|
|
this.setState(function (previousState) {
|
|
return {
|
|
notices: previousState.notices.filter(function (notice) {
|
|
return notice.key !== key;
|
|
})
|
|
};
|
|
});
|
|
}
|
|
},
|
|
|
|
render: function render(h) {
|
|
var _this = this;
|
|
|
|
var prefixCls = this.prefixCls,
|
|
notices = this.notices,
|
|
remove = this.remove,
|
|
getTransitionName = this.getTransitionName;
|
|
|
|
var transitionProps = (0, _getTransitionProps2['default'])(getTransitionName());
|
|
var noticeNodes = notices.map(function (notice, index) {
|
|
var update = Boolean(index === notices.length - 1 && notice.updateKey);
|
|
var key = notice.updateKey ? notice.updateKey : notice.key;
|
|
|
|
var content = notice.content,
|
|
duration = notice.duration,
|
|
closable = notice.closable,
|
|
onClose = notice.onClose,
|
|
style = notice.style,
|
|
className = notice['class'];
|
|
|
|
var close = (0, _createChainedFunction2['default'])(remove.bind(_this, notice.key), onClose);
|
|
var noticeProps = {
|
|
props: {
|
|
prefixCls: prefixCls,
|
|
duration: duration,
|
|
closable: closable,
|
|
update: update,
|
|
closeIcon: (0, _propsUtil.getComponentFromProp)(_this, 'closeIcon')
|
|
},
|
|
on: {
|
|
close: close,
|
|
click: notice.onClick || noop
|
|
},
|
|
style: style,
|
|
'class': className,
|
|
key: key
|
|
};
|
|
return h(
|
|
_Notice2['default'],
|
|
noticeProps,
|
|
[typeof content === 'function' ? content(h) : content]
|
|
);
|
|
});
|
|
var className = (0, _defineProperty3['default'])({}, prefixCls, 1);
|
|
var style = (0, _propsUtil.getStyle)(this);
|
|
return h(
|
|
'div',
|
|
{
|
|
'class': className,
|
|
style: style || {
|
|
top: '65px',
|
|
left: '50%'
|
|
}
|
|
},
|
|
[h(
|
|
'transition-group',
|
|
transitionProps,
|
|
[noticeNodes]
|
|
)]
|
|
);
|
|
}
|
|
};
|
|
|
|
Notification.newInstance = function newNotificationInstance(properties, callback) {
|
|
var _ref = properties || {},
|
|
getContainer = _ref.getContainer,
|
|
style = _ref.style,
|
|
className = _ref['class'],
|
|
props = (0, _objectWithoutProperties3['default'])(_ref, ['getContainer', 'style', 'class']);
|
|
|
|
var div = document.createElement('div');
|
|
if (getContainer) {
|
|
var root = getContainer();
|
|
root.appendChild(div);
|
|
} else {
|
|
document.body.appendChild(div);
|
|
}
|
|
var V = _base2['default'].Vue || _vue2['default'];
|
|
new V({
|
|
el: div,
|
|
mounted: function mounted() {
|
|
var self = this;
|
|
this.$nextTick(function () {
|
|
callback({
|
|
notice: function notice(noticeProps) {
|
|
self.$refs.notification.add(noticeProps);
|
|
},
|
|
removeNotice: function removeNotice(key) {
|
|
self.$refs.notification.remove(key);
|
|
},
|
|
|
|
component: self,
|
|
destroy: function destroy() {
|
|
self.$destroy();
|
|
self.$el.parentNode.removeChild(self.$el);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
render: function render() {
|
|
var h = arguments[0];
|
|
|
|
var p = {
|
|
props: props,
|
|
ref: 'notification',
|
|
style: style,
|
|
'class': className
|
|
};
|
|
return h(Notification, p);
|
|
}
|
|
});
|
|
};
|
|
|
|
exports['default'] = Notification; |