@lobehub/ui 1.94.6 → 1.94.7
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { memo } from 'react';
|
|
2
|
+
import { Flexbox } from 'react-layout-kit';
|
|
2
3
|
import { useStyles } from "../style";
|
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
5
|
var Actions = /*#__PURE__*/memo(function (_ref) {
|
|
@@ -12,7 +13,8 @@ var Actions = /*#__PURE__*/memo(function (_ref) {
|
|
|
12
13
|
type: type
|
|
13
14
|
}),
|
|
14
15
|
styles = _useStyles.styles;
|
|
15
|
-
return /*#__PURE__*/_jsx(
|
|
16
|
+
return /*#__PURE__*/_jsx(Flexbox, {
|
|
17
|
+
align: 'flex-start',
|
|
16
18
|
className: styles.actions,
|
|
17
19
|
role: "chat-item-actions",
|
|
18
20
|
children: actions
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Loader2 } from 'lucide-react';
|
|
2
2
|
import { memo } from 'react';
|
|
3
|
+
import { Flexbox } from 'react-layout-kit';
|
|
3
4
|
import Icon from "../../Icon";
|
|
4
5
|
import { useStyles } from "../style";
|
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -11,8 +12,10 @@ var Loading = /*#__PURE__*/memo(function (_ref) {
|
|
|
11
12
|
}),
|
|
12
13
|
styles = _useStyles.styles;
|
|
13
14
|
if (!loading) return null;
|
|
14
|
-
return /*#__PURE__*/_jsx(
|
|
15
|
+
return /*#__PURE__*/_jsx(Flexbox, {
|
|
16
|
+
align: 'center',
|
|
15
17
|
className: styles.loading,
|
|
18
|
+
justify: 'center',
|
|
16
19
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
17
20
|
icon: Loader2,
|
|
18
21
|
size: {
|
|
@@ -16,8 +16,8 @@ var Title = /*#__PURE__*/memo(function (_ref) {
|
|
|
16
16
|
styles = _useStyles.styles;
|
|
17
17
|
return /*#__PURE__*/_jsxs(Flexbox, {
|
|
18
18
|
className: styles.name,
|
|
19
|
+
direction: placement === 'left' ? 'horizontal' : 'horizontal-reverse',
|
|
19
20
|
gap: 4,
|
|
20
|
-
horizontal: true,
|
|
21
21
|
children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("time", {
|
|
22
22
|
children: formatTime(time)
|
|
23
23
|
})]
|
package/es/ChatItem/index.js
CHANGED
|
@@ -54,8 +54,8 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
54
54
|
styles = _useStyles.styles;
|
|
55
55
|
return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
|
|
56
56
|
className: cx(styles.container, className),
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
direction: placement === 'left' ? 'horizontal' : 'horizontal-reverse',
|
|
58
|
+
gap: mobile ? 6 : 12
|
|
59
59
|
}, props), {}, {
|
|
60
60
|
children: [/*#__PURE__*/_jsx(Avatar, {
|
|
61
61
|
addon: avatarAddon,
|
|
@@ -65,6 +65,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
65
65
|
placement: placement,
|
|
66
66
|
size: mobile ? MOBILE_AVATAR_SIZE : undefined
|
|
67
67
|
}), /*#__PURE__*/_jsxs(Flexbox, {
|
|
68
|
+
align: placement === 'left' ? 'flex-start' : 'flex-end',
|
|
68
69
|
className: styles.messageContainer,
|
|
69
70
|
children: [/*#__PURE__*/_jsx(Title, {
|
|
70
71
|
avatar: avatar,
|
|
@@ -72,7 +73,9 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
72
73
|
showTitle: showTitle,
|
|
73
74
|
time: time
|
|
74
75
|
}), /*#__PURE__*/_jsxs(Flexbox, {
|
|
76
|
+
align: placement === 'left' ? 'flex-start' : 'flex-end',
|
|
75
77
|
className: styles.messageContent,
|
|
78
|
+
direction: type === 'block' ? placement === 'left' ? 'horizontal' : 'horizontal-reverse' : 'vertical',
|
|
76
79
|
gap: 8,
|
|
77
80
|
children: [error ? /*#__PURE__*/_jsx(ErrorContent, {
|
|
78
81
|
ErrorMessage: ErrorMessage,
|
package/es/ChatItem/style.js
CHANGED
|
@@ -20,18 +20,18 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
20
20
|
var typeStylish = type === 'block' ? blockStylish : pureStylish;
|
|
21
21
|
var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n "])));
|
|
22
22
|
return {
|
|
23
|
-
actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n
|
|
23
|
+
actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 "])))),
|
|
24
24
|
alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n span[role='img'] {\n align-self: flex-start;\n width: 16px;\n height: 16px;\n margin-top: 3px;\n }\n\n .ant-alert-description {\n text-align: justify;\n word-break: break-all;\n word-wrap: break-word;\n }\n\n &.ant-alert-with-description {\n padding-block: 12px;\n padding-inline: 12px;\n\n .ant-alert-message {\n font-size: 14px;\n font-weight: 600;\n text-align: justify;\n word-break: break-all;\n word-wrap: break-word;\n }\n }\n "]))),
|
|
25
25
|
avatarContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: relative;\n flex: none;\n width: ", "px;\n height: ", "px;\n "])), avatarSize, avatarSize),
|
|
26
26
|
avatarGroupContainer: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), avatarSize),
|
|
27
|
-
container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n position: relative;\n
|
|
27
|
+
container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n max-width: 100vw;\n padding: 12px 16px;\n\n time {\n display: inline-block;\n white-space: nowrap;\n }\n\n div[role='chat-item-actions'] {\n display: flex;\n }\n\n time,\n div[role='chat-item-actions'] {\n pointer-events: none;\n opacity: 0;\n transition: opacity 200ms ", ";\n }\n\n &:hover {\n time,\n div[role='chat-item-actions'] {\n pointer-events: unset;\n opacity: 1;\n }\n }\n\n ", " {\n padding: 4px 16px;\n }\n "])), token.motionEaseOut, responsive.mobile)),
|
|
28
28
|
editingContainer: cx(editingStylish, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n padding: 8px 12px 12px;\n border: 1px solid ", ";\n\n &:active,\n &:hover {\n border-color: ", ";\n }\n "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", "px;\n "])), token.colorFillQuaternary, token.borderRadius)),
|
|
29
29
|
editingInput: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n width: 100%;\n "]))),
|
|
30
|
-
loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: absolute;\n right: ", ";\n bottom: 0;\n left: ", ";\n\n
|
|
30
|
+
loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: absolute;\n right: ", ";\n bottom: 0;\n left: ", ";\n\n width: 16px;\n height: 16px;\n\n color: ", ";\n\n background: ", ";\n border-radius: 50%;\n "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
|
|
31
31
|
message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n position: relative;\n "])))),
|
|
32
|
-
messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n position: relative;\n
|
|
33
|
-
messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n position: relative;\n overflow-x: hidden;\n
|
|
32
|
+
messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n position: relative;\n "])))),
|
|
33
|
+
messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n position: relative;\n overflow-x: hidden;\n\n ", " {\n flex-direction: column !important;\n }\n "])), responsive.mobile)),
|
|
34
34
|
messageExtra: cx('message-extra'),
|
|
35
|
-
name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: ", ";\n top: ", ";\n right: ", ";\n left: ", ";\n\n
|
|
35
|
+
name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: ", ";\n top: ", ";\n right: ", ";\n left: ", ";\n\n margin-bottom: 6px;\n\n font-size: 12px;\n line-height: 1;\n color: ", ";\n text-align: ", ";\n "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
|
|
36
36
|
};
|
|
37
37
|
});
|