@lobehub/ui 1.58.0 → 1.59.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/Icon/index.js +1 -1
- package/es/List/ListItem/index.js +42 -41
- package/es/List/ListItem/style.d.ts +1 -1
- package/es/List/ListItem/style.js +8 -13
- package/package.json +1 -1
package/es/Icon/index.js
CHANGED
|
@@ -68,7 +68,7 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
|
|
|
68
68
|
}, props), {}, {
|
|
69
69
|
children: /*#__PURE__*/_jsx(SvgIcon, {
|
|
70
70
|
color: color,
|
|
71
|
-
fill: fill,
|
|
71
|
+
fill: fill !== null && fill !== void 0 ? fill : 'transparent',
|
|
72
72
|
focusable: false,
|
|
73
73
|
height: fontSize,
|
|
74
74
|
size: fontSize,
|
|
@@ -33,14 +33,8 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, refere
|
|
|
33
33
|
var _useStyles = useStyles(),
|
|
34
34
|
styles = _useStyles.styles,
|
|
35
35
|
cx = _useStyles.cx;
|
|
36
|
-
return /*#__PURE__*/
|
|
37
|
-
align: 'flex-start',
|
|
36
|
+
return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
|
|
38
37
|
className: cx(styles.container, active && styles.active, className),
|
|
39
|
-
distribution: 'space-between',
|
|
40
|
-
gap: 8,
|
|
41
|
-
horizontal: true,
|
|
42
|
-
paddingBlock: 12,
|
|
43
|
-
paddingInline: 16,
|
|
44
38
|
ref: reference,
|
|
45
39
|
style: style
|
|
46
40
|
}, props), {}, {
|
|
@@ -50,41 +44,48 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, refere
|
|
|
50
44
|
onMouseLeave: function onMouseLeave() {
|
|
51
45
|
onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(false);
|
|
52
46
|
},
|
|
53
|
-
children:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
className: styles.content,
|
|
59
|
-
children: [/*#__PURE__*/_jsx(Flexbox, {
|
|
60
|
-
distribution: 'space-between',
|
|
61
|
-
horizontal: true,
|
|
62
|
-
children: /*#__PURE__*/_jsx("div", {
|
|
63
|
-
className: styles.title,
|
|
64
|
-
children: title
|
|
65
|
-
})
|
|
66
|
-
}), description && /*#__PURE__*/_jsx("div", {
|
|
67
|
-
className: styles.desc,
|
|
68
|
-
children: description
|
|
69
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
70
|
-
className: styles.textOverlay
|
|
71
|
-
})]
|
|
72
|
-
}), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
|
|
73
|
-
spin: true
|
|
74
|
-
}) : showAction ? /*#__PURE__*/_jsx(Flexbox, {
|
|
75
|
-
gap: 4,
|
|
47
|
+
children: /*#__PURE__*/_jsxs(Flexbox, {
|
|
48
|
+
align: 'flex-start',
|
|
49
|
+
className: styles.inner,
|
|
50
|
+
distribution: 'space-between',
|
|
51
|
+
gap: 8,
|
|
76
52
|
horizontal: true,
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
53
|
+
paddingBlock: 12,
|
|
54
|
+
paddingInline: 16,
|
|
55
|
+
children: [avatar !== null && avatar !== void 0 ? avatar : /*#__PURE__*/_jsx(MessageOutlined, {
|
|
56
|
+
style: {
|
|
57
|
+
marginTop: 4
|
|
58
|
+
}
|
|
59
|
+
}), /*#__PURE__*/_jsxs(Flexbox, {
|
|
60
|
+
className: styles.content,
|
|
61
|
+
children: [/*#__PURE__*/_jsx(Flexbox, {
|
|
62
|
+
distribution: 'space-between',
|
|
63
|
+
horizontal: true,
|
|
64
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
65
|
+
className: styles.title,
|
|
66
|
+
children: title
|
|
67
|
+
})
|
|
68
|
+
}), description && /*#__PURE__*/_jsx("div", {
|
|
69
|
+
className: styles.desc,
|
|
70
|
+
children: description
|
|
71
|
+
})]
|
|
72
|
+
}), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
|
|
73
|
+
spin: true
|
|
74
|
+
}) : showAction ? /*#__PURE__*/_jsx(Flexbox, {
|
|
75
|
+
gap: 4,
|
|
76
|
+
horizontal: true,
|
|
77
|
+
onClick: function onClick(e) {
|
|
78
|
+
e.stopPropagation();
|
|
79
|
+
},
|
|
80
|
+
style: {
|
|
81
|
+
display: showAction ? undefined : 'none'
|
|
82
|
+
},
|
|
83
|
+
children: renderActions
|
|
84
|
+
}) : date && /*#__PURE__*/_jsx("div", {
|
|
85
|
+
className: cx(styles.time, classNames.time),
|
|
86
|
+
children: getChatItemTime(date)
|
|
87
|
+
}), children]
|
|
88
|
+
})
|
|
88
89
|
}));
|
|
89
90
|
}));
|
|
90
91
|
export default ListItem;
|
|
@@ -3,7 +3,7 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
|
|
|
3
3
|
container: import("antd-style").SerializedStyles;
|
|
4
4
|
content: import("antd-style").SerializedStyles;
|
|
5
5
|
desc: import("antd-style").SerializedStyles;
|
|
6
|
-
|
|
6
|
+
inner: import("antd-style").SerializedStyles;
|
|
7
7
|
time: import("antd-style").SerializedStyles;
|
|
8
8
|
title: import("antd-style").SerializedStyles;
|
|
9
9
|
}>;
|
|
@@ -1,21 +1,16 @@
|
|
|
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;
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
|
-
import { convertAlphaToSolid } from "../../utils/colorUtils";
|
|
5
4
|
export var useStyles = createStyles(function (_ref) {
|
|
6
5
|
var css = _ref.css,
|
|
7
|
-
cx = _ref.cx,
|
|
8
6
|
token = _ref.token;
|
|
9
|
-
var textOverlay = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --overlay-background: ", ";\n\n position: absolute;\n z-index: 10;\n top: 0;\n right: 0;\n\n width: 32px;\n height: 44px;\n\n background: linear-gradient(to right, transparent, var(--overlay-background));\n "])), token.colorBgContainer);
|
|
10
|
-
var overlayColor = convertAlphaToSolid(token.colorFillContent, token.colorBgContainer);
|
|
11
|
-
var hoverOverlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .", " {\n --overlay-background: ", ";\n }\n "])), cx(textOverlay), overlayColor);
|
|
12
7
|
return {
|
|
13
|
-
active: css(
|
|
14
|
-
container: css(
|
|
15
|
-
content: css(
|
|
16
|
-
desc: css(
|
|
17
|
-
|
|
18
|
-
time: css(
|
|
19
|
-
title: css(
|
|
8
|
+
active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), token.colorText, token.colorFillTertiary, token.colorFill),
|
|
9
|
+
container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n cursor: pointer;\n color: ", ";\n transition: background-color 200ms ", ";\n\n &:active {\n background-color: ", " !important;\n }\n\n &:hover {\n background-color: ", ";\n }\n "])), token.colorTextTertiary, token.motionEaseOut, token.colorFill, token.colorFillSecondary),
|
|
10
|
+
content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n flex: 1;\n "]))),
|
|
11
|
+
desc: css(_templateObject4 || (_templateObject4 = _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),
|
|
12
|
+
inner: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n transition: scale 400ms ", ";\n\n &:active {\n scale: 0.95;\n }\n "])), token.motionEaseOut),
|
|
13
|
+
time: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 12px;\n color: ", ";\n "])), token.colorTextPlaceholder),
|
|
14
|
+
title: css(_templateObject7 || (_templateObject7 = _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)
|
|
20
15
|
};
|
|
21
16
|
});
|