@zohoim/chat-components 1.0.9-beta.2 → 1.0.9-beta.4

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 (138) hide show
  1. package/es/Message/Message.js +8 -2
  2. package/es/MessageActions/MessageActions.js +2 -0
  3. package/es/MessageActions/props/propTypes.js +2 -1
  4. package/es/MessageActionsMore/MessageActionsMore.js +5 -3
  5. package/es/MessageActionsMore/props/propTypes.js +3 -5
  6. package/es/MessageActionsWrapper/MessageActionsWrapper.js +7 -4
  7. package/es/MessageActionsWrapper/props/propTypes.js +2 -1
  8. package/es/MessageBubble/css/MessageBubble.module.css +0 -7
  9. package/es/MessageBubble/props/defaultProps.js +2 -1
  10. package/es/MessageBubble/props/propTypes.js +2 -1
  11. package/es/Theme/ThemeAssets.js +2 -2
  12. package/es/Theme/ThemeWrapper.js +7 -18
  13. package/es/Theme/TooltipWrapper.js +1 -1
  14. package/es/Theme/constants/index.js +41 -0
  15. package/es/Theme/props/defaultProps.js +1 -2
  16. package/es/Theme/props/propTypes.js +1 -2
  17. package/es/Theme/themeVariables/dark/blueTheme.js +1 -15
  18. package/es/Theme/themeVariables/dark/commonColorVariable.js +1 -20
  19. package/es/Theme/themeVariables/dark/greenTheme.js +1 -15
  20. package/es/Theme/themeVariables/dark/orangeTheme.js +1 -15
  21. package/es/Theme/themeVariables/dark/redTheme.js +1 -15
  22. package/es/Theme/themeVariables/dark/yellowTheme.js +1 -15
  23. package/es/Theme/themeVariables/light/blueTheme.js +1 -19
  24. package/es/Theme/themeVariables/light/commonColorVariable.js +0 -19
  25. package/es/Theme/themeVariables/light/greenTheme.js +1 -14
  26. package/es/Theme/themeVariables/light/orangeTheme.js +1 -14
  27. package/es/Theme/themeVariables/light/redTheme.js +1 -14
  28. package/es/Theme/themeVariables/light/yellowTheme.js +1 -14
  29. package/es/Theme/themeVariables/pureDark/blueTheme.js +1 -15
  30. package/es/Theme/themeVariables/pureDark/commonColorVariable.js +1 -20
  31. package/es/Theme/themeVariables/pureDark/greenTheme.js +1 -15
  32. package/es/Theme/themeVariables/pureDark/orangeTheme.js +1 -15
  33. package/es/Theme/themeVariables/pureDark/redTheme.js +1 -15
  34. package/es/Theme/themeVariables/pureDark/yellowTheme.js +1 -15
  35. package/es/Theme/utils/getThemeConfigurations.js +1 -1
  36. package/es/constants/index.js +1 -7
  37. package/es/im/index.js +1 -8
  38. package/es/index.js +2 -13
  39. package/package.json +7 -7
  40. package/es/AttachmentHandler/AttachmentHandler.js +0 -84
  41. package/es/AttachmentHandler/css/AttachmentHandler.module.css +0 -17
  42. package/es/AttachmentHandler/index.js +0 -1
  43. package/es/AttachmentHandler/props/defaultProps.js +0 -10
  44. package/es/AttachmentHandler/props/propTypes.js +0 -17
  45. package/es/AttachmentPreview/AttachmentPreview.js +0 -113
  46. package/es/AttachmentPreview/css/AttachmentPreview.module.css +0 -30
  47. package/es/AttachmentPreview/index.js +0 -1
  48. package/es/AttachmentPreview/props/defaultProps.js +0 -7
  49. package/es/AttachmentPreview/props/propTypes.js +0 -31
  50. package/es/AttachmentPreviewBody/AttachmentPreviewBody.js +0 -81
  51. package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +0 -68
  52. package/es/AttachmentPreviewBody/index.js +0 -1
  53. package/es/AttachmentPreviewBody/props/defaultProps.js +0 -7
  54. package/es/AttachmentPreviewBody/props/propTypes.js +0 -20
  55. package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.js +0 -84
  56. package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css +0 -47
  57. package/es/AttachmentPreviewHeader/index.js +0 -1
  58. package/es/AttachmentPreviewHeader/props/defaultProps.js +0 -7
  59. package/es/AttachmentPreviewHeader/props/propTypes.js +0 -16
  60. package/es/Emoji/Emoji.js +0 -72
  61. package/es/Emoji/css/Emoji.module.css +0 -47
  62. package/es/Emoji/css/cssJSLogic.js +0 -18
  63. package/es/Emoji/index.js +0 -1
  64. package/es/Emoji/props/defaultProps.js +0 -8
  65. package/es/Emoji/props/propTypes.js +0 -16
  66. package/es/EmojiPopup/EmojiPopup.js +0 -116
  67. package/es/EmojiPopup/css/EmojiPopup.module.css +0 -50
  68. package/es/EmojiPopup/index.js +0 -1
  69. package/es/EmojiPopup/props/defaultProps.js +0 -11
  70. package/es/EmojiPopup/props/propTypes.js +0 -21
  71. package/es/Emojis/Emojis.js +0 -81
  72. package/es/Emojis/index.js +0 -1
  73. package/es/Emojis/props/defaultProps.js +0 -10
  74. package/es/Emojis/props/propTypes.js +0 -19
  75. package/es/EmojisEmptyState/EmojisEmptyState.js +0 -50
  76. package/es/EmojisEmptyState/css/EmojisEmptyState.module.css +0 -18
  77. package/es/EmojisEmptyState/index.js +0 -1
  78. package/es/EmojisEmptyState/props/defaultProps.js +0 -9
  79. package/es/EmojisEmptyState/props/propTypes.js +0 -8
  80. package/es/EmojisFooter/EmojisFooter.js +0 -71
  81. package/es/EmojisFooter/css/EmojisFooter.module.css +0 -40
  82. package/es/EmojisFooter/index.js +0 -1
  83. package/es/EmojisFooter/props/defaultProps.js +0 -7
  84. package/es/EmojisFooter/props/propTypes.js +0 -12
  85. package/es/EmojisHeader/EmojisHeader.js +0 -65
  86. package/es/EmojisHeader/css/EmojisHeader.module.css +0 -36
  87. package/es/EmojisHeader/index.js +0 -1
  88. package/es/EmojisHeader/props/defaultProps.js +0 -8
  89. package/es/EmojisHeader/props/propTypes.js +0 -13
  90. package/es/EmojisList/EmojisList.js +0 -133
  91. package/es/EmojisList/css/EmojisList.module.css +0 -50
  92. package/es/EmojisList/css/cssJSLogic.js +0 -25
  93. package/es/EmojisList/index.js +0 -1
  94. package/es/EmojisList/props/defaultProps.js +0 -10
  95. package/es/EmojisList/props/propTypes.js +0 -20
  96. package/es/constants/propConstants/editorPropConstants.js +0 -3
  97. package/es/constants/propConstants/popupPropConstants.js +0 -2
  98. package/es/im/IMAttachmentHandler/IMAttachmentHandler.js +0 -50
  99. package/es/im/IMAttachmentHandler/index.js +0 -1
  100. package/es/im/IMAttachmentHandler/props/defaultProps.js +0 -10
  101. package/es/im/IMAttachmentHandler/props/propTypes.js +0 -28
  102. package/es/im/ReplyComposer/ReplyComposer.js +0 -137
  103. package/es/im/ReplyComposer/css/ReplyComposer.module.css +0 -5
  104. package/es/im/ReplyComposer/index.js +0 -1
  105. package/es/im/ReplyComposer/props/defaultProps.js +0 -7
  106. package/es/im/ReplyComposer/props/propTypes.js +0 -60
  107. package/es/im/ReplyComposerFooter/ReplyComposerFooter.js +0 -41
  108. package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css +0 -5
  109. package/es/im/ReplyComposerFooter/index.js +0 -1
  110. package/es/im/ReplyComposerFooter/props/defaultProps.js +0 -8
  111. package/es/im/ReplyComposerFooter/props/propTypes.js +0 -17
  112. package/es/im/ReplyEditor/ReplyEditor.js +0 -103
  113. package/es/im/ReplyEditor/css/ReplyEditor.module.css +0 -38
  114. package/es/im/ReplyEditor/css/cssJSLogic.js +0 -10
  115. package/es/im/ReplyEditor/index.js +0 -1
  116. package/es/im/ReplyEditor/props/defaultProps.js +0 -8
  117. package/es/im/ReplyEditor/props/propTypes.js +0 -27
  118. package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js +0 -149
  119. package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css +0 -5
  120. package/es/im/ReplyEditorExtensions/index.js +0 -1
  121. package/es/im/ReplyEditorExtensions/props/defaultProps.js +0 -6
  122. package/es/im/ReplyEditorExtensions/props/propTypes.js +0 -16
  123. package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js +0 -87
  124. package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css +0 -8
  125. package/es/im/ReplyEditorSuggestions/index.js +0 -1
  126. package/es/im/ReplyEditorSuggestions/props/defaultProps.js +0 -6
  127. package/es/im/ReplyEditorSuggestions/props/propTypes.js +0 -20
  128. package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js +0 -90
  129. package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css +0 -7
  130. package/es/im/ReplyEditorSuggestionsPopup/index.js +0 -1
  131. package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js +0 -10
  132. package/es/im/ReplyEditorSuggestionsPopup/props/propTypes.js +0 -21
  133. package/es/rte/Editor/Editor.js +0 -80
  134. package/es/rte/Editor/css/Editor.module.css +0 -19
  135. package/es/rte/Editor/index.js +0 -1
  136. package/es/rte/Editor/props/defaultProps.js +0 -21
  137. package/es/rte/Editor/props/propTypes.js +0 -52
  138. package/es/rte/index.js +0 -1
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
3
3
  export default {
4
4
  library: 'chat_components',
5
5
  variables: {
@@ -109,19 +109,6 @@ export default {
109
109
  videoBubble: {
110
110
  border_color: '#ebf0f5',
111
111
  border_color_failed: failedBdr
112
- },
113
- emojiFooter: {
114
- tabLine: primaryYellow,
115
- border_color: '#ebf0f5'
116
- },
117
- replyEditor,
118
- emojisHeader,
119
- attachmentPreviewHeader,
120
- attachmentPreviewBody: {
121
- bg_color: '#f5f6f7',
122
- editor_border_color: '#ccc2a4',
123
- editor_border_hover_color: '#788190',
124
- editor_border_active_color: '#e8b923'
125
112
  }
126
113
  }
127
114
  };
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
3
3
  import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
4
  export default {
5
5
  library: 'chat_components',
@@ -110,20 +110,6 @@ export default {
110
110
  videoBubble: {
111
111
  border_color: '#161515',
112
112
  border_color_failed: failedBdr
113
- },
114
- emojiFooter: {
115
- tabLine: primaryBlue,
116
- border_color: '#161515'
117
- },
118
- replyEditor,
119
- emojiPopup,
120
- emojisHeader,
121
- attachmentPreviewHeader,
122
- attachmentPreviewBody: {
123
- bg_color: '#262626',
124
- editor_border_color: '#585858',
125
- editor_border_hover_color: '#828994',
126
- editor_border_active_color: '#479dff'
127
113
  }
128
114
  }
129
115
  };
@@ -15,23 +15,4 @@ export const failedBg = '#362530';
15
15
  export const failedBdr = '#290000';
16
16
  export const failedLine = '#290000';
17
17
  export const failedColor = '#e2e4e6';
18
- export const failedUrlColor = '#479dff';
19
- export const emojiPopup = {
20
- bg: '#f1f4f9',
21
- border: '#f1f4f9',
22
- titleColor: '#aaa'
23
- };
24
- export const replyEditor = {
25
- bg: '#212121',
26
- color: '#e2e4e6',
27
- placeholder: '#585858'
28
- };
29
- export const emojisHeader = {
30
- bg_color: '#171717',
31
- border_color: '#161515'
32
- };
33
- export const attachmentPreviewHeader = {
34
- bg_color: '#212121',
35
- name_color: '#e2e4e6',
36
- size_color: '#a8b0bd'
37
- };
18
+ export const failedUrlColor = '#479dff';
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
3
3
  import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
4
  export default {
5
5
  library: 'chat_components',
@@ -110,20 +110,6 @@ export default {
110
110
  videoBubble: {
111
111
  border_color: '#161515',
112
112
  border_color_failed: failedBdr
113
- },
114
- emojiFooter: {
115
- tabLine: primaryGreen,
116
- border_color: '#161515'
117
- },
118
- replyEditor,
119
- emojiPopup,
120
- emojisHeader,
121
- attachmentPreviewHeader,
122
- attachmentPreviewBody: {
123
- bg_color: '#262626',
124
- editor_border_color: '#585858',
125
- editor_border_hover_color: '#828994',
126
- editor_border_active_color: '#45a159'
127
113
  }
128
114
  }
129
115
  };
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
3
3
  import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
4
  export default {
5
5
  library: 'chat_components',
@@ -110,20 +110,6 @@ export default {
110
110
  videoBubble: {
111
111
  border_color: '#161515',
112
112
  border_color_failed: failedBdr
113
- },
114
- emojiFooter: {
115
- tabLine: primaryOrange,
116
- border_color: '#161515'
117
- },
118
- emojiPopup,
119
- replyEditor,
120
- emojisHeader,
121
- attachmentPreviewHeader,
122
- attachmentPreviewBody: {
123
- bg_color: '#262626',
124
- editor_border_color: '#585858',
125
- editor_border_hover_color: '#828994',
126
- editor_border_active_color: '#ff801f'
127
113
  }
128
114
  }
129
115
  };
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
3
3
  import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
4
  export default {
5
5
  library: 'chat_components',
@@ -110,20 +110,6 @@ export default {
110
110
  videoBubble: {
111
111
  border_color: '#161515',
112
112
  border_color_failed: failedBdr
113
- },
114
- emojiFooter: {
115
- tabLine: primaryRed,
116
- border_color: '#161515'
117
- },
118
- emojiPopup,
119
- replyEditor,
120
- emojisHeader,
121
- attachmentPreviewHeader,
122
- attachmentPreviewBody: {
123
- bg_color: '#262626',
124
- editor_border_color: '#585858',
125
- editor_border_hover_color: '#828994',
126
- editor_border_active_color: '#e94f4f'
127
113
  }
128
114
  }
129
115
  };
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
3
3
  import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
4
  export default {
5
5
  library: 'chat_components',
@@ -110,20 +110,6 @@ export default {
110
110
  videoBubble: {
111
111
  border_color: '#161515',
112
112
  border_color_failed: failedBdr
113
- },
114
- emojiFooter: {
115
- tabLine: primaryYellow,
116
- border_color: '#161515'
117
- },
118
- emojiPopup,
119
- replyEditor,
120
- emojisHeader,
121
- attachmentPreviewHeader,
122
- attachmentPreviewBody: {
123
- bg_color: '#262626',
124
- editor_border_color: '#585858',
125
- editor_border_hover_color: '#828994',
126
- editor_border_active_color: '#d79835'
127
113
  }
128
114
  }
129
115
  };
@@ -1,4 +1,4 @@
1
- import { modeConstants, themeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
1
+ import { modeConstants, themeConstants } from "../constants";
2
2
  import lightBlue from "../themeVariables/light/blueTheme";
3
3
  import lightGreen from "../themeVariables/light/greenTheme";
4
4
  import lightOrange from "../themeVariables/light/orangeTheme";
@@ -1,7 +1 @@
1
- export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
2
- export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
3
- const version = '1.4.9';
4
- export const defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
5
- // `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
6
- // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
7
- `https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;
1
+ export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
package/es/im/index.js CHANGED
@@ -6,11 +6,4 @@ export * from "./IMMessageMetaInfo";
6
6
  export * from "./IMMessageContent";
7
7
  export * from "./IMTextBubble";
8
8
  export * from "./IMReplyBubble";
9
- export * from "./ArticleBubble";
10
- export * from "./IMAttachmentHandler";
11
- export * from "./ReplyComposer";
12
- export * from "./ReplyEditor";
13
- export * from "./ReplyEditorSuggestions";
14
- export * from "./ReplyEditorExtensions";
15
- export * from "./ReplyComposerFooter";
16
- export * from "./ReplyEditorSuggestionsPopup";
9
+ export * from "./ArticleBubble";
package/es/index.js CHANGED
@@ -25,19 +25,8 @@ export * from "./ReplyBubbleHeader";
25
25
  export * from "./LazyLoadImage";
26
26
  export * from "./ReplyBubbleContent";
27
27
  export * from "./MessageStatus";
28
- export * from "./im";
29
- export * from "./Emojis";
30
- export * from "./EmojisList";
31
- export * from "./Emoji";
32
- export * from "./EmojiPopup";
33
- export * from "./EmojisHeader";
34
- export * from "./EmojisFooter";
35
- export * from "./EmojisEmptyState";
36
- export * from "./rte";
37
- export * from "./AttachmentHandler";
38
- export * from "./AttachmentPreview";
39
- export * from "./AttachmentPreviewHeader";
40
- export * from "./AttachmentPreviewBody";
28
+ export * from "./im"; // ... export other components
29
+
41
30
  /** * CONSTANTS ** */
42
31
 
43
32
  export * from "./constants";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "1.0.9-beta.2",
3
+ "version": "1.0.9-beta.4",
4
4
  "description": "Chat Components",
5
5
  "main": "es/index.js",
6
6
  "module": "es/index.js",
@@ -29,15 +29,15 @@
29
29
  "!**/__tests__"
30
30
  ],
31
31
  "dependencies": {
32
- "@zohodesk/components": "1.2.43",
33
- "@zohodesk/hooks": "2.0.4",
32
+ "@zohodesk/components": "1.2.56",
33
+ "@zohodesk/hooks": "2.0.2",
34
34
  "@zohodesk/icon": "1.3.15",
35
- "@zohodesk/icons": "1.0.43",
35
+ "@zohodesk/icons": "1.0.20",
36
36
  "@zohodesk/utils": "1.3.13",
37
37
  "@zohodesk/variables": "1.0.0",
38
38
  "@zohodesk/virtualizer": "1.0.13",
39
- "@zohoim/chat-components-hooks": "^1.0.4-beta.1",
40
- "@zohoim/chat-components-utils": "^1.0.4-beta.1"
39
+ "@zohoim/chat-components-hooks": "^1.0.4-beta.2",
40
+ "@zohoim/chat-components-utils": "^1.0.4"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@zohodesk-private/css-variable-migrator": "1.0.7",
@@ -45,5 +45,5 @@
45
45
  "jsdom": "23.0.0",
46
46
  "react-to-jsx": "1.3.2"
47
47
  },
48
- "gitHead": "249c979f45728e88f3fc2f5db1fc2f55cb6548bf"
48
+ "gitHead": "6cd88895fc9dcd100d40c893eb02e5c5ff5107ed"
49
49
  }
@@ -1,84 +0,0 @@
1
- /** ** Libraries *** */
2
- import React, { useMemo } from 'react';
3
- /** ** Component *** */
4
-
5
- import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
6
- import { Container } from '@zohodesk/components/es/Layout';
7
- /** ** Hooks *** */
8
-
9
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
10
- import useAttachmentHandler from '@zohoim/chat-components-hooks/es/AttachmentHandler/useAttachmentHandler';
11
- /** ** Constants *** */
12
-
13
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
14
- import attachmentHandlerDefaultProps from "./props/defaultProps";
15
- import attachmentHandlerPropTypes from "./props/propTypes";
16
- /** ** Methods *** */
17
-
18
- import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
19
- /** ** Styles *** */
20
-
21
- import style from "./css/AttachmentHandler.module.css";
22
- export default function AttachmentHandler(props) {
23
- const {
24
- customStyle,
25
- iconName,
26
- iconSize,
27
- iconTitle,
28
- renderCustomIcon,
29
- getRef: propGetRef,
30
- supportedFileTypes,
31
- isMultiAttachment,
32
- onAttach: propOnAttach,
33
- customProps = dummyObject
34
- } = props;
35
- const {
36
- inputProps = dummyObject
37
- } = customProps;
38
- const {
39
- onAttach,
40
- onAttachmentClick,
41
- getRef
42
- } = useAttachmentHandler({
43
- onAttach: propOnAttach,
44
- getRef: propGetRef
45
- });
46
- /* External customization */
47
-
48
- const newStyle = useMergeStyle(style, customStyle);
49
- const inputEl = useMemo(() => /*#__PURE__*/React.createElement("input", {
50
- ref: getRef,
51
- accept: supportedFileTypes,
52
- hidden: true,
53
- multiple: isMultiAttachment,
54
- onChange: onAttach,
55
- size: "1",
56
- type: "file",
57
- ...inputProps
58
- }), [supportedFileTypes, getRef, onAttach, isMultiAttachment, inputProps]);
59
- const customIcon = useMemo(() => {
60
- /* Render Custom Icon */
61
- const icon = renderHandler(renderCustomIcon)({
62
- onClick: onAttachmentClick
63
- });
64
-
65
- if (icon) {
66
- return /*#__PURE__*/React.createElement(React.Fragment, null, icon, inputEl);
67
- }
68
-
69
- return null;
70
- }, [renderCustomIcon, onAttachmentClick, inputEl]);
71
- return /*#__PURE__*/React.createElement(Container, {
72
- alignBox: "column"
73
- }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
74
- className: newStyle.iconButton,
75
- iconClass: newStyle.icon,
76
- iconName: iconName,
77
- iconSize: iconSize,
78
- onClick: onAttachmentClick,
79
- title: iconTitle
80
- }, inputEl));
81
- }
82
- AttachmentHandler.propTypes = attachmentHandlerPropTypes;
83
- AttachmentHandler.defaultProps = attachmentHandlerDefaultProps;
84
- AttachmentHandler.displayName = 'AttachmentHandler';
@@ -1,17 +0,0 @@
1
- /** ** Styles *** */
2
-
3
- .attachmentHandler {
4
- /** ** Use this class for css customisation *** */
5
- }
6
-
7
- [dir=ltr] .iconButton {
8
- margin-right: var(--zd_size5) ;
9
- }
10
-
11
- [dir=rtl] .iconButton {
12
- margin-left: var(--zd_size5) ;
13
- }
14
-
15
- .icon {
16
- color: initial;
17
- }
@@ -1 +0,0 @@
1
- export { default as AttachmentHandler } from "./AttachmentHandler";
@@ -1,10 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
- const attachmentHandlerDefaultProps = {
4
- customStyle: dummyObject,
5
- iconName: 'ZD-TT-image',
6
- iconSize: '14',
7
- iconTitle: 'Upload',
8
- isMultiAttachment: false
9
- };
10
- export default attachmentHandlerDefaultProps;
@@ -1,17 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- const attachmentHandlerPropTypes = {
4
- customStyle: PropTypes.object,
5
- iconName: PropTypes.string.isRequired,
6
- iconSize: PropTypes.number,
7
- iconTitle: PropTypes.string,
8
- renderCustomIcon: PropTypes.func,
9
- getRef: PropTypes.func,
10
- supportedFileTypes: PropTypes.string,
11
- isMultiAttachment: PropTypes.bool,
12
- onAttach: PropTypes.func.isRequired,
13
- customProps: PropTypes.shape({
14
- inputProps: PropTypes.object
15
- })
16
- };
17
- export default attachmentHandlerPropTypes;
@@ -1,113 +0,0 @@
1
- /* eslint-disable max-len */
2
-
3
- /** ** Libraries *** */
4
- import React, { useMemo } from 'react';
5
- /** ** Components *** */
6
-
7
- import { Container, Box } from '@zohodesk/components/es/Layout';
8
- import AttachmentPreviewHeader from "../AttachmentPreviewHeader/AttachmentPreviewHeader";
9
- import AttachmentPreviewBody from "../AttachmentPreviewBody/AttachmentPreviewBody";
10
- /** ** Hooks *** */
11
-
12
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
13
- import useAttachmentPreview from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreview';
14
- import useAttachmentPreviewEditor from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreviewEditor';
15
- /** ** Constants *** */
16
-
17
- import attachmentPreviewDefaultProps from "./props/defaultProps";
18
- import attachmentPreviewPropTypes from "./props/propTypes";
19
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
20
- import { mediaTypes } from '@zohoim/chat-components-utils/es/constants/messageConstants';
21
- /** ** Styles *** */
22
-
23
- import style from "./css/AttachmentPreview.module.css";
24
- const {
25
- IMAGE
26
- } = mediaTypes;
27
- export default function AttachmentPreview(props) {
28
- const {
29
- customStyle,
30
- isDescriptionNeeded,
31
- files,
32
- customProps,
33
- onSubmit,
34
- onCancel,
35
- texts,
36
- descriptionDetails,
37
- onDescriptionChange: propOnDescriptionChange,
38
- needCloseOnEscape
39
- } = props;
40
- const {
41
- editorProps = dummyObject,
42
- attachmentPreviewHeaderProps = dummyObject,
43
- attachmentPreviewBodyProps = dummyObject
44
- } = customProps || dummyObject;
45
- const {
46
- submitText = 'Submit',
47
- cancelText = 'Cancel',
48
- placeHolder = 'Add a description for the image'
49
- } = texts || dummyObject;
50
- /* External customization */
51
-
52
- const newStyle = useMergeStyle(style, customStyle);
53
- const {
54
- selectedFile,
55
- isShow,
56
- description,
57
- onDescriptionChange,
58
- onEscape
59
- } = useAttachmentPreview({
60
- files,
61
- onDescriptionChange: propOnDescriptionChange,
62
- descriptionDetails,
63
- needCloseOnEscape,
64
- onCancel
65
- });
66
- const {
67
- onEditorKeyDown
68
- } = useAttachmentPreviewEditor({
69
- editorProps,
70
- onPreviewPopupKeyDown: onEscape
71
- });
72
- const {
73
- fileName,
74
- formattedFileSize: fileSize,
75
- attachmentURL,
76
- fileFormat,
77
- mediaType,
78
- attachmentId
79
- } = selectedFile;
80
- const isImageFile = useMemo(() => mediaType === IMAGE, [mediaType]);
81
- return isShow ? /*#__PURE__*/React.createElement("div", {
82
- className: newStyle.attachmentPreview
83
- }, /*#__PURE__*/React.createElement(Container, {
84
- align: "both",
85
- alignBox: "column"
86
- }, /*#__PURE__*/React.createElement("div", {
87
- className: `${newStyle.uploadPrev} ${newStyle.container}`
88
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, {
89
- cancelText: cancelText,
90
- fileName: fileName,
91
- fileSize: fileSize,
92
- onCancel: onCancel,
93
- onSubmit: onSubmit,
94
- submitText: submitText,
95
- ...attachmentPreviewHeaderProps
96
- })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewBody, {
97
- attachmentId: attachmentId,
98
- attachmentURL: attachmentURL,
99
- description: description,
100
- editorProps: editorProps,
101
- fileFormat: fileFormat,
102
- isDescriptionNeeded: isDescriptionNeeded,
103
- isImageFile: isImageFile,
104
- mediaType: mediaType,
105
- onDescriptionChange: onDescriptionChange,
106
- onEditorKeyDown: onEditorKeyDown,
107
- placeHolder: placeHolder,
108
- ...attachmentPreviewBodyProps
109
- }))))) : null;
110
- }
111
- AttachmentPreview.propTypes = attachmentPreviewPropTypes;
112
- AttachmentPreview.defaultProps = attachmentPreviewDefaultProps;
113
- AttachmentPreview.displayName = 'AttachmentPreview';
@@ -1,30 +0,0 @@
1
- /** ** Styles *** */
2
- .attachmentPreview {
3
- position: fixed;
4
- top: 0 ;
5
- bottom: 0 ;
6
- /* z-index: 9999; */
7
- z-index: 2147483643;
8
- overflow: hidden;
9
- background-color: rgba(42, 45, 54, 0.94);
10
- }
11
- [dir=ltr] .attachmentPreview {
12
- animation: scaleIn 0.3s ease;
13
- right: 0 ;
14
- left: 0 ;
15
- }
16
- [dir=rtl] .attachmentPreview {
17
- animation: scaleIn 0.3s ease;
18
- left: 0 ;
19
- right: 0 ;
20
- }
21
-
22
- .container {
23
- position: relative;
24
- }
25
-
26
- .uploadPrev {
27
- width: 100% ;
28
- max-width: 43.75rem;
29
- border-radius: 5px;
30
- }
@@ -1 +0,0 @@
1
- export { default as AttachmentPreview } from "./AttachmentPreview";
@@ -1,7 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
- const attachmentPreviewDefaultProps = {
4
- customStyle: dummyObject,
5
- needCloseOnEscape: true
6
- };
7
- export default attachmentPreviewDefaultProps;
@@ -1,31 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- const attachmentPreviewPropTypes = {
4
- customStyle: PropTypes.object,
5
- isDescriptionNeeded: PropTypes.bool,
6
- files: PropTypes.arrayOf(PropTypes.shape({
7
- id: PropTypes.string,
8
- name: PropTypes.string,
9
- size: PropTypes.string,
10
- type: PropTypes.string,
11
- url: PropTypes.string
12
- })).isRequired,
13
- customProps: PropTypes.shape({
14
- attachmentIconProps: PropTypes.object,
15
- cancelButtonProps: PropTypes.object,
16
- editorProps: PropTypes.object,
17
- submitButtonProps: PropTypes.object
18
- }),
19
- onSubmit: PropTypes.func,
20
- onCancel: PropTypes.func,
21
- texts: PropTypes.shape({
22
- cancelText: PropTypes.string,
23
- editText: PropTypes.string,
24
- placeHolder: PropTypes.string,
25
- submitText: PropTypes.string
26
- }).isRequired,
27
- descriptionDetails: PropTypes.object,
28
- onDescriptionChange: PropTypes.func,
29
- needCloseOnEscape: PropTypes.bool
30
- };
31
- export default attachmentPreviewPropTypes;