@lobehub/ui 1.62.0 → 1.63.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/ChatItem/style.d.ts +1 -1
- package/es/ChatItem/style.js +9 -9
- package/es/EditableMessage/index.js +4 -2
- package/es/List/ListItem/index.d.ts +7 -5
- package/es/List/ListItem/index.js +12 -10
- package/es/List/ListItem/style.d.ts +3 -2
- package/es/List/ListItem/style.js +10 -9
- package/es/List/index.d.ts +1 -1
- package/package.json +1 -1
package/es/ChatItem/style.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export declare const useStyles: (props?: {
|
|
|
10
10
|
alert: import("antd-style").SerializedStyles;
|
|
11
11
|
avatarContainer: import("antd-style").SerializedStyles;
|
|
12
12
|
container: string;
|
|
13
|
-
editingContainer:
|
|
13
|
+
editingContainer: string;
|
|
14
14
|
editingInput: import("antd-style").SerializedStyles;
|
|
15
15
|
loading: import("antd-style").SerializedStyles;
|
|
16
16
|
message: string;
|
package/es/ChatItem/style.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
4
|
import { rgba } from 'polished';
|
|
5
5
|
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
@@ -15,20 +15,20 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
15
15
|
showTitle = _ref2.showTitle;
|
|
16
16
|
var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 8px 12px;\n background-color: ", ";\n border-radius: ", "px;\n transition: background-color 100ms ", ";\n "])), primary ? isDarkMode ? token.colorFill : rgba(token.colorPrimary, 0.08) : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
|
|
17
17
|
var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-top: ", ";\n "])), title ? 0 : '6px');
|
|
18
|
-
var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n transition: background-color 100ms ", ";\n "])), token.motionEaseOut);
|
|
18
|
+
var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-bottom: -16px;\n transition: background-color 100ms ", ";\n "])), token.motionEaseOut);
|
|
19
19
|
var typeStylish = type === 'block' ? blockStylish : pureStylish;
|
|
20
20
|
return {
|
|
21
21
|
actions: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: flex-start;\n align-self: ", ";\n justify-content: ", ";\n "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'),
|
|
22
22
|
alert: css(_templateObject5 || (_templateObject5 = _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 "]))),
|
|
23
23
|
avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: relative;\n flex: none;\n width: ", "px;\n height: ", "px;\n "])), avatarSize, avatarSize),
|
|
24
24
|
container: cx(type === 'pure' && pureContainerStylish, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n\n display: flex;\n flex-direction: ", ";\n gap: 12px;\n align-items: flex-start;\n justify-content: revert;\n\n width: 100%;\n padding: 12px;\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 "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
|
|
25
|
-
editingContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n
|
|
26
|
-
editingInput: css(
|
|
27
|
-
loading: css(
|
|
28
|
-
message: cx(typeStylish, css(
|
|
29
|
-
messageContainer: css(
|
|
30
|
-
messageContent: css(
|
|
25
|
+
editingContainer: cx(css(_templateObject8 || (_templateObject8 = _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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", "px;\n "])), token.colorFillQuaternary, token.borderRadius)),
|
|
26
|
+
editingInput: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n min-height: 32px;\n "]))),
|
|
27
|
+
loading: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n position: absolute;\n right: ", ";\n bottom: 0;\n left: ", ";\n\n display: flex;\n align-items: center;\n justify-content: center;\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),
|
|
28
|
+
message: cx(typeStylish, css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n position: relative;\n "])))),
|
|
29
|
+
messageContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: ", ";\n "])), placement === 'left' ? 'flex-start' : 'flex-end'),
|
|
30
|
+
messageContent: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: revert;\n\n display: flex;\n flex-direction: ", ";\n gap: 8px;\n align-items: ", ";\n "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
|
|
31
31
|
messageExtra: cx('message-extra'),
|
|
32
|
-
name: css(
|
|
32
|
+
name: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n position: ", ";\n top: ", ";\n right: ", ";\n left: ", ";\n\n display: flex;\n flex-direction: ", ";\n gap: 4px;\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', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
|
|
33
33
|
};
|
|
34
34
|
});
|
|
@@ -49,7 +49,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
|
|
|
49
49
|
setTyping(false);
|
|
50
50
|
},
|
|
51
51
|
placeholder: placeholder,
|
|
52
|
-
style: styles === null || styles === void 0 ? void 0 : styles.input
|
|
52
|
+
style: styles === null || styles === void 0 ? void 0 : styles.input,
|
|
53
|
+
text: text
|
|
53
54
|
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
54
55
|
children: [!expand && isEdit ? /*#__PURE__*/_jsx(MessageInput, {
|
|
55
56
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
|
|
@@ -63,7 +64,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
|
|
|
63
64
|
setTyping(false);
|
|
64
65
|
},
|
|
65
66
|
placeholder: placeholder,
|
|
66
|
-
style: styles === null || styles === void 0 ? void 0 : styles.input
|
|
67
|
+
style: styles === null || styles === void 0 ? void 0 : styles.input,
|
|
68
|
+
text: text
|
|
67
69
|
}) : /*#__PURE__*/_jsx(Markdown, {
|
|
68
70
|
className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
|
|
69
71
|
style: styles === null || styles === void 0 ? void 0 : styles.markdown,
|
|
@@ -3,10 +3,15 @@ import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
|
|
|
3
3
|
* 卡片列表项的属性
|
|
4
4
|
*/
|
|
5
5
|
export interface ListItemProps {
|
|
6
|
+
/**
|
|
7
|
+
* 渲染操作区域的 React 节点
|
|
8
|
+
*/
|
|
9
|
+
actions?: ReactNode;
|
|
6
10
|
/**
|
|
7
11
|
* 是否处于激活状态
|
|
8
12
|
*/
|
|
9
13
|
active: boolean;
|
|
14
|
+
addon?: ReactNode;
|
|
10
15
|
/**
|
|
11
16
|
* 头像的 React 节点
|
|
12
17
|
*/
|
|
@@ -43,10 +48,7 @@ export interface ListItemProps {
|
|
|
43
48
|
* @param hover - 是否悬停
|
|
44
49
|
*/
|
|
45
50
|
onHoverChange?: (hover: boolean) => void;
|
|
46
|
-
|
|
47
|
-
* 渲染操作区域的 React 节点
|
|
48
|
-
*/
|
|
49
|
-
renderActions?: ReactNode;
|
|
51
|
+
pin?: boolean;
|
|
50
52
|
/**
|
|
51
53
|
* 是否显示操作区域
|
|
52
54
|
*/
|
|
@@ -60,5 +62,5 @@ export interface ListItemProps {
|
|
|
60
62
|
*/
|
|
61
63
|
title: ReactNode;
|
|
62
64
|
}
|
|
63
|
-
declare const ListItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<
|
|
65
|
+
declare const ListItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
64
66
|
export default ListItem;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "
|
|
3
|
+
var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "actions", "className", "style", "showAction", "children", "classNames", "pin"];
|
|
4
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
import { LoadingOutlined, MessageOutlined } from '@ant-design/icons';
|
|
@@ -14,7 +14,7 @@ import { getChatItemTime } from "./time";
|
|
|
14
14
|
*/
|
|
15
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref,
|
|
17
|
+
var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
18
18
|
var active = _ref.active,
|
|
19
19
|
avatar = _ref.avatar,
|
|
20
20
|
loading = _ref.loading,
|
|
@@ -22,31 +22,31 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, refere
|
|
|
22
22
|
date = _ref.date,
|
|
23
23
|
title = _ref.title,
|
|
24
24
|
onHoverChange = _ref.onHoverChange,
|
|
25
|
-
|
|
25
|
+
actions = _ref.actions,
|
|
26
26
|
className = _ref.className,
|
|
27
27
|
style = _ref.style,
|
|
28
28
|
showAction = _ref.showAction,
|
|
29
29
|
children = _ref.children,
|
|
30
30
|
_ref$classNames = _ref.classNames,
|
|
31
31
|
classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
|
|
32
|
+
pin = _ref.pin,
|
|
32
33
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
-
var _useStyles = useStyles(),
|
|
34
|
+
var _useStyles = useStyles(pin),
|
|
34
35
|
styles = _useStyles.styles,
|
|
35
36
|
cx = _useStyles.cx;
|
|
36
|
-
return /*#__PURE__*/_jsx(
|
|
37
|
+
return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
|
|
37
38
|
className: cx(styles.container, active && styles.active, className),
|
|
38
|
-
ref: reference,
|
|
39
|
-
style: style
|
|
40
|
-
}, props), {}, {
|
|
41
39
|
onMouseEnter: function onMouseEnter() {
|
|
42
40
|
onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(true);
|
|
43
41
|
},
|
|
44
42
|
onMouseLeave: function onMouseLeave() {
|
|
45
43
|
onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(false);
|
|
46
44
|
},
|
|
45
|
+
ref: ref,
|
|
46
|
+
style: style
|
|
47
|
+
}, props), {}, {
|
|
47
48
|
children: /*#__PURE__*/_jsxs(Flexbox, {
|
|
48
49
|
align: 'flex-start',
|
|
49
|
-
className: styles.inner,
|
|
50
50
|
distribution: 'space-between',
|
|
51
51
|
gap: 8,
|
|
52
52
|
horizontal: true,
|
|
@@ -72,15 +72,17 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, refere
|
|
|
72
72
|
}), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
|
|
73
73
|
spin: true
|
|
74
74
|
}) : showAction ? /*#__PURE__*/_jsx(Flexbox, {
|
|
75
|
+
className: styles.actions,
|
|
75
76
|
gap: 4,
|
|
76
77
|
horizontal: true,
|
|
77
78
|
onClick: function onClick(e) {
|
|
79
|
+
e.preventDefault();
|
|
78
80
|
e.stopPropagation();
|
|
79
81
|
},
|
|
80
82
|
style: {
|
|
81
83
|
display: showAction ? undefined : 'none'
|
|
82
84
|
},
|
|
83
|
-
children:
|
|
85
|
+
children: actions
|
|
84
86
|
}) : date && /*#__PURE__*/_jsx("div", {
|
|
85
87
|
className: cx(styles.time, classNames.time),
|
|
86
88
|
children: getChatItemTime(date)
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
export declare const useStyles: (props?:
|
|
1
|
+
export declare const useStyles: (props?: boolean | undefined) => import("antd-style").ReturnStyles<{
|
|
2
|
+
actions: import("antd-style").SerializedStyles;
|
|
2
3
|
active: import("antd-style").SerializedStyles;
|
|
3
4
|
container: import("antd-style").SerializedStyles;
|
|
4
5
|
content: import("antd-style").SerializedStyles;
|
|
5
6
|
desc: import("antd-style").SerializedStyles;
|
|
6
|
-
|
|
7
|
+
pin: import("antd-style").SerializedStyles;
|
|
7
8
|
time: import("antd-style").SerializedStyles;
|
|
8
9
|
title: import("antd-style").SerializedStyles;
|
|
9
10
|
}>;
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
|
-
export var useStyles = createStyles(function (_ref) {
|
|
4
|
+
export var useStyles = createStyles(function (_ref, pin) {
|
|
5
5
|
var css = _ref.css,
|
|
6
6
|
token = _ref.token;
|
|
7
7
|
return {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n right: 16px;\n transform: translateY(-50%);\n "]))),
|
|
9
|
+
active: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), token.colorText, token.colorFillSecondary, token.colorFill),
|
|
10
|
+
container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n cursor: pointer;\n color: ", ";\n background: ", ";\n transition: background-color 200ms ", ";\n\n &:active {\n background-color: ", " !important;\n }\n\n &:hover {\n background-color: ", ";\n }\n "])), token.colorTextTertiary, pin ? token.colorFillTertiary : 'transparent', token.motionEaseOut, pin ? token.colorFill : token.colorFillSecondary, pin ? token.colorFill : token.colorFillTertiary),
|
|
11
|
+
content: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n flex: 1;\n "]))),
|
|
12
|
+
desc: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow: hidden;\n\n width: 100%;\n margin-top: 2px;\n\n font-size: 12px;\n color: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n "])), token.colorTextDescription),
|
|
13
|
+
pin: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), token.colorFillTertiary),
|
|
14
|
+
time: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n font-size: 12px;\n color: ", ";\n "])), token.colorTextPlaceholder),
|
|
15
|
+
title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n overflow: hidden;\n\n width: 100%;\n\n font-size: 16px;\n color: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n "])), token.colorText)
|
|
15
16
|
};
|
|
16
17
|
});
|
package/es/List/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare const List: {
|
|
3
|
-
Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./ListItem").ListItemProps & import("react").HTMLAttributes<any> & import("react").RefAttributes<
|
|
3
|
+
Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./ListItem").ListItemProps & import("react").HTMLAttributes<any> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
4
4
|
};
|
|
5
5
|
export default List;
|