@yuntijs/ui 1.0.0-beta.8 → 1.0.0-beta.80
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/Alert/index.d.ts +13 -0
- package/es/Alert/index.js +25 -0
- package/es/Alert/style.d.ts +4 -0
- package/es/Alert/style.js +13 -0
- package/es/App/index.d.ts +7 -0
- package/es/App/index.js +19 -0
- package/es/ButtonGroup/index.d.ts +24 -0
- package/es/ButtonGroup/index.js +66 -0
- package/es/Card/index.d.ts +1 -0
- package/es/Card/index.js +1 -0
- package/es/CardList/Item/index.d.ts +4 -0
- package/es/CardList/Item/index.js +43 -0
- package/es/CardList/Item/style.d.ts +0 -0
- package/es/CardList/Item/style.js +0 -0
- package/es/CardList/index.d.ts +2 -0
- package/es/CardList/index.js +39 -0
- package/es/ChatInputArea/desktop/ChatInputArea.d.ts +19 -0
- package/es/ChatInputArea/desktop/ChatInputArea.js +72 -0
- package/es/ChatInputArea/index.d.ts +6 -0
- package/es/ChatInputArea/index.js +6 -0
- package/es/ChatItem/components/MessageContent.d.ts +21 -0
- package/es/ChatItem/components/MessageContent.js +59 -0
- package/es/ChatItem/index.d.ts +4 -0
- package/es/ChatItem/index.js +120 -0
- package/es/ChatItem/style.d.ts +24 -0
- package/es/ChatItem/style.js +38 -0
- package/es/ChatItem/type.d.ts +82 -0
- package/es/ChatItem/type.js +1 -0
- package/es/CollapseGroup/index.d.ts +4 -0
- package/es/CollapseGroup/index.js +23 -0
- package/es/CollapseGroup/style.d.ts +3 -0
- package/es/CollapseGroup/style.js +11 -0
- package/es/ConfigProvider/index.d.ts +3 -0
- package/es/ConfigProvider/index.js +17 -11
- package/es/Descriptions/index.d.ts +14 -0
- package/es/Descriptions/index.js +31 -0
- package/es/Descriptions/style.d.ts +4 -0
- package/es/Descriptions/style.js +24 -0
- package/es/Divider/index.d.ts +38 -0
- package/es/Divider/index.js +66 -0
- package/es/Divider/style.d.ts +3 -0
- package/es/Divider/style.js +12 -0
- package/es/DragPanel/index.d.ts +10 -0
- package/es/DragPanel/index.js +97 -0
- package/es/DragPanel/style.d.ts +7 -0
- package/es/DragPanel/style.js +15 -0
- package/es/Drawer/index.d.ts +13 -0
- package/es/Drawer/index.js +20 -0
- package/es/Drawer/style.d.ts +4 -0
- package/es/Drawer/style.js +16 -0
- package/es/Dropdown/index.d.ts +14 -0
- package/es/Dropdown/index.js +59 -0
- package/es/Dropdown/style.d.ts +7 -0
- package/es/Dropdown/style.js +13 -0
- package/es/EditableMessage/index.d.ts +75 -0
- package/es/EditableMessage/index.js +99 -0
- package/es/Form/collapse-list/index.d.ts +40 -0
- package/es/Form/collapse-list/index.js +209 -0
- package/es/Form/collapse-list/style.d.ts +5 -0
- package/es/Form/collapse-list/style.js +13 -0
- package/es/Form/index.d.ts +8 -0
- package/es/Form/index.js +5 -0
- package/es/FormHelper/autoFocus.d.ts +10 -0
- package/es/FormHelper/autoFocus.js +38 -0
- package/es/FormHelper/index.d.ts +13 -0
- package/es/FormHelper/index.js +41 -0
- package/es/Highlighter/FullFeatured.d.ts +18 -0
- package/es/Highlighter/FullFeatured.js +102 -0
- package/es/Highlighter/SyntaxHighlighter/index.d.ts +7 -0
- package/es/Highlighter/SyntaxHighlighter/index.js +51 -0
- package/es/Highlighter/SyntaxHighlighter/style.d.ts +5 -0
- package/es/Highlighter/SyntaxHighlighter/style.js +16 -0
- package/es/Highlighter/index.d.ts +50 -0
- package/es/Highlighter/index.js +77 -0
- package/es/Highlighter/style.d.ts +9 -0
- package/es/Highlighter/style.js +23 -0
- package/es/Highlighter/theme.d.ts +1 -0
- package/es/Highlighter/theme.js +1661 -0
- package/es/LogViewer/index.d.ts +10 -0
- package/es/LogViewer/index.js +141 -0
- package/es/LogViewer/style.d.ts +6 -0
- package/es/LogViewer/style.js +16 -0
- package/es/LogViewer/types.d.ts +235 -0
- package/es/LogViewer/types.js +1 -0
- package/es/Mentions/constants.d.ts +6 -0
- package/es/Mentions/constants.js +28 -0
- package/es/Mentions/hooks.d.ts +20 -0
- package/es/Mentions/hooks.js +133 -0
- package/es/Mentions/index.d.ts +19 -0
- package/es/Mentions/index.js +136 -0
- package/es/Mentions/plugins/custom-text/node.d.ts +11 -0
- package/es/Mentions/plugins/custom-text/node.js +72 -0
- package/es/Mentions/plugins/mention-node/component.d.ts +6 -0
- package/es/Mentions/plugins/mention-node/component.js +64 -0
- package/es/Mentions/plugins/mention-node/index.d.ts +9 -0
- package/es/Mentions/plugins/mention-node/index.js +32 -0
- package/es/Mentions/plugins/mention-node/node.d.ts +23 -0
- package/es/Mentions/plugins/mention-node/node.js +97 -0
- package/es/Mentions/plugins/mention-node/replacement.d.ts +5 -0
- package/es/Mentions/plugins/mention-node/replacement.js +42 -0
- package/es/Mentions/plugins/mention-node/style.d.ts +8 -0
- package/es/Mentions/plugins/mention-node/style.js +47 -0
- package/es/Mentions/plugins/mention-node/utils.d.ts +4 -0
- package/es/Mentions/plugins/mention-node/utils.js +5 -0
- package/es/Mentions/plugins/mention-picker/hooks.d.ts +5 -0
- package/es/Mentions/plugins/mention-picker/hooks.js +39 -0
- package/es/Mentions/plugins/mention-picker/index.d.ts +36 -0
- package/es/Mentions/plugins/mention-picker/index.js +87 -0
- package/es/Mentions/plugins/mention-picker/menu-item.d.ts +11 -0
- package/es/Mentions/plugins/mention-picker/menu-item.js +71 -0
- package/es/Mentions/plugins/mention-picker/menu.d.ts +9 -0
- package/es/Mentions/plugins/mention-picker/menu.js +30 -0
- package/es/Mentions/plugins/mention-picker/style.d.ts +11 -0
- package/es/Mentions/plugins/mention-picker/style.js +19 -0
- package/es/Mentions/plugins/mention-picker/utils.d.ts +22 -0
- package/es/Mentions/plugins/mention-picker/utils.js +39 -0
- package/es/Mentions/plugins/on-blur-or-focus-block.d.ts +7 -0
- package/es/Mentions/plugins/on-blur-or-focus-block.js +36 -0
- package/es/Mentions/provider.d.ts +12 -0
- package/es/Mentions/provider.js +15 -0
- package/es/Mentions/style.d.ts +11 -0
- package/es/Mentions/style.js +22 -0
- package/es/Mentions/types.d.ts +17 -0
- package/es/Mentions/types.js +1 -0
- package/es/Mentions/utils.d.ts +9 -0
- package/es/Mentions/utils.js +95 -0
- package/es/Modal/index.d.ts +19 -0
- package/es/Modal/index.js +36 -0
- package/es/Modal/style.d.ts +4 -0
- package/es/Modal/style.js +17 -0
- package/es/MonacoEditor/base/controller.d.ts +17 -0
- package/es/MonacoEditor/base/controller.js +49 -0
- package/es/MonacoEditor/base/helper.d.ts +65 -0
- package/es/MonacoEditor/base/helper.js +324 -0
- package/es/MonacoEditor/base/index.d.ts +35 -0
- package/es/MonacoEditor/base/index.js +236 -0
- package/es/MonacoEditor/base/monaco.d.ts +6 -0
- package/es/MonacoEditor/base/monaco.js +64 -0
- package/es/MonacoEditor/base/style.d.ts +12 -0
- package/es/MonacoEditor/base/style.js +26 -0
- package/es/MonacoEditor/index.d.ts +2 -4
- package/es/MonacoEditor/index.js +26 -62
- package/es/MonacoEditor/style.js +3 -2
- package/es/Page/Breadcrumb/index.d.ts +9 -0
- package/es/Page/Breadcrumb/index.js +56 -0
- package/es/Page/Content/index.d.ts +4 -0
- package/es/Page/Content/index.js +59 -0
- package/es/Page/Content/style.d.ts +3 -0
- package/es/Page/Content/style.js +12 -0
- package/es/Page/Footer/index.d.ts +2 -0
- package/es/Page/Footer/index.js +6 -0
- package/es/Page/Header/Icon.d.ts +17 -0
- package/es/Page/Header/Icon.js +42 -0
- package/es/Page/Header/index.d.ts +43 -0
- package/es/Page/Header/index.js +202 -0
- package/es/Page/Header/style.d.ts +12 -0
- package/es/Page/Header/style.js +21 -0
- package/es/Page/Page.d.ts +9 -0
- package/es/Page/Page.js +49 -0
- package/es/Page/PageContext.d.ts +15 -0
- package/es/Page/PageContext.js +21 -0
- package/es/Page/Title/index.d.ts +5 -0
- package/es/Page/Title/index.js +18 -0
- package/es/Page/Title/style.d.ts +3 -0
- package/es/Page/Title/style.js +10 -0
- package/es/Page/index.d.ts +18 -0
- package/es/Page/index.js +15 -0
- package/es/Page/style.d.ts +3 -0
- package/es/Page/style.js +10 -0
- package/es/ProCard/Card/index.d.ts +6 -0
- package/es/ProCard/Card/index.js +25 -0
- package/es/ProCard/Card/style.d.ts +7 -0
- package/es/ProCard/Card/style.js +15 -0
- package/es/ProCard/Content/index.d.ts +4 -0
- package/es/ProCard/Content/index.js +24 -0
- package/es/ProCard/Content/style.d.ts +3 -0
- package/es/ProCard/Content/style.js +10 -0
- package/es/ProCard/Descriptions/index.d.ts +4 -0
- package/es/ProCard/Descriptions/index.js +28 -0
- package/es/ProCard/Descriptions/style.d.ts +3 -0
- package/es/ProCard/Descriptions/style.js +12 -0
- package/es/ProCard/Header/index.d.ts +15 -0
- package/es/ProCard/Header/index.js +86 -0
- package/es/ProCard/Header/style.d.ts +12 -0
- package/es/ProCard/Header/style.js +21 -0
- package/es/ProCard/index.d.ts +13 -0
- package/es/ProCard/index.js +8 -0
- package/es/Radio/index.d.ts +36 -0
- package/es/Radio/index.js +26 -0
- package/es/Radio/style.d.ts +4 -0
- package/es/Radio/style.js +66 -0
- package/es/SelectCard/index.d.ts +33 -0
- package/es/SelectCard/index.js +132 -0
- package/es/SelectCard/style.d.ts +10 -0
- package/es/SelectCard/style.js +42 -0
- package/es/SliderInput/index.js +2 -2
- package/es/Status/index.d.ts +7 -0
- package/es/Status/index.js +39 -0
- package/es/Status/style.d.ts +4 -0
- package/es/Status/style.js +14 -0
- package/es/Table/collapse/index.d.ts +8 -0
- package/es/Table/collapse/index.js +39 -0
- package/es/Table/collapse/style.d.ts +3 -0
- package/es/Table/collapse/style.js +11 -0
- package/es/Table/index.d.ts +20 -0
- package/es/Table/index.js +56 -0
- package/es/Typography/index.d.ts +32 -0
- package/es/Typography/index.js +77 -0
- package/es/WaveformIcon/index.d.ts +9 -0
- package/es/WaveformIcon/index.js +51 -0
- package/es/hooks/languageMap.d.ts +1 -0
- package/es/hooks/languageMap.js +1 -0
- package/es/hooks/useHighlight.d.ts +5 -0
- package/es/hooks/useHighlight.js +78 -0
- package/es/index.d.ts +38 -1
- package/es/index.js +52 -1
- package/es/notification/index.d.ts +24 -0
- package/es/notification/index.js +237 -0
- package/es/notification/style.d.ts +2 -0
- package/es/notification/style.js +28 -0
- package/es/styles/colors/colors.d.ts +39 -0
- package/es/styles/colors/colors.js +86 -0
- package/es/styles/colors/generateColorPalette.d.ts +11 -0
- package/es/styles/colors/generateColorPalette.js +31 -0
- package/es/styles/colors/neutralColors.d.ts +9 -0
- package/es/styles/colors/neutralColors.js +32 -0
- package/es/styles/index.d.ts +4 -0
- package/es/styles/index.js +4 -0
- package/es/useSpeechSynthes/const/polyfill.d.ts +3 -0
- package/es/useSpeechSynthes/const/polyfill.js +21 -0
- package/es/useSpeechSynthes/index.d.ts +13 -0
- package/es/useSpeechSynthes/index.js +69 -0
- package/es/utils/constants.d.ts +1 -0
- package/es/utils/constants.js +1 -0
- package/es/utils/tools.d.ts +1 -0
- package/es/utils/tools.js +1 -0
- package/package.json +30 -9
- package/umd/index.min.js +1 -1
- package/umd/index.min.js.map +1 -1
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
3
|
+
/* eslint-disable no-nested-ternary */
|
|
4
|
+
import { createStyles } from 'antd-style';
|
|
5
|
+
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
6
|
+
var cx = _ref.cx,
|
|
7
|
+
css = _ref.css,
|
|
8
|
+
token = _ref.token,
|
|
9
|
+
isDarkMode = _ref.isDarkMode,
|
|
10
|
+
responsive = _ref.responsive;
|
|
11
|
+
var placement = _ref2.placement,
|
|
12
|
+
type = _ref2.type,
|
|
13
|
+
title = _ref2.title,
|
|
14
|
+
primary = _ref2.primary,
|
|
15
|
+
avatarSize = _ref2.avatarSize,
|
|
16
|
+
editing = _ref2.editing,
|
|
17
|
+
time = _ref2.time;
|
|
18
|
+
var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-block: 8px;\n padding-inline: 12px;\n\n background-color: ", ";\n border-radius: ", "px;\n\n transition: background-color 100ms ", ";\n "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
|
|
19
|
+
var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-block-start: ", ";\n "])), title ? 0 : '6px');
|
|
20
|
+
var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-block-end: -16px;\n transition: background-color 100ms ", ";\n "])), token.motionEaseOut);
|
|
21
|
+
var typeStylish = type === 'block' ? blockStylish : pureStylish;
|
|
22
|
+
var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n "])));
|
|
23
|
+
return {
|
|
24
|
+
actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex: none;\n align-self: ", ";\n justify-content: ", ";\n "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n pointer-events: none !important;\n opacity: 0 !important;\n "])))),
|
|
25
|
+
avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n flex: none;\n width: ", "px;\n height: ", "px;\n "])), avatarSize, avatarSize),
|
|
26
|
+
avatarGroupContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), avatarSize),
|
|
27
|
+
container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n max-width: 100vw;\n padding: 16px;\n\n time {\n display: inline-block;\n white-space: nowrap;\n }\n\n div[role='menubar'] {\n display: flex;\n }\n\n time,\n div[role='menubar'] {\n pointer-events: none;\n opacity: 0;\n transition: opacity 200ms ", ";\n }\n\n &:hover {\n time,\n div[role='menubar'] {\n pointer-events: unset;\n opacity: 1;\n }\n }\n\n ", " {\n padding-block: ", ";\n padding-inline: 8px;\n }\n "])), token.motionEaseOut, responsive.mobile, type === 'pure' ? '12px' : '6px')),
|
|
28
|
+
editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding-block: 8px 12px;\n padding-inline: 12px;\n border: 1px solid ", ";\n\n &:active,\n &:hover {\n border-color: ", ";\n }\n "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", "px;\n "])), token.colorFillQuaternary, token.borderRadius)),
|
|
29
|
+
editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n width: 100%;\n "]))),
|
|
30
|
+
errorContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n width: 100%;\n "]))),
|
|
31
|
+
loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: absolute;\n inset-block-end: 0;\n inset-inline: ", "\n ", ";\n\n width: 16px;\n height: 16px;\n\n color: ", ";\n\n background: ", ";\n border-radius: 50%;\n "])), placement === 'right' ? '-4px' : 'unset', placement === 'left' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
|
|
32
|
+
message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n max-width: 100%;\n\n ", " {\n width: 100%;\n }\n "])), responsive.mobile)),
|
|
33
|
+
messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n max-width: 100%;\n margin-block-start: ", "px;\n\n ", " {\n overflow-x: auto;\n }\n "])), time ? -16 : 0, responsive.mobile)),
|
|
34
|
+
messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n max-width: 100%;\n\n ", " {\n flex-direction: column !important;\n }\n "])), responsive.mobile)),
|
|
35
|
+
messageExtra: cx('message-extra'),
|
|
36
|
+
name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n margin-block-end: 6px;\n\n font-size: 12px;\n line-height: 1;\n color: ", ";\n text-align: ", ";\n "])), token.colorTextDescription, placement === 'left' ? 'left' : 'right')
|
|
37
|
+
};
|
|
38
|
+
});
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { AlertProps, AvatarProps, DivProps, MetaData } from '@lobehub/ui';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import type { EditableMessageProps } from "../EditableMessage";
|
|
4
|
+
export interface ChatItemProps {
|
|
5
|
+
/**
|
|
6
|
+
* @description Actions to be displayed in the chat item
|
|
7
|
+
*/
|
|
8
|
+
actions?: ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* @description Metadata for the avatar
|
|
11
|
+
*/
|
|
12
|
+
avatar: MetaData;
|
|
13
|
+
avatarAddon?: ReactNode;
|
|
14
|
+
avatarProps?: AvatarProps;
|
|
15
|
+
/**
|
|
16
|
+
* @description Custom CSS class name for the chat item
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* @description Whether the chat item is in editing mode
|
|
21
|
+
*/
|
|
22
|
+
editing?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* @description Props for Error render
|
|
25
|
+
*/
|
|
26
|
+
error?: AlertProps;
|
|
27
|
+
errorMessage?: ReactNode;
|
|
28
|
+
fontSize?: number;
|
|
29
|
+
/**
|
|
30
|
+
* @description Whether the chat item is in loading state
|
|
31
|
+
*/
|
|
32
|
+
loading?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* @description The message content of the chat item
|
|
35
|
+
*/
|
|
36
|
+
message?: ReactNode;
|
|
37
|
+
messageExtra?: ReactNode;
|
|
38
|
+
onAvatarClick?: () => void;
|
|
39
|
+
/**
|
|
40
|
+
* @description Callback when the message content changes
|
|
41
|
+
* @param value - The new message content
|
|
42
|
+
*/
|
|
43
|
+
onChange?: (value: string) => void;
|
|
44
|
+
onDoubleClick?: DivProps['onDoubleClick'];
|
|
45
|
+
/**
|
|
46
|
+
* @description Callback when the editing mode changes
|
|
47
|
+
* @param editing - The new editing mode
|
|
48
|
+
*/
|
|
49
|
+
onEditingChange?: (editing: boolean) => void;
|
|
50
|
+
/**
|
|
51
|
+
* @description The placement of the chat item
|
|
52
|
+
* @default 'left'
|
|
53
|
+
*/
|
|
54
|
+
placement?: 'left' | 'right';
|
|
55
|
+
/**
|
|
56
|
+
* @description Whether the chat item is primary
|
|
57
|
+
*/
|
|
58
|
+
primary?: boolean;
|
|
59
|
+
renderMessage?: (content: ReactNode) => ReactNode;
|
|
60
|
+
/**
|
|
61
|
+
* @description Whether to show the title of the chat item
|
|
62
|
+
*/
|
|
63
|
+
showTitle?: boolean;
|
|
64
|
+
text?: EditableMessageProps['text'];
|
|
65
|
+
/**
|
|
66
|
+
* @description The timestamp of the chat item
|
|
67
|
+
*/
|
|
68
|
+
time?: number;
|
|
69
|
+
/**
|
|
70
|
+
* @description The type of the chat item
|
|
71
|
+
* @default 'block'
|
|
72
|
+
*/
|
|
73
|
+
type?: 'block' | 'pure';
|
|
74
|
+
/**
|
|
75
|
+
* @description The markdownProps of the chat item
|
|
76
|
+
*/
|
|
77
|
+
markdownProps?: EditableMessageProps['markdownProps'];
|
|
78
|
+
/**
|
|
79
|
+
* @description The markdownClassname of the chat item
|
|
80
|
+
*/
|
|
81
|
+
markdownClassname?: string;
|
|
82
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { FormGroupProps } from '@lobehub/ui';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export type CollapseGroupProps = Omit<FormGroupProps, 'items' | 'activeKey' | 'defaultActiveKey' | 'accordion' | 'expandIconPosition'>;
|
|
4
|
+
export declare const CollapseGroup: React.FC<CollapseGroupProps>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["className", "variant"];
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
import { Form as LobeForm } from '@lobehub/ui';
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { useStyles } from "./style";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
var FormGroup = LobeForm.Group;
|
|
11
|
+
export var CollapseGroup = function CollapseGroup(_ref) {
|
|
12
|
+
var className = _ref.className,
|
|
13
|
+
variant = _ref.variant,
|
|
14
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
15
|
+
var _useStyles = useStyles(),
|
|
16
|
+
styles = _useStyles.styles,
|
|
17
|
+
cx = _useStyles.cx;
|
|
18
|
+
return /*#__PURE__*/_jsx(FormGroup, _objectSpread({
|
|
19
|
+
className: cx(styles.root, className),
|
|
20
|
+
collapsible: variant !== 'pure',
|
|
21
|
+
variant: variant
|
|
22
|
+
}, otherProps));
|
|
23
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
token = _ref.token,
|
|
7
|
+
prefixCls = _ref.prefixCls;
|
|
8
|
+
return {
|
|
9
|
+
root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-bottom: ", "px;\n .", "-collapse {\n &-header {\n padding: 0 !important;\n &-text {\n padding: ", "px ", "px ", "px 0;\n & > * {\n font-size: ", "px;\n /* font-weight: unset; */\n }\n }\n }\n &-expand-icon {\n cursor: pointer;\n padding: ", "px 0 ", "px ", "px;\n }\n &-extra {\n padding-right: ", "px;\n }\n &-item > .", "-collapse-content {\n padding: ", "px 0;\n background-color: ", ";\n }\n &-content {\n &-box {\n padding: ", "px ", "px !important;\n }\n }\n }\n "])), token.margin, prefixCls, token.paddingSM, token.paddingSM, token.paddingSM, token.fontSize, token.padding, token.padding, token.paddingSM, token.paddingSM, prefixCls, token.paddingXXS, token.colorBgContainer, token.paddingXXS, token.padding)
|
|
10
|
+
};
|
|
11
|
+
});
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { ElementType, ReactNode } from 'react';
|
|
2
|
+
import type { PageContextValue } from "../Page/PageContext";
|
|
2
3
|
import { CDN, CdnApi } from "../utils/genCdnUrl";
|
|
3
4
|
type CdnFn = ({ pkg, version, path }: CdnApi) => string;
|
|
4
5
|
export interface Config {
|
|
5
6
|
customCdnFn?: CdnFn;
|
|
6
7
|
imgAs?: ElementType;
|
|
7
8
|
proxy?: CDN | 'custom';
|
|
9
|
+
Link?: PageContextValue['Link'];
|
|
8
10
|
}
|
|
9
11
|
export declare const ConfigContext: import("react").Context<Config | null>;
|
|
10
12
|
export declare const ConfigProvider: import("react").NamedExoticComponent<{
|
|
@@ -12,4 +14,5 @@ export declare const ConfigProvider: import("react").NamedExoticComponent<{
|
|
|
12
14
|
config: Config;
|
|
13
15
|
}>;
|
|
14
16
|
export declare const useCdnFn: () => CdnFn;
|
|
17
|
+
export declare const useLink: () => typeof import("react").Component | import("react").FC<any> | undefined;
|
|
15
18
|
export {};
|
|
@@ -24,16 +24,22 @@ var fallback = function fallback(_ref2) {
|
|
|
24
24
|
export var useCdnFn = function useCdnFn() {
|
|
25
25
|
var config = useContext(ConfigContext);
|
|
26
26
|
if (!config) return fallback;
|
|
27
|
-
if ((config === null || config === void 0 ? void 0 : config.proxy) !== 'custom')
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
27
|
+
if ((config === null || config === void 0 ? void 0 : config.proxy) !== 'custom') {
|
|
28
|
+
return function (_ref3) {
|
|
29
|
+
var pkg = _ref3.pkg,
|
|
30
|
+
version = _ref3.version,
|
|
31
|
+
path = _ref3.path;
|
|
32
|
+
return genCdnUrl({
|
|
33
|
+
path: path,
|
|
34
|
+
pkg: pkg,
|
|
35
|
+
proxy: config.proxy,
|
|
36
|
+
version: version
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
}
|
|
38
40
|
return (config === null || config === void 0 ? void 0 : config.customCdnFn) || fallback;
|
|
41
|
+
};
|
|
42
|
+
export var useLink = function useLink() {
|
|
43
|
+
var config = useContext(ConfigContext);
|
|
44
|
+
return config === null || config === void 0 ? void 0 : config.Link;
|
|
39
45
|
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Descriptions as AntdDescriptions, type DescriptionsProps as AntdDescriptionsProps } from 'antd';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface CustomDescriptionsProps {
|
|
4
|
+
borderedBottom?: boolean;
|
|
5
|
+
borderedBottomDashed?: boolean;
|
|
6
|
+
borderedTop?: boolean;
|
|
7
|
+
borderedTopDashed?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface DescriptionsProps extends AntdDescriptionsProps, CustomDescriptionsProps {
|
|
10
|
+
}
|
|
11
|
+
export declare const Descriptions: React.FC<DescriptionsProps> & {
|
|
12
|
+
Item: typeof AntdDescriptions.Item;
|
|
13
|
+
};
|
|
14
|
+
export default Descriptions;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["className", "borderedBottom", "borderedBottomDashed", "borderedTop", "borderedTopDashed"];
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
import { Descriptions as AntdDescriptions } from 'antd';
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { useStyles } from "./style";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
export var Descriptions = function Descriptions(props) {
|
|
11
|
+
var className = props.className,
|
|
12
|
+
borderedBottom = props.borderedBottom,
|
|
13
|
+
borderedBottomDashed = props.borderedBottomDashed,
|
|
14
|
+
borderedTop = props.borderedTop,
|
|
15
|
+
borderedTopDashed = props.borderedTopDashed,
|
|
16
|
+
otherProps = _objectWithoutProperties(props, _excluded);
|
|
17
|
+
var _useStyles = useStyles({
|
|
18
|
+
borderedBottom: borderedBottom,
|
|
19
|
+
borderedBottomDashed: borderedBottomDashed,
|
|
20
|
+
borderedTop: borderedTop,
|
|
21
|
+
borderedTopDashed: borderedTopDashed,
|
|
22
|
+
size: otherProps.size
|
|
23
|
+
}),
|
|
24
|
+
styles = _useStyles.styles,
|
|
25
|
+
cx = _useStyles.cx;
|
|
26
|
+
return /*#__PURE__*/_jsx(AntdDescriptions, _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
27
|
+
className: cx(styles.custom, className)
|
|
28
|
+
}));
|
|
29
|
+
};
|
|
30
|
+
export default Descriptions;
|
|
31
|
+
Descriptions.Item = AntdDescriptions.Item;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
token = _ref.token,
|
|
7
|
+
prefixCls = _ref.prefixCls;
|
|
8
|
+
var borderedBottom = _ref2.borderedBottom,
|
|
9
|
+
borderedBottomDashed = _ref2.borderedBottomDashed,
|
|
10
|
+
borderedTop = _ref2.borderedTop,
|
|
11
|
+
borderedTopDashed = _ref2.borderedTopDashed,
|
|
12
|
+
size = _ref2.size;
|
|
13
|
+
var descriptionsContentPadding = {
|
|
14
|
+
small: "".concat(token.paddingXS, "px ").concat(token.padding, "px"),
|
|
15
|
+
middle: "".concat(token.padding, "px ").concat(token.paddingLG, "px"),
|
|
16
|
+
default: "".concat(token.paddingSM, "px ").concat(token.paddingLG, "px")
|
|
17
|
+
};
|
|
18
|
+
var hasCustomSizeStyle = borderedBottom || borderedBottomDashed;
|
|
19
|
+
return {
|
|
20
|
+
custom: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", "-descriptions-item-content {\n align-items: center !important;\n }\n .", "-descriptions-row > td {\n padding-top: 8px !important;\n padding-bottom: 8px !important;\n }\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), prefixCls, prefixCls, hasCustomSizeStyle && size && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .", "-descriptions-item-label, .", "-descriptions-item-content {\n padding: ", ";\n }\n .", "-descriptions-item {\n padding-bottom: 0 !important;\n }\n table {\n border-spacing: 0 !important;\n }\n "])), prefixCls, prefixCls, descriptionsContentPadding[size], prefixCls), borderedBottom && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", "-descriptions-item {\n border-bottom: 1px solid ", ";\n }\n "])), prefixCls, token.colorSplit), borderedBottomDashed && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", "-descriptions-item {\n border-bottom: 1px dashed ", ";\n }\n "])), prefixCls, token.colorSplit), borderedTop && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .", "-descriptions-item {\n border-top: 1px solid ", ";\n }\n "])), prefixCls, token.colorSplit), borderedTopDashed && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", "-descriptions-item {\n border-top: 1px dashed ", ";\n }\n "])), prefixCls, token.colorSplit))
|
|
21
|
+
};
|
|
22
|
+
}, {
|
|
23
|
+
hashPriority: 'low'
|
|
24
|
+
});
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { type DividerProps as AntdDividerProps } from 'antd';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface CustomDividerProps {
|
|
4
|
+
/**
|
|
5
|
+
* @description type of the divider
|
|
6
|
+
* @default 'default'
|
|
7
|
+
*/
|
|
8
|
+
mode?: 'expanded' | 'line' | 'default';
|
|
9
|
+
/**
|
|
10
|
+
* @description Default whether to expand. This parameter is available only when mode is expanded
|
|
11
|
+
* @default 'false'
|
|
12
|
+
*/
|
|
13
|
+
defaultOpen?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* @description Expand content. This parameter is available only when mode is expanded
|
|
16
|
+
* @default '-'
|
|
17
|
+
*/
|
|
18
|
+
content?: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* @description The position of icon. This parameter is available only when mode is expanded and default
|
|
21
|
+
* @default 'left'
|
|
22
|
+
*/
|
|
23
|
+
iconPlacement?: 'left' | 'right';
|
|
24
|
+
/**
|
|
25
|
+
* @description custom open icon. This parameter is available only when mode is expanded
|
|
26
|
+
* @default '-'
|
|
27
|
+
*/
|
|
28
|
+
openIcon?: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* @description custom close icon. This parameter is available only when mode is expanded
|
|
31
|
+
* @default '-'
|
|
32
|
+
*/
|
|
33
|
+
closeIcon?: React.ReactNode;
|
|
34
|
+
}
|
|
35
|
+
export interface DividerProps extends AntdDividerProps, CustomDividerProps {
|
|
36
|
+
}
|
|
37
|
+
export declare const Divider: React.FC<DividerProps>;
|
|
38
|
+
export default Divider;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["mode", "content", "defaultOpen", "iconPlacement", "openIcon", "closeIcon", "type"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
|
|
8
|
+
import { Divider as AntdDivider, Space } from 'antd';
|
|
9
|
+
import React, { useState } from 'react';
|
|
10
|
+
import { useStyles } from "./style";
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
|
+
export var Divider = function Divider(props) {
|
|
15
|
+
var _props$mode = props.mode,
|
|
16
|
+
mode = _props$mode === void 0 ? 'line' : _props$mode,
|
|
17
|
+
content = props.content,
|
|
18
|
+
defaultOpen = props.defaultOpen,
|
|
19
|
+
_props$iconPlacement = props.iconPlacement,
|
|
20
|
+
iconPlacement = _props$iconPlacement === void 0 ? 'left' : _props$iconPlacement,
|
|
21
|
+
openIcon = props.openIcon,
|
|
22
|
+
closeIcon = props.closeIcon,
|
|
23
|
+
type = props.type,
|
|
24
|
+
otherProps = _objectWithoutProperties(props, _excluded);
|
|
25
|
+
var _useStyles = useStyles({}),
|
|
26
|
+
styles = _useStyles.styles;
|
|
27
|
+
var canExpanded = mode === 'expanded';
|
|
28
|
+
var _useState = useState(defaultOpen),
|
|
29
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
30
|
+
open = _useState2[0],
|
|
31
|
+
setOpen = _useState2[1];
|
|
32
|
+
var closeIconDom = closeIcon ? closeIcon : /*#__PURE__*/_jsx(MinusSquareOutlined, {});
|
|
33
|
+
var openIconDom = openIcon ? openIcon : /*#__PURE__*/_jsx(PlusSquareOutlined, {});
|
|
34
|
+
var iconDom = canExpanded && /*#__PURE__*/_jsx("span", {
|
|
35
|
+
children: open ? closeIconDom : openIconDom
|
|
36
|
+
});
|
|
37
|
+
if (mode === 'line' || type === 'vertical') {
|
|
38
|
+
return /*#__PURE__*/_jsx(AntdDivider, _objectSpread({
|
|
39
|
+
type: type
|
|
40
|
+
}, otherProps));
|
|
41
|
+
}
|
|
42
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
43
|
+
children: [/*#__PURE__*/_jsx(AntdDivider, _objectSpread(_objectSpread({
|
|
44
|
+
type: type
|
|
45
|
+
}, otherProps), {}, {
|
|
46
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
47
|
+
className: canExpanded ? styles.custom : '',
|
|
48
|
+
onClick: function onClick() {
|
|
49
|
+
setOpen(!open);
|
|
50
|
+
},
|
|
51
|
+
children: /*#__PURE__*/_jsxs(Space, {
|
|
52
|
+
size: 6,
|
|
53
|
+
children: [iconPlacement !== 'right' && iconDom, /*#__PURE__*/_jsx("span", {
|
|
54
|
+
children: content
|
|
55
|
+
}), iconPlacement === 'right' && iconDom]
|
|
56
|
+
})
|
|
57
|
+
})
|
|
58
|
+
})), canExpanded && /*#__PURE__*/_jsx("div", {
|
|
59
|
+
style: {
|
|
60
|
+
display: open ? 'block' : 'none'
|
|
61
|
+
},
|
|
62
|
+
children: props.children
|
|
63
|
+
})]
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
export default Divider;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
token = _ref.token;
|
|
7
|
+
return {
|
|
8
|
+
custom: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n color: ", ";\n &:hover {\n color: ", ";\n }\n "])), token.colorPrimary, token.colorPrimaryHover)
|
|
9
|
+
};
|
|
10
|
+
}, {
|
|
11
|
+
hashPriority: 'low'
|
|
12
|
+
});
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { DrawerProps } from 'antd';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import type { ControlPosition } from 'react-draggable';
|
|
4
|
+
export interface DragPanelProps extends DrawerProps {
|
|
5
|
+
/** 面板默认位置 */
|
|
6
|
+
defaultPosition?: ControlPosition;
|
|
7
|
+
/** 面板位置改变的回调函数 */
|
|
8
|
+
onPositionChange?: (position: ControlPosition) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const DragPanel: React.FC<DragPanelProps>;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["title", "classNames", "defaultPosition", "onPositionChange"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
import { DragOutlined } from '@ant-design/icons';
|
|
8
|
+
import { Button, Drawer, Flex } from 'antd';
|
|
9
|
+
import React, { memo, useRef, useState } from 'react';
|
|
10
|
+
// @Todo: use react-rnd instead, support resizing
|
|
11
|
+
import Draggable from 'react-draggable';
|
|
12
|
+
import { useStyles } from "./style";
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
+
export var DragPanel = /*#__PURE__*/memo(function (_ref) {
|
|
16
|
+
var title = _ref.title,
|
|
17
|
+
_ref$classNames = _ref.classNames,
|
|
18
|
+
classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
|
|
19
|
+
defaultPosition = _ref.defaultPosition,
|
|
20
|
+
onPositionChange = _ref.onPositionChange,
|
|
21
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
22
|
+
var _useStyles = useStyles(),
|
|
23
|
+
styles = _useStyles.styles,
|
|
24
|
+
cx = _useStyles.cx;
|
|
25
|
+
var _useState = useState({
|
|
26
|
+
left: 0,
|
|
27
|
+
top: 0,
|
|
28
|
+
bottom: 0,
|
|
29
|
+
right: 0
|
|
30
|
+
}),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
bounds = _useState2[0],
|
|
33
|
+
setBounds = _useState2[1];
|
|
34
|
+
var draggleRef = useRef(null);
|
|
35
|
+
var _onStart = function onStart(_event, uiData) {
|
|
36
|
+
var _draggleRef$current;
|
|
37
|
+
// @Todo SSR
|
|
38
|
+
var _window$document$docu = window.document.documentElement,
|
|
39
|
+
clientWidth = _window$document$docu.clientWidth,
|
|
40
|
+
clientHeight = _window$document$docu.clientHeight;
|
|
41
|
+
var targetRect = (_draggleRef$current = draggleRef.current) === null || _draggleRef$current === void 0 ? void 0 : _draggleRef$current.getBoundingClientRect();
|
|
42
|
+
if (!targetRect) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
setBounds({
|
|
46
|
+
left: -targetRect.left + uiData.x,
|
|
47
|
+
right: clientWidth - (targetRect.right - uiData.x),
|
|
48
|
+
top: -targetRect.top + uiData.y,
|
|
49
|
+
bottom: clientHeight - (targetRect.bottom - uiData.y)
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
return /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
53
|
+
classNames: _objectSpread(_objectSpread({}, classNames), {}, {
|
|
54
|
+
wrapper: cx(styles.wrapper, classNames.wrapper),
|
|
55
|
+
content: cx(styles.content, classNames.content)
|
|
56
|
+
}),
|
|
57
|
+
destroyOnClose: true,
|
|
58
|
+
drawerRender: function drawerRender(drawer) {
|
|
59
|
+
return /*#__PURE__*/_jsx(Draggable, {
|
|
60
|
+
bounds: bounds,
|
|
61
|
+
defaultPosition: defaultPosition,
|
|
62
|
+
handle: ".".concat(styles.dragHandle),
|
|
63
|
+
nodeRef: draggleRef,
|
|
64
|
+
onStart: function onStart(event, uiData) {
|
|
65
|
+
return _onStart(event, uiData);
|
|
66
|
+
},
|
|
67
|
+
onStop: function onStop(_e, data) {
|
|
68
|
+
onPositionChange === null || onPositionChange === void 0 || onPositionChange({
|
|
69
|
+
x: data.x,
|
|
70
|
+
y: data.y
|
|
71
|
+
});
|
|
72
|
+
},
|
|
73
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
74
|
+
className: styles.dragWrapper,
|
|
75
|
+
ref: draggleRef,
|
|
76
|
+
children: drawer
|
|
77
|
+
})
|
|
78
|
+
});
|
|
79
|
+
},
|
|
80
|
+
mask: false,
|
|
81
|
+
rootClassName: styles.root,
|
|
82
|
+
title: /*#__PURE__*/_jsxs(Flex, {
|
|
83
|
+
align: "center",
|
|
84
|
+
className: styles.dragHandle,
|
|
85
|
+
children: [/*#__PURE__*/_jsx(Flex, {
|
|
86
|
+
flex: 2,
|
|
87
|
+
children: title
|
|
88
|
+
}), /*#__PURE__*/_jsx(Flex, {
|
|
89
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
90
|
+
className: styles.dragHandle,
|
|
91
|
+
icon: /*#__PURE__*/_jsx(DragOutlined, {}),
|
|
92
|
+
type: "text"
|
|
93
|
+
})
|
|
94
|
+
})]
|
|
95
|
+
})
|
|
96
|
+
}));
|
|
97
|
+
});
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
2
|
+
root: import("antd-style").SerializedStyles;
|
|
3
|
+
wrapper: import("antd-style").SerializedStyles;
|
|
4
|
+
content: import("antd-style").SerializedStyles;
|
|
5
|
+
dragWrapper: import("antd-style").SerializedStyles;
|
|
6
|
+
dragHandle: import("antd-style").SerializedStyles;
|
|
7
|
+
}>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
token = _ref.token,
|
|
7
|
+
prefixCls = _ref.prefixCls;
|
|
8
|
+
return {
|
|
9
|
+
root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n "]))),
|
|
10
|
+
wrapper: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 640px !important;\n margin: ", "px;\n box-shadow: none !important;\n "])), token.marginLG),
|
|
11
|
+
content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n overflow: hidden;\n border-radius: ", "px;\n box-shadow: ", ";\n "])), token.borderRadiusLG, token.boxShadowSecondary),
|
|
12
|
+
dragWrapper: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n "]))),
|
|
13
|
+
dragHandle: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n cursor: move;\n "])))
|
|
14
|
+
};
|
|
15
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type DrawerProps as AntdDrawerProps } from 'antd';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
interface CustomDrawerProps {
|
|
4
|
+
/**
|
|
5
|
+
* @description The placement of the close icon. When the value is auto and extra if present, the close button is left, and right if not.
|
|
6
|
+
* @default 'right'
|
|
7
|
+
*/
|
|
8
|
+
closeIconPlacement?: 'left' | 'right' | 'auto';
|
|
9
|
+
}
|
|
10
|
+
export interface DrawerProps extends AntdDrawerProps, CustomDrawerProps {
|
|
11
|
+
}
|
|
12
|
+
export declare const Drawer: React.FC<DrawerProps>;
|
|
13
|
+
export default Drawer;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["className"];
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
import { Drawer as AntdDrawer } from 'antd';
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { useStyles } from "./style";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
export var Drawer = function Drawer(props) {
|
|
11
|
+
var className = props.className,
|
|
12
|
+
otherProps = _objectWithoutProperties(props, _excluded);
|
|
13
|
+
var _useStyles = useStyles(otherProps),
|
|
14
|
+
styles = _useStyles.styles,
|
|
15
|
+
cx = _useStyles.cx;
|
|
16
|
+
return /*#__PURE__*/_jsx(AntdDrawer, _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
17
|
+
className: cx(styles.custom, className)
|
|
18
|
+
}));
|
|
19
|
+
};
|
|
20
|
+
export default Drawer;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
prefixCls = _ref.prefixCls;
|
|
7
|
+
var closeIcon = _ref2.closeIcon,
|
|
8
|
+
closeIconPlacement = _ref2.closeIconPlacement,
|
|
9
|
+
extra = _ref2.extra;
|
|
10
|
+
var rightCloseIconStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", "-drawer-header-title {\n flex-direction: row-reverse;\n }\n .", "-drawer-close {\n flex-direction: row-reverse;\n margin-right: -10px !important;\n }\n ", "\n "])), prefixCls, prefixCls, !(closeIcon === null || closeIcon === false) && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .", "-drawer-extra {\n position: absolute;\n right: 45px;\n }\n "])), prefixCls));
|
|
11
|
+
return {
|
|
12
|
+
custom: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n "])), (!closeIconPlacement || closeIconPlacement === 'right' || closeIconPlacement === 'auto' && !extra) && rightCloseIconStyle)
|
|
13
|
+
};
|
|
14
|
+
}, {
|
|
15
|
+
hashPriority: 'low'
|
|
16
|
+
});
|