@appquality/unguess-design-system 3.1.93-beta-attachments → 3.1.94-beta-attachments

package/build/index.js

@@ -25,6 +25,7 @@ var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var line = require('@nivo/line');
 var reactForms = require('@zendeskgarden/react-forms');
+var uuid = require('uuid');
 var react = require('@tiptap/react');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
 var Typography = require('@tiptap/extension-typography');
@@ -2313,7 +2314,7 @@ const ChatFooter = ({ saveText, children, showShortcut, }) => {
 };
 
 const ChatContext = React.createContext(null);
-const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, children, }) => {
+const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMentionableUsers, children, }) => {
     const [editor, setEditor] = React.useState();
     const [thumbnails, setThumbnails] = React.useState([]);
     const getMentions = (editor) => {
@@ -2331,10 +2332,14 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
         });
         return result;
     };
+    React.useMemo(() => {
+        console.log("thumbnails", thumbnails);
+    }, [thumbnails]);
     const chatContextValue = React.useMemo(() => ({
         editor,
         setEditor,
         thumbnails,
+        setThumbnails,
         afterUploadCallback: (failed) => {
             setThumbnails(thumbnails.map((file) => {
                 if (failed.includes(file.name)) {
@@ -2378,7 +2383,12 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
                 setThumbnails([]);
             console.log("thumbnails clear triggered", thumbnails);
         },
-        removeThumbnail: (index) => setThumbnails(thumbnails.filter((_, i) => i !== index)),
+        onDeleteThumbnail: (id) => {
+            onDeleteThumbnail(id);
+        },
+        removeThumbnail: (index) => {
+            setThumbnails(thumbnails.filter((_, i) => i !== index));
+        },
         triggerSave: () => {
             if (editor && onSave && !editor.isEmpty) {
                 onSave(editor, getMentions(editor));
@@ -2396,6 +2406,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
         thumbnails,
         setThumbnails,
         onFileUpload,
+        onDeleteThumbnail,
     ]);
     return (jsxRuntime.jsx(ChatContext.Provider, Object.assign({ value: chatContextValue }, { children: children })));
 };
@@ -3090,7 +3101,10 @@ const CommentBar = ({ editor, i18n, }) => {
                     const files = fileInput.files;
                     if (files) {
                         const mediaFiles = Array.from(files).map((file) => {
-                            return Object.assign(file, { isLoadingMedia: false });
+                            return Object.assign(file, {
+                                isLoadingMedia: false,
+                                internal_id: uuid.v4(),
+                            });
                         });
                         if (mediaFiles.length === 0)
                             return;
@@ -3523,8 +3537,9 @@ const StyledCol$1 = styled__default["default"](reactGrid.Col) `
 `;
 const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
 
-const ThumbnailContainer = ({ openLightbox }) => {
-    const { thumbnails, removeThumbnail } = useChatContext();
+const ThumbnailContainer = ({ 
+/*removeMediaToUpload,*/ openLightbox, }) => {
+    const { thumbnails, removeThumbnail, onDeleteThumbnail } = useChatContext();
     if (!thumbnails || thumbnails.length === 0) {
         return null;
     }
@@ -3535,6 +3550,7 @@ const ThumbnailContainer = ({ openLightbox }) => {
             fileType: file.type,
             status: file.isLoadingMedia ? "uploading" : "success",
             previewUrl: URL.createObjectURL(file),
+            internal_id: file.internal_id,
         });
     });
     console.log("mediafiles", mediaFiles);
@@ -3544,11 +3560,17 @@ const ThumbnailContainer = ({ openLightbox }) => {
     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.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.status === "uploading", removeThumbnail: () => removeThumbnail(index), clickThumbnail: () => {
+                    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.status === "uploading", removeThumbnail: () => {
+                                removeThumbnail(index);
+                                onDeleteThumbnail(file.internal_id);
+                            }, clickThumbnail: () => {
                                 openLightbox(thumbnails[index], index);
                             } }, 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.status === "uploading", removeThumbnail: () => removeThumbnail(index), clickThumbnail: () => {
+                    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.status === "uploading", removeThumbnail: () => {
+                                removeThumbnail(index);
+                                //removeMediaToUpload(thumbnails[index]);
+                            }, clickThumbnail: () => {
                                 openLightbox(thumbnails[index], index);
                             } }, index) })));
                 return null;
@@ -4545,11 +4567,14 @@ const CommentBox = (_a) => {
                     return false;
                 event.preventDefault();
                 const files = Array.from(event.dataTransfer.files).map((file) => {
-                    return Object.assign(file, { isLoadingMedia: false });
+                    return Object.assign(file, {
+                        isLoadingMedia: false,
+                        internal_id: uuid.v4(),
+                    });
                 });
-                const wronfFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
-                if (wronfFiles.length > 0) {
-                    for (const file of wronfFiles) {
+                const wrongFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
+                if (wrongFiles.length > 0) {
+                    for (const file of wrongFiles) {
                         addToast(({ close }) => (jsxRuntime.jsx(Notification, { onClose: close, type: "error", message: `${props.messageBadFileFormat} - ${file.name}`, isPrimary: true })), { placement: "top" });
                     }
                 }

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

@@ -41,7 +41,7 @@ export interface EditorHeaderArgs {
 export interface FileItem extends File {
     isLoadingMedia?: boolean;
     isError?: boolean;
-    id?: number;
+    internal_id: string;
 }
 export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {
 }

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

@@ -15,6 +15,7 @@ export type ChatContextType = {
     }) => SuggestedUser[];
     afterUploadCallback: (failed: string[]) => void;
     clearInput: () => void;
+    onDeleteThumbnail: (id: string) => void;
 };
 export declare const ChatContext: React.Context<ChatContextType | null>;
 export interface Data {
@@ -26,9 +27,10 @@ export interface Data {
         errorCode: string;
     }[];
 }
-export declare const ChatContextProvider: ({ onSave, onFileUpload, setMentionableUsers, children, }: {
+export declare const ChatContextProvider: ({ onSave, onFileUpload, onDeleteThumbnail, setMentionableUsers, children, }: {
     onSave?: ((editor: Editor, mentions: SuggestedUser[]) => void) | undefined;
     onFileUpload?: ((files: FileItem[]) => Promise<Data>) | undefined;
+    onDeleteThumbnail: (id: string) => void;
     children: React.ReactNode;
     setMentionableUsers: (props: {
         query: string;

package/build/stories/chat/parts/ThumbnailContainer/index.d.ts

@@ -4,9 +4,10 @@ export interface FileElement {
     status: "success" | "failed" | "uploading";
     errorCode?: "FILE_TOO_BIG" | "INVALID_FILE_EXTENSION" | "GENERIC_ERROR";
     previewUrl: string;
+    internal_id: string;
 }
 interface Props {
     openLightbox: (file: File, index: number) => void;
 }
-declare const ThumbnailContainer: ({ openLightbox }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const ThumbnailContainer: ({ openLightbox, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default ThumbnailContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.93-beta-attachments",
+  "version": "3.1.94-beta-attachments",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -68,7 +68,8 @@
     "react-slick": "^0.29.0",
     "react-window": "^1.8.6",
     "tippy.js": "^6.3.7",
-    "ua-parser-js": "^1.0.2"
+    "ua-parser-js": "^1.0.2",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.5",
@@ -92,6 +93,7 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.23",
     "@types/ua-parser-js": "^0.7.36",
+    "@types/uuid": "^9.0.8",
     "@zendeskgarden/react-dropdowns": "^8.49.0",
     "@zendeskgarden/react-forms": "^8.49.0",
     "@zendeskgarden/react-theming": "^8.48.2",