@flatbiz/antd
Version:
253 lines (247 loc) • 9.73 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { isString } from '@dimjs/lang/is-string';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { a as _slicedToArray, b as _objectSpread2, _ as _objectWithoutProperties } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { isPromise } from '@dimjs/lang/is-promise';
import { hooks } from '@wove/react/hooks';
import { useState, useMemo } from 'react';
import { createRoot } from 'react-dom/client';
import { useSize } from 'ahooks';
import { Form, Modal } from 'antd';
import { dom } from '@flatbiz/utils';
import { B as ButtonWrapper } from './button-wrapper-l9FUsrWl.js';
import { C as ConfigProviderWrapper } from './config-provider-wrapper-DDa_64Ce.js';
import { fbaHooks } from './fba-hooks/index.js';
import { F as FlexLayout } from './flex-layout-BaDncU_Z.js';
import { createCtx } from '@wove/react/create-ctx';
import { jsx, jsxs } from 'react/jsx-runtime';
var _createCtx = createCtx(),
_createCtx2 = _slicedToArray(_createCtx, 2),
useDialogModalCtx = _createCtx2[0],
DialogModalCtxProvider = _createCtx2[1];
var _excluded = ["title", "titleExtra", "divElement", "elementId", "onOk", "onCancel", "okButtonProps", "cancelButtonProps", "content", "configProviderProps", "className", "okHidden", "cancelHidden", "footer", "cancelText", "okText", "size", "bodyHeight"];
var ModalRender = function ModalRender(props) {
var _otherProps$styles, _otherProps$styles2;
var title = props.title,
titleExtra = props.titleExtra,
divElement = props.divElement,
elementId = props.elementId,
onOk = props.onOk,
onCancel = props.onCancel,
okButtonProps = props.okButtonProps,
cancelButtonProps = props.cancelButtonProps,
content = props.content,
configProviderProps = props.configProviderProps,
className = props.className,
okHidden = props.okHidden,
cancelHidden = props.cancelHidden,
footer = props.footer,
cancelText = props.cancelText,
okText = props.okText,
size = props.size,
bodyHeight = props.bodyHeight,
otherProps = _objectWithoutProperties(props, _excluded);
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var htmlSize = useSize(document.querySelector('html'));
var screenType = fbaHooks.useResponsivePoint() || '';
var _useState3 = useState({}),
_useState4 = _slicedToArray(_useState3, 2),
footerExtraData = _useState4[0],
setFooterExtraData = _useState4[1];
var onClose = hooks.useCallbackRef(function () {
try {
delete window[elementId];
} catch (_error) {
//
}
setOpen(false);
});
fbaHooks.useEffectCustom(function () {
window[elementId] = onClose;
}, [onClose]);
var onCancelHandle = hooks.useCallbackRef(function (e) {
if (onCancel) {
var response = onCancel(form, e);
if (response && isPromise(response)) {
return response.then(onClose);
}
}
return onClose();
});
var onOkHandle = hooks.useCallbackRef(function (e) {
if (onOk) {
var response = onOk(form, e);
if (response && isPromise(response)) {
return response.then(onClose);
}
}
return onClose();
});
var onAfterClose = hooks.useCallbackRef(function () {
var _props$afterClose;
dom.removeBodyChild("#".concat(elementId));
(_props$afterClose = props.afterClose) === null || _props$afterClose === void 0 || _props$afterClose.call(props);
});
var footerNew = fbaHooks.useMemoCustom(function () {
if (footer) {
return typeof footer === 'function' ? footer(form, footerExtraData) : footer;
}
if (cancelHidden && okHidden || footer === null) {
return null;
}
return [/*#__PURE__*/jsx(ButtonWrapper, _objectSpread2(_objectSpread2({}, cancelButtonProps), {}, {
onClick: onCancelHandle,
hidden: cancelHidden,
children: cancelText || '取消'
}), "0"), /*#__PURE__*/jsx(ButtonWrapper, _objectSpread2(_objectSpread2({
type: "primary"
}, okButtonProps), {}, {
onClick: onOkHandle,
hidden: okHidden,
children: okText || '提交'
}), "1")].filter(Boolean);
}, [footerExtraData]);
var customSize = useMemo(function () {
if (!(htmlSize !== null && htmlSize !== void 0 && htmlSize.height) || !screenType) return undefined;
var isXsSm = ['xs', 'sm'].includes(screenType);
if (isXsSm) {
return {
width: '90%'
};
}
if (size == 'large') {
return {
height: (htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.height) * 0.7,
width: isXsSm ? '90%' : htmlSize.width * 0.6
};
}
if (size == 'small') {
var width = htmlSize.width * 0.3;
return {
height: (htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.height) * 0.4,
width: isXsSm ? '90%' : width < 470 ? 470 : width
};
}
if (size == 'middle') {
return {
height: (htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.height) * 0.4,
width: isXsSm ? '90%' : htmlSize.width * 0.5
};
}
return undefined;
}, [htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.height, htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.width, screenType, size]);
var classNameNew = classNames('v-dialog-modal', {
'v-dialog-modal-title-extra': !!titleExtra
}, {
'v-dialog-modal-footer-empty': !footerNew
}, className);
var rerenderFooter = function rerenderFooter(data) {
setFooterExtraData(data);
};
var bodyHeightNew = ((_otherProps$styles = otherProps.styles) === null || _otherProps$styles === void 0 || (_otherProps$styles = _otherProps$styles.body) === null || _otherProps$styles === void 0 ? void 0 : _otherProps$styles.height) || bodyHeight;
return /*#__PURE__*/jsx(DialogModalCtxProvider, {
value: {
rerenderFooter: rerenderFooter
},
children: /*#__PURE__*/jsx(ConfigProviderWrapper, _objectSpread2(_objectSpread2({}, configProviderProps), {}, {
children: /*#__PURE__*/jsx(Modal, _objectSpread2(_objectSpread2({
title: titleExtra ? /*#__PURE__*/jsxs(FlexLayout, {
direction: "horizontal",
fullIndex: 0,
children: [/*#__PURE__*/jsx("span", {
children: title
}), titleExtra]
}) : title,
maskClosable: true,
centered: true,
onCancel: onClose,
destroyOnClose: true,
width: customSize === null || customSize === void 0 ? void 0 : customSize.width
}, otherProps), {}, {
footer: footerNew,
styles: _objectSpread2(_objectSpread2({}, otherProps.styles), {}, {
body: _objectSpread2({
height: bodyHeightNew || (customSize === null || customSize === void 0 ? void 0 : customSize.height),
maxHeight: 'calc(100vh - 200px)'
}, (_otherProps$styles2 = otherProps.styles) === null || _otherProps$styles2 === void 0 ? void 0 : _otherProps$styles2.body)
}),
className: classNameNew,
open: open,
afterClose: onAfterClose,
getContainer: divElement,
children: typeof content === 'function' ? content(form, {
onClose: onClose
}) : content
}))
}))
});
};
/**
* 居中弹框
* ```
* 1. 可嵌套使用
* 2. 为什么不推荐使用
* dialogModal.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化
* 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）
* 3. 需要修改默认主题风格的场景，请使用
* const { appDialogModal } = FbaApp.useDialogModal();
* appDialogModal.open({})
* 4. size属性可使用预设的弹窗尺寸（默认值middle），如果不使用内置尺寸可设置 size = null
* ```
*/
var dialogModal = {
open: function open(props) {
var _dom$bodyAppendDivEle = dom.bodyAppendDivElement(),
divElement = _dom$bodyAppendDivEle.divElement,
elementId = _dom$bodyAppendDivEle.elementId;
window['__dialog_modal_elementId'] = elementId;
var root = createRoot(divElement);
root.render(/*#__PURE__*/jsx(ModalRender, _objectSpread2(_objectSpread2({}, props), {}, {
divElement: divElement,
elementId: elementId
})));
return {
close: function close() {
var _elementId, _ref;
(_elementId = (_ref = window)[elementId]) === null || _elementId === void 0 || _elementId.call(_ref);
}
};
},
/**
* ```
* 1. 关闭最新弹框，如果有多个弹框只能关闭最后一个
* 2. 多个弹框主动关闭，只能使用 dialogModal.open()返回值中的close
* ```
*/
close: function close() {
try {
var _window$elementId, _window;
var elementId = window['__dialog_modal_elementId'];
if (isString(elementId)) (_window$elementId = (_window = window)[elementId]) === null || _window$elementId === void 0 || _window$elementId.call(_window);
} catch (_error) {
//
}
},
/**
* ```
* 1. rerenderFooter 携带指定数据重新渲染 footer，可用于切换footer中的按钮状态
* ```
*/
useDialogModal: function useDialogModal() {
var ctx = useDialogModalCtx();
return {
/** 重新渲染 footer， data为携带的数据，是footer的第二个参数 */
rerenderFooter: function rerenderFooter(data) {
ctx.rerenderFooter(data);
}
};
}
};
export { dialogModal as d };
//# sourceMappingURL=dialog-modal-BI0jI_5f.js.map