@flatbiz/antd
Version:
225 lines (220 loc) • 8.61 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { isString } from '@dimjs/lang/is-string';
import { b as _objectSpread2, _ as _objectWithoutProperties, a as _slicedToArray } 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 { Form, Space, Drawer } 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 { u as useDialogDrawerCtx, C as CtxProvider } from './context-KfLOFzA0.js';
import { jsx, jsxs } from 'react/jsx-runtime';
var _excluded = ["divElement", "elementId", "onOk", "onCancel", "content", "configProviderProps", "okText", "cancelText", "okButtonExtraProps", "cancelButtonExtraProps", "operatePosition", "operateRender", "width", "okHidden", "cancelHidden", "extra"];
var ModalRender = function ModalRender(props) {
var _otherProps$styles, _otherProps$styles2;
var divElement = props.divElement,
elementId = props.elementId,
onOk = props.onOk,
onCancel = props.onCancel,
content = props.content,
configProviderProps = props.configProviderProps,
okText = props.okText,
cancelText = props.cancelText,
okButtonExtraProps = props.okButtonExtraProps,
cancelButtonExtraProps = props.cancelButtonExtraProps,
_props$operatePositio = props.operatePosition,
operatePosition = _props$operatePositio === void 0 ? 'footer' : _props$operatePositio,
operateRender = props.operateRender,
width = props.width,
okHidden = props.okHidden,
cancelHidden = props.cancelHidden,
extra = props.extra,
otherProps = _objectWithoutProperties(props, _excluded);
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
innerBodyStyle = _useState4[0],
setInnerBodyStyle = _useState4[1];
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var screenType = fbaHooks.useResponsivePoint() || '';
var _useState5 = useState({}),
_useState6 = _slicedToArray(_useState5, 2),
footerExtraData = _useState6[0],
setFooterExtraData = _useState6[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 newOperateRender = fbaHooks.useMemoCustom(function () {
if (operateRender) {
return operateRender(form, footerExtraData);
}
var okHiddenNew = okHidden || (okButtonExtraProps === null || okButtonExtraProps === void 0 ? void 0 : okButtonExtraProps.hidden);
var cancelHiddenNew = okHidden || (okButtonExtraProps === null || okButtonExtraProps === void 0 ? void 0 : okButtonExtraProps.hidden);
var operateGroup = /*#__PURE__*/jsxs(Space, {
children: [cancelHiddenNew ? null : /*#__PURE__*/jsx(ButtonWrapper, _objectSpread2(_objectSpread2({}, cancelButtonExtraProps), {}, {
onClick: onCancelHandle,
children: cancelText || '取消'
})), okHiddenNew ? null : /*#__PURE__*/jsx(ButtonWrapper, _objectSpread2(_objectSpread2({
type: "primary"
}, okButtonExtraProps), {}, {
onClick: onOkHandle,
children: okText || '提交'
}))]
});
if (!okHidden || !cancelHidden) {
return operateGroup;
}
return null;
}, [footerExtraData]);
var extraRender = typeof extra === 'function' ? extra(form) : extra;
var updateBodyStyle = function updateBodyStyle(bodyStyle) {
setInnerBodyStyle(bodyStyle);
};
var customSize = useMemo(function () {
if (!screenType) return undefined;
if (['xs', 'sm'].includes(screenType)) {
return {
width: '90%',
maxWidth: '90%'
};
}
if (width) {
return {
width: width,
maxWidth: 'calc(100% - 200px)'
};
}
return {
width: '40%',
maxWidth: 'calc(100% - 200px)'
};
}, [screenType, width]);
var rerenderFooter = function rerenderFooter(data) {
setFooterExtraData(data);
};
return /*#__PURE__*/jsx(CtxProvider, {
value: {
onClose: onClose,
updateBodyStyle: updateBodyStyle,
rerenderFooter: rerenderFooter
},
children: /*#__PURE__*/jsx(ConfigProviderWrapper, _objectSpread2(_objectSpread2({}, configProviderProps), {}, {
children: /*#__PURE__*/jsx(Drawer, _objectSpread2(_objectSpread2({
maskClosable: true,
destroyOnClose: true,
onClose: onClose,
footer: operatePosition === 'footer' ? newOperateRender : null
}, otherProps), {}, {
width: customSize === null || customSize === void 0 ? void 0 : customSize.width,
styles: _objectSpread2(_objectSpread2({}, otherProps.styles), {}, {
body: _objectSpread2(_objectSpread2({}, innerBodyStyle), (_otherProps$styles = otherProps.styles) === null || _otherProps$styles === void 0 ? void 0 : _otherProps$styles.body),
wrapper: _objectSpread2({
maxWidth: customSize === null || customSize === void 0 ? void 0 : customSize.maxWidth
}, (_otherProps$styles2 = otherProps.styles) === null || _otherProps$styles2 === void 0 ? void 0 : _otherProps$styles2.wrapper)
}),
extra: operatePosition === 'header' ? newOperateRender : extraRender,
open: open,
getContainer: divElement,
children: typeof content === 'function' ? content(form, {
onClose: onClose
}) : content
}))
}))
});
};
/**
* 抽屉弹框
* ```
* 1. 可嵌套使用
* 2. 为什么不推荐使用
* dialogDrawer.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化
* 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）
* 3. 需要修改默认主题风格的场景，请使用
* const { appDialogDrawer } = FbaApp.useDialogDrawer();
* appDialogDrawer.open({})
* ```
*/
var dialogDrawer = {
open: function open(props) {
var _dom$bodyAppendDivEle = dom.bodyAppendDivElement(),
divElement = _dom$bodyAppendDivEle.divElement,
elementId = _dom$bodyAppendDivEle.elementId;
window['__dialog_drawer_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. 多个弹框主动关闭，只能使用 dialogDrawer.open()返回值中的close
* ```
*/
close: function close() {
try {
var _window$elementId, _window;
var elementId = window['__dialog_drawer_elementId'];
if (isString(elementId)) (_window$elementId = (_window = window)[elementId]) === null || _window$elementId === void 0 || _window$elementId.call(_window);
} catch (_error) {
//
}
},
/**
* ```
* 1. rerenderFooter 携带指定数据重新渲染 footer，可用于切换footer中的按钮状态
* ```
*/
useDialogDrawer: function useDialogDrawer() {
var ctx = useDialogDrawerCtx();
return {
/** 重新渲染 footer， data为携带的数据，是footer的第二个参数 */
rerenderFooter: function rerenderFooter(data) {
ctx.rerenderFooter(data);
}
};
}
};
export { dialogDrawer as d };
//# sourceMappingURL=dialog-drawer-D7lYByyr.js.map