@zohoim/chat-components 1.0.9-beta.3 → 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 -18
  18. package/es/Theme/themeVariables/dark/commonColorVariable.js +1 -20
  19. package/es/Theme/themeVariables/dark/greenTheme.js +1 -18
  20. package/es/Theme/themeVariables/dark/orangeTheme.js +1 -18
  21. package/es/Theme/themeVariables/dark/redTheme.js +1 -18
  22. package/es/Theme/themeVariables/dark/yellowTheme.js +1 -18
  23. package/es/Theme/themeVariables/light/blueTheme.js +1 -22
  24. package/es/Theme/themeVariables/light/commonColorVariable.js +0 -19
  25. package/es/Theme/themeVariables/light/greenTheme.js +1 -18
  26. package/es/Theme/themeVariables/light/orangeTheme.js +1 -18
  27. package/es/Theme/themeVariables/light/redTheme.js +1 -18
  28. package/es/Theme/themeVariables/light/yellowTheme.js +1 -18
  29. package/es/Theme/themeVariables/pureDark/blueTheme.js +1 -18
  30. package/es/Theme/themeVariables/pureDark/commonColorVariable.js +1 -20
  31. package/es/Theme/themeVariables/pureDark/greenTheme.js +1 -18
  32. package/es/Theme/themeVariables/pureDark/orangeTheme.js +1 -18
  33. package/es/Theme/themeVariables/pureDark/redTheme.js +1 -18
  34. package/es/Theme/themeVariables/pureDark/yellowTheme.js +1 -18
  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 -27
  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 -112
  46. package/es/AttachmentPreview/css/AttachmentPreview.module.css +0 -39
  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 -70
  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 -48
  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 -55
  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 -10
  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 -42
  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 -91
  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,133 +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
- emptyState,
49
- isRenderEmptyState,
50
- isRenderElement
51
- } = useEmojisList({
52
- emojisList: propsEmojisList,
53
- searchString,
54
- isShowGroupBasedList,
55
- onChangeGroup,
56
- getMethods,
57
- selectedGroup,
58
- isShowOnlyContent
59
- });
60
- const {
61
- isEmpty,
62
- isGroupEmpty
63
- } = emptyState;
64
- /* External customization */
65
-
66
- const newStyle = useMergeStyle(style, customStyle);
67
- /* CSS classnames added based on logic */
68
-
69
- const {
70
- emojisListClass,
71
- groupClass
72
- } = cssJSLogic({
73
- rowType,
74
- isShowGroupBasedList,
75
- isShowOnlyContent,
76
- isEmpty
77
- }, newStyle);
78
- const renderGroup = useCallback(_ref => {
79
- let {
80
- groupName,
81
- emojis
82
- } = _ref;
83
- const isEmptyGroup = isGroupEmpty[groupName];
84
- return !isEmptyGroup ? /*#__PURE__*/React.createElement("div", {
85
- key: groupName,
86
- ref: el => {
87
- setGroupRefs(el, groupName);
88
- },
89
- className: groupClass
90
- }, isShowGroupBasedList ? /*#__PURE__*/React.createElement("div", {
91
- className: newStyle.groupName
92
- }, groupName) : null, Object.keys(emojis).map(emojiName => {
93
- const emoji = emojis[emojiName];
94
- const id = `emoji_${emojiName}`;
95
- return /*#__PURE__*/React.createElement(Emoji, {
96
- key: id,
97
- emoji: emoji,
98
- emojiName: emojiName,
99
- onSelect: onSelect,
100
- ...emojiProps
101
- });
102
- })) : null;
103
- }, [emojiProps, isGroupEmpty, groupClass, isShowGroupBasedList, newStyle.groupName, onSelect, setGroupRefs]);
104
- const renderDefaultEmptyState = useCallback(() => /*#__PURE__*/React.createElement(EmojisEmptyState, { ...emojisEmptyStateProps
105
- }), [emojisEmptyStateProps]);
106
- const renderEmptyState = useCallback(() => {
107
- /* Render EmptyState */
108
- if (isRenderEmptyState) {
109
- const emptyState = renderHandler(renderEmpty || renderDefaultEmptyState)();
110
-
111
- if (emptyState) {
112
- return emptyState;
113
- }
114
-
115
- return null;
116
- }
117
-
118
- return null;
119
- }, [renderEmpty, renderDefaultEmptyState, isRenderEmptyState]);
120
- return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderElement ? /*#__PURE__*/React.createElement("div", {
121
- ref: listContainerRef,
122
- className: emojisListClass
123
- }, !isEmpty ? Object.keys(emojisList).map(groupName => {
124
- const emojis = emojisList[groupName];
125
- return renderGroup({
126
- groupName,
127
- emojis
128
- });
129
- }) : renderEmptyState()) : null);
130
- }
131
- EmojisList.propTypes = emojisListPropTypes;
132
- EmojisList.defaultProps = emojisListDefaultProps;
133
- 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;