@zohoim/chat-components 0.0.21 → 0.0.24
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/AttachmentBubble/AttachmentBubble.js +3 -1
- package/es/AttachmentBubble/css/AttachmentBubble.module.css +17 -7
- package/es/AttachmentBubble/css/cssJSLogic.js +4 -2
- package/es/AttachmentBubble/props/propTypes.js +1 -0
- package/es/MessageBubble/css/MessageBubble.module.css +8 -1
- package/es/Theme/props/defaultProps.js +0 -2
- package/es/Theme/utils/getWrapperDivProps.js +7 -3
- package/es/Video/css/Video.module.css +1 -1
- package/es/im/IMMessageContent/IMMessageContent.js +1 -0
- package/package.json +2 -2
|
@@ -27,6 +27,7 @@ export default function AttachmentBubble(props) {
|
|
|
27
27
|
customProps,
|
|
28
28
|
attachmentDetails,
|
|
29
29
|
isFailed,
|
|
30
|
+
isSending,
|
|
30
31
|
onClick: propOnClick
|
|
31
32
|
} = props;
|
|
32
33
|
const {
|
|
@@ -51,7 +52,8 @@ export default function AttachmentBubble(props) {
|
|
|
51
52
|
const {
|
|
52
53
|
attachmentBubbleClass
|
|
53
54
|
} = cssJSLogic({
|
|
54
|
-
isFailed
|
|
55
|
+
isFailed,
|
|
56
|
+
isSending
|
|
55
57
|
}, newStyle);
|
|
56
58
|
return /*#__PURE__*/React.createElement(Container, {
|
|
57
59
|
alignBox: "row",
|
|
@@ -5,9 +5,18 @@
|
|
|
5
5
|
border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.failedAttachmentBubble{
|
|
9
|
-
background-color: var(
|
|
10
|
-
|
|
8
|
+
.failedAttachmentBubble {
|
|
9
|
+
background-color: var(
|
|
10
|
+
--imlib_chat_components_attachmentBubble_bg_color_failed
|
|
11
|
+
);
|
|
12
|
+
border-color: var(
|
|
13
|
+
--imlib_chat_components_attachmentBubble_border_color_failed
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.sendingdAttachmentBubble {
|
|
18
|
+
opacity: 0.1;
|
|
19
|
+
cursor: default;
|
|
11
20
|
}
|
|
12
21
|
|
|
13
22
|
.attachmentBubbleCursor {
|
|
@@ -30,11 +39,12 @@
|
|
|
30
39
|
border-left: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
|
|
31
40
|
}
|
|
32
41
|
|
|
33
|
-
.failedAttachmentBubble .attachmentBubbleIcon{
|
|
34
|
-
border-color: var(
|
|
42
|
+
.failedAttachmentBubble .attachmentBubbleIcon {
|
|
43
|
+
border-color: var(
|
|
44
|
+
--imlib_chat_components_attachmentBubble_border_color_failed
|
|
45
|
+
);
|
|
35
46
|
}
|
|
36
47
|
|
|
37
|
-
|
|
38
48
|
.attachmentBubbleIcon, .attachmentBubbleContent {
|
|
39
49
|
padding: var(--zd_size10) ;
|
|
40
|
-
}
|
|
50
|
+
}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { compileClassNames } from '@zohodesk/utils';
|
|
2
2
|
export default function cssJSLogic(props, style) {
|
|
3
3
|
const {
|
|
4
|
-
isFailed
|
|
4
|
+
isFailed,
|
|
5
|
+
isSending
|
|
5
6
|
} = props;
|
|
6
7
|
const attachmentBubbleClass = compileClassNames({
|
|
7
8
|
[style.attachmentBubble]: true,
|
|
8
9
|
[style.failedAttachmentBubble]: isFailed,
|
|
9
|
-
[style.attachmentBubbleCursor]:
|
|
10
|
+
[style.attachmentBubbleCursor]: !isSending,
|
|
11
|
+
[style.sendingdAttachmentBubble]: isSending
|
|
10
12
|
});
|
|
11
13
|
return {
|
|
12
14
|
attachmentBubbleClass
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
--messageBubble-message_owner_gap: 13px;
|
|
4
4
|
--messageBox-max_width: 410px;
|
|
5
5
|
--messageBox-footer_fontSize: var(--zd_font_size11);
|
|
6
|
-
--messageBox-owner_width: var(--
|
|
6
|
+
--messageBox-owner_width: var(--zd_size32);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.messageBubble {
|
|
@@ -39,6 +39,13 @@
|
|
|
39
39
|
flex-direction: column;
|
|
40
40
|
position: absolute;
|
|
41
41
|
top:0 ;
|
|
42
|
+
visibility: hidden;
|
|
43
|
+
opacity: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.messageBubble:hover .messageActionWrapper{
|
|
47
|
+
visibility: visible;
|
|
48
|
+
opacity: 1;
|
|
42
49
|
}
|
|
43
50
|
|
|
44
51
|
.messageActionWrapperEnd {
|
|
@@ -5,8 +5,12 @@ export default function getWrapperDivProps(_ref) {
|
|
|
5
5
|
mode,
|
|
6
6
|
theme
|
|
7
7
|
} = _ref;
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
let wrapperDivProps = {};
|
|
9
|
+
wrapperDivProps = modeKey && mode ? { ...wrapperDivProps,
|
|
10
|
+
[modeKey]: mode
|
|
11
|
+
} : {};
|
|
12
|
+
wrapperDivProps = themeKey && theme ? { ...wrapperDivProps,
|
|
10
13
|
[themeKey]: theme
|
|
11
|
-
};
|
|
14
|
+
} : {};
|
|
15
|
+
return wrapperDivProps;
|
|
12
16
|
}
|
|
@@ -103,6 +103,7 @@ export default function IMMessageContent(props) {
|
|
|
103
103
|
}, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AttachmentBubble, _extends({
|
|
104
104
|
attachmentDetails: attachmentDetails,
|
|
105
105
|
isFailed: isFailed,
|
|
106
|
+
isSending: isSending,
|
|
106
107
|
onClick: onAttachmentBubbleClick
|
|
107
108
|
}, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(LocationBubble, _extends({
|
|
108
109
|
isFailed: isFailed,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohoim/chat-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"description": "Chat Components",
|
|
5
5
|
"main": "es/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"jsdom": "22.1.0",
|
|
46
46
|
"react-to-jsx": "1.3.2"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "9d681517828c86660488a0acf37760afd96ae3e5"
|
|
49
49
|
}
|