@zohoim/chat-components 1.0.9-beta.5 → 1.0.9-beta.6

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 (139) 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 -115
  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 -8
  50. package/es/AttachmentPreview/props/propTypes.js +0 -32
  51. package/es/AttachmentPreviewBody/AttachmentPreviewBody.js +0 -81
  52. package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +0 -70
  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 -137
  104. package/es/im/ReplyComposer/css/ReplyComposer.module.css +0 -5
  105. package/es/im/ReplyComposer/index.js +0 -1
  106. package/es/im/ReplyComposer/props/defaultProps.js +0 -7
  107. package/es/im/ReplyComposer/props/propTypes.js +0 -60
  108. package/es/im/ReplyComposerFooter/ReplyComposerFooter.js +0 -41
  109. package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css +0 -10
  110. package/es/im/ReplyComposerFooter/index.js +0 -1
  111. package/es/im/ReplyComposerFooter/props/defaultProps.js +0 -8
  112. package/es/im/ReplyComposerFooter/props/propTypes.js +0 -17
  113. package/es/im/ReplyEditor/ReplyEditor.js +0 -103
  114. package/es/im/ReplyEditor/css/ReplyEditor.module.css +0 -48
  115. package/es/im/ReplyEditor/css/cssJSLogic.js +0 -10
  116. package/es/im/ReplyEditor/index.js +0 -1
  117. package/es/im/ReplyEditor/props/defaultProps.js +0 -8
  118. package/es/im/ReplyEditor/props/propTypes.js +0 -27
  119. package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js +0 -149
  120. package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css +0 -5
  121. package/es/im/ReplyEditorExtensions/index.js +0 -1
  122. package/es/im/ReplyEditorExtensions/props/defaultProps.js +0 -6
  123. package/es/im/ReplyEditorExtensions/props/propTypes.js +0 -16
  124. package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js +0 -93
  125. package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css +0 -8
  126. package/es/im/ReplyEditorSuggestions/index.js +0 -1
  127. package/es/im/ReplyEditorSuggestions/props/defaultProps.js +0 -6
  128. package/es/im/ReplyEditorSuggestions/props/propTypes.js +0 -21
  129. package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js +0 -91
  130. package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css +0 -7
  131. package/es/im/ReplyEditorSuggestionsPopup/index.js +0 -1
  132. package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js +0 -10
  133. package/es/im/ReplyEditorSuggestionsPopup/props/propTypes.js +0 -21
  134. package/es/rte/Editor/Editor.js +0 -80
  135. package/es/rte/Editor/css/Editor.module.css +0 -17
  136. package/es/rte/Editor/index.js +0 -1
  137. package/es/rte/Editor/props/defaultProps.js +0 -21
  138. package/es/rte/Editor/props/propTypes.js +0 -52
  139. 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,137 +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
- /** ** Styles *** */
24
-
25
- import style from "./css/ReplyComposer.module.css";
26
- export default function ReplyComposer(props) {
27
- const {
28
- customStyle,
29
- id,
30
- content,
31
- EDITORURL,
32
- placeHolder,
33
- features,
34
- formats,
35
- suggestions,
36
- isHTMLContent,
37
- onChange,
38
- onKeyDown: propOnKeyDown,
39
- onPaste,
40
- customProps = dummyObject,
41
- extensions,
42
- files = dummyArray,
43
- filesDescription,
44
- onChangeFileDescription,
45
- onFileCancel: propOnFileCancel,
46
- onFileSubmit: propOnFileSubmit,
47
- attachmentPreviewTexts,
48
- renderHeader,
49
- renderFooter,
50
- getEditorState: propGetEditorState,
51
- needFooter
52
- } = props;
53
- const {
54
- replyEditorProps = dummyObject,
55
- replyEditorSuggestionsProps = dummyObject,
56
- replyComposerFooterProps = dummyObject
57
- } = customProps;
58
- const {
59
- features: allFeatures,
60
- suggestionsMapping,
61
- suggestionDetails,
62
- isShowSuggestion,
63
- getSuggetPopupMethods,
64
- onHideSuggestions,
65
- onSuggestPopupKeyDown,
66
- onSelectSuggestion
67
- } = useReplyComposerSuggestions({
68
- features,
69
- suggestions,
70
- isHTMLContent
71
- });
72
- const {
73
- getEditorState,
74
- editor,
75
- onKeyDown,
76
- attachmentPreviewCustomProps,
77
- onFileCancel,
78
- onFileSubmit
79
- } = useReplyComposer({
80
- onKeyDown: propOnKeyDown,
81
- isShowSuggestion,
82
- onSuggestPopupKeyDown,
83
- EDITORURL,
84
- onPaste,
85
- customProps,
86
- onFileCancel: propOnFileCancel,
87
- onFileSubmit: propOnFileSubmit,
88
- getEditorState: propGetEditorState
89
- });
90
- /* External customization */
91
-
92
- const newStyle = useMergeStyle(style, customStyle);
93
- const headerElement = useMemo(() => renderHandler(renderHeader)(), [renderHeader]);
94
- return /*#__PURE__*/React.createElement(Container, {
95
- className: newStyle.replyComposer,
96
- isCover: false
97
- }, isShowSuggestion ? /*#__PURE__*/React.createElement(ReplyEditorSuggestions, {
98
- getMethods: getSuggetPopupMethods,
99
- onClose: onHideSuggestions,
100
- onSelect: onSelectSuggestion,
101
- suggestionDetails: suggestionDetails,
102
- suggestionsMapping: suggestionsMapping,
103
- ...replyEditorSuggestionsProps
104
- }) : null, files.length > 0 ? /*#__PURE__*/React.createElement(AttachmentPreview, {
105
- descriptionDetails: filesDescription,
106
- files: files,
107
- isDescriptionNeeded: true,
108
- needEditImage: false,
109
- onCancel: onFileCancel,
110
- onDescriptionChange: onChangeFileDescription,
111
- onSubmit: onFileSubmit,
112
- texts: attachmentPreviewTexts,
113
- ...attachmentPreviewCustomProps
114
- }) : null, headerElement || null, /*#__PURE__*/React.createElement(ReplyEditor, {
115
- content: content,
116
- EDITORURL: EDITORURL,
117
- features: allFeatures,
118
- formats: formats,
119
- getEditorState: getEditorState,
120
- id: id,
121
- isHTMLContent: isHTMLContent,
122
- onChange: onChange,
123
- onKeyDown: onKeyDown,
124
- onPaste: onPaste,
125
- placeHolder: placeHolder,
126
- ...replyEditorProps
127
- }), needFooter ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
128
- editor: editor,
129
- extensions: extensions,
130
- isHTMLContent: isHTMLContent,
131
- renderButtons: renderFooter,
132
- ...replyComposerFooterProps
133
- }) : null);
134
- }
135
- ReplyComposer.propTypes = replyComposerPropTypes;
136
- ReplyComposer.defaultProps = replyComposerDefaultProps;
137
- ReplyComposer.displayName = 'ReplyComposer';
@@ -1,5 +0,0 @@
1
- /** ** Styles *** */
2
-
3
- .replyComposer {
4
- /** ** Use this class for css customisation *** */
5
- }
@@ -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;
@@ -1,17 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- const replyComposerFooterPropTypes = {
4
- customStyle: PropTypes.object,
5
- editor: PropTypes.object.isRequired,
6
- isHTMLContent: PropTypes.bool,
7
- extensions: PropTypes.shape({
8
- details: PropTypes.objectOf(PropTypes.shape({
9
- componentProps: PropTypes.object,
10
- id: PropTypes.string,
11
- renderItem: PropTypes.func
12
- })),
13
- order: PropTypes.array
14
- }).isRequired,
15
- renderButtons: PropTypes.func
16
- };
17
- export default replyComposerFooterPropTypes;