@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,8 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
- const replyEditorDefaultProps = {
4
- customStyle: dummyObject,
5
- customProps: dummyObject,
6
- themeVariables: dummyObject
7
- };
8
- export default replyEditorDefaultProps;
@@ -1,27 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- /** ** Constants *** */
4
-
5
- import { features, formats } from "../../../constants/propConstants/editorPropConstants";
6
- const replyEditorPropTypes = {
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
- isHTMLContent: PropTypes.bool,
15
- onChange: PropTypes.func.isRequired,
16
- onKeyDown: PropTypes.func,
17
- onPaste: PropTypes.func,
18
- onEnter: PropTypes.func,
19
- onErrorCallback: PropTypes.func,
20
- onReadyCallback: PropTypes.func,
21
- themeVariables: PropTypes.object,
22
- customProps: PropTypes.shape({
23
- editorProps: PropTypes.object
24
- }),
25
- getEditorState: PropTypes.func
26
- };
27
- export default replyEditorPropTypes;
@@ -1,149 +0,0 @@
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';
@@ -1,5 +0,0 @@
1
- /** ** Styles *** */
2
-
3
- .replyEditorExtensions {
4
- /** ** Use this class for css customisation *** */
5
- }
@@ -1 +0,0 @@
1
- export { default as ReplyEditorExtensions } from "./ReplyEditorExtensions";
@@ -1,6 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
- const replyEditorExtensionsDefaultProps = {
4
- customStyle: dummyObject
5
- };
6
- export default replyEditorExtensionsDefaultProps;
@@ -1,16 +0,0 @@
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;
@@ -1,87 +0,0 @@
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
- /** ** Styles *** */
18
-
19
- import style from "./css/ReplyEditorSuggestions.module.css";
20
- export default function ReplyEditorSuggestions(props) {
21
- const {
22
- customStyle,
23
- suggestionDetails = dummyObject,
24
- suggestionsMapping,
25
- onSelect,
26
- customProps,
27
- getMethods,
28
- onClose
29
- } = props;
30
- const {
31
- position = dummyObject
32
- } = suggestionDetails;
33
- const {
34
- replyEditorSuggestionsPopupProps = dummyObject
35
- } = customProps || dummyObject;
36
- /* External customization */
37
-
38
- const newStyle = useMergeStyle(style, customStyle);
39
- const handleRenderEmoji = useCallback(function () {
40
- let {
41
- onSelect,
42
- searchText,
43
- componentProps
44
- } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
45
- const isShowEmojiPopup = searchText.length > 1;
46
- return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
47
- emojisRowType: "single",
48
- isShowGroupBasedList: false,
49
- isShowOnlyContent: true,
50
- isShowSearchBox: false,
51
- needAutoFocus: false,
52
- onSelect: value => {
53
- onSelect && onSelect({
54
- content: value
55
- });
56
- },
57
- searchString: searchText,
58
- ...componentProps
59
- }) : null;
60
- }, []);
61
- const defaultRenderMethod = useMemo(() => ({
62
- ':': handleRenderEmoji
63
- }), [handleRenderEmoji]);
64
- const {
65
- suggestionElement,
66
- popupProps = dummyObject
67
- } = useReplyEditorSuggestions({
68
- defaultRenderMethod,
69
- suggestionDetails,
70
- suggestionsMapping,
71
- onSelect,
72
- getMethods,
73
- onClose
74
- });
75
- return /*#__PURE__*/React.createElement(Container, {
76
- className: newStyle.suggestionPopup
77
- }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
78
- onClose: onClose,
79
- suggestionElement: suggestionElement,
80
- targetPosition: position,
81
- ...replyEditorSuggestionsPopupProps,
82
- ...popupProps
83
- }));
84
- }
85
- ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
86
- ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;
87
- ReplyEditorSuggestions.displayName = 'ReplyEditorSuggestions';
@@ -1,8 +0,0 @@
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
- }
@@ -1 +0,0 @@
1
- export { default as ReplyEditorSuggestions } from "./ReplyEditorSuggestions";
@@ -1,6 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
3
- const replyEditorSuggestionsDefaultProps = {
4
- customStyle: dummyObject
5
- };
6
- export default replyEditorSuggestionsDefaultProps;
@@ -1,20 +0,0 @@
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
- renderItem: PropTypes.func
15
- })).isRequired,
16
- onSelect: PropTypes.func,
17
- getMethods: PropTypes.func,
18
- onClose: PropTypes.func
19
- };
20
- export default replyEditorSuggestionsPropTypes;
@@ -1,90 +0,0 @@
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
- /** ** Hooks *** */
8
-
9
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
10
- import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup';
11
- /** ** Constants *** */
12
-
13
- import replyEditorSuggestionsPopupDefaultProps from "./props/defaultProps";
14
- import replyEditorSuggestionsPopupPropTypes from "./props/propTypes";
15
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
16
- import { EDITOR_POPUP_PORTAL } from "../../constants";
17
- /** ** Styles *** */
18
-
19
- import style from "./css/ReplyEditorSuggestionsPopup.module.css";
20
- export function ReplyEditorSuggestionsPopupComp(props) {
21
- const {
22
- customStyle,
23
- targetPosition = dummyObject,
24
- onClose,
25
- popupSize,
26
- customProps,
27
- suggestionElement,
28
- needPositionUpdate,
29
- defaultPosition,
30
-
31
- /** ** Popup Props *** */
32
- getTargetRef,
33
- getContainerRef,
34
- position,
35
- togglePopup,
36
- isPopupReady,
37
- isPopupOpen,
38
- removeClose,
39
- openPopupOnly,
40
- closePopupOnly,
41
- isAbsolutePositioningNeeded,
42
- positionsOffset
43
- } = props;
44
- const {
45
- dropBoxProps = dummyObject
46
- } = customProps || dummyObject;
47
- const {
48
- targetElementStyle
49
- } = useReplyEditorSuggestionsPopup({
50
- suggestionElement,
51
- targetPosition,
52
- needPositionUpdate,
53
- defaultPosition,
54
- onClose,
55
- openPopupOnly,
56
- closePopupOnly,
57
- isPopupOpen,
58
- togglePopup
59
- });
60
- /* External customization */
61
-
62
- const newStyle = useMergeStyle(style, customStyle);
63
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
64
- ref: getTargetRef,
65
- className: newStyle.hiddenTarget,
66
- style: targetElementStyle
67
- }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
68
- boxPosition: position,
69
- customStyle: dummyObject,
70
- getRef: getContainerRef,
71
- isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
72
- isActive: isPopupReady,
73
- isAnimate: true,
74
- isArrow: false,
75
- onClick: removeClose,
76
- portalId: EDITOR_POPUP_PORTAL,
77
- positionsOffset: positionsOffset,
78
- size: popupSize,
79
- ...dropBoxProps
80
- }, suggestionElement) : null);
81
- }
82
- const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
83
- isAbsolutePositioningNeeded: false
84
- });
85
- ReplyEditorSuggestionsPopupComp.propTypes = replyEditorSuggestionsPopupPropTypes;
86
- ReplyEditorSuggestionsPopupComp.defaultProps = replyEditorSuggestionsPopupDefaultProps;
87
- ReplyEditorSuggestionsPopup.propTypes = replyEditorSuggestionsPopupPropTypes;
88
- ReplyEditorSuggestionsPopup.defaultProps = replyEditorSuggestionsPopupDefaultProps;
89
- ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
90
- export default ReplyEditorSuggestionsPopup;
@@ -1,7 +0,0 @@
1
- /** ** Styles *** */
2
- .hiddenTarget {
3
- height: var(--zd_size15) ;
4
- width: var(--zd_size25) ;
5
- visibility: hidden;
6
- position: fixed;
7
- }
@@ -1 +0,0 @@
1
- export { default as ReplyEditorSuggestionsPopup } from "./ReplyEditorSuggestionsPopup";
@@ -1,10 +0,0 @@
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;
@@ -1,21 +0,0 @@
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;
@@ -1,80 +0,0 @@
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';
@@ -1,19 +0,0 @@
1
- .editorWrapper {
2
- /* Use this class for css customisation */
3
- /* max-height: 160px !important; */
4
- padding: var(--zd_size16) ;
5
- }
6
-
7
- .editor {
8
- /* Use this class for css customisation */
9
- }
10
-
11
- .editableDiv {
12
- /* Use this class for css customisation */
13
- min-height: var(--zd_size120) !important;
14
- max-height: var(--zd_size120) !important;
15
- overflow: auto !important;
16
- font-size: var(--zd_font_size14) !important;
17
- font-family: var(--zd_regular) !important;
18
- padding: 0 !important;
19
- }
@@ -1 +0,0 @@
1
- export { default as Editor } from "./Editor";
@@ -1,21 +0,0 @@
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;
@@ -1,52 +0,0 @@
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;
package/es/rte/index.js DELETED
@@ -1 +0,0 @@
1
- export * from "./Editor";