@zohoim/chat-components 1.0.9-beta.3 → 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/AttachmentPreview/AttachmentPreview.js +5 -2
- package/es/AttachmentPreview/props/defaultProps.js +2 -1
- package/es/AttachmentPreview/props/propTypes.js +2 -1
- package/es/Emojis/Emojis.js +5 -7
- package/es/EmojisList/EmojisList.js +4 -7
- package/es/Theme/themeVariables/dark/blueTheme.js +1 -1
- package/es/Theme/themeVariables/dark/greenTheme.js +1 -1
- package/es/Theme/themeVariables/dark/orangeTheme.js +1 -1
- package/es/Theme/themeVariables/dark/redTheme.js +1 -1
- package/es/Theme/themeVariables/dark/yellowTheme.js +1 -1
- package/es/Theme/themeVariables/light/blueTheme.js +1 -1
- package/es/Theme/themeVariables/light/greenTheme.js +1 -1
- package/es/Theme/themeVariables/light/orangeTheme.js +1 -1
- package/es/Theme/themeVariables/light/redTheme.js +1 -1
- package/es/Theme/themeVariables/light/yellowTheme.js +1 -1
- package/es/Theme/themeVariables/pureDark/blueTheme.js +1 -1
- package/es/Theme/themeVariables/pureDark/greenTheme.js +1 -1
- package/es/Theme/themeVariables/pureDark/orangeTheme.js +1 -1
- package/es/Theme/themeVariables/pureDark/redTheme.js +1 -1
- package/es/Theme/themeVariables/pureDark/yellowTheme.js +1 -1
- package/es/im/ReplyEditor/css/ReplyEditor.module.css +7 -1
- package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js +9 -3
- package/es/im/ReplyEditorSuggestions/props/propTypes.js +1 -0
- package/es/rte/Editor/css/Editor.module.css +0 -2
- package/package.json +4 -4
|
@@ -35,7 +35,8 @@ export default function AttachmentPreview(props) {
|
|
|
35
35
|
texts,
|
|
36
36
|
descriptionDetails,
|
|
37
37
|
onDescriptionChange: propOnDescriptionChange,
|
|
38
|
-
needCloseOnEscape
|
|
38
|
+
needCloseOnEscape,
|
|
39
|
+
needUploadOnEnter
|
|
39
40
|
} = props;
|
|
40
41
|
const {
|
|
41
42
|
editorProps = dummyObject,
|
|
@@ -67,7 +68,9 @@ export default function AttachmentPreview(props) {
|
|
|
67
68
|
onEditorKeyDown
|
|
68
69
|
} = useAttachmentPreviewEditor({
|
|
69
70
|
editorProps,
|
|
70
|
-
onPreviewPopupKeyDown: onEscape
|
|
71
|
+
onPreviewPopupKeyDown: onEscape,
|
|
72
|
+
needUploadOnEnter,
|
|
73
|
+
onSubmit
|
|
71
74
|
});
|
|
72
75
|
const {
|
|
73
76
|
fileName,
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
|
|
3
3
|
const attachmentPreviewDefaultProps = {
|
|
4
4
|
customStyle: dummyObject,
|
|
5
|
-
needCloseOnEscape: true
|
|
5
|
+
needCloseOnEscape: true,
|
|
6
|
+
needUploadOnEnter: true
|
|
6
7
|
};
|
|
7
8
|
export default attachmentPreviewDefaultProps;
|
|
@@ -26,6 +26,7 @@ const attachmentPreviewPropTypes = {
|
|
|
26
26
|
}).isRequired,
|
|
27
27
|
descriptionDetails: PropTypes.object,
|
|
28
28
|
onDescriptionChange: PropTypes.func,
|
|
29
|
-
needCloseOnEscape: PropTypes.bool
|
|
29
|
+
needCloseOnEscape: PropTypes.bool,
|
|
30
|
+
needUploadOnEnter: PropTypes.bool
|
|
30
31
|
};
|
|
31
32
|
export default attachmentPreviewPropTypes;
|
package/es/Emojis/Emojis.js
CHANGED
|
@@ -41,9 +41,7 @@ export default function Emojis(props) {
|
|
|
41
41
|
selectedGroup,
|
|
42
42
|
getEmojisListMethods,
|
|
43
43
|
onSelect,
|
|
44
|
-
onSelectTab
|
|
45
|
-
isRenderEmojis,
|
|
46
|
-
isRenderEmojisList
|
|
44
|
+
onSelectTab
|
|
47
45
|
} = useEmojis({
|
|
48
46
|
searchString,
|
|
49
47
|
isShowSearchBox,
|
|
@@ -52,13 +50,13 @@ export default function Emojis(props) {
|
|
|
52
50
|
emojisList,
|
|
53
51
|
isShowGroupBasedList
|
|
54
52
|
});
|
|
55
|
-
return
|
|
53
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, isShowSearchBox ? /*#__PURE__*/React.createElement(EmojisHeader, {
|
|
56
54
|
getRef: getSearchRef,
|
|
57
55
|
onChange: onSearch,
|
|
58
56
|
searchPlaceHolder: searchPlaceHolder,
|
|
59
57
|
searchString: searchValue,
|
|
60
58
|
...emojisHeaderProps
|
|
61
|
-
}) : null,
|
|
59
|
+
}) : null, /*#__PURE__*/React.createElement(EmojisList, {
|
|
62
60
|
emojisList: emojisList,
|
|
63
61
|
getMethods: getEmojisListMethods,
|
|
64
62
|
isShowGroupBasedList: searchValue ? false : isShowGroupBasedList,
|
|
@@ -69,12 +67,12 @@ export default function Emojis(props) {
|
|
|
69
67
|
searchString: searchValue,
|
|
70
68
|
selectedGroup: selectedGroup,
|
|
71
69
|
...emojisListProps
|
|
72
|
-
})
|
|
70
|
+
}), isShowGroupBasedList ? /*#__PURE__*/React.createElement(EmojisFooter, {
|
|
73
71
|
emojisList: emojisList,
|
|
74
72
|
onSelect: onSelectTab,
|
|
75
73
|
selectedTab: selectedGroup,
|
|
76
74
|
...emojisFooterProps
|
|
77
|
-
}) : null)
|
|
75
|
+
}) : null);
|
|
78
76
|
}
|
|
79
77
|
Emojis.propTypes = emojisPropTypes;
|
|
80
78
|
Emojis.defaultProps = emojisDefaultProps;
|
|
@@ -45,7 +45,8 @@ export default function EmojisList(props) {
|
|
|
45
45
|
emojisList,
|
|
46
46
|
setGroupRefs,
|
|
47
47
|
setContainerRef: listContainerRef,
|
|
48
|
-
|
|
48
|
+
isAllEmpty,
|
|
49
|
+
isGroupEmpty,
|
|
49
50
|
isRenderEmptyState,
|
|
50
51
|
isRenderElement
|
|
51
52
|
} = useEmojisList({
|
|
@@ -57,10 +58,6 @@ export default function EmojisList(props) {
|
|
|
57
58
|
selectedGroup,
|
|
58
59
|
isShowOnlyContent
|
|
59
60
|
});
|
|
60
|
-
const {
|
|
61
|
-
isEmpty,
|
|
62
|
-
isGroupEmpty
|
|
63
|
-
} = emptyState;
|
|
64
61
|
/* External customization */
|
|
65
62
|
|
|
66
63
|
const newStyle = useMergeStyle(style, customStyle);
|
|
@@ -73,7 +70,7 @@ export default function EmojisList(props) {
|
|
|
73
70
|
rowType,
|
|
74
71
|
isShowGroupBasedList,
|
|
75
72
|
isShowOnlyContent,
|
|
76
|
-
isEmpty
|
|
73
|
+
isEmpty: isAllEmpty
|
|
77
74
|
}, newStyle);
|
|
78
75
|
const renderGroup = useCallback(_ref => {
|
|
79
76
|
let {
|
|
@@ -120,7 +117,7 @@ export default function EmojisList(props) {
|
|
|
120
117
|
return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderElement ? /*#__PURE__*/React.createElement("div", {
|
|
121
118
|
ref: listContainerRef,
|
|
122
119
|
className: emojisListClass
|
|
123
|
-
}, !
|
|
120
|
+
}, !isAllEmpty ? Object.keys(emojisList).map(groupName => {
|
|
124
121
|
const emojis = emojisList[groupName];
|
|
125
122
|
return renderGroup({
|
|
126
123
|
groupName,
|
|
@@ -117,7 +117,7 @@ export default {
|
|
|
117
117
|
replyEditor,
|
|
118
118
|
emojiPopup: { ...emojiPopup,
|
|
119
119
|
ttIcon_path1_color: 'rgba(200, 203, 220, 0.7)',
|
|
120
|
-
|
|
120
|
+
ttIcon_path2_color: 'var(--dot_black)'
|
|
121
121
|
},
|
|
122
122
|
emojiFooter: {
|
|
123
123
|
tabLine: primaryBlue,
|
|
@@ -118,7 +118,7 @@ export default {
|
|
|
118
118
|
replyEditor,
|
|
119
119
|
emojiPopup: { ...emojiPopup,
|
|
120
120
|
ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
|
|
121
|
-
|
|
121
|
+
ttIcon_path2_color: 'var(--dot_platinum)'
|
|
122
122
|
},
|
|
123
123
|
emojisHeader,
|
|
124
124
|
attachmentPreviewHeader,
|
|
@@ -118,7 +118,7 @@ export default {
|
|
|
118
118
|
replyEditor,
|
|
119
119
|
emojiPopup: { ...emojiPopup,
|
|
120
120
|
ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
|
|
121
|
-
|
|
121
|
+
ttIcon_path2_color: 'var(--dot_platinum)'
|
|
122
122
|
},
|
|
123
123
|
emojisHeader,
|
|
124
124
|
attachmentPreviewHeader,
|
|
@@ -11,6 +11,12 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
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;
|
|
14
20
|
max-height: var(--zd_size250) !important;
|
|
15
21
|
min-height: var(--zd_size80) !important;
|
|
16
22
|
overflow: auto !important;
|
|
@@ -26,7 +32,7 @@
|
|
|
26
32
|
--rte-link-text-color: var(
|
|
27
33
|
--imlib_chat_components_replyEditor_color
|
|
28
34
|
) !important;
|
|
29
|
-
padding:
|
|
35
|
+
padding: var(--zd_size16) !important;
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
.editorWrapper {
|
|
@@ -14,6 +14,7 @@ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
|
|
|
14
14
|
import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
|
|
15
15
|
import replyEditorSuggestionsDefaultProps from "./props/defaultProps";
|
|
16
16
|
import replyEditorSuggestionsPropTypes from "./props/propTypes";
|
|
17
|
+
import { emojiRegex } from '@zohoim/chat-components-utils/es/constants/regexConstants';
|
|
17
18
|
/** ** Styles *** */
|
|
18
19
|
|
|
19
20
|
import style from "./css/ReplyEditorSuggestions.module.css";
|
|
@@ -39,10 +40,14 @@ export default function ReplyEditorSuggestions(props) {
|
|
|
39
40
|
const handleRenderEmoji = useCallback(function () {
|
|
40
41
|
let {
|
|
41
42
|
onSelect,
|
|
42
|
-
searchText,
|
|
43
|
+
searchText = '',
|
|
43
44
|
componentProps
|
|
44
45
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
45
|
-
const
|
|
46
|
+
const {
|
|
47
|
+
searchTextLenForShow = 2
|
|
48
|
+
} = componentProps || {}; // (-1) -> ':' string is not valid for count.
|
|
49
|
+
|
|
50
|
+
const isShowEmojiPopup = searchText.length - 1 >= searchTextLenForShow;
|
|
46
51
|
return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
|
|
47
52
|
emojisRowType: "single",
|
|
48
53
|
isShowGroupBasedList: false,
|
|
@@ -59,7 +64,8 @@ export default function ReplyEditorSuggestions(props) {
|
|
|
59
64
|
}) : null;
|
|
60
65
|
}, []);
|
|
61
66
|
const defaultRenderMethod = useMemo(() => ({
|
|
62
|
-
':': handleRenderEmoji
|
|
67
|
+
':': handleRenderEmoji,
|
|
68
|
+
[emojiRegex]: handleRenderEmoji
|
|
63
69
|
}), [handleRenderEmoji]);
|
|
64
70
|
const {
|
|
65
71
|
suggestionElement,
|
|
@@ -11,6 +11,7 @@ const replyEditorSuggestionsPropTypes = {
|
|
|
11
11
|
}).isRequired,
|
|
12
12
|
suggestionsMapping: PropTypes.objectOf(PropTypes.shape({
|
|
13
13
|
componentProps: PropTypes.object,
|
|
14
|
+
popupProps: PropTypes.object,
|
|
14
15
|
renderItem: PropTypes.func
|
|
15
16
|
})).isRequired,
|
|
16
17
|
onSelect: PropTypes.func,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohoim/chat-components",
|
|
3
|
-
"version": "1.0.9-beta.
|
|
3
|
+
"version": "1.0.9-beta.5",
|
|
4
4
|
"description": "Chat Components",
|
|
5
5
|
"main": "es/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"@zohodesk/utils": "1.3.13",
|
|
37
37
|
"@zohodesk/variables": "1.0.0",
|
|
38
38
|
"@zohodesk/virtualizer": "1.0.13",
|
|
39
|
-
"@zohoim/chat-components-hooks": "^1.0.4-beta.
|
|
40
|
-
"@zohoim/chat-components-utils": "^1.0.4-beta.
|
|
39
|
+
"@zohoim/chat-components-hooks": "^1.0.4-beta.3",
|
|
40
|
+
"@zohoim/chat-components-utils": "^1.0.4-beta.2"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@zohodesk-private/css-variable-migrator": "1.0.7",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"jsdom": "23.0.0",
|
|
46
46
|
"react-to-jsx": "1.3.2"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "a5d758237514ccbb4ade84c3e3d315f36a9e9a0b"
|
|
49
49
|
}
|