@zohoim/chat-components 0.0.21 → 0.0.25

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.
Files changed (20) hide show
  1. package/es/AttachmentBubble/AttachmentBubble.js +3 -1
  2. package/es/AttachmentBubble/css/AttachmentBubble.module.css +17 -7
  3. package/es/AttachmentBubble/css/cssJSLogic.js +4 -2
  4. package/es/AttachmentBubble/props/propTypes.js +1 -0
  5. package/es/Message/Message.js +1 -1
  6. package/es/Message/props/defaultProps.js +2 -1
  7. package/es/Message/props/propTypes.js +1 -0
  8. package/es/MessageBubble/css/MessageBubble.module.css +8 -1
  9. package/es/Theme/props/defaultProps.js +0 -2
  10. package/es/Theme/themeVariables/commonThemeColorVariable.js +2 -1
  11. package/es/Theme/themeVariables/light/commonColorVariable.js +2 -1
  12. package/es/Theme/utils/getWrapperDivProps.js +7 -3
  13. package/es/Video/css/Video.module.css +1 -1
  14. package/es/im/IMIntegrationIcon/IMIntegrationIcon.js +4 -2
  15. package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css +7 -3
  16. package/es/im/IMIntegrationIcon/css/cssJSLogic.js +6 -5
  17. package/es/im/IMMessage/IMMessage.js +3 -1
  18. package/es/im/IMMessage/props/propTypes.js +1 -0
  19. package/es/im/IMMessageContent/IMMessageContent.js +1 -0
  20. package/package.json +4 -4
package/es/AttachmentBubble/AttachmentBubble.js CHANGED
@@ -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",
package/es/AttachmentBubble/css/AttachmentBubble.module.css CHANGED
@@ -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(--imlib_chat_components_attachmentBubble_bg_color_failed);
10
- border-color: var(--imlib_chat_components_attachmentBubble_border_color_failed);
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(--imlib_chat_components_attachmentBubble_border_color_failed);
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
+ }
package/es/AttachmentBubble/css/cssJSLogic.js CHANGED
@@ -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]: true
10
+ [style.attachmentBubbleCursor]: !isSending,
11
+ [style.sendingdAttachmentBubble]: isSending
10
12
  });
11
13
  return {
12
14
  attachmentBubbleClass
package/es/AttachmentBubble/props/propTypes.js CHANGED
@@ -12,6 +12,7 @@ const attachmentBubblePropTypes = {
12
12
  }),
13
13
  customStyle: PropTypes.object,
14
14
  isFailed: PropTypes.bool,
15
+ isSending: PropTypes.bool,
15
16
  onClick: PropTypes.func
16
17
  };
17
18
  export default attachmentBubblePropTypes;
package/es/Message/Message.js CHANGED
@@ -33,6 +33,7 @@ export default function Message(props) {
33
33
  renderSecondaryActions,
34
34
  onSelectAction,
35
35
  onMouseEnterAction,
36
+ needMessageActions,
36
37
  renderContent,
37
38
  customProps
38
39
  } = props;
@@ -110,7 +111,6 @@ export default function Message(props) {
110
111
  };
111
112
  return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
112
113
  }, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps]);
113
- const needMessageActions = !!actions.length;
114
114
  return /*#__PURE__*/React.createElement(MessageBubble, _extends({
115
115
  direction: direction,
116
116
  isActive: isActive,
package/es/Message/props/defaultProps.js CHANGED
@@ -6,6 +6,7 @@ const messageDefaultProps = {
6
6
  isActive: false,
7
7
  isShowSender: true,
8
8
  customProps: dummyObject,
9
- actions: dummyArray
9
+ actions: dummyArray,
10
+ needMessageActions: true
10
11
  };
11
12
  export default messageDefaultProps;
package/es/Message/props/propTypes.js CHANGED
@@ -29,6 +29,7 @@ const messagePropTypes = {
29
29
  })),
30
30
  onSelectAction: PropTypes.func.isRequired,
31
31
  renderSecondaryActions: PropTypes.func,
32
+ needMessageActions: PropTypes.bool,
32
33
  customProps: PropTypes.shape({
33
34
  messageActionsProps: PropTypes.object,
34
35
  messageBoxProps: PropTypes.object,
package/es/MessageBubble/css/MessageBubble.module.css CHANGED
@@ -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(--zd_size34);
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 {
package/es/Theme/props/defaultProps.js CHANGED
@@ -5,8 +5,6 @@ const themeWrapperDefaultProps = {
5
5
  mode: 'LIGHT',
6
6
  theme: 'BLUE',
7
7
  needTooltip: true,
8
- modeKey: 'data-mode',
9
- themeKey: 'data-theme',
10
8
  tooltipCustomStyle: dummyObject
11
9
  };
12
10
  export default themeWrapperDefaultProps;
package/es/Theme/themeVariables/commonThemeColorVariable.js CHANGED
@@ -7,7 +7,8 @@ export const imIntegrationIcon = {
7
7
  line_color: '#01b901',
8
8
  twillio_color: '#f22f46',
9
9
  instagram_color: 'red',
10
- asap_color: '#0a73eb'
10
+ asap_color: '#0a73eb',
11
+ fb_color: '#006aff'
11
12
  };
12
13
  export const imTtIcon = {
13
14
  path0_color: '#ffffff40',
package/es/Theme/themeVariables/light/commonColorVariable.js CHANGED
@@ -26,7 +26,8 @@ export const imIntegrationIcon = {
26
26
  line_color: '#01b901',
27
27
  twillio_color: '#f22f46',
28
28
  instagram_color: 'red',
29
- asap_color: '#0a73eb'
29
+ asap_color: '#0a73eb',
30
+ fb_color: '#006aff'
30
31
  };
31
32
  export const imTtIcon = {
32
33
  path0_color: 'rgba(200,203,220,0.7)',
package/es/Theme/utils/getWrapperDivProps.js CHANGED
@@ -5,8 +5,12 @@ export default function getWrapperDivProps(_ref) {
5
5
  mode,
6
6
  theme
7
7
  } = _ref;
8
- return {
9
- [modeKey]: mode,
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
  }
package/es/Video/css/Video.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .video {
2
- max-height: 100% ;
2
+ height: 100% ;
3
3
  width: 100% ;
4
4
  border-radius: 3px;
5
5
  }
package/es/im/IMIntegrationIcon/IMIntegrationIcon.js CHANGED
@@ -19,7 +19,8 @@ const {
19
19
  IM_TALK,
20
20
  WECHAT,
21
21
  TWILLIO,
22
- LINE
22
+ LINE,
23
+ FACEBOOKMESSENGER
23
24
  } = integrationConstants;
24
25
  const fontIconMap = {
25
26
  [TWILLIO]: 'ZD-TT-imtwillio',
@@ -27,7 +28,8 @@ const fontIconMap = {
27
28
  [TELEGRAM]: 'ZD-TT-imTelegram',
28
29
  [WECHAT]: 'ZD-TT-imWeChat',
29
30
  [LINE]: 'ZD-TT-imLine',
30
- [IM_TALK]: 'ZD-TT-imASAP'
31
+ [IM_TALK]: 'ZD-TT-imASAP',
32
+ [FACEBOOKMESSENGER]: 'ZD-TT-fbMessanger'
31
33
  };
32
34
  export default function IMIntegrationIcon(props) {
33
35
  const {
package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css CHANGED
@@ -59,10 +59,14 @@
59
59
  background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
60
60
  }
61
61
 
62
+ .fbIcon {
63
+ background-color: var(--imlib_chat_components_imIntegrationIcon_fb_color);
64
+ }
65
+
62
66
  .fontIcon :global .path1::before {
63
- color: var(--imlib_chat_components_imIntegrationIcon_path0_color);;
67
+ color: var(--imlib_chat_components_imIntegrationIcon_path0_color);
64
68
  }
65
69
 
66
70
  .fontIcon :global .path2::before {
67
- color:var(--imlib_chat_components_imIntegrationIcon_path1_color);
68
- }
71
+ color: var(--imlib_chat_components_imIntegrationIcon_path1_color);
72
+ }
package/es/im/IMIntegrationIcon/css/cssJSLogic.js CHANGED
@@ -11,7 +11,8 @@ const {
11
11
  IM_TALK,
12
12
  WECHAT,
13
13
  TWILLIO,
14
- LINE
14
+ LINE,
15
+ FACEBOOKMESSENGER
15
16
  } = integrationConstants;
16
17
  export default function cssJSLogic(props, style) {
17
18
  const {
@@ -24,8 +25,8 @@ export default function cssJSLogic(props, style) {
24
25
  const isIMTalkIcon = integrationName === IM_TALK;
25
26
  const isWeChatIcon = integrationName === WECHAT;
26
27
  const isTwillioIcon = integrationName === TWILLIO;
27
- const isLineIcon = integrationName === LINE; // const isTwitterIcon = integrationName === TWITTER;
28
-
28
+ const isLineIcon = integrationName === LINE;
29
+ const isFbIcon = integrationName === FACEBOOKMESSENGER;
29
30
  const isSmall = size === sizes.SMALL;
30
31
  const isMedium = size === sizes.MEDIUM;
31
32
  const iconWrapperClass = compileClassNames({
@@ -38,8 +39,8 @@ export default function cssJSLogic(props, style) {
38
39
  [style.asapIcon]: isIMTalkIcon,
39
40
  [style.weChatIcon]: isWeChatIcon,
40
41
  [style.twillioIcon]: isTwillioIcon,
41
- [style.lineIcon]: isLineIcon // [style.twitterIcon]: isTwitterIcon
42
-
42
+ [style.lineIcon]: isLineIcon,
43
+ [style.fbIcon]: isFbIcon
43
44
  });
44
45
  const iconClass = compileClassNames({
45
46
  [style.small]: isSmall,
package/es/im/IMMessage/IMMessage.js CHANGED
@@ -58,7 +58,8 @@ export default function IMMessage(props) {
58
58
  needSender,
59
59
  isShowSender,
60
60
  isShowMessageTime,
61
- isShowMessageStatus
61
+ isShowMessageStatus,
62
+ needMessageActions
62
63
  } = messageDisplayProps;
63
64
  const newStyle = useMergeStyle(style, customStyle);
64
65
  const {
@@ -176,6 +177,7 @@ export default function IMMessage(props) {
176
177
  isActive: isHighlightMessage,
177
178
  isShowMessageStatus: isShowMessageStatus,
178
179
  isShowSender: isShowSender,
180
+ needMessageActions: needMessageActions,
179
181
  needSender: needSender,
180
182
  onMouseEnterAction: onMouseEnterAction,
181
183
  onSelectAction: onSelectAction,
package/es/im/IMMessage/props/propTypes.js CHANGED
@@ -64,6 +64,7 @@ const imMessagePropTypes = {
64
64
  isShowMessageStatus: PropTypes.bool,
65
65
  isShowMessageTime: PropTypes.bool,
66
66
  isShowSender: PropTypes.bool,
67
+ needMessageActions: PropTypes.bool,
67
68
  needSender: PropTypes.bool
68
69
  }),
69
70
  messageStatusI18N: PropTypes.shape({
package/es/im/IMMessageContent/IMMessageContent.js CHANGED
@@ -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.21",
3
+ "version": "0.0.25",
4
4
  "description": "Chat Components",
5
5
  "main": "es/index.js",
6
6
  "module": "es/index.js",
@@ -36,8 +36,8 @@
36
36
  "@zohodesk/utils": "1.3.9",
37
37
  "@zohodesk/variables": "1.0.0-beta.30",
38
38
  "@zohodesk/virtualizer": "1.0.13",
39
- "@zohoim/chat-components-hooks": "^0.0.19",
40
- "@zohoim/chat-components-utils": "^0.0.18"
39
+ "@zohoim/chat-components-hooks": "^0.0.20",
40
+ "@zohoim/chat-components-utils": "^0.0.19"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@zohodesk-private/css-variable-migrator": "1.0.1",
@@ -45,5 +45,5 @@
45
45
  "jsdom": "22.1.0",
46
46
  "react-to-jsx": "1.3.2"
47
47
  },
48
- "gitHead": "64d3a12fa8cc21ada2d7b68fe93583b14d4b478f"
48
+ "gitHead": "68391846c5f62dd502adc161cdf5bca0091b7caf"
49
49
  }