@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,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;
@@ -1,103 +0,0 @@
1
- /** ** Libraries *** */
2
- import React, { useMemo } from 'react';
3
- /** ** Components *** */
4
-
5
- import Editor from "../../rte/Editor/Editor";
6
- import { Container } from '@zohodesk/components/es/Layout';
7
- /** ** Hooks *** */
8
-
9
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
10
- import useReplyEditor from '@zohoim/chat-components-hooks/es/im/ReplyEditor/useReplyEditor';
11
- /** ** Constants *** */
12
-
13
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
14
- import replyEditorDefaultProps from "./props/defaultProps";
15
- import replyEditorPropTypes from "./props/propTypes";
16
- /** ** Methods *** */
17
-
18
- import cssJSLogic from "./css/cssJSLogic";
19
- /** ** Styles *** */
20
-
21
- import style from "./css/ReplyEditor.module.css";
22
- export default function ReplyEditor(props) {
23
- const {
24
- id,
25
- content,
26
- EDITORURL,
27
- placeHolder,
28
- features,
29
- formats,
30
- isHTMLContent,
31
- onChange,
32
- onKeyDown,
33
- onPaste,
34
- onEnter,
35
- onErrorCallback: propOnErrorCallback,
36
- onReadyCallback: propOnReadyCallback,
37
- customStyle,
38
- customProps = dummyObject,
39
- getEditorState,
40
- themeVariables
41
- } = props;
42
- const {
43
- editorProps = dummyObject
44
- } = customProps;
45
- const {
46
- customStyle: editorCustomStyle = dummyObject
47
- } = editorProps;
48
- const {
49
- onReadyCallback,
50
- onErrorCallback,
51
- isRenderEditor,
52
- isShowEditor,
53
- appearance,
54
- isRTL
55
- } = useReplyEditor({
56
- onErrorCallback: propOnErrorCallback,
57
- onReadyCallback: propOnReadyCallback,
58
- getEditorState,
59
- onEnter,
60
- themeVariables
61
- });
62
- /* External customization */
63
-
64
- const newStyle = useMergeStyle(style, customStyle);
65
- /* CSS classnames added based on logic */
66
-
67
- const {
68
- editorClass
69
- } = cssJSLogic(props, newStyle, {
70
- isShowEditor
71
- });
72
- const editorNewCustomStyle = useMemo(() => ({
73
- editorWrapper: newStyle.editorWrapper,
74
- editor: newStyle.editor,
75
- $editableDiv: newStyle.editableDiv,
76
- ...editorCustomStyle
77
- }), [newStyle, editorCustomStyle]);
78
- return /*#__PURE__*/React.createElement(Container, {
79
- className: newStyle.replyEditor
80
- }, isRenderEditor ? /*#__PURE__*/React.createElement(Container, {
81
- className: editorClass
82
- }, /*#__PURE__*/React.createElement(Editor, {
83
- appearance: appearance,
84
- content: content,
85
- customStyle: editorNewCustomStyle,
86
- EDITORURL: EDITORURL,
87
- features: features,
88
- formats: formats,
89
- id: id,
90
- isHTMLContent: isHTMLContent,
91
- isRTL: isRTL,
92
- onChange: onChange,
93
- onErrorCallback: onErrorCallback,
94
- onKeyDown: onKeyDown,
95
- onPaste: onPaste,
96
- onReadyCallback: onReadyCallback,
97
- placeHolder: placeHolder,
98
- ...editorProps
99
- })) : null);
100
- }
101
- ReplyEditor.propTypes = replyEditorPropTypes;
102
- ReplyEditor.defaultProps = replyEditorDefaultProps;
103
- ReplyEditor.displayName = 'ReplyEditor';
@@ -1,48 +0,0 @@
1
- /** ** Styles *** */
2
-
3
- .replyEditor {
4
- /** ** Use this class for css customisations *** */
5
- }
6
-
7
- .hiddenEditor {
8
- /** ** Use this class for css customisations *** */
9
- /* display: none; */
10
- /* visibility: hidden; */
11
- }
12
-
13
- .editableDiv {
14
- --zd_fallback_font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
15
- Roboto, 'Helvetica Neue', Arial, sans-serif !important;
16
- --zd_regular: var(--zd_base_font_regular), var(--zd_fallback_font) !important;
17
- --zd_light: var(--zd_base_font_light), var(--zd_fallback_font) !important;
18
- --zd_semibold: var(--zd_base_font_semibold), var(--zd_fallback_font) !important;
19
- --zd_bold: var(--zd_base_font_bold), var(--zd_fallback_font) !important;
20
- max-height: var(--zd_size250) !important;
21
- min-height: var(--zd_size80) !important;
22
- overflow: auto !important;
23
- font-size: var(--zd_font_size14) !important;
24
- font-family: var(--zd_regular) !important;
25
- line-height: 22px !important;
26
-
27
- --rte-text-color: var(--imlib_chat_components_replyEditor_color) !important;
28
- --rte-bg-color: var(--imlib_chat_components_replyEditor_bg) !important;
29
- --rte-placeholder-color: var(
30
- --imlib_chat_components_replyEditor_placeholder
31
- ) !important;
32
- --rte-link-text-color: var(
33
- --imlib_chat_components_replyEditor_color
34
- ) !important;
35
- padding: var(--zd_size16) !important;
36
- }
37
-
38
- .editorWrapper {
39
- /** ** Use this class for css customisations *** */
40
- }
41
-
42
- .editor {
43
- /** ** Use this class for css customisations *** */
44
- }
45
-
46
- .replyEditor :global(.prosemirror-suggestion) {
47
- text-decoration: none !important;
48
- }
@@ -1,10 +0,0 @@
1
- /** ** Methods *** */
2
- import { compileClassNames } from '@zohodesk/utils';
3
- export default function cssJSLogic(props, style, state) {
4
- const editorClass = compileClassNames({
5
- [style.hiddenEditor]: !state.isShowEditor
6
- });
7
- return {
8
- editorClass
9
- };
10
- }
@@ -1 +0,0 @@
1
- export { default as ReplyEditor } from "./ReplyEditor";
@@ -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,93 +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
- 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
- } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
46
- const {
47
- searchTextLenForShow = 2
48
- } = componentProps || {}; // (-1) -> ':' string is not valid for count.
49
-
50
- const isShowEmojiPopup = searchText.length - 1 >= searchTextLenForShow;
51
- return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
52
- emojisRowType: "single",
53
- isShowGroupBasedList: false,
54
- isShowOnlyContent: true,
55
- isShowSearchBox: false,
56
- needAutoFocus: false,
57
- onSelect: value => {
58
- onSelect && onSelect({
59
- content: value
60
- });
61
- },
62
- searchString: searchText,
63
- ...componentProps
64
- }) : null;
65
- }, []);
66
- const defaultRenderMethod = useMemo(() => ({
67
- ':': handleRenderEmoji,
68
- [emojiRegex]: handleRenderEmoji
69
- }), [handleRenderEmoji]);
70
- const {
71
- suggestionElement,
72
- popupProps = dummyObject
73
- } = useReplyEditorSuggestions({
74
- defaultRenderMethod,
75
- suggestionDetails,
76
- suggestionsMapping,
77
- onSelect,
78
- getMethods,
79
- onClose
80
- });
81
- return /*#__PURE__*/React.createElement(Container, {
82
- className: newStyle.suggestionPopup
83
- }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
84
- onClose: onClose,
85
- suggestionElement: suggestionElement,
86
- targetPosition: position,
87
- ...replyEditorSuggestionsPopupProps,
88
- ...popupProps
89
- }));
90
- }
91
- ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
92
- ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;
93
- 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,21 +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
- 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;
@@ -1,91 +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
- isRestrictScroll: true,
76
- onClick: removeClose,
77
- portalId: EDITOR_POPUP_PORTAL,
78
- positionsOffset: positionsOffset,
79
- size: popupSize,
80
- ...dropBoxProps
81
- }, suggestionElement) : null);
82
- }
83
- const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
84
- isAbsolutePositioningNeeded: false
85
- });
86
- ReplyEditorSuggestionsPopupComp.propTypes = replyEditorSuggestionsPopupPropTypes;
87
- ReplyEditorSuggestionsPopupComp.defaultProps = replyEditorSuggestionsPopupDefaultProps;
88
- ReplyEditorSuggestionsPopup.propTypes = replyEditorSuggestionsPopupPropTypes;
89
- ReplyEditorSuggestionsPopup.defaultProps = replyEditorSuggestionsPopupDefaultProps;
90
- ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
91
- 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;