@zohoim/chat-components 1.2.0 → 1.2.1-beta-2
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/README.md +4 -0
- package/es/icons/factory/common/mobile.svg +3 -0
- package/es/icons/iconSrc/common/Mobile.js +13 -0
- package/es/icons/iconSrc/common/index.js +2 -1
- package/es/im/IMMessage/IMMessage.js +3 -1
- package/es/im/IMMessageMeta/IMMessageMeta.js +20 -4
- package/es/im/IMMessageMeta/css/IMMessageMeta.module.css +5 -2
- package/lib/icons/factory/common/mobile.svg +3 -0
- package/lib/icons/iconSrc/common/Mobile.js +25 -0
- package/lib/icons/iconSrc/common/index.js +8 -0
- package/lib/im/IMMessage/IMMessage.js +3 -1
- package/lib/im/IMMessageMeta/IMMessageMeta.js +31 -5
- package/lib/im/IMMessageMeta/css/IMMessageMeta.module.css +5 -2
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -10,6 +10,10 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
|
|
|
10
10
|
|
|
11
11
|
> import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
|
|
12
12
|
|
|
13
|
+
# 1.2.1
|
|
14
|
+
|
|
15
|
+
- The direction constant has been updated from "IN/OUT" to "in/out".
|
|
16
|
+
|
|
13
17
|
# 1.2.0
|
|
14
18
|
|
|
15
19
|
- In the chat components, integrationService key name is changed to integrationServiceId
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M8.082 1.35645H3.726C3.40774 1.35645 3.10252 1.48287 2.87747 1.70792C2.65243 1.93296 2.526 2.23819 2.526 2.55645V9.60045C2.526 9.91871 2.65243 10.2239 2.87747 10.449C3.10252 10.674 3.40774 10.8004 3.726 10.8004H8.082C8.40026 10.8004 8.70549 10.674 8.93053 10.449C9.15557 10.2239 9.282 9.91871 9.282 9.60045V2.55645C9.282 2.23819 9.15557 1.93296 8.93053 1.70792C8.70549 1.48287 8.40026 1.35645 8.082 1.35645ZM8.682 9.60645C8.682 9.76558 8.61879 9.91819 8.50627 10.0307C8.39374 10.1432 8.24113 10.2064 8.082 10.2064H3.726C3.56687 10.2064 3.41426 10.1432 3.30174 10.0307C3.18922 9.91819 3.126 9.76558 3.126 9.60645V2.55645C3.126 2.39732 3.18922 2.2447 3.30174 2.13218C3.41426 2.01966 3.56687 1.95645 3.726 1.95645H8.082C8.24113 1.95645 8.39374 2.01966 8.50627 2.13218C8.61879 2.2447 8.682 2.39732 8.682 2.55645V9.60645ZM6.333 9.06045C6.33241 9.14516 6.30675 9.22781 6.25925 9.29796C6.21175 9.36812 6.14454 9.42263 6.0661 9.45464C5.98766 9.48665 5.9015 9.49472 5.81848 9.47783C5.73546 9.46094 5.6593 9.41985 5.59961 9.35974C5.53991 9.29962 5.49935 9.22318 5.48304 9.14004C5.46673 9.05691 5.4754 8.9708 5.50795 8.89259C5.54051 8.81437 5.59549 8.74755 5.66598 8.70054C5.73646 8.65353 5.81928 8.62845 5.904 8.62845C5.96059 8.62844 6.01662 8.63964 6.06887 8.66139C6.12111 8.68313 6.16854 8.715 6.20842 8.75516C6.24829 8.79531 6.27983 8.84296 6.30121 8.89535C6.32259 8.94775 6.3334 9.00386 6.333 9.06045V9.06045ZM6.861 3.15945C6.861 3.23901 6.82939 3.31532 6.77313 3.37158C6.71687 3.42784 6.64057 3.45945 6.561 3.45945H5.247C5.16744 3.45945 5.09113 3.42784 5.03487 3.37158C4.97861 3.31532 4.947 3.23901 4.947 3.15945C4.947 3.07988 4.97861 3.00357 5.03487 2.94731C5.09113 2.89105 5.16744 2.85945 5.247 2.85945H6.561C6.6004 2.85945 6.63941 2.86721 6.67581 2.88228C6.7122 2.89736 6.74528 2.91946 6.77313 2.94731C6.80099 2.97517 6.82309 3.00824 6.83817 3.04464C6.85324 3.08104 6.861 3.12005 6.861 3.15945V3.15945Z" fill="#9C9FAB"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import Icon from '@zohodesk/icon/es/Icon/Icon';
|
|
4
|
+
export default function IconComponent(props) {
|
|
5
|
+
return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
|
|
6
|
+
id: "mobile",
|
|
7
|
+
viewBox: "0 0 12 12",
|
|
8
|
+
fill: "none"
|
|
9
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
10
|
+
d: "M8.082 1.35645H3.726C3.40774 1.35645 3.10252 1.48287 2.87747 1.70792C2.65243 1.93296 2.526 2.23819 2.526 2.55645V9.60045C2.526 9.91871 2.65243 10.2239 2.87747 10.449C3.10252 10.674 3.40774 10.8004 3.726 10.8004H8.082C8.40026 10.8004 8.70549 10.674 8.93053 10.449C9.15557 10.2239 9.282 9.91871 9.282 9.60045V2.55645C9.282 2.23819 9.15557 1.93296 8.93053 1.70792C8.70549 1.48287 8.40026 1.35645 8.082 1.35645ZM8.682 9.60645C8.682 9.76558 8.61879 9.91819 8.50627 10.0307C8.39374 10.1432 8.24113 10.2064 8.082 10.2064H3.726C3.56687 10.2064 3.41426 10.1432 3.30174 10.0307C3.18922 9.91819 3.126 9.76558 3.126 9.60645V2.55645C3.126 2.39732 3.18922 2.2447 3.30174 2.13218C3.41426 2.01966 3.56687 1.95645 3.726 1.95645H8.082C8.24113 1.95645 8.39374 2.01966 8.50627 2.13218C8.61879 2.2447 8.682 2.39732 8.682 2.55645V9.60645ZM6.333 9.06045C6.33241 9.14516 6.30675 9.22781 6.25925 9.29796C6.21175 9.36812 6.14454 9.42263 6.0661 9.45464C5.98766 9.48665 5.9015 9.49472 5.81848 9.47783C5.73546 9.46094 5.6593 9.41985 5.59961 9.35974C5.53991 9.29962 5.49935 9.22318 5.48304 9.14004C5.46673 9.05691 5.4754 8.9708 5.50795 8.89259C5.54051 8.81437 5.59549 8.74755 5.66598 8.70054C5.73646 8.65353 5.81928 8.62845 5.904 8.62845C5.96059 8.62844 6.01662 8.63964 6.06887 8.66139C6.12111 8.68313 6.16854 8.715 6.20842 8.75516C6.24829 8.79531 6.27983 8.84296 6.30121 8.89535C6.32259 8.94775 6.3334 9.00386 6.333 9.06045V9.06045ZM6.861 3.15945C6.861 3.23901 6.82939 3.31532 6.77313 3.37158C6.71687 3.42784 6.64057 3.45945 6.561 3.45945H5.247C5.16744 3.45945 5.09113 3.42784 5.03487 3.37158C4.97861 3.31532 4.947 3.23901 4.947 3.15945C4.947 3.07988 4.97861 3.00357 5.03487 2.94731C5.09113 2.89105 5.16744 2.85945 5.247 2.85945H6.561C6.6004 2.85945 6.63941 2.86721 6.67581 2.88228C6.7122 2.89736 6.74528 2.91946 6.77313 2.94731C6.80099 2.97517 6.82309 3.00824 6.83817 3.04464C6.85324 3.08104 6.861 3.12005 6.861 3.15945V3.15945Z"
|
|
11
|
+
})));
|
|
12
|
+
}
|
|
13
|
+
IconComponent.propTypes = Icon.propTypes;
|
|
@@ -78,6 +78,7 @@ export default function IMMessage(props) {
|
|
|
78
78
|
messageStatus,
|
|
79
79
|
isFailedMessage,
|
|
80
80
|
isSendingMessage,
|
|
81
|
+
isSentViaMobile,
|
|
81
82
|
messageStatusTitle,
|
|
82
83
|
isValidAttachment,
|
|
83
84
|
dateTimeDetails,
|
|
@@ -102,12 +103,13 @@ export default function IMMessage(props) {
|
|
|
102
103
|
return /*#__PURE__*/React.createElement(IMMessageMeta, _extends({
|
|
103
104
|
autoMessageType: autoMessageType,
|
|
104
105
|
direction: direction,
|
|
106
|
+
isSentViaMobile: isSentViaMobile,
|
|
105
107
|
isValidAttachment: isValidAttachment,
|
|
106
108
|
messageMetaInfoI18N: messageMetaInfoI18N,
|
|
107
109
|
time: isShowMessageTime ? displayDateTime : '',
|
|
108
110
|
timeTooltip: tooltip
|
|
109
111
|
}, imMessageMetaProps));
|
|
110
|
-
}, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N]);
|
|
112
|
+
}, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N, isSentViaMobile]);
|
|
111
113
|
/** ** Render Message Content *** */
|
|
112
114
|
|
|
113
115
|
const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
/** ** Libraries *** */
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
5
5
|
/** ** Hooks *** */
|
|
6
6
|
|
|
7
7
|
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
@@ -21,8 +21,13 @@ import style from './css/IMMessageMeta.module.css';
|
|
|
21
21
|
|
|
22
22
|
import { Container } from '@zohodesk/components/es/Layout';
|
|
23
23
|
import IMMessageMetaInfo from '../IMMessageMetaInfo/IMMessageMetaInfo';
|
|
24
|
+
import Mobile from '../../icons/iconSrc/common/Mobile';
|
|
25
|
+
const iconMapping = {
|
|
26
|
+
mobile: Mobile
|
|
27
|
+
};
|
|
24
28
|
export default function IMMessageMeta(props) {
|
|
25
29
|
const {
|
|
30
|
+
isSentViaMobile,
|
|
26
31
|
direction,
|
|
27
32
|
customStyle,
|
|
28
33
|
time,
|
|
@@ -37,11 +42,14 @@ export default function IMMessageMeta(props) {
|
|
|
37
42
|
} = customProps;
|
|
38
43
|
const {
|
|
39
44
|
imMessageMetaInfoTitle,
|
|
40
|
-
imMessageMetaInfoContent
|
|
45
|
+
imMessageMetaInfoContent,
|
|
46
|
+
imMessageMetaInfoIcon,
|
|
47
|
+
imMessageMetaInfoIconTitle
|
|
41
48
|
} = useIMMessageMeta({
|
|
42
49
|
messageMetaInfoI18N,
|
|
43
50
|
autoMessageType,
|
|
44
|
-
isValidAttachment
|
|
51
|
+
isValidAttachment,
|
|
52
|
+
isSentViaMobile
|
|
45
53
|
});
|
|
46
54
|
/* External CSS Customization */
|
|
47
55
|
|
|
@@ -54,10 +62,18 @@ export default function IMMessageMeta(props) {
|
|
|
54
62
|
} = cssJSLogic({
|
|
55
63
|
direction
|
|
56
64
|
}, newStyle);
|
|
65
|
+
const iconStyle = useMemo(() => ({
|
|
66
|
+
base: newStyle.icon
|
|
67
|
+
}), [newStyle.icon]);
|
|
68
|
+
const IconComponent = imMessageMetaInfoIcon ? iconMapping[imMessageMetaInfoIcon] : null;
|
|
57
69
|
return /*#__PURE__*/React.createElement(React.Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/React.createElement(Container, {
|
|
58
70
|
alignBox: "row",
|
|
59
71
|
className: imMessageMetaClass
|
|
60
|
-
},
|
|
72
|
+
}, IconComponent ? /*#__PURE__*/React.createElement("div", {
|
|
73
|
+
"data-title": imMessageMetaInfoIconTitle
|
|
74
|
+
}, /*#__PURE__*/React.createElement(IconComponent, {
|
|
75
|
+
customStyle: iconStyle
|
|
76
|
+
})) : null, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, _extends({
|
|
61
77
|
imMessageMetaInfoContent: imMessageMetaInfoContent,
|
|
62
78
|
imMessageMetaInfoTitle: imMessageMetaInfoTitle
|
|
63
79
|
}, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -38,9 +38,12 @@
|
|
|
38
38
|
|
|
39
39
|
.dateTime {
|
|
40
40
|
font-size: var(--zd_font_size11) ;
|
|
41
|
-
/* max-width: 100px; */
|
|
42
|
-
/* display: flex; */
|
|
43
41
|
max-width: var(--zd_size100) ;
|
|
44
42
|
composes: dotted from '../../css/common.module.css';
|
|
45
43
|
color: var(--imlib_chat_components_imMessageMeta_time_color);
|
|
46
44
|
}
|
|
45
|
+
|
|
46
|
+
.icon {
|
|
47
|
+
width: var(--zd_size14) ;
|
|
48
|
+
height: var(--zd_size14) ;
|
|
49
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M8.082 1.35645H3.726C3.40774 1.35645 3.10252 1.48287 2.87747 1.70792C2.65243 1.93296 2.526 2.23819 2.526 2.55645V9.60045C2.526 9.91871 2.65243 10.2239 2.87747 10.449C3.10252 10.674 3.40774 10.8004 3.726 10.8004H8.082C8.40026 10.8004 8.70549 10.674 8.93053 10.449C9.15557 10.2239 9.282 9.91871 9.282 9.60045V2.55645C9.282 2.23819 9.15557 1.93296 8.93053 1.70792C8.70549 1.48287 8.40026 1.35645 8.082 1.35645ZM8.682 9.60645C8.682 9.76558 8.61879 9.91819 8.50627 10.0307C8.39374 10.1432 8.24113 10.2064 8.082 10.2064H3.726C3.56687 10.2064 3.41426 10.1432 3.30174 10.0307C3.18922 9.91819 3.126 9.76558 3.126 9.60645V2.55645C3.126 2.39732 3.18922 2.2447 3.30174 2.13218C3.41426 2.01966 3.56687 1.95645 3.726 1.95645H8.082C8.24113 1.95645 8.39374 2.01966 8.50627 2.13218C8.61879 2.2447 8.682 2.39732 8.682 2.55645V9.60645ZM6.333 9.06045C6.33241 9.14516 6.30675 9.22781 6.25925 9.29796C6.21175 9.36812 6.14454 9.42263 6.0661 9.45464C5.98766 9.48665 5.9015 9.49472 5.81848 9.47783C5.73546 9.46094 5.6593 9.41985 5.59961 9.35974C5.53991 9.29962 5.49935 9.22318 5.48304 9.14004C5.46673 9.05691 5.4754 8.9708 5.50795 8.89259C5.54051 8.81437 5.59549 8.74755 5.66598 8.70054C5.73646 8.65353 5.81928 8.62845 5.904 8.62845C5.96059 8.62844 6.01662 8.63964 6.06887 8.66139C6.12111 8.68313 6.16854 8.715 6.20842 8.75516C6.24829 8.79531 6.27983 8.84296 6.30121 8.89535C6.32259 8.94775 6.3334 9.00386 6.333 9.06045V9.06045ZM6.861 3.15945C6.861 3.23901 6.82939 3.31532 6.77313 3.37158C6.71687 3.42784 6.64057 3.45945 6.561 3.45945H5.247C5.16744 3.45945 5.09113 3.42784 5.03487 3.37158C4.97861 3.31532 4.947 3.23901 4.947 3.15945C4.947 3.07988 4.97861 3.00357 5.03487 2.94731C5.09113 2.89105 5.16744 2.85945 5.247 2.85945H6.561C6.6004 2.85945 6.63941 2.86721 6.67581 2.88228C6.7122 2.89736 6.74528 2.91946 6.77313 2.94731C6.80099 2.97517 6.82309 3.00824 6.83817 3.04464C6.85324 3.08104 6.861 3.12005 6.861 3.15945V3.15945Z" fill="#9C9FAB"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = IconComponent;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _Icon = _interopRequireDefault(require("@zohodesk/icon/es/Icon/Icon"));
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
+
|
|
14
|
+
/* eslint-disable */
|
|
15
|
+
function IconComponent(props) {
|
|
16
|
+
return /*#__PURE__*/_react["default"].createElement(_Icon["default"], props, /*#__PURE__*/_react["default"].createElement("svg", {
|
|
17
|
+
id: "mobile",
|
|
18
|
+
viewBox: "0 0 12 12",
|
|
19
|
+
fill: "none"
|
|
20
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
21
|
+
d: "M8.082 1.35645H3.726C3.40774 1.35645 3.10252 1.48287 2.87747 1.70792C2.65243 1.93296 2.526 2.23819 2.526 2.55645V9.60045C2.526 9.91871 2.65243 10.2239 2.87747 10.449C3.10252 10.674 3.40774 10.8004 3.726 10.8004H8.082C8.40026 10.8004 8.70549 10.674 8.93053 10.449C9.15557 10.2239 9.282 9.91871 9.282 9.60045V2.55645C9.282 2.23819 9.15557 1.93296 8.93053 1.70792C8.70549 1.48287 8.40026 1.35645 8.082 1.35645ZM8.682 9.60645C8.682 9.76558 8.61879 9.91819 8.50627 10.0307C8.39374 10.1432 8.24113 10.2064 8.082 10.2064H3.726C3.56687 10.2064 3.41426 10.1432 3.30174 10.0307C3.18922 9.91819 3.126 9.76558 3.126 9.60645V2.55645C3.126 2.39732 3.18922 2.2447 3.30174 2.13218C3.41426 2.01966 3.56687 1.95645 3.726 1.95645H8.082C8.24113 1.95645 8.39374 2.01966 8.50627 2.13218C8.61879 2.2447 8.682 2.39732 8.682 2.55645V9.60645ZM6.333 9.06045C6.33241 9.14516 6.30675 9.22781 6.25925 9.29796C6.21175 9.36812 6.14454 9.42263 6.0661 9.45464C5.98766 9.48665 5.9015 9.49472 5.81848 9.47783C5.73546 9.46094 5.6593 9.41985 5.59961 9.35974C5.53991 9.29962 5.49935 9.22318 5.48304 9.14004C5.46673 9.05691 5.4754 8.9708 5.50795 8.89259C5.54051 8.81437 5.59549 8.74755 5.66598 8.70054C5.73646 8.65353 5.81928 8.62845 5.904 8.62845C5.96059 8.62844 6.01662 8.63964 6.06887 8.66139C6.12111 8.68313 6.16854 8.715 6.20842 8.75516C6.24829 8.79531 6.27983 8.84296 6.30121 8.89535C6.32259 8.94775 6.3334 9.00386 6.333 9.06045V9.06045ZM6.861 3.15945C6.861 3.23901 6.82939 3.31532 6.77313 3.37158C6.71687 3.42784 6.64057 3.45945 6.561 3.45945H5.247C5.16744 3.45945 5.09113 3.42784 5.03487 3.37158C4.97861 3.31532 4.947 3.23901 4.947 3.15945C4.947 3.07988 4.97861 3.00357 5.03487 2.94731C5.09113 2.89105 5.16744 2.85945 5.247 2.85945H6.561C6.6004 2.85945 6.63941 2.86721 6.67581 2.88228C6.7122 2.89736 6.74528 2.91946 6.77313 2.94731C6.80099 2.97517 6.82309 3.00824 6.83817 3.04464C6.85324 3.08104 6.861 3.12005 6.861 3.15945V3.15945Z"
|
|
22
|
+
})));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
IconComponent.propTypes = _Icon["default"].propTypes;
|
|
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "Article", {
|
|
|
15
15
|
return _Article["default"];
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
Object.defineProperty(exports, "Mobile", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _Mobile["default"];
|
|
22
|
+
}
|
|
23
|
+
});
|
|
18
24
|
Object.defineProperty(exports, "Reply", {
|
|
19
25
|
enumerable: true,
|
|
20
26
|
get: function get() {
|
|
@@ -28,4 +34,6 @@ var _Article = _interopRequireDefault(require("./Article"));
|
|
|
28
34
|
|
|
29
35
|
var _Reply = _interopRequireDefault(require("./Reply"));
|
|
30
36
|
|
|
37
|
+
var _Mobile = _interopRequireDefault(require("./Mobile"));
|
|
38
|
+
|
|
31
39
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -103,6 +103,7 @@ function IMMessage(props) {
|
|
|
103
103
|
messageStatus = _useIMMessage.messageStatus,
|
|
104
104
|
isFailedMessage = _useIMMessage.isFailedMessage,
|
|
105
105
|
isSendingMessage = _useIMMessage.isSendingMessage,
|
|
106
|
+
isSentViaMobile = _useIMMessage.isSentViaMobile,
|
|
106
107
|
messageStatusTitle = _useIMMessage.messageStatusTitle,
|
|
107
108
|
isValidAttachment = _useIMMessage.isValidAttachment,
|
|
108
109
|
dateTimeDetails = _useIMMessage.dateTimeDetails,
|
|
@@ -121,12 +122,13 @@ function IMMessage(props) {
|
|
|
121
122
|
return /*#__PURE__*/_react["default"].createElement(_IMMessageMeta["default"], _extends({
|
|
122
123
|
autoMessageType: autoMessageType,
|
|
123
124
|
direction: direction,
|
|
125
|
+
isSentViaMobile: isSentViaMobile,
|
|
124
126
|
isValidAttachment: isValidAttachment,
|
|
125
127
|
messageMetaInfoI18N: messageMetaInfoI18N,
|
|
126
128
|
time: isShowMessageTime ? displayDateTime : '',
|
|
127
129
|
timeTooltip: tooltip
|
|
128
130
|
}, imMessageMetaProps));
|
|
129
|
-
}, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N]);
|
|
131
|
+
}, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N, isSentViaMobile]);
|
|
130
132
|
/** ** Render Message Content *** */
|
|
131
133
|
|
|
132
134
|
var handleRenderMessage = (0, _react.useCallback)(function () {
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
8
|
exports["default"] = IMMessageMeta;
|
|
7
9
|
|
|
8
|
-
var _react =
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
11
|
|
|
10
12
|
var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
|
|
11
13
|
|
|
@@ -25,12 +27,23 @@ var _Layout = require("@zohodesk/components/es/Layout");
|
|
|
25
27
|
|
|
26
28
|
var _IMMessageMetaInfo = _interopRequireDefault(require("../IMMessageMetaInfo/IMMessageMetaInfo"));
|
|
27
29
|
|
|
30
|
+
var _Mobile = _interopRequireDefault(require("../../icons/iconSrc/common/Mobile"));
|
|
31
|
+
|
|
28
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
33
|
|
|
34
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
35
|
+
|
|
36
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
|
+
|
|
30
38
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
31
39
|
|
|
40
|
+
var iconMapping = {
|
|
41
|
+
mobile: _Mobile["default"]
|
|
42
|
+
};
|
|
43
|
+
|
|
32
44
|
function IMMessageMeta(props) {
|
|
33
|
-
var
|
|
45
|
+
var isSentViaMobile = props.isSentViaMobile,
|
|
46
|
+
direction = props.direction,
|
|
34
47
|
customStyle = props.customStyle,
|
|
35
48
|
time = props.time,
|
|
36
49
|
timeTooltip = props.timeTooltip,
|
|
@@ -44,10 +57,13 @@ function IMMessageMeta(props) {
|
|
|
44
57
|
var _useIMMessageMeta = (0, _useIMMessageMeta2["default"])({
|
|
45
58
|
messageMetaInfoI18N: messageMetaInfoI18N,
|
|
46
59
|
autoMessageType: autoMessageType,
|
|
47
|
-
isValidAttachment: isValidAttachment
|
|
60
|
+
isValidAttachment: isValidAttachment,
|
|
61
|
+
isSentViaMobile: isSentViaMobile
|
|
48
62
|
}),
|
|
49
63
|
imMessageMetaInfoTitle = _useIMMessageMeta.imMessageMetaInfoTitle,
|
|
50
|
-
imMessageMetaInfoContent = _useIMMessageMeta.imMessageMetaInfoContent
|
|
64
|
+
imMessageMetaInfoContent = _useIMMessageMeta.imMessageMetaInfoContent,
|
|
65
|
+
imMessageMetaInfoIcon = _useIMMessageMeta.imMessageMetaInfoIcon,
|
|
66
|
+
imMessageMetaInfoIconTitle = _useIMMessageMeta.imMessageMetaInfoIconTitle;
|
|
51
67
|
/* External CSS Customization */
|
|
52
68
|
|
|
53
69
|
|
|
@@ -60,10 +76,20 @@ function IMMessageMeta(props) {
|
|
|
60
76
|
imMessageMetaClass = _cssJSLogic.imMessageMetaClass,
|
|
61
77
|
dotClass = _cssJSLogic.dotClass;
|
|
62
78
|
|
|
79
|
+
var iconStyle = (0, _react.useMemo)(function () {
|
|
80
|
+
return {
|
|
81
|
+
base: newStyle.icon
|
|
82
|
+
};
|
|
83
|
+
}, [newStyle.icon]);
|
|
84
|
+
var IconComponent = imMessageMetaInfoIcon ? iconMapping[imMessageMetaInfoIcon] : null;
|
|
63
85
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
64
86
|
alignBox: "row",
|
|
65
87
|
className: imMessageMetaClass
|
|
66
|
-
},
|
|
88
|
+
}, IconComponent ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
89
|
+
"data-title": imMessageMetaInfoIconTitle
|
|
90
|
+
}, /*#__PURE__*/_react["default"].createElement(IconComponent, {
|
|
91
|
+
customStyle: iconStyle
|
|
92
|
+
})) : null, imMessageMetaInfoContent ? /*#__PURE__*/_react["default"].createElement(_IMMessageMetaInfo["default"], _extends({
|
|
67
93
|
imMessageMetaInfoContent: imMessageMetaInfoContent,
|
|
68
94
|
imMessageMetaInfoTitle: imMessageMetaInfoTitle
|
|
69
95
|
}, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -38,9 +38,12 @@
|
|
|
38
38
|
|
|
39
39
|
.dateTime {
|
|
40
40
|
font-size: var(--zd_font_size11) ;
|
|
41
|
-
/* max-width: 100px; */
|
|
42
|
-
/* display: flex; */
|
|
43
41
|
max-width: var(--zd_size100) ;
|
|
44
42
|
composes: dotted from '../../css/common.module.css';
|
|
45
43
|
color: var(--imlib_chat_components_imMessageMeta_time_color);
|
|
46
44
|
}
|
|
45
|
+
|
|
46
|
+
.icon {
|
|
47
|
+
width: var(--zd_size14) ;
|
|
48
|
+
height: var(--zd_size14) ;
|
|
49
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohoim/chat-components",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1-beta-2",
|
|
4
4
|
"description": "Chat Components",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@zoho/SecurityJS": "7.2.4",
|
|
36
36
|
"@zohodesk-private/color-variable-preprocessor": "1.2.1",
|
|
37
37
|
"@zohodesk-private/css-variable-migrator": "1.0.8",
|
|
38
|
-
"@zohodesk/a11y": "2.3.
|
|
38
|
+
"@zohodesk/a11y": "2.3.8",
|
|
39
39
|
"@zohodesk/components": "1.4.3",
|
|
40
40
|
"@zohodesk/hooks": "2.0.5",
|
|
41
41
|
"@zohodesk/icon": "1.3.15",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"@zohodesk/utils": "1.3.14",
|
|
46
46
|
"@zohodesk/variables": "1.0.0",
|
|
47
47
|
"@zohodesk/virtualizer": "1.0.13",
|
|
48
|
-
"@zohoim/chat-components-hooks": "1.2.
|
|
49
|
-
"@zohoim/chat-components-utils": "1.2.
|
|
48
|
+
"@zohoim/chat-components-hooks": "1.2.1-beta-2",
|
|
49
|
+
"@zohoim/chat-components-utils": "1.2.1-beta-2",
|
|
50
50
|
"html-to-react": "1.7.0 ",
|
|
51
51
|
"jsdom": "23.0.0",
|
|
52
52
|
"react-sortable-hoc": "1.11.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"@zoho/SecurityJS": "7.2.4",
|
|
58
|
-
"@zohodesk/a11y": "2.3.
|
|
58
|
+
"@zohodesk/a11y": "2.3.8",
|
|
59
59
|
"@zohodesk/components": "1.4.3",
|
|
60
60
|
"@zohodesk/hooks": "2.0.5",
|
|
61
61
|
"@zohodesk/icon": "1.3.15",
|
|
@@ -65,10 +65,10 @@
|
|
|
65
65
|
"@zohodesk/utils": "1.3.14",
|
|
66
66
|
"@zohodesk/variables": "1.0.0",
|
|
67
67
|
"@zohodesk/virtualizer": "1.0.13",
|
|
68
|
-
"@zohoim/chat-components-hooks": "1.1
|
|
69
|
-
"@zohoim/chat-components-utils": "1.1
|
|
68
|
+
"@zohoim/chat-components-hooks": "1.2.1",
|
|
69
|
+
"@zohoim/chat-components-utils": "1.2.1",
|
|
70
70
|
"react-sortable-hoc": "1.11.0",
|
|
71
71
|
"velocity-react": "1.4.3"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "f2434674a311d96028e01ee1c5d28ab8733bb705"
|
|
74
74
|
}
|