@lobehub/ui 1.1.0 → 1.3.0
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/README.md +6 -3
- package/es/ActionIcon/index.d.ts +28 -10
- package/es/ActionIcon/index.js +29 -50
- package/es/ActionIcon/style.d.ts +6 -0
- package/es/ActionIcon/style.js +12 -0
- package/es/CopyButton/index.d.ts +34 -0
- package/es/CopyButton/index.js +49 -0
- package/es/DraggablePanel/index.d.ts +64 -4
- package/es/DraggablePanel/index.js +4 -4
- package/es/DraggablePanel/style.js +1 -1
- package/es/DraggablePanel/utils.d.ts +1 -1
- package/es/EditableText/ControlInput.d.ts +9 -0
- package/es/EditableText/ControlInput.js +88 -0
- package/es/EditableText/index.d.ts +5 -0
- package/es/EditableText/index.js +35 -0
- package/es/Highlighter/SyntaxHighlighter/Prism.d.ts +7 -0
- package/es/Highlighter/SyntaxHighlighter/Prism.js +40 -0
- package/es/Highlighter/SyntaxHighlighter/index.d.ts +5 -0
- package/es/Highlighter/SyntaxHighlighter/index.js +58 -0
- package/es/Highlighter/SyntaxHighlighter/style.d.ts +5 -0
- package/es/Highlighter/SyntaxHighlighter/style.js +15 -0
- package/es/Highlighter/index.d.ts +36 -0
- package/es/Highlighter/index.js +42 -0
- package/es/Highlighter/style.d.ts +5 -0
- package/es/Highlighter/style.js +18 -0
- package/es/Icon/index.d.ts +20 -0
- package/es/Icon/index.js +36 -0
- package/es/Logo/Divider.d.ts +3 -0
- package/es/Logo/Divider.js +22 -0
- package/es/Logo/Logo3D.d.ts +3 -4
- package/es/Logo/Logo3D.js +6 -4
- package/es/Logo/LogoFlat.d.ts +3 -4
- package/es/Logo/LogoFlat.js +6 -5
- package/es/Logo/LogoHighContrast.d.ts +3 -4
- package/es/Logo/LogoHighContrast.js +6 -5
- package/es/Logo/LogoText.d.ts +3 -4
- package/es/Logo/LogoText.js +6 -4
- package/es/Logo/index.d.ts +16 -4
- package/es/Logo/index.js +53 -9
- package/es/Logo/style.d.ts +4 -0
- package/es/Logo/style.js +10 -0
- package/es/Markdown/Code.d.ts +3 -0
- package/es/Markdown/Code.js +12 -0
- package/es/Markdown/CodeBlock.d.ts +3 -0
- package/es/Markdown/CodeBlock.js +27 -0
- package/es/Markdown/index.d.ts +13 -0
- package/es/Markdown/index.js +28 -0
- package/es/Markdown/style.d.ts +4 -0
- package/es/Markdown/style.js +12 -0
- package/es/MessageInput/index.d.ts +35 -0
- package/es/MessageInput/index.js +63 -0
- package/es/SearchBar/index.d.ts +5 -0
- package/es/SearchBar/index.js +27 -0
- package/es/SideNav/index.d.ts +15 -6
- package/es/SideNav/index.js +17 -20
- package/es/SideNav/style.d.ts +1 -0
- package/es/SideNav/style.js +8 -0
- package/es/Snippet/index.d.ts +29 -0
- package/es/Snippet/index.js +39 -0
- package/es/Snippet/style.d.ts +1 -0
- package/es/Snippet/style.js +9 -0
- package/es/StroyBook/index.d.ts +17 -0
- package/es/StroyBook/index.js +47 -0
- package/es/StroyBook/style.d.ts +8 -0
- package/es/StroyBook/style.js +14 -0
- package/es/Swatches/index.d.ts +8 -0
- package/es/Swatches/index.js +44 -0
- package/es/TabsNav/index.d.ts +22 -0
- package/es/{Template → TabsNav}/index.js +14 -9
- package/es/TabsNav/style.d.ts +3 -0
- package/es/TabsNav/style.js +14 -0
- package/es/ThemeProvider/GlobalStyle.js +1 -1
- package/es/ThemeProvider/index.d.ts +15 -0
- package/es/ThemeProvider/index.js +4 -0
- package/es/ThemeSwitch/index.d.ts +27 -0
- package/es/ThemeSwitch/index.js +60 -0
- package/es/Tooltip/index.d.ts +5 -0
- package/es/Tooltip/index.js +20 -0
- package/es/Tooltip/style.d.ts +3 -0
- package/es/Tooltip/style.js +10 -0
- package/es/hooks/useCopied.d.ts +4 -0
- package/es/hooks/useCopied.js +26 -0
- package/es/hooks/useHighlight.d.ts +36 -0
- package/es/hooks/useHighlight.js +63 -0
- package/es/index.d.ts +15 -3
- package/es/index.js +14 -2
- package/es/styles/theme/base.d.ts +2 -0
- package/es/styles/theme/base.js +15 -0
- package/es/styles/theme/dark.js +6 -14
- package/es/styles/theme/light.js +11 -12
- package/es/types/index.d.ts +14 -5
- package/lib/ActionIcon/index.d.ts +28 -10
- package/lib/ActionIcon/index.js +41 -83
- package/lib/ActionIcon/style.d.ts +6 -0
- package/lib/ActionIcon/style.js +64 -0
- package/lib/CopyButton/index.d.ts +34 -0
- package/lib/CopyButton/index.js +70 -0
- package/lib/DraggablePanel/index.d.ts +64 -4
- package/lib/DraggablePanel/index.js +160 -158
- package/lib/DraggablePanel/style.js +0 -1
- package/lib/DraggablePanel/utils.d.ts +1 -1
- package/lib/EditableText/ControlInput.d.ts +9 -0
- package/lib/EditableText/ControlInput.js +101 -0
- package/lib/EditableText/index.d.ts +5 -0
- package/lib/EditableText/index.js +52 -0
- package/lib/Highlighter/SyntaxHighlighter/Prism.d.ts +7 -0
- package/lib/Highlighter/SyntaxHighlighter/Prism.js +41 -0
- package/lib/Highlighter/SyntaxHighlighter/index.d.ts +5 -0
- package/lib/Highlighter/SyntaxHighlighter/index.js +55 -0
- package/lib/Highlighter/SyntaxHighlighter/style.d.ts +5 -0
- package/lib/Highlighter/SyntaxHighlighter/style.js +58 -0
- package/lib/Highlighter/index.d.ts +36 -0
- package/lib/Highlighter/index.js +62 -0
- package/lib/Highlighter/style.d.ts +5 -0
- package/lib/Highlighter/style.js +107 -0
- package/lib/Icon/index.d.ts +20 -0
- package/lib/Icon/index.js +49 -0
- package/lib/Logo/Divider.d.ts +3 -0
- package/lib/Logo/Divider.js +41 -0
- package/lib/Logo/Logo3D.d.ts +3 -4
- package/lib/Logo/Logo3D.js +4 -14
- package/lib/Logo/LogoFlat.d.ts +3 -4
- package/lib/Logo/LogoFlat.js +18 -28
- package/lib/Logo/LogoHighContrast.d.ts +3 -4
- package/lib/Logo/LogoHighContrast.js +8 -31
- package/lib/Logo/LogoText.d.ts +3 -4
- package/lib/Logo/LogoText.js +5 -15
- package/lib/Logo/index.d.ts +16 -4
- package/lib/Logo/index.js +18 -8
- package/lib/Logo/style.d.ts +4 -0
- package/lib/Logo/style.js +41 -0
- package/lib/Markdown/Code.d.ts +3 -0
- package/lib/Markdown/Code.js +33 -0
- package/lib/Markdown/CodeBlock.d.ts +3 -0
- package/lib/Markdown/CodeBlock.js +64 -0
- package/lib/Markdown/index.d.ts +13 -0
- package/lib/Markdown/index.js +48 -0
- package/lib/Markdown/style.d.ts +4 -0
- package/lib/Markdown/style.js +64 -0
- package/lib/MessageInput/index.d.ts +35 -0
- package/lib/MessageInput/index.js +58 -0
- package/lib/SearchBar/index.d.ts +5 -0
- package/lib/SearchBar/index.js +42 -0
- package/lib/SideNav/index.d.ts +15 -6
- package/lib/SideNav/index.js +7 -31
- package/lib/SideNav/style.d.ts +1 -0
- package/lib/SideNav/style.js +46 -0
- package/lib/Snippet/index.d.ts +29 -0
- package/lib/{Template → Snippet}/index.js +16 -10
- package/lib/Snippet/style.d.ts +1 -0
- package/lib/Snippet/style.js +71 -0
- package/lib/StroyBook/index.d.ts +17 -0
- package/lib/StroyBook/index.js +65 -0
- package/lib/StroyBook/style.d.ts +8 -0
- package/lib/StroyBook/style.js +81 -0
- package/lib/Swatches/index.d.ts +8 -0
- package/lib/Swatches/index.js +68 -0
- package/lib/TabsNav/index.d.ts +22 -0
- package/lib/TabsNav/index.js +34 -0
- package/lib/TabsNav/style.d.ts +3 -0
- package/lib/TabsNav/style.js +65 -0
- package/lib/ThemeProvider/GlobalStyle.js +10 -4
- package/lib/ThemeProvider/index.d.ts +15 -0
- package/lib/ThemeProvider/index.js +1 -1
- package/lib/ThemeSwitch/index.d.ts +27 -0
- package/lib/ThemeSwitch/index.js +50 -0
- package/lib/Tooltip/index.d.ts +5 -0
- package/lib/Tooltip/index.js +34 -0
- package/lib/Tooltip/style.d.ts +3 -0
- package/lib/Tooltip/style.js +51 -0
- package/lib/hooks/useCopied.d.ts +4 -0
- package/lib/hooks/useCopied.js +44 -0
- package/lib/hooks/useHighlight.d.ts +36 -0
- package/lib/hooks/useHighlight.js +76 -0
- package/lib/index.d.ts +15 -3
- package/lib/index.js +47 -5
- package/lib/styles/theme/base.d.ts +2 -0
- package/lib/styles/theme/base.js +43 -0
- package/lib/styles/theme/dark.js +5 -12
- package/lib/styles/theme/light.js +10 -10
- package/lib/types/index.d.ts +14 -5
- package/package.json +18 -9
- package/es/Template/index.d.ts +0 -7
- package/es/ThemeProvider/token.d.ts +0 -3
- package/es/ThemeProvider/token.js +0 -45
- package/es/types/index.js +0 -1
- package/lib/Template/index.d.ts +0 -7
- package/lib/ThemeProvider/token.d.ts +0 -3
- package/lib/ThemeProvider/token.js +0 -73
- package/lib/types/index.js +0 -17
|
@@ -35,183 +35,185 @@ module.exports = __toCommonJS(DraggablePanel_exports);
|
|
|
35
35
|
var import_ahooks = require("ahooks");
|
|
36
36
|
var import_lucide_react = require("lucide-react");
|
|
37
37
|
var import_re_resizable = require("re-resizable");
|
|
38
|
-
var import_react =
|
|
38
|
+
var import_react = require("react");
|
|
39
39
|
var import_react_layout_kit = require("react-layout-kit");
|
|
40
40
|
var import_use_merge_value = __toESM(require("use-merge-value"));
|
|
41
41
|
var import_style = require("./style");
|
|
42
42
|
var import_utils = require("./utils");
|
|
43
43
|
var DEFAULT_HEIGHT = 180;
|
|
44
44
|
var DEFAULT_WIDTH = 280;
|
|
45
|
-
var DraggablePanel = (
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
45
|
+
var DraggablePanel = (0, import_react.memo)(
|
|
46
|
+
({
|
|
47
|
+
pin = "true",
|
|
48
|
+
mode = "fixed",
|
|
49
|
+
children,
|
|
50
|
+
placement = "right",
|
|
51
|
+
resize,
|
|
52
|
+
style,
|
|
53
|
+
size,
|
|
54
|
+
defaultSize: customizeDefaultSize,
|
|
55
|
+
minWidth,
|
|
56
|
+
minHeight,
|
|
57
|
+
onSizeChange,
|
|
58
|
+
onSizeDragging,
|
|
59
|
+
expandable = true,
|
|
60
|
+
expand,
|
|
61
|
+
defaultExpand = true,
|
|
62
|
+
onExpandChange,
|
|
63
|
+
className,
|
|
64
|
+
showHandlerWhenUnexpand,
|
|
65
|
+
destroyOnClose,
|
|
66
|
+
hanlderStyle
|
|
67
|
+
}) => {
|
|
68
|
+
const ref = (0, import_react.useRef)(null);
|
|
69
|
+
const isHovering = (0, import_ahooks.useHover)(ref);
|
|
70
|
+
const isVertical = placement === "top" || placement === "bottom";
|
|
71
|
+
const { styles, cx } = (0, import_style.useStyle)("draggable-panel");
|
|
72
|
+
const [isExpand, setIsExpand] = (0, import_use_merge_value.default)(defaultExpand, {
|
|
73
|
+
value: expand,
|
|
74
|
+
onChange: onExpandChange
|
|
75
|
+
});
|
|
76
|
+
(0, import_react.useEffect)(() => {
|
|
77
|
+
if (pin)
|
|
78
|
+
return;
|
|
79
|
+
if (isHovering && !isExpand) {
|
|
80
|
+
setIsExpand(true);
|
|
81
|
+
} else if (!isHovering && isExpand) {
|
|
82
|
+
setIsExpand(false);
|
|
83
|
+
}
|
|
84
|
+
}, [pin, isHovering, isExpand]);
|
|
85
|
+
const [showExpand, setShowExpand] = (0, import_react.useState)(true);
|
|
86
|
+
const canResizing = resize !== false && isExpand;
|
|
87
|
+
const resizeHandleClassNames = (0, import_react.useMemo)(() => {
|
|
88
|
+
if (!canResizing)
|
|
89
|
+
return {};
|
|
90
|
+
return {
|
|
91
|
+
[(0, import_utils.revesePlacement)(placement)]: styles[`${(0, import_utils.revesePlacement)(placement)}Handle`]
|
|
92
|
+
};
|
|
93
|
+
}, [canResizing, placement]);
|
|
94
|
+
const resizing = {
|
|
95
|
+
top: false,
|
|
96
|
+
bottom: false,
|
|
97
|
+
right: false,
|
|
98
|
+
left: false,
|
|
99
|
+
topRight: false,
|
|
100
|
+
bottomRight: false,
|
|
101
|
+
bottomLeft: false,
|
|
102
|
+
topLeft: false,
|
|
103
|
+
[(0, import_utils.revesePlacement)(placement)]: true,
|
|
104
|
+
...resize
|
|
91
105
|
};
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
bottomRight: false,
|
|
100
|
-
bottomLeft: false,
|
|
101
|
-
topLeft: false,
|
|
102
|
-
[(0, import_utils.revesePlacement)(placement)]: true,
|
|
103
|
-
...resize
|
|
104
|
-
};
|
|
105
|
-
const defaultSize = (0, import_react.useMemo)(() => {
|
|
106
|
-
if (isVertical)
|
|
106
|
+
const defaultSize = (0, import_react.useMemo)(() => {
|
|
107
|
+
if (isVertical)
|
|
108
|
+
return {
|
|
109
|
+
width: "100%",
|
|
110
|
+
height: DEFAULT_HEIGHT,
|
|
111
|
+
...customizeDefaultSize
|
|
112
|
+
};
|
|
107
113
|
return {
|
|
108
|
-
width:
|
|
109
|
-
height:
|
|
114
|
+
width: DEFAULT_WIDTH,
|
|
115
|
+
height: "100%",
|
|
110
116
|
...customizeDefaultSize
|
|
111
117
|
};
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
118
|
+
}, [isVertical]);
|
|
119
|
+
const sizeProps = isExpand ? {
|
|
120
|
+
minWidth: typeof minWidth === "number" ? Math.max(minWidth, 0) : 280,
|
|
121
|
+
minHeight: typeof minHeight === "number" ? Math.max(minHeight, 0) : void 0,
|
|
122
|
+
defaultSize,
|
|
123
|
+
size
|
|
124
|
+
} : isVertical ? {
|
|
125
|
+
minHeight: 0,
|
|
126
|
+
size: { height: 0 }
|
|
127
|
+
} : {
|
|
128
|
+
minWidth: 0,
|
|
129
|
+
size: { width: 0 }
|
|
116
130
|
};
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
case "top":
|
|
133
|
-
return { className: "Bottom", Arrow: import_lucide_react.ChevronDown };
|
|
134
|
-
case "bottom":
|
|
135
|
-
return { className: "Top", Arrow: import_lucide_react.ChevronUp };
|
|
136
|
-
case "right":
|
|
137
|
-
return { className: "Left", Arrow: import_lucide_react.ChevronLeft };
|
|
138
|
-
case "left":
|
|
139
|
-
return { className: "Right", Arrow: import_lucide_react.ChevronRight };
|
|
140
|
-
}
|
|
141
|
-
}, [styles, placement]);
|
|
142
|
-
const handler = (
|
|
143
|
-
// @ts-ignore
|
|
144
|
-
/* @__PURE__ */ import_react.default.createElement(
|
|
145
|
-
import_react_layout_kit.Center,
|
|
146
|
-
{
|
|
147
|
-
className: cx(styles[`toggle${arrowPlacement}`]),
|
|
148
|
-
style: { opacity: isExpand ? !pin ? 0 : void 0 : showHandlerWhenUnexpand ? 1 : 0 }
|
|
149
|
-
},
|
|
150
|
-
/* @__PURE__ */ import_react.default.createElement(
|
|
131
|
+
const { Arrow, className: arrowPlacement } = (0, import_react.useMemo)(() => {
|
|
132
|
+
switch (placement) {
|
|
133
|
+
case "top":
|
|
134
|
+
return { className: "Bottom", Arrow: import_lucide_react.ChevronDown };
|
|
135
|
+
case "bottom":
|
|
136
|
+
return { className: "Top", Arrow: import_lucide_react.ChevronUp };
|
|
137
|
+
case "right":
|
|
138
|
+
return { className: "Left", Arrow: import_lucide_react.ChevronLeft };
|
|
139
|
+
case "left":
|
|
140
|
+
return { className: "Right", Arrow: import_lucide_react.ChevronRight };
|
|
141
|
+
}
|
|
142
|
+
}, [styles, placement]);
|
|
143
|
+
const handler = (
|
|
144
|
+
// @ts-ignore
|
|
145
|
+
/* @__PURE__ */ React.createElement(
|
|
151
146
|
import_react_layout_kit.Center,
|
|
152
147
|
{
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
setIsExpand(!isExpand);
|
|
156
|
-
}
|
|
148
|
+
className: cx(styles[`toggle${arrowPlacement}`]),
|
|
149
|
+
style: { opacity: isExpand ? !pin ? 0 : void 0 : showHandlerWhenUnexpand ? 1 : 0 }
|
|
157
150
|
},
|
|
158
|
-
/* @__PURE__ */
|
|
159
|
-
|
|
151
|
+
/* @__PURE__ */ React.createElement(
|
|
152
|
+
import_react_layout_kit.Center,
|
|
160
153
|
{
|
|
161
|
-
|
|
162
|
-
|
|
154
|
+
style: hanlderStyle,
|
|
155
|
+
onClick: () => {
|
|
156
|
+
setIsExpand(!isExpand);
|
|
157
|
+
}
|
|
163
158
|
},
|
|
164
|
-
/* @__PURE__ */
|
|
159
|
+
/* @__PURE__ */ React.createElement(
|
|
160
|
+
"div",
|
|
161
|
+
{
|
|
162
|
+
className: styles.handlerIcon,
|
|
163
|
+
style: { transform: `rotate(${isExpand ? 180 : 0}deg)` }
|
|
164
|
+
},
|
|
165
|
+
/* @__PURE__ */ React.createElement(Arrow, { size: 16, strokeWidth: 1.5 })
|
|
166
|
+
)
|
|
165
167
|
)
|
|
166
168
|
)
|
|
167
|
-
)
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
169
|
+
);
|
|
170
|
+
const inner = (
|
|
171
|
+
// @ts-ignore
|
|
172
|
+
/* @__PURE__ */ React.createElement(
|
|
173
|
+
import_re_resizable.Resizable,
|
|
174
|
+
{
|
|
175
|
+
...sizeProps,
|
|
176
|
+
style,
|
|
177
|
+
className: styles.panel,
|
|
178
|
+
enable: canResizing ? resizing : void 0,
|
|
179
|
+
handleClasses: resizeHandleClassNames,
|
|
180
|
+
onResizeStop: (e, direction, ref2, delta) => {
|
|
181
|
+
setShowExpand(true);
|
|
182
|
+
onSizeChange == null ? void 0 : onSizeChange(delta, {
|
|
183
|
+
width: ref2.style.width,
|
|
184
|
+
height: ref2.style.height
|
|
185
|
+
});
|
|
186
|
+
},
|
|
187
|
+
onResizeStart: () => {
|
|
188
|
+
setShowExpand(false);
|
|
189
|
+
},
|
|
190
|
+
onResize: (_, direction, ref2, delta) => {
|
|
191
|
+
onSizeDragging == null ? void 0 : onSizeDragging(delta, {
|
|
192
|
+
width: ref2.style.width,
|
|
193
|
+
height: ref2.style.height
|
|
194
|
+
});
|
|
195
|
+
}
|
|
188
196
|
},
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
197
|
+
children
|
|
198
|
+
)
|
|
199
|
+
);
|
|
200
|
+
return /* @__PURE__ */ React.createElement(
|
|
201
|
+
"div",
|
|
202
|
+
{
|
|
203
|
+
ref,
|
|
204
|
+
className: cx(
|
|
205
|
+
styles.container,
|
|
206
|
+
// @ts-ignore
|
|
207
|
+
styles[mode === "fixed" ? "fixed" : `${placement}Float`],
|
|
208
|
+
className
|
|
209
|
+
),
|
|
210
|
+
style: { [`border${arrowPlacement}Width`]: 1 }
|
|
195
211
|
},
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
ref,
|
|
203
|
-
className: cx(
|
|
204
|
-
styles.container,
|
|
205
|
-
// @ts-ignore
|
|
206
|
-
styles[mode === "fixed" ? "fixed" : `${placement}Float`],
|
|
207
|
-
className
|
|
208
|
-
),
|
|
209
|
-
style: { [`border${arrowPlacement}Width`]: 1 }
|
|
210
|
-
},
|
|
211
|
-
expandable && showExpand && handler,
|
|
212
|
-
destroyOnClose ? isExpand && inner : inner
|
|
213
|
-
);
|
|
214
|
-
};
|
|
215
|
-
var DraggablePanel_default = import_react.default.memo(DraggablePanel);
|
|
212
|
+
expandable && showExpand && handler,
|
|
213
|
+
destroyOnClose ? isExpand && inner : inner
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
);
|
|
217
|
+
var DraggablePanel_default = DraggablePanel;
|
|
216
218
|
// Annotate the CommonJS export names for ESM import in node:
|
|
217
219
|
0 && (module.exports = {});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { placementType } from './index';
|
|
2
|
-
export declare const revesePlacement: (placement: placementType) => "
|
|
2
|
+
export declare const revesePlacement: (placement: placementType) => "top" | "left" | "right" | "bottom";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { InputProps } from 'antd';
|
|
3
|
+
export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
|
|
4
|
+
onChange?: (value: string) => void;
|
|
5
|
+
onValueChanging?: (value: string) => void;
|
|
6
|
+
value?: string;
|
|
7
|
+
onChangeEnd?: (value: string) => void;
|
|
8
|
+
}
|
|
9
|
+
export declare const ControlInput: import("react").NamedExoticComponent<ControlInputProps>;
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/EditableText/ControlInput.tsx
|
|
20
|
+
var ControlInput_exports = {};
|
|
21
|
+
__export(ControlInput_exports, {
|
|
22
|
+
ControlInput: () => ControlInput
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(ControlInput_exports);
|
|
25
|
+
var import_antd = require("antd");
|
|
26
|
+
var import_react = require("react");
|
|
27
|
+
var ControlInput = (0, import_react.memo)(
|
|
28
|
+
({ value, onChange, onValueChanging, onChangeEnd, ...props }) => {
|
|
29
|
+
const [input, setInput] = (0, import_react.useState)(value || "");
|
|
30
|
+
const inputRef = (0, import_react.useRef)(null);
|
|
31
|
+
const isChineseInput = (0, import_react.useRef)(false);
|
|
32
|
+
const isFocusing = (0, import_react.useRef)(false);
|
|
33
|
+
const updateValue = (0, import_react.useCallback)(() => {
|
|
34
|
+
onChange == null ? void 0 : onChange(input);
|
|
35
|
+
}, [input]);
|
|
36
|
+
(0, import_react.useEffect)(() => {
|
|
37
|
+
if (typeof value !== "undefined")
|
|
38
|
+
setInput(value);
|
|
39
|
+
}, [value]);
|
|
40
|
+
return /* @__PURE__ */ React.createElement(
|
|
41
|
+
import_antd.Input,
|
|
42
|
+
{
|
|
43
|
+
ref: inputRef,
|
|
44
|
+
...props,
|
|
45
|
+
value: input,
|
|
46
|
+
onCompositionStart: () => {
|
|
47
|
+
isChineseInput.current = true;
|
|
48
|
+
},
|
|
49
|
+
onCompositionEnd: () => {
|
|
50
|
+
isChineseInput.current = false;
|
|
51
|
+
},
|
|
52
|
+
onFocus: () => {
|
|
53
|
+
isFocusing.current = true;
|
|
54
|
+
},
|
|
55
|
+
onBlur: () => {
|
|
56
|
+
isFocusing.current = false;
|
|
57
|
+
onChangeEnd == null ? void 0 : onChangeEnd(input);
|
|
58
|
+
},
|
|
59
|
+
onChange: (e) => {
|
|
60
|
+
setInput(e.target.value);
|
|
61
|
+
onValueChanging == null ? void 0 : onValueChanging(e.target.value);
|
|
62
|
+
},
|
|
63
|
+
onPressEnter: (e) => {
|
|
64
|
+
if (!e.shiftKey && !isChineseInput.current) {
|
|
65
|
+
e.preventDefault();
|
|
66
|
+
updateValue();
|
|
67
|
+
isFocusing.current = false;
|
|
68
|
+
onChangeEnd == null ? void 0 : onChangeEnd(input);
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
suffix: value === input ? /* @__PURE__ */ React.createElement("span", null) : /* @__PURE__ */ React.createElement(import_antd.ConfigProvider, { theme: { token: { fontSize: 14 } } }, /* @__PURE__ */ React.createElement(
|
|
72
|
+
import_antd.Button,
|
|
73
|
+
{
|
|
74
|
+
type: "link",
|
|
75
|
+
size: "small",
|
|
76
|
+
onClick: () => {
|
|
77
|
+
setInput(value);
|
|
78
|
+
},
|
|
79
|
+
style: { padding: 0 }
|
|
80
|
+
},
|
|
81
|
+
"重置"
|
|
82
|
+
), /* @__PURE__ */ React.createElement(
|
|
83
|
+
import_antd.Button,
|
|
84
|
+
{
|
|
85
|
+
type: "link",
|
|
86
|
+
size: "small",
|
|
87
|
+
style: { padding: 0 },
|
|
88
|
+
onClick: () => {
|
|
89
|
+
updateValue();
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
"保存 ↵"
|
|
93
|
+
))
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
99
|
+
0 && (module.exports = {
|
|
100
|
+
ControlInput
|
|
101
|
+
});
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/EditableText/index.tsx
|
|
20
|
+
var EditableText_exports = {};
|
|
21
|
+
__export(EditableText_exports, {
|
|
22
|
+
default: () => EditableText_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(EditableText_exports);
|
|
25
|
+
var import_icons = require("@ant-design/icons");
|
|
26
|
+
var import_antd = require("antd");
|
|
27
|
+
var import_react = require("react");
|
|
28
|
+
var import_react_layout_kit = require("react-layout-kit");
|
|
29
|
+
var import_ControlInput = require("./ControlInput");
|
|
30
|
+
var EditableText = (0, import_react.memo)(({ value, onChange }) => {
|
|
31
|
+
const [edited, setEdited] = (0, import_react.useState)(false);
|
|
32
|
+
return edited ? /* @__PURE__ */ React.createElement(
|
|
33
|
+
import_ControlInput.ControlInput,
|
|
34
|
+
{
|
|
35
|
+
value,
|
|
36
|
+
onChangeEnd: () => {
|
|
37
|
+
setEdited(false);
|
|
38
|
+
},
|
|
39
|
+
onChange
|
|
40
|
+
}
|
|
41
|
+
) : /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, gap: 8 }, value, /* @__PURE__ */ React.createElement(import_antd.Tooltip, { title: "编辑" }, /* @__PURE__ */ React.createElement(
|
|
42
|
+
import_icons.EditOutlined,
|
|
43
|
+
{
|
|
44
|
+
onClick: () => {
|
|
45
|
+
setEdited(!edited);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
)));
|
|
49
|
+
});
|
|
50
|
+
var EditableText_default = EditableText;
|
|
51
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
52
|
+
0 && (module.exports = {});
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/Highlighter/SyntaxHighlighter/Prism.tsx
|
|
20
|
+
var Prism_exports = {};
|
|
21
|
+
__export(Prism_exports, {
|
|
22
|
+
Prism: () => Prism
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(Prism_exports);
|
|
25
|
+
var import_prism_react_renderer = require("prism-react-renderer");
|
|
26
|
+
var import_react = require("react");
|
|
27
|
+
var Prism = (0, import_react.memo)(({ children, language, isDarkMode }) => {
|
|
28
|
+
return /* @__PURE__ */ React.createElement(
|
|
29
|
+
import_prism_react_renderer.Highlight,
|
|
30
|
+
{
|
|
31
|
+
theme: isDarkMode ? import_prism_react_renderer.themes.jettwaveDark : import_prism_react_renderer.themes.jettwaveLight,
|
|
32
|
+
code: children,
|
|
33
|
+
language
|
|
34
|
+
},
|
|
35
|
+
({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React.createElement("pre", { className, style }, tokens.map((line, i) => /* @__PURE__ */ React.createElement("div", { key: i, ...getLineProps({ line, key: i }) }, line.map((token, key) => /* @__PURE__ */ React.createElement("span", { key: i, ...getTokenProps({ token, key }) })))))
|
|
36
|
+
);
|
|
37
|
+
});
|
|
38
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
39
|
+
0 && (module.exports = {
|
|
40
|
+
Prism
|
|
41
|
+
});
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { HighlighterProps } from '../index';
|
|
3
|
+
export declare type SyntaxHighlighterProps = Pick<HighlighterProps, 'language' | 'children' | 'theme'>;
|
|
4
|
+
declare const SyntaxHighlighter: import("react").NamedExoticComponent<SyntaxHighlighterProps>;
|
|
5
|
+
export default SyntaxHighlighter;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/Highlighter/SyntaxHighlighter/index.tsx
|
|
20
|
+
var SyntaxHighlighter_exports = {};
|
|
21
|
+
__export(SyntaxHighlighter_exports, {
|
|
22
|
+
default: () => SyntaxHighlighter_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(SyntaxHighlighter_exports);
|
|
25
|
+
var import_useHighlight = require("../../hooks/useHighlight");
|
|
26
|
+
var import_icons = require("@ant-design/icons");
|
|
27
|
+
var import_react = require("react");
|
|
28
|
+
var import_react_layout_kit = require("react-layout-kit");
|
|
29
|
+
var import_shallow = require("zustand/shallow");
|
|
30
|
+
var import_Prism = require("./Prism");
|
|
31
|
+
var import_antd_style = require("antd-style");
|
|
32
|
+
var import_style = require("./style");
|
|
33
|
+
var SyntaxHighlighter = (0, import_react.memo)(
|
|
34
|
+
({ children, language, theme: appearance }) => {
|
|
35
|
+
const { styles, theme } = (0, import_style.useStyles)();
|
|
36
|
+
const { isDarkMode } = (0, import_antd_style.useThemeMode)();
|
|
37
|
+
const isDarkTheme = appearance ? appearance === "dark" : isDarkMode;
|
|
38
|
+
const [codeToHtml, isLoading] = (0, import_useHighlight.useHighlight)((s) => [s.codeToHtml, !s.highlighter], import_shallow.shallow);
|
|
39
|
+
(0, import_react.useEffect)(() => {
|
|
40
|
+
import_useHighlight.useHighlight.getState().initHighlighter();
|
|
41
|
+
}, []);
|
|
42
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, isLoading ? /* @__PURE__ */ React.createElement("div", { className: styles.prism }, /* @__PURE__ */ React.createElement(import_Prism.Prism, { language, isDarkMode: isDarkTheme }, children)) : /* @__PURE__ */ React.createElement(
|
|
43
|
+
"div",
|
|
44
|
+
{
|
|
45
|
+
dangerouslySetInnerHTML: {
|
|
46
|
+
__html: codeToHtml(children, language, isDarkTheme) || ""
|
|
47
|
+
},
|
|
48
|
+
className: styles.shiki
|
|
49
|
+
}
|
|
50
|
+
), isLoading && /* @__PURE__ */ React.createElement(import_react_layout_kit.Center, { horizontal: true, gap: 8, className: styles.loading }, /* @__PURE__ */ React.createElement(import_icons.Loading3QuartersOutlined, { spin: true, style: { color: theme.colorTextTertiary } }), "shiki rendering..."));
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
var SyntaxHighlighter_default = SyntaxHighlighter;
|
|
54
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
55
|
+
0 && (module.exports = {});
|