Modal.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import classNames from 'classnames';
  4. import Dialog from '../vc-dialog';
  5. import PropTypes from '../_util/vue-types';
  6. import addEventListener from '../vc-util/Dom/addEventListener';
  7. import { getConfirmLocale } from './locale';
  8. import Icon from '../icon';
  9. import Button from '../button';
  10. import buttonTypes from '../button/buttonTypes';
  11. var ButtonType = buttonTypes().type;
  12. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  13. import { initDefaultProps, getComponentFromProp, getClass, getStyle, mergeProps, getListeners } from '../_util/props-util';
  14. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  15. var mousePosition = null;
  16. // ref: https://github.com/ant-design/ant-design/issues/15795
  17. var getClickPosition = function getClickPosition(e) {
  18. mousePosition = {
  19. x: e.pageX,
  20. y: e.pageY
  21. };
  22. // 100ms 内发生过点击事件,则从点击位置动画展示
  23. // 否则直接 zoom 展示
  24. // 这样可以兼容非点击方式展开
  25. setTimeout(function () {
  26. return mousePosition = null;
  27. }, 100);
  28. };
  29. // 只有点击事件支持从鼠标位置动画展开
  30. if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
  31. addEventListener(document.documentElement, 'click', getClickPosition, true);
  32. }
  33. function noop() {}
  34. var modalProps = function modalProps() {
  35. var defaultProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  36. var props = {
  37. prefixCls: PropTypes.string,
  38. /** 对话框是否可见*/
  39. visible: PropTypes.bool,
  40. /** 确定按钮 loading*/
  41. confirmLoading: PropTypes.bool,
  42. /** 标题*/
  43. title: PropTypes.any,
  44. /** 是否显示右上角的关闭按钮*/
  45. closable: PropTypes.bool,
  46. closeIcon: PropTypes.any,
  47. /** 点击确定回调*/
  48. // onOk: (e: React.MouseEvent<any>) => void,
  49. /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
  50. // onCancel: (e: React.MouseEvent<any>) => void,
  51. afterClose: PropTypes.func.def(noop),
  52. /** 垂直居中 */
  53. centered: PropTypes.bool,
  54. /** 宽度*/
  55. width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  56. /** 底部内容*/
  57. footer: PropTypes.any,
  58. /** 确认按钮文字*/
  59. okText: PropTypes.any,
  60. /** 确认按钮类型*/
  61. okType: ButtonType,
  62. /** 取消按钮文字*/
  63. cancelText: PropTypes.any,
  64. icon: PropTypes.any,
  65. /** 点击蒙层是否允许关闭*/
  66. maskClosable: PropTypes.bool,
  67. /** 强制渲染 Modal*/
  68. forceRender: PropTypes.bool,
  69. okButtonProps: PropTypes.object,
  70. cancelButtonProps: PropTypes.object,
  71. destroyOnClose: PropTypes.bool,
  72. wrapClassName: PropTypes.string,
  73. maskTransitionName: PropTypes.string,
  74. transitionName: PropTypes.string,
  75. getContainer: PropTypes.func,
  76. zIndex: PropTypes.number,
  77. bodyStyle: PropTypes.object,
  78. maskStyle: PropTypes.object,
  79. mask: PropTypes.bool,
  80. keyboard: PropTypes.bool,
  81. wrapProps: PropTypes.object,
  82. focusTriggerAfterClose: PropTypes.bool,
  83. dialogStyle: PropTypes.object.def(function () {
  84. return {};
  85. })
  86. };
  87. return initDefaultProps(props, defaultProps);
  88. };
  89. export var destroyFns = [];
  90. export default {
  91. name: 'AModal',
  92. inheritAttrs: false,
  93. model: {
  94. prop: 'visible',
  95. event: 'change'
  96. },
  97. props: modalProps({
  98. width: 520,
  99. transitionName: 'zoom',
  100. maskTransitionName: 'fade',
  101. confirmLoading: false,
  102. visible: false,
  103. okType: 'primary'
  104. }),
  105. data: function data() {
  106. return {
  107. sVisible: !!this.visible
  108. };
  109. },
  110. watch: {
  111. visible: function visible(val) {
  112. this.sVisible = val;
  113. }
  114. },
  115. inject: {
  116. configProvider: { 'default': function _default() {
  117. return ConfigConsumerProps;
  118. } }
  119. },
  120. // static info: ModalFunc;
  121. // static success: ModalFunc;
  122. // static error: ModalFunc;
  123. // static warn: ModalFunc;
  124. // static warning: ModalFunc;
  125. // static confirm: ModalFunc;
  126. methods: {
  127. handleCancel: function handleCancel(e) {
  128. this.$emit('cancel', e);
  129. this.$emit('change', false);
  130. },
  131. handleOk: function handleOk(e) {
  132. this.$emit('ok', e);
  133. },
  134. renderFooter: function renderFooter(locale) {
  135. var h = this.$createElement;
  136. var okType = this.okType,
  137. confirmLoading = this.confirmLoading;
  138. var cancelBtnProps = mergeProps({ on: { click: this.handleCancel } }, this.cancelButtonProps || {});
  139. var okBtnProps = mergeProps({
  140. on: { click: this.handleOk },
  141. props: {
  142. type: okType,
  143. loading: confirmLoading
  144. }
  145. }, this.okButtonProps || {});
  146. return h('div', [h(
  147. Button,
  148. cancelBtnProps,
  149. [getComponentFromProp(this, 'cancelText') || locale.cancelText]
  150. ), h(
  151. Button,
  152. okBtnProps,
  153. [getComponentFromProp(this, 'okText') || locale.okText]
  154. )]);
  155. }
  156. },
  157. render: function render() {
  158. var h = arguments[0];
  159. var customizePrefixCls = this.prefixCls,
  160. visible = this.sVisible,
  161. wrapClassName = this.wrapClassName,
  162. centered = this.centered,
  163. getContainer = this.getContainer,
  164. $slots = this.$slots,
  165. $scopedSlots = this.$scopedSlots,
  166. $attrs = this.$attrs;
  167. var children = $scopedSlots['default'] ? $scopedSlots['default']() : $slots['default'];
  168. var _configProvider = this.configProvider,
  169. getPrefixCls = _configProvider.getPrefixCls,
  170. getContextPopupContainer = _configProvider.getPopupContainer;
  171. var prefixCls = getPrefixCls('modal', customizePrefixCls);
  172. var defaultFooter = h(LocaleReceiver, {
  173. attrs: {
  174. componentName: 'Modal',
  175. defaultLocale: getConfirmLocale()
  176. },
  177. scopedSlots: { 'default': this.renderFooter }
  178. });
  179. var closeIcon = getComponentFromProp(this, 'closeIcon');
  180. var closeIconToRender = h(
  181. 'span',
  182. { 'class': prefixCls + '-close-x' },
  183. [closeIcon || h(Icon, { 'class': prefixCls + '-close-icon', attrs: { type: 'close' }
  184. })]
  185. );
  186. var footer = getComponentFromProp(this, 'footer');
  187. var title = getComponentFromProp(this, 'title');
  188. var dialogProps = {
  189. props: _extends({}, this.$props, {
  190. getContainer: getContainer === undefined ? getContextPopupContainer : getContainer,
  191. prefixCls: prefixCls,
  192. wrapClassName: classNames(_defineProperty({}, prefixCls + '-centered', !!centered), wrapClassName),
  193. title: title,
  194. footer: footer === undefined ? defaultFooter : footer,
  195. visible: visible,
  196. mousePosition: mousePosition,
  197. closeIcon: closeIconToRender
  198. }),
  199. on: _extends({}, getListeners(this), {
  200. close: this.handleCancel
  201. }),
  202. 'class': getClass(this),
  203. style: getStyle(this),
  204. attrs: $attrs
  205. };
  206. return h(
  207. Dialog,
  208. dialogProps,
  209. [children]
  210. );
  211. }
  212. };