index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import Icon from '../icon';
  3. import classNames from 'classnames';
  4. import BaseMixin from '../_util/BaseMixin';
  5. import PropTypes from '../_util/vue-types';
  6. import getTransitionProps from '../_util/getTransitionProps';
  7. import { getComponentFromProp, isValidElement } from '../_util/props-util';
  8. import { cloneElement } from '../_util/vnode';
  9. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  10. import Base from '../base';
  11. function noop() {}
  12. export var AlertProps = {
  13. /**
  14. * Type of Alert styles, options:`success`, `info`, `warning`, `error`
  15. */
  16. type: PropTypes.oneOf(['success', 'info', 'warning', 'error']),
  17. /** Whether Alert can be closed */
  18. closable: PropTypes.bool,
  19. /** Close text to show */
  20. closeText: PropTypes.any,
  21. /** Content of Alert */
  22. message: PropTypes.any,
  23. /** Additional content of Alert */
  24. description: PropTypes.any,
  25. /** Callback when close Alert */
  26. // onClose?: React.MouseEventHandler<HTMLAnchorElement>;
  27. /** Trigger when animation ending of Alert */
  28. afterClose: PropTypes.func.def(noop),
  29. /** Whether to show icon */
  30. showIcon: PropTypes.bool,
  31. iconType: PropTypes.string,
  32. prefixCls: PropTypes.string,
  33. banner: PropTypes.bool,
  34. icon: PropTypes.any
  35. };
  36. var Alert = {
  37. name: 'AAlert',
  38. props: AlertProps,
  39. mixins: [BaseMixin],
  40. inject: {
  41. configProvider: { 'default': function _default() {
  42. return ConfigConsumerProps;
  43. } }
  44. },
  45. data: function data() {
  46. return {
  47. closing: false,
  48. closed: false
  49. };
  50. },
  51. methods: {
  52. handleClose: function handleClose(e) {
  53. e.preventDefault();
  54. var dom = this.$el;
  55. dom.style.height = dom.offsetHeight + 'px';
  56. // Magic code
  57. // 重复一次后才能正确设置 height
  58. dom.style.height = dom.offsetHeight + 'px';
  59. this.setState({
  60. closing: true
  61. });
  62. this.$emit('close', e);
  63. },
  64. animationEnd: function animationEnd() {
  65. this.setState({
  66. closing: false,
  67. closed: true
  68. });
  69. this.afterClose();
  70. }
  71. },
  72. render: function render() {
  73. var _classNames;
  74. var h = arguments[0];
  75. var customizePrefixCls = this.prefixCls,
  76. banner = this.banner,
  77. closing = this.closing,
  78. closed = this.closed;
  79. var getPrefixCls = this.configProvider.getPrefixCls;
  80. var prefixCls = getPrefixCls('alert', customizePrefixCls);
  81. var closable = this.closable,
  82. type = this.type,
  83. showIcon = this.showIcon,
  84. iconType = this.iconType;
  85. var closeText = getComponentFromProp(this, 'closeText');
  86. var description = getComponentFromProp(this, 'description');
  87. var message = getComponentFromProp(this, 'message');
  88. var icon = getComponentFromProp(this, 'icon');
  89. // banner模式默认有 Icon
  90. showIcon = banner && showIcon === undefined ? true : showIcon;
  91. // banner模式默认为警告
  92. type = banner && type === undefined ? 'warning' : type || 'info';
  93. var iconTheme = 'filled';
  94. if (!iconType) {
  95. switch (type) {
  96. case 'success':
  97. iconType = 'check-circle';
  98. break;
  99. case 'info':
  100. iconType = 'info-circle';
  101. break;
  102. case 'error':
  103. iconType = 'close-circle';
  104. break;
  105. case 'warning':
  106. iconType = 'exclamation-circle';
  107. break;
  108. default:
  109. iconType = 'default';
  110. }
  111. // use outline icon in alert with description
  112. if (description) {
  113. iconTheme = 'outlined';
  114. }
  115. }
  116. // closeable when closeText is assigned
  117. if (closeText) {
  118. closable = true;
  119. }
  120. var alertCls = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-' + type, true), _defineProperty(_classNames, prefixCls + '-closing', closing), _defineProperty(_classNames, prefixCls + '-with-description', !!description), _defineProperty(_classNames, prefixCls + '-no-icon', !showIcon), _defineProperty(_classNames, prefixCls + '-banner', !!banner), _defineProperty(_classNames, prefixCls + '-closable', closable), _classNames));
  121. var closeIcon = closable ? h(
  122. 'button',
  123. {
  124. attrs: {
  125. type: 'button',
  126. tabIndex: 0
  127. },
  128. on: {
  129. 'click': this.handleClose
  130. },
  131. 'class': prefixCls + '-close-icon' },
  132. [closeText ? h(
  133. 'span',
  134. { 'class': prefixCls + '-close-text' },
  135. [closeText]
  136. ) : h(Icon, {
  137. attrs: { type: 'close' }
  138. })]
  139. ) : null;
  140. var iconNode = icon && (isValidElement(icon) ? cloneElement(icon, {
  141. 'class': prefixCls + '-icon'
  142. }) : h(
  143. 'span',
  144. { 'class': prefixCls + '-icon' },
  145. [icon]
  146. )) || h(Icon, { 'class': prefixCls + '-icon', attrs: { type: iconType, theme: iconTheme }
  147. });
  148. var transitionProps = getTransitionProps(prefixCls + '-slide-up', {
  149. appear: false,
  150. afterLeave: this.animationEnd
  151. });
  152. return closed ? null : h(
  153. 'transition',
  154. transitionProps,
  155. [h(
  156. 'div',
  157. {
  158. directives: [{
  159. name: 'show',
  160. value: !closing
  161. }],
  162. 'class': alertCls, attrs: { 'data-show': !closing }
  163. },
  164. [showIcon ? iconNode : null, h(
  165. 'span',
  166. { 'class': prefixCls + '-message' },
  167. [message]
  168. ), h(
  169. 'span',
  170. { 'class': prefixCls + '-description' },
  171. [description]
  172. ), closeIcon]
  173. )]
  174. );
  175. }
  176. };
  177. /* istanbul ignore next */
  178. Alert.install = function (Vue) {
  179. Vue.use(Base);
  180. Vue.component(Alert.name, Alert);
  181. };
  182. export default Alert;