Notification.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  6. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  7. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  8. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  9. var _vue = require('vue');
  10. var _vue2 = _interopRequireDefault(_vue);
  11. var _vueTypes = require('../_util/vue-types');
  12. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  13. var _propsUtil = require('../_util/props-util');
  14. var _BaseMixin = require('../_util/BaseMixin');
  15. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  16. var _createChainedFunction = require('../_util/createChainedFunction');
  17. var _createChainedFunction2 = _interopRequireDefault(_createChainedFunction);
  18. var _getTransitionProps = require('../_util/getTransitionProps');
  19. var _getTransitionProps2 = _interopRequireDefault(_getTransitionProps);
  20. var _Notice = require('./Notice');
  21. var _Notice2 = _interopRequireDefault(_Notice);
  22. var _base = require('../base');
  23. var _base2 = _interopRequireDefault(_base);
  24. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  25. function noop() {}
  26. var seed = 0;
  27. var now = Date.now();
  28. function getUuid() {
  29. return 'rcNotification_' + now + '_' + seed++;
  30. }
  31. var Notification = {
  32. mixins: [_BaseMixin2['default']],
  33. props: {
  34. prefixCls: _vueTypes2['default'].string.def('rc-notification'),
  35. transitionName: _vueTypes2['default'].string,
  36. animation: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].object]).def('fade'),
  37. maxCount: _vueTypes2['default'].number,
  38. closeIcon: _vueTypes2['default'].any
  39. },
  40. data: function data() {
  41. return {
  42. notices: []
  43. };
  44. },
  45. methods: {
  46. getTransitionName: function getTransitionName() {
  47. var props = this.$props;
  48. var transitionName = props.transitionName;
  49. if (!transitionName && props.animation) {
  50. transitionName = props.prefixCls + '-' + props.animation;
  51. }
  52. return transitionName;
  53. },
  54. add: function add(notice) {
  55. var key = notice.key = notice.key || getUuid();
  56. var maxCount = this.$props.maxCount;
  57. this.setState(function (previousState) {
  58. var notices = previousState.notices;
  59. var noticeIndex = notices.map(function (v) {
  60. return v.key;
  61. }).indexOf(key);
  62. var updatedNotices = notices.concat();
  63. if (noticeIndex !== -1) {
  64. updatedNotices.splice(noticeIndex, 1, notice);
  65. } else {
  66. if (maxCount && notices.length >= maxCount) {
  67. // XXX, use key of first item to update new added (let React to move exsiting
  68. // instead of remove and mount). Same key was used before for both a) external
  69. // manual control and b) internal react 'key' prop , which is not that good.
  70. notice.updateKey = updatedNotices[0].updateKey || updatedNotices[0].key;
  71. updatedNotices.shift();
  72. }
  73. updatedNotices.push(notice);
  74. }
  75. return {
  76. notices: updatedNotices
  77. };
  78. });
  79. },
  80. remove: function remove(key) {
  81. this.setState(function (previousState) {
  82. return {
  83. notices: previousState.notices.filter(function (notice) {
  84. return notice.key !== key;
  85. })
  86. };
  87. });
  88. }
  89. },
  90. render: function render(h) {
  91. var _this = this;
  92. var prefixCls = this.prefixCls,
  93. notices = this.notices,
  94. remove = this.remove,
  95. getTransitionName = this.getTransitionName;
  96. var transitionProps = (0, _getTransitionProps2['default'])(getTransitionName());
  97. var noticeNodes = notices.map(function (notice, index) {
  98. var update = Boolean(index === notices.length - 1 && notice.updateKey);
  99. var key = notice.updateKey ? notice.updateKey : notice.key;
  100. var content = notice.content,
  101. duration = notice.duration,
  102. closable = notice.closable,
  103. onClose = notice.onClose,
  104. style = notice.style,
  105. className = notice['class'];
  106. var close = (0, _createChainedFunction2['default'])(remove.bind(_this, notice.key), onClose);
  107. var noticeProps = {
  108. props: {
  109. prefixCls: prefixCls,
  110. duration: duration,
  111. closable: closable,
  112. update: update,
  113. closeIcon: (0, _propsUtil.getComponentFromProp)(_this, 'closeIcon')
  114. },
  115. on: {
  116. close: close,
  117. click: notice.onClick || noop
  118. },
  119. style: style,
  120. 'class': className,
  121. key: key
  122. };
  123. return h(
  124. _Notice2['default'],
  125. noticeProps,
  126. [typeof content === 'function' ? content(h) : content]
  127. );
  128. });
  129. var className = (0, _defineProperty3['default'])({}, prefixCls, 1);
  130. var style = (0, _propsUtil.getStyle)(this);
  131. return h(
  132. 'div',
  133. {
  134. 'class': className,
  135. style: style || {
  136. top: '65px',
  137. left: '50%'
  138. }
  139. },
  140. [h(
  141. 'transition-group',
  142. transitionProps,
  143. [noticeNodes]
  144. )]
  145. );
  146. }
  147. };
  148. Notification.newInstance = function newNotificationInstance(properties, callback) {
  149. var _ref = properties || {},
  150. getContainer = _ref.getContainer,
  151. style = _ref.style,
  152. className = _ref['class'],
  153. props = (0, _objectWithoutProperties3['default'])(_ref, ['getContainer', 'style', 'class']);
  154. var div = document.createElement('div');
  155. if (getContainer) {
  156. var root = getContainer();
  157. root.appendChild(div);
  158. } else {
  159. document.body.appendChild(div);
  160. }
  161. var V = _base2['default'].Vue || _vue2['default'];
  162. new V({
  163. el: div,
  164. mounted: function mounted() {
  165. var self = this;
  166. this.$nextTick(function () {
  167. callback({
  168. notice: function notice(noticeProps) {
  169. self.$refs.notification.add(noticeProps);
  170. },
  171. removeNotice: function removeNotice(key) {
  172. self.$refs.notification.remove(key);
  173. },
  174. component: self,
  175. destroy: function destroy() {
  176. self.$destroy();
  177. self.$el.parentNode.removeChild(self.$el);
  178. }
  179. });
  180. });
  181. },
  182. render: function render() {
  183. var h = arguments[0];
  184. var p = {
  185. props: props,
  186. ref: 'notification',
  187. style: style,
  188. 'class': className
  189. };
  190. return h(Notification, p);
  191. }
  192. });
  193. };
  194. exports['default'] = Notification;