From 3c35f89f75e61b77d79b4572ea6f9377801e9b30 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Wed, 12 May 2021 00:00:56 +0200 Subject: [PATCH 01/10] wire up bulk dnd --- packages/files-ui/package.json | 4 +- .../views/FileSystemItem/FileSystemItem.tsx | 32 ++++++----- .../FileBrowsers/views/FilesTable.view.tsx | 15 ++++-- packages/files-ui/src/Contexts/DnDContext.tsx | 22 +++----- yarn.lock | 53 +++++++++---------- 5 files changed, 64 insertions(+), 62 deletions(-) diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index 54a97f62b4..dad18fbfdb 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -27,8 +27,8 @@ "mime-matcher": "^1.0.5", "react": "^16.14.0", "react-beforeunload": "^2.4.0", - "react-dnd": "^11.1.3", - "react-dnd-html5-backend": "^11.1.3", + "react-dnd": "14.0.2", + "react-dnd-html5-backend": "14.0.0", "react-dom": "^16.14.0", "react-h5-audio-player": "^3.5.0", "react-hotkeys-hook": "^2.4.0", diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx index fcbb0eb5f5..2dd7ff3327 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx @@ -271,22 +271,30 @@ const FileSystemItemRow: React.FC = ({ (itemOperation) => allMenuItems[itemOperation] ) - const [, dragMoveRef, preview] = useDrag({ - item: { type: DragTypes.MOVABLE_FILE, payload: file } - }) + const [, dragMoveRef, preview] = useDrag(() => + ({ type: DragTypes.MOVABLE_FILE, + item: () => { + if (selected.includes(file.cid)) { + return { ids: selected } + } else { + return { ids: [...selected, file.cid] } + } + } + }), [selected]) const [{ isOverMove }, dropMoveRef] = useDrop({ accept: DragTypes.MOVABLE_FILE, canDrop: () => isFolder, - drop: async (item: { - type: typeof DragTypes.MOVABLE_FILE - payload: FileSystemItem - }) => { - handleMove && - (await handleMove( - `${currentPath}${item.payload.name}`, - `${currentPath}${name}/${item.payload.name}` - )) + drop: async (item: {ids: string[]}) => { + console.log(item) + item?.ids?.map((cid) => { + const fileToMove = files.find(f => f.cid === cid) + handleMove && fileToMove && + handleMove( + `${currentPath}${fileToMove.name}`, + `${currentPath}${name}/${fileToMove.name}` + ) + }) }, collect: (monitor) => ({ isOverMove: monitor.isOver() diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx index 056d2a33e1..017aac5979 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx @@ -309,6 +309,8 @@ const FilesTableView = ({ const [selectedCids, setSelectedCids] = useState([]) const [previewFileIndex, setPreviewFileIndex] = useState() const { selectedLocale } = useLanguageContext() + const { redirect } = useHistory() + const items: FileSystemItem[] = useMemo(() => { let temp = [] @@ -340,8 +342,6 @@ const FilesTableView = ({ : temp.sort(sortFoldersFirst) }, [sourceFiles, direction, column, selectedLocale]) - const { redirect } = useHistory() - const files = useMemo(() => items.filter((i) => !i.isFolder), [items]) const selectedFiles = useMemo( @@ -399,13 +399,13 @@ const FilesTableView = ({ [selectedCids] ) - const toggleAll = () => { + const toggleAll = useCallback(() => { if (selectedCids.length === items.length) { setSelectedCids([]) } else { setSelectedCids([...items.map((file: FileSystemItem) => file.cid)]) } - } + }, [setSelectedCids, items, selectedCids]) const invalidFilenameRegex = new RegExp("/") const renameSchema = object().shape({ @@ -452,6 +452,7 @@ const FilesTableView = ({ // Bulk operations const [validBulkOps, setValidBulkOps] = useState([]) + useEffect(() => { if (bulkOperations) { let filteredList: FileOperation[] = [ @@ -507,6 +508,8 @@ const FilesTableView = ({ } }, [selectedCids, items, bulkOperations]) + + const handleDeleteFiles = useCallback(() => { if (!deleteFiles) return @@ -548,6 +551,10 @@ const FilesTableView = ({ setSelectedCids([]) }, []) + useEffect(() => { + resetSelectedCids() + }, [currentPath, resetSelectedCids]) + const onHideSurveyBanner = useCallback(() => { setIsSurveyBannerVisible(false) }, [setIsSurveyBannerVisible]) diff --git a/packages/files-ui/src/Contexts/DnDContext.tsx b/packages/files-ui/src/Contexts/DnDContext.tsx index c30e9eb943..3e2e5b4a13 100644 --- a/packages/files-ui/src/Contexts/DnDContext.tsx +++ b/packages/files-ui/src/Contexts/DnDContext.tsx @@ -1,19 +1,11 @@ -import { createDndContext, DndContextType, DndProvider } from "react-dnd" +import { DndProvider } from "react-dnd" import { HTML5Backend } from "react-dnd-html5-backend" -import React, { useRef } from "react" +import React from "react" -const RNDContext = createDndContext(HTML5Backend) - -const DragAndDrop: React.FC = ({ children }) => { - const manager = useRef(RNDContext) - if (manager.current?.dragDropManager) { - return ( - - {children} - - ) - } - return <>{children} -} +const DragAndDrop: React.FC = ({ children }) => ( + + {children} + +) export default DragAndDrop diff --git a/yarn.lock b/yarn.lock index 56a9574ebc..e676a4e4ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4360,7 +4360,7 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.7.tgz#613957d900fab9ff84c8dfb24fa3eef0c2a40896" integrity sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg== -"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1": +"@types/hoist-non-react-statics@*": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -8970,14 +8970,14 @@ dir-glob@^3.0.1: dependencies: path-type "^4.0.0" -dnd-core@^11.1.3: - version "11.1.3" - resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-11.1.3.tgz#f92099ba7245e49729d2433157031a6267afcc98" - integrity sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA== +dnd-core@14.0.0: + version "14.0.0" + resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-14.0.0.tgz#973ab3470d0a9ac5a0fa9021c4feba93ad12347d" + integrity sha512-wTDYKyjSqWuYw3ZG0GJ7k+UIfzxTNoZLjDrut37PbcPGNfwhlKYlPUqjAKUjOOv80izshUiqusaKgJPItXSevA== dependencies: "@react-dnd/asap" "^4.0.0" "@react-dnd/invariant" "^2.0.0" - redux "^4.0.4" + redux "^4.0.5" dns-equal@^1.0.0: version "1.0.0" @@ -17088,22 +17088,23 @@ react-dev-utils@^9.0.0: strip-ansi "5.2.0" text-table "0.2.0" -react-dnd-html5-backend@^11.1.3: - version "11.1.3" - resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz#2749f04f416ec230ea193f5c1fbea2de7dffb8f7" - integrity sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw== +react-dnd-html5-backend@14.0.0: + version "14.0.0" + resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.0.tgz#28d660a2ad1e07447c34a65cd25f7de8f1657194" + integrity sha512-2wAQqRFC1hbRGmk6+dKhOXsyQQOn3cN8PSZyOUeOun9J8t3tjZ7PS2+aFu7CVu2ujMDwTJR3VTwZh8pj2kCv7g== dependencies: - dnd-core "^11.1.3" + dnd-core "14.0.0" -react-dnd@^11.1.3: - version "11.1.3" - resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-11.1.3.tgz#f9844f5699ccc55dfc81462c2c19f726e670c1af" - integrity sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ== +react-dnd@14.0.2: + version "14.0.2" + resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-14.0.2.tgz#57266baec92b887301f81fa3b77f87168d159733" + integrity sha512-JoEL78sBCg8SzjOKMlkR70GWaPORudhWuTNqJ56lb2P8Vq0eM2+er3ZrMGiSDhOmzaRPuA9SNBz46nHCrjn11A== dependencies: + "@react-dnd/invariant" "^2.0.0" "@react-dnd/shallowequal" "^2.0.0" - "@types/hoist-non-react-statics" "^3.3.1" - dnd-core "^11.1.3" - hoist-non-react-statics "^3.3.0" + dnd-core "14.0.0" + fast-deep-equal "^3.1.3" + hoist-non-react-statics "^3.3.2" react-docgen@^5.0.0: version "5.3.0" @@ -17668,13 +17669,12 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" -redux@^4.0.4: - version "4.0.5" - resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" - integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w== +redux@^4.0.5: + version "4.1.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4" + integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g== dependencies: - loose-envify "^1.4.0" - symbol-observable "^1.2.0" + "@babel/runtime" "^7.9.2" refractor@^2.4.1: version "2.10.1" @@ -19408,11 +19408,6 @@ svgo@^1.0.0, svgo@^1.2.2: unquote "~1.1.1" util.promisify "~1.0.0" -symbol-observable@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" - integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== - symbol-tree@^3.2.2: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" From 859527c3bae2ffd6a2a3c38fa3aa62d86b1de07a Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Wed, 12 May 2021 14:05:43 +0200 Subject: [PATCH 02/10] fix grid view navigation --- .../views/FileSystemItem/FileSystemTableItem.tsx | 2 +- .../Modules/FileBrowsers/views/FilesTable.view.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx index b2c97fdd88..e758594f34 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx @@ -224,7 +224,7 @@ function FileSystemTableItem({ <> { - created_at && dayjs.unix(created_at).format("DD MMM YYYY h:mm a") + !isFolder && created_at && dayjs.unix(created_at).format("DD MMM YYYY h:mm a") } diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx index 017aac5979..5fffb08b5d 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx @@ -552,17 +552,16 @@ const FilesTableView = ({ }, []) useEffect(() => { - resetSelectedCids() - }, [currentPath, resetSelectedCids]) + setSelectedCids([]) + }, [currentPath]) const onHideSurveyBanner = useCallback(() => { setIsSurveyBannerVisible(false) }, [setIsSurveyBannerVisible]) const handleViewFolder = useCallback((cid: string) => { - resetSelectedCids() viewFolder && viewFolder(cid) - }, [viewFolder, resetSelectedCids]) + }, [viewFolder]) return (
{ From f0808faebaa92af1524d294bdab27b61f92c2212 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 13 May 2021 01:29:50 +0200 Subject: [PATCH 03/10] fix custom preview --- .../FileBrowsers/views/DragPreviewLayer.tsx | 61 +++++++++++++++++++ .../views/FileSystemItem/FileSystemItem.tsx | 17 +++++- .../FileBrowsers/views/FilesTable.view.tsx | 2 + packages/files-ui/src/Utils/pathUtils.ts | 1 - yarn.lock | 5 ++ 5 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx new file mode 100644 index 0000000000..b95930e7d8 --- /dev/null +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx @@ -0,0 +1,61 @@ +import { makeStyles } from "@chainsafe/common-theme" +import React from "react" +import { useDragLayer, XYCoord } from "react-dnd" +import { FileSystemItem } from "../../../../Contexts/DriveContext" +import { DragTypes } from "../DragConstants" + +const useStyles = makeStyles(() => ({ + previewDragLayer: { + position: "fixed", + pointerEvents: "none", + zIndex: 100, + left: 0, + top: 0, + bottom: 0, + right: 0 + } +})) + +export const DragPreviewLayer: React.FC<{items: FileSystemItem[]}> = ({ items }) => { + const classes = useStyles() + const { isDragging, dragItems, itemType, initialOffset, currentOffset } = useDragLayer(monitor => ({ + itemType: monitor.getItemType(), + dragItems: monitor.getItem() as {ids: string[]}, + isDragging: monitor.isDragging(), + initialOffset: monitor.getInitialSourceClientOffset(), + currentOffset: monitor.getSourceClientOffset() + })) + + const getItemStyles = (currentOffset: XYCoord | null) => { + if (!currentOffset) { + return { + display: "none" + } + } + console.log(initialOffset) + const { x, y } = currentOffset + + const transform = `translate(${x}px, ${y}px)` + return { + transform, + WebkitTransform: transform + } + } + + return (!isDragging || itemType !== DragTypes.MOVABLE_FILE) + ? null + :
+
    + {dragItems.ids.map(di => { + const previewItem = items.find(i => i.cid === di) + if (previewItem) { + return ( +
  • + {previewItem?.name} +
    • + )} else { + return null + }})} +
+
+} \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx index 2dd7ff3327..e2f22fb257 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from "react" +import React, { useCallback, useEffect } from "react" import { FormikTextInput, Typography, @@ -25,7 +25,7 @@ import CustomModal from "../../../../Elements/CustomModal" import { Trans } from "@lingui/macro" import { useDrag, useDrop } from "react-dnd" import { DragTypes } from "../../DragConstants" -import { NativeTypes } from "react-dnd-html5-backend" +import { getEmptyImage, NativeTypes } from "react-dnd-html5-backend" import { BrowserView, FileOperation } from "../../types" import { CSFTheme } from "../../../../../Themes/types" import FileItemTableItem from "./FileSystemTableItem" @@ -282,11 +282,22 @@ const FileSystemItemRow: React.FC = ({ } }), [selected]) + useEffect(() => { + // This gets called after every render, by default + + // Use empty image as a drag preview so browsers don't draw it + // and we can draw whatever we want on the custom drag layer instead. + preview(getEmptyImage(), { + // IE fallback: specify that we'd rather screenshot the node + // when it already knows it's being dragged so we can hide it with CSS. + captureDraggingState: true + }) + }) + const [{ isOverMove }, dropMoveRef] = useDrop({ accept: DragTypes.MOVABLE_FILE, canDrop: () => isFolder, drop: async (item: {ids: string[]}) => { - console.log(item) item?.ids?.map((cid) => { const fileToMove = files.find(f => f.cid === cid) handleMove && fileToMove && diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx index b0e6c756b6..490126e64e 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx @@ -48,6 +48,7 @@ import MimeMatcher from "../../../../Utils/MimeMatcher" import { useLanguageContext } from "../../../../Contexts/LanguageContext" import { getPathWithFile } from "../../../../Utils/pathUtils" import SurveyBanner from "../../../SurveyBanner" +import { DragPreviewLayer } from "./DragPreviewLayer" interface IStyleProps { themeKey: string @@ -593,6 +594,7 @@ const FilesTableView = ({ Drop to upload files +
{crumbs && moduleRootPath ? ( Date: Thu, 13 May 2021 17:43:56 +0200 Subject: [PATCH 04/10] add proper table and grid previews --- .../FileBrowsers/views/DragPreviewLayer.tsx | 248 ++++++++++++++++-- .../FileBrowsers/views/FilesTable.view.tsx | 3 +- 2 files changed, 232 insertions(+), 19 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx index b95930e7d8..8e90a17b1b 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx @@ -1,22 +1,217 @@ -import { makeStyles } from "@chainsafe/common-theme" +import { FolderFilledSvg, FileImageSvg, FilePdfSvg, FileTextSvg, formatBytes, + MenuDropdown, MoreIcon, TableCell, TableRow, Typography } from "@chainsafe/common-components" +import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" +import clsx from "clsx" +import dayjs from "dayjs" import React from "react" import { useDragLayer, XYCoord } from "react-dnd" import { FileSystemItem } from "../../../../Contexts/DriveContext" +import { CSFTheme } from "../../../../Themes/types" import { DragTypes } from "../DragConstants" +import { BrowserView } from "../types" -const useStyles = makeStyles(() => ({ - previewDragLayer: { - position: "fixed", - pointerEvents: "none", - zIndex: 100, - left: 0, - top: 0, - bottom: 0, - right: 0 - } -})) +const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => { + const desktopGridSettings = "50px 69px 3fr 190px 100px 45px !important" + const mobileGridSettings = "69px 3fr 45px !important" -export const DragPreviewLayer: React.FC<{items: FileSystemItem[]}> = ({ items }) => { + return createStyles({ + tableRow: { + border: "2px solid transparent", + [breakpoints.up("md")]: { + gridTemplateColumns: desktopGridSettings + }, + [breakpoints.down("md")]: { + gridTemplateColumns: mobileGridSettings + }, + "&.droppable": { + border: `2px solid ${palette.additional["geekblue"][6]}` + } + }, + fileIcon: { + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + "& svg": { + width: constants.generalUnit * 2.5, + fill: constants.fileSystemItemRow.icon + } + }, + folderIcon: { + "& svg": { + fill: palette.additional.gray[9] + } + }, + filename: { + whiteSpace: "nowrap", + textOverflow: "ellipsis", + overflow: "hidden", + "&.editing": { + overflow: "visible" + } + }, + previewDragLayer: { + position: "fixed", + pointerEvents: "none", + zIndex: 100, + left: 0, + top: 0, + bottom: 0, + right: 0 + }, + dropdownIcon: { + "& svg": { + fill: constants.fileSystemItemRow.dropdownIcon + } + }, + dropdownOptions: { + backgroundColor: constants.fileSystemItemRow.optionsBackground, + color: constants.fileSystemItemRow.optionsColor, + border: `1px solid ${constants.fileSystemItemRow.optionsBorder}` + }, + gridViewContainer: { + display: "flex", + flex: 1, + maxWidth: constants.generalUnit * 24 + }, + gridFolderName: { + textAlign: "center", + wordBreak: "break-all", + overflowWrap: "break-word", + padding: constants.generalUnit + }, + gridViewIconNameBox: { + display: "flex", + flexDirection: "column", + width: "100%", + cursor: "pointer" + }, + gridIcon: { + display: "flex", + justifyContent: "center", + alignItems: "center", + height: constants.generalUnit * 16, + maxWidth: constants.generalUnit * 24, + border: `1px solid ${palette.additional["gray"][6]}`, + boxShadow: constants.filesTable.gridItemShadow, + "& svg": { + width: "30%" + }, + [breakpoints.down("lg")]: { + height: constants.generalUnit * 16 + }, + [breakpoints.down("sm")]: { + height: constants.generalUnit * 16 + }, + "&.highlighted": { + border: `1px solid ${palette.additional["geekblue"][6]}` + } + }, + menuTitleGrid: { + padding: `0 ${constants.generalUnit * 0.5}px`, + [breakpoints.down("md")]: { + padding: 0 + } + } + })}) + +const DragPreviewTableItem: React.FC<{item: FileSystemItem; icon: React.ReactNode}> = ({ + item: { name, isFolder, created_at, size }, + icon +}) => { + const classes = useStyles() + const { desktop } = useThemeSwitcher() + return ( + + {desktop && ( + + + + )} + + {icon} + + + {name} + + {desktop && ( + <> + + { + !isFolder && created_at && dayjs.unix(created_at).format("DD MMM YYYY h:mm a") + } + + + {!isFolder && formatBytes(size)} + + + )} + + + + + ) +} + + +const DragPreviewGridItem: React.FC<{item: FileSystemItem; icon: React.ReactNode}> = ({ + item: { name, isFolder }, + icon +}) => { + const classes = useStyles() + const { desktop } = useThemeSwitcher() + return ( +
+
+
+ {icon} +
+ +
{name}
+
+
+ +
+
+ ) +} + +export const DragPreviewLayer: React.FC<{items: FileSystemItem[]; previewType: BrowserView} > = ({ items, previewType }) => { const classes = useStyles() const { isDragging, dragItems, itemType, initialOffset, currentOffset } = useDragLayer(monitor => ({ itemType: monitor.getItemType(), @@ -48,12 +243,29 @@ export const DragPreviewLayer: React.FC<{items: FileSystemItem[]}> = ({ items })
    {dragItems.ids.map(di => { const previewItem = items.find(i => i.cid === di) + if (previewItem) { - return ( -
  • - {previewItem?.name} -
    • - )} else { + let Icon + if (previewItem.isFolder) { + Icon = FolderFilledSvg + } else if (previewItem.content_type.includes("image")) { + Icon = FileImageSvg + } else if (previewItem.content_type.includes("pdf")) { + Icon = FilePdfSvg + } else { + Icon = FileTextSvg + } + + + return (previewType === "table") ? + : + + } else { return null }})}
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx index 490126e64e..5bf8776691 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx @@ -594,7 +594,8 @@ const FilesTableView = ({ Drop to upload files
- +
{crumbs && moduleRootPath ? ( Date: Thu, 13 May 2021 18:40:29 +0200 Subject: [PATCH 05/10] fix icon and table row styles --- .../FileBrowsers/views/DragPreviewLayer.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx index 8e90a17b1b..1ae283b3b4 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx @@ -1,5 +1,5 @@ import { FolderFilledSvg, FileImageSvg, FilePdfSvg, FileTextSvg, formatBytes, - MenuDropdown, MoreIcon, TableCell, TableRow, Typography } from "@chainsafe/common-components" + MenuDropdown, MoreIcon, TableCell, TableRow, Typography, CheckboxInput } from "@chainsafe/common-components" import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" import clsx from "clsx" import dayjs from "dayjs" @@ -16,6 +16,7 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => return createStyles({ tableRow: { + width: "calc(100vw - 504px)", border: "2px solid transparent", [breakpoints.up("md")]: { gridTemplateColumns: desktopGridSettings @@ -128,7 +129,10 @@ const DragPreviewTableItem: React.FC<{item: FileSystemItem; icon: React.ReactNod > {desktop && ( - + {return}} + /> )} { const classes = useStyles() - const { desktop } = useThemeSwitcher() return (
= ({ items, previewType }) => { const classes = useStyles() - const { isDragging, dragItems, itemType, initialOffset, currentOffset } = useDragLayer(monitor => ({ + const { isDragging, dragItems, itemType, currentOffset } = useDragLayer(monitor => ({ itemType: monitor.getItemType(), dragItems: monitor.getItem() as {ids: string[]}, isDragging: monitor.isDragging(), @@ -227,7 +230,6 @@ export const DragPreviewLayer: React.FC<{items: FileSystemItem[]; previewType: B display: "none" } } - console.log(initialOffset) const { x, y } = currentOffset const transform = `translate(${x}px, ${y}px)` @@ -256,15 +258,13 @@ export const DragPreviewLayer: React.FC<{items: FileSystemItem[]; previewType: B Icon = FileTextSvg } - - return (previewType === "table") ? - : - + return (previewType === "table") + ? } + key={previewItem.cid} /> + : } + key={previewItem.cid} /> } else { return null }})} From 61dca2ad4ef48f4d5fe97e1f3e1db4b5d6413fdf Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 13 May 2021 21:26:38 +0200 Subject: [PATCH 06/10] remove unnecessary styles --- .../Modules/FileBrowsers/views/DragPreviewLayer.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx index 1ae283b3b4..1468c29fca 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx @@ -23,9 +23,6 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => }, [breakpoints.down("md")]: { gridTemplateColumns: mobileGridSettings - }, - "&.droppable": { - border: `2px solid ${palette.additional["geekblue"][6]}` } }, fileIcon: { @@ -46,10 +43,7 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => filename: { whiteSpace: "nowrap", textOverflow: "ellipsis", - overflow: "hidden", - "&.editing": { - overflow: "visible" - } + overflow: "hidden" }, previewDragLayer: { position: "fixed", @@ -103,9 +97,6 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => }, [breakpoints.down("sm")]: { height: constants.generalUnit * 16 - }, - "&.highlighted": { - border: `1px solid ${palette.additional["geekblue"][6]}` } }, menuTitleGrid: { From 71cd5803da6d892c33d96d1aa43142edebe3a01a Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Fri, 14 May 2021 11:25:00 +1200 Subject: [PATCH 07/10] Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../FileBrowsers/views/DragPreviewLayer.tsx | 14 +++++++++----- .../views/FileSystemItem/FileSystemItem.tsx | 2 +- .../Modules/FileBrowsers/views/FilesTable.view.tsx | 8 ++++---- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx index 1468c29fca..7b39bbf6ee 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/DragPreviewLayer.tsx @@ -250,15 +250,19 @@ export const DragPreviewLayer: React.FC<{items: FileSystemItem[]; previewType: B } return (previewType === "table") - ? } - key={previewItem.cid} /> - : + : } - key={previewItem.cid} /> + key={previewItem.cid} + /> } else { return null }})}
-} \ No newline at end of file +} diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx index e2f22fb257..edb97cfd11 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx @@ -298,7 +298,7 @@ const FileSystemItemRow: React.FC = ({ accept: DragTypes.MOVABLE_FILE, canDrop: () => isFolder, drop: async (item: {ids: string[]}) => { - item?.ids?.map((cid) => { + item.ids.map((cid) => { const fileToMove = files.find(f => f.cid === cid) handleMove && fileToMove && handleMove( diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx index 5bf8776691..8d54cb39b9 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx @@ -512,8 +512,6 @@ const FilesTableView = ({ } }, [selectedCids, items, bulkOperations]) - - const handleDeleteFiles = useCallback(() => { if (!deleteFiles) return @@ -594,8 +592,10 @@ const FilesTableView = ({ Drop to upload files
- +
{crumbs && moduleRootPath ? ( Date: Fri, 14 May 2021 23:16:15 +1200 Subject: [PATCH 08/10] Update packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../FileBrowsers/views/FileSystemItem/FileSystemItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx index edb97cfd11..491425b460 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx @@ -297,7 +297,7 @@ const FileSystemItemRow: React.FC = ({ const [{ isOverMove }, dropMoveRef] = useDrop({ accept: DragTypes.MOVABLE_FILE, canDrop: () => isFolder, - drop: async (item: {ids: string[]}) => { + drop: (item: {ids: string[]}) => { item.ids.map((cid) => { const fileToMove = files.find(f => f.cid === cid) handleMove && fileToMove && From c776eb8fd208d64cd350417eda6bf7ab921be3c8 Mon Sep 17 00:00:00 2001 From: tanmoy12 Date: Tue, 18 May 2021 23:33:06 +0600 Subject: [PATCH 09/10] selection removal preventions --- .../FileBrowsers/views/FilesTable.view.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx index 3774edc756..fc5dfa98fd 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx @@ -730,7 +730,11 @@ const FilesTableView = () => { <> {validBulkOps.indexOf("move") >= 0 && (