feat: Adds support for mkdir and rename in destination browser. #58
Conversation
There was a problem hiding this comment.
It's looking like we might need to consider creating a directory listing context that would allow easier dispatch of fetchItems, I think with that in place addDirectory and renameFile can be pushed down to the components that actual contain the forms rather than have to pass the handlers down.
| </Td> | ||
| )} | ||
| {showAddDirectory && ( | ||
| <Tr> | ||
| <Td> |
There was a problem hiding this comment.
Adding a colSpan here based on the number of visible columns (something that could be added to the context) would take advantage of the horizontal space here.
| <Td> | |
| <Td colSpan={3}> |
Though there are some states where that will push the submit and cancel buttons out of the visible viewport (overflow scroll), I think that might be ok for now and something we can consider cleaning up with improved small device styles overall.
| @@ -0,0 +1,46 @@ | |||
| import React, { ReactNode, useState } from "react"; | |||
| import { HStack, IconButton, Input } from "@chakra-ui/react"; | |||
| import { CheckIcon, CloseIcon } from "@chakra-ui/icons"; | |||
There was a problem hiding this comment.
Use the outline heroicons (https://heroicons.com/) instead of the Chakra icons:
import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
The Chakra Icons are pretty limited so I've been moving to heroicons.
| return ( | ||
| <HStack> | ||
| {icon} | ||
| <Input |
There was a problem hiding this comment.
This will need a label, even if it is visually hidden.
| <HStack> | ||
| {icon} | ||
| <Input | ||
| id="name-input" |
There was a problem hiding this comment.
I don't think you need an id here. If we do, there will need to be some UUID attached to it based on the current ability to render more than one rename form at a time.
| }} | ||
| value={name} | ||
| /> | ||
| <IconButton |
There was a problem hiding this comment.
size="sm" on these <IconButton>s
| includeSize={fileBrowser.view.columns.includes("size")} | ||
| includeLastModified={fileBrowser.view.columns.includes( | ||
| "last_modified", | ||
| )} |
There was a problem hiding this comment.
Use the File Browser context in the <FileEntry> component instead of passing properties of the context as props.
| key={i} | ||
| item={item} | ||
| isSource={isSource} | ||
| httpsServer={endpoint?.https_server} |
There was a problem hiding this comment.
This would be a little more flexible if you just pass the endpoint rather than properties on the endpoint.
| } | ||
| }; | ||
| const isDirectory = item.type === "dir"; | ||
| const getLineItem = () => { |
There was a problem hiding this comment.
I would push this to either an additional pure component in this file (not exported), keep the logic in the return, or look into useCallback (though based on it's use of some of the props I'm not sure it would improve much) rather than create this function every render.
jbottigliero
changed the title
[sc-33140]