diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx index d0e02d230d..47ef11e7e9 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx @@ -15,6 +15,7 @@ import { ConnectDragPreview } from "react-dnd" import { Form, FormikProvider, useFormik } from "formik" import { nameValidator } from "../../../../../Utils/validationSchema" import Menu from "../../../../../UI-components/Menu" +import { getFileNameAndExtension } from "../../../../../Utils/Helpers" const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => { return createStyles({ @@ -169,26 +170,7 @@ const FileSystemGridItem = React.forwardRef( const [isEditingLoading, setIsEditingLoading] = useState(false) const { fileName, extension } = useMemo(() => { - if (isFolder) { - return { - fileName : name, - extension: "" - } - } - const split = name.split(".") - const extension = `.${split[split.length - 1]}` - - if (split.length === 1) { - return { - fileName : name, - extension: "" - } - } - - return { - fileName: name.slice(0, name.length - extension.length), - extension: split[split.length - 1] - } + return getFileNameAndExtension(name, isFolder) }, [name, isFolder]) const formik = useFormik({ 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 85ce8b84dd..a78bc414c5 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 @@ -34,6 +34,7 @@ import { useMemo } from "react" import { nameValidator } from "../../../../../Utils/validationSchema" import CustomButton from "../../../../Elements/CustomButton" import { getIconForItem } from "../../../../../Utils/getItemIcon" +import { getFileNameAndExtension } from "../../../../../Utils/Helpers" const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => { return createStyles({ @@ -151,30 +152,8 @@ const FileSystemItem = ({ const { cid, name, isFolder } = file const inSharedFolder = useMemo(() => bucket?.type === "share", [bucket]) - const { - fileName, - extension - } = useMemo(() => { - if (isFolder) { - return { - fileName : name, - extension: "" - } - } - const split = name.split(".") - const extension = `.${split[split.length - 1]}` - - if (split.length === 1) { - return { - fileName : name, - extension: "" - } - } - - return { - fileName: name.slice(0, name.length - extension.length), - extension: split[split.length - 1] - } + const { fileName, extension } = useMemo(() => { + return getFileNameAndExtension(name, isFolder) }, [name, isFolder]) const formik = useFormik({ 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 a891f38f9a..cf471a17fb 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 @@ -20,6 +20,7 @@ import { ConnectDragPreview } from "react-dnd" import { Form, FormikProvider, useFormik } from "formik" import { nameValidator } from "../../../../../Utils/validationSchema" import Menu from "../../../../../UI-components/Menu" +import { getFileNameAndExtension } from "../../../../../Utils/Helpers" const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => { const desktopGridSettings = "50px 69px 3fr 190px 100px 45px !important" @@ -155,26 +156,7 @@ const FileSystemTableItem = React.forwardRef( const [isEditingLoading, setIsEditingLoading] = useState(false) const { fileName, extension } = useMemo(() => { - if (isFolder) { - return { - fileName : name, - extension: "" - } - } - const split = name.split(".") - const extension = `.${split[split.length - 1]}` - - if (split.length === 1) { - return { - fileName : name, - extension: "" - } - } - - return { - fileName: name.slice(0, name.length - extension.length), - extension: split[split.length - 1] - } + return getFileNameAndExtension(name, isFolder) }, [name, isFolder]) const formik = useFormik({ diff --git a/packages/files-ui/src/Utils/Helpers.tsx b/packages/files-ui/src/Utils/Helpers.tsx index 943e0a9905..356719b7be 100644 --- a/packages/files-ui/src/Utils/Helpers.tsx +++ b/packages/files-ui/src/Utils/Helpers.tsx @@ -44,3 +44,26 @@ export const parseFileContentResponse = (fcr: FileContentResponse): FileSystemIt isFolder: fcr.content_type === "application/chainsafe-files-directory" }) + +export const getFileNameAndExtension = (name: string, isFolder: boolean) => { + if (isFolder) { + return { + fileName : name, + extension: "" + } + } + const split = name.split(".") + const extension = `.${split[split.length - 1]}` + + if (split.length === 1) { + return { + fileName : name, + extension: "" + } + } + + return { + fileName: name.slice(0, name.length - extension.length), + extension: split[split.length - 1] + } +} diff --git a/packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemGridItem.tsx b/packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemGridItem.tsx index 170ab1850b..6cbae89238 100644 --- a/packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemGridItem.tsx +++ b/packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemGridItem.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react" +import React, { useCallback, useEffect, useMemo, useState } from "react" import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme" import { t } from "@lingui/macro" import clsx from "clsx" @@ -7,7 +7,8 @@ import { IMenuItem, Loading, MenuDropdown, - MoreIcon + MoreIcon, + Typography } from "@chainsafe/common-components" import { CSSTheme } from "../../../Themes/types" import { FileSystemItem } from "../../../Contexts/StorageContext" @@ -15,6 +16,7 @@ import { ConnectDragPreview } from "react-dnd" import { Form, FormikProvider, useFormik } from "formik" import { nameValidator } from "../../../Utils/validationSchema" import { ISelectedFile } from "../../../Contexts/FileBrowserContext" +import { getFileNameAndExtension } from "../../../Utils/Helpers" const useStyles = makeStyles(({ breakpoints, constants, palette }: CSSTheme) => { return createStyles({ @@ -76,9 +78,15 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSSTheme) => desktopRename: { display: "flex", flexDirection: "row", + alignItems: "center", "& svg": { width: 20, height: 20 + }, + "& > span": { + fontSize: 16, + lineHeight: "20px", + marginLeft: constants.generalUnit / 2 } }, dropdownIcon: { @@ -162,13 +170,17 @@ const FileSystemGridItem = React.forwardRef( const { desktop } = useThemeSwitcher() const [isEditingLoading, setIsEditingLoading] = useState(false) + const { fileName, extension } = useMemo(() => { + return getFileNameAndExtension(name, isFolder) + }, [name, isFolder]) + const formik = useFormik({ initialValues: { - fileName: name + name: fileName }, validationSchema: nameValidator, onSubmit: (values) => { - const newName = values.fileName?.trim() + const newName = extension !== "" ? `${values.name.trim()}.${extension}` : values.name.trim() if (newName !== name && !!newName && handleRename && editingFile) { setIsEditingLoading(true) @@ -243,7 +255,7 @@ const FileSystemGridItem = React.forwardRef( > { if (event.key === "Escape") { @@ -256,6 +268,13 @@ const FileSystemGridItem = React.forwardRef( } autoFocus /> + { + !isFolder && extension !== "" && ( + + { `.${extension}` } + + ) + } ) :
diff --git a/packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemItem.tsx b/packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemItem.tsx index 35bbefa834..882f954b65 100644 --- a/packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemItem.tsx +++ b/packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemItem.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useRef } from "react" +import React, { useCallback, useEffect, useMemo, useRef } from "react" import { FormikTextInput, Typography, @@ -29,6 +29,7 @@ import { DragTypes } from "../FilesList/DragConstants" import { nameValidator } from "../../../Utils/validationSchema" import { getPathWithFile } from "../../../Utils/pathUtils" import { getIconForItem } from "../../../Utils/getItemIcon" +import { getFileNameAndExtension } from "../../../Utils/Helpers" const useStyles = makeStyles(({ breakpoints, constants }: CSSTheme) => { return createStyles({ @@ -58,6 +59,22 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSSTheme) => { renameHeader: { textAlign: "center" }, + renameInputWrapper: { + display: "flex", + flexDirection: "row", + alignItems: "flex-end", + [breakpoints.down("md")]: { + margin: `${constants.generalUnit * 4.2}px 0` + }, + "& > span": { + display: "block", + fontSize: 16, + lineHeight: "20px", + marginLeft: constants.generalUnit / 2, + marginBottom: (constants.generalUnit * 2.50), + transform: "translateY(50%)" + } + }, renameFooter: { display: "flex", flexDirection: "row", @@ -144,13 +161,21 @@ const FileSystemItem = ({ const { desktop } = useThemeSwitcher() const classes = useStyles() + const { fileName, extension } = useMemo(() => { + return getFileNameAndExtension(name, isFolder) + }, [name, isFolder]) + const formik = useFormik({ - initialValues: { name }, + initialValues: { name: fileName }, validationSchema: nameValidator, - onSubmit: (values: {name: string}) => { - const newName = values.name.trim() + onSubmit: (values: { name: string }) => { + const newName = extension !== "" ? `${values.name.trim()}.${extension}` : values.name.trim() - editingFile && newName && newName !== name && handleRename && handleRename(editingFile, newName) + if (newName !== name && editingFile) { + newName && handleRename && handleRename(editingFile, newName) + } else { + stopEditing() + } }, enableReinitialize: true }) @@ -459,13 +484,22 @@ const FileSystemItem = ({ : Rename file } - +
+ + { + !isFolder && extension !== "" && ( + + { `.${extension}` } + + ) + } +