@lobehub/ui 1.157.1 → 1.158.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/es/A/index.js +2 -2
- package/es/ActionIcon/index.js +11 -15
- package/es/ActionIconGroup/index.js +45 -47
- package/es/Alert/index.js +43 -50
- package/es/Avatar/index.js +10 -12
- package/es/Burger/index.js +30 -35
- package/es/CodeEditor/index.js +38 -41
- package/es/Collapse/index.js +3 -3
- package/es/ColorScales/ScaleRow.js +39 -43
- package/es/ColorScales/index.js +57 -59
- package/es/ConfigProvider/index.js +3 -5
- package/es/ContextMenu/index.js +2 -3
- package/es/CopyButton/index.js +3 -4
- package/es/DraggablePanel/components/DraggablePanelBody.js +2 -3
- package/es/DraggablePanel/components/DraggablePanelContainer.js +2 -3
- package/es/DraggablePanel/components/DraggablePanelFooter.js +2 -3
- package/es/DraggablePanel/components/DraggablePanelHeader.js +5 -9
- package/es/DraggablePanel/index.js +28 -35
- package/es/EditableText/index.js +13 -16
- package/es/EmojiPicker/AvatarUploader.js +60 -71
- package/es/EmojiPicker/index.js +101 -110
- package/es/EmptyCard/index.js +23 -31
- package/es/FileTypeIcon/index.js +44 -55
- package/es/FluentEmoji/index.js +4 -6
- package/es/Footer/index.js +8 -10
- package/es/Form/components/FormDivider.js +2 -2
- package/es/Form/components/FormFlatGroup.js +4 -9
- package/es/Form/components/FormFooter.js +3 -6
- package/es/Form/components/FormGroup.js +15 -21
- package/es/Form/components/FormItem.js +10 -17
- package/es/Form/components/FormTitle.js +15 -23
- package/es/Form/index.js +26 -30
- package/es/FormModal/index.js +30 -34
- package/es/Grid/index.js +3 -6
- package/es/Header/index.js +49 -65
- package/es/Highlighter/FullFeatured.js +41 -51
- package/es/Highlighter/SyntaxHighlighter/index.js +19 -30
- package/es/Highlighter/index.js +19 -29
- package/es/Icon/icons/DiscordIcon.js +2 -3
- package/es/Icon/index.js +13 -16
- package/es/Image/ImageGallery.js +3 -5
- package/es/Image/Preview.js +5 -6
- package/es/Image/index.js +34 -38
- package/es/Image/usePreview.js +33 -37
- package/es/Img/index.js +2 -2
- package/es/Input/index.js +3 -3
- package/es/Layout/index.js +35 -63
- package/es/List/ListItem/index.js +53 -67
- package/es/Markdown/CodeBlock.js +10 -16
- package/es/Markdown/Typography.js +3 -6
- package/es/Markdown/index.js +18 -22
- package/es/MaterialFileTypeIcon/index.js +17 -20
- package/es/MaterialFileTypeIcon/utils.d.ts +2 -2
- package/es/Mermaid/FullFeatured.js +35 -45
- package/es/Mermaid/index.js +17 -26
- package/es/Mermaid/useMermaid.d.ts +2 -1
- package/es/Mermaid/useMermaid.js +3 -5
- package/es/Modal/index.js +48 -60
- package/es/SearchBar/index.js +48 -52
- package/es/SelectWithImg/index.js +34 -40
- package/es/SideNav/index.js +15 -22
- package/es/SliderWithInput/index.js +35 -38
- package/es/Snippet/index.js +10 -15
- package/es/SortableList/DragHandle.js +3 -3
- package/es/SortableList/SortableItem.js +16 -19
- package/es/SortableList/SortableOverlay.js +3 -5
- package/es/SortableList/index.js +15 -23
- package/es/Swatches/index.js +18 -20
- package/es/TabsNav/index.js +2 -3
- package/es/Tag/index.js +7 -12
- package/es/ThemeProvider/Meta.js +53 -58
- package/es/ThemeProvider/index.js +17 -23
- package/es/ThemeSwitch/index.js +15 -19
- package/es/Toc/TocMobile.js +47 -52
- package/es/Toc/index.js +8 -13
- package/es/Tooltip/index.js +2 -3
- package/es/Video/index.js +41 -47
- package/es/awesome/AuroraBackground/index.js +11 -18
- package/es/awesome/Features/Item.js +37 -45
- package/es/awesome/Features/index.js +5 -4
- package/es/awesome/GaussianBackground/index.js +8 -13
- package/es/awesome/GaussianBackground/useGaussianBackground.d.ts +1 -1
- package/es/awesome/GaussianBackground/useGaussianBackground.js +1 -1
- package/es/awesome/Giscus/index.js +13 -15
- package/es/awesome/GradientButton/index.js +5 -9
- package/es/awesome/GridBackground/Grid.js +49 -61
- package/es/awesome/GridBackground/GridShowcase.js +24 -28
- package/es/awesome/GridBackground/index.js +27 -33
- package/es/awesome/Hero/index.js +63 -74
- package/es/awesome/Spline/ParentSize.js +7 -8
- package/es/awesome/Spline/index.js +10 -13
- package/es/awesome/Spotlight/index.js +3 -4
- package/es/awesome/SpotlightCard/SpotlightCardItem.js +5 -8
- package/es/awesome/SpotlightCard/index.js +9 -12
- package/es/brand/BrandLoading/index.js +2 -3
- package/es/brand/LobeChat/index.js +29 -38
- package/es/brand/LobeChatText/index.js +8 -13
- package/es/brand/LobeHub/index.js +29 -38
- package/es/brand/LobeHubText/index.js +4 -9
- package/es/brand/Logo3d/index.js +2 -3
- package/es/brand/LogoFlat/index.js +44 -49
- package/es/brand/LogoMono/index.js +48 -53
- package/es/brand/LogoThree/Loading.js +9 -11
- package/es/brand/LogoThree/LogoSpline.js +10 -12
- package/es/brand/LogoThree/index.js +23 -25
- package/es/brand/components/Divider.js +4 -6
- package/es/chat/BackBottom/index.js +4 -6
- package/es/chat/ChatHeader/ChatHeaderTitle.js +22 -31
- package/es/chat/ChatHeader/index.js +35 -42
- package/es/chat/ChatInputArea/ChatInputActionBar.js +16 -21
- package/es/chat/ChatInputArea/ChatInputArea.d.ts +1 -1
- package/es/chat/ChatInputArea/ChatInputArea.js +19 -23
- package/es/chat/ChatInputArea/ChatInputAreaInner.d.ts +1 -1
- package/es/chat/ChatInputArea/ChatInputAreaInner.js +2 -3
- package/es/chat/ChatInputArea/SendButton.js +36 -51
- package/es/chat/ChatItem/components/Actions.js +3 -5
- package/es/chat/ChatItem/components/Avatar.js +17 -21
- package/es/chat/ChatItem/components/BorderSpacing.js +1 -2
- package/es/chat/ChatItem/components/ErrorContent.js +9 -11
- package/es/chat/ChatItem/components/Loading.js +10 -12
- package/es/chat/ChatItem/components/MessageContent.js +6 -10
- package/es/chat/ChatItem/components/Title.js +3 -8
- package/es/chat/ChatItem/index.js +47 -53
- package/es/chat/ChatList/ActionsBar.js +2 -3
- package/es/chat/ChatList/HistoryDivider.js +6 -11
- package/es/chat/ChatList/Item.js +14 -12
- package/es/chat/ChatList/index.js +25 -29
- package/es/chat/EditableMessage/index.js +26 -32
- package/es/chat/EditableMessageList/index.js +72 -76
- package/es/chat/MessageInput/index.js +35 -43
- package/es/chat/MessageModal/index.js +41 -51
- package/es/chat/TokenTag/index.js +7 -11
- package/es/components/ControlInput.js +18 -22
- package/es/hooks/useHighlight.d.ts +1 -1
- package/es/mdx/Callout/index.js +13 -19
- package/es/mdx/Cards/Card.js +46 -59
- package/es/mdx/Cards/index.js +3 -6
- package/es/mdx/FileTree/File.js +5 -11
- package/es/mdx/FileTree/Folder.js +13 -22
- package/es/mdx/FileTree/index.js +3 -6
- package/es/mdx/Mdx/index.js +7 -9
- package/es/mdx/Steps/index.js +3 -6
- package/es/mdx/Tabs/Tab.js +3 -8
- package/es/mdx/Tabs/index.js +17 -21
- package/es/mdx/mdxComponents/CodeBlock.js +9 -14
- package/es/mdx/mdxComponents/Image.js +2 -2
- package/es/mdx/mdxComponents/Link.js +2 -3
- package/es/mdx/mdxComponents/Pre.js +7 -14
- package/es/mdx/mdxComponents/Video.js +2 -2
- package/es/mobile/MobileChatInputArea/SendButton.js +3 -4
- package/es/mobile/MobileChatInputArea/index.js +69 -79
- package/es/mobile/MobileNavBar/MobileNavBarTitle.js +26 -37
- package/es/mobile/MobileNavBar/index.js +41 -48
- package/es/mobile/MobileSafeArea/index.js +2 -3
- package/es/mobile/MobileTabBar/index.js +29 -35
- package/es/storybook/StoryBook/index.js +19 -26
- package/package.json +41 -45
|
@@ -5,8 +5,6 @@ import { memo } from 'react';
|
|
|
5
5
|
import { Flexbox } from 'react-layout-kit';
|
|
6
6
|
import { copyToClipboard } from "../utils/copyToClipboard";
|
|
7
7
|
import { alphaBg, useStyles } from "./style";
|
|
8
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
8
|
var ScaleRow = /*#__PURE__*/memo(function (_ref) {
|
|
11
9
|
var name = _ref.name,
|
|
12
10
|
title = _ref.title,
|
|
@@ -39,47 +37,45 @@ var ScaleRow = /*#__PURE__*/memo(function (_ref) {
|
|
|
39
37
|
break;
|
|
40
38
|
}
|
|
41
39
|
}
|
|
42
|
-
return /*#__PURE__*/
|
|
43
|
-
size: 2
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
}, _callee);
|
|
69
|
-
})),
|
|
70
|
-
style: style,
|
|
71
|
-
title: color,
|
|
72
|
-
children: /*#__PURE__*/_jsx(Flexbox, {
|
|
73
|
-
align: 'center',
|
|
74
|
-
className: styles.scaleItem,
|
|
75
|
-
horizontal: true,
|
|
76
|
-
justify: 'center',
|
|
77
|
-
style: {
|
|
78
|
-
backgroundColor: color
|
|
40
|
+
return /*#__PURE__*/React.createElement(Space, {
|
|
41
|
+
size: 2
|
|
42
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
43
|
+
className: styles.scaleRowTitle,
|
|
44
|
+
key: title
|
|
45
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
46
|
+
className: styles.text
|
|
47
|
+
}, title)), scale.map(function (color, index) {
|
|
48
|
+
if (index === 0 || index === 12) return false;
|
|
49
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
className: styles.scaleBox,
|
|
51
|
+
key: index,
|
|
52
|
+
onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
53
|
+
var content;
|
|
54
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
55
|
+
while (1) switch (_context.prev = _context.next) {
|
|
56
|
+
case 0:
|
|
57
|
+
content = "token.".concat(name).concat(index).concat(isAlpha ? 'A' : '', " /* ").concat(color, " */");
|
|
58
|
+
_context.next = 3;
|
|
59
|
+
return copyToClipboard(content);
|
|
60
|
+
case 3:
|
|
61
|
+
message.success(content);
|
|
62
|
+
case 4:
|
|
63
|
+
case "end":
|
|
64
|
+
return _context.stop();
|
|
79
65
|
}
|
|
80
|
-
})
|
|
81
|
-
},
|
|
82
|
-
|
|
83
|
-
|
|
66
|
+
}, _callee);
|
|
67
|
+
})),
|
|
68
|
+
style: style,
|
|
69
|
+
title: color
|
|
70
|
+
}, /*#__PURE__*/React.createElement(Flexbox, {
|
|
71
|
+
align: 'center',
|
|
72
|
+
className: styles.scaleItem,
|
|
73
|
+
horizontal: true,
|
|
74
|
+
justify: 'center',
|
|
75
|
+
style: {
|
|
76
|
+
backgroundColor: color
|
|
77
|
+
}
|
|
78
|
+
}));
|
|
79
|
+
}));
|
|
84
80
|
});
|
|
85
81
|
export default ScaleRow;
|
package/es/ColorScales/index.js
CHANGED
|
@@ -5,74 +5,72 @@ import { memo } from 'react';
|
|
|
5
5
|
import { Flexbox } from 'react-layout-kit';
|
|
6
6
|
import ScaleRow from "./ScaleRow";
|
|
7
7
|
import { useStyles } from "./style";
|
|
8
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
8
|
var ColorScales = /*#__PURE__*/memo(function (_ref) {
|
|
11
9
|
var name = _ref.name,
|
|
12
10
|
scale = _ref.scale,
|
|
13
11
|
midHighLight = _ref.midHighLight;
|
|
14
12
|
var _useStyles = useStyles(),
|
|
15
13
|
styles = _useStyles.styles;
|
|
16
|
-
return /*#__PURE__*/
|
|
14
|
+
return /*#__PURE__*/React.createElement(Flexbox, {
|
|
17
15
|
align: 'center',
|
|
18
16
|
flex: 1,
|
|
19
17
|
horizontal: true,
|
|
20
|
-
justify: 'center'
|
|
21
|
-
|
|
18
|
+
justify: 'center'
|
|
19
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
20
|
+
style: {
|
|
21
|
+
padding: '8px 16px 32px 0'
|
|
22
|
+
}
|
|
23
|
+
}, /*#__PURE__*/React.createElement(Space, {
|
|
24
|
+
direction: 'vertical',
|
|
25
|
+
size: 2
|
|
26
|
+
}, /*#__PURE__*/React.createElement(Space, {
|
|
27
|
+
key: "scale-title",
|
|
28
|
+
size: 2
|
|
29
|
+
}, /*#__PURE__*/React.createElement(Flexbox, {
|
|
30
|
+
align: 'center',
|
|
31
|
+
className: styles.scaleRowTitle,
|
|
32
|
+
horizontal: true,
|
|
33
|
+
key: "scale-num"
|
|
34
|
+
}), Array.from({
|
|
35
|
+
length: scale.light.length
|
|
36
|
+
}).fill('').map(function (_, index) {
|
|
37
|
+
if (index === 0 || index === 12) return false;
|
|
38
|
+
var isMidHighlight = midHighLight === index;
|
|
39
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: styles.scaleBox,
|
|
41
|
+
key: "num".concat(index)
|
|
42
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
43
|
+
className: styles.scaleBox
|
|
44
|
+
}, /*#__PURE__*/React.createElement(Flexbox, {
|
|
45
|
+
align: 'center',
|
|
46
|
+
className: styles.scaleItem,
|
|
47
|
+
horizontal: true,
|
|
48
|
+
justify: 'center',
|
|
22
49
|
style: {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
style: {
|
|
49
|
-
fontWeight: isMidHighlight ? 700 : 400,
|
|
50
|
-
opacity: 0.5
|
|
51
|
-
},
|
|
52
|
-
children: index
|
|
53
|
-
})
|
|
54
|
-
})
|
|
55
|
-
}, "num".concat(index));
|
|
56
|
-
})]
|
|
57
|
-
}, "scale-title"), /*#__PURE__*/_jsx(ScaleRow, {
|
|
58
|
-
name: name,
|
|
59
|
-
scale: scale.light,
|
|
60
|
-
title: "light"
|
|
61
|
-
}, "light"), /*#__PURE__*/_jsx(ScaleRow, {
|
|
62
|
-
name: name,
|
|
63
|
-
scale: scale.lightA,
|
|
64
|
-
title: "lightA"
|
|
65
|
-
}, "lightA"), /*#__PURE__*/_jsx(ScaleRow, {
|
|
66
|
-
name: name,
|
|
67
|
-
scale: scale.dark,
|
|
68
|
-
title: "dark"
|
|
69
|
-
}, "dark"), /*#__PURE__*/_jsx(ScaleRow, {
|
|
70
|
-
name: name,
|
|
71
|
-
scale: scale.darkA,
|
|
72
|
-
title: "darkA"
|
|
73
|
-
}, "darkA")]
|
|
74
|
-
})
|
|
75
|
-
})
|
|
76
|
-
});
|
|
50
|
+
fontWeight: isMidHighlight ? 700 : 400,
|
|
51
|
+
opacity: 0.5
|
|
52
|
+
}
|
|
53
|
+
}, index)));
|
|
54
|
+
})), /*#__PURE__*/React.createElement(ScaleRow, {
|
|
55
|
+
key: "light",
|
|
56
|
+
name: name,
|
|
57
|
+
scale: scale.light,
|
|
58
|
+
title: "light"
|
|
59
|
+
}), /*#__PURE__*/React.createElement(ScaleRow, {
|
|
60
|
+
key: "lightA",
|
|
61
|
+
name: name,
|
|
62
|
+
scale: scale.lightA,
|
|
63
|
+
title: "lightA"
|
|
64
|
+
}), /*#__PURE__*/React.createElement(ScaleRow, {
|
|
65
|
+
key: "dark",
|
|
66
|
+
name: name,
|
|
67
|
+
scale: scale.dark,
|
|
68
|
+
title: "dark"
|
|
69
|
+
}), /*#__PURE__*/React.createElement(ScaleRow, {
|
|
70
|
+
key: "darkA",
|
|
71
|
+
name: name,
|
|
72
|
+
scale: scale.darkA,
|
|
73
|
+
title: "darkA"
|
|
74
|
+
}))));
|
|
77
75
|
});
|
|
78
76
|
export default ColorScales;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { createContext, memo, useContext } from 'react';
|
|
2
2
|
import { genCdnUrl } from "../utils/genCdnUrl";
|
|
3
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
3
|
export var ConfigContext = /*#__PURE__*/createContext(null);
|
|
5
4
|
var ConfigProvider = /*#__PURE__*/memo(function (_ref) {
|
|
6
5
|
var children = _ref.children,
|
|
7
6
|
config = _ref.config;
|
|
8
|
-
return /*#__PURE__*/
|
|
9
|
-
value: config
|
|
10
|
-
|
|
11
|
-
});
|
|
7
|
+
return /*#__PURE__*/React.createElement(ConfigContext.Provider, {
|
|
8
|
+
value: config
|
|
9
|
+
}, children);
|
|
12
10
|
});
|
|
13
11
|
|
|
14
12
|
// useCdnFn
|
package/es/ContextMenu/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import { Dropdown } from 'antd';
|
|
5
5
|
import { memo } from 'react';
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
6
|
var ContextMenu = /*#__PURE__*/memo(function (props) {
|
|
8
|
-
return /*#__PURE__*/
|
|
7
|
+
return /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
9
8
|
trigger: ['contextMenu']
|
|
10
9
|
}, props));
|
|
11
10
|
});
|
package/es/CopyButton/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
|
|
5
5
|
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
6
6
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
@@ -10,7 +10,6 @@ import { memo } from 'react';
|
|
|
10
10
|
import ActionIcon from "../ActionIcon";
|
|
11
11
|
import { useCopied } from "../hooks/useCopied";
|
|
12
12
|
import { copyToClipboard } from "../utils/copyToClipboard";
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
13
|
var CopyButton = /*#__PURE__*/memo(function (_ref) {
|
|
15
14
|
var active = _ref.active,
|
|
16
15
|
content = _ref.content,
|
|
@@ -27,12 +26,12 @@ var CopyButton = /*#__PURE__*/memo(function (_ref) {
|
|
|
27
26
|
copied = _useCopied.copied,
|
|
28
27
|
setCopied = _useCopied.setCopied;
|
|
29
28
|
var Icon = icon || Copy;
|
|
30
|
-
return /*#__PURE__*/
|
|
29
|
+
return /*#__PURE__*/React.createElement(ActionIcon, _extends({
|
|
31
30
|
glass: glass,
|
|
32
31
|
placement: placement,
|
|
33
32
|
size: size,
|
|
34
33
|
title: 'Copy'
|
|
35
|
-
}, rest
|
|
34
|
+
}, rest, {
|
|
36
35
|
active: active || copied,
|
|
37
36
|
icon: copied ? Check : Icon,
|
|
38
37
|
onClick: ( /*#__PURE__*/function () {
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["className"];
|
|
4
4
|
import { memo } from 'react';
|
|
5
5
|
import { Flexbox } from 'react-layout-kit';
|
|
6
6
|
import { useStyles } from "./style";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
7
|
var DraggablePanelBody = /*#__PURE__*/memo(function (_ref) {
|
|
9
8
|
var className = _ref.className,
|
|
10
9
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
11
10
|
var _useStyles = useStyles(),
|
|
12
11
|
cx = _useStyles.cx,
|
|
13
12
|
styles = _useStyles.styles;
|
|
14
|
-
return /*#__PURE__*/
|
|
13
|
+
return /*#__PURE__*/React.createElement(Flexbox, _extends({
|
|
15
14
|
className: cx(styles.body, className),
|
|
16
15
|
flex: 1
|
|
17
16
|
}, rest));
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["className"];
|
|
4
4
|
import { memo } from 'react';
|
|
5
5
|
import { Flexbox } from 'react-layout-kit';
|
|
6
6
|
import { useStyles } from "./style";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
7
|
var DraggablePanelContainer = /*#__PURE__*/memo(function (_ref) {
|
|
9
8
|
var className = _ref.className,
|
|
10
9
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
11
10
|
var _useStyles = useStyles(),
|
|
12
11
|
cx = _useStyles.cx,
|
|
13
12
|
styles = _useStyles.styles;
|
|
14
|
-
return /*#__PURE__*/
|
|
13
|
+
return /*#__PURE__*/React.createElement(Flexbox, _extends({
|
|
15
14
|
className: cx(styles.container, className)
|
|
16
15
|
}, rest));
|
|
17
16
|
});
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["className"];
|
|
4
4
|
import { memo } from 'react';
|
|
5
5
|
import { Flexbox } from 'react-layout-kit';
|
|
6
6
|
import { useStyles } from "./style";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
7
|
var DraggablePanelFooter = /*#__PURE__*/memo(function (_ref) {
|
|
9
8
|
var className = _ref.className,
|
|
10
9
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
11
10
|
var _useStyles = useStyles(),
|
|
12
11
|
cx = _useStyles.cx,
|
|
13
12
|
styles = _useStyles.styles;
|
|
14
|
-
return /*#__PURE__*/
|
|
13
|
+
return /*#__PURE__*/React.createElement(Flexbox, _extends({
|
|
15
14
|
align: 'center',
|
|
16
15
|
className: cx(styles.footer, className),
|
|
17
16
|
flex: 'none',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
4
|
var _excluded = ["pin", "setPin", "className", "setExpand", "title", "position"];
|
|
@@ -8,8 +8,6 @@ import { Flexbox } from 'react-layout-kit';
|
|
|
8
8
|
import useControlledState from 'use-merge-value';
|
|
9
9
|
import ActionIcon from "../../ActionIcon";
|
|
10
10
|
import { useStyles } from "./style";
|
|
11
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
11
|
var DraggablePanelHeader = /*#__PURE__*/memo(function (props) {
|
|
14
12
|
var pin = props.pin,
|
|
15
13
|
setPin = props.setPin,
|
|
@@ -29,7 +27,7 @@ var DraggablePanelHeader = /*#__PURE__*/memo(function (props) {
|
|
|
29
27
|
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
30
28
|
isPinned = _useControlledState2[0],
|
|
31
29
|
setIsPinned = _useControlledState2[1];
|
|
32
|
-
var panelIcon = /*#__PURE__*/
|
|
30
|
+
var panelIcon = /*#__PURE__*/React.createElement(ActionIcon, {
|
|
33
31
|
icon: PanelLeft,
|
|
34
32
|
onClick: function onClick() {
|
|
35
33
|
return setExpand === null || setExpand === void 0 ? void 0 : setExpand(false);
|
|
@@ -39,7 +37,7 @@ var DraggablePanelHeader = /*#__PURE__*/memo(function (props) {
|
|
|
39
37
|
fontSize: 14
|
|
40
38
|
}
|
|
41
39
|
});
|
|
42
|
-
var pinIcon = /*#__PURE__*/
|
|
40
|
+
var pinIcon = /*#__PURE__*/React.createElement(ActionIcon, {
|
|
43
41
|
active: pin,
|
|
44
42
|
icon: pin ? Pin : PinOff,
|
|
45
43
|
onClick: function onClick() {
|
|
@@ -50,15 +48,13 @@ var DraggablePanelHeader = /*#__PURE__*/memo(function (props) {
|
|
|
50
48
|
fontSize: 14
|
|
51
49
|
}
|
|
52
50
|
});
|
|
53
|
-
return /*#__PURE__*/
|
|
51
|
+
return /*#__PURE__*/React.createElement(Flexbox, _extends({
|
|
54
52
|
align: 'center',
|
|
55
53
|
className: cx(styles.header, className),
|
|
56
54
|
flex: 'none',
|
|
57
55
|
gap: 8,
|
|
58
56
|
horizontal: true,
|
|
59
57
|
justify: 'space-between'
|
|
60
|
-
}, rest),
|
|
61
|
-
children: [position === 'left' ? panelIcon : pinIcon, title, position === 'left' ? pinIcon : panelIcon]
|
|
62
|
-
}));
|
|
58
|
+
}, rest), position === 'left' ? panelIcon : pinIcon, title, position === 'left' ? pinIcon : panelIcon);
|
|
63
59
|
});
|
|
64
60
|
export default DraggablePanelHeader;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
4
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
4
5
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
5
6
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
@@ -12,8 +13,6 @@ import { Center } from 'react-layout-kit';
|
|
|
12
13
|
import useControlledState from 'use-merge-value';
|
|
13
14
|
import { useStyles } from "./style";
|
|
14
15
|
import { reversePlacement } from "./utils";
|
|
15
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
16
|
var DEFAULT_HEIGHT = 180;
|
|
18
17
|
var DEFAULT_WIDTH = 280;
|
|
19
18
|
var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
|
|
@@ -53,8 +52,8 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
|
|
|
53
52
|
_ref$classNames = _ref.classNames,
|
|
54
53
|
classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
|
|
55
54
|
dir = _ref.dir;
|
|
56
|
-
var
|
|
57
|
-
var isHovering = useHover(
|
|
55
|
+
var ref = useRef(null);
|
|
56
|
+
var isHovering = useHover(ref);
|
|
58
57
|
var isVertical = placement === 'top' || placement === 'bottom';
|
|
59
58
|
|
|
60
59
|
// inherit direction from Ant Design ConfigProvider
|
|
@@ -172,34 +171,31 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
|
|
|
172
171
|
}, [styles, internalPlacement]),
|
|
173
172
|
Arrow = _useMemo.Arrow,
|
|
174
173
|
arrowPlacement = _useMemo.className;
|
|
175
|
-
var handler = /*#__PURE__*/
|
|
174
|
+
var handler = /*#__PURE__*/React.createElement(Center
|
|
176
175
|
// @ts-ignore
|
|
177
176
|
, {
|
|
178
177
|
className: cx(styles["toggle".concat(arrowPlacement)], classNames.handle),
|
|
179
178
|
style: {
|
|
180
179
|
opacity: isExpand ? pin ? undefined : 0 : showHandlerWhenUnexpand ? 1 : 0
|
|
180
|
+
}
|
|
181
|
+
}, /*#__PURE__*/React.createElement(Center, {
|
|
182
|
+
onClick: function onClick() {
|
|
183
|
+
setIsExpand(!isExpand);
|
|
181
184
|
},
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
children: /*#__PURE__*/_jsx(Arrow, {
|
|
193
|
-
size: 16,
|
|
194
|
-
strokeWidth: 1.5
|
|
195
|
-
})
|
|
196
|
-
})
|
|
197
|
-
})
|
|
198
|
-
});
|
|
185
|
+
style: handlerStyle || hanlderStyle
|
|
186
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
187
|
+
className: styles.handlerIcon,
|
|
188
|
+
style: {
|
|
189
|
+
transform: "rotate(".concat(isExpand ? 180 : 0, "deg)")
|
|
190
|
+
}
|
|
191
|
+
}, /*#__PURE__*/React.createElement(Arrow, {
|
|
192
|
+
size: 16,
|
|
193
|
+
strokeWidth: 1.5
|
|
194
|
+
}))));
|
|
199
195
|
var inner =
|
|
200
196
|
/*#__PURE__*/
|
|
201
197
|
// @ts-ignore
|
|
202
|
-
|
|
198
|
+
React.createElement(Resizable, _extends({}, sizeProps, {
|
|
203
199
|
className: cx(styles.panel, classNames.content),
|
|
204
200
|
enable: canResizing ? resizing : undefined,
|
|
205
201
|
handleClasses: resizeHandleClassNames,
|
|
@@ -223,21 +219,18 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
|
|
|
223
219
|
},
|
|
224
220
|
style: _objectSpread({
|
|
225
221
|
transition: isResizing ? 'unset' : undefined
|
|
226
|
-
}, style)
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
});
|
|
233
|
-
return /*#__PURE__*/_jsxs("aside", {
|
|
222
|
+
}, style)
|
|
223
|
+
}), children);
|
|
224
|
+
if (fullscreen) return /*#__PURE__*/React.createElement("div", {
|
|
225
|
+
className: cx(styles.fullscreen, className)
|
|
226
|
+
}, children);
|
|
227
|
+
return /*#__PURE__*/React.createElement("aside", {
|
|
234
228
|
className: cx(styles.container,
|
|
235
229
|
// @ts-ignore
|
|
236
230
|
styles[mode === 'fixed' ? 'fixed' : "".concat(internalPlacement, "Float")], className),
|
|
237
231
|
dir: dir,
|
|
238
|
-
ref:
|
|
239
|
-
style: isExpand ? _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1) : {}
|
|
240
|
-
|
|
241
|
-
});
|
|
232
|
+
ref: ref,
|
|
233
|
+
style: isExpand ? _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1) : {}
|
|
234
|
+
}, expandable && showExpand && handler, destroyOnClose ? isExpand && inner : inner);
|
|
242
235
|
});
|
|
243
236
|
export default DraggablePanel;
|
package/es/EditableText/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
5
5
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
6
6
|
var _excluded = ["value", "showEditIcon", "onChange", "editing", "onEditingChange"];
|
|
@@ -10,8 +10,6 @@ import { Flexbox } from 'react-layout-kit';
|
|
|
10
10
|
import useControlledState from 'use-merge-value';
|
|
11
11
|
import ActionIcon from "../ActionIcon";
|
|
12
12
|
import { ControlInput } from "../components/ControlInput";
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
13
|
var EditableText = /*#__PURE__*/memo(function (_ref) {
|
|
16
14
|
var value = _ref.value,
|
|
17
15
|
_ref$showEditIcon = _ref.showEditIcon,
|
|
@@ -27,24 +25,23 @@ var EditableText = /*#__PURE__*/memo(function (_ref) {
|
|
|
27
25
|
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
28
26
|
edited = _useControlledState2[0],
|
|
29
27
|
setEdited = _useControlledState2[1];
|
|
30
|
-
return edited ? /*#__PURE__*/
|
|
28
|
+
return edited ? /*#__PURE__*/React.createElement(ControlInput, _extends({
|
|
31
29
|
onChange: onChange,
|
|
32
30
|
onChangeEnd: function onChangeEnd() {
|
|
33
31
|
setEdited(false);
|
|
34
32
|
},
|
|
35
33
|
value: value
|
|
36
|
-
}, rest)) : /*#__PURE__*/
|
|
34
|
+
}, rest)) : /*#__PURE__*/React.createElement(Flexbox, {
|
|
37
35
|
gap: 8,
|
|
38
|
-
horizontal: true
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
});
|
|
36
|
+
horizontal: true
|
|
37
|
+
}, value, showEditIcon && /*#__PURE__*/React.createElement(ActionIcon, {
|
|
38
|
+
icon: Edit3,
|
|
39
|
+
onClick: function onClick() {
|
|
40
|
+
setEdited(!edited);
|
|
41
|
+
},
|
|
42
|
+
placement: "right",
|
|
43
|
+
size: "small",
|
|
44
|
+
title: 'Edit'
|
|
45
|
+
}));
|
|
49
46
|
});
|
|
50
47
|
export default EditableText;
|