@zohoim/chat-components 1.0.11 → 1.1.0

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 (133) hide show
  1. package/README.md +8 -0
  2. package/es/AttachmentHandler/AttachmentHandler.js +84 -0
  3. package/es/AttachmentHandler/css/AttachmentHandler.module.css +27 -0
  4. package/es/AttachmentHandler/index.js +1 -0
  5. package/es/AttachmentHandler/props/defaultProps.js +10 -0
  6. package/es/AttachmentHandler/props/propTypes.js +17 -0
  7. package/es/AttachmentPreview/AttachmentPreview.js +121 -0
  8. package/es/AttachmentPreview/css/AttachmentPreview.module.css +39 -0
  9. package/es/AttachmentPreview/index.js +1 -0
  10. package/es/AttachmentPreview/props/defaultProps.js +9 -0
  11. package/es/AttachmentPreview/props/propTypes.js +33 -0
  12. package/es/AttachmentPreviewBody/AttachmentPreviewBody.js +97 -0
  13. package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +75 -0
  14. package/es/AttachmentPreviewBody/index.js +1 -0
  15. package/es/AttachmentPreviewBody/props/defaultProps.js +7 -0
  16. package/es/AttachmentPreviewBody/props/propTypes.js +20 -0
  17. package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.js +84 -0
  18. package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css +47 -0
  19. package/es/AttachmentPreviewHeader/index.js +1 -0
  20. package/es/AttachmentPreviewHeader/props/defaultProps.js +7 -0
  21. package/es/AttachmentPreviewHeader/props/propTypes.js +16 -0
  22. package/es/Emoji/Emoji.js +72 -0
  23. package/es/Emoji/css/Emoji.module.css +48 -0
  24. package/es/Emoji/css/cssJSLogic.js +18 -0
  25. package/es/Emoji/index.js +1 -0
  26. package/es/Emoji/props/defaultProps.js +8 -0
  27. package/es/Emoji/props/propTypes.js +16 -0
  28. package/es/EmojiPopup/EmojiPopup.js +115 -0
  29. package/es/EmojiPopup/css/EmojiPopup.module.css +55 -0
  30. package/es/EmojiPopup/index.js +1 -0
  31. package/es/EmojiPopup/props/defaultProps.js +11 -0
  32. package/es/EmojiPopup/props/propTypes.js +21 -0
  33. package/es/Emojis/Emojis.js +81 -0
  34. package/es/Emojis/index.js +1 -0
  35. package/es/Emojis/props/defaultProps.js +10 -0
  36. package/es/Emojis/props/propTypes.js +20 -0
  37. package/es/EmojisEmptyState/EmojisEmptyState.js +50 -0
  38. package/es/EmojisEmptyState/css/EmojisEmptyState.module.css +18 -0
  39. package/es/EmojisEmptyState/index.js +1 -0
  40. package/es/EmojisEmptyState/props/defaultProps.js +9 -0
  41. package/es/EmojisEmptyState/props/propTypes.js +8 -0
  42. package/es/EmojisFooter/EmojisFooter.js +71 -0
  43. package/es/EmojisFooter/css/EmojisFooter.module.css +40 -0
  44. package/es/EmojisFooter/index.js +1 -0
  45. package/es/EmojisFooter/props/defaultProps.js +7 -0
  46. package/es/EmojisFooter/props/propTypes.js +12 -0
  47. package/es/EmojisHeader/EmojisHeader.js +65 -0
  48. package/es/EmojisHeader/css/EmojisHeader.module.css +36 -0
  49. package/es/EmojisHeader/index.js +1 -0
  50. package/es/EmojisHeader/props/defaultProps.js +8 -0
  51. package/es/EmojisHeader/props/propTypes.js +13 -0
  52. package/es/EmojisList/EmojisList.js +130 -0
  53. package/es/EmojisList/css/EmojisList.module.css +50 -0
  54. package/es/EmojisList/css/cssJSLogic.js +25 -0
  55. package/es/EmojisList/index.js +1 -0
  56. package/es/EmojisList/props/defaultProps.js +10 -0
  57. package/es/EmojisList/props/propTypes.js +20 -0
  58. package/es/MessageActionsMore/MessageActionsMore.js +2 -2
  59. package/es/MessageActionsMore/props/propTypes.js +5 -2
  60. package/es/MessageActionsWrapper/MessageActionsWrapper.js +1 -1
  61. package/es/Theme/ThemeAssets.js +2 -2
  62. package/es/Theme/ThemeWrapper.js +20 -7
  63. package/es/Theme/TooltipWrapper.js +1 -1
  64. package/es/Theme/props/defaultProps.js +2 -1
  65. package/es/Theme/props/propTypes.js +2 -1
  66. package/es/Theme/themeVariables/dark/blueTheme.js +18 -1
  67. package/es/Theme/themeVariables/dark/commonColorVariable.js +20 -1
  68. package/es/Theme/themeVariables/dark/greenTheme.js +18 -1
  69. package/es/Theme/themeVariables/dark/orangeTheme.js +18 -1
  70. package/es/Theme/themeVariables/dark/redTheme.js +18 -1
  71. package/es/Theme/themeVariables/dark/yellowTheme.js +18 -1
  72. package/es/Theme/themeVariables/light/blueTheme.js +22 -1
  73. package/es/Theme/themeVariables/light/commonColorVariable.js +19 -0
  74. package/es/Theme/themeVariables/light/greenTheme.js +18 -1
  75. package/es/Theme/themeVariables/light/orangeTheme.js +18 -1
  76. package/es/Theme/themeVariables/light/redTheme.js +18 -1
  77. package/es/Theme/themeVariables/light/yellowTheme.js +18 -1
  78. package/es/Theme/themeVariables/pureDark/blueTheme.js +18 -1
  79. package/es/Theme/themeVariables/pureDark/commonColorVariable.js +20 -1
  80. package/es/Theme/themeVariables/pureDark/greenTheme.js +18 -1
  81. package/es/Theme/themeVariables/pureDark/orangeTheme.js +18 -1
  82. package/es/Theme/themeVariables/pureDark/redTheme.js +18 -1
  83. package/es/Theme/themeVariables/pureDark/yellowTheme.js +18 -1
  84. package/es/Theme/utils/getThemeConfigurations.js +1 -1
  85. package/es/constants/index.js +8 -1
  86. package/es/constants/propConstants/editorPropConstants.js +3 -0
  87. package/es/constants/propConstants/popupPropConstants.js +2 -0
  88. package/es/im/IMAttachmentHandler/IMAttachmentHandler.js +50 -0
  89. package/es/im/IMAttachmentHandler/index.js +1 -0
  90. package/es/im/IMAttachmentHandler/props/defaultProps.js +10 -0
  91. package/es/im/IMAttachmentHandler/props/propTypes.js +28 -0
  92. package/es/im/ReplyComposer/ReplyComposer.js +153 -0
  93. package/es/im/ReplyComposer/css/ReplyComposer.module.css +10 -0
  94. package/es/im/ReplyComposer/css/cssJSLogic.js +13 -0
  95. package/es/im/ReplyComposer/index.js +1 -0
  96. package/es/im/ReplyComposer/props/defaultProps.js +7 -0
  97. package/es/im/ReplyComposer/props/propTypes.js +60 -0
  98. package/es/im/ReplyComposerFooter/ReplyComposerFooter.js +41 -0
  99. package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css +10 -0
  100. package/es/im/ReplyComposerFooter/index.js +1 -0
  101. package/es/im/ReplyComposerFooter/props/defaultProps.js +8 -0
  102. package/es/im/ReplyComposerFooter/props/propTypes.js +17 -0
  103. package/es/im/ReplyEditor/ReplyEditor.js +103 -0
  104. package/es/im/ReplyEditor/css/ReplyEditor.module.css +50 -0
  105. package/es/im/ReplyEditor/css/cssJSLogic.js +10 -0
  106. package/es/im/ReplyEditor/index.js +1 -0
  107. package/es/im/ReplyEditor/props/defaultProps.js +8 -0
  108. package/es/im/ReplyEditor/props/propTypes.js +27 -0
  109. package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js +149 -0
  110. package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css +5 -0
  111. package/es/im/ReplyEditorExtensions/index.js +1 -0
  112. package/es/im/ReplyEditorExtensions/props/defaultProps.js +6 -0
  113. package/es/im/ReplyEditorExtensions/props/propTypes.js +16 -0
  114. package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js +95 -0
  115. package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css +8 -0
  116. package/es/im/ReplyEditorSuggestions/index.js +1 -0
  117. package/es/im/ReplyEditorSuggestions/props/defaultProps.js +6 -0
  118. package/es/im/ReplyEditorSuggestions/props/propTypes.js +21 -0
  119. package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js +93 -0
  120. package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css +7 -0
  121. package/es/im/ReplyEditorSuggestionsPopup/index.js +1 -0
  122. package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js +10 -0
  123. package/es/im/ReplyEditorSuggestionsPopup/props/propTypes.js +21 -0
  124. package/es/im/index.js +8 -1
  125. package/es/index.js +13 -2
  126. package/es/rte/Editor/Editor.js +80 -0
  127. package/es/rte/Editor/css/Editor.module.css +17 -0
  128. package/es/rte/Editor/index.js +1 -0
  129. package/es/rte/Editor/props/defaultProps.js +21 -0
  130. package/es/rte/Editor/props/propTypes.js +52 -0
  131. package/es/rte/index.js +1 -0
  132. package/package.json +7 -7
  133. package/es/Theme/constants/index.js +0 -41
@@ -0,0 +1,149 @@
1
+ /** ** Libraries *** */
2
+ import React, { useCallback, useMemo } from 'react';
3
+ /** ** Components *** */
4
+
5
+ import { Container, Box } from '@zohodesk/components/es/Layout';
6
+ import IMAttachmentHandler from "../IMAttachmentHandler/IMAttachmentHandler";
7
+ import EmojiPopup from "../../EmojiPopup/EmojiPopup";
8
+ /** ** Hooks *** */
9
+
10
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
11
+ import useReplyEditorExtensions from '@zohoim/chat-components-hooks/es/im/ReplyEditorExtensions/useReplyEditorExtensions';
12
+ /** ** Constants *** */
13
+
14
+ import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
15
+ import replyEditorExtensionsDefaultProps from "./props/defaultProps";
16
+ import replyEditorExtensionsPropTypes from "./props/propTypes";
17
+ /** ** Styles *** */
18
+
19
+ import style from "./css/ReplyEditorExtensions.module.css";
20
+ export default function ReplyEditorExtensions(props) {
21
+ const {
22
+ customStyle,
23
+ extensions = dummyObject,
24
+ isHTMLContent,
25
+ editor
26
+ } = props;
27
+ const {
28
+ details = dummyObject,
29
+ order = dummyArray
30
+ } = extensions;
31
+ const handleRenderEmojiExtension = useCallback(_ref => {
32
+ let {
33
+ id,
34
+ onSelect,
35
+ onPopupOpen,
36
+ onPopupClose,
37
+ componentProps
38
+ } = _ref;
39
+ const {
40
+ needFocusOnSelect
41
+ } = componentProps;
42
+ return /*#__PURE__*/React.createElement(EmojiPopup, {
43
+ key: id,
44
+ onPopupClose: onPopupClose,
45
+ onPopupOpen: onPopupOpen,
46
+ onSelect: value => {
47
+ onSelect({
48
+ content: value,
49
+ needFocus: needFocusOnSelect
50
+ });
51
+ },
52
+ ...componentProps
53
+ });
54
+ }, []);
55
+ const handleRenderImageExtension = useCallback(_ref2 => {
56
+ let {
57
+ id,
58
+ componentProps
59
+ } = _ref2;
60
+ return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
61
+ key: id,
62
+ attachmentType: "image",
63
+ iconName: "ZD-TT-image",
64
+ iconSize: "14",
65
+ ...componentProps
66
+ });
67
+ }, []);
68
+ const handleRenderFileExtension = useCallback(_ref3 => {
69
+ let {
70
+ id,
71
+ componentProps
72
+ } = _ref3;
73
+ return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
74
+ key: id,
75
+ attachmentType: "document",
76
+ iconName: "ZD-TT-ttAttach",
77
+ iconSize: "14",
78
+ ...componentProps
79
+ });
80
+ }, []);
81
+ const defaultRenderMethod = useMemo(() => ({
82
+ emoji: {
83
+ id: 'emoji',
84
+ renderItem: handleRenderEmojiExtension
85
+ },
86
+ image: {
87
+ id: 'image',
88
+ renderItem: handleRenderImageExtension
89
+ },
90
+ file: {
91
+ id: 'file',
92
+ renderItem: handleRenderFileExtension
93
+ }
94
+ }), [handleRenderEmojiExtension, handleRenderFileExtension, handleRenderImageExtension]);
95
+ const {
96
+ onSelect,
97
+ onPopupOpen,
98
+ onPopupClose,
99
+ onRetainSelection,
100
+ onRemoveSelection
101
+ } = useReplyEditorExtensions({
102
+ extensions,
103
+ isHTMLContent,
104
+ editor
105
+ });
106
+ /* External customization */
107
+
108
+ const newStyle = useMergeStyle(style, customStyle);
109
+ return /*#__PURE__*/React.createElement(Container, {
110
+ alignBox: "row",
111
+ className: newStyle.replyEditorExtensions
112
+ }, order.map(extension => {
113
+ const {
114
+ id,
115
+ renderItem,
116
+ componentProps = dummyObject
117
+ } = details[extension] || {};
118
+ const {
119
+ renderItem: renderMethod
120
+ } = defaultRenderMethod[id] || dummyObject;
121
+ const props = {
122
+ id,
123
+ onSelect,
124
+ componentProps,
125
+ editor,
126
+ onPopupOpen,
127
+ onPopupClose,
128
+ onRetainSelection,
129
+ onRemoveSelection
130
+ };
131
+
132
+ if (renderItem) {
133
+ return /*#__PURE__*/React.createElement(Box, {
134
+ key: id
135
+ }, renderItem(props));
136
+ }
137
+
138
+ if (renderMethod) {
139
+ return /*#__PURE__*/React.createElement(Box, {
140
+ key: id
141
+ }, renderMethod(props));
142
+ }
143
+
144
+ return null;
145
+ }));
146
+ }
147
+ ReplyEditorExtensions.propTypes = replyEditorExtensionsPropTypes;
148
+ ReplyEditorExtensions.defaultProps = replyEditorExtensionsDefaultProps;
149
+ ReplyEditorExtensions.displayName = 'ReplyEditorExtensions';
@@ -0,0 +1,5 @@
1
+ /** ** Styles *** */
2
+
3
+ .replyEditorExtensions {
4
+ /** ** Use this class for css customisation *** */
5
+ }
@@ -0,0 +1 @@
1
+ export { default as ReplyEditorExtensions } from "./ReplyEditorExtensions";
@@ -0,0 +1,6 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
+ const replyEditorExtensionsDefaultProps = {
4
+ customStyle: dummyObject
5
+ };
6
+ export default replyEditorExtensionsDefaultProps;
@@ -0,0 +1,16 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ const replyEditorExtensionsPropTypes = {
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
+ };
16
+ export default replyEditorExtensionsPropTypes;
@@ -0,0 +1,95 @@
1
+ /** ** Libraries *** */
2
+ import React, { useMemo, useCallback } from 'react';
3
+ /** ** Components *** */
4
+
5
+ import { Container } from '@zohodesk/components/es/Layout';
6
+ import Emojis from "../../Emojis/Emojis";
7
+ import ReplyEditorSuggestionsPopup from "../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup";
8
+ /** ** Hooks *** */
9
+
10
+ import useReplyEditorSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestions/useReplyEditorSuggestions';
11
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
12
+ /** ** Constants *** */
13
+
14
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
15
+ import replyEditorSuggestionsDefaultProps from "./props/defaultProps";
16
+ import replyEditorSuggestionsPropTypes from "./props/propTypes";
17
+ import { emojiRegex } from '@zohoim/chat-components-utils/es/constants/regexConstants';
18
+ /** ** Styles *** */
19
+
20
+ import style from "./css/ReplyEditorSuggestions.module.css";
21
+ export default function ReplyEditorSuggestions(props) {
22
+ const {
23
+ customStyle,
24
+ suggestionDetails = dummyObject,
25
+ suggestionsMapping,
26
+ onSelect,
27
+ customProps,
28
+ getMethods,
29
+ onClose
30
+ } = props;
31
+ const {
32
+ position = dummyObject
33
+ } = suggestionDetails;
34
+ const {
35
+ replyEditorSuggestionsPopupProps = dummyObject
36
+ } = customProps || dummyObject;
37
+ /* External customization */
38
+
39
+ const newStyle = useMergeStyle(style, customStyle);
40
+ const handleRenderEmoji = useCallback(function () {
41
+ let {
42
+ onSelect,
43
+ searchText = '',
44
+ componentProps,
45
+ getMethods
46
+ } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
47
+ const {
48
+ searchTextLenForShow = 2
49
+ } = componentProps || {}; // (-1) -> ':' string is not valid for count.
50
+
51
+ const isShowEmojiPopup = searchText.length - 1 >= searchTextLenForShow;
52
+ return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
53
+ emojisRowType: "single",
54
+ getMethods: getMethods,
55
+ isShowGroupBasedList: false,
56
+ isShowOnlyContent: true,
57
+ isShowSearchBox: false,
58
+ needAutoFocus: false,
59
+ onSelect: value => {
60
+ onSelect && onSelect({
61
+ content: value
62
+ });
63
+ },
64
+ searchString: searchText,
65
+ ...componentProps
66
+ }) : null;
67
+ }, []);
68
+ const defaultRenderMethod = useMemo(() => ({
69
+ ':': handleRenderEmoji,
70
+ [emojiRegex]: handleRenderEmoji
71
+ }), [handleRenderEmoji]);
72
+ const {
73
+ suggestionElement,
74
+ popupProps = dummyObject
75
+ } = useReplyEditorSuggestions({
76
+ defaultRenderMethod,
77
+ suggestionDetails,
78
+ suggestionsMapping,
79
+ onSelect,
80
+ getMethods,
81
+ onClose
82
+ });
83
+ return /*#__PURE__*/React.createElement(Container, {
84
+ className: newStyle.suggestionPopup
85
+ }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
86
+ onClose: onClose,
87
+ suggestionElement: suggestionElement,
88
+ targetPosition: position,
89
+ ...replyEditorSuggestionsPopupProps,
90
+ ...popupProps
91
+ }));
92
+ }
93
+ ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
94
+ ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;
95
+ ReplyEditorSuggestions.displayName = 'ReplyEditorSuggestions';
@@ -0,0 +1,8 @@
1
+ /** ** Styles *** */
2
+
3
+ .suggestionPopup {
4
+ /** ** Use this class name for css customisation *** */
5
+ bottom: 100% ;
6
+ height: auto ;
7
+ box-shadow: 0 3px 30px rgba(0, 0, 0, 0.13);
8
+ }
@@ -0,0 +1 @@
1
+ export { default as ReplyEditorSuggestions } from "./ReplyEditorSuggestions";
@@ -0,0 +1,6 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
3
+ const replyEditorSuggestionsDefaultProps = {
4
+ customStyle: dummyObject
5
+ };
6
+ export default replyEditorSuggestionsDefaultProps;
@@ -0,0 +1,21 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ const replyEditorSuggestionsPropTypes = {
4
+ customStyle: PropTypes.object,
5
+ suggestionDetails: PropTypes.shape({
6
+ editor: PropTypes.object,
7
+ searchText: PropTypes.string,
8
+ triggerDetails: PropTypes.shape({
9
+ trigger: PropTypes.string
10
+ })
11
+ }).isRequired,
12
+ suggestionsMapping: PropTypes.objectOf(PropTypes.shape({
13
+ componentProps: PropTypes.object,
14
+ popupProps: PropTypes.object,
15
+ renderItem: PropTypes.func
16
+ })).isRequired,
17
+ onSelect: PropTypes.func,
18
+ getMethods: PropTypes.func,
19
+ onClose: PropTypes.func
20
+ };
21
+ export default replyEditorSuggestionsPropTypes;
@@ -0,0 +1,93 @@
1
+ /** ** Libraries *** */
2
+ import React from 'react';
3
+ /** ** Components *** */
4
+
5
+ import Popup from '@zohodesk/components/es/Popup/Popup';
6
+ import DropBox from '@zohodesk/components/es/DropBox/DropBox';
7
+ import Modal from '@zohodesk/components/es/Modal/Modal';
8
+ /** ** Hooks *** */
9
+
10
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
11
+ import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup';
12
+ /** ** Constants *** */
13
+
14
+ import replyEditorSuggestionsPopupDefaultProps from "./props/defaultProps";
15
+ import replyEditorSuggestionsPopupPropTypes from "./props/propTypes";
16
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
17
+ import { EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from "../../constants";
18
+ /** ** Styles *** */
19
+
20
+ import style from "./css/ReplyEditorSuggestionsPopup.module.css";
21
+ export function ReplyEditorSuggestionsPopupComp(props) {
22
+ const {
23
+ customStyle,
24
+ targetPosition = dummyObject,
25
+ onClose,
26
+ popupSize,
27
+ customProps,
28
+ suggestionElement,
29
+ needPositionUpdate,
30
+ defaultPosition,
31
+
32
+ /** ** Popup Props *** */
33
+ getTargetRef,
34
+ getContainerRef,
35
+ position,
36
+ togglePopup,
37
+ isPopupReady,
38
+ isPopupOpen,
39
+ removeClose,
40
+ openPopupOnly,
41
+ closePopupOnly,
42
+ isAbsolutePositioningNeeded,
43
+ positionsOffset
44
+ } = props;
45
+ const {
46
+ dropBoxProps = dummyObject
47
+ } = customProps || dummyObject;
48
+ const {
49
+ targetElementStyle
50
+ } = useReplyEditorSuggestionsPopup({
51
+ suggestionElement,
52
+ targetPosition,
53
+ needPositionUpdate,
54
+ defaultPosition,
55
+ onClose,
56
+ openPopupOnly,
57
+ closePopupOnly,
58
+ isPopupOpen,
59
+ togglePopup
60
+ });
61
+ /* External customization */
62
+
63
+ const newStyle = useMergeStyle(style, customStyle);
64
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
65
+ portalId: EDITOR_POPUP_TARGET_PORTAL
66
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
67
+ ref: getTargetRef,
68
+ className: newStyle.hiddenTarget,
69
+ style: targetElementStyle
70
+ }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
71
+ boxPosition: position,
72
+ customStyle: dummyObject,
73
+ getRef: getContainerRef,
74
+ isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
75
+ isActive: isPopupReady,
76
+ isAnimate: true,
77
+ isArrow: false,
78
+ onClick: removeClose,
79
+ portalId: EDITOR_POPUP_PORTAL,
80
+ positionsOffset: positionsOffset,
81
+ size: popupSize,
82
+ ...dropBoxProps
83
+ }, suggestionElement) : null);
84
+ }
85
+ const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
86
+ isAbsolutePositioningNeeded: false
87
+ });
88
+ ReplyEditorSuggestionsPopupComp.propTypes = replyEditorSuggestionsPopupPropTypes;
89
+ ReplyEditorSuggestionsPopupComp.defaultProps = replyEditorSuggestionsPopupDefaultProps;
90
+ ReplyEditorSuggestionsPopup.propTypes = replyEditorSuggestionsPopupPropTypes;
91
+ ReplyEditorSuggestionsPopup.defaultProps = replyEditorSuggestionsPopupDefaultProps;
92
+ ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
93
+ export default ReplyEditorSuggestionsPopup;
@@ -0,0 +1,7 @@
1
+ /** ** Styles *** */
2
+ .hiddenTarget {
3
+ height: var(--zd_size15) ;
4
+ width: var(--zd_size25) ;
5
+ visibility: hidden;
6
+ position: fixed;
7
+ }
@@ -0,0 +1 @@
1
+ export { default as ReplyEditorSuggestionsPopup } from "./ReplyEditorSuggestionsPopup";
@@ -0,0 +1,10 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
+ const replyEditorSuggestionsPopupDefaultProps = {
4
+ customStyle: dummyObject,
5
+ popupSize: 'xxlarge',
6
+ defaultPosition: 'bottomCenterToRight',
7
+ needPositionUpdate: true,
8
+ customOrder: ['bottomCenterToRight', 'bottomLeftToRight', 'topLeftToRight', 'topCenterToRight', 'rightTopToBottom', 'rightCenterToBottom', 'rightBottomToTop', 'rightCenterToTop', 'rightBottom', 'bottomRight', 'topRight', 'rightTop', 'bottomRightToLeft', 'bottomCenterToLeft', 'topRightToLeft', 'topCenterToLeft', 'rightCenter', 'bottomLeft', 'topLeft', 'bottomCenter', 'topCenter', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'leftBottom', 'leftTop']
9
+ };
10
+ export default replyEditorSuggestionsPopupDefaultProps;
@@ -0,0 +1,21 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ /** ** Constants *** */
4
+
5
+ import { popupSize, popupPosition } from "../../../constants/propConstants/popupPropConstants";
6
+ const replyEditorSuggestionsPopupPropTypes = {
7
+ customStyle: PropTypes.object,
8
+ targetPosition: PropTypes.shape({
9
+ x: PropTypes.number,
10
+ y: PropTypes.number
11
+ }).isRequired,
12
+ onClose: PropTypes.func,
13
+ popupSize: PropTypes.oneOf(popupSize),
14
+ customProps: PropTypes.shape({
15
+ dropBoxProps: PropTypes.object
16
+ }),
17
+ suggestionElement: PropTypes.element.isRequired,
18
+ needPositionUpdate: PropTypes.bool,
19
+ defaultPosition: PropTypes.oneOf(popupPosition)
20
+ };
21
+ export default replyEditorSuggestionsPopupPropTypes;
package/es/im/index.js CHANGED
@@ -6,4 +6,11 @@ export * from "./IMMessageMetaInfo";
6
6
  export * from "./IMMessageContent";
7
7
  export * from "./IMTextBubble";
8
8
  export * from "./IMReplyBubble";
9
- export * from "./ArticleBubble";
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";
package/es/index.js CHANGED
@@ -25,8 +25,19 @@ export * from "./ReplyBubbleHeader";
25
25
  export * from "./LazyLoadImage";
26
26
  export * from "./ReplyBubbleContent";
27
27
  export * from "./MessageStatus";
28
- export * from "./im"; // ... export other components
29
-
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";
30
41
  /** * CONSTANTS ** */
31
42
 
32
43
  export * from "./constants";
@@ -0,0 +1,80 @@
1
+ /** ** Libraries *** */
2
+ import React from 'react';
3
+ /** ** Hooks *** */
4
+
5
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
6
+ import useEditor from '@zohoim/chat-components-hooks/es/rte/Editor/useEditor';
7
+ /** ** Constants *** */
8
+
9
+ import editorDefaultProps from "./props/defaultProps";
10
+ import editorPropTypes from "./props/propTypes";
11
+ import { defaultEditorURL } from "../../constants";
12
+ /** ** Styles *** */
13
+
14
+ import style from "./css/Editor.module.css";
15
+ export default function Editor(props) {
16
+ const {
17
+ customStyle,
18
+ id,
19
+ EDITORURL = defaultEditorURL,
20
+ content,
21
+ placeHolder,
22
+ isHTMLContent,
23
+ menuBarProps,
24
+ formats,
25
+ features,
26
+ needAutoFocus,
27
+ isReadOnly,
28
+ insertContentDetails,
29
+ customOptions,
30
+ onReadyCallback,
31
+ onErrorCallback,
32
+ onChange,
33
+ onKeyDown,
34
+ onPaste,
35
+ langCode,
36
+ appearance,
37
+ isRTL,
38
+ handlers,
39
+ domId: propDomId
40
+ } = props;
41
+ /* External CSS Customization */
42
+
43
+ const newStyle = useMergeStyle(style, customStyle);
44
+ const {
45
+ domId
46
+ } = useEditor({
47
+ id,
48
+ EDITORURL,
49
+ content,
50
+ placeHolder,
51
+ isHTMLContent,
52
+ menuBarProps,
53
+ formats,
54
+ className: newStyle.editableDiv,
55
+ features,
56
+ needAutoFocus,
57
+ isReadOnly,
58
+ insertContentDetails,
59
+ customOptions,
60
+ onReadyCallback,
61
+ onErrorCallback,
62
+ onChange,
63
+ onKeyDown,
64
+ onPaste,
65
+ langCode,
66
+ appearance,
67
+ isRTL,
68
+ handlers,
69
+ domId: propDomId
70
+ });
71
+ return /*#__PURE__*/React.createElement("div", {
72
+ className: newStyle.editorWrapper
73
+ }, /*#__PURE__*/React.createElement("div", {
74
+ className: newStyle.editor,
75
+ id: domId
76
+ }));
77
+ }
78
+ Editor.propTypes = editorPropTypes;
79
+ Editor.defaultProps = editorDefaultProps;
80
+ Editor.displayName = 'Editor';
@@ -0,0 +1,17 @@
1
+ .editorWrapper {
2
+ /* Use this class for css customisation */
3
+ }
4
+
5
+ .editor {
6
+ /* Use this class for css customisation */
7
+ }
8
+
9
+ .editableDiv {
10
+ /* Use this class for css customisation */
11
+ min-height: var(--zd_size120) !important;
12
+ max-height: var(--zd_size120) !important;
13
+ overflow: auto !important;
14
+ font-size: var(--zd_font_size14) !important;
15
+ font-family: var(--zd_regular) !important;
16
+ padding: 0 !important;
17
+ }
@@ -0,0 +1 @@
1
+ export { default as Editor } from "./Editor";
@@ -0,0 +1,21 @@
1
+ /** ** Constants *** */
2
+ import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
+ const editorDefaultProps = {
4
+ customStyle: dummyObject,
5
+ id: 'Editor',
6
+ placeHolder: ' ',
7
+ isHTMLContent: false,
8
+ needAutoFocus: true,
9
+ isReadOnly: false,
10
+ isRTL: false,
11
+ langCode: 'en_US',
12
+ menuBarProps: dummyObject,
13
+ appearance: dummyObject,
14
+ features: dummyArray,
15
+ formats: dummyArray,
16
+ handlers: {
17
+ needIDReRender: true,
18
+ needContentUpdate: true
19
+ }
20
+ };
21
+ export default editorDefaultProps;
@@ -0,0 +1,52 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ /** ** Constants *** */
4
+
5
+ import { modeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
6
+ import { features, formats, langCode } from "../../../constants/propConstants/editorPropConstants";
7
+ const editorPropTypes = {
8
+ id: PropTypes.string.isRequired,
9
+ domId: PropTypes.string,
10
+ content: PropTypes.string.isRequired,
11
+ EDITORURL: PropTypes.string.isRequired,
12
+ placeHolder: PropTypes.string,
13
+ customStyle: PropTypes.object,
14
+ isHTMLContent: PropTypes.bool,
15
+ appearance: PropTypes.shape({
16
+ mode: PropTypes.oneOf([modeConstants.LIGHT, modeConstants.DARK, modeConstants.PURE_DARK]).isRequired,
17
+ themeVariables: PropTypes.object
18
+ }),
19
+ // Editor Options - Refer the learn document (Override the options)
20
+ customOptions: PropTypes.object,
21
+ menuBarProps: PropTypes.shape({
22
+ isShow: PropTypes.bool.isRequired,
23
+ groupLength: PropTypes.number,
24
+ order: PropTypes.arrayOf(PropTypes.oneOf([...formats, ...features])),
25
+ position: PropTypes.oneOf(['top', 'bottom']),
26
+ responsive: PropTypes.bool,
27
+ tooltip: PropTypes.bool
28
+ }),
29
+ features: PropTypes.arrayOf(PropTypes.oneOf(features)),
30
+ formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
31
+ needAutoFocus: PropTypes.bool,
32
+ isReadOnly: PropTypes.bool,
33
+ isRTL: PropTypes.bool,
34
+ langCode: PropTypes.oneOf(langCode),
35
+ insertContentDetails: PropTypes.shape({
36
+ content: PropTypes.string.isRequired,
37
+ range: PropTypes.shape({
38
+ from: PropTypes.number,
39
+ to: PropTypes.number
40
+ })
41
+ }),
42
+ onChange: PropTypes.func,
43
+ onPaste: PropTypes.func,
44
+ onKeyDown: PropTypes.func,
45
+ onReadyCallback: PropTypes.func,
46
+ onErrorCallback: PropTypes.func,
47
+ handlers: PropTypes.shape({
48
+ needContentUpdate: PropTypes.bool,
49
+ needIDReRender: PropTypes.bool
50
+ })
51
+ };
52
+ export default editorPropTypes;
@@ -0,0 +1 @@
1
+ export * from "./Editor";