@zohoim/chat-components 1.0.9-beta.2 → 1.0.9-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Message/Message.js +8 -2
- package/es/MessageActions/MessageActions.js +2 -0
- package/es/MessageActions/props/propTypes.js +2 -1
- package/es/MessageActionsMore/MessageActionsMore.js +5 -3
- package/es/MessageActionsMore/props/propTypes.js +3 -5
- package/es/MessageActionsWrapper/MessageActionsWrapper.js +7 -4
- package/es/MessageActionsWrapper/props/propTypes.js +2 -1
- package/es/MessageBubble/css/MessageBubble.module.css +0 -7
- package/es/MessageBubble/props/defaultProps.js +2 -1
- package/es/MessageBubble/props/propTypes.js +2 -1
- package/es/Theme/ThemeAssets.js +2 -2
- package/es/Theme/ThemeWrapper.js +7 -18
- package/es/Theme/TooltipWrapper.js +1 -1
- package/es/Theme/constants/index.js +41 -0
- package/es/Theme/props/defaultProps.js +1 -2
- package/es/Theme/props/propTypes.js +1 -2
- package/es/Theme/themeVariables/dark/blueTheme.js +1 -15
- package/es/Theme/themeVariables/dark/commonColorVariable.js +1 -20
- package/es/Theme/themeVariables/dark/greenTheme.js +1 -15
- package/es/Theme/themeVariables/dark/orangeTheme.js +1 -15
- package/es/Theme/themeVariables/dark/redTheme.js +1 -15
- package/es/Theme/themeVariables/dark/yellowTheme.js +1 -15
- package/es/Theme/themeVariables/light/blueTheme.js +1 -19
- package/es/Theme/themeVariables/light/commonColorVariable.js +0 -19
- package/es/Theme/themeVariables/light/greenTheme.js +1 -14
- package/es/Theme/themeVariables/light/orangeTheme.js +1 -14
- package/es/Theme/themeVariables/light/redTheme.js +1 -14
- package/es/Theme/themeVariables/light/yellowTheme.js +1 -14
- package/es/Theme/themeVariables/pureDark/blueTheme.js +1 -15
- package/es/Theme/themeVariables/pureDark/commonColorVariable.js +1 -20
- package/es/Theme/themeVariables/pureDark/greenTheme.js +1 -15
- package/es/Theme/themeVariables/pureDark/orangeTheme.js +1 -15
- package/es/Theme/themeVariables/pureDark/redTheme.js +1 -15
- package/es/Theme/themeVariables/pureDark/yellowTheme.js +1 -15
- package/es/Theme/utils/getThemeConfigurations.js +1 -1
- package/es/constants/index.js +1 -7
- package/es/im/index.js +1 -8
- package/es/index.js +2 -13
- package/package.json +7 -7
- package/es/AttachmentHandler/AttachmentHandler.js +0 -84
- package/es/AttachmentHandler/css/AttachmentHandler.module.css +0 -17
- package/es/AttachmentHandler/index.js +0 -1
- package/es/AttachmentHandler/props/defaultProps.js +0 -10
- package/es/AttachmentHandler/props/propTypes.js +0 -17
- package/es/AttachmentPreview/AttachmentPreview.js +0 -113
- package/es/AttachmentPreview/css/AttachmentPreview.module.css +0 -30
- package/es/AttachmentPreview/index.js +0 -1
- package/es/AttachmentPreview/props/defaultProps.js +0 -7
- package/es/AttachmentPreview/props/propTypes.js +0 -31
- package/es/AttachmentPreviewBody/AttachmentPreviewBody.js +0 -81
- package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +0 -68
- package/es/AttachmentPreviewBody/index.js +0 -1
- package/es/AttachmentPreviewBody/props/defaultProps.js +0 -7
- package/es/AttachmentPreviewBody/props/propTypes.js +0 -20
- package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.js +0 -84
- package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css +0 -47
- package/es/AttachmentPreviewHeader/index.js +0 -1
- package/es/AttachmentPreviewHeader/props/defaultProps.js +0 -7
- package/es/AttachmentPreviewHeader/props/propTypes.js +0 -16
- package/es/Emoji/Emoji.js +0 -72
- package/es/Emoji/css/Emoji.module.css +0 -47
- package/es/Emoji/css/cssJSLogic.js +0 -18
- package/es/Emoji/index.js +0 -1
- package/es/Emoji/props/defaultProps.js +0 -8
- package/es/Emoji/props/propTypes.js +0 -16
- package/es/EmojiPopup/EmojiPopup.js +0 -116
- package/es/EmojiPopup/css/EmojiPopup.module.css +0 -50
- package/es/EmojiPopup/index.js +0 -1
- package/es/EmojiPopup/props/defaultProps.js +0 -11
- package/es/EmojiPopup/props/propTypes.js +0 -21
- package/es/Emojis/Emojis.js +0 -81
- package/es/Emojis/index.js +0 -1
- package/es/Emojis/props/defaultProps.js +0 -10
- package/es/Emojis/props/propTypes.js +0 -19
- package/es/EmojisEmptyState/EmojisEmptyState.js +0 -50
- package/es/EmojisEmptyState/css/EmojisEmptyState.module.css +0 -18
- package/es/EmojisEmptyState/index.js +0 -1
- package/es/EmojisEmptyState/props/defaultProps.js +0 -9
- package/es/EmojisEmptyState/props/propTypes.js +0 -8
- package/es/EmojisFooter/EmojisFooter.js +0 -71
- package/es/EmojisFooter/css/EmojisFooter.module.css +0 -40
- package/es/EmojisFooter/index.js +0 -1
- package/es/EmojisFooter/props/defaultProps.js +0 -7
- package/es/EmojisFooter/props/propTypes.js +0 -12
- package/es/EmojisHeader/EmojisHeader.js +0 -65
- package/es/EmojisHeader/css/EmojisHeader.module.css +0 -36
- package/es/EmojisHeader/index.js +0 -1
- package/es/EmojisHeader/props/defaultProps.js +0 -8
- package/es/EmojisHeader/props/propTypes.js +0 -13
- package/es/EmojisList/EmojisList.js +0 -133
- package/es/EmojisList/css/EmojisList.module.css +0 -50
- package/es/EmojisList/css/cssJSLogic.js +0 -25
- package/es/EmojisList/index.js +0 -1
- package/es/EmojisList/props/defaultProps.js +0 -10
- package/es/EmojisList/props/propTypes.js +0 -20
- package/es/constants/propConstants/editorPropConstants.js +0 -3
- package/es/constants/propConstants/popupPropConstants.js +0 -2
- package/es/im/IMAttachmentHandler/IMAttachmentHandler.js +0 -50
- package/es/im/IMAttachmentHandler/index.js +0 -1
- package/es/im/IMAttachmentHandler/props/defaultProps.js +0 -10
- package/es/im/IMAttachmentHandler/props/propTypes.js +0 -28
- package/es/im/ReplyComposer/ReplyComposer.js +0 -137
- package/es/im/ReplyComposer/css/ReplyComposer.module.css +0 -5
- package/es/im/ReplyComposer/index.js +0 -1
- package/es/im/ReplyComposer/props/defaultProps.js +0 -7
- package/es/im/ReplyComposer/props/propTypes.js +0 -60
- package/es/im/ReplyComposerFooter/ReplyComposerFooter.js +0 -41
- package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css +0 -5
- package/es/im/ReplyComposerFooter/index.js +0 -1
- package/es/im/ReplyComposerFooter/props/defaultProps.js +0 -8
- package/es/im/ReplyComposerFooter/props/propTypes.js +0 -17
- package/es/im/ReplyEditor/ReplyEditor.js +0 -103
- package/es/im/ReplyEditor/css/ReplyEditor.module.css +0 -38
- package/es/im/ReplyEditor/css/cssJSLogic.js +0 -10
- package/es/im/ReplyEditor/index.js +0 -1
- package/es/im/ReplyEditor/props/defaultProps.js +0 -8
- package/es/im/ReplyEditor/props/propTypes.js +0 -27
- package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js +0 -149
- package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css +0 -5
- package/es/im/ReplyEditorExtensions/index.js +0 -1
- package/es/im/ReplyEditorExtensions/props/defaultProps.js +0 -6
- package/es/im/ReplyEditorExtensions/props/propTypes.js +0 -16
- package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js +0 -87
- package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css +0 -8
- package/es/im/ReplyEditorSuggestions/index.js +0 -1
- package/es/im/ReplyEditorSuggestions/props/defaultProps.js +0 -6
- package/es/im/ReplyEditorSuggestions/props/propTypes.js +0 -20
- package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js +0 -90
- package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css +0 -7
- package/es/im/ReplyEditorSuggestionsPopup/index.js +0 -1
- package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js +0 -10
- package/es/im/ReplyEditorSuggestionsPopup/props/propTypes.js +0 -21
- package/es/rte/Editor/Editor.js +0 -80
- package/es/rte/Editor/css/Editor.module.css +0 -19
- package/es/rte/Editor/index.js +0 -1
- package/es/rte/Editor/props/defaultProps.js +0 -21
- package/es/rte/Editor/props/propTypes.js +0 -52
- package/es/rte/index.js +0 -1
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/** ** Constants *** */
|
|
2
|
-
import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
|
|
3
|
-
const replyEditorDefaultProps = {
|
|
4
|
-
customStyle: dummyObject,
|
|
5
|
-
customProps: dummyObject,
|
|
6
|
-
themeVariables: dummyObject
|
|
7
|
-
};
|
|
8
|
-
export default replyEditorDefaultProps;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
/** ** Constants *** */
|
|
4
|
-
|
|
5
|
-
import { features, formats } from "../../../constants/propConstants/editorPropConstants";
|
|
6
|
-
const replyEditorPropTypes = {
|
|
7
|
-
customStyle: PropTypes.object,
|
|
8
|
-
id: PropTypes.string,
|
|
9
|
-
content: PropTypes.string.isRequired,
|
|
10
|
-
EDITORURL: PropTypes.string,
|
|
11
|
-
placeHolder: PropTypes.string,
|
|
12
|
-
features: PropTypes.arrayOf(PropTypes.oneOf(features)),
|
|
13
|
-
formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
|
|
14
|
-
isHTMLContent: PropTypes.bool,
|
|
15
|
-
onChange: PropTypes.func.isRequired,
|
|
16
|
-
onKeyDown: PropTypes.func,
|
|
17
|
-
onPaste: PropTypes.func,
|
|
18
|
-
onEnter: PropTypes.func,
|
|
19
|
-
onErrorCallback: PropTypes.func,
|
|
20
|
-
onReadyCallback: PropTypes.func,
|
|
21
|
-
themeVariables: PropTypes.object,
|
|
22
|
-
customProps: PropTypes.shape({
|
|
23
|
-
editorProps: PropTypes.object
|
|
24
|
-
}),
|
|
25
|
-
getEditorState: PropTypes.func
|
|
26
|
-
};
|
|
27
|
-
export default replyEditorPropTypes;
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import React, { useCallback, useMemo } from 'react';
|
|
3
|
-
/** ** Components *** */
|
|
4
|
-
|
|
5
|
-
import { Container, Box } from '@zohodesk/components/es/Layout';
|
|
6
|
-
import IMAttachmentHandler from "../IMAttachmentHandler/IMAttachmentHandler";
|
|
7
|
-
import EmojiPopup from "../../EmojiPopup/EmojiPopup";
|
|
8
|
-
/** ** Hooks *** */
|
|
9
|
-
|
|
10
|
-
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
11
|
-
import useReplyEditorExtensions from '@zohoim/chat-components-hooks/es/im/ReplyEditorExtensions/useReplyEditorExtensions';
|
|
12
|
-
/** ** Constants *** */
|
|
13
|
-
|
|
14
|
-
import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
|
|
15
|
-
import replyEditorExtensionsDefaultProps from "./props/defaultProps";
|
|
16
|
-
import replyEditorExtensionsPropTypes from "./props/propTypes";
|
|
17
|
-
/** ** Styles *** */
|
|
18
|
-
|
|
19
|
-
import style from "./css/ReplyEditorExtensions.module.css";
|
|
20
|
-
export default function ReplyEditorExtensions(props) {
|
|
21
|
-
const {
|
|
22
|
-
customStyle,
|
|
23
|
-
extensions = dummyObject,
|
|
24
|
-
isHTMLContent,
|
|
25
|
-
editor
|
|
26
|
-
} = props;
|
|
27
|
-
const {
|
|
28
|
-
details = dummyObject,
|
|
29
|
-
order = dummyArray
|
|
30
|
-
} = extensions;
|
|
31
|
-
const handleRenderEmojiExtension = useCallback(_ref => {
|
|
32
|
-
let {
|
|
33
|
-
id,
|
|
34
|
-
onSelect,
|
|
35
|
-
onPopupOpen,
|
|
36
|
-
onPopupClose,
|
|
37
|
-
componentProps
|
|
38
|
-
} = _ref;
|
|
39
|
-
const {
|
|
40
|
-
needFocusOnSelect
|
|
41
|
-
} = componentProps;
|
|
42
|
-
return /*#__PURE__*/React.createElement(EmojiPopup, {
|
|
43
|
-
key: id,
|
|
44
|
-
onPopupClose: onPopupClose,
|
|
45
|
-
onPopupOpen: onPopupOpen,
|
|
46
|
-
onSelect: value => {
|
|
47
|
-
onSelect({
|
|
48
|
-
content: value,
|
|
49
|
-
needFocus: needFocusOnSelect
|
|
50
|
-
});
|
|
51
|
-
},
|
|
52
|
-
...componentProps
|
|
53
|
-
});
|
|
54
|
-
}, []);
|
|
55
|
-
const handleRenderImageExtension = useCallback(_ref2 => {
|
|
56
|
-
let {
|
|
57
|
-
id,
|
|
58
|
-
componentProps
|
|
59
|
-
} = _ref2;
|
|
60
|
-
return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
|
|
61
|
-
key: id,
|
|
62
|
-
attachmentType: "image",
|
|
63
|
-
iconName: "ZD-TT-image",
|
|
64
|
-
iconSize: "14",
|
|
65
|
-
...componentProps
|
|
66
|
-
});
|
|
67
|
-
}, []);
|
|
68
|
-
const handleRenderFileExtension = useCallback(_ref3 => {
|
|
69
|
-
let {
|
|
70
|
-
id,
|
|
71
|
-
componentProps
|
|
72
|
-
} = _ref3;
|
|
73
|
-
return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
|
|
74
|
-
key: id,
|
|
75
|
-
attachmentType: "document",
|
|
76
|
-
iconName: "ZD-TT-ttAttach",
|
|
77
|
-
iconSize: "14",
|
|
78
|
-
...componentProps
|
|
79
|
-
});
|
|
80
|
-
}, []);
|
|
81
|
-
const defaultRenderMethod = useMemo(() => ({
|
|
82
|
-
emoji: {
|
|
83
|
-
id: 'emoji',
|
|
84
|
-
renderItem: handleRenderEmojiExtension
|
|
85
|
-
},
|
|
86
|
-
image: {
|
|
87
|
-
id: 'image',
|
|
88
|
-
renderItem: handleRenderImageExtension
|
|
89
|
-
},
|
|
90
|
-
file: {
|
|
91
|
-
id: 'file',
|
|
92
|
-
renderItem: handleRenderFileExtension
|
|
93
|
-
}
|
|
94
|
-
}), [handleRenderEmojiExtension, handleRenderFileExtension, handleRenderImageExtension]);
|
|
95
|
-
const {
|
|
96
|
-
onSelect,
|
|
97
|
-
onPopupOpen,
|
|
98
|
-
onPopupClose,
|
|
99
|
-
onRetainSelection,
|
|
100
|
-
onRemoveSelection
|
|
101
|
-
} = useReplyEditorExtensions({
|
|
102
|
-
extensions,
|
|
103
|
-
isHTMLContent,
|
|
104
|
-
editor
|
|
105
|
-
});
|
|
106
|
-
/* External customization */
|
|
107
|
-
|
|
108
|
-
const newStyle = useMergeStyle(style, customStyle);
|
|
109
|
-
return /*#__PURE__*/React.createElement(Container, {
|
|
110
|
-
alignBox: "row",
|
|
111
|
-
className: newStyle.replyEditorExtensions
|
|
112
|
-
}, order.map(extension => {
|
|
113
|
-
const {
|
|
114
|
-
id,
|
|
115
|
-
renderItem,
|
|
116
|
-
componentProps = dummyObject
|
|
117
|
-
} = details[extension] || {};
|
|
118
|
-
const {
|
|
119
|
-
renderItem: renderMethod
|
|
120
|
-
} = defaultRenderMethod[id] || dummyObject;
|
|
121
|
-
const props = {
|
|
122
|
-
id,
|
|
123
|
-
onSelect,
|
|
124
|
-
componentProps,
|
|
125
|
-
editor,
|
|
126
|
-
onPopupOpen,
|
|
127
|
-
onPopupClose,
|
|
128
|
-
onRetainSelection,
|
|
129
|
-
onRemoveSelection
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
if (renderItem) {
|
|
133
|
-
return /*#__PURE__*/React.createElement(Box, {
|
|
134
|
-
key: id
|
|
135
|
-
}, renderItem(props));
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
if (renderMethod) {
|
|
139
|
-
return /*#__PURE__*/React.createElement(Box, {
|
|
140
|
-
key: id
|
|
141
|
-
}, renderMethod(props));
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
return null;
|
|
145
|
-
}));
|
|
146
|
-
}
|
|
147
|
-
ReplyEditorExtensions.propTypes = replyEditorExtensionsPropTypes;
|
|
148
|
-
ReplyEditorExtensions.defaultProps = replyEditorExtensionsDefaultProps;
|
|
149
|
-
ReplyEditorExtensions.displayName = 'ReplyEditorExtensions';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as ReplyEditorExtensions } from "./ReplyEditorExtensions";
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
const replyEditorExtensionsPropTypes = {
|
|
4
|
-
customStyle: PropTypes.object,
|
|
5
|
-
editor: PropTypes.object.isRequired,
|
|
6
|
-
isHTMLContent: PropTypes.bool,
|
|
7
|
-
extensions: PropTypes.shape({
|
|
8
|
-
details: PropTypes.objectOf(PropTypes.shape({
|
|
9
|
-
componentProps: PropTypes.object,
|
|
10
|
-
id: PropTypes.string,
|
|
11
|
-
renderItem: PropTypes.func
|
|
12
|
-
})),
|
|
13
|
-
order: PropTypes.array
|
|
14
|
-
}).isRequired
|
|
15
|
-
};
|
|
16
|
-
export default replyEditorExtensionsPropTypes;
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import React, { useMemo, useCallback } from 'react';
|
|
3
|
-
/** ** Components *** */
|
|
4
|
-
|
|
5
|
-
import { Container } from '@zohodesk/components/es/Layout';
|
|
6
|
-
import Emojis from "../../Emojis/Emojis";
|
|
7
|
-
import ReplyEditorSuggestionsPopup from "../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup";
|
|
8
|
-
/** ** Hooks *** */
|
|
9
|
-
|
|
10
|
-
import useReplyEditorSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestions/useReplyEditorSuggestions';
|
|
11
|
-
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
12
|
-
/** ** Constants *** */
|
|
13
|
-
|
|
14
|
-
import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
|
|
15
|
-
import replyEditorSuggestionsDefaultProps from "./props/defaultProps";
|
|
16
|
-
import replyEditorSuggestionsPropTypes from "./props/propTypes";
|
|
17
|
-
/** ** Styles *** */
|
|
18
|
-
|
|
19
|
-
import style from "./css/ReplyEditorSuggestions.module.css";
|
|
20
|
-
export default function ReplyEditorSuggestions(props) {
|
|
21
|
-
const {
|
|
22
|
-
customStyle,
|
|
23
|
-
suggestionDetails = dummyObject,
|
|
24
|
-
suggestionsMapping,
|
|
25
|
-
onSelect,
|
|
26
|
-
customProps,
|
|
27
|
-
getMethods,
|
|
28
|
-
onClose
|
|
29
|
-
} = props;
|
|
30
|
-
const {
|
|
31
|
-
position = dummyObject
|
|
32
|
-
} = suggestionDetails;
|
|
33
|
-
const {
|
|
34
|
-
replyEditorSuggestionsPopupProps = dummyObject
|
|
35
|
-
} = customProps || dummyObject;
|
|
36
|
-
/* External customization */
|
|
37
|
-
|
|
38
|
-
const newStyle = useMergeStyle(style, customStyle);
|
|
39
|
-
const handleRenderEmoji = useCallback(function () {
|
|
40
|
-
let {
|
|
41
|
-
onSelect,
|
|
42
|
-
searchText,
|
|
43
|
-
componentProps
|
|
44
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
45
|
-
const isShowEmojiPopup = searchText.length > 1;
|
|
46
|
-
return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
|
|
47
|
-
emojisRowType: "single",
|
|
48
|
-
isShowGroupBasedList: false,
|
|
49
|
-
isShowOnlyContent: true,
|
|
50
|
-
isShowSearchBox: false,
|
|
51
|
-
needAutoFocus: false,
|
|
52
|
-
onSelect: value => {
|
|
53
|
-
onSelect && onSelect({
|
|
54
|
-
content: value
|
|
55
|
-
});
|
|
56
|
-
},
|
|
57
|
-
searchString: searchText,
|
|
58
|
-
...componentProps
|
|
59
|
-
}) : null;
|
|
60
|
-
}, []);
|
|
61
|
-
const defaultRenderMethod = useMemo(() => ({
|
|
62
|
-
':': handleRenderEmoji
|
|
63
|
-
}), [handleRenderEmoji]);
|
|
64
|
-
const {
|
|
65
|
-
suggestionElement,
|
|
66
|
-
popupProps = dummyObject
|
|
67
|
-
} = useReplyEditorSuggestions({
|
|
68
|
-
defaultRenderMethod,
|
|
69
|
-
suggestionDetails,
|
|
70
|
-
suggestionsMapping,
|
|
71
|
-
onSelect,
|
|
72
|
-
getMethods,
|
|
73
|
-
onClose
|
|
74
|
-
});
|
|
75
|
-
return /*#__PURE__*/React.createElement(Container, {
|
|
76
|
-
className: newStyle.suggestionPopup
|
|
77
|
-
}, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
|
|
78
|
-
onClose: onClose,
|
|
79
|
-
suggestionElement: suggestionElement,
|
|
80
|
-
targetPosition: position,
|
|
81
|
-
...replyEditorSuggestionsPopupProps,
|
|
82
|
-
...popupProps
|
|
83
|
-
}));
|
|
84
|
-
}
|
|
85
|
-
ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
|
|
86
|
-
ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;
|
|
87
|
-
ReplyEditorSuggestions.displayName = 'ReplyEditorSuggestions';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as ReplyEditorSuggestions } from "./ReplyEditorSuggestions";
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
const replyEditorSuggestionsPropTypes = {
|
|
4
|
-
customStyle: PropTypes.object,
|
|
5
|
-
suggestionDetails: PropTypes.shape({
|
|
6
|
-
editor: PropTypes.object,
|
|
7
|
-
searchText: PropTypes.string,
|
|
8
|
-
triggerDetails: PropTypes.shape({
|
|
9
|
-
trigger: PropTypes.string
|
|
10
|
-
})
|
|
11
|
-
}).isRequired,
|
|
12
|
-
suggestionsMapping: PropTypes.objectOf(PropTypes.shape({
|
|
13
|
-
componentProps: PropTypes.object,
|
|
14
|
-
renderItem: PropTypes.func
|
|
15
|
-
})).isRequired,
|
|
16
|
-
onSelect: PropTypes.func,
|
|
17
|
-
getMethods: PropTypes.func,
|
|
18
|
-
onClose: PropTypes.func
|
|
19
|
-
};
|
|
20
|
-
export default replyEditorSuggestionsPropTypes;
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
/** ** Components *** */
|
|
4
|
-
|
|
5
|
-
import Popup from '@zohodesk/components/es/Popup/Popup';
|
|
6
|
-
import DropBox from '@zohodesk/components/es/DropBox/DropBox';
|
|
7
|
-
/** ** Hooks *** */
|
|
8
|
-
|
|
9
|
-
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
10
|
-
import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup';
|
|
11
|
-
/** ** Constants *** */
|
|
12
|
-
|
|
13
|
-
import replyEditorSuggestionsPopupDefaultProps from "./props/defaultProps";
|
|
14
|
-
import replyEditorSuggestionsPopupPropTypes from "./props/propTypes";
|
|
15
|
-
import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
|
|
16
|
-
import { EDITOR_POPUP_PORTAL } from "../../constants";
|
|
17
|
-
/** ** Styles *** */
|
|
18
|
-
|
|
19
|
-
import style from "./css/ReplyEditorSuggestionsPopup.module.css";
|
|
20
|
-
export function ReplyEditorSuggestionsPopupComp(props) {
|
|
21
|
-
const {
|
|
22
|
-
customStyle,
|
|
23
|
-
targetPosition = dummyObject,
|
|
24
|
-
onClose,
|
|
25
|
-
popupSize,
|
|
26
|
-
customProps,
|
|
27
|
-
suggestionElement,
|
|
28
|
-
needPositionUpdate,
|
|
29
|
-
defaultPosition,
|
|
30
|
-
|
|
31
|
-
/** ** Popup Props *** */
|
|
32
|
-
getTargetRef,
|
|
33
|
-
getContainerRef,
|
|
34
|
-
position,
|
|
35
|
-
togglePopup,
|
|
36
|
-
isPopupReady,
|
|
37
|
-
isPopupOpen,
|
|
38
|
-
removeClose,
|
|
39
|
-
openPopupOnly,
|
|
40
|
-
closePopupOnly,
|
|
41
|
-
isAbsolutePositioningNeeded,
|
|
42
|
-
positionsOffset
|
|
43
|
-
} = props;
|
|
44
|
-
const {
|
|
45
|
-
dropBoxProps = dummyObject
|
|
46
|
-
} = customProps || dummyObject;
|
|
47
|
-
const {
|
|
48
|
-
targetElementStyle
|
|
49
|
-
} = useReplyEditorSuggestionsPopup({
|
|
50
|
-
suggestionElement,
|
|
51
|
-
targetPosition,
|
|
52
|
-
needPositionUpdate,
|
|
53
|
-
defaultPosition,
|
|
54
|
-
onClose,
|
|
55
|
-
openPopupOnly,
|
|
56
|
-
closePopupOnly,
|
|
57
|
-
isPopupOpen,
|
|
58
|
-
togglePopup
|
|
59
|
-
});
|
|
60
|
-
/* External customization */
|
|
61
|
-
|
|
62
|
-
const newStyle = useMergeStyle(style, customStyle);
|
|
63
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
64
|
-
ref: getTargetRef,
|
|
65
|
-
className: newStyle.hiddenTarget,
|
|
66
|
-
style: targetElementStyle
|
|
67
|
-
}), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
|
|
68
|
-
boxPosition: position,
|
|
69
|
-
customStyle: dummyObject,
|
|
70
|
-
getRef: getContainerRef,
|
|
71
|
-
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
|
|
72
|
-
isActive: isPopupReady,
|
|
73
|
-
isAnimate: true,
|
|
74
|
-
isArrow: false,
|
|
75
|
-
onClick: removeClose,
|
|
76
|
-
portalId: EDITOR_POPUP_PORTAL,
|
|
77
|
-
positionsOffset: positionsOffset,
|
|
78
|
-
size: popupSize,
|
|
79
|
-
...dropBoxProps
|
|
80
|
-
}, suggestionElement) : null);
|
|
81
|
-
}
|
|
82
|
-
const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
|
|
83
|
-
isAbsolutePositioningNeeded: false
|
|
84
|
-
});
|
|
85
|
-
ReplyEditorSuggestionsPopupComp.propTypes = replyEditorSuggestionsPopupPropTypes;
|
|
86
|
-
ReplyEditorSuggestionsPopupComp.defaultProps = replyEditorSuggestionsPopupDefaultProps;
|
|
87
|
-
ReplyEditorSuggestionsPopup.propTypes = replyEditorSuggestionsPopupPropTypes;
|
|
88
|
-
ReplyEditorSuggestionsPopup.defaultProps = replyEditorSuggestionsPopupDefaultProps;
|
|
89
|
-
ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
|
|
90
|
-
export default ReplyEditorSuggestionsPopup;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as ReplyEditorSuggestionsPopup } from "./ReplyEditorSuggestionsPopup";
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/** ** Constants *** */
|
|
2
|
-
import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
|
|
3
|
-
const replyEditorSuggestionsPopupDefaultProps = {
|
|
4
|
-
customStyle: dummyObject,
|
|
5
|
-
popupSize: 'xxlarge',
|
|
6
|
-
defaultPosition: 'bottomCenterToRight',
|
|
7
|
-
needPositionUpdate: true,
|
|
8
|
-
customOrder: ['bottomCenterToRight', 'bottomLeftToRight', 'topLeftToRight', 'topCenterToRight', 'rightTopToBottom', 'rightCenterToBottom', 'rightBottomToTop', 'rightCenterToTop', 'rightBottom', 'bottomRight', 'topRight', 'rightTop', 'bottomRightToLeft', 'bottomCenterToLeft', 'topRightToLeft', 'topCenterToLeft', 'rightCenter', 'bottomLeft', 'topLeft', 'bottomCenter', 'topCenter', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'leftBottom', 'leftTop']
|
|
9
|
-
};
|
|
10
|
-
export default replyEditorSuggestionsPopupDefaultProps;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
/** ** Constants *** */
|
|
4
|
-
|
|
5
|
-
import { popupSize, popupPosition } from "../../../constants/propConstants/popupPropConstants";
|
|
6
|
-
const replyEditorSuggestionsPopupPropTypes = {
|
|
7
|
-
customStyle: PropTypes.object,
|
|
8
|
-
targetPosition: PropTypes.shape({
|
|
9
|
-
x: PropTypes.number,
|
|
10
|
-
y: PropTypes.number
|
|
11
|
-
}).isRequired,
|
|
12
|
-
onClose: PropTypes.func,
|
|
13
|
-
popupSize: PropTypes.oneOf(popupSize),
|
|
14
|
-
customProps: PropTypes.shape({
|
|
15
|
-
dropBoxProps: PropTypes.object
|
|
16
|
-
}),
|
|
17
|
-
suggestionElement: PropTypes.element.isRequired,
|
|
18
|
-
needPositionUpdate: PropTypes.bool,
|
|
19
|
-
defaultPosition: PropTypes.oneOf(popupPosition)
|
|
20
|
-
};
|
|
21
|
-
export default replyEditorSuggestionsPopupPropTypes;
|
package/es/rte/Editor/Editor.js
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
/** ** Hooks *** */
|
|
4
|
-
|
|
5
|
-
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
6
|
-
import useEditor from '@zohoim/chat-components-hooks/es/rte/Editor/useEditor';
|
|
7
|
-
/** ** Constants *** */
|
|
8
|
-
|
|
9
|
-
import editorDefaultProps from "./props/defaultProps";
|
|
10
|
-
import editorPropTypes from "./props/propTypes";
|
|
11
|
-
import { defaultEditorURL } from "../../constants";
|
|
12
|
-
/** ** Styles *** */
|
|
13
|
-
|
|
14
|
-
import style from "./css/Editor.module.css";
|
|
15
|
-
export default function Editor(props) {
|
|
16
|
-
const {
|
|
17
|
-
customStyle,
|
|
18
|
-
id,
|
|
19
|
-
EDITORURL = defaultEditorURL,
|
|
20
|
-
content,
|
|
21
|
-
placeHolder,
|
|
22
|
-
isHTMLContent,
|
|
23
|
-
menuBarProps,
|
|
24
|
-
formats,
|
|
25
|
-
features,
|
|
26
|
-
needAutoFocus,
|
|
27
|
-
isReadOnly,
|
|
28
|
-
insertContentDetails,
|
|
29
|
-
customOptions,
|
|
30
|
-
onReadyCallback,
|
|
31
|
-
onErrorCallback,
|
|
32
|
-
onChange,
|
|
33
|
-
onKeyDown,
|
|
34
|
-
onPaste,
|
|
35
|
-
langCode,
|
|
36
|
-
appearance,
|
|
37
|
-
isRTL,
|
|
38
|
-
handlers,
|
|
39
|
-
domId: propDomId
|
|
40
|
-
} = props;
|
|
41
|
-
/* External CSS Customization */
|
|
42
|
-
|
|
43
|
-
const newStyle = useMergeStyle(style, customStyle);
|
|
44
|
-
const {
|
|
45
|
-
domId
|
|
46
|
-
} = useEditor({
|
|
47
|
-
id,
|
|
48
|
-
EDITORURL,
|
|
49
|
-
content,
|
|
50
|
-
placeHolder,
|
|
51
|
-
isHTMLContent,
|
|
52
|
-
menuBarProps,
|
|
53
|
-
formats,
|
|
54
|
-
className: newStyle.editableDiv,
|
|
55
|
-
features,
|
|
56
|
-
needAutoFocus,
|
|
57
|
-
isReadOnly,
|
|
58
|
-
insertContentDetails,
|
|
59
|
-
customOptions,
|
|
60
|
-
onReadyCallback,
|
|
61
|
-
onErrorCallback,
|
|
62
|
-
onChange,
|
|
63
|
-
onKeyDown,
|
|
64
|
-
onPaste,
|
|
65
|
-
langCode,
|
|
66
|
-
appearance,
|
|
67
|
-
isRTL,
|
|
68
|
-
handlers,
|
|
69
|
-
domId: propDomId
|
|
70
|
-
});
|
|
71
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
72
|
-
className: newStyle.editorWrapper
|
|
73
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
74
|
-
className: newStyle.editor,
|
|
75
|
-
id: domId
|
|
76
|
-
}));
|
|
77
|
-
}
|
|
78
|
-
Editor.propTypes = editorPropTypes;
|
|
79
|
-
Editor.defaultProps = editorDefaultProps;
|
|
80
|
-
Editor.displayName = 'Editor';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
.editorWrapper {
|
|
2
|
-
/* Use this class for css customisation */
|
|
3
|
-
/* max-height: 160px !important; */
|
|
4
|
-
padding: var(--zd_size16) ;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.editor {
|
|
8
|
-
/* Use this class for css customisation */
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.editableDiv {
|
|
12
|
-
/* Use this class for css customisation */
|
|
13
|
-
min-height: var(--zd_size120) !important;
|
|
14
|
-
max-height: var(--zd_size120) !important;
|
|
15
|
-
overflow: auto !important;
|
|
16
|
-
font-size: var(--zd_font_size14) !important;
|
|
17
|
-
font-family: var(--zd_regular) !important;
|
|
18
|
-
padding: 0 !important;
|
|
19
|
-
}
|
package/es/rte/Editor/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Editor } from "./Editor";
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/** ** Constants *** */
|
|
2
|
-
import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
|
|
3
|
-
const editorDefaultProps = {
|
|
4
|
-
customStyle: dummyObject,
|
|
5
|
-
id: 'Editor',
|
|
6
|
-
placeHolder: ' ',
|
|
7
|
-
isHTMLContent: false,
|
|
8
|
-
needAutoFocus: true,
|
|
9
|
-
isReadOnly: false,
|
|
10
|
-
isRTL: false,
|
|
11
|
-
langCode: 'en_US',
|
|
12
|
-
menuBarProps: dummyObject,
|
|
13
|
-
appearance: dummyObject,
|
|
14
|
-
features: dummyArray,
|
|
15
|
-
formats: dummyArray,
|
|
16
|
-
handlers: {
|
|
17
|
-
needIDReRender: true,
|
|
18
|
-
needContentUpdate: true
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
export default editorDefaultProps;
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/** ** Libraries *** */
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
/** ** Constants *** */
|
|
4
|
-
|
|
5
|
-
import { modeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
|
|
6
|
-
import { features, formats, langCode } from "../../../constants/propConstants/editorPropConstants";
|
|
7
|
-
const editorPropTypes = {
|
|
8
|
-
id: PropTypes.string.isRequired,
|
|
9
|
-
domId: PropTypes.string,
|
|
10
|
-
content: PropTypes.string.isRequired,
|
|
11
|
-
EDITORURL: PropTypes.string.isRequired,
|
|
12
|
-
placeHolder: PropTypes.string,
|
|
13
|
-
customStyle: PropTypes.object,
|
|
14
|
-
isHTMLContent: PropTypes.bool,
|
|
15
|
-
appearance: PropTypes.shape({
|
|
16
|
-
mode: PropTypes.oneOf([modeConstants.LIGHT, modeConstants.DARK, modeConstants.PURE_DARK]).isRequired,
|
|
17
|
-
themeVariables: PropTypes.object
|
|
18
|
-
}),
|
|
19
|
-
// Editor Options - Refer the learn document (Override the options)
|
|
20
|
-
customOptions: PropTypes.object,
|
|
21
|
-
menuBarProps: PropTypes.shape({
|
|
22
|
-
isShow: PropTypes.bool.isRequired,
|
|
23
|
-
groupLength: PropTypes.number,
|
|
24
|
-
order: PropTypes.arrayOf(PropTypes.oneOf([...formats, ...features])),
|
|
25
|
-
position: PropTypes.oneOf(['top', 'bottom']),
|
|
26
|
-
responsive: PropTypes.bool,
|
|
27
|
-
tooltip: PropTypes.bool
|
|
28
|
-
}),
|
|
29
|
-
features: PropTypes.arrayOf(PropTypes.oneOf(features)),
|
|
30
|
-
formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
|
|
31
|
-
needAutoFocus: PropTypes.bool,
|
|
32
|
-
isReadOnly: PropTypes.bool,
|
|
33
|
-
isRTL: PropTypes.bool,
|
|
34
|
-
langCode: PropTypes.oneOf(langCode),
|
|
35
|
-
insertContentDetails: PropTypes.shape({
|
|
36
|
-
content: PropTypes.string.isRequired,
|
|
37
|
-
range: PropTypes.shape({
|
|
38
|
-
from: PropTypes.number,
|
|
39
|
-
to: PropTypes.number
|
|
40
|
-
})
|
|
41
|
-
}),
|
|
42
|
-
onChange: PropTypes.func,
|
|
43
|
-
onPaste: PropTypes.func,
|
|
44
|
-
onKeyDown: PropTypes.func,
|
|
45
|
-
onReadyCallback: PropTypes.func,
|
|
46
|
-
onErrorCallback: PropTypes.func,
|
|
47
|
-
handlers: PropTypes.shape({
|
|
48
|
-
needContentUpdate: PropTypes.bool,
|
|
49
|
-
needIDReRender: PropTypes.bool
|
|
50
|
-
})
|
|
51
|
-
};
|
|
52
|
-
export default editorPropTypes;
|
package/es/rte/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Editor";
|