Modal.js 8.0 KB

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