@weavy/uikit-react 14.0.4 → 15.0.0

package/src/components/Embed.tsx

@@ -0,0 +1,80 @@
+import Icon from '../ui/Icon';
+import Button from '../ui/Button';
+import React from 'react';
+
+type Props = {
+    embed: EmbedType,
+    onRemove?: Function,
+    onSwap?: Function | null
+}
+
+const Embed = ({ embed, onRemove, onSwap }: Props) => {
+
+    const giphy = embed.type === "photo" && embed.provider_name.toLocaleLowerCase() === "giphy";
+    const caption = !embed.html && !giphy;
+
+    return (
+        <div className='wy-embed'>
+            <div className='wy-embed-actions'>
+                {onSwap &&
+                    <Button.UI title='Switch' onClick={onSwap}>
+                        <Icon.UI name="swap-horizontal" />
+                    </Button.UI>
+                }
+
+                {!onSwap &&
+                    <Button.UI className='wy-embed-cycle'></Button.UI>
+                }
+
+                {onRemove &&
+                    <Button.UI title='Remove' onClick={() => onRemove(embed.id)}>
+                        <Icon.UI name="close-circle" />
+                    </Button.UI>
+                }
+
+            </div >
+
+            {embed.type === "audio" &&
+                <div className='wy-embed-audio'></div>
+            }
+            {embed.type === "video" && embed.html &&
+                <div className='wy-embed-video'>
+                    <div dangerouslySetInnerHTML={{ __html: embed.html }}></div>
+                </div>
+            }
+            {embed.type === "rich" &&
+                <div className='wy-embed-rich'></div>
+            }
+            {embed.type === "photo" && embed.thumbnail_url &&
+                <div className={'wy-embed-photo' + ((embed.thumbnail_width || 0) < 250 ? 'wy-embed-photo-sm' : '')}>
+                    <a href={embed.original_url} target="_blank">
+                        <img src={embed.thumbnail_url} width={embed.thumbnail_width} height={embed.thumbnail_height} alt='' />
+                    </a>
+                </div>
+            }
+            {embed.type !== "audio" && embed.type !== "video" && embed.type !== "rich" && embed.type !== "photo" && embed.thumbnail_url &&
+                <div className={'wy-embed-photo' + ((embed.thumbnail_width || 0) < 250 ? 'wy-embed-photo-sm' : '')}>
+                    <a href={embed.original_url} target="_blank">
+                        <img src={embed.thumbnail_url} width={embed.thumbnail_width} height={embed.thumbnail_height} alt='' />
+                    </a>
+                </div>
+            }
+
+            {caption &&
+                <div className='wy-embed-caption'>
+                    <a className='wy-embed-link' href={embed.original_url} target='_blank'>{embed.host}</a>
+                    {embed.title &&
+                        <div className='wy-embed-title'>{embed.title}</div>
+                    }
+                    {embed.description &&
+                        <div className='wy-embed-description'>{embed.description}</div>
+                    }
+                </div>
+            }
+
+        </div >
+    )
+
+}
+
+export default Embed;

package/src/components/FileItem.tsx

@@ -0,0 +1,391 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import Icon from "../ui/Icon";
+import Dropdown from "../ui/Dropdown";
+import classNames from "classnames";
+import dayjs from 'dayjs';
+import { fileSizeAsString, getExtension, getIcon, isOfficeDocument } from "../utils/fileUtilities";
+import { toKebabCase } from "../utils/utils";
+import Spinner from "../ui/Spinner";
+import openUrl from "../utils/openUrl";
+
+type FileProps = {
+    file: FileType,
+    className?: string,
+    onClick?: (e: any) => void
+    onRename?: (name: string, file: FileType) => void,
+    isRenaming?: boolean,
+    onSubscribe?: (file: FileType) => void,
+    onUnsubscribe?: (file: FileType) => void,
+    onTrash?: (file: FileType) => void,
+    onRestore?: (file: FileType) => void,
+    onDeleteForever?: (file: FileType) => void,
+    onHandleError?: (file: FileType) => void,
+    statusText?: string,
+    title?: string,
+    children?: React.ReactNode
+}
+
+export const triggerDownload = (file: FileType) => {
+    openUrl(file.download_url, "_top", file.name, true);
+}
+
+export const triggerExternal = (file: FileType) => {
+    openUrl(file?.external_url, "_blank", file.name);
+}
+
+export const triggerApplication = (file: FileType) => {
+    // TODO: Change to webdav-url
+    openUrl(file?.application_url, "_top", file.name);
+}
+
+type FileMenuProps = {
+    file: FileType,
+    className?: string,
+    onRename?: (e: any) => void,
+    onSubscribe?: (e: any) => void,
+    onUnsubscribe?: (e: any) => void,
+    onTrash?: (e: any) => void,
+    onRestore?: (e: any) => void,
+    onDeleteForever?: (e: any) => void,
+    children?: ReactNode,
+    noWrapper?: boolean,
+    props?: React.HTMLAttributes<HTMLSpanElement>
+}
+
+export const FileMenu = ({ file, className, onRename, onSubscribe, onUnsubscribe, onTrash, onRestore, onDeleteForever, children, noWrapper, ...props }: FileMenuProps) => {
+    let { icon } = getIcon(file.name);
+
+    let isNotTemp = file.id >= 1;
+
+    return (
+        <Dropdown.UI directionX='left' className={className} disabled={file.status && file.status !== "ok"} noWrapper={noWrapper} {...props}>
+            {isNotTemp && file.is_trashed && <>
+                {onRestore && <Dropdown.Item onClick={onRestore}><Icon.UI name="delete-restore"/>Restore</Dropdown.Item>}
+                {onRestore && onDeleteForever && <Dropdown.Divider/>}
+                {onDeleteForever && <Dropdown.Item onClick={onDeleteForever}><Icon.UI name="delete-forever"/>Delete</Dropdown.Item>}
+            </>}
+            {!file.is_trashed && <>
+                {file.external_url ?
+                    <Dropdown.Item onClick={() => triggerExternal(file)}><Icon.UI name={icon} /> {`Open in ${file.provider}`}</Dropdown.Item>
+                : <>
+                    { file.application_url &&
+                        <Dropdown.Item onClick={() => triggerApplication(file)}><Icon.UI name={file.provider ? toKebabCase(file.provider) : icon } /> {`Open in ${file.provider || 'app'}`}</Dropdown.Item>
+                    }
+                    <Dropdown.Item onClick={() => triggerDownload(file)}><Icon.UI name="download" size={1} /> Download</Dropdown.Item>
+                </>}
+                {isNotTemp && <>
+                    {onRename && <Dropdown.Item onClick={onRename}><Icon.UI name="textbox" size={1} /> Rename</Dropdown.Item>}
+                    {!file.is_subscribed && onSubscribe && <Dropdown.Item onClick={onSubscribe}><Icon.UI name="bell" size={1} /> Subscribe</Dropdown.Item>}
+                    {file.is_subscribed && onUnsubscribe && <Dropdown.Item onClick={onUnsubscribe}><Icon.UI name="bell-off" size={1} /> Unsubscribe</Dropdown.Item>}
+                    {onTrash && <>
+                        <Dropdown.Divider/>
+                        <Dropdown.Item onClick={onTrash}><Icon.UI name="delete" size={1} /> Trash</Dropdown.Item>
+                    </>}
+                </>}
+            </>}
+            {children}
+        </Dropdown.UI>
+    );
+}
+
+/* Blocks click for a while */
+const clickBlock = (callback: React.EventHandler<React.SyntheticEvent>) => {
+    return (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        
+        const onClickBlock = (e: Event) => {
+            console.log("Blocked event", e.type);
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+
+        // Disable any click for a short while
+        document.addEventListener("click", onClickBlock, { once: true, capture: true})
+
+        setTimeout(() => {
+            document.removeEventListener("click", onClickBlock, { capture: true})
+        }, 500); 
+
+        return callback(e);
+    }
+}
+
+const FileRow = ({ file, className, onClick, onRename, isRenaming, onSubscribe, onUnsubscribe, onTrash, onRestore, onDeleteForever, onHandleError, statusText, title, children }: FileProps) => {
+    const [renaming, setRenaming] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (isRenaming !== undefined) {
+            setRenaming(isRenaming);
+        }
+    }, [isRenaming]);
+
+    let fileSize = file.size && file.size > 0 ? fileSizeAsString(file.size) : null;
+    const fileChangedAt = file.modified_at || file.created_at;
+    const fileDate = dayjs.utc(fileChangedAt).tz(dayjs.tz.guess());
+
+    let { icon } = getIcon(file.name);
+    let ext = getExtension(file.name);
+
+    const onClickWrapper = (e: React.MouseEvent) => {
+        if (!e.defaultPrevented) {
+            if (onHandleError && (file.status === "conflict" || file.status === "error")) {
+                onHandleError(file);
+            } else if (onClick) {
+                onClick(e);
+            }
+        }
+    }
+
+    const handleRename = (e: React.SyntheticEvent) => {
+        let renameTarget = e.target as HTMLInputElement;
+        if (renameTarget.value && renameTarget.value !== file.name) {
+            onRename!(renameTarget.value, file);
+        }
+        setRenaming(false);
+    };
+
+    const handleRenameKey = (e: any) => { 
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.target.value = file.name;
+            e.target.blur();
+        } else if(e.key === "Enter") {
+            e.preventDefault();
+            handleRename(e);
+        }
+    };
+
+
+    return (
+        <tr className={classNames({ "wy-table-trashed": file.is_trashed }, className)} onClick={onClickWrapper} title={title}>
+            <td className="wy-table-cell-icon">{
+                file.status === "error" ? <Icon.UI name="alert-octagon" color="error" size={1} title={file.statusText || statusText} /> :
+                file.status === "conflict" ? <Icon.UI name="alert" color="yellow" size={1} title={file.statusText || statusText} /> :
+                file.status === "pending" ? <Spinner.UI spin={!file.progress} progress={file.progress} /> :
+                <Icon.UI name={icon} size={1} className={classNames("wy-kind-" + toKebabCase(file.kind), "wy-ext-" + ext.substring(1))} />
+            }</td>
+            <td>{renaming && onRename ? <>
+                <input 
+                    type="text"
+                    maxLength={256}
+                    className="wy-input" 
+                    defaultValue={file.name} 
+                    onBlur={clickBlock(handleRename)} 
+                    onKeyUp={handleRenameKey}
+                    onClick={(e: any) => e.preventDefault()} 
+                    onFocus={(e: any) => {
+                        const i = e.target.value.lastIndexOf(".");
+                        if (i === -1) {
+                            e.target.select();
+                          } else {
+                            e.target.setSelectionRange(0, i);
+                          }                            
+                    }} 
+                    autoFocus />
+                </> 
+                : 
+                <>
+                    <span title={file.name + ((statusText || file.statusText) ? `: ${statusText || file.statusText}` : '')}>{file.name}{(statusText || file.statusText) && <>: <em>{statusText || file.statusText}</em></>}</span>
+                </>
+            }</td>
+            <td><time dateTime={fileChangedAt} title={fileDate.format('LLLL')}>{fileDate.format('l')}</time></td>
+            <td><span>{file.kind}</span></td>
+            <td><span>{fileSize}</span></td>
+            <td className="wy-table-cell-icon">
+                {children || <>
+                    <FileMenu 
+                        file={file} 
+                        onRename={onRename ? () => setRenaming(true) : undefined} 
+                        onSubscribe={onSubscribe?.bind(FileRow, file)}
+                        onUnsubscribe={onUnsubscribe?.bind(FileRow, file)}
+                        onTrash={onTrash?.bind(FileRow, file)}
+                        onRestore={onRestore?.bind(FileRow, file)}
+                        onDeleteForever={onDeleteForever?.bind(FileRow, file)}
+                        noWrapper={true}
+                    /> 
+                </>}
+            </td>
+        </tr>
+    )
+}
+
+const FileCard = ({ file, className, onClick, onRename, isRenaming, onSubscribe, onUnsubscribe, onTrash, onRestore, onDeleteForever, onHandleError, statusText, title, children }: FileProps) => {
+    const [renaming, setRenaming] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (isRenaming !== undefined) {
+            setRenaming(isRenaming);
+        }
+    }, [isRenaming]);
+
+    let { icon } = getIcon(file.name);
+    let ext = getExtension(file.name);
+
+    const onClickWrapper = (e: React.MouseEvent) => {
+        if (!e.defaultPrevented && !renaming) {
+            if (onHandleError && (file.status === "conflict" || file.status === "error")) {
+                onHandleError(file);
+            } else if (onClick) {
+                onClick(e);
+            }
+        }
+    }
+
+    const handleRename = (e: React.SyntheticEvent) => {
+        let renameTarget = e.target as HTMLInputElement;
+        if (renameTarget.value && renameTarget.value !== file.name) {
+            onRename!(renameTarget.value, file);
+        }
+        setRenaming(false);
+    };
+
+    const handleRenameKey = (e: any) => { 
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.target.value = file.name;
+            e.target.blur();
+        } else if(e.key === "Enter") {
+            e.preventDefault();
+            handleRename(e);
+        }
+    };
+
+    return (
+        <div className={classNames("wy-card", { "wy-card-trashed": file.is_trashed, "wy-card-hover": onClick && !file.is_trashed && !renaming }, className)} onClick={onClickWrapper} title={title}>
+            <div className="wy-card-actions">
+                {
+                    file.status === "error" && <Icon.UI name="alert-octagon" color="error" size={1} title={file.statusText || statusText} /> ||
+                    file.status === "conflict" && <Icon.UI name="alert" color="yellow" size={1} title={file.statusText || statusText} /> ||
+                    file.status === "pending" && <Spinner.UI spin={!file.progress} progress={file.progress} />
+                }
+                {children || <>
+                    <FileMenu 
+                        file={file} 
+                        onRename={onRename ? () => setRenaming(true) : undefined} 
+                        onSubscribe={onSubscribe?.bind(FileRow, file)}
+                        onUnsubscribe={onUnsubscribe?.bind(FileRow, file)}
+                        onTrash={onTrash?.bind(FileRow, file)}
+                        onRestore={onRestore?.bind(FileRow, file)}
+                        onDeleteForever={onDeleteForever?.bind(FileRow, file)}
+                    /> 
+                </>}
+            </div>
+            {!file.is_trashed && file.thumbnail_url &&
+                <img className={classNames("wy-card-top wy-card-content", {"wy-card-top-image": file.kind === "image"})} src={file.thumbnail_url} loading="lazy" />
+            ||
+                <div className="wy-content-icon wy-card-top wy-card-content">
+                    <Icon.UI name={icon} size={4/1.5} className={classNames("wy-kind-" + toKebabCase(file.kind), "wy-ext-" + ext.substring(1))} />
+                </div>
+            }
+            <div className="wy-card-label wy-card-content wy-filename">
+                {renaming && onRename ? <>
+                    <input 
+                        type="text"
+                        maxLength={256}
+                        className="wy-input" 
+                        defaultValue={file.name} 
+                        onBlur={clickBlock(handleRename)} 
+                        onKeyUp={handleRenameKey}
+                        onClick={(e: any) => e.preventDefault()} 
+                        onFocus={(e: any) => {
+                            const i = e.target.value.lastIndexOf(".");
+                            if (i === -1) {
+                                e.target.select();
+                              } else {
+                                e.target.setSelectionRange(0, i);
+                              }                            
+                        }} 
+                        autoFocus />
+                </> : <span title={file.name + ((statusText || file.statusText) ? `: ${statusText || file.statusText}` : '')}>{file.name}{(statusText || file.statusText) && <>: <em>{statusText || file.statusText}</em></>}</span>}
+            </div>
+        </div>
+
+    )
+}
+
+const FileItem = ({ file, className, onClick, onRename, isRenaming, onSubscribe, onUnsubscribe, onTrash, onRestore, onDeleteForever, onHandleError, statusText, title, children }: FileProps) => {
+    const [renaming, setRenaming] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (isRenaming !== undefined) {
+            setRenaming(isRenaming);
+        }
+    }, [isRenaming]);
+
+    let { icon } = getIcon(file.name);
+    let ext = getExtension(file.name);
+
+    const onClickWrapper = (e: React.MouseEvent) => {
+        if (!e.defaultPrevented && !renaming) {
+            if (onHandleError && (file.status === "conflict" || file.status === "error")) {
+                onHandleError(file);
+            } else if (onClick) {
+                onClick(e);
+            }
+        }
+    }
+
+    const handleRename = (e: React.SyntheticEvent) => {
+        let renameTarget = e.target as HTMLInputElement;
+        if (renameTarget.value && renameTarget.value !== file.name) {
+            onRename!(renameTarget.value, file);
+        }
+        setRenaming(false);
+    };
+
+    const handleRenameKey = (e: any) => { 
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.target.value = file.name;
+            e.target.blur();
+        } else if(e.key === "Enter") {
+            e.preventDefault();
+            handleRename(e);
+        }
+    };
+
+    return (
+        <div className={classNames("wy-item", { "wy-item-trashed": file.is_trashed, "wy-item-hover": onClick && !file.is_trashed && !renaming }, className)} onClick={onClickWrapper} title={title}>
+            {
+                file.status === "error" ? <Icon.UI name="alert-octagon" color="error" size={1} title={file.statusText || statusText} /> :
+                file.status === "conflict" ? <Icon.UI name="alert" color="yellow" size={1} title={file.statusText || statusText} /> :
+                file.status === "pending" ? <Spinner.UI spin={!file.progress} progress={file.progress} /> :
+                <Icon.UI name={icon} size={1} className={classNames("wy-kind-" + toKebabCase(file.kind), "wy-ext-" + ext.substring(1))} />
+            }
+            <div className="wy-item-body">
+                {renaming && onRename ? <>
+                    <input 
+                        type="text"
+                        maxLength={256}
+                        className="wy-input" 
+                        defaultValue={file.name} 
+                        onBlur={clickBlock(handleRename)} 
+                        onKeyUp={handleRenameKey}
+                        onClick={(e: any) => e.preventDefault()} 
+                        onFocus={(e: any) =>  {
+                            const i = e.target.value.lastIndexOf(".");
+                            if (i === -1) {
+                                e.target.select();
+                              } else {
+                                e.target.setSelectionRange(0, i);
+                              }                            
+                        }} 
+                        autoFocus />
+                </> : <span title={file.name + ((statusText || file.statusText) ? `: ${statusText || file.statusText}` : '')}>{file.name}{(statusText || file.statusText) && <>: <em>{statusText || file.statusText}</em></>}</span> }
+            </div>
+            {children || <>
+                <FileMenu 
+                    file={file} 
+                    onRename={onRename ? () => setRenaming(true) : undefined} 
+                    onSubscribe={onSubscribe?.bind(FileRow, file)}
+                    onUnsubscribe={onUnsubscribe?.bind(FileRow, file)}
+                    onTrash={onTrash?.bind(FileRow, file)}
+                    onRestore={onRestore?.bind(FileRow, file)}
+                    onDeleteForever={onDeleteForever?.bind(FileRow, file)}
+                /> 
+            </>}
+        </div>
+    )
+}
+
+export default { Row: FileRow, Card: FileCard, Item: FileItem, Menu: FileMenu };

package/src/components/FileList.tsx

@@ -0,0 +1,166 @@
+import React, { useContext, useEffect, useState } from 'react';
+import useFileList from '../hooks/useFileList';
+import useInfiniteScroll from '../hooks/useInfiniteScroll';
+import FileItem from './FileItem';
+import Button from '../ui/Button';
+import useMutateFileRename from '../hooks/useMutateFileRename';
+import { useMutateFileDeleteForever, useMutateFileRestore, useMutateFileTrash } from '../hooks/useMutateFileTrash';
+import { useMutateFileSubscribe, useMutateFileUnsubscribe } from '../hooks/useMutateFileSubscribe';
+import Spinner from '../ui/Spinner';
+import Icon from '../ui/Icon';
+import PreviewFiles from './PreviewFiles';
+
+type Props = {
+    appId: number,
+    view?: FileView,
+    order?: FileOrder,
+    trashed?: boolean,
+    onSorting?: (order: FileOrder) => void,
+    onHandleError?: (file: FileType) => void
+}
+
+const FileList = ({ appId, view = "list", order, trashed = false, onSorting, onHandleError }: Props) => {
+    
+    const infiniteFiles = useFileList(appId, { meta: { order: order, trashed: trashed }});
+    const { isLoading, data, fetchNextPage, hasNextPage, isFetchingNextPage, remove: resetInfiniteFiles } = infiniteFiles;
+
+    const [currentPreview, setCurrentPreview] = useState<number>();
+
+    const openPreview = (previewId: number) => {
+        setCurrentPreview(previewId);
+    }
+
+    const onClosePreview = () => {
+        setCurrentPreview(undefined);
+    }
+
+    // Reset query when unmounted
+    useEffect(() => () => resetInfiniteFiles(), []);
+
+    const loadMoreRef = useInfiniteScroll(infiniteFiles, [view])
+
+    const mutateFileRename = useMutateFileRename(["files", appId]);
+    const mutateFileTrash = useMutateFileTrash(["files", appId]);
+    const mutateFileDeleteForever = useMutateFileDeleteForever(["files", appId]);
+    const mutateFileRestore = useMutateFileRestore(["files", appId]);
+    const mutateFileSubscribe = useMutateFileSubscribe(["files", appId])
+    const mutateFileUnsubscribe = useMutateFileUnsubscribe(["files", appId])
+
+    if (isLoading) {
+        return (
+            <Spinner.UI spin={true} overlay={true} />
+        )
+    }
+
+    let loadMoreButton = <Button.UI onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} className="wy-message-readmore">Load more</Button.UI>;
+
+    if (view == "grid") {
+        return (
+            <>
+
+            <div className="wy-grid wy-pane-group">
+                {data && data.pages && data.pages.map((group: any, i: number) => {
+                    return <React.Fragment key={i}>
+                        {
+                            group.data?.map((file: FileType) => {
+
+                                return <FileItem.Card
+                                    key={'file-card' + file.id}
+                                    file={file}
+                                    onClick={(e: any) => !file.is_trashed && openPreview(file.id)}
+                                    onRename={(name: string) => mutateFileRename.mutateAsync({ file: file, name: name})}
+                                    onSubscribe={(file: FileType) => mutateFileSubscribe.mutateAsync({ file: file })}
+                                    onUnsubscribe={(file: FileType) => mutateFileUnsubscribe.mutateAsync({ file: file })}
+                                    onTrash={(file: FileType) => mutateFileTrash.mutateAsync({ file: file })}
+                                    onRestore={(file: FileType) => mutateFileRestore.mutateAsync({ file: file })}
+                                    onDeleteForever={(file: FileType) => mutateFileDeleteForever.mutateAsync({ file: file })}
+                                    onHandleError={onHandleError}
+                                />
+                            })
+                        }
+                    </React.Fragment>
+               })}
+
+                <div className="wy-pager" ref={loadMoreRef}>
+                        {isFetchingNextPage
+                            ? 'Loading more...'
+                            : hasNextPage
+                                ? loadMoreButton
+                                : ""}
+                </div>
+            </div>
+            <PreviewFiles appId={appId} infiniteFiles={infiniteFiles} previewId={currentPreview} onClose={onClosePreview} />
+            </>
+        );
+    }
+
+    const headers: ({ by: FileOrderBy | undefined, title: string  })[] = [
+        { by: "name", title: "Name" },
+        { by: "modified_at", title: "Modified" },
+        { by: undefined, title: "Kind" },
+        { by: "size", title: "Size" }
+    ]
+
+    return (
+        <>
+        <table className="wy-table wy-table-hover wy-table-files">
+                <thead>
+                <tr>
+                    <th className="wy-table-cell-icon"></th>
+                    {headers.map((header) => {
+                        let active = header.by === order?.by;
+                        let onHeaderClick = (e: any) => {
+                            e.preventDefault();
+                            header.by && onSorting && onSorting({ by: header.by, descending: active && !order?.descending });
+                        }
+                        return <th key={"files-header" + header.title}>{header.by ?
+                            <div className={"wy-table-sort-link"} onClick={onHeaderClick}>{header.title} {active && <Icon.UI name={order?.descending ? "menu-down" : "menu-up"} />}</div>
+                        :
+                            <>{header.title}</>
+                        }</th>
+                    })}
+                    <th className="wy-table-cell-icon"></th>
+                </tr>
+                </thead>
+            <tbody>
+                {data && data.pages && data.pages.map((group: any, i: number) => {
+                    return <React.Fragment key={i}>
+                        {
+                            group.data?.map((file: FileType) => {
+
+                                return <FileItem.Row
+                                    key={'file-row' + file.id}
+                                    file={file}
+                                    onClick={(e: any) => !file.is_trashed && openPreview(file.id)}
+                                    onRename={(name: string) => mutateFileRename.mutateAsync({ file: file, name: name})}
+                                    onSubscribe={(file: FileType) => mutateFileSubscribe.mutateAsync({ file: file })}
+                                    onUnsubscribe={(file: FileType) => mutateFileUnsubscribe.mutateAsync({ file: file })}
+                                    onTrash={(file: FileType) => mutateFileTrash.mutateAsync({ file: file })}
+                                    onRestore={(file: FileType) => mutateFileRestore.mutateAsync({ file: file })}
+                                    onDeleteForever={(file: FileType) => mutateFileDeleteForever.mutateAsync({ file: file })}
+                                    onHandleError={onHandleError}
+                                />
+                            })
+                        }
+                    </React.Fragment>
+               })}
+
+
+                <tr className="wy-pager" ref={loadMoreRef}>
+                    <td colSpan={6}>
+                        {isFetchingNextPage
+                            ? 'Loading more...'
+                            : hasNextPage
+                                ? loadMoreButton
+                                : ""}
+                    </td>
+                </tr>
+    
+            </tbody>
+        </table>
+        <PreviewFiles appId={appId} infiniteFiles={infiniteFiles} previewId={currentPreview} onClose={onClosePreview} />
+        </>
+     )
+}
+
+export default FileList;