@zohoim/chat-components 1.0.9-beta.4 → 1.0.9-beta.5
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.
- package/es/AttachmentHandler/AttachmentHandler.js +84 -0
- package/es/AttachmentHandler/css/AttachmentHandler.module.css +27 -0
- package/es/AttachmentHandler/index.js +1 -0
- package/es/AttachmentHandler/props/defaultProps.js +10 -0
- package/es/AttachmentHandler/props/propTypes.js +17 -0
- package/es/AttachmentPreview/AttachmentPreview.js +115 -0
- package/es/AttachmentPreview/css/AttachmentPreview.module.css +39 -0
- package/es/AttachmentPreview/index.js +1 -0
- package/es/AttachmentPreview/props/defaultProps.js +8 -0
- package/es/AttachmentPreview/props/propTypes.js +32 -0
- package/es/AttachmentPreviewBody/AttachmentPreviewBody.js +81 -0
- package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +70 -0
- package/es/AttachmentPreviewBody/index.js +1 -0
- package/es/AttachmentPreviewBody/props/defaultProps.js +7 -0
- package/es/AttachmentPreviewBody/props/propTypes.js +20 -0
- package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.js +84 -0
- package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css +47 -0
- package/es/AttachmentPreviewHeader/index.js +1 -0
- package/es/AttachmentPreviewHeader/props/defaultProps.js +7 -0
- package/es/AttachmentPreviewHeader/props/propTypes.js +16 -0
- package/es/Emoji/Emoji.js +72 -0
- package/es/Emoji/css/Emoji.module.css +48 -0
- package/es/Emoji/css/cssJSLogic.js +18 -0
- package/es/Emoji/index.js +1 -0
- package/es/Emoji/props/defaultProps.js +8 -0
- package/es/Emoji/props/propTypes.js +16 -0
- package/es/EmojiPopup/EmojiPopup.js +116 -0
- package/es/EmojiPopup/css/EmojiPopup.module.css +55 -0
- package/es/EmojiPopup/index.js +1 -0
- package/es/EmojiPopup/props/defaultProps.js +11 -0
- package/es/EmojiPopup/props/propTypes.js +21 -0
- package/es/Emojis/Emojis.js +79 -0
- package/es/Emojis/index.js +1 -0
- package/es/Emojis/props/defaultProps.js +10 -0
- package/es/Emojis/props/propTypes.js +19 -0
- package/es/EmojisEmptyState/EmojisEmptyState.js +50 -0
- package/es/EmojisEmptyState/css/EmojisEmptyState.module.css +18 -0
- package/es/EmojisEmptyState/index.js +1 -0
- package/es/EmojisEmptyState/props/defaultProps.js +9 -0
- package/es/EmojisEmptyState/props/propTypes.js +8 -0
- package/es/EmojisFooter/EmojisFooter.js +71 -0
- package/es/EmojisFooter/css/EmojisFooter.module.css +40 -0
- package/es/EmojisFooter/index.js +1 -0
- package/es/EmojisFooter/props/defaultProps.js +7 -0
- package/es/EmojisFooter/props/propTypes.js +12 -0
- package/es/EmojisHeader/EmojisHeader.js +65 -0
- package/es/EmojisHeader/css/EmojisHeader.module.css +36 -0
- package/es/EmojisHeader/index.js +1 -0
- package/es/EmojisHeader/props/defaultProps.js +8 -0
- package/es/EmojisHeader/props/propTypes.js +13 -0
- package/es/EmojisList/EmojisList.js +130 -0
- package/es/EmojisList/css/EmojisList.module.css +50 -0
- package/es/EmojisList/css/cssJSLogic.js +25 -0
- package/es/EmojisList/index.js +1 -0
- package/es/EmojisList/props/defaultProps.js +10 -0
- package/es/EmojisList/props/propTypes.js +20 -0
- package/es/Message/Message.js +2 -8
- package/es/MessageActions/MessageActions.js +0 -2
- package/es/MessageActions/props/propTypes.js +1 -2
- package/es/MessageActionsMore/MessageActionsMore.js +3 -5
- package/es/MessageActionsMore/props/propTypes.js +5 -3
- package/es/MessageActionsWrapper/MessageActionsWrapper.js +4 -7
- package/es/MessageActionsWrapper/props/propTypes.js +1 -2
- package/es/MessageBubble/css/MessageBubble.module.css +7 -0
- package/es/MessageBubble/props/defaultProps.js +1 -2
- package/es/MessageBubble/props/propTypes.js +1 -2
- package/es/Theme/ThemeAssets.js +2 -2
- package/es/Theme/ThemeWrapper.js +18 -7
- package/es/Theme/TooltipWrapper.js +1 -1
- package/es/Theme/props/defaultProps.js +2 -1
- package/es/Theme/props/propTypes.js +2 -1
- package/es/Theme/themeVariables/dark/blueTheme.js +18 -1
- package/es/Theme/themeVariables/dark/commonColorVariable.js +20 -1
- package/es/Theme/themeVariables/dark/greenTheme.js +18 -1
- package/es/Theme/themeVariables/dark/orangeTheme.js +18 -1
- package/es/Theme/themeVariables/dark/redTheme.js +18 -1
- package/es/Theme/themeVariables/dark/yellowTheme.js +18 -1
- package/es/Theme/themeVariables/light/blueTheme.js +22 -1
- package/es/Theme/themeVariables/light/commonColorVariable.js +19 -0
- package/es/Theme/themeVariables/light/greenTheme.js +18 -1
- package/es/Theme/themeVariables/light/orangeTheme.js +18 -1
- package/es/Theme/themeVariables/light/redTheme.js +18 -1
- package/es/Theme/themeVariables/light/yellowTheme.js +18 -1
- package/es/Theme/themeVariables/pureDark/blueTheme.js +18 -1
- package/es/Theme/themeVariables/pureDark/commonColorVariable.js +20 -1
- package/es/Theme/themeVariables/pureDark/greenTheme.js +18 -1
- package/es/Theme/themeVariables/pureDark/orangeTheme.js +18 -1
- package/es/Theme/themeVariables/pureDark/redTheme.js +18 -1
- package/es/Theme/themeVariables/pureDark/yellowTheme.js +18 -1
- package/es/Theme/utils/getThemeConfigurations.js +1 -1
- package/es/constants/index.js +7 -1
- package/es/constants/propConstants/editorPropConstants.js +3 -0
- package/es/constants/propConstants/popupPropConstants.js +2 -0
- package/es/im/IMAttachmentHandler/IMAttachmentHandler.js +50 -0
- package/es/im/IMAttachmentHandler/index.js +1 -0
- package/es/im/IMAttachmentHandler/props/defaultProps.js +10 -0
- package/es/im/IMAttachmentHandler/props/propTypes.js +28 -0
- package/es/im/ReplyComposer/ReplyComposer.js +137 -0
- package/es/im/ReplyComposer/css/ReplyComposer.module.css +5 -0
- package/es/im/ReplyComposer/index.js +1 -0
- package/es/im/ReplyComposer/props/defaultProps.js +7 -0
- package/es/im/ReplyComposer/props/propTypes.js +60 -0
- package/es/im/ReplyComposerFooter/ReplyComposerFooter.js +41 -0
- package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css +10 -0
- package/es/im/ReplyComposerFooter/index.js +1 -0
- package/es/im/ReplyComposerFooter/props/defaultProps.js +8 -0
- package/es/im/ReplyComposerFooter/props/propTypes.js +17 -0
- package/es/im/ReplyEditor/ReplyEditor.js +103 -0
- package/es/im/ReplyEditor/css/ReplyEditor.module.css +48 -0
- package/es/im/ReplyEditor/css/cssJSLogic.js +10 -0
- package/es/im/ReplyEditor/index.js +1 -0
- package/es/im/ReplyEditor/props/defaultProps.js +8 -0
- package/es/im/ReplyEditor/props/propTypes.js +27 -0
- package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js +149 -0
- package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css +5 -0
- package/es/im/ReplyEditorExtensions/index.js +1 -0
- package/es/im/ReplyEditorExtensions/props/defaultProps.js +6 -0
- package/es/im/ReplyEditorExtensions/props/propTypes.js +16 -0
- package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js +93 -0
- package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css +8 -0
- package/es/im/ReplyEditorSuggestions/index.js +1 -0
- package/es/im/ReplyEditorSuggestions/props/defaultProps.js +6 -0
- package/es/im/ReplyEditorSuggestions/props/propTypes.js +21 -0
- package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js +91 -0
- package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css +7 -0
- package/es/im/ReplyEditorSuggestionsPopup/index.js +1 -0
- package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js +10 -0
- package/es/im/ReplyEditorSuggestionsPopup/props/propTypes.js +21 -0
- package/es/im/index.js +8 -1
- package/es/index.js +13 -2
- package/es/rte/Editor/Editor.js +80 -0
- package/es/rte/Editor/css/Editor.module.css +17 -0
- package/es/rte/Editor/index.js +1 -0
- package/es/rte/Editor/props/defaultProps.js +21 -0
- package/es/rte/Editor/props/propTypes.js +52 -0
- package/es/rte/index.js +1 -0
- package/package.json +7 -7
- package/es/Theme/constants/index.js +0 -41
package/es/constants/index.js
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
|
|
1
|
+
export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
|
|
2
|
+
export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
|
|
3
|
+
const version = '1.4.9';
|
|
4
|
+
export const defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
|
|
5
|
+
// `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
|
|
6
|
+
// `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
|
|
7
|
+
`https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;
|
|
@@ -0,0 +1,3 @@
|
|
|
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'];
|
|
@@ -0,0 +1,2 @@
|
|
|
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'];
|
|
@@ -0,0 +1,50 @@
|
|
|
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';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as IMAttachmentHandler } from "./IMAttachmentHandler";
|
|
@@ -0,0 +1,10 @@
|
|
|
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;
|
|
@@ -0,0 +1,28 @@
|
|
|
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;
|
|
@@ -0,0 +1,137 @@
|
|
|
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';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ReplyComposer } from "./ReplyComposer";
|
|
@@ -0,0 +1,60 @@
|
|
|
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;
|
|
@@ -0,0 +1,41 @@
|
|
|
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';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ReplyComposerFooter } from "./ReplyComposerFooter";
|
|
@@ -0,0 +1,8 @@
|
|
|
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;
|
|
@@ -0,0 +1,17 @@
|
|
|
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;
|
|
@@ -0,0 +1,103 @@
|
|
|
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';
|
|
@@ -0,0 +1,48 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ReplyEditor } from "./ReplyEditor";
|
|
@@ -0,0 +1,8 @@
|
|
|
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;
|
|
@@ -0,0 +1,27 @@
|
|
|
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;
|