@antscorp/antsomi-ui 1.3.6-beta.113 → 1.3.6-beta.114
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.
|
@@ -39,6 +39,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
|
|
|
39
39
|
const [isLoadingUpload, setIsLoadingUpload] = useState(false);
|
|
40
40
|
const [isLoadingFollower, setIsLoadingFollower] = useState(false);
|
|
41
41
|
const [valueInput, setValueInput] = useState(initValueInput);
|
|
42
|
+
const [fileInputKey, setFileInputKey] = useState(0);
|
|
42
43
|
const [errFile, setErrFile] = useState({
|
|
43
44
|
isError: false,
|
|
44
45
|
message: '',
|
|
@@ -341,14 +342,21 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
|
|
|
341
342
|
});
|
|
342
343
|
handleUploadFile(e.target.files[0]);
|
|
343
344
|
}
|
|
345
|
+
setFileInputKey(fileInputKey + 1);
|
|
344
346
|
};
|
|
345
|
-
const handleRemoveFile = url => {
|
|
347
|
+
const handleRemoveFile = (url, fileName) => {
|
|
346
348
|
let newListFile = valueInput.files;
|
|
347
349
|
newListFile = newListFile.filter((list) => list?.url !== url);
|
|
348
350
|
updateValueInput({ files: newListFile });
|
|
349
351
|
};
|
|
350
|
-
const
|
|
351
|
-
|
|
352
|
+
const handleRemoveFileV2 = (url, fileName) => {
|
|
353
|
+
let newListFile = valueInput.files;
|
|
354
|
+
newListFile = newListFile.filter((list) => list?.url !== url);
|
|
355
|
+
const newFileZendesk = valueInput.fileZendesk.filter(file => file.file_name !== fileName);
|
|
356
|
+
updateValueInput({
|
|
357
|
+
files: newListFile,
|
|
358
|
+
fileZendesk: newFileZendesk,
|
|
359
|
+
});
|
|
352
360
|
};
|
|
353
361
|
return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsxs(Spin, { style: { height: '100vh' }, spinning: isLoading ||
|
|
354
362
|
isLoadingDetails ||
|
|
@@ -369,7 +377,9 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
|
|
|
369
377
|
domain: domainUpload,
|
|
370
378
|
token,
|
|
371
379
|
userId,
|
|
372
|
-
}), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () =>
|
|
380
|
+
}), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => {
|
|
381
|
+
handleRemoveFileV2(file?.url, file?.file_name);
|
|
382
|
+
}, className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.file_name))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: `fileImage-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
|
|
373
383
|
background: `${!handleValidateContent(textValue) || isLoadingUpload
|
|
374
384
|
? '#ccc'
|
|
375
385
|
: '#1f5fac'}`,
|
|
@@ -38,6 +38,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
|
|
|
38
38
|
const [isLoadingUpload, setIsLoadingUpload] = useState(false);
|
|
39
39
|
const [isLoadingFollower, setIsLoadingFollower] = useState(false);
|
|
40
40
|
const [valueInput, setValueInput] = useState(initValueInput);
|
|
41
|
+
const [fileInputKey, setFileInputKey] = useState(0);
|
|
41
42
|
const [errFile, setErrFile] = useState({
|
|
42
43
|
isError: false,
|
|
43
44
|
message: '',
|
|
@@ -254,12 +255,22 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
|
|
|
254
255
|
});
|
|
255
256
|
handleUploadFile(e.target.files[0]);
|
|
256
257
|
}
|
|
258
|
+
setFileInputKey(fileInputKey + 1);
|
|
257
259
|
};
|
|
258
260
|
const handleRemoveFile = token => {
|
|
259
261
|
let newListFile = valueInput.files;
|
|
260
262
|
newListFile = newListFile.filter((list) => list?.token !== token);
|
|
261
263
|
updateValueInput({ files: newListFile });
|
|
262
264
|
};
|
|
265
|
+
const handleRemoveFileV2 = (url, fileName) => {
|
|
266
|
+
let newListFile = valueInput.files;
|
|
267
|
+
newListFile = newListFile.filter((list) => list?.url !== url);
|
|
268
|
+
const newFileZendesk = valueInput.fileZendesk.filter(file => file.file_name !== fileName);
|
|
269
|
+
updateValueInput({
|
|
270
|
+
files: newListFile,
|
|
271
|
+
fileZendesk: newFileZendesk,
|
|
272
|
+
});
|
|
273
|
+
};
|
|
263
274
|
const ownerEmail = useMemo(() => {
|
|
264
275
|
const keyById = keyBy(listUsers, 'userId');
|
|
265
276
|
if (keyById[ticketDetails?.ownerId]) {
|
|
@@ -278,7 +289,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
|
|
|
278
289
|
// width="300px"
|
|
279
290
|
onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadFile({
|
|
280
291
|
domain: domainUpload,
|
|
281
|
-
}), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () =>
|
|
292
|
+
}), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => handleRemoveFileV2(file?.url, file?.file_name), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: `fileImage-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
|
|
282
293
|
background: `${!handleValidateContent(textValue) || isLoadingUpload
|
|
283
294
|
? '#ccc'
|
|
284
295
|
: '#1f5fac'}`,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo, useRef, useState } from 'react';
|
|
2
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { WrapperAvatar, WrapperContentAvatar, WrapperLinkItemFiles, WrapperModalHeaderImg, WrapperModalImg, } from '../styled';
|
|
4
4
|
import { Icon, Image, Spin, Tooltip } from '@antscorp/antsomi-ui/es/components';
|
|
5
5
|
import { convertDateToTimestamp, generateAvatar } from '../util';
|
|
@@ -13,6 +13,26 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
|
|
|
13
13
|
isOpen: false,
|
|
14
14
|
src: '',
|
|
15
15
|
});
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (refMesage.current) {
|
|
18
|
+
refMesage.current.querySelectorAll('img')?.forEach(img => {
|
|
19
|
+
img.style.cursor = 'pointer';
|
|
20
|
+
img.addEventListener('click', () => {
|
|
21
|
+
setModalImg({
|
|
22
|
+
...modalImg,
|
|
23
|
+
isOpen: true,
|
|
24
|
+
src: img?.src,
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
refMesage.current.querySelectorAll('a')?.forEach(a => {
|
|
29
|
+
const isOpenNewTab = a.attributes?.rel?.value?.includes('noopener noreferrer');
|
|
30
|
+
if (isOpenNewTab) {
|
|
31
|
+
a.setAttribute('target', '_blank');
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
}, [refMesage.current]);
|
|
16
36
|
const isImageUrl = url => IMAGE_EXTENDS.some(tail => url && url.toLowerCase().endsWith(tail));
|
|
17
37
|
const [images, files] = useMemo(() => {
|
|
18
38
|
const arrImgs = [];
|