foxit-component 1.0.4-alpha.1 → 1.0.4-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Modal/Modal.d.ts +1 -0
- package/es/Modal/Modal.js +6 -6
- package/package.json +1 -1
package/es/Modal/Modal.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ interface IModalProps {
|
|
|
14
14
|
closable?: boolean;
|
|
15
15
|
okButtonProps?: Record<string, unknown>;
|
|
16
16
|
cancelButtonProps?: Record<string, unknown>;
|
|
17
|
+
footer?: React.ReactNode;
|
|
17
18
|
}
|
|
18
19
|
interface ModalComponent extends FC<IModalProps> {
|
|
19
20
|
confirm: (props: IModalProps & {
|
package/es/Modal/Modal.js
CHANGED
|
@@ -8,7 +8,7 @@ import { Modal as Modal$1 } from './ModalTemp.js';
|
|
|
8
8
|
import { Button } from '../Button/Button.js';
|
|
9
9
|
|
|
10
10
|
var ModalContent = function (_a) {
|
|
11
|
-
var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d, type = _a.type, _e = _a.closable, closable = _e === void 0 ? true : _e, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps;
|
|
11
|
+
var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d, type = _a.type, _e = _a.closable, closable = _e === void 0 ? true : _e, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer;
|
|
12
12
|
var _f = useState(false), loading = _f[0], setLoading = _f[1];
|
|
13
13
|
var _g = useState(false), cancelLoading = _g[0], setCancelLoading = _g[1];
|
|
14
14
|
var handleOk = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -54,15 +54,15 @@ var ModalContent = function (_a) {
|
|
|
54
54
|
return (jsxs("div", __assign({ className: classNames('foxit-modal-content-container', type === 'success' ? 'foxit-modal-success' : ''), style: {
|
|
55
55
|
maxWidth: "min(".concat(width, ", calc(100vw - 32px))"),
|
|
56
56
|
width: width
|
|
57
|
-
} }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), closable && (jsx("div", __assign({ onClick: onCancel, className: type === 'success' ? 'foxit-modal-success-icon' : 'foxit-modal-close-button' }, { children: type === 'success' ? (jsx(Icon, { name: "FireWorkColoursOutlined" })) : (jsx(Icon, { name: "CloseOutlined" })) })))] })), jsx("div", __assign({ className: "foxit-modal-children" }, { children: children })), jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, cancelButtonProps, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, okButtonProps, { children: onOkText })))] }))] })));
|
|
57
|
+
} }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), closable && (jsx("div", __assign({ onClick: onCancel, className: type === 'success' ? 'foxit-modal-success-icon' : 'foxit-modal-close-button' }, { children: type === 'success' ? (jsx(Icon, { name: "FireWorkColoursOutlined" })) : (jsx(Icon, { name: "CloseOutlined" })) })))] })), jsx("div", __assign({ className: "foxit-modal-children" }, { children: children })), footer && jsx("div", __assign({ className: "foxit-modal-footer" }, { children: footer })), !footer && (jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, cancelButtonProps, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, okButtonProps, { children: onOkText })))] })))] })));
|
|
58
58
|
};
|
|
59
59
|
var Modal = function (_a) {
|
|
60
|
-
var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps;
|
|
61
|
-
return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps }, { children: children })) })));
|
|
60
|
+
var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer;
|
|
61
|
+
return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, footer: footer }, { children: children })) })));
|
|
62
62
|
};
|
|
63
63
|
// 语法糖的调用方式
|
|
64
64
|
Modal.confirm = function (_a) {
|
|
65
|
-
var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps;
|
|
65
|
+
var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer;
|
|
66
66
|
var modalRoot = document.createElement('div');
|
|
67
67
|
document.body.appendChild(modalRoot);
|
|
68
68
|
var root = createRoot(modalRoot);
|
|
@@ -104,7 +104,7 @@ Modal.confirm = function (_a) {
|
|
|
104
104
|
: function () {
|
|
105
105
|
onOk === null || onOk === void 0 ? void 0 : onOk();
|
|
106
106
|
handleClose();
|
|
107
|
-
}, onOkText: onOkText, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps }, { children: content })) })));
|
|
107
|
+
}, onOkText: onOkText, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, footer: footer }, { children: content })) })));
|
|
108
108
|
};
|
|
109
109
|
|
|
110
110
|
export { Modal };
|