@weavy/uikit-react 14.0.4 → 15.0.1

package/dist/esm/types/ConversationListItem.d.ts

@@ -1,4 +1,5 @@
 export interface ConversationListItemProps {
     item: ConversationType;
+    userId: number;
     refetchConversations: Function;
 }

package/dist/esm/types/Files.d.ts

@@ -0,0 +1,7 @@
+export interface FilesProps {
+    uid: string;
+    className?: string;
+    view?: FileView;
+    order?: FileOrder;
+    trashed?: boolean;
+}

package/dist/esm/types/Message.d.ts

@@ -7,8 +7,8 @@ export interface MessageProps {
     name: string;
     created_at: string;
     created_by: string;
-    attachments: AttachmentType[];
-    meeting: MeetingCardType;
+    attachments: FileType[];
+    meeting?: MeetingType;
     parentId: number | null;
     reactions: ReactableType[];
     reactions_count?: number;

package/dist/esm/types/Posts.d.ts

@@ -0,0 +1,4 @@
+export interface PostsProps {
+    uid: string;
+    className?: string;
+}

package/dist/esm/types/interfaces.d.ts

@@ -0,0 +1,9 @@
+import { Completion } from "@codemirror/autocomplete";
+interface MentionsCompletion extends Completion {
+    item?: {
+        is_member: boolean;
+        avatar_url: string;
+        display_name: string;
+    };
+}
+export { MentionsCompletion };

package/dist/esm/types/types.d.ts

@@ -7,11 +7,17 @@ interface WeavyClient {
     destroy: Function;
     get: (url: string, retry?: boolean) => Promise<Response>;
     post: (url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean) => Promise<Response>;
+    upload: (url: string, method: "POST" | "PUT" | "PATCH", body: string | FormData, contentType?: string, onProgress?: (progress: number) => void, retry?: boolean) => Promise<Response>;
 }
 declare type WeavyClientOptions = {
     url: string;
     tokenFactory: (refresh: boolean) => Promise<string>;
 };
+declare type ServerErrorResponse = {
+    status: number;
+    title: string;
+    detail?: string;
+};
 declare type WeavyContextProps = {
     client: WeavyClient | null;
     options?: WeavyContextOptions;
@@ -33,9 +39,13 @@ declare type MessengerContextProps = {
 declare type UserContextProps = {
     user: UserType;
 };
+declare type CloudFilesContextProps = {
+    open: Function;
+};
 declare type PreviewContextProps = {
     openPreview: Function;
     closePreview: Function;
+    setPreviewFiles: Function;
 };
 declare type ProviderProps = {
     children: React.ReactNode;
@@ -63,15 +73,34 @@ declare type MessagesResult = {
     end: number;
     count: number;
 };
+declare type SortOrder = {
+    by: string;
+    descending: boolean;
+};
+declare type FileOrderBy = "id" | "name" | "size" | "created_at" | "modified_at" | "timestamp";
+declare type FileOrder = SortOrder & {
+    by: FileOrderBy;
+    descending: boolean;
+};
+declare type FileView = "list" | "grid";
+declare type FilesResult = {
+    data: FileType[];
+    start: number;
+    end: number;
+    count: number;
+};
 declare type ConversationType = {
     id: number;
+    created_by_id: number;
     display_name: string;
     last_message: MessageType;
     is_unread: boolean;
     is_pinned: boolean;
+    is_starred: boolean;
     type: string;
-    member_ids: number[];
     avatar_url: string;
+    user_id?: number;
+    member_count?: number;
 };
 declare type MemberType = {
     id: number;
@@ -91,16 +120,33 @@ declare type MessageType = {
     id: number;
     html: string;
     text: string;
+    plain: string;
     app_id: number;
     temp?: boolean;
     created_at: string;
     created_by: MemberType;
     created_by_id: number;
-    attachments: AttachmentType[];
+    modified_at?: string;
+    modified_by?: MemberType;
+    trashed_at?: string;
+    trashed_by?: MemberType;
+    attachments: FileType[];
     attachment_ids: number[];
-    meeting: MeetingCardType;
+    attachment_count?: number;
+    meeting?: MeetingType;
     meeting_id?: number;
     reactions: ReactableType[];
+    embed?: EmbedType;
+    comment_count?: number;
+    is_subscribed: boolean;
+    is_trashed: boolean;
+    options?: PollOptionType[];
+};
+declare type PollOptionType = {
+    id: number | null;
+    text: string;
+    has_voted?: boolean;
+    vote_count?: number;
 };
 declare type UserType = {
     id: number;
@@ -112,31 +158,47 @@ declare type UserType = {
     avatar_url: string;
     presence: string;
 };
-declare type FileType = {
+declare type FileKindType = "archive" | "audio" | "code" | "document" | "email" | "presentation" | "spreadsheet" | "image" | "text" | "video" | "file";
+declare type PreviewFormatType = "audio" | "code" | "embed" | "html" | "image" | "pdf" | "text" | "video" | "none";
+declare type ProviderType = "google-drive" | "onedrive" | "box" | "dropbox";
+declare type BlobType = {
     id: number;
     name: string;
+    size?: number;
+    media_type?: string;
+    thumbnail_url?: string;
 };
-declare type AttachmentType = {
+declare type FileType = {
     id: number;
+    refId?: number;
+    version: number;
     name: string;
-    kind: string;
+    kind: FileKindType;
     media_type: string;
-    width: number;
-    height: number;
-    size: number;
-    provider: string;
-    download_url: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    provider?: string;
+    download_url?: string;
     embed_url: string;
-    external_url: string;
-    thumbnail_url: string;
+    external_url?: string;
+    application_url?: string;
     preview_format: PreviewFormatType;
-    application_url: string;
-    preview_url: string;
+    preview_url?: string;
+    thumbnail_url?: string;
     created_at: string;
     created_by?: UserType;
-    createdById?: number;
+    created_by_id: number;
+    modified_at?: string;
+    modified_by?: UserType;
+    modified_by_id?: number;
+    comment_ids?: number[];
+    is_subscribed: boolean;
+    is_trashed: boolean;
+    status?: "ok" | "pending" | "conflict" | "error";
+    statusText?: string;
+    progress?: number;
 };
-declare type PreviewFormatType = "audio" | "code" | "embed" | "html" | "image" | "pdf" | "text" | "video" | "none";
 declare type ReactionType = {
     id: number;
     parent: MessageType;
@@ -153,11 +215,13 @@ declare type ReactionGroup = {
     count: number;
     has_reacted: boolean;
 };
-declare type MeetingType = {
-    id: number;
-    provider: string;
+declare type ReactionsResult = {
+    data: ReactionType[];
+    start: number;
+    end: number;
+    count: number;
 };
-declare type MeetingCardType = {
+declare type MeetingType = {
     id: number;
     provider: string;
     provider_id: string;
@@ -205,5 +269,57 @@ declare type RealtimeTyping = {
     action: string;
     id: number;
     actor: MemberTypingType;
-    conversation: ConversationType;
+    entity: EntityType;
+    type: string;
+};
+declare type AppType = {
+    id: number;
+    type: string;
+    uid: string;
+    display_name: string;
+    name: string;
+    description: string;
+    avatar_url: string;
+    metadata: any;
+    tags?: string[];
+    created_at: string;
+    created_by_id: number;
+    created_by?: UserType;
+    modified_at?: string;
+    modified_by_id?: number;
+    modified_by?: UserType;
+    member_count?: number;
+    members?: MemberType[];
+    is_subscribed: boolean;
+    is_trashed: boolean;
+    archive_url: string;
+};
+declare type PostsType = {
+    id: number;
+    display_name: string;
+    last_message: MessageType;
+    is_unread: boolean;
+    is_pinned: boolean;
+    type: string;
+    member_ids: number[];
+    avatar_url: string;
+};
+declare type EmbedType = {
+    id: number;
+    title: string;
+    description: string;
+    type: "link" | "video" | "photo" | "audio" | "rich";
+    host: string;
+    original_url: string;
+    provider_name: string;
+    provider_url?: string;
+    thumbnail_url?: string;
+    thumbnail_width?: number;
+    thumbnail_height?: number;
+    width?: number;
+    height?: number;
+    author_name: string;
+    author_url: string;
+    html?: string;
+    image?: string;
 };

package/dist/esm/ui/Dropdown.d.ts

@@ -2,18 +2,34 @@ import React from "react";
 declare type DropdownProps = {
     directionX?: "left" | "right";
     directionY?: "up" | "down";
+    icon?: string;
     children: React.ReactNode;
     className?: string;
+    title?: string;
+    buttonContent?: React.ReactNode;
+    disabled?: boolean;
+    noWrapper?: boolean;
     props?: React.HTMLAttributes<HTMLSpanElement>;
 };
 declare type ItemProps = {
     children: React.ReactNode;
     className?: string;
     onClick?: (e: any) => void;
+    active?: boolean;
     props?: React.HTMLAttributes<HTMLDivElement>;
 };
+declare type AnchorProps = {
+    children: React.ReactNode;
+    className?: string;
+    link?: string;
+    active?: boolean;
+    download?: boolean;
+    props?: React.HTMLAttributes<HTMLAnchorElement>;
+};
 declare const UIDropdown: {
-    UI: ({ directionX, directionY, children, className, ...props }: DropdownProps) => JSX.Element;
-    Item: ({ children, className, onClick, ...props }: ItemProps) => JSX.Element;
+    UI: ({ directionX, directionY, icon, children, className, title, buttonContent, disabled, noWrapper, ...props }: DropdownProps) => JSX.Element;
+    Item: ({ children, className, onClick, active, ...props }: ItemProps) => JSX.Element;
+    Anchor: ({ children, className, link, active, download, ...props }: AnchorProps) => JSX.Element;
+    Divider: () => JSX.Element;
 };
 export default UIDropdown;

package/dist/esm/ui/Icon.d.ts

@@ -1,10 +1,18 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 declare type Props = {
     name: string;
     color?: string;
     size?: number;
+    title?: string;
+    className?: string;
+};
+declare type IconActiveStackProps = {
+    className?: string;
+    children: ReactNode;
 };
 declare const UIIcon: {
-    UI: ({ name, color, size, ...props }: Props) => JSX.Element;
+    UI: ({ name, color, size, className, title, ...props }: Props) => JSX.Element;
+    Raw: ({ name, color, size, className, title, ...props }: Props) => JSX.Element;
+    ActiveStack: ({ className, children }: IconActiveStackProps) => JSX.Element;
 };
 export default UIIcon;

package/dist/esm/ui/Overlay.d.ts

@@ -5,8 +5,10 @@ declare type OverlayProps = {
     className?: string;
     isOpen: boolean;
     style?: Styles;
+    closeOnEsc?: boolean;
+    onClose?: () => void;
 };
 declare const UIOverlay: {
-    UI: ({ children, className, isOpen, style }: OverlayProps) => JSX.Element;
+    UI: ({ children, className, isOpen, style, closeOnEsc, onClose }: OverlayProps) => JSX.Element;
 };
 export default UIOverlay;

package/dist/esm/ui/Sheet.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Styles } from 'react-modal';
+declare type SheetProps = {
+    children: React.ReactNode;
+    className?: string;
+    isOpen: boolean;
+    style?: Styles;
+    title: string;
+    onClose?: (e: any) => void;
+};
+declare const UISheet: {
+    UI: ({ children, className, isOpen, style, title, onClose }: SheetProps) => JSX.Element;
+};
+export default UISheet;

package/dist/esm/ui/Spinner.d.ts

@@ -3,8 +3,9 @@ declare type SpinnerProps = {
     size?: number;
     spin?: boolean;
     overlay?: boolean;
+    progress?: number;
 };
 declare const UISpinner: {
-    UI: ({ spin, size, overlay }: SpinnerProps) => JSX.Element;
+    UI: ({ spin, size, overlay, progress }: SpinnerProps) => JSX.Element;
 };
 export default UISpinner;

package/dist/esm/utils/cacheUtils.d.ts

@@ -0,0 +1,14 @@
+import { InfiniteData, QueryClient, QueryKey } from "react-query";
+export declare function findAnyExistingItem<TDataItem>(queryData: InfiniteData<any> | undefined, propertyName: string, value: string, copy?: boolean): TDataItem | undefined;
+export declare function addToQueryData(queryData: any, item: any, sorting?: {
+    by?: string;
+    descending?: boolean;
+}, tempId?: number): any;
+export declare function updateQueryData(queryData: any, select: number | ((item: any) => boolean), fnUpdater: Function): any;
+export declare function removeQueryData(queryData: any, select: number | ((item: any) => boolean)): any;
+export declare const addCacheItem: <T>(queryClient: QueryClient, key: QueryKey, item: any, tempId?: number, sorting?: {
+    by?: string;
+    descending?: boolean;
+}) => void | T;
+export declare const updateCacheItem: <T>(queryClient: QueryClient, key: QueryKey, select: number | ((item: any) => boolean), fnUpdater: Function) => void | T;
+export declare const removeCacheItem: <T>(queryClient: QueryClient, key: QueryKey, select: number | ((item: any) => boolean)) => void | T;

package/dist/esm/utils/fileUtilities.d.ts

@@ -1,4 +1,4 @@
-export declare const fileSizeAsString: (size: number) => string;
+export declare const fileSizeAsString: (size: number, significantDigits?: number) => string;
 export declare function getExtension(name: string): string;
 export declare function isAudio(ext: string): boolean;
 export declare function isImage(ext: string): boolean;
@@ -15,3 +15,12 @@ export declare function getIcon(name: string, mediaType?: string): {
     icon: string;
     color?: string;
 };
+/**
+ * Returns preview formats that can be rendered directly in the browser
+ *
+ * @param {string} name - Name of the file
+ * @returns PreviewFormatType
+ */
+export declare function getWebPreviewFormat(name: string): PreviewFormatType;
+export declare function getProvider(provider: string | undefined): ProviderType | "";
+export declare function getKind(name: string): FileKindType;

package/dist/esm/utils/mentions.d.ts

@@ -0,0 +1,6 @@
+import { Decoration, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import { RangeSet } from "@codemirror/state";
+export declare const mentions: ViewPlugin<{
+    mentions: RangeSet<Decoration>;
+    update(update: ViewUpdate): void;
+}>;

package/dist/esm/utils/openUrl.d.ts

@@ -0,0 +1 @@
+export default function openUrl(url?: string, target?: string, name?: string, download?: boolean): void;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as _microsoft_signalr from '@microsoft/signalr';
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { Styles } from 'react-modal';
 
 declare class WeavyClient$1 {
@@ -19,6 +19,7 @@ declare class WeavyClient$1 {
     constructor(options: WeavyClientOptions);
     get(url: string, retry?: boolean): Promise<Response>;
     post(url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean): Promise<Response>;
+    upload(url: string, method: "POST" | "PUT" | "PATCH", body: string | FormData, contentType?: string, onProgress?: (progress: number) => void, retry?: boolean): Promise<Response>;
     getToken(refresh: boolean): Promise<string>;
     tokenFactoryInternal(refresh?: boolean, fromSR?: boolean): Promise<string>;
     subscribe(group: string, event: string, callback: any): Promise<void>;
@@ -61,6 +62,23 @@ interface ChatProps {
 
 declare const Chat: ({ uid, className }: ChatProps) => JSX.Element;
 
+interface PostsProps {
+    uid: string;
+    className?: string;
+}
+
+declare const Posts: ({ uid, className }: PostsProps) => JSX.Element;
+
+interface FilesProps {
+    uid: string;
+    className?: string;
+    view?: FileView;
+    order?: FileOrder;
+    trashed?: boolean;
+}
+
+declare const Files: ({ uid, className, view: initView, order: initOrder, trashed: initTrashed }: FilesProps) => 0 | JSX.Element | undefined;
+
 declare const UIButton: {
     UI: any;
 };
@@ -68,28 +86,52 @@ declare const UIButton: {
 declare type DropdownProps = {
     directionX?: "left" | "right";
     directionY?: "up" | "down";
+    icon?: string;
     children: React.ReactNode;
     className?: string;
+    title?: string;
+    buttonContent?: React.ReactNode;
+    disabled?: boolean;
+    noWrapper?: boolean;
     props?: React.HTMLAttributes<HTMLSpanElement>;
 };
 declare type ItemProps = {
     children: React.ReactNode;
     className?: string;
     onClick?: (e: any) => void;
+    active?: boolean;
     props?: React.HTMLAttributes<HTMLDivElement>;
 };
+declare type AnchorProps = {
+    children: React.ReactNode;
+    className?: string;
+    link?: string;
+    active?: boolean;
+    download?: boolean;
+    props?: React.HTMLAttributes<HTMLAnchorElement>;
+};
 declare const UIDropdown: {
-    UI: ({ directionX, directionY, children, className, ...props }: DropdownProps) => JSX.Element;
-    Item: ({ children, className, onClick, ...props }: ItemProps) => JSX.Element;
+    UI: ({ directionX, directionY, icon, children, className, title, buttonContent, disabled, noWrapper, ...props }: DropdownProps) => JSX.Element;
+    Item: ({ children, className, onClick, active, ...props }: ItemProps) => JSX.Element;
+    Anchor: ({ children, className, link, active, download, ...props }: AnchorProps) => JSX.Element;
+    Divider: () => JSX.Element;
 };
 
 declare type Props = {
     name: string;
     color?: string;
     size?: number;
+    title?: string;
+    className?: string;
+};
+declare type IconActiveStackProps = {
+    className?: string;
+    children: ReactNode;
 };
 declare const UIIcon: {
-    UI: ({ name, color, size, ...props }: Props) => JSX.Element;
+    UI: ({ name, color, size, className, title, ...props }: Props) => JSX.Element;
+    Raw: ({ name, color, size, className, title, ...props }: Props) => JSX.Element;
+    ActiveStack: ({ className, children }: IconActiveStackProps) => JSX.Element;
 };
 
 declare type OverlayProps = {
@@ -97,9 +139,11 @@ declare type OverlayProps = {
     className?: string;
     isOpen: boolean;
     style?: Styles;
+    closeOnEsc?: boolean;
+    onClose?: () => void;
 };
 declare const UIOverlay: {
-    UI: ({ children, className, isOpen, style }: OverlayProps) => JSX.Element;
+    UI: ({ children, className, isOpen, style, closeOnEsc, onClose }: OverlayProps) => JSX.Element;
 };
 
-export { UIButton as Button, Chat, _default as Conversation, ConversationBadge, ConversationList, UIDropdown as Dropdown, UIIcon as Icon, Messenger, MessengerContext, MessengerProvider, UIOverlay as Overlay, WeavyClient$1 as WeavyClient, WeavyContext, WeavyProvider };
+export { UIButton as Button, Chat, _default as Conversation, ConversationBadge, ConversationList, UIDropdown as Dropdown, Files, UIIcon as Icon, Messenger, MessengerContext, MessengerProvider, UIOverlay as Overlay, Posts, WeavyClient$1 as WeavyClient, WeavyContext, WeavyProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "14.0.4",
+  "version": "15.0.1",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",
@@ -42,15 +42,21 @@
     "watch-js": "rollup -c --watch"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.3.0",
+    "@codemirror/lang-markdown": "^6.0.4",
     "@mdi/js": "^6.9.96",
     "@mdi/react": "^1.6.0",
     "@microsoft/signalr": "^6.0.3",
+    "@popperjs/core": "^2.11.6",
+    "@uiw/react-codemirror": "^4.12.4",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.1",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "pdfjs-dist": "^2.16.105",
+    "pdfjs-dist": "^3.0.279",
+    "react-dropzone": "^14.2.3",
     "react-modal": "^3.14.4",
+    "react-popper": "^2.3.0",
     "react-query": "^3.34.16"
   },
   "engines": {

package/src/client/WeavyClient.ts

@@ -77,10 +77,44 @@ export default class WeavyClient {
                 return await this.post(url, method, body, contentType, false);
             }
 
-            console.error(`Error calling endpoint ${url}`, response)
+            //console.error(`Error calling endpoint ${url}`, response)
         }
 
         return response;
+    };
+
+
+    async upload (url: string, method: "POST" | "PUT" | "PATCH", body: string | FormData, contentType: string = "application/json", onProgress?: (progress: number) => void, retry: boolean = true) {
+        const client = this as WeavyClient;
+        const token = await client.tokenFactoryInternal();
+
+        return await new Promise<Response>(function (resolve, reject) {
+            // XMLHttpRequest instead of fetch because we want to track progress
+            let xhr = new XMLHttpRequest();
+            xhr.open(method, client.url + url, true);
+            xhr.setRequestHeader("Authorization", "Bearer " + token)
+            if (contentType !== ""){
+                xhr.setRequestHeader("content-type", contentType);
+            }
+            if (onProgress) {
+                xhr.upload.addEventListener("progress", (e: ProgressEvent<EventTarget>) => {
+                    onProgress((e.loaded / e.total) * 100 || 100)
+                })
+            }
+        
+            xhr.onload = (evt: ProgressEvent<EventTarget>) => {
+                if (retry && (xhr.status === 401 || xhr.status === 401)) {
+                    client.tokenFactoryInternal(true)
+                        .then(() => client.upload(url, method, body, contentType, onProgress, false))
+                        .then(resolve)
+                        .catch(reject);
+                } else {
+                    resolve(new Response(xhr.response, { status: xhr.status, statusText: xhr.statusText })); 
+                }
+            };
+            xhr.onerror = reject;
+            xhr.send(body);
+        });
     }
 
     async getToken(refresh: boolean) {        

package/src/components/Attachment.tsx

@@ -1,29 +1,36 @@
+import classNames from "classnames";
 import React from "react";
 import Icon from "../ui/Icon";
-import { fileSizeAsString, getIcon } from "../utils/fileUtilities";
+import { fileSizeAsString, getExtension, getIcon, getKind, getProvider } from "../utils/fileUtilities";
+import { toKebabCase } from "../utils/utils";
 
 type Props = {
     previewFormat: string,
-    url: string,
-    previewUrl: string,
+    url?: string,
+    previewUrl?: string,
     mediaType: string,
     name: string,
     kind: string,
-    size: number,
-    provider: string,
+    size?: number,
+    provider?: string,
     onClick?: (e: any) => void
 }
 
-const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider, onClick }: Props) => {
-    let fileSize = size > 0 ? fileSizeAsString(size) : null;
-    let { icon, color } = getIcon(name, mediaType)
+const Attachment = ({url, previewUrl, name,size, provider, onClick }: Props) => {
+    let fileSize = size && size > 0 ? fileSizeAsString(size) : null;
+    //let { icon, color } = getIcon(name, mediaType);
+    let ext = getExtension(name);
+    let { icon } = getIcon(name);
+    let kind = getKind(name);
+    let prov = getProvider(provider);
+
     return (
-        <a href={previewUrl || url} className="wy-item wy-item-hover wy-item-lg wy-attachment" target={"_blank"} title={name} onClick={onClick ? (e) => onClick(e) : undefined}>
-            <Icon.UI name={icon} color={color} size={2} />
-            <div className="wy-item-body wy-attachment-content">
-                <div className="wy-item-title wy-attachment-title">{name}</div>
+        <a href={previewUrl || url} className="wy-item wy-item-lg" target={"_blank"} title={name} onClick={onClick ? (e) => onClick(e) : undefined}>
+            <Icon.UI name={icon + (prov ? `+${prov}` : "")} size={2} className={classNames("wy-kind-" + toKebabCase(kind), "wy-ext-" + ext.substring(1))} />
+            <div className="wy-item-body ">
+                <div className="wy-item-title">{name}</div>
                 {fileSize &&
-                    <div className="wy-item-text wy-attachment-meta" title={fileSize}>{fileSize}</div>
+                    <div className="wy-item-text" title={fileSize}>{fileSize}</div>
                 }
             </div>
         </a>