@zohoim/chat-components 1.0.9-beta.7 → 1.0.9-beta.8

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 (140) hide show
  1. package/README.md +5 -0
  2. package/es/Message/Message.js +8 -2
  3. package/es/MessageActions/MessageActions.js +2 -0
  4. package/es/MessageActions/props/propTypes.js +2 -1
  5. package/es/MessageActionsMore/MessageActionsMore.js +5 -3
  6. package/es/MessageActionsMore/props/propTypes.js +3 -5
  7. package/es/MessageActionsWrapper/MessageActionsWrapper.js +7 -4
  8. package/es/MessageActionsWrapper/props/propTypes.js +2 -1
  9. package/es/MessageBubble/css/MessageBubble.module.css +0 -7
  10. package/es/MessageBubble/props/defaultProps.js +2 -1
  11. package/es/MessageBubble/props/propTypes.js +2 -1
  12. package/es/Theme/ThemeAssets.js +2 -2
  13. package/es/Theme/ThemeWrapper.js +7 -18
  14. package/es/Theme/TooltipWrapper.js +1 -1
  15. package/es/Theme/constants/index.js +41 -0
  16. package/es/Theme/props/defaultProps.js +1 -2
  17. package/es/Theme/props/propTypes.js +1 -2
  18. package/es/Theme/themeVariables/dark/blueTheme.js +1 -18
  19. package/es/Theme/themeVariables/dark/commonColorVariable.js +1 -20
  20. package/es/Theme/themeVariables/dark/greenTheme.js +1 -18
  21. package/es/Theme/themeVariables/dark/orangeTheme.js +1 -18
  22. package/es/Theme/themeVariables/dark/redTheme.js +1 -18
  23. package/es/Theme/themeVariables/dark/yellowTheme.js +1 -18
  24. package/es/Theme/themeVariables/light/blueTheme.js +1 -22
  25. package/es/Theme/themeVariables/light/commonColorVariable.js +0 -19
  26. package/es/Theme/themeVariables/light/greenTheme.js +1 -18
  27. package/es/Theme/themeVariables/light/orangeTheme.js +1 -18
  28. package/es/Theme/themeVariables/light/redTheme.js +1 -18
  29. package/es/Theme/themeVariables/light/yellowTheme.js +1 -18
  30. package/es/Theme/themeVariables/pureDark/blueTheme.js +1 -18
  31. package/es/Theme/themeVariables/pureDark/commonColorVariable.js +1 -20
  32. package/es/Theme/themeVariables/pureDark/greenTheme.js +1 -18
  33. package/es/Theme/themeVariables/pureDark/orangeTheme.js +1 -18
  34. package/es/Theme/themeVariables/pureDark/redTheme.js +1 -18
  35. package/es/Theme/themeVariables/pureDark/yellowTheme.js +1 -18
  36. package/es/Theme/utils/getThemeConfigurations.js +1 -1
  37. package/es/constants/index.js +1 -7
  38. package/es/im/index.js +1 -8
  39. package/es/index.js +2 -13
  40. package/package.json +7 -7
  41. package/es/AttachmentHandler/AttachmentHandler.js +0 -84
  42. package/es/AttachmentHandler/css/AttachmentHandler.module.css +0 -27
  43. package/es/AttachmentHandler/index.js +0 -1
  44. package/es/AttachmentHandler/props/defaultProps.js +0 -10
  45. package/es/AttachmentHandler/props/propTypes.js +0 -17
  46. package/es/AttachmentPreview/AttachmentPreview.js +0 -121
  47. package/es/AttachmentPreview/css/AttachmentPreview.module.css +0 -39
  48. package/es/AttachmentPreview/index.js +0 -1
  49. package/es/AttachmentPreview/props/defaultProps.js +0 -9
  50. package/es/AttachmentPreview/props/propTypes.js +0 -33
  51. package/es/AttachmentPreviewBody/AttachmentPreviewBody.js +0 -97
  52. package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +0 -74
  53. package/es/AttachmentPreviewBody/index.js +0 -1
  54. package/es/AttachmentPreviewBody/props/defaultProps.js +0 -7
  55. package/es/AttachmentPreviewBody/props/propTypes.js +0 -20
  56. package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.js +0 -84
  57. package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css +0 -47
  58. package/es/AttachmentPreviewHeader/index.js +0 -1
  59. package/es/AttachmentPreviewHeader/props/defaultProps.js +0 -7
  60. package/es/AttachmentPreviewHeader/props/propTypes.js +0 -16
  61. package/es/Emoji/Emoji.js +0 -72
  62. package/es/Emoji/css/Emoji.module.css +0 -48
  63. package/es/Emoji/css/cssJSLogic.js +0 -18
  64. package/es/Emoji/index.js +0 -1
  65. package/es/Emoji/props/defaultProps.js +0 -8
  66. package/es/Emoji/props/propTypes.js +0 -16
  67. package/es/EmojiPopup/EmojiPopup.js +0 -116
  68. package/es/EmojiPopup/css/EmojiPopup.module.css +0 -55
  69. package/es/EmojiPopup/index.js +0 -1
  70. package/es/EmojiPopup/props/defaultProps.js +0 -11
  71. package/es/EmojiPopup/props/propTypes.js +0 -21
  72. package/es/Emojis/Emojis.js +0 -79
  73. package/es/Emojis/index.js +0 -1
  74. package/es/Emojis/props/defaultProps.js +0 -10
  75. package/es/Emojis/props/propTypes.js +0 -19
  76. package/es/EmojisEmptyState/EmojisEmptyState.js +0 -50
  77. package/es/EmojisEmptyState/css/EmojisEmptyState.module.css +0 -18
  78. package/es/EmojisEmptyState/index.js +0 -1
  79. package/es/EmojisEmptyState/props/defaultProps.js +0 -9
  80. package/es/EmojisEmptyState/props/propTypes.js +0 -8
  81. package/es/EmojisFooter/EmojisFooter.js +0 -71
  82. package/es/EmojisFooter/css/EmojisFooter.module.css +0 -40
  83. package/es/EmojisFooter/index.js +0 -1
  84. package/es/EmojisFooter/props/defaultProps.js +0 -7
  85. package/es/EmojisFooter/props/propTypes.js +0 -12
  86. package/es/EmojisHeader/EmojisHeader.js +0 -65
  87. package/es/EmojisHeader/css/EmojisHeader.module.css +0 -36
  88. package/es/EmojisHeader/index.js +0 -1
  89. package/es/EmojisHeader/props/defaultProps.js +0 -8
  90. package/es/EmojisHeader/props/propTypes.js +0 -13
  91. package/es/EmojisList/EmojisList.js +0 -130
  92. package/es/EmojisList/css/EmojisList.module.css +0 -50
  93. package/es/EmojisList/css/cssJSLogic.js +0 -25
  94. package/es/EmojisList/index.js +0 -1
  95. package/es/EmojisList/props/defaultProps.js +0 -10
  96. package/es/EmojisList/props/propTypes.js +0 -20
  97. package/es/constants/propConstants/editorPropConstants.js +0 -3
  98. package/es/constants/propConstants/popupPropConstants.js +0 -2
  99. package/es/im/IMAttachmentHandler/IMAttachmentHandler.js +0 -50
  100. package/es/im/IMAttachmentHandler/index.js +0 -1
  101. package/es/im/IMAttachmentHandler/props/defaultProps.js +0 -10
  102. package/es/im/IMAttachmentHandler/props/propTypes.js +0 -28
  103. package/es/im/ReplyComposer/ReplyComposer.js +0 -153
  104. package/es/im/ReplyComposer/css/ReplyComposer.module.css +0 -10
  105. package/es/im/ReplyComposer/css/cssJSLogic.js +0 -13
  106. package/es/im/ReplyComposer/index.js +0 -1
  107. package/es/im/ReplyComposer/props/defaultProps.js +0 -7
  108. package/es/im/ReplyComposer/props/propTypes.js +0 -60
  109. package/es/im/ReplyComposerFooter/ReplyComposerFooter.js +0 -41
  110. package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css +0 -10
  111. package/es/im/ReplyComposerFooter/index.js +0 -1
  112. package/es/im/ReplyComposerFooter/props/defaultProps.js +0 -8
  113. package/es/im/ReplyComposerFooter/props/propTypes.js +0 -17
  114. package/es/im/ReplyEditor/ReplyEditor.js +0 -103
  115. package/es/im/ReplyEditor/css/ReplyEditor.module.css +0 -48
  116. package/es/im/ReplyEditor/css/cssJSLogic.js +0 -10
  117. package/es/im/ReplyEditor/index.js +0 -1
  118. package/es/im/ReplyEditor/props/defaultProps.js +0 -8
  119. package/es/im/ReplyEditor/props/propTypes.js +0 -27
  120. package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js +0 -149
  121. package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css +0 -5
  122. package/es/im/ReplyEditorExtensions/index.js +0 -1
  123. package/es/im/ReplyEditorExtensions/props/defaultProps.js +0 -6
  124. package/es/im/ReplyEditorExtensions/props/propTypes.js +0 -16
  125. package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js +0 -93
  126. package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css +0 -8
  127. package/es/im/ReplyEditorSuggestions/index.js +0 -1
  128. package/es/im/ReplyEditorSuggestions/props/defaultProps.js +0 -6
  129. package/es/im/ReplyEditorSuggestions/props/propTypes.js +0 -21
  130. package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js +0 -91
  131. package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css +0 -7
  132. package/es/im/ReplyEditorSuggestionsPopup/index.js +0 -1
  133. package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js +0 -10
  134. package/es/im/ReplyEditorSuggestionsPopup/props/propTypes.js +0 -21
  135. package/es/rte/Editor/Editor.js +0 -80
  136. package/es/rte/Editor/css/Editor.module.css +0 -17
  137. package/es/rte/Editor/index.js +0 -1
  138. package/es/rte/Editor/props/defaultProps.js +0 -21
  139. package/es/rte/Editor/props/propTypes.js +0 -52
  140. package/es/rte/index.js +0 -1
@@ -1,130 +0,0 @@
1
- /* eslint-disable max-len */
2
-
3
- /** ** Libraries *** */
4
- import React, { useCallback } from 'react';
5
- /** ** Components *** */
6
-
7
- import Emoji from "../Emoji/Emoji";
8
- import EmojisEmptyState from "../EmojisEmptyState/EmojisEmptyState";
9
- /** ** Hooks *** */
10
-
11
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
12
- import useEmojisList from '@zohoim/chat-components-hooks/es/EmojisList/useEmojisList';
13
- /** ** Constants *** */
14
-
15
- import emojisListDefaultProps from "./props/defaultProps";
16
- import emojisListPropTypes from "./props/propTypes";
17
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
18
- /** ** Methods *** */
19
-
20
- import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
21
- import cssJSLogic from "./css/cssJSLogic";
22
- /** ** Styles *** */
23
-
24
- import style from "./css/EmojisList.module.css";
25
- export default function EmojisList(props) {
26
- const {
27
- customStyle,
28
- customProps,
29
- searchString,
30
- isShowGroupBasedList,
31
- onChangeGroup,
32
- getMethods,
33
- onSelect,
34
- selectedGroup,
35
- rowType,
36
- emojisList: propsEmojisList,
37
- renderEmpty,
38
- isShowOnlyContent
39
- } = props;
40
- const {
41
- emojiProps = dummyObject,
42
- emojisEmptyStateProps = dummyObject
43
- } = customProps;
44
- const {
45
- emojisList,
46
- setGroupRefs,
47
- setContainerRef: listContainerRef,
48
- isAllEmpty,
49
- isGroupEmpty,
50
- isRenderEmptyState,
51
- isRenderElement
52
- } = useEmojisList({
53
- emojisList: propsEmojisList,
54
- searchString,
55
- isShowGroupBasedList,
56
- onChangeGroup,
57
- getMethods,
58
- selectedGroup,
59
- isShowOnlyContent
60
- });
61
- /* External customization */
62
-
63
- const newStyle = useMergeStyle(style, customStyle);
64
- /* CSS classnames added based on logic */
65
-
66
- const {
67
- emojisListClass,
68
- groupClass
69
- } = cssJSLogic({
70
- rowType,
71
- isShowGroupBasedList,
72
- isShowOnlyContent,
73
- isEmpty: isAllEmpty
74
- }, newStyle);
75
- const renderGroup = useCallback(_ref => {
76
- let {
77
- groupName,
78
- emojis
79
- } = _ref;
80
- const isEmptyGroup = isGroupEmpty[groupName];
81
- return !isEmptyGroup ? /*#__PURE__*/React.createElement("div", {
82
- key: groupName,
83
- ref: el => {
84
- setGroupRefs(el, groupName);
85
- },
86
- className: groupClass
87
- }, isShowGroupBasedList ? /*#__PURE__*/React.createElement("div", {
88
- className: newStyle.groupName
89
- }, groupName) : null, Object.keys(emojis).map(emojiName => {
90
- const emoji = emojis[emojiName];
91
- const id = `emoji_${emojiName}`;
92
- return /*#__PURE__*/React.createElement(Emoji, {
93
- key: id,
94
- emoji: emoji,
95
- emojiName: emojiName,
96
- onSelect: onSelect,
97
- ...emojiProps
98
- });
99
- })) : null;
100
- }, [emojiProps, isGroupEmpty, groupClass, isShowGroupBasedList, newStyle.groupName, onSelect, setGroupRefs]);
101
- const renderDefaultEmptyState = useCallback(() => /*#__PURE__*/React.createElement(EmojisEmptyState, { ...emojisEmptyStateProps
102
- }), [emojisEmptyStateProps]);
103
- const renderEmptyState = useCallback(() => {
104
- /* Render EmptyState */
105
- if (isRenderEmptyState) {
106
- const emptyState = renderHandler(renderEmpty || renderDefaultEmptyState)();
107
-
108
- if (emptyState) {
109
- return emptyState;
110
- }
111
-
112
- return null;
113
- }
114
-
115
- return null;
116
- }, [renderEmpty, renderDefaultEmptyState, isRenderEmptyState]);
117
- return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderElement ? /*#__PURE__*/React.createElement("div", {
118
- ref: listContainerRef,
119
- className: emojisListClass
120
- }, !isAllEmpty ? Object.keys(emojisList).map(groupName => {
121
- const emojis = emojisList[groupName];
122
- return renderGroup({
123
- groupName,
124
- emojis
125
- });
126
- }) : renderEmptyState()) : null);
127
- }
128
- EmojisList.propTypes = emojisListPropTypes;
129
- EmojisList.defaultProps = emojisListDefaultProps;
130
- EmojisList.displayName = 'EmojisList';
@@ -1,50 +0,0 @@
1
- .varClass {
2
- --emoji-groupName-size: var(--zd_font_size13);
3
- --emoji-singleList-size: var(--zd_size32);
4
- --emoji-multipleList-size: var(--zd_size300);
5
- }
6
-
7
- .emojisList {
8
- composes: varClass;
9
- transition: 0.2s ease;
10
- flex-direction: row;
11
- flex-shrink: 0;
12
- width: 100% ;
13
- word-wrap: break-word;
14
- font-size: 0 ;
15
- }
16
-
17
- .emojisListHide {
18
- display: none;
19
- }
20
-
21
- .emojisListSingle {
22
- height: var(--emoji-singleList-size);
23
- white-space: nowrap;
24
- overflow-x: auto;
25
- }
26
-
27
- .emojisListMultiple {
28
- height: var(--emoji-multipleList-size);
29
- overflow-y: auto;
30
- }
31
-
32
- .groupName {
33
- width: 100% ;
34
- font-size: var(--emoji-groupName-size);
35
- text-transform: capitalize;
36
- color: var(--imlib_chat_components_emojiPopup_titleColor);
37
- padding: var(--zd_size8) var(--zd_size10) ;
38
- margin-bottom: var(--zd_size5) ;
39
- }
40
-
41
- .groupContainer {
42
- font-size: 0 ;
43
- }
44
- .groupSeperate {
45
- display: inline-block;
46
- }
47
-
48
- .groupAll {
49
- display: inline;
50
- }
@@ -1,25 +0,0 @@
1
- /** ** Methods *** */
2
- import compileClassNames from '@zohodesk/utils/es/compileClassNames';
3
- export default function cssJSLogic(props, style) {
4
- const {
5
- rowType,
6
- isShowGroupBasedList,
7
- isShowOnlyContent,
8
- isEmpty
9
- } = props;
10
- const emojisListClass = compileClassNames({
11
- [style.emojisList]: true,
12
- [style.emojisListSingle]: rowType === 'single',
13
- [style.emojisListMultiple]: rowType === 'multiple',
14
- [style.emojisListHide]: isShowOnlyContent ? isEmpty : false
15
- });
16
- const groupClass = compileClassNames({
17
- [style.groupContainer]: true,
18
- [style.groupSeperate]: !!isShowGroupBasedList,
19
- [style.groupAll]: !isShowGroupBasedList
20
- });
21
- return {
22
- emojisListClass,
23
- groupClass
24
- };
25
- }
@@ -1 +0,0 @@
1
- export { default as EmojisList } from "./EmojisList";
@@ -1,10 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
3
- const emojisListDefaultProps = {
4
- customStyle: dummyObject,
5
- customProps: dummyObject,
6
- rowType: 'multiple',
7
- isShowGroupBasedList: true,
8
- isShowOnlyContent: false
9
- };
10
- export default emojisListDefaultProps;
@@ -1,20 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- const emojisListPropTypes = {
4
- emojisList: PropTypes.object.isRequired,
5
- customProps: PropTypes.shape({
6
- emojiProps: PropTypes.object,
7
- emojisEmptyStateProps: PropTypes.object
8
- }),
9
- customStyle: PropTypes.object,
10
- getMethods: PropTypes.func,
11
- isShowGroupBasedList: PropTypes.bool,
12
- isShowOnlyContent: PropTypes.bool,
13
- onChangeGroup: PropTypes.func,
14
- onSelect: PropTypes.func,
15
- renderEmpty: PropTypes.func,
16
- rowType: PropTypes.oneOf(['single', 'multiple']),
17
- searchString: PropTypes.string,
18
- selectedGroup: PropTypes.string
19
- };
20
- export default emojisListPropTypes;
@@ -1,3 +0,0 @@
1
- export const formats = ['strong', 'em', 'underline', 'link', 'strikeThrough', 'align', 'fontSize', 'fontFamily', 'fontColor', 'highlight', 'script', 'lineHeight', 'direction', 'headings', 'clearFormatting', 'inlineQuote', 'indent', 'formatPainter'];
2
- export const features = ['hr', 'images', 'tables', 'list', 'code_block', 'video', 'blockquote', 'embed', 'html'];
3
- export const langCode = ['en_US', 'ar', 'as', 'bg', 'bn', 'brx', 'ca', 'cs', 'da', 'de', 'doi', 'el', 'es', 'et', 'fi', 'fr', 'ga', 'gu', 'hi', 'hr', 'hu', 'id', 'in', 'it', 'iw', 'ja', 'kn', 'ko', 'kok', 'ks', 'lt', 'mai', 'ml', 'mni', 'mr', 'ms', 'my', 'ne', 'nl', 'no', 'or', 'pa', 'pl', 'pt_BR', 'pt', 'ro', 'ru', 'sa', 'sat', 'sd', 'si', 'sk', 'sv', 'ta', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh_CN', 'zh_HK', 'zh_TW', 'zh'];
@@ -1,2 +0,0 @@
1
- export const popupSize = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
2
- export const popupPosition = ['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop'];
@@ -1,50 +0,0 @@
1
- /** ** Libraries *** */
2
- import React from 'react';
3
- /** ** Components *** */
4
-
5
- import AttachmentHandler from "../../AttachmentHandler/AttachmentHandler";
6
- /** ** Hooks *** */
7
-
8
- import useIMAttachmentHandler from '@zohoim/chat-components-hooks/es/im/IMAttachmentHandler/useIMAttachmentHandler';
9
- /** ** Constants *** */
10
-
11
- import imAttachmentHandlerDefaultProps from "./props/defaultProps";
12
- import imAttachmentHandlerPropTypes from "./props/propTypes";
13
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
14
- export default function IMAttachmentHandler(props) {
15
- const {
16
- customProps = dummyObject,
17
- iconName,
18
- iconSize,
19
- iconTitle,
20
- renderCustomIcon,
21
- isMultiAttachment,
22
- onAttach: propOnAttach,
23
- attachmentType,
24
- integrationService
25
- } = props;
26
- const {
27
- attachmentHandlerProps = dummyObject
28
- } = customProps;
29
- const {
30
- onAttach,
31
- supportedTypes
32
- } = useIMAttachmentHandler({
33
- onAttach: propOnAttach,
34
- attachmentType,
35
- integrationService
36
- });
37
- return /*#__PURE__*/React.createElement(AttachmentHandler, {
38
- iconName: iconName,
39
- iconSize: iconSize,
40
- iconTitle: iconTitle,
41
- isMultiAttachment: isMultiAttachment,
42
- onAttach: onAttach,
43
- renderCustomIcon: renderCustomIcon,
44
- supportedFileTypes: supportedTypes,
45
- ...attachmentHandlerProps
46
- });
47
- }
48
- IMAttachmentHandler.propTypes = imAttachmentHandlerPropTypes;
49
- IMAttachmentHandler.defaultProps = imAttachmentHandlerDefaultProps;
50
- IMAttachmentHandler.displayName = 'IMAttachmentHandler';
@@ -1 +0,0 @@
1
- export { default as IMAttachmentHandler } from "./IMAttachmentHandler";
@@ -1,10 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
- const imAttachmentHandlerDefaultProps = {
4
- customStyle: dummyObject,
5
- iconName: 'ZD-TT-image',
6
- iconSize: '14',
7
- iconTitle: 'Upload',
8
- isMultiAttachment: false
9
- };
10
- export default imAttachmentHandlerDefaultProps;
@@ -1,28 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- /** ** Constants *** */
4
-
5
- import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants';
6
- const {
7
- WHATSAPP,
8
- TELEGRAM,
9
- INSTAGRAM,
10
- WECHAT,
11
- TWILLIO,
12
- LINE,
13
- IM_TALK,
14
- FACEBOOKMESSENGER
15
- } = integrationConstants;
16
- const imAttachmentHandlerPropTypes = {
17
- customStyle: PropTypes.object,
18
- iconName: PropTypes.string.isRequired,
19
- iconSize: PropTypes.string,
20
- iconTitle: PropTypes.string,
21
- renderCustomIcon: PropTypes.func,
22
- isMultiAttachment: PropTypes.bool,
23
- onAttach: PropTypes.func,
24
- customProps: PropTypes.object,
25
- attachmentType: PropTypes.oneOf(['image', 'document', 'documentAndImage']),
26
- integrationService: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, WECHAT, TWILLIO, LINE, IM_TALK, FACEBOOKMESSENGER])
27
- };
28
- export default imAttachmentHandlerPropTypes;
@@ -1,153 +0,0 @@
1
- /** ** Libraries *** */
2
- import React, { useMemo } from 'react';
3
- /** ** Components *** */
4
-
5
- import { Container } from '@zohodesk/components/es/Layout';
6
- import ReplyEditor from "../ReplyEditor/ReplyEditor";
7
- import ReplyComposerFooter from "../ReplyComposerFooter/ReplyComposerFooter";
8
- import ReplyEditorSuggestions from "../ReplyEditorSuggestions/ReplyEditorSuggestions";
9
- import AttachmentPreview from "../../AttachmentPreview/AttachmentPreview";
10
- /** ** Hooks *** */
11
-
12
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
13
- import useReplyComposer from '@zohoim/chat-components-hooks/es/im/ReplyComposer/useReplyComposer';
14
- import useReplyComposerSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyComposer/useReplyComposerSuggestions';
15
- /** ** Constants *** */
16
-
17
- import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
18
- import replyComposerDefaultProps from "./props/defaultProps";
19
- import replyComposerPropTypes from "./props/propTypes";
20
- /** ** Methods *** */
21
-
22
- import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
23
- import cssJSLogic from "./css/cssJSLogic";
24
- /** ** Styles *** */
25
-
26
- import style from "./css/ReplyComposer.module.css";
27
- export default function ReplyComposer(props) {
28
- const {
29
- customStyle,
30
- id,
31
- content,
32
- EDITORURL,
33
- placeHolder,
34
- features,
35
- formats,
36
- suggestions,
37
- isHTMLContent,
38
- onChange,
39
- onKeyDown: propOnKeyDown,
40
- onPaste,
41
- customProps = dummyObject,
42
- extensions,
43
- files = dummyArray,
44
- filesDescription,
45
- onChangeFileDescription,
46
- onFileCancel: propOnFileCancel,
47
- onFileSubmit: propOnFileSubmit,
48
- attachmentPreviewTexts,
49
- renderHeader,
50
- renderFooter,
51
- renderStencils,
52
- getEditorState: propGetEditorState,
53
- needFooter
54
- } = props;
55
- const {
56
- replyEditorProps = dummyObject,
57
- replyEditorSuggestionsProps = dummyObject,
58
- replyComposerFooterProps = dummyObject
59
- } = customProps;
60
- const {
61
- features: allFeatures,
62
- suggestionsMapping,
63
- suggestionDetails,
64
- isShowSuggestion,
65
- getSuggetPopupMethods,
66
- onHideSuggestions,
67
- onSuggestPopupKeyDown,
68
- onSelectSuggestion
69
- } = useReplyComposerSuggestions({
70
- features,
71
- suggestions,
72
- isHTMLContent
73
- });
74
- const {
75
- getEditorState,
76
- editor,
77
- onKeyDown,
78
- attachmentPreviewCustomProps,
79
- onFileCancel,
80
- onFileSubmit,
81
- isLoading,
82
- isLoaded
83
- } = useReplyComposer({
84
- onKeyDown: propOnKeyDown,
85
- isShowSuggestion,
86
- onSuggestPopupKeyDown,
87
- EDITORURL,
88
- onPaste,
89
- customProps,
90
- onFileCancel: propOnFileCancel,
91
- onFileSubmit: propOnFileSubmit,
92
- getEditorState: propGetEditorState
93
- });
94
- /* External customization */
95
-
96
- const newStyle = useMergeStyle(style, customStyle);
97
- /* CSS classnames added based on logic */
98
-
99
- const {
100
- replEditorWrapperClass
101
- } = cssJSLogic({
102
- isLoaded
103
- }, newStyle);
104
- const headerElement = useMemo(() => renderHandler(renderHeader)(), [renderHeader]);
105
- const stencilsElement = useMemo(() => isLoading ? renderHandler(renderStencils)({
106
- needFooter
107
- }) : null, [renderStencils, needFooter, isLoading]);
108
- return /*#__PURE__*/React.createElement(Container, {
109
- className: newStyle.replyComposer,
110
- isCover: false
111
- }, isShowSuggestion ? /*#__PURE__*/React.createElement(ReplyEditorSuggestions, {
112
- getMethods: getSuggetPopupMethods,
113
- onClose: onHideSuggestions,
114
- onSelect: onSelectSuggestion,
115
- suggestionDetails: suggestionDetails,
116
- suggestionsMapping: suggestionsMapping,
117
- ...replyEditorSuggestionsProps
118
- }) : null, files.length > 0 ? /*#__PURE__*/React.createElement(AttachmentPreview, {
119
- descriptionDetails: filesDescription,
120
- files: files,
121
- isDescriptionNeeded: true,
122
- needEditImage: false,
123
- onCancel: onFileCancel,
124
- onDescriptionChange: onChangeFileDescription,
125
- onSubmit: onFileSubmit,
126
- texts: attachmentPreviewTexts,
127
- ...attachmentPreviewCustomProps
128
- }) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/React.createElement("div", {
129
- className: replEditorWrapperClass
130
- }, /*#__PURE__*/React.createElement(ReplyEditor, {
131
- content: content,
132
- EDITORURL: EDITORURL,
133
- features: allFeatures,
134
- formats: formats,
135
- getEditorState: getEditorState,
136
- id: id,
137
- isHTMLContent: isHTMLContent,
138
- onChange: onChange,
139
- onKeyDown: onKeyDown,
140
- onPaste: onPaste,
141
- placeHolder: placeHolder,
142
- ...replyEditorProps
143
- })), needFooter && isLoaded ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
144
- editor: editor,
145
- extensions: extensions,
146
- isHTMLContent: isHTMLContent,
147
- renderButtons: renderFooter,
148
- ...replyComposerFooterProps
149
- }) : null);
150
- }
151
- ReplyComposer.propTypes = replyComposerPropTypes;
152
- ReplyComposer.defaultProps = replyComposerDefaultProps;
153
- ReplyComposer.displayName = 'ReplyComposer';
@@ -1,10 +0,0 @@
1
- /** ** Styles *** */
2
-
3
- .replyComposer {
4
- /** ** Use this class for css customisation *** */
5
- }
6
-
7
- .hidden {
8
- visibility: hidden;
9
- height: 0 ;
10
- }
@@ -1,13 +0,0 @@
1
- /** ** Methods *** */
2
- import { compileClassNames } from '@zohodesk/utils';
3
- export default function cssJSLogic(props, style) {
4
- const {
5
- isLoaded
6
- } = props;
7
- const replEditorWrapperClass = compileClassNames({
8
- [style.hidden]: !isLoaded
9
- });
10
- return {
11
- replEditorWrapperClass
12
- };
13
- }
@@ -1 +0,0 @@
1
- export { default as ReplyComposer } from "./ReplyComposer";
@@ -1,7 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
- const replyComposerDefaultProps = {
4
- customStyle: dummyObject,
5
- needFooter: true
6
- };
7
- export default replyComposerDefaultProps;
@@ -1,60 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- /** ** Constants *** */
4
-
5
- import { features, formats } from "../../../constants/propConstants/editorPropConstants";
6
- const replyComposerPropTypes = {
7
- customStyle: PropTypes.object,
8
- id: PropTypes.string,
9
- content: PropTypes.string.isRequired,
10
- EDITORURL: PropTypes.string,
11
- placeHolder: PropTypes.string,
12
- features: PropTypes.arrayOf(PropTypes.oneOf(features)),
13
- formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
14
- suggestions: PropTypes.arrayOf(PropTypes.shape({
15
- allowSpace: PropTypes.bool,
16
- componentProps: PropTypes.object,
17
- popupProps: PropTypes.object,
18
- renderItem: PropTypes.func,
19
- trigger: PropTypes.string
20
- })),
21
- isHTMLContent: PropTypes.bool,
22
- onChange: PropTypes.func.isRequired,
23
- onKeyDown: PropTypes.func,
24
- onPaste: PropTypes.func,
25
- customProps: PropTypes.shape({
26
- attachmentPreviewProps: PropTypes.object,
27
- replyComposerFooterProps: PropTypes.object,
28
- replyEditorProps: PropTypes.object,
29
- replyEditorSuggestionsProps: PropTypes.object
30
- }),
31
- extensions: PropTypes.shape({
32
- details: PropTypes.objectOf(PropTypes.shape({
33
- componentProps: PropTypes.object,
34
- id: PropTypes.string,
35
- renderItem: PropTypes.func
36
- })),
37
- order: PropTypes.array
38
- }),
39
- files: PropTypes.arrayOf(PropTypes.shape({
40
- id: PropTypes.string,
41
- name: PropTypes.string,
42
- size: PropTypes.string,
43
- type: PropTypes.string,
44
- url: PropTypes.string
45
- })),
46
- filesDescription: PropTypes.object,
47
- onChangeFileDescription: PropTypes.func,
48
- onFileCancel: PropTypes.func,
49
- onFileSubmit: PropTypes.func,
50
- attachmentPreviewTexts: PropTypes.shape({
51
- cancelText: PropTypes.string,
52
- editText: PropTypes.string,
53
- placeHolder: PropTypes.string,
54
- submitText: PropTypes.string
55
- }),
56
- renderHeader: PropTypes.func,
57
- renderFooter: PropTypes.func,
58
- getEditorState: PropTypes.func
59
- };
60
- export default replyComposerPropTypes;
@@ -1,41 +0,0 @@
1
- /** ** Libraries *** */
2
- import React, { useMemo } from 'react';
3
- /** ** Components *** */
4
-
5
- import ReplyEditorExtensions from "../ReplyEditorExtensions/ReplyEditorExtensions";
6
- /** ** Hooks *** */
7
-
8
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
9
- /** ** Constants *** */
10
-
11
- import replyComposerFooterDefaultProps from "./props/defaultProps";
12
- import replyComposerFooterPropTypes from "./props/propTypes";
13
- /** ** Methods *** */
14
-
15
- import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
16
- /** ** Styles *** */
17
-
18
- import style from "./css/ReplyComposerFooter.module.css";
19
- export default function ReplyComposerFooter(props) {
20
- const {
21
- customStyle,
22
- editor,
23
- isHTMLContent,
24
- extensions,
25
- renderButtons
26
- } = props;
27
- /* External customization */
28
-
29
- const newStyle = useMergeStyle(style, customStyle);
30
- const footerButtons = useMemo(() => renderHandler(renderButtons)(), [renderButtons]);
31
- return /*#__PURE__*/React.createElement("div", {
32
- className: newStyle.replyComposerFooter
33
- }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReplyEditorExtensions, {
34
- editor: editor,
35
- extensions: extensions,
36
- isHTMLContent: isHTMLContent
37
- })), footerButtons || null);
38
- }
39
- ReplyComposerFooter.propTypes = replyComposerFooterPropTypes;
40
- ReplyComposerFooter.defaultProps = replyComposerFooterDefaultProps;
41
- ReplyComposerFooter.displayName = 'ReplyComposerFooter';
@@ -1,10 +0,0 @@
1
- /** ** Styles *** */
2
- .replyComposerFooter {
3
- display: flex;
4
- }
5
- [dir=ltr] .replyComposerFooter {
6
- padding: 0 0 0 var(--zd_size16) ;
7
- }
8
- [dir=rtl] .replyComposerFooter {
9
- padding: 0 var(--zd_size16) 0 0 ;
10
- }
@@ -1 +0,0 @@
1
- export { default as ReplyComposerFooter } from "./ReplyComposerFooter";
@@ -1,8 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants';
3
- const replyComposerFooterDefaultProps = {
4
- customStyle: dummyObject,
5
- isHTMLContent: dummyArray,
6
- extensions: dummyArray
7
- };
8
- export default replyComposerFooterDefaultProps;