123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231 |
- '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;
|