index.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import _extends from 'babel-runtime/helpers/extends';
  2. import omit from 'omit.js';
  3. import Tooltip from '../tooltip';
  4. import abstractTooltipProps from '../tooltip/abstractTooltipProps';
  5. import PropTypes from '../_util/vue-types';
  6. import { getOptionProps, hasProp, getComponentFromProp, mergeProps } from '../_util/props-util';
  7. import BaseMixin from '../_util/BaseMixin';
  8. import buttonTypes from '../button/buttonTypes';
  9. import Icon from '../icon';
  10. import Button from '../button';
  11. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  12. import defaultLocale from '../locale-provider/default';
  13. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  14. import Base from '../base';
  15. var tooltipProps = abstractTooltipProps();
  16. var btnProps = buttonTypes();
  17. var Popconfirm = {
  18. name: 'APopconfirm',
  19. props: _extends({}, tooltipProps, {
  20. prefixCls: PropTypes.string,
  21. transitionName: PropTypes.string.def('zoom-big'),
  22. content: PropTypes.any,
  23. title: PropTypes.any,
  24. trigger: tooltipProps.trigger.def('click'),
  25. okType: btnProps.type.def('primary'),
  26. disabled: PropTypes.bool.def(false),
  27. okText: PropTypes.any,
  28. cancelText: PropTypes.any,
  29. icon: PropTypes.any,
  30. okButtonProps: PropTypes.object,
  31. cancelButtonProps: PropTypes.object
  32. }),
  33. mixins: [BaseMixin],
  34. model: {
  35. prop: 'visible',
  36. event: 'visibleChange'
  37. },
  38. watch: {
  39. visible: function visible(val) {
  40. this.sVisible = val;
  41. }
  42. },
  43. inject: {
  44. configProvider: { 'default': function _default() {
  45. return ConfigConsumerProps;
  46. } }
  47. },
  48. data: function data() {
  49. var props = getOptionProps(this);
  50. var state = { sVisible: false };
  51. if ('visible' in props) {
  52. state.sVisible = props.visible;
  53. }
  54. if ('defaultVisible' in props) {
  55. state.sVisible = props.defaultVisible;
  56. }
  57. return state;
  58. },
  59. methods: {
  60. onConfirm: function onConfirm(e) {
  61. this.setVisible(false, e);
  62. this.$emit('confirm', e);
  63. },
  64. onCancel: function onCancel(e) {
  65. this.setVisible(false, e);
  66. this.$emit('cancel', e);
  67. },
  68. onVisibleChange: function onVisibleChange(sVisible) {
  69. var disabled = this.$props.disabled;
  70. if (disabled) {
  71. return;
  72. }
  73. this.setVisible(sVisible);
  74. },
  75. setVisible: function setVisible(sVisible, e) {
  76. if (!hasProp(this, 'visible')) {
  77. this.setState({ sVisible: sVisible });
  78. }
  79. this.$emit('visibleChange', sVisible, e);
  80. },
  81. getPopupDomNode: function getPopupDomNode() {
  82. return this.$refs.tooltip.getPopupDomNode();
  83. },
  84. renderOverlay: function renderOverlay(prefixCls, popconfirmLocale) {
  85. var h = this.$createElement;
  86. var okType = this.okType,
  87. okButtonProps = this.okButtonProps,
  88. cancelButtonProps = this.cancelButtonProps;
  89. var icon = getComponentFromProp(this, 'icon') || h(Icon, {
  90. attrs: { type: 'exclamation-circle', theme: 'filled' }
  91. });
  92. var cancelBtnProps = mergeProps({
  93. props: {
  94. size: 'small'
  95. },
  96. on: {
  97. click: this.onCancel
  98. }
  99. }, cancelButtonProps);
  100. var okBtnProps = mergeProps({
  101. props: {
  102. type: okType,
  103. size: 'small'
  104. },
  105. on: {
  106. click: this.onConfirm
  107. }
  108. }, okButtonProps);
  109. return h(
  110. 'div',
  111. { 'class': prefixCls + '-inner-content' },
  112. [h(
  113. 'div',
  114. { 'class': prefixCls + '-message' },
  115. [icon, h(
  116. 'div',
  117. { 'class': prefixCls + '-message-title' },
  118. [getComponentFromProp(this, 'title')]
  119. )]
  120. ), h(
  121. 'div',
  122. { 'class': prefixCls + '-buttons' },
  123. [h(
  124. Button,
  125. cancelBtnProps,
  126. [getComponentFromProp(this, 'cancelText') || popconfirmLocale.cancelText]
  127. ), h(
  128. Button,
  129. okBtnProps,
  130. [getComponentFromProp(this, 'okText') || popconfirmLocale.okText]
  131. )]
  132. )]
  133. );
  134. }
  135. },
  136. render: function render() {
  137. var _this = this;
  138. var h = arguments[0];
  139. var props = getOptionProps(this);
  140. var customizePrefixCls = props.prefixCls;
  141. var getPrefixCls = this.configProvider.getPrefixCls;
  142. var prefixCls = getPrefixCls('popover', customizePrefixCls);
  143. var otherProps = omit(props, ['title', 'content', 'cancelText', 'okText']);
  144. var tooltipProps = {
  145. props: _extends({}, otherProps, {
  146. prefixCls: prefixCls,
  147. visible: this.sVisible
  148. }),
  149. ref: 'tooltip',
  150. on: {
  151. visibleChange: this.onVisibleChange
  152. }
  153. };
  154. var overlay = h(LocaleReceiver, {
  155. attrs: {
  156. componentName: 'Popconfirm',
  157. defaultLocale: defaultLocale.Popconfirm
  158. },
  159. scopedSlots: {
  160. 'default': function _default(popconfirmLocale) {
  161. return _this.renderOverlay(prefixCls, popconfirmLocale);
  162. }
  163. }
  164. });
  165. return h(
  166. Tooltip,
  167. tooltipProps,
  168. [h(
  169. 'template',
  170. { slot: 'title' },
  171. [overlay]
  172. ), this.$slots['default']]
  173. );
  174. }
  175. };
  176. /* istanbul ignore next */
  177. Popconfirm.install = function (Vue) {
  178. Vue.use(Base);
  179. Vue.component(Popconfirm.name, Popconfirm);
  180. };
  181. export default Popconfirm;