@zohoim/chat-components 1.0.11-beta.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- 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 +121 -0
- package/es/AttachmentPreview/css/AttachmentPreview.module.css +39 -0
- package/es/AttachmentPreview/index.js +1 -0
- package/es/AttachmentPreview/props/defaultProps.js +9 -0
- package/es/AttachmentPreview/props/propTypes.js +33 -0
- package/es/AttachmentPreviewBody/AttachmentPreviewBody.js +97 -0
- package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +75 -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 +115 -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 +81 -0
- package/es/Emojis/index.js +1 -0
- package/es/Emojis/props/defaultProps.js +10 -0
- package/es/Emojis/props/propTypes.js +20 -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/MessageActionsMore/MessageActionsMore.js +2 -2
- package/es/MessageActionsMore/props/propTypes.js +5 -2
- package/es/MessageActionsWrapper/MessageActionsWrapper.js +1 -1
- package/es/Theme/ThemeAssets.js +2 -20
- package/es/Theme/ThemeWrapper.js +25 -14
- 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/commonThemeColorVariable.js +17 -0
- package/es/Theme/themeVariables/dark/blueTheme.js +133 -0
- package/es/Theme/themeVariables/dark/commonColorVariable.js +35 -0
- package/es/Theme/themeVariables/dark/greenTheme.js +132 -0
- package/es/Theme/themeVariables/dark/orangeTheme.js +132 -0
- package/es/Theme/themeVariables/dark/redTheme.js +132 -0
- package/es/Theme/themeVariables/dark/yellowTheme.js +132 -0
- package/es/Theme/themeVariables/light/blueTheme.js +135 -0
- package/es/Theme/themeVariables/light/commonColorVariable.js +54 -0
- package/es/Theme/themeVariables/light/greenTheme.js +131 -0
- package/es/Theme/themeVariables/light/orangeTheme.js +131 -0
- package/es/Theme/themeVariables/light/redTheme.js +131 -0
- package/es/Theme/themeVariables/light/yellowTheme.js +131 -0
- package/es/Theme/themeVariables/pureDark/blueTheme.js +132 -0
- package/es/Theme/themeVariables/pureDark/commonColorVariable.js +37 -0
- package/es/Theme/themeVariables/pureDark/greenTheme.js +132 -0
- package/es/Theme/themeVariables/pureDark/orangeTheme.js +132 -0
- package/es/Theme/themeVariables/pureDark/redTheme.js +132 -0
- package/es/Theme/themeVariables/pureDark/yellowTheme.js +132 -0
- package/es/Theme/utils/getThemeConfigurations.js +56 -2
- package/es/constants/index.js +8 -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/IMIntegrationIcon/css/IMIntegrationIcon.module.css +2 -2
- package/es/im/ReplyComposer/ReplyComposer.js +153 -0
- package/es/im/ReplyComposer/css/ReplyComposer.module.css +10 -0
- package/es/im/ReplyComposer/css/cssJSLogic.js +13 -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 +50 -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 +95 -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 +93 -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 +14 -21
- package/assets/Appearance/dark/mode/General_DarkMode.module.css +0 -71
- package/assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css +0 -35
- package/assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css +0 -35
- package/assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css +0 -35
- package/assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css +0 -35
- package/assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css +0 -35
- package/assets/Appearance/light/mode/General_LightMode.module.css +0 -71
- package/assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css +0 -35
- package/assets/Appearance/light/themes/green/green_General_LightTheme.module.css +0 -35
- package/assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css +0 -35
- package/assets/Appearance/light/themes/red/red_General_LightTheme.module.css +0 -35
- package/assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css +0 -35
- package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css +0 -71
- package/assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css +0 -35
- package/assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css +0 -35
- package/assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css +0 -35
- package/assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css +0 -35
- package/assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css +0 -35
- package/es/Theme/constants/index.js +0 -41
- package/lib/index.js +0 -382
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ReplyEditorExtensions } from "./ReplyEditorExtensions";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/** ** Libraries *** */
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
const replyEditorExtensionsPropTypes = {
|
|
4
|
+
customStyle: PropTypes.object,
|
|
5
|
+
editor: PropTypes.object.isRequired,
|
|
6
|
+
isHTMLContent: PropTypes.bool,
|
|
7
|
+
extensions: PropTypes.shape({
|
|
8
|
+
details: PropTypes.objectOf(PropTypes.shape({
|
|
9
|
+
componentProps: PropTypes.object,
|
|
10
|
+
id: PropTypes.string,
|
|
11
|
+
renderItem: PropTypes.func
|
|
12
|
+
})),
|
|
13
|
+
order: PropTypes.array
|
|
14
|
+
}).isRequired
|
|
15
|
+
};
|
|
16
|
+
export default replyEditorExtensionsPropTypes;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/** ** Libraries *** */
|
|
2
|
+
import React, { useMemo, useCallback } from 'react';
|
|
3
|
+
/** ** Components *** */
|
|
4
|
+
|
|
5
|
+
import { Container } from '@zohodesk/components/es/Layout';
|
|
6
|
+
import Emojis from "../../Emojis/Emojis";
|
|
7
|
+
import ReplyEditorSuggestionsPopup from "../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup";
|
|
8
|
+
/** ** Hooks *** */
|
|
9
|
+
|
|
10
|
+
import useReplyEditorSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestions/useReplyEditorSuggestions';
|
|
11
|
+
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
12
|
+
/** ** Constants *** */
|
|
13
|
+
|
|
14
|
+
import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
|
|
15
|
+
import replyEditorSuggestionsDefaultProps from "./props/defaultProps";
|
|
16
|
+
import replyEditorSuggestionsPropTypes from "./props/propTypes";
|
|
17
|
+
import { emojiRegex } from '@zohoim/chat-components-utils/es/constants/regexConstants';
|
|
18
|
+
/** ** Styles *** */
|
|
19
|
+
|
|
20
|
+
import style from "./css/ReplyEditorSuggestions.module.css";
|
|
21
|
+
export default function ReplyEditorSuggestions(props) {
|
|
22
|
+
const {
|
|
23
|
+
customStyle,
|
|
24
|
+
suggestionDetails = dummyObject,
|
|
25
|
+
suggestionsMapping,
|
|
26
|
+
onSelect,
|
|
27
|
+
customProps,
|
|
28
|
+
getMethods,
|
|
29
|
+
onClose
|
|
30
|
+
} = props;
|
|
31
|
+
const {
|
|
32
|
+
position = dummyObject
|
|
33
|
+
} = suggestionDetails;
|
|
34
|
+
const {
|
|
35
|
+
replyEditorSuggestionsPopupProps = dummyObject
|
|
36
|
+
} = customProps || dummyObject;
|
|
37
|
+
/* External customization */
|
|
38
|
+
|
|
39
|
+
const newStyle = useMergeStyle(style, customStyle);
|
|
40
|
+
const handleRenderEmoji = useCallback(function () {
|
|
41
|
+
let {
|
|
42
|
+
onSelect,
|
|
43
|
+
searchText = '',
|
|
44
|
+
componentProps,
|
|
45
|
+
getMethods
|
|
46
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
47
|
+
const {
|
|
48
|
+
searchTextLenForShow = 2
|
|
49
|
+
} = componentProps || {}; // (-1) -> ':' string is not valid for count.
|
|
50
|
+
|
|
51
|
+
const isShowEmojiPopup = searchText.length - 1 >= searchTextLenForShow;
|
|
52
|
+
return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
|
|
53
|
+
emojisRowType: "single",
|
|
54
|
+
getMethods: getMethods,
|
|
55
|
+
isShowGroupBasedList: false,
|
|
56
|
+
isShowOnlyContent: true,
|
|
57
|
+
isShowSearchBox: false,
|
|
58
|
+
needAutoFocus: false,
|
|
59
|
+
onSelect: value => {
|
|
60
|
+
onSelect && onSelect({
|
|
61
|
+
content: value
|
|
62
|
+
});
|
|
63
|
+
},
|
|
64
|
+
searchString: searchText,
|
|
65
|
+
...componentProps
|
|
66
|
+
}) : null;
|
|
67
|
+
}, []);
|
|
68
|
+
const defaultRenderMethod = useMemo(() => ({
|
|
69
|
+
':': handleRenderEmoji,
|
|
70
|
+
[emojiRegex]: handleRenderEmoji
|
|
71
|
+
}), [handleRenderEmoji]);
|
|
72
|
+
const {
|
|
73
|
+
suggestionElement,
|
|
74
|
+
popupProps = dummyObject
|
|
75
|
+
} = useReplyEditorSuggestions({
|
|
76
|
+
defaultRenderMethod,
|
|
77
|
+
suggestionDetails,
|
|
78
|
+
suggestionsMapping,
|
|
79
|
+
onSelect,
|
|
80
|
+
getMethods,
|
|
81
|
+
onClose
|
|
82
|
+
});
|
|
83
|
+
return /*#__PURE__*/React.createElement(Container, {
|
|
84
|
+
className: newStyle.suggestionPopup
|
|
85
|
+
}, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
|
|
86
|
+
onClose: onClose,
|
|
87
|
+
suggestionElement: suggestionElement,
|
|
88
|
+
targetPosition: position,
|
|
89
|
+
...replyEditorSuggestionsPopupProps,
|
|
90
|
+
...popupProps
|
|
91
|
+
}));
|
|
92
|
+
}
|
|
93
|
+
ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
|
|
94
|
+
ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;
|
|
95
|
+
ReplyEditorSuggestions.displayName = 'ReplyEditorSuggestions';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ReplyEditorSuggestions } from "./ReplyEditorSuggestions";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/** ** Libraries *** */
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
const replyEditorSuggestionsPropTypes = {
|
|
4
|
+
customStyle: PropTypes.object,
|
|
5
|
+
suggestionDetails: PropTypes.shape({
|
|
6
|
+
editor: PropTypes.object,
|
|
7
|
+
searchText: PropTypes.string,
|
|
8
|
+
triggerDetails: PropTypes.shape({
|
|
9
|
+
trigger: PropTypes.string
|
|
10
|
+
})
|
|
11
|
+
}).isRequired,
|
|
12
|
+
suggestionsMapping: PropTypes.objectOf(PropTypes.shape({
|
|
13
|
+
componentProps: PropTypes.object,
|
|
14
|
+
popupProps: PropTypes.object,
|
|
15
|
+
renderItem: PropTypes.func
|
|
16
|
+
})).isRequired,
|
|
17
|
+
onSelect: PropTypes.func,
|
|
18
|
+
getMethods: PropTypes.func,
|
|
19
|
+
onClose: PropTypes.func
|
|
20
|
+
};
|
|
21
|
+
export default replyEditorSuggestionsPropTypes;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/** ** Libraries *** */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
/** ** Components *** */
|
|
4
|
+
|
|
5
|
+
import Popup from '@zohodesk/components/es/Popup/Popup';
|
|
6
|
+
import DropBox from '@zohodesk/components/es/DropBox/DropBox';
|
|
7
|
+
import Modal from '@zohodesk/components/es/Modal/Modal';
|
|
8
|
+
/** ** Hooks *** */
|
|
9
|
+
|
|
10
|
+
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
11
|
+
import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup';
|
|
12
|
+
/** ** Constants *** */
|
|
13
|
+
|
|
14
|
+
import replyEditorSuggestionsPopupDefaultProps from "./props/defaultProps";
|
|
15
|
+
import replyEditorSuggestionsPopupPropTypes from "./props/propTypes";
|
|
16
|
+
import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
|
|
17
|
+
import { EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from "../../constants";
|
|
18
|
+
/** ** Styles *** */
|
|
19
|
+
|
|
20
|
+
import style from "./css/ReplyEditorSuggestionsPopup.module.css";
|
|
21
|
+
export function ReplyEditorSuggestionsPopupComp(props) {
|
|
22
|
+
const {
|
|
23
|
+
customStyle,
|
|
24
|
+
targetPosition = dummyObject,
|
|
25
|
+
onClose,
|
|
26
|
+
popupSize,
|
|
27
|
+
customProps,
|
|
28
|
+
suggestionElement,
|
|
29
|
+
needPositionUpdate,
|
|
30
|
+
defaultPosition,
|
|
31
|
+
|
|
32
|
+
/** ** Popup Props *** */
|
|
33
|
+
getTargetRef,
|
|
34
|
+
getContainerRef,
|
|
35
|
+
position,
|
|
36
|
+
togglePopup,
|
|
37
|
+
isPopupReady,
|
|
38
|
+
isPopupOpen,
|
|
39
|
+
removeClose,
|
|
40
|
+
openPopupOnly,
|
|
41
|
+
closePopupOnly,
|
|
42
|
+
isAbsolutePositioningNeeded,
|
|
43
|
+
positionsOffset
|
|
44
|
+
} = props;
|
|
45
|
+
const {
|
|
46
|
+
dropBoxProps = dummyObject
|
|
47
|
+
} = customProps || dummyObject;
|
|
48
|
+
const {
|
|
49
|
+
targetElementStyle
|
|
50
|
+
} = useReplyEditorSuggestionsPopup({
|
|
51
|
+
suggestionElement,
|
|
52
|
+
targetPosition,
|
|
53
|
+
needPositionUpdate,
|
|
54
|
+
defaultPosition,
|
|
55
|
+
onClose,
|
|
56
|
+
openPopupOnly,
|
|
57
|
+
closePopupOnly,
|
|
58
|
+
isPopupOpen,
|
|
59
|
+
togglePopup
|
|
60
|
+
});
|
|
61
|
+
/* External customization */
|
|
62
|
+
|
|
63
|
+
const newStyle = useMergeStyle(style, customStyle);
|
|
64
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
|
|
65
|
+
portalId: EDITOR_POPUP_TARGET_PORTAL
|
|
66
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
67
|
+
ref: getTargetRef,
|
|
68
|
+
className: newStyle.hiddenTarget,
|
|
69
|
+
style: targetElementStyle
|
|
70
|
+
}))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
|
|
71
|
+
boxPosition: position,
|
|
72
|
+
customStyle: dummyObject,
|
|
73
|
+
getRef: getContainerRef,
|
|
74
|
+
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
|
|
75
|
+
isActive: isPopupReady,
|
|
76
|
+
isAnimate: true,
|
|
77
|
+
isArrow: false,
|
|
78
|
+
onClick: removeClose,
|
|
79
|
+
portalId: EDITOR_POPUP_PORTAL,
|
|
80
|
+
positionsOffset: positionsOffset,
|
|
81
|
+
size: popupSize,
|
|
82
|
+
...dropBoxProps
|
|
83
|
+
}, suggestionElement) : null);
|
|
84
|
+
}
|
|
85
|
+
const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
|
|
86
|
+
isAbsolutePositioningNeeded: false
|
|
87
|
+
});
|
|
88
|
+
ReplyEditorSuggestionsPopupComp.propTypes = replyEditorSuggestionsPopupPropTypes;
|
|
89
|
+
ReplyEditorSuggestionsPopupComp.defaultProps = replyEditorSuggestionsPopupDefaultProps;
|
|
90
|
+
ReplyEditorSuggestionsPopup.propTypes = replyEditorSuggestionsPopupPropTypes;
|
|
91
|
+
ReplyEditorSuggestionsPopup.defaultProps = replyEditorSuggestionsPopupDefaultProps;
|
|
92
|
+
ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
|
|
93
|
+
export default ReplyEditorSuggestionsPopup;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ReplyEditorSuggestionsPopup } from "./ReplyEditorSuggestionsPopup";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/** ** Constants *** */
|
|
2
|
+
import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
|
|
3
|
+
const replyEditorSuggestionsPopupDefaultProps = {
|
|
4
|
+
customStyle: dummyObject,
|
|
5
|
+
popupSize: 'xxlarge',
|
|
6
|
+
defaultPosition: 'bottomCenterToRight',
|
|
7
|
+
needPositionUpdate: true,
|
|
8
|
+
customOrder: ['bottomCenterToRight', 'bottomLeftToRight', 'topLeftToRight', 'topCenterToRight', 'rightTopToBottom', 'rightCenterToBottom', 'rightBottomToTop', 'rightCenterToTop', 'rightBottom', 'bottomRight', 'topRight', 'rightTop', 'bottomRightToLeft', 'bottomCenterToLeft', 'topRightToLeft', 'topCenterToLeft', 'rightCenter', 'bottomLeft', 'topLeft', 'bottomCenter', 'topCenter', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'leftBottom', 'leftTop']
|
|
9
|
+
};
|
|
10
|
+
export default replyEditorSuggestionsPopupDefaultProps;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/** ** Libraries *** */
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
/** ** Constants *** */
|
|
4
|
+
|
|
5
|
+
import { popupSize, popupPosition } from "../../../constants/propConstants/popupPropConstants";
|
|
6
|
+
const replyEditorSuggestionsPopupPropTypes = {
|
|
7
|
+
customStyle: PropTypes.object,
|
|
8
|
+
targetPosition: PropTypes.shape({
|
|
9
|
+
x: PropTypes.number,
|
|
10
|
+
y: PropTypes.number
|
|
11
|
+
}).isRequired,
|
|
12
|
+
onClose: PropTypes.func,
|
|
13
|
+
popupSize: PropTypes.oneOf(popupSize),
|
|
14
|
+
customProps: PropTypes.shape({
|
|
15
|
+
dropBoxProps: PropTypes.object
|
|
16
|
+
}),
|
|
17
|
+
suggestionElement: PropTypes.element.isRequired,
|
|
18
|
+
needPositionUpdate: PropTypes.bool,
|
|
19
|
+
defaultPosition: PropTypes.oneOf(popupPosition)
|
|
20
|
+
};
|
|
21
|
+
export default replyEditorSuggestionsPopupPropTypes;
|
package/es/im/index.js
CHANGED
|
@@ -6,4 +6,11 @@ export * from "./IMMessageMetaInfo";
|
|
|
6
6
|
export * from "./IMMessageContent";
|
|
7
7
|
export * from "./IMTextBubble";
|
|
8
8
|
export * from "./IMReplyBubble";
|
|
9
|
-
export * from "./ArticleBubble";
|
|
9
|
+
export * from "./ArticleBubble";
|
|
10
|
+
export * from "./IMAttachmentHandler";
|
|
11
|
+
export * from "./ReplyComposer";
|
|
12
|
+
export * from "./ReplyEditor";
|
|
13
|
+
export * from "./ReplyEditorSuggestions";
|
|
14
|
+
export * from "./ReplyEditorExtensions";
|
|
15
|
+
export * from "./ReplyComposerFooter";
|
|
16
|
+
export * from "./ReplyEditorSuggestionsPopup";
|
package/es/index.js
CHANGED
|
@@ -25,8 +25,19 @@ export * from "./ReplyBubbleHeader";
|
|
|
25
25
|
export * from "./LazyLoadImage";
|
|
26
26
|
export * from "./ReplyBubbleContent";
|
|
27
27
|
export * from "./MessageStatus";
|
|
28
|
-
export * from "./im";
|
|
29
|
-
|
|
28
|
+
export * from "./im";
|
|
29
|
+
export * from "./Emojis";
|
|
30
|
+
export * from "./EmojisList";
|
|
31
|
+
export * from "./Emoji";
|
|
32
|
+
export * from "./EmojiPopup";
|
|
33
|
+
export * from "./EmojisHeader";
|
|
34
|
+
export * from "./EmojisFooter";
|
|
35
|
+
export * from "./EmojisEmptyState";
|
|
36
|
+
export * from "./rte";
|
|
37
|
+
export * from "./AttachmentHandler";
|
|
38
|
+
export * from "./AttachmentPreview";
|
|
39
|
+
export * from "./AttachmentPreviewHeader";
|
|
40
|
+
export * from "./AttachmentPreviewBody";
|
|
30
41
|
/** * CONSTANTS ** */
|
|
31
42
|
|
|
32
43
|
export * from "./constants";
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/** ** Libraries *** */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
/** ** Hooks *** */
|
|
4
|
+
|
|
5
|
+
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
6
|
+
import useEditor from '@zohoim/chat-components-hooks/es/rte/Editor/useEditor';
|
|
7
|
+
/** ** Constants *** */
|
|
8
|
+
|
|
9
|
+
import editorDefaultProps from "./props/defaultProps";
|
|
10
|
+
import editorPropTypes from "./props/propTypes";
|
|
11
|
+
import { defaultEditorURL } from "../../constants";
|
|
12
|
+
/** ** Styles *** */
|
|
13
|
+
|
|
14
|
+
import style from "./css/Editor.module.css";
|
|
15
|
+
export default function Editor(props) {
|
|
16
|
+
const {
|
|
17
|
+
customStyle,
|
|
18
|
+
id,
|
|
19
|
+
EDITORURL = defaultEditorURL,
|
|
20
|
+
content,
|
|
21
|
+
placeHolder,
|
|
22
|
+
isHTMLContent,
|
|
23
|
+
menuBarProps,
|
|
24
|
+
formats,
|
|
25
|
+
features,
|
|
26
|
+
needAutoFocus,
|
|
27
|
+
isReadOnly,
|
|
28
|
+
insertContentDetails,
|
|
29
|
+
customOptions,
|
|
30
|
+
onReadyCallback,
|
|
31
|
+
onErrorCallback,
|
|
32
|
+
onChange,
|
|
33
|
+
onKeyDown,
|
|
34
|
+
onPaste,
|
|
35
|
+
langCode,
|
|
36
|
+
appearance,
|
|
37
|
+
isRTL,
|
|
38
|
+
handlers,
|
|
39
|
+
domId: propDomId
|
|
40
|
+
} = props;
|
|
41
|
+
/* External CSS Customization */
|
|
42
|
+
|
|
43
|
+
const newStyle = useMergeStyle(style, customStyle);
|
|
44
|
+
const {
|
|
45
|
+
domId
|
|
46
|
+
} = useEditor({
|
|
47
|
+
id,
|
|
48
|
+
EDITORURL,
|
|
49
|
+
content,
|
|
50
|
+
placeHolder,
|
|
51
|
+
isHTMLContent,
|
|
52
|
+
menuBarProps,
|
|
53
|
+
formats,
|
|
54
|
+
className: newStyle.editableDiv,
|
|
55
|
+
features,
|
|
56
|
+
needAutoFocus,
|
|
57
|
+
isReadOnly,
|
|
58
|
+
insertContentDetails,
|
|
59
|
+
customOptions,
|
|
60
|
+
onReadyCallback,
|
|
61
|
+
onErrorCallback,
|
|
62
|
+
onChange,
|
|
63
|
+
onKeyDown,
|
|
64
|
+
onPaste,
|
|
65
|
+
langCode,
|
|
66
|
+
appearance,
|
|
67
|
+
isRTL,
|
|
68
|
+
handlers,
|
|
69
|
+
domId: propDomId
|
|
70
|
+
});
|
|
71
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
className: newStyle.editorWrapper
|
|
73
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
74
|
+
className: newStyle.editor,
|
|
75
|
+
id: domId
|
|
76
|
+
}));
|
|
77
|
+
}
|
|
78
|
+
Editor.propTypes = editorPropTypes;
|
|
79
|
+
Editor.defaultProps = editorDefaultProps;
|
|
80
|
+
Editor.displayName = 'Editor';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.editorWrapper {
|
|
2
|
+
/* Use this class for css customisation */
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.editor {
|
|
6
|
+
/* Use this class for css customisation */
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.editableDiv {
|
|
10
|
+
/* Use this class for css customisation */
|
|
11
|
+
min-height: var(--zd_size120) !important;
|
|
12
|
+
max-height: var(--zd_size120) !important;
|
|
13
|
+
overflow: auto !important;
|
|
14
|
+
font-size: var(--zd_font_size14) !important;
|
|
15
|
+
font-family: var(--zd_regular) !important;
|
|
16
|
+
padding: 0 !important;
|
|
17
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Editor } from "./Editor";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/** ** Constants *** */
|
|
2
|
+
import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
|
|
3
|
+
const editorDefaultProps = {
|
|
4
|
+
customStyle: dummyObject,
|
|
5
|
+
id: 'Editor',
|
|
6
|
+
placeHolder: ' ',
|
|
7
|
+
isHTMLContent: false,
|
|
8
|
+
needAutoFocus: true,
|
|
9
|
+
isReadOnly: false,
|
|
10
|
+
isRTL: false,
|
|
11
|
+
langCode: 'en_US',
|
|
12
|
+
menuBarProps: dummyObject,
|
|
13
|
+
appearance: dummyObject,
|
|
14
|
+
features: dummyArray,
|
|
15
|
+
formats: dummyArray,
|
|
16
|
+
handlers: {
|
|
17
|
+
needIDReRender: true,
|
|
18
|
+
needContentUpdate: true
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
export default editorDefaultProps;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/** ** Libraries *** */
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
/** ** Constants *** */
|
|
4
|
+
|
|
5
|
+
import { modeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
|
|
6
|
+
import { features, formats, langCode } from "../../../constants/propConstants/editorPropConstants";
|
|
7
|
+
const editorPropTypes = {
|
|
8
|
+
id: PropTypes.string.isRequired,
|
|
9
|
+
domId: PropTypes.string,
|
|
10
|
+
content: PropTypes.string.isRequired,
|
|
11
|
+
EDITORURL: PropTypes.string.isRequired,
|
|
12
|
+
placeHolder: PropTypes.string,
|
|
13
|
+
customStyle: PropTypes.object,
|
|
14
|
+
isHTMLContent: PropTypes.bool,
|
|
15
|
+
appearance: PropTypes.shape({
|
|
16
|
+
mode: PropTypes.oneOf([modeConstants.LIGHT, modeConstants.DARK, modeConstants.PURE_DARK]).isRequired,
|
|
17
|
+
themeVariables: PropTypes.object
|
|
18
|
+
}),
|
|
19
|
+
// Editor Options - Refer the learn document (Override the options)
|
|
20
|
+
customOptions: PropTypes.object,
|
|
21
|
+
menuBarProps: PropTypes.shape({
|
|
22
|
+
isShow: PropTypes.bool.isRequired,
|
|
23
|
+
groupLength: PropTypes.number,
|
|
24
|
+
order: PropTypes.arrayOf(PropTypes.oneOf([...formats, ...features])),
|
|
25
|
+
position: PropTypes.oneOf(['top', 'bottom']),
|
|
26
|
+
responsive: PropTypes.bool,
|
|
27
|
+
tooltip: PropTypes.bool
|
|
28
|
+
}),
|
|
29
|
+
features: PropTypes.arrayOf(PropTypes.oneOf(features)),
|
|
30
|
+
formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
|
|
31
|
+
needAutoFocus: PropTypes.bool,
|
|
32
|
+
isReadOnly: PropTypes.bool,
|
|
33
|
+
isRTL: PropTypes.bool,
|
|
34
|
+
langCode: PropTypes.oneOf(langCode),
|
|
35
|
+
insertContentDetails: PropTypes.shape({
|
|
36
|
+
content: PropTypes.string.isRequired,
|
|
37
|
+
range: PropTypes.shape({
|
|
38
|
+
from: PropTypes.number,
|
|
39
|
+
to: PropTypes.number
|
|
40
|
+
})
|
|
41
|
+
}),
|
|
42
|
+
onChange: PropTypes.func,
|
|
43
|
+
onPaste: PropTypes.func,
|
|
44
|
+
onKeyDown: PropTypes.func,
|
|
45
|
+
onReadyCallback: PropTypes.func,
|
|
46
|
+
onErrorCallback: PropTypes.func,
|
|
47
|
+
handlers: PropTypes.shape({
|
|
48
|
+
needContentUpdate: PropTypes.bool,
|
|
49
|
+
needIDReRender: PropTypes.bool
|
|
50
|
+
})
|
|
51
|
+
};
|
|
52
|
+
export default editorPropTypes;
|
package/es/rte/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Editor";
|
package/package.json
CHANGED
|
@@ -1,27 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohoim/chat-components",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Chat Components",
|
|
5
|
-
"main": "
|
|
5
|
+
"main": "es/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
7
7
|
"scripts": {
|
|
8
|
-
"build": "
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"build:local": " npm run build && npm run rtl && npm run cssVariableConvert ",
|
|
12
|
-
"build_watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
|
|
13
|
-
"clean": "react-cli clean unittest coverage es result.json && mkdir assets",
|
|
8
|
+
"build": "react-cli build:component:es",
|
|
9
|
+
"build_watch": "npm run build -- -w",
|
|
10
|
+
"clean": "react-cli clean unittest coverage es result.json",
|
|
14
11
|
"rtl": "react-cli rtl ./src ./es",
|
|
15
|
-
"prepare": "
|
|
12
|
+
"prepare": "npm run clean && npm run build && npm run rtl && npm run cssVariableConvert",
|
|
16
13
|
"test": "react-cli test",
|
|
17
14
|
"test:debug": "react-cli test --runInBand --watch",
|
|
18
15
|
"create-icons": "node ./src/icons/create-icon-components --sourucePath=./factory --targetPath=./iconSrc",
|
|
19
|
-
"cssVariableConvert": "react-cli variableConverter ./
|
|
16
|
+
"cssVariableConvert": "react-cli variableConverter ./es ./es",
|
|
20
17
|
"variable:addignore": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
|
|
21
18
|
"variable:convert": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
|
|
22
|
-
"variable:check": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ../../node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
|
|
23
|
-
"build:variables": "react-cli clean ./assets && node ./preprocess/index",
|
|
24
|
-
"init": "npm run clean && npm run build:variables"
|
|
19
|
+
"variable:check": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ../../node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
|
|
25
20
|
},
|
|
26
21
|
"author": "ZohoDesk - IM Team",
|
|
27
22
|
"license": "ISC",
|
|
@@ -31,26 +26,24 @@
|
|
|
31
26
|
},
|
|
32
27
|
"files": [
|
|
33
28
|
"es",
|
|
34
|
-
"assets",
|
|
35
29
|
"!**/__tests__"
|
|
36
30
|
],
|
|
37
31
|
"dependencies": {
|
|
38
|
-
"@zohodesk/components": "1.2.
|
|
39
|
-
"@zohodesk/hooks": "2.0.
|
|
32
|
+
"@zohodesk/components": "1.2.62",
|
|
33
|
+
"@zohodesk/hooks": "2.0.4",
|
|
40
34
|
"@zohodesk/icon": "1.3.15",
|
|
41
|
-
"@zohodesk/icons": "1.0.
|
|
35
|
+
"@zohodesk/icons": "1.0.43",
|
|
42
36
|
"@zohodesk/utils": "1.3.13",
|
|
43
37
|
"@zohodesk/variables": "1.0.0",
|
|
44
38
|
"@zohodesk/virtualizer": "1.0.13",
|
|
45
|
-
"@zohoim/chat-components-hooks": "1.0
|
|
46
|
-
"@zohoim/chat-components-utils": "1.0
|
|
39
|
+
"@zohoim/chat-components-hooks": "1.1.0",
|
|
40
|
+
"@zohoim/chat-components-utils": "1.1.0"
|
|
47
41
|
},
|
|
48
42
|
"devDependencies": {
|
|
49
|
-
"@zohodesk-private/color-variable-preprocessor": "1.2.1",
|
|
50
43
|
"@zohodesk-private/css-variable-migrator": "1.0.7",
|
|
51
44
|
"html-to-react": "1.7.0 ",
|
|
52
45
|
"jsdom": "23.0.0",
|
|
53
46
|
"react-to-jsx": "1.3.2"
|
|
54
47
|
},
|
|
55
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "e631d299a79c7306a37882c9c32d3dcdc07acd95"
|
|
56
49
|
}
|