Modal.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.modalProps = exports.destroyFns = exports.default = void 0;
  7. var _vue = require("vue");
  8. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  11. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  12. var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
  13. var _vcDialog = _interopRequireDefault(require("../vc-dialog"));
  14. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  15. var _addEventListener = _interopRequireDefault(require("../vc-util/Dom/addEventListener"));
  16. var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseOutlined"));
  17. var _button = _interopRequireDefault(require("../button"));
  18. var _buttonTypes = require("../button/buttonTypes");
  19. var _LocaleReceiver = require("../locale-provider/LocaleReceiver");
  20. var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
  21. var _styleChecker = require("../_util/styleChecker");
  22. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  23. var _transition = require("../_util/transition");
  24. var _excluded = ["prefixCls", "visible", "wrapClassName", "centered", "getContainer", "closeIcon", "focusTriggerAfterClose"];
  25. var mousePosition = null;
  26. // ref: https://github.com/ant-design/ant-design/issues/15795
  27. var getClickPosition = function getClickPosition(e) {
  28. mousePosition = {
  29. x: e.pageX,
  30. y: e.pageY
  31. };
  32. // 100ms 内发生过点击事件,则从点击位置动画展示
  33. // 否则直接 zoom 展示
  34. // 这样可以兼容非点击方式展开
  35. setTimeout(function () {
  36. return mousePosition = null;
  37. }, 100);
  38. };
  39. // 只有点击事件支持从鼠标位置动画展开
  40. if ((0, _styleChecker.canUseDocElement)()) {
  41. (0, _addEventListener.default)(document.documentElement, 'click', getClickPosition, true);
  42. }
  43. var modalProps = function modalProps() {
  44. return {
  45. prefixCls: String,
  46. visible: {
  47. type: Boolean,
  48. default: undefined
  49. },
  50. confirmLoading: {
  51. type: Boolean,
  52. default: undefined
  53. },
  54. title: _vueTypes.default.any,
  55. closable: {
  56. type: Boolean,
  57. default: undefined
  58. },
  59. closeIcon: _vueTypes.default.any,
  60. onOk: Function,
  61. onCancel: Function,
  62. 'onUpdate:visible': Function,
  63. onChange: Function,
  64. afterClose: Function,
  65. centered: {
  66. type: Boolean,
  67. default: undefined
  68. },
  69. width: [String, Number],
  70. footer: _vueTypes.default.any,
  71. okText: _vueTypes.default.any,
  72. okType: String,
  73. cancelText: _vueTypes.default.any,
  74. icon: _vueTypes.default.any,
  75. maskClosable: {
  76. type: Boolean,
  77. default: undefined
  78. },
  79. forceRender: {
  80. type: Boolean,
  81. default: undefined
  82. },
  83. okButtonProps: Object,
  84. cancelButtonProps: Object,
  85. destroyOnClose: {
  86. type: Boolean,
  87. default: undefined
  88. },
  89. wrapClassName: String,
  90. maskTransitionName: String,
  91. transitionName: String,
  92. getContainer: {
  93. type: [String, Function, Boolean, Object],
  94. default: undefined
  95. },
  96. zIndex: Number,
  97. bodyStyle: {
  98. type: Object,
  99. default: undefined
  100. },
  101. maskStyle: {
  102. type: Object,
  103. default: undefined
  104. },
  105. mask: {
  106. type: Boolean,
  107. default: undefined
  108. },
  109. keyboard: {
  110. type: Boolean,
  111. default: undefined
  112. },
  113. wrapProps: Object,
  114. focusTriggerAfterClose: {
  115. type: Boolean,
  116. default: undefined
  117. },
  118. modalRender: Function
  119. };
  120. };
  121. exports.modalProps = modalProps;
  122. var destroyFns = [];
  123. exports.destroyFns = destroyFns;
  124. var _default2 = (0, _vue.defineComponent)({
  125. compatConfig: {
  126. MODE: 3
  127. },
  128. name: 'AModal',
  129. inheritAttrs: false,
  130. props: (0, _initDefaultProps.default)(modalProps(), {
  131. width: 520,
  132. transitionName: 'zoom',
  133. maskTransitionName: 'fade',
  134. confirmLoading: false,
  135. visible: false,
  136. okType: 'primary'
  137. }),
  138. setup: function setup(props, _ref) {
  139. var emit = _ref.emit,
  140. slots = _ref.slots,
  141. attrs = _ref.attrs;
  142. var _useLocaleReceiver = (0, _LocaleReceiver.useLocaleReceiver)('Modal'),
  143. _useLocaleReceiver2 = (0, _slicedToArray2.default)(_useLocaleReceiver, 1),
  144. locale = _useLocaleReceiver2[0];
  145. var _useConfigInject = (0, _useConfigInject2.default)('modal', props),
  146. prefixCls = _useConfigInject.prefixCls,
  147. rootPrefixCls = _useConfigInject.rootPrefixCls,
  148. direction = _useConfigInject.direction,
  149. getPopupContainer = _useConfigInject.getPopupContainer;
  150. var handleCancel = function handleCancel(e) {
  151. emit('update:visible', false);
  152. emit('cancel', e);
  153. emit('change', false);
  154. };
  155. var handleOk = function handleOk(e) {
  156. emit('ok', e);
  157. };
  158. var renderFooter = function renderFooter() {
  159. var _slots$okText, _slots$cancelText;
  160. var _props$okText = props.okText,
  161. okText = _props$okText === void 0 ? (_slots$okText = slots.okText) === null || _slots$okText === void 0 ? void 0 : _slots$okText.call(slots) : _props$okText,
  162. okType = props.okType,
  163. _props$cancelText = props.cancelText,
  164. cancelText = _props$cancelText === void 0 ? (_slots$cancelText = slots.cancelText) === null || _slots$cancelText === void 0 ? void 0 : _slots$cancelText.call(slots) : _props$cancelText,
  165. confirmLoading = props.confirmLoading;
  166. return (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_button.default, (0, _objectSpread2.default)({
  167. "onClick": handleCancel
  168. }, props.cancelButtonProps), {
  169. default: function _default() {
  170. return [cancelText || locale.value.cancelText];
  171. }
  172. }), (0, _vue.createVNode)(_button.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _buttonTypes.convertLegacyProps)(okType)), {}, {
  173. "loading": confirmLoading,
  174. "onClick": handleOk
  175. }, props.okButtonProps), {
  176. default: function _default() {
  177. return [okText || locale.value.okText];
  178. }
  179. })]);
  180. };
  181. return function () {
  182. var _slots$closeIcon, _classNames;
  183. var customizePrefixCls = props.prefixCls,
  184. visible = props.visible,
  185. wrapClassName = props.wrapClassName,
  186. centered = props.centered,
  187. getContainer = props.getContainer,
  188. _props$closeIcon = props.closeIcon,
  189. _closeIcon = _props$closeIcon === void 0 ? (_slots$closeIcon = slots.closeIcon) === null || _slots$closeIcon === void 0 ? void 0 : _slots$closeIcon.call(slots) : _props$closeIcon,
  190. _props$focusTriggerAf = props.focusTriggerAfterClose,
  191. focusTriggerAfterClose = _props$focusTriggerAf === void 0 ? true : _props$focusTriggerAf,
  192. restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  193. var wrapClassNameExtended = (0, _classNames2.default)(wrapClassName, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-centered"), !!centered), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-wrap-rtl"), direction.value === 'rtl'), _classNames));
  194. return (0, _vue.createVNode)(_vcDialog.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), attrs), {}, {
  195. "getContainer": getContainer || getPopupContainer.value,
  196. "prefixCls": prefixCls.value,
  197. "wrapClassName": wrapClassNameExtended,
  198. "visible": visible,
  199. "mousePosition": mousePosition,
  200. "onClose": handleCancel,
  201. "focusTriggerAfterClose": focusTriggerAfterClose,
  202. "transitionName": (0, _transition.getTransitionName)(rootPrefixCls.value, 'zoom', props.transitionName),
  203. "maskTransitionName": (0, _transition.getTransitionName)(rootPrefixCls.value, 'fade', props.maskTransitionName)
  204. }), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, slots), {}, {
  205. footer: slots.footer || renderFooter,
  206. closeIcon: function closeIcon() {
  207. return (0, _vue.createVNode)("span", {
  208. "class": "".concat(prefixCls.value, "-close-x")
  209. }, [_closeIcon || (0, _vue.createVNode)(_CloseOutlined.default, {
  210. "class": "".concat(prefixCls.value, "-close-icon")
  211. }, null)]);
  212. }
  213. }));
  214. };
  215. }
  216. });
  217. exports.default = _default2;