@lobehub/ui 5.0.1 → 5.1.1
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/Accordion/Accordion.d.mts +2 -2
- package/es/Accordion/AccordionItem.d.mts +2 -2
- package/es/ActionIcon/ActionIcon.d.mts +2 -2
- package/es/Alert/Alert.d.mts +2 -2
- package/es/AutoComplete/Select.d.mts +2 -2
- package/es/Avatar/AvatarGroup/index.d.mts +2 -2
- package/es/Burger/Burger.d.mts +2 -2
- package/es/CodeDiff/CodeDiff.d.mts +2 -2
- package/es/CodeDiff/PatchDiff.d.mts +2 -2
- package/es/CodeEditor/CodeEditor.d.mts +2 -2
- package/es/Collapse/Collapse.d.mts +2 -2
- package/es/ConfigProvider/index.d.mts +2 -2
- package/es/CopyButton/CopyButton.d.mts +2 -2
- package/es/DatePicker/DatePicker.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelBody.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelContainer.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelFooter.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelHeader.d.mts +2 -2
- package/es/DraggableSideNav/DraggableSideNav.d.mts +2 -2
- package/es/Drawer/Drawer.d.mts +2 -2
- package/es/Dropdown/Dropdown.d.mts +2 -2
- package/es/EditableText/EditableText.d.mts +2 -2
- package/es/EditorSlashMenu/atoms.d.mts +13 -13
- package/es/EmojiPicker/EmojiPicker.d.mts +2 -2
- package/es/Flex/FlexBasic.d.mts +2 -2
- package/es/FontLoader/index.d.mts +2 -2
- package/es/Footer/Footer.d.mts +2 -2
- package/es/Form/components/FormGroup.d.mts +2 -2
- package/es/Form/components/FormItem.d.mts +2 -2
- package/es/Form/components/FormSubmitFooter.d.mts +2 -2
- package/es/FormModal/FormModal.d.mts +2 -2
- package/es/Freeze/Freeze.d.mts +2 -2
- package/es/GuideCard/GuideCard.d.mts +2 -2
- package/es/Header/Header.d.mts +2 -2
- package/es/Highlighter/Highlighter.d.mts +2 -2
- package/es/Highlighter/SyntaxHighlighter/index.d.mts +2 -2
- package/es/Hotkey/Hotkey.d.mts +2 -2
- package/es/HotkeyInput/HotkeyInput.d.mts +2 -2
- package/es/Icon/Icon.d.mts +2 -2
- package/es/Icon/components/IconProvider.d.mts +3 -3
- package/es/Image/PreviewGroup.d.mts +2 -2
- package/es/ImageSelect/ImageSelect.d.mts +2 -2
- package/es/Input/Input.d.mts +2 -2
- package/es/Input/InputNumber.d.mts +2 -2
- package/es/Input/InputOPT.d.mts +2 -2
- package/es/Input/InputPassword.d.mts +2 -2
- package/es/Input/TextArea.d.mts +2 -2
- package/es/Layout/components/LayoutFooter.d.mts +2 -2
- package/es/Layout/components/LayoutHeader.d.mts +2 -2
- package/es/Layout/components/LayoutMain.d.mts +2 -2
- package/es/Layout/components/LayoutSidebar.d.mts +2 -2
- package/es/Layout/components/LayoutSidebarInner.d.mts +2 -2
- package/es/Layout/components/LayoutToc.d.mts +2 -2
- package/es/List/ListItem/index.d.mts +2 -2
- package/es/Markdown/Markdown.d.mts +2 -2
- package/es/Markdown/Typography.d.mts +2 -2
- package/es/Markdown/components/SearchResultCards/index.d.mts +2 -2
- package/es/MaskShadow/MaskShadow.d.mts +2 -2
- package/es/Menu/Menu.d.mts +2 -2
- package/es/Mermaid/Mermaid.d.mts +2 -2
- package/es/Mermaid/SyntaxMermaid/index.d.mts +2 -2
- package/es/Modal/Modal.d.mts +2 -2
- package/es/Modal/ModalProvider.d.mts +2 -2
- package/es/Modal/imperative.d.mts +2 -2
- package/es/MotionProvider/index.d.mts +2 -2
- package/es/Popover/ArrowIcon.d.mts +2 -2
- package/es/Popover/atoms.d.mts +9 -9
- package/es/Popover/context.d.mts +2 -2
- package/es/SearchBar/SearchBar.d.mts +2 -2
- package/es/Segmented/Segmented.d.mts +2 -2
- package/es/Select/Select.d.mts +2 -2
- package/es/SideNav/SideNav.d.mts +2 -2
- package/es/SliderWithInput/SliderWithInput.d.mts +2 -2
- package/es/ThemeProvider/ThemeProvider.d.mts +2 -2
- package/es/Toc/Toc.d.mts +2 -2
- package/es/Video/index.d.mts +2 -2
- package/es/awesome/AuroraBackground/AuroraBackground.d.mts +2 -2
- package/es/awesome/BottomGradientButton/BottomGradientButton.d.mts +2 -2
- package/es/awesome/Features/Features.d.mts +2 -2
- package/es/awesome/Giscus/Giscus.d.mts +2 -2
- package/es/awesome/GradientButton/GradientButton.d.mts +2 -2
- package/es/awesome/GridBackground/GridBackground.d.mts +2 -2
- package/es/awesome/GridBackground/GridShowcase.d.mts +2 -2
- package/es/awesome/Hero/Hero.d.mts +2 -2
- package/es/awesome/Spline/Spine.d.mts +2 -2
- package/es/awesome/Spotlight/Spotlight.d.mts +2 -2
- package/es/awesome/SpotlightCard/SpotlightCard.d.mts +2 -2
- package/es/awesome/TypewriterEffect/TypewriterEffect.d.mts +2 -2
- package/es/base-ui/ContextMenu/ContextMenuHost.d.mts +3 -3
- package/es/base-ui/DropdownMenu/DropdownMenu.d.mts +2 -2
- package/es/base-ui/Modal/Modal.d.mts +8 -0
- package/es/base-ui/Modal/Modal.mjs +230 -0
- package/es/base-ui/Modal/Modal.mjs.map +1 -0
- package/es/base-ui/Modal/atoms.d.mts +100 -0
- package/es/base-ui/Modal/atoms.mjs +187 -0
- package/es/base-ui/Modal/atoms.mjs.map +1 -0
- package/es/base-ui/Modal/constants.d.mts +10 -0
- package/es/base-ui/Modal/constants.mjs +27 -0
- package/es/base-ui/Modal/constants.mjs.map +1 -0
- package/es/base-ui/Modal/context.d.mts +9 -0
- package/es/base-ui/Modal/context.mjs +14 -0
- package/es/base-ui/Modal/context.mjs.map +1 -0
- package/es/base-ui/Modal/imperative.d.mts +25 -0
- package/es/base-ui/Modal/imperative.mjs +221 -0
- package/es/base-ui/Modal/imperative.mjs.map +1 -0
- package/es/base-ui/Modal/index.d.mts +6 -0
- package/es/base-ui/Modal/style.mjs +295 -0
- package/es/base-ui/Modal/style.mjs.map +1 -0
- package/es/base-ui/Modal/type.d.mts +110 -0
- package/es/base-ui/Select/Select.d.mts +2 -2
- package/es/base-ui/Select/atoms.d.mts +19 -19
- package/es/base-ui/Switch/Switch.d.mts +2 -2
- package/es/base-ui/Toast/imperative.d.mts +2 -2
- package/es/base-ui/index.d.mts +8 -1
- package/es/base-ui/index.mjs +6 -1
- package/es/brand/LobeChat/index.d.mts +2 -2
- package/es/brand/LobeHub/index.d.mts +2 -2
- package/es/brand/LogoThree/LogoSpline.d.mts +2 -2
- package/es/brand/LogoThree/index.d.mts +2 -2
- package/es/chat/BackBottom/BackBottom.d.mts +2 -2
- package/es/chat/ChatInputArea/components/ChatInputAreaInner.d.mts +2 -2
- package/es/chat/ChatItem/ChatItem.d.mts +2 -2
- package/es/chat/ChatList/ChatList.d.mts +2 -2
- package/es/chat/EditableMessage/EditableMessage.d.mts +2 -2
- package/es/chat/EditableMessageList/EditableMessageList.d.mts +2 -2
- package/es/chat/MessageInput/MessageInput.d.mts +2 -2
- package/es/chat/MessageModal/MessageModal.d.mts +2 -2
- package/es/color/ColorScales/index.d.mts +2 -2
- package/es/color/CssVar/index.d.mts +2 -2
- package/es/i18n/context.d.mts +2 -2
- package/es/icons/lucideExtra/BotPromptIcon.d.mts +2 -2
- package/es/icons/lucideExtra/CreateBotIcon.d.mts +2 -2
- package/es/icons/lucideExtra/DiscordIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GlobeOffIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GroupBotIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GroupBotSquareIcon.d.mts +3 -3
- package/es/icons/lucideExtra/LeftClickIcon.d.mts +3 -3
- package/es/icons/lucideExtra/LeftDoubleClickIcon.d.mts +3 -3
- package/es/icons/lucideExtra/McpIcon.d.mts +3 -3
- package/es/icons/lucideExtra/ProviderIcon.d.mts +3 -3
- package/es/icons/lucideExtra/RightClickIcon.d.mts +3 -3
- package/es/icons/lucideExtra/RightDoubleClickIcon.d.mts +3 -3
- package/es/icons/lucideExtra/ShapesUploadIcon.d.mts +3 -3
- package/es/icons/lucideExtra/SkillsIcon.d.mts +2 -2
- package/es/icons/lucideExtra/TreeDownRightIcon.d.mts +2 -2
- package/es/icons/lucideExtra/TreeUpDownRightIcon.d.mts +3 -3
- package/es/mdx/Mdx/index.d.mts +2 -2
- package/es/mobile/ChatHeader/ChatHeaderTitle.d.mts +2 -2
- package/es/mobile/ChatInputArea/components/ChatSendButton.d.mts +2 -2
- package/es/mobile/TabBar/TabBar.d.mts +2 -2
- package/es/storybook/StoryBook/index.d.mts +2 -2
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { TypewriterEffectProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react130 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/awesome/TypewriterEffect/TypewriterEffect.d.ts
|
|
5
|
-
declare const TypewriterEffect:
|
|
5
|
+
declare const TypewriterEffect: react130.NamedExoticComponent<TypewriterEffectProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { TypewriterEffect };
|
|
8
8
|
//# sourceMappingURL=TypewriterEffect.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as react158 from "react";
|
|
2
|
+
import * as react_jsx_runtime72 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/base-ui/ContextMenu/ContextMenuHost.d.ts
|
|
5
|
-
declare const ContextMenuHost:
|
|
5
|
+
declare const ContextMenuHost: react158.MemoExoticComponent<() => react_jsx_runtime72.JSX.Element | null>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { ContextMenuHost };
|
|
8
8
|
//# sourceMappingURL=ContextMenuHost.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DropdownMenuProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react120 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/base-ui/DropdownMenu/DropdownMenu.d.ts
|
|
5
|
-
declare const DropdownMenu:
|
|
5
|
+
declare const DropdownMenu: react120.NamedExoticComponent<DropdownMenuProps<unknown>>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { DropdownMenu };
|
|
8
8
|
//# sourceMappingURL=DropdownMenu.d.mts.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ModalComponentProps } from "./type.mjs";
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/base-ui/Modal/Modal.d.ts
|
|
5
|
+
declare const Modal: React.NamedExoticComponent<ModalComponentProps>;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { Modal };
|
|
8
|
+
//# sourceMappingURL=Modal.d.mts.map
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { stopPropagation } from "../../utils/dom.mjs";
|
|
4
|
+
import { styles } from "./style.mjs";
|
|
5
|
+
import { ModalBackdrop, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
|
|
6
|
+
import { memo, useCallback, useMemo, useRef, useState } from "react";
|
|
7
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { cx } from "antd-style";
|
|
9
|
+
import { useDragControls } from "motion/react";
|
|
10
|
+
import { Maximize2, Minimize2, X } from "lucide-react";
|
|
11
|
+
|
|
12
|
+
//#region src/base-ui/Modal/Modal.tsx
|
|
13
|
+
const OkBtn = ({ confirmLoading, okButtonProps, okText, onOk }) => {
|
|
14
|
+
const { className: userCls, danger, disabled: userDisabled, onClick: userOnClick, ...restOk } = okButtonProps ?? {};
|
|
15
|
+
return /* @__PURE__ */ jsxs("button", {
|
|
16
|
+
type: "button",
|
|
17
|
+
...restOk,
|
|
18
|
+
className: cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls),
|
|
19
|
+
disabled: confirmLoading || userDisabled,
|
|
20
|
+
onClick: (e) => {
|
|
21
|
+
onOk(e);
|
|
22
|
+
userOnClick?.(e);
|
|
23
|
+
},
|
|
24
|
+
children: [confirmLoading && /* @__PURE__ */ jsx("span", { className: styles.loadingSpinner }), okText]
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
const CancelBtn = ({ cancelButtonProps, cancelText, onCancel }) => {
|
|
28
|
+
const { className: userCls, onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};
|
|
29
|
+
return /* @__PURE__ */ jsx("button", {
|
|
30
|
+
type: "button",
|
|
31
|
+
...restCancel,
|
|
32
|
+
className: cx(styles.buttonBase, styles.cancelButton, userCls),
|
|
33
|
+
onClick: (e) => {
|
|
34
|
+
onCancel(e);
|
|
35
|
+
userOnClick?.(e);
|
|
36
|
+
},
|
|
37
|
+
children: cancelText
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
const Modal = memo(({ open, title, children, onOk, onCancel, okText = "OK", cancelText = "Cancel", okButtonProps, cancelButtonProps, confirmLoading, footer, width, height, maskClosable = true, closable = true, closeIcon, className, style, classNames, styles: semanticStyles, zIndex, afterClose, afterOpenChange, loading, getContainer, mask = true, keyboard, draggable = true, allowFullscreen = false }) => {
|
|
41
|
+
const dragControls = useDragControls();
|
|
42
|
+
const constraintsRef = useRef(null);
|
|
43
|
+
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
44
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
45
|
+
const handleOpenChange = useCallback((nextOpen, eventDetails) => {
|
|
46
|
+
if (!open) return;
|
|
47
|
+
if (!nextOpen && keyboard === false && eventDetails.reason === "escape-key") return;
|
|
48
|
+
if (!nextOpen && !maskClosable && eventDetails.reason === "outside-press") return;
|
|
49
|
+
if (!nextOpen) onCancel?.(new MouseEvent("click"));
|
|
50
|
+
}, [
|
|
51
|
+
onCancel,
|
|
52
|
+
keyboard,
|
|
53
|
+
maskClosable,
|
|
54
|
+
open
|
|
55
|
+
]);
|
|
56
|
+
const handleExitComplete = useCallback(() => {
|
|
57
|
+
setIsFullscreen(false);
|
|
58
|
+
afterClose?.();
|
|
59
|
+
afterOpenChange?.(false);
|
|
60
|
+
}, [afterClose, afterOpenChange]);
|
|
61
|
+
const handleAnimationComplete = useCallback(() => {
|
|
62
|
+
if (open) afterOpenChange?.(true);
|
|
63
|
+
}, [open, afterOpenChange]);
|
|
64
|
+
const handleDragStart = useCallback((e) => {
|
|
65
|
+
if (draggable && !isFullscreen) {
|
|
66
|
+
dragControls.start(e);
|
|
67
|
+
setIsDragging(true);
|
|
68
|
+
}
|
|
69
|
+
}, [
|
|
70
|
+
draggable,
|
|
71
|
+
dragControls,
|
|
72
|
+
isFullscreen
|
|
73
|
+
]);
|
|
74
|
+
const handleDragEnd = useCallback(() => {
|
|
75
|
+
setIsDragging(false);
|
|
76
|
+
}, []);
|
|
77
|
+
const handleOk = useCallback((e) => {
|
|
78
|
+
onOk?.(e);
|
|
79
|
+
}, [onOk]);
|
|
80
|
+
const handleCancel = useCallback((e) => {
|
|
81
|
+
onCancel?.(e);
|
|
82
|
+
}, [onCancel]);
|
|
83
|
+
const footerNode = useMemo(() => {
|
|
84
|
+
if (footer === false || footer === null) return null;
|
|
85
|
+
const cancelBtnNode = /* @__PURE__ */ jsx(CancelBtn, {
|
|
86
|
+
cancelButtonProps,
|
|
87
|
+
cancelText,
|
|
88
|
+
onCancel: handleCancel
|
|
89
|
+
});
|
|
90
|
+
const okBtnNode = /* @__PURE__ */ jsx(OkBtn, {
|
|
91
|
+
confirmLoading,
|
|
92
|
+
okButtonProps,
|
|
93
|
+
okText,
|
|
94
|
+
onOk: handleOk
|
|
95
|
+
});
|
|
96
|
+
const defaultFooter = /* @__PURE__ */ jsxs(Fragment$1, { children: [cancelBtnNode, okBtnNode] });
|
|
97
|
+
if (typeof footer === "function") {
|
|
98
|
+
const BoundCancelBtn = () => cancelBtnNode;
|
|
99
|
+
const BoundOkBtn = () => okBtnNode;
|
|
100
|
+
return footer(defaultFooter, {
|
|
101
|
+
CancelBtn: BoundCancelBtn,
|
|
102
|
+
OkBtn: BoundOkBtn
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
return footer ?? defaultFooter;
|
|
106
|
+
}, [
|
|
107
|
+
footer,
|
|
108
|
+
cancelButtonProps,
|
|
109
|
+
cancelText,
|
|
110
|
+
handleCancel,
|
|
111
|
+
confirmLoading,
|
|
112
|
+
okButtonProps,
|
|
113
|
+
okText,
|
|
114
|
+
handleOk
|
|
115
|
+
]);
|
|
116
|
+
const container = getContainer === false ? void 0 : getContainer ?? void 0;
|
|
117
|
+
const backdropZIndex = zIndex ? { zIndex } : void 0;
|
|
118
|
+
const popupZIndex = zIndex ? { zIndex: (zIndex || 1e3) + 1 } : void 0;
|
|
119
|
+
const shouldDrag = draggable && !isFullscreen;
|
|
120
|
+
const dragProps = shouldDrag ? {
|
|
121
|
+
drag: true,
|
|
122
|
+
dragConstraints: constraintsRef,
|
|
123
|
+
dragControls,
|
|
124
|
+
dragElastic: 0,
|
|
125
|
+
dragListener: false,
|
|
126
|
+
dragMomentum: false,
|
|
127
|
+
whileDrag: { cursor: "grabbing" }
|
|
128
|
+
} : {};
|
|
129
|
+
const showTitle = title !== void 0 && title !== false && title !== null;
|
|
130
|
+
const showHeader = showTitle || closable || allowFullscreen;
|
|
131
|
+
const hasHeight = height !== void 0;
|
|
132
|
+
const panelStyle = {
|
|
133
|
+
...hasHeight && !isFullscreen ? { height } : {},
|
|
134
|
+
...style
|
|
135
|
+
};
|
|
136
|
+
return /* @__PURE__ */ jsx(ModalRoot, {
|
|
137
|
+
open: open ?? false,
|
|
138
|
+
onExitComplete: handleExitComplete,
|
|
139
|
+
onOpenChange: handleOpenChange,
|
|
140
|
+
children: /* @__PURE__ */ jsxs(ModalPortal, {
|
|
141
|
+
container,
|
|
142
|
+
children: [mask && /* @__PURE__ */ jsx(ModalBackdrop, {
|
|
143
|
+
className: classNames?.mask,
|
|
144
|
+
style: {
|
|
145
|
+
...backdropZIndex,
|
|
146
|
+
...semanticStyles?.mask
|
|
147
|
+
}
|
|
148
|
+
}), /* @__PURE__ */ jsxs(ModalPopup, {
|
|
149
|
+
className: classNames?.wrapper,
|
|
150
|
+
panelClassName: cx(className, isFullscreen && styles.fullscreenPopupInner),
|
|
151
|
+
popupStyle: {
|
|
152
|
+
...popupZIndex,
|
|
153
|
+
...semanticStyles?.wrapper
|
|
154
|
+
},
|
|
155
|
+
ref: constraintsRef,
|
|
156
|
+
style: panelStyle,
|
|
157
|
+
width: isFullscreen ? void 0 : width,
|
|
158
|
+
motionProps: {
|
|
159
|
+
...dragProps,
|
|
160
|
+
onAnimationComplete: handleAnimationComplete
|
|
161
|
+
},
|
|
162
|
+
children: [
|
|
163
|
+
showHeader && /* @__PURE__ */ jsxs(ModalHeader, {
|
|
164
|
+
className: cx(classNames?.header, shouldDrag && styles.headerDraggable),
|
|
165
|
+
style: {
|
|
166
|
+
...isDragging ? { cursor: "grabbing" } : {},
|
|
167
|
+
...semanticStyles?.header
|
|
168
|
+
},
|
|
169
|
+
onPointerCancel: handleDragEnd,
|
|
170
|
+
onPointerDown: handleDragStart,
|
|
171
|
+
onPointerUp: handleDragEnd,
|
|
172
|
+
children: [showTitle ? /* @__PURE__ */ jsx(ModalTitle, {
|
|
173
|
+
className: classNames?.title,
|
|
174
|
+
style: semanticStyles?.title,
|
|
175
|
+
children: title
|
|
176
|
+
}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
|
|
177
|
+
className: styles.headerActions,
|
|
178
|
+
onPointerDown: stopPropagation,
|
|
179
|
+
children: [allowFullscreen && /* @__PURE__ */ jsx("button", {
|
|
180
|
+
"aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
|
|
181
|
+
className: styles.fullscreenToggle,
|
|
182
|
+
type: "button",
|
|
183
|
+
onClick: () => setIsFullscreen((prev) => !prev),
|
|
184
|
+
children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { size: 14 }) : /* @__PURE__ */ jsx(Maximize2, { size: 14 })
|
|
185
|
+
}), closable && /* @__PURE__ */ jsx("button", {
|
|
186
|
+
"aria-label": "Close",
|
|
187
|
+
className: styles.closeInline,
|
|
188
|
+
type: "button",
|
|
189
|
+
onClick: handleCancel,
|
|
190
|
+
children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 18 })
|
|
191
|
+
})]
|
|
192
|
+
})]
|
|
193
|
+
}),
|
|
194
|
+
/* @__PURE__ */ jsx(ModalContent, {
|
|
195
|
+
className: classNames?.body,
|
|
196
|
+
style: {
|
|
197
|
+
...hasHeight || isFullscreen ? { flex: 1 } : {},
|
|
198
|
+
...semanticStyles?.body
|
|
199
|
+
},
|
|
200
|
+
children: loading ? /* @__PURE__ */ jsx("div", {
|
|
201
|
+
style: {
|
|
202
|
+
display: "flex",
|
|
203
|
+
justifyContent: "center",
|
|
204
|
+
padding: "32px 0"
|
|
205
|
+
},
|
|
206
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
207
|
+
className: styles.loadingSpinner,
|
|
208
|
+
style: {
|
|
209
|
+
height: 24,
|
|
210
|
+
width: 24
|
|
211
|
+
}
|
|
212
|
+
})
|
|
213
|
+
}) : children
|
|
214
|
+
}),
|
|
215
|
+
footerNode !== null && /* @__PURE__ */ jsx(ModalFooter, {
|
|
216
|
+
className: classNames?.footer,
|
|
217
|
+
style: semanticStyles?.footer,
|
|
218
|
+
children: footerNode
|
|
219
|
+
})
|
|
220
|
+
]
|
|
221
|
+
})]
|
|
222
|
+
})
|
|
223
|
+
});
|
|
224
|
+
});
|
|
225
|
+
Modal.displayName = "Modal";
|
|
226
|
+
var Modal_default = Modal;
|
|
227
|
+
|
|
228
|
+
//#endregion
|
|
229
|
+
export { Modal_default as default };
|
|
230
|
+
//# sourceMappingURL=Modal.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.mjs","names":["OkBtn: React.FC<OkBtnProps>","CancelBtn: React.FC<CancelBtnProps>","BoundCancelBtn: React.FC","BoundOkBtn: React.FC","panelStyle: React.CSSProperties"],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\n\nimport {\n ModalBackdrop,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n confirmLoading?: boolean;\n okButtonProps?: ModalComponentProps['okButtonProps'];\n okText?: React.ReactNode;\n onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n const {\n className: userCls,\n danger,\n disabled: userDisabled,\n onClick: userOnClick,\n ...restOk\n } = okButtonProps ?? {};\n return (\n <button\n type=\"button\"\n {...restOk}\n className={cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls)}\n disabled={confirmLoading || userDisabled}\n onClick={(e) => {\n onOk(e);\n userOnClick?.(e);\n }}\n >\n {confirmLoading && <span className={styles.loadingSpinner} />}\n {okText}\n </button>\n );\n};\ninterface CancelBtnProps {\n cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n cancelText?: React.ReactNode;\n onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n const { className: userCls, onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n return (\n <button\n type=\"button\"\n {...restCancel}\n className={cx(styles.buttonBase, styles.cancelButton, userCls)}\n onClick={(e) => {\n onCancel(e);\n userOnClick?.(e);\n }}\n >\n {cancelText}\n </button>\n );\n};\n\nconst Modal = memo<ModalComponentProps>(\n ({\n open,\n title,\n children,\n onOk,\n onCancel,\n okText = 'OK',\n cancelText = 'Cancel',\n okButtonProps,\n cancelButtonProps,\n confirmLoading,\n footer,\n width,\n height,\n maskClosable = true,\n closable = true,\n closeIcon,\n className,\n style,\n classNames,\n styles: semanticStyles,\n zIndex,\n afterClose,\n afterOpenChange,\n loading,\n getContainer,\n mask = true,\n keyboard,\n draggable = true,\n allowFullscreen = false,\n }) => {\n const dragControls = useDragControls();\n const constraintsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails: { reason: string }) => {\n if (!open) return;\n if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') return;\n if (!nextOpen) {\n onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n }\n },\n [onCancel, keyboard, maskClosable, open],\n );\n\n const handleExitComplete = useCallback(() => {\n setIsFullscreen(false);\n afterClose?.();\n afterOpenChange?.(false);\n }, [afterClose, afterOpenChange]);\n\n const handleAnimationComplete = useCallback(() => {\n if (open) afterOpenChange?.(true);\n }, [open, afterOpenChange]);\n\n const handleDragStart = useCallback(\n (e: PointerEvent) => {\n if (draggable && !isFullscreen) {\n dragControls.start(e);\n setIsDragging(true);\n }\n },\n [draggable, dragControls, isFullscreen],\n );\n\n const handleDragEnd = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n const handleOk = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onOk?.(e);\n },\n [onOk],\n );\n\n const handleCancel = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onCancel?.(e);\n },\n [onCancel],\n );\n\n const footerNode = useMemo(() => {\n if (footer === false || footer === null) return null;\n const cancelBtnNode = (\n <CancelBtn\n cancelButtonProps={cancelButtonProps}\n cancelText={cancelText}\n onCancel={handleCancel}\n />\n );\n const okBtnNode = (\n <OkBtn\n confirmLoading={confirmLoading}\n okButtonProps={okButtonProps}\n okText={okText}\n onOk={handleOk}\n />\n );\n const defaultFooter = (\n <>\n {cancelBtnNode}\n {okBtnNode}\n </>\n );\n\n if (typeof footer === 'function') {\n const BoundCancelBtn: React.FC = () => cancelBtnNode;\n const BoundOkBtn: React.FC = () => okBtnNode;\n return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n }\n\n return footer ?? defaultFooter;\n }, [\n footer,\n cancelButtonProps,\n cancelText,\n handleCancel,\n confirmLoading,\n okButtonProps,\n okText,\n handleOk,\n ]);\n\n const container = getContainer === false ? undefined : (getContainer ?? undefined);\n const backdropZIndex = zIndex ? { zIndex } : undefined;\n const popupZIndex = zIndex ? { zIndex: (zIndex || 1000) + 1 } : undefined;\n\n const shouldDrag = draggable && !isFullscreen;\n const dragProps = shouldDrag\n ? {\n drag: true as const,\n dragConstraints: constraintsRef,\n dragControls,\n dragElastic: 0,\n dragListener: false,\n dragMomentum: false,\n whileDrag: { cursor: 'grabbing' as const },\n }\n : {};\n\n const showTitle = title !== undefined && title !== false && title !== null;\n const showHeader = showTitle || closable || allowFullscreen;\n\n const hasHeight = height !== undefined;\n const panelStyle: React.CSSProperties = {\n ...(hasHeight && !isFullscreen ? { height } : {}),\n ...style,\n };\n\n return (\n <ModalRoot\n open={open ?? false}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal container={container}>\n {mask && (\n <ModalBackdrop\n className={classNames?.mask}\n style={{ ...backdropZIndex, ...semanticStyles?.mask }}\n />\n )}\n <ModalPopup\n className={classNames?.wrapper}\n panelClassName={cx(className, isFullscreen && styles.fullscreenPopupInner)}\n popupStyle={{ ...popupZIndex, ...semanticStyles?.wrapper }}\n ref={constraintsRef}\n style={panelStyle}\n width={isFullscreen ? undefined : width}\n motionProps={{\n ...dragProps,\n onAnimationComplete: handleAnimationComplete,\n }}\n >\n {showHeader && (\n <ModalHeader\n className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n style={{\n ...(isDragging ? { cursor: 'grabbing' } : {}),\n ...semanticStyles?.header,\n }}\n onPointerCancel={handleDragEnd}\n onPointerDown={handleDragStart}\n onPointerUp={handleDragEnd}\n >\n {showTitle ? (\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n ) : (\n <span />\n )}\n <div className={styles.headerActions} onPointerDown={stopPropagation}>\n {allowFullscreen && (\n <button\n aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n className={styles.fullscreenToggle}\n type=\"button\"\n onClick={() => setIsFullscreen((prev) => !prev)}\n >\n {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n </button>\n )}\n {closable && (\n <button\n aria-label=\"Close\"\n className={styles.closeInline}\n type=\"button\"\n onClick={handleCancel}\n >\n {closeIcon ?? <X size={18} />}\n </button>\n )}\n </div>\n </ModalHeader>\n )}\n <ModalContent\n className={classNames?.body}\n style={{\n ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n ...semanticStyles?.body,\n }}\n >\n {loading ? (\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n padding: '32px 0',\n }}\n >\n <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n </div>\n ) : (\n children\n )}\n </ModalContent>\n {footerNode !== null && (\n <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n {footerNode}\n </ModalFooter>\n )}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as react_jsx_runtime46 from "react/jsx-runtime";
|
|
3
|
+
import { Dialog } from "@base-ui/react/dialog";
|
|
4
|
+
|
|
5
|
+
//#region src/base-ui/Modal/atoms.d.ts
|
|
6
|
+
interface ModalAnimationActions {
|
|
7
|
+
onExitComplete: () => void;
|
|
8
|
+
}
|
|
9
|
+
declare const useModalOpen: () => boolean | null;
|
|
10
|
+
declare const useModalActions: () => ModalAnimationActions | null;
|
|
11
|
+
type ModalRootProps = Dialog.Root.Props & {
|
|
12
|
+
onExitComplete?: () => void;
|
|
13
|
+
};
|
|
14
|
+
declare const ModalRoot: ({
|
|
15
|
+
open,
|
|
16
|
+
onExitComplete,
|
|
17
|
+
...rest
|
|
18
|
+
}: ModalRootProps) => react_jsx_runtime46.JSX.Element;
|
|
19
|
+
type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {
|
|
20
|
+
container?: HTMLElement | null;
|
|
21
|
+
};
|
|
22
|
+
declare const ModalPortal: ({
|
|
23
|
+
container,
|
|
24
|
+
...rest
|
|
25
|
+
}: ModalPortalProps) => react_jsx_runtime46.JSX.Element;
|
|
26
|
+
type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;
|
|
27
|
+
declare const ModalViewport: ({
|
|
28
|
+
className,
|
|
29
|
+
...rest
|
|
30
|
+
}: ModalViewportProps) => react_jsx_runtime46.JSX.Element;
|
|
31
|
+
type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;
|
|
32
|
+
declare const ModalBackdrop: ({
|
|
33
|
+
className,
|
|
34
|
+
style,
|
|
35
|
+
...rest
|
|
36
|
+
}: ModalBackdropProps) => react_jsx_runtime46.JSX.Element;
|
|
37
|
+
type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {
|
|
38
|
+
motionProps?: Record<string, any>;
|
|
39
|
+
panelClassName?: string;
|
|
40
|
+
popupStyle?: React.CSSProperties;
|
|
41
|
+
width?: number | string;
|
|
42
|
+
};
|
|
43
|
+
declare const ModalPopup: ({
|
|
44
|
+
className,
|
|
45
|
+
children,
|
|
46
|
+
width,
|
|
47
|
+
style,
|
|
48
|
+
motionProps,
|
|
49
|
+
panelClassName,
|
|
50
|
+
popupStyle,
|
|
51
|
+
...rest
|
|
52
|
+
}: ModalPopupProps) => react_jsx_runtime46.JSX.Element;
|
|
53
|
+
type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
54
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
55
|
+
};
|
|
56
|
+
declare const ModalHeader: ({
|
|
57
|
+
className,
|
|
58
|
+
...rest
|
|
59
|
+
}: ModalHeaderProps) => react_jsx_runtime46.JSX.Element;
|
|
60
|
+
type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;
|
|
61
|
+
declare const ModalTitle: ({
|
|
62
|
+
className,
|
|
63
|
+
...rest
|
|
64
|
+
}: ModalTitleProps) => react_jsx_runtime46.JSX.Element;
|
|
65
|
+
type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;
|
|
66
|
+
declare const ModalDescription: React.FC<ModalDescriptionProps>;
|
|
67
|
+
type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
68
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
69
|
+
};
|
|
70
|
+
declare const ModalContent: ({
|
|
71
|
+
className,
|
|
72
|
+
...rest
|
|
73
|
+
}: ModalContentProps) => react_jsx_runtime46.JSX.Element;
|
|
74
|
+
type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
75
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
76
|
+
};
|
|
77
|
+
declare const ModalFooter: ({
|
|
78
|
+
className,
|
|
79
|
+
...rest
|
|
80
|
+
}: ModalFooterProps) => react_jsx_runtime46.JSX.Element;
|
|
81
|
+
type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;
|
|
82
|
+
declare const ModalClose: ({
|
|
83
|
+
className,
|
|
84
|
+
children,
|
|
85
|
+
...rest
|
|
86
|
+
}: ModalCloseProps) => react_jsx_runtime46.JSX.Element;
|
|
87
|
+
type ModalTriggerProps = Omit<React.ComponentPropsWithRef<typeof Dialog.Trigger>, 'children' | 'render'> & {
|
|
88
|
+
children?: React.ReactNode;
|
|
89
|
+
nativeButton?: boolean;
|
|
90
|
+
};
|
|
91
|
+
declare const ModalTrigger: ({
|
|
92
|
+
children,
|
|
93
|
+
className,
|
|
94
|
+
nativeButton,
|
|
95
|
+
ref: refProp,
|
|
96
|
+
...rest
|
|
97
|
+
}: ModalTriggerProps) => react_jsx_runtime46.JSX.Element;
|
|
98
|
+
//#endregion
|
|
99
|
+
export { ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalContent, ModalContentProps, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, useModalActions, useModalOpen };
|
|
100
|
+
//# sourceMappingURL=atoms.d.mts.map
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useMotionComponent } from "../../MotionProvider/index.mjs";
|
|
4
|
+
import { useNativeButton } from "../../hooks/useNativeButton.mjs";
|
|
5
|
+
import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
|
|
6
|
+
import { backdropTransition, modalMotionConfig } from "./constants.mjs";
|
|
7
|
+
import { styles } from "./style.mjs";
|
|
8
|
+
import { cloneElement, createContext, createElement, isValidElement, use, useCallback, useEffect, useMemo, useState } from "react";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
import { cx } from "antd-style";
|
|
11
|
+
import { AnimatePresence } from "motion/react";
|
|
12
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
13
|
+
import { mergeRefs } from "react-merge-refs";
|
|
14
|
+
import { X } from "lucide-react";
|
|
15
|
+
import { Dialog } from "@base-ui/react/dialog";
|
|
16
|
+
|
|
17
|
+
//#region src/base-ui/Modal/atoms.tsx
|
|
18
|
+
const mergeStateClassName = (base, className) => {
|
|
19
|
+
if (typeof className === "function") return (state) => cx(base, className(state));
|
|
20
|
+
return cx(base, className);
|
|
21
|
+
};
|
|
22
|
+
const ModalOpenContext = createContext(null);
|
|
23
|
+
const ModalActionsContext = createContext(null);
|
|
24
|
+
const useModalOpen = () => use(ModalOpenContext);
|
|
25
|
+
const useModalActions = () => use(ModalActionsContext);
|
|
26
|
+
const AnimatedModalRoot = ({ open, children, onExitComplete: onExitCompleteProp, ...rest }) => {
|
|
27
|
+
const [isPresent, setIsPresent] = useState(!!open);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (open) setIsPresent(true);
|
|
30
|
+
}, [open]);
|
|
31
|
+
const handleExitComplete = useCallback(() => {
|
|
32
|
+
setIsPresent(false);
|
|
33
|
+
onExitCompleteProp?.();
|
|
34
|
+
}, [onExitCompleteProp]);
|
|
35
|
+
const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);
|
|
36
|
+
if (!isPresent) return null;
|
|
37
|
+
return /* @__PURE__ */ jsx(ModalOpenContext, {
|
|
38
|
+
value: open,
|
|
39
|
+
children: /* @__PURE__ */ jsx(ModalActionsContext, {
|
|
40
|
+
value: actions,
|
|
41
|
+
children: /* @__PURE__ */ jsx(Dialog.Root, {
|
|
42
|
+
modal: true,
|
|
43
|
+
open: true,
|
|
44
|
+
...rest,
|
|
45
|
+
children
|
|
46
|
+
})
|
|
47
|
+
})
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
const ModalRoot = ({ open, onExitComplete, ...rest }) => {
|
|
51
|
+
if (open !== void 0) return /* @__PURE__ */ jsx(AnimatedModalRoot, {
|
|
52
|
+
open,
|
|
53
|
+
onExitComplete,
|
|
54
|
+
...rest
|
|
55
|
+
});
|
|
56
|
+
return /* @__PURE__ */ jsx(Dialog.Root, {
|
|
57
|
+
modal: true,
|
|
58
|
+
...rest
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
const ModalPortal = ({ container, ...rest }) => {
|
|
62
|
+
const appElement = useAppElement();
|
|
63
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, {
|
|
64
|
+
container: container ?? appElement ?? void 0,
|
|
65
|
+
...rest
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
const ModalViewport = ({ className, ...rest }) => /* @__PURE__ */ jsx(Dialog.Viewport, {
|
|
69
|
+
...rest,
|
|
70
|
+
className: mergeStateClassName(styles.viewport, className)
|
|
71
|
+
});
|
|
72
|
+
const ModalBackdrop = ({ className, style, ...rest }) => {
|
|
73
|
+
const open = useModalOpen();
|
|
74
|
+
const Motion = useMotionComponent();
|
|
75
|
+
if (open !== null) return /* @__PURE__ */ jsx(Motion.div, {
|
|
76
|
+
animate: { opacity: open ? 1 : 0 },
|
|
77
|
+
className: cx(styles.backdrop, className),
|
|
78
|
+
initial: { opacity: 0 },
|
|
79
|
+
style: {
|
|
80
|
+
...style,
|
|
81
|
+
transition: "none"
|
|
82
|
+
},
|
|
83
|
+
transition: backdropTransition
|
|
84
|
+
});
|
|
85
|
+
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
86
|
+
...rest,
|
|
87
|
+
className: mergeStateClassName(styles.backdrop, className),
|
|
88
|
+
style
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
const ModalPopup = ({ className, children, width, style, motionProps, panelClassName, popupStyle, ...rest }) => {
|
|
92
|
+
const open = useModalOpen();
|
|
93
|
+
const actions = useModalActions();
|
|
94
|
+
const Motion = useMotionComponent();
|
|
95
|
+
if (open !== null && actions) return /* @__PURE__ */ jsx(Dialog.Popup, {
|
|
96
|
+
...rest,
|
|
97
|
+
className: cx(styles.popup, className),
|
|
98
|
+
style: popupStyle,
|
|
99
|
+
children: /* @__PURE__ */ jsx(AnimatePresence, {
|
|
100
|
+
onExitComplete: actions.onExitComplete,
|
|
101
|
+
children: open ? /* @__PURE__ */ createElement(Motion.div, {
|
|
102
|
+
...modalMotionConfig,
|
|
103
|
+
...motionProps,
|
|
104
|
+
className: cx(styles.popupInner, panelClassName),
|
|
105
|
+
key: "modal-popup-panel",
|
|
106
|
+
style: {
|
|
107
|
+
maxWidth: width ?? void 0,
|
|
108
|
+
transition: "none",
|
|
109
|
+
...style
|
|
110
|
+
}
|
|
111
|
+
}, children) : null
|
|
112
|
+
})
|
|
113
|
+
});
|
|
114
|
+
return /* @__PURE__ */ jsx(Dialog.Popup, {
|
|
115
|
+
...rest,
|
|
116
|
+
className: mergeStateClassName(styles.popup, className),
|
|
117
|
+
style: popupStyle,
|
|
118
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
119
|
+
className: cx(styles.popupInner, panelClassName),
|
|
120
|
+
style: {
|
|
121
|
+
maxWidth: width ?? void 0,
|
|
122
|
+
...style
|
|
123
|
+
},
|
|
124
|
+
children
|
|
125
|
+
})
|
|
126
|
+
});
|
|
127
|
+
};
|
|
128
|
+
const ModalHeader = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
|
|
129
|
+
...rest,
|
|
130
|
+
className: cx(styles.header, className)
|
|
131
|
+
});
|
|
132
|
+
const ModalTitle = ({ className, ...rest }) => /* @__PURE__ */ jsx(Dialog.Title, {
|
|
133
|
+
...rest,
|
|
134
|
+
className: mergeStateClassName(styles.title, className)
|
|
135
|
+
});
|
|
136
|
+
const ModalDescription = Dialog.Description;
|
|
137
|
+
const ModalContent = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
|
|
138
|
+
...rest,
|
|
139
|
+
className: cx(styles.content, className)
|
|
140
|
+
});
|
|
141
|
+
const ModalFooter = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
|
|
142
|
+
...rest,
|
|
143
|
+
className: cx(styles.footer, className)
|
|
144
|
+
});
|
|
145
|
+
const ModalClose = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(Dialog.Close, {
|
|
146
|
+
...rest,
|
|
147
|
+
className: mergeStateClassName(styles.close, className),
|
|
148
|
+
children: children ?? /* @__PURE__ */ jsx(X, { size: 18 })
|
|
149
|
+
});
|
|
150
|
+
const ModalTrigger = ({ children, className, nativeButton, ref: refProp, ...rest }) => {
|
|
151
|
+
const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
|
|
152
|
+
children,
|
|
153
|
+
nativeButton
|
|
154
|
+
});
|
|
155
|
+
const renderer = (props) => {
|
|
156
|
+
const resolvedProps = (() => {
|
|
157
|
+
if (isNativeButtonTriggerElement) return props;
|
|
158
|
+
const { type, ...restProps } = props;
|
|
159
|
+
return restProps;
|
|
160
|
+
})();
|
|
161
|
+
return cloneElement(children, {
|
|
162
|
+
...mergeProps(children.props, resolvedProps),
|
|
163
|
+
ref: mergeRefs([
|
|
164
|
+
children.ref,
|
|
165
|
+
props.ref,
|
|
166
|
+
refProp
|
|
167
|
+
])
|
|
168
|
+
});
|
|
169
|
+
};
|
|
170
|
+
if (isValidElement(children)) return /* @__PURE__ */ jsx(Dialog.Trigger, {
|
|
171
|
+
...rest,
|
|
172
|
+
className,
|
|
173
|
+
nativeButton: resolvedNativeButton,
|
|
174
|
+
render: renderer
|
|
175
|
+
});
|
|
176
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, {
|
|
177
|
+
...rest,
|
|
178
|
+
className,
|
|
179
|
+
nativeButton: resolvedNativeButton,
|
|
180
|
+
ref: refProp,
|
|
181
|
+
children
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
//#endregion
|
|
186
|
+
export { ModalBackdrop, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, useModalActions, useModalOpen };
|
|
187
|
+
//# sourceMappingURL=atoms.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["ModalDescription: React.FC<ModalDescriptionProps>"],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n cloneElement,\n createContext,\n isValidElement,\n use,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n onExitComplete?: () => void;\n};\n\nconst AnimatedModalRoot = ({\n open,\n children,\n onExitComplete: onExitCompleteProp,\n ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n const [isPresent, setIsPresent] = useState(!!open);\n\n useEffect(() => {\n if (open) setIsPresent(true);\n }, [open]);\n\n const handleExitComplete = useCallback(() => {\n setIsPresent(false);\n onExitCompleteProp?.();\n }, [onExitCompleteProp]);\n\n const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n if (!isPresent) return null;\n\n return (\n <ModalOpenContext value={open}>\n <ModalActionsContext value={actions}>\n <Dialog.Root modal open {...rest}>\n {children}\n </Dialog.Root>\n </ModalActionsContext>\n </ModalOpenContext>\n );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n if (open !== undefined) {\n return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n }\n return <Dialog.Root modal {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n const appElement = useAppElement();\n return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n <Dialog.Viewport\n {...rest}\n className={mergeStateClassName(styles.viewport, className as any) as any}\n />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n const open = useModalOpen();\n const Motion = useMotionComponent();\n\n if (open !== null) {\n return (\n <Motion.div\n animate={{ opacity: open ? 1 : 0 }}\n className={cx(styles.backdrop, className as string)}\n initial={{ opacity: 0 }}\n style={{ ...style, transition: 'none' }}\n transition={backdropTransition}\n />\n );\n }\n\n return (\n <Dialog.Backdrop\n {...rest}\n className={mergeStateClassName(styles.backdrop, className as any) as any}\n style={style}\n />\n );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n motionProps?: Record<string, any>;\n panelClassName?: string;\n popupStyle?: React.CSSProperties;\n width?: number | string;\n};\nexport const ModalPopup = ({\n className,\n children,\n width,\n style,\n motionProps,\n panelClassName,\n popupStyle,\n ...rest\n}: ModalPopupProps) => {\n const open = useModalOpen();\n const actions = useModalActions();\n const Motion = useMotionComponent();\n\n if (open !== null && actions) {\n return (\n <Dialog.Popup {...rest} className={cx(styles.popup, className as string)} style={popupStyle}>\n <AnimatePresence onExitComplete={actions.onExitComplete}>\n {open ? (\n <Motion.div\n {...modalMotionConfig}\n {...motionProps}\n className={cx(styles.popupInner, panelClassName)}\n key=\"modal-popup-panel\"\n style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n >\n {children}\n </Motion.div>\n ) : null}\n </AnimatePresence>\n </Dialog.Popup>\n );\n }\n\n return (\n <Dialog.Popup\n {...rest}\n className={mergeStateClassName(styles.popup, className as any) as any}\n style={popupStyle}\n >\n <div\n className={cx(styles.popupInner, panelClassName)}\n style={{ maxWidth: width ?? undefined, ...style }}\n >\n {children}\n </div>\n </Dialog.Popup>\n );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n {children ?? <X size={18} />}\n </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n 'children' | 'render'\n> & {\n children?: React.ReactNode;\n nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: ModalTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n render={renderer as any}\n />\n );\n }\n\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Dialog.Trigger>\n );\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { MotionProps } from "motion/react";
|
|
2
|
+
|
|
3
|
+
//#region src/base-ui/Modal/constants.d.ts
|
|
4
|
+
declare const modalMotionConfig: MotionProps;
|
|
5
|
+
declare const backdropTransition: {
|
|
6
|
+
duration: number;
|
|
7
|
+
};
|
|
8
|
+
//#endregion
|
|
9
|
+
export { backdropTransition, modalMotionConfig };
|
|
10
|
+
//# sourceMappingURL=constants.d.mts.map
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
//#region src/base-ui/Modal/constants.ts
|
|
2
|
+
const enterStyle = {
|
|
3
|
+
opacity: 1,
|
|
4
|
+
scale: 1
|
|
5
|
+
};
|
|
6
|
+
const initialStyle = {
|
|
7
|
+
opacity: 0,
|
|
8
|
+
scale: .96
|
|
9
|
+
};
|
|
10
|
+
const modalMotionConfig = {
|
|
11
|
+
animate: enterStyle,
|
|
12
|
+
exit: {
|
|
13
|
+
...initialStyle,
|
|
14
|
+
transition: { duration: .15 }
|
|
15
|
+
},
|
|
16
|
+
initial: initialStyle,
|
|
17
|
+
transition: {
|
|
18
|
+
damping: 20,
|
|
19
|
+
stiffness: 300,
|
|
20
|
+
type: "spring"
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
const backdropTransition = { duration: .15 };
|
|
24
|
+
|
|
25
|
+
//#endregion
|
|
26
|
+
export { backdropTransition, modalMotionConfig };
|
|
27
|
+
//# sourceMappingURL=constants.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.mjs","names":["modalMotionConfig: MotionProps"],"sources":["../../../src/base-ui/Modal/constants.ts"],"sourcesContent":["import type { MotionProps } from 'motion/react';\n\nconst enterStyle = { opacity: 1, scale: 1 };\nconst initialStyle = { opacity: 0, scale: 0.96 };\n\nexport const modalMotionConfig: MotionProps = {\n animate: enterStyle,\n exit: {\n ...initialStyle,\n transition: { duration: 0.15 },\n },\n initial: initialStyle,\n transition: {\n damping: 20,\n stiffness: 300,\n type: 'spring',\n },\n};\n\nexport const backdropTransition = { duration: 0.15 };\n"],"mappings":";AAEA,MAAM,aAAa;CAAE,SAAS;CAAG,OAAO;CAAG;AAC3C,MAAM,eAAe;CAAE,SAAS;CAAG,OAAO;CAAM;AAEhD,MAAaA,oBAAiC;CAC5C,SAAS;CACT,MAAM;EACJ,GAAG;EACH,YAAY,EAAE,UAAU,KAAM;EAC/B;CACD,SAAS;CACT,YAAY;EACV,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACF;AAED,MAAa,qBAAqB,EAAE,UAAU,KAAM"}
|