@messenger-box/platform-browser 0.0.1-alpha.42 → 0.0.1-alpha.43
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.0.1-alpha.43](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.42...v0.0.1-alpha.43) (2021-10-16)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @messenger-box/platform-browser
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [0.0.1-alpha.42](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.41...v0.0.1-alpha.42) (2021-10-15)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @messenger-box/platform-browser
|
package/lib/index.js
CHANGED
|
@@ -132,6 +132,9 @@ const MessengerComponent = () => {
|
|
|
132
132
|
const [showThread, setShowThread] = react_1.useState(false);
|
|
133
133
|
const [flag, setFlag] = react_1.useState(false);
|
|
134
134
|
const [userMessagesList, setUserMessagesList] = react_1.useState([]);
|
|
135
|
+
const [chosenEmoji, setChosenEmoji] = react_1.useState(null);
|
|
136
|
+
const [displayEmoji, setDisplayEmoji] = react_1.useState(false);
|
|
137
|
+
const [threadEmoji, setThreadEmoji] = react_1.useState(false);
|
|
135
138
|
const handleEnterButton = (e) => {
|
|
136
139
|
setUserMessagesList([
|
|
137
140
|
...userMessagesList,
|
|
@@ -145,17 +148,43 @@ const MessengerComponent = () => {
|
|
|
145
148
|
]);
|
|
146
149
|
setEnterValue('');
|
|
147
150
|
setFlag(true);
|
|
148
|
-
const [chosenEmoji, setChosenEmoji] = react_1.useState(null);
|
|
149
151
|
const onEmojiClick = (event, emojiObject) => {
|
|
150
152
|
setChosenEmoji(emojiObject);
|
|
151
153
|
};
|
|
152
154
|
};
|
|
153
|
-
|
|
154
|
-
|
|
155
|
+
const clickRef = react_1.useRef();
|
|
156
|
+
const checkIfClickedOutside = e => {
|
|
157
|
+
const node = clickRef.current;
|
|
158
|
+
if (node && node.contains(e.target)) {
|
|
159
|
+
setDisplayEmoji(false);
|
|
160
|
+
setThreadEmoji(false);
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
155
165
|
};
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
166
|
+
react_1.useEffect(() => {
|
|
167
|
+
if (displayEmoji || threadEmoji) {
|
|
168
|
+
document.addEventListener("click", checkIfClickedOutside, false);
|
|
169
|
+
}
|
|
170
|
+
else {
|
|
171
|
+
document.removeEventListener("click", checkIfClickedOutside, false);
|
|
172
|
+
}
|
|
173
|
+
return () => {
|
|
174
|
+
document.removeEventListener("click", checkIfClickedOutside, false);
|
|
175
|
+
};
|
|
176
|
+
}, [displayEmoji, threadEmoji]);
|
|
177
|
+
const handleOnSelect = (emoji) => {
|
|
178
|
+
setEnterValue(enterValue + emoji.native);
|
|
179
|
+
// setDisplayEmoji(false);
|
|
180
|
+
};
|
|
181
|
+
const emojiClick = (type) => {
|
|
182
|
+
if (type === 'main') {
|
|
183
|
+
setDisplayEmoji(true);
|
|
184
|
+
}
|
|
185
|
+
if (type === "thread") {
|
|
186
|
+
setThreadEmoji(true);
|
|
187
|
+
}
|
|
159
188
|
};
|
|
160
189
|
const messagesEndRef = react_1.useRef(null);
|
|
161
190
|
const scrollToBottom = () => {
|
|
@@ -187,7 +216,7 @@ const MessengerComponent = () => {
|
|
|
187
216
|
const handleShowSideBar = () => {
|
|
188
217
|
setShowThread(!showThread);
|
|
189
218
|
};
|
|
190
|
-
return (react_1.default.createElement("div", { className: css(style_1.styleSheet3.customInputStyle) },
|
|
219
|
+
return (react_1.default.createElement("div", { className: css(style_1.styleSheet3.customInputStyle), ref: clickRef },
|
|
191
220
|
react_1.default.createElement("div", { className: "chat_container" },
|
|
192
221
|
react_1.default.createElement("div", { className: "left_chat_box" },
|
|
193
222
|
react_1.default.createElement("div", { className: "msg_list" },
|
|
@@ -198,7 +227,7 @@ const MessengerComponent = () => {
|
|
|
198
227
|
react_1.default.createElement(antd_1.Row, null,
|
|
199
228
|
react_1.default.createElement(antd_1.Col, { className: "input_row" },
|
|
200
229
|
react_1.default.createElement("div", { className: "input_class" },
|
|
201
|
-
displayEmoji ? (react_1.default.createElement(emoji_mart_1.Picker, { native: true, set: "apple", emoji: "point_up", title: "Pick your emoji...", emojiSize: 24, perLine: 6, color: "#ae65c5", sheetSize: 16, showPreview: true, showSkinTones: false, notFoundEmoji: "sleuth_or_spy" })) : (''),
|
|
230
|
+
displayEmoji ? (react_1.default.createElement(emoji_mart_1.Picker, { onSelect: handleOnSelect, native: true, set: "apple", emoji: "point_up", title: "Pick your emoji...", emojiSize: 24, perLine: 6, color: "#ae65c5", sheetSize: 16, showPreview: true, showSkinTones: false, notFoundEmoji: "sleuth_or_spy" })) : (''),
|
|
202
231
|
react_1.default.createElement(antd_1.Input, { value: enterValue, onChange: (e) => { var _a; return setEnterValue((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); }, onPressEnter: (e) => handleEnterButton(e), placeholder: "Please Enter", className: "msg_input" }),
|
|
203
232
|
react_1.default.createElement("div", { className: "icon_box" },
|
|
204
233
|
react_1.default.createElement("div", { className: "icon_style" },
|
|
@@ -206,7 +235,7 @@ const MessengerComponent = () => {
|
|
|
206
235
|
react_1.default.createElement("button", { style: { border: '0px' }, onClick: fileClick },
|
|
207
236
|
react_1.default.createElement(all_1.HiOutlinePaperClip, null))),
|
|
208
237
|
react_1.default.createElement("div", { className: "icon_style" },
|
|
209
|
-
react_1.default.createElement("button", { style: { border: '0px' }, onClick: emojiClick },
|
|
238
|
+
react_1.default.createElement("button", { style: { border: '0px' }, onClick: e => emojiClick('main') },
|
|
210
239
|
react_1.default.createElement(all_1.MdOutlineEmojiEmotions, null)))))))),
|
|
211
240
|
showThread ?
|
|
212
241
|
react_1.default.createElement("div", { className: "right_chat_box" },
|
|
@@ -223,7 +252,7 @@ const MessengerComponent = () => {
|
|
|
223
252
|
react_1.default.createElement("div", { ref: messagesEndRef })),
|
|
224
253
|
react_1.default.createElement(antd_1.Col, { className: "thread_input_row" },
|
|
225
254
|
react_1.default.createElement("div", { className: "input_class" },
|
|
226
|
-
|
|
255
|
+
threadEmoji ? (react_1.default.createElement(emoji_mart_1.Picker, { onSelect: handleOnSelect, native: true, set: "apple", emoji: "point_up", title: "Pick your emoji...", emojiSize: 24, perLine: 6, color: "#ae65c5", sheetSize: 16, showPreview: true, showSkinTones: false, notFoundEmoji: "sleuth_or_spy" })) : (''),
|
|
227
256
|
react_1.default.createElement(antd_1.Input, { value: enterValue, onChange: (e) => { var _a; return setEnterValue((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); }, onPressEnter: (e) => handleEnterButton(e), placeholder: "Please Enter", className: "msg_input" }),
|
|
228
257
|
react_1.default.createElement("div", { className: "icon_box" },
|
|
229
258
|
react_1.default.createElement("div", { className: "icon_style" },
|
|
@@ -231,7 +260,7 @@ const MessengerComponent = () => {
|
|
|
231
260
|
react_1.default.createElement("button", { style: { border: '0px' }, onClick: fileClick },
|
|
232
261
|
react_1.default.createElement(all_1.HiOutlinePaperClip, null))),
|
|
233
262
|
react_1.default.createElement("div", { className: "icon_style" },
|
|
234
|
-
react_1.default.createElement("button", { style: { border: '0px' }, onClick: emojiClick },
|
|
263
|
+
react_1.default.createElement("button", { style: { border: '0px' }, onClick: e => emojiClick("thread") },
|
|
235
264
|
react_1.default.createElement(all_1.MdOutlineEmojiEmotions, null))))))))) : '')));
|
|
236
265
|
};
|
|
237
266
|
exports.MessengerComponent = MessengerComponent;
|