Rename with split extension

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useEffect, useRef } from "react"
+import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import { makeStyles, createStyles, useThemeSwitcher, useOnClickOutside, LongPressEvents } from "@chainsafe/common-theme"
 import { t } from "@lingui/macro"
 import clsx from "clsx"
 import {
   FormikTextInput,
   IMenuItem,
-  MoreIcon
+  MoreIcon,
+  Typography
 } from "@chainsafe/common-components"
 import { CSFTheme } from "../../../../../Themes/types"
 import { FileSystemItem } from "../../../../../Contexts/FilesContext"
@@ -64,9 +65,15 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
     desktopRename: {
       display: "flex",
       flexDirection: "row",
+      alignItems: "center",
       "& svg": {
         width: 20,
         height: 20
+      },
+      "& > span": {
+        fontSize: 16,
+        lineHeight: "20px",
+        marginLeft: constants.generalUnit / 2
       }
     },
     dropdownIcon: {
@@ -152,15 +159,38 @@ const FileSystemGridItem = React.forwardRef(
     const { desktop } = useThemeSwitcher()
     const formRef = useRef(null)
 
+    const {
+      fileName,
+      extension
+    } = useMemo(() => {
+      if (isFolder) {
+        return {
+          fileName : name,
+          extension: ""
+        }
+      }
+      const split = name.split(".")
+      const extension = `.${split[split.length - 1]}`
+
+      return {
+        fileName : name.replace(extension, ""),
+        extension: split[split.length - 1]
+      }
+    }, [name, isFolder])
+
     const formik = useFormik({
       initialValues: {
-        name
+        name: fileName
       },
       validationSchema: nameValidator,
       onSubmit: (values: { name: string }) => {
-        const newName = values.name.trim()
+        const newName = `${values.name.trim()}.${extension}`
 
-        newName && handleRename && handleRename(file.cid, newName)
+        if (newName !== name) {
+          newName && handleRename && handleRename(file.cid, newName)
+        } else {
+          stopEditing()
+        }
       },
       enableReinitialize: true
     })
@@ -241,6 +271,13 @@ const FileSystemGridItem = React.forwardRef(
                     }
                     autoFocus={editing === cid}
                   />
+                  {
+                    !isFolder && (
+                      <Typography component="span">
+                        { `.${extension}` }
+                      </Typography>
+                    )
+                  }
                 </Form>
               </FormikProvider>
             )

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

@@ -44,9 +44,7 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
       [breakpoints.up("md")]: {
         margin: 0
       },
-      [breakpoints.down("md")]: {
-        margin: `${constants.generalUnit * 4.2}px 0`
-      }
+
     },
     modalRoot: {
       [breakpoints.down("md")]: {
@@ -64,18 +62,34 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
         maxWidth: `${breakpoints.width("md")}px !important`
       }
     },
+    renameModal: {
+      padding: constants.generalUnit * 4
+    },
     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",
       alignItems: "center",
       justifyContent: "flex-end"
     },
-    renameModal: {
-      padding: constants.generalUnit * 4
-    },
     okButton: {
       marginLeft: constants.generalUnit
     },
@@ -154,19 +168,48 @@ const FileSystemItem = ({
   const { downloadMultipleFiles } = useFiles()
   const { cid, name, isFolder, content_type } = 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]}`
+
+    return {
+      fileName : name.replace(extension, ""),
+      extension: split[split.length - 1]
+    }
+  }, [name, isFolder])
+
   const formik = useFormik({
     initialValues: {
-      name
+      name: fileName
     },
     validationSchema: nameValidator,
     onSubmit: (values: { name: string }) => {
-      const newName = values.name.trim()
+      const newName = `${values.name.trim()}.${extension}`
 
-      newName && handleRename && handleRename(file.cid, newName)
+      if (newName !== name) {
+        newName && handleRename && handleRename(file.cid, newName)
+      } else {
+        stopEditing()
+      }
     },
     enableReinitialize: true
   })
 
+  const stopEditing = useCallback(() => {
+    setEditing(undefined)
+    formik.resetForm()
+  }, [formik, setEditing])
+
   let Icon
   if (isFolder) {
     Icon = FolderFilledSvg
@@ -482,7 +525,7 @@ const FileSystemItem = ({
               }}
               closePosition="none"
               active={editing === cid}
-              onClose={() => setEditing("")}
+              onClose={() => stopEditing()}
             >
               <FormikProvider value={formik}>
                 <Form className={classes.renameModal}>
@@ -496,13 +539,22 @@ const FileSystemItem = ({
                         : <Trans>Rename file</Trans>
                     }
                   </Typography>
-                  <FormikTextInput
-                    label="Name"
-                    className={classes.renameInput}
-                    name="name"
-                    placeholder={isFolder ? t`Please enter a folder name` : t`Please enter a file name`}
-                    autoFocus={editing === cid}
-                  />
+                  <div className={classes.renameInputWrapper}>
+                    <FormikTextInput
+                      label="Name"
+                      className={classes.renameInput}
+                      name="name"
+                      placeholder={isFolder ? t`Please enter a folder name` : t`Please enter a file name`}
+                      autoFocus={editing === cid}
+                    />
+                    {
+                      !isFolder && (
+                        <Typography component="span">
+                          { `.${extension}` }
+                        </Typography>
+                      )
+                    }
+                  </div>
                   <footer className={classes.renameFooter}>
                     <Button
                       onClick={() => setEditing("")}

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from "react"
+import React, { useCallback, useMemo, useRef } from "react"
 import { makeStyles, createStyles, useThemeSwitcher, useOnClickOutside, LongPressEvents } from "@chainsafe/common-theme"
 import { t } from "@lingui/macro"
 import clsx from "clsx"
@@ -67,9 +67,15 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
     desktopRename: {
       display: "flex",
       flexDirection: "row",
+      alignItems: "center",
       "& svg": {
         width: 20,
         height: 20
+      },
+      "& > span": {
+        fontSize: 16,
+        lineHeight: "20px",
+        marginLeft: constants.generalUnit / 2
       }
     },
     filename: {
@@ -141,13 +147,37 @@ const FileSystemTableItem = React.forwardRef(
     const { name, cid, created_at, size } = file
     const { desktop } = useThemeSwitcher()
     const formRef = useRef(null)
+
+    const {
+      fileName,
+      extension
+    } = useMemo(() => {
+      if (isFolder) {
+        return {
+          fileName : name,
+          extension: ""
+        }
+      }
+      const split = name.split(".")
+      const extension = `.${split[split.length - 1]}`
+
+      return {
+        fileName : name.replace(extension, ""),
+        extension: split[split.length - 1]
+      }
+    }, [name, isFolder])
+
     const formik = useFormik({
-      initialValues: { name },
+      initialValues: { name: fileName },
       validationSchema: nameValidator,
       onSubmit: (values: { name: string }) => {
-        const newName = values.name.trim()
+        const newName = `${values.name.trim()}.${extension}`
 
-        newName && handleRename && handleRename(file.cid, newName)
+        if (newName !== name) {
+          newName && handleRename && handleRename(file.cid, newName)
+        } else {
+          stopEditing()
+        }
       },
       enableReinitialize: true
     })
@@ -217,6 +247,13 @@ const FileSystemTableItem = React.forwardRef(
                     }
                     autoFocus={editing === cid}
                   />
+                  {
+                    !isFolder && (
+                      <Typography component="span">
+                        { `.${extension}` }
+                      </Typography>
+                    )
+                  }
                 </Form>
               </FormikProvider>
             )