@appquality/unguess-design-system 3.1.103-attachments → 3.1.105-attachments

package/build/index.js

@@ -2337,6 +2337,19 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
         setEditor,
         thumbnails,
         setThumbnails,
+        afterUploadCallback: (failed) => {
+            setThumbnails(thumbnails.map((file) => {
+                if (failed.includes(file.name)) {
+                    file.isLoadingMedia = false;
+                    //file.isError = true;
+                }
+                else {
+                    file.isLoadingMedia = false;
+                    //file.isError = false
+                }
+                return file;
+            }));
+        },
         addThumbnails: ({ files }) => {
             files.forEach((file) => (file.isLoadingMedia = true));
             setThumbnails((prev) => [...prev, ...files]);
@@ -3085,7 +3098,7 @@ const CommentBar = ({ editor, i18n, }) => {
                         const mediaFiles = Array.from(files).map((file) => {
                             return Object.assign(file, {
                                 isLoadingMedia: false,
-                                internalId: uuid.v4(),
+                                internal_id: uuid.v4(),
                             });
                         });
                         if (mediaFiles.length === 0)
@@ -3521,31 +3534,34 @@ const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
 
 const ThumbnailContainer = ({ openLightbox }) => {
     const { thumbnails, removeThumbnail, onDeleteThumbnail } = useChatContext();
-    const media = React.useMemo(() => (thumbnails.map((file) => ({
-        src: URL.createObjectURL(file),
-        internalId: file.internalId,
-        type: file.type,
-        isLoadingMedia: file.isLoadingMedia,
-    }))), [thumbnails]);
-    if (!media || media.length === 0) {
+    const mediaFiles = React.useMemo(() => {
+        return thumbnails.map((file) => ({
+            fileName: file.name,
+            fileType: file.type,
+            previewUrl: URL.createObjectURL(file),
+            internal_id: file.internal_id,
+            isLoadingMedia: file.isLoadingMedia,
+        }));
+    }, [thumbnails]);
+    if (!mediaFiles || mediaFiles.length === 0) {
         return null;
     }
-    return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => {
+    return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: mediaFiles.map((file, index) => {
                 // Check if item is an image or a video
-                if (file.type.includes("image"))
-                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, xl: 3, lg: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(ImageThumbnail, { src: file.src, index: index, showX: true, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
+                if (file.fileType.includes("image"))
+                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, xl: 3, lg: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(ImageThumbnail, { src: file.previewUrl, index: index, showX: true, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
                                 removeThumbnail(index);
-                                onDeleteThumbnail(file.internalId);
+                                onDeleteThumbnail(file.internal_id);
                             }, clickThumbnail: () => {
                                 openLightbox(thumbnails[index], index);
-                            } }, file.internalId) })));
-                if (file.type.includes("video"))
-                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(VideoThumbnail, { src: file.src, index: index, showX: true, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
+                            } }, index) })));
+                if (file.fileType.includes("video"))
+                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(VideoThumbnail, { src: file.previewUrl, index: index, showX: true, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
                                 removeThumbnail(index);
-                                onDeleteThumbnail(file.internalId);
+                                onDeleteThumbnail(file.internal_id);
                             }, clickThumbnail: () => {
                                 openLightbox(thumbnails[index], index);
-                            } }, file.internalId) })));
+                            } }, index) })));
                 return null;
             }) })) }));
 };
@@ -4796,7 +4812,7 @@ const CommentBox = (_a) => {
                 const files = Array.from(event.dataTransfer.files).map((file) => {
                     return Object.assign(file, {
                         isLoadingMedia: false,
-                        internalId: uuid.v4(),
+                        internal_id: uuid.v4(),
                     });
                 });
                 const wrongFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
@@ -4818,7 +4834,7 @@ const CommentBox = (_a) => {
                 const files = Array.from(event.clipboardData.files).map((file) => {
                     return Object.assign(file, {
                         isLoadingMedia: false,
-                        internalId: uuid.v4(),
+                        internal_id: uuid.v4(),
                     });
                 });
                 const wrongFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
@@ -4917,7 +4933,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
                 ref.pause();
             }
         });
-    }, [videoRefs, media]);
+    }, [videoRefs]);
     const ed = react.useEditor({
         extensions: ext,
         content: message || "",

package/build/stories/chat/_types.d.ts

@@ -19,7 +19,7 @@ export interface ChatEditorArgs extends Partial<EditorOptions> {
             bold?: string;
             italic?: string;
             mention?: string;
-            attachment?: React.ReactNode;
+            attachment?: string | React.ReactNode;
         };
         mention?: {
             noResults?: string;
@@ -40,10 +40,8 @@ export interface EditorHeaderArgs {
 }
 export interface FileItem extends File {
     isLoadingMedia: boolean;
-    internalId: string;
-    type: string;
     isError?: boolean;
-    src?: string;
+    internal_id: string;
 }
 export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {
 }

package/build/stories/chat/context/chatContext.d.ts

@@ -13,6 +13,7 @@ export type ChatContextType = {
     mentionableUsers: (props: {
         query: string;
     }) => SuggestedUser[];
+    afterUploadCallback: (failed: string[]) => void;
     clearInput: () => void;
     onDeleteThumbnail: (id: string) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.103-attachments",
+  "version": "3.1.105-attachments",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",