Mobile sharing folder rename modal (#1779)

* Done# * Update packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> * lingui extract Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com> Co-authored-by: GitHub Actions <actions@github.com>
ChainSafe · Nov 25, 2021 · 1335725 · 1335725
1 parent 2c1ea37
commit 1335725
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 57 deletions.
diff --git a/...ges/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx b/...ges/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useRef, useState } from "react"
 import { makeStyles, createStyles, useThemeSwitcher, useDoubleClick, useOnClickOutside } from "@chainsafe/common-theme"
 import {
+  Button,
   CloseCirceSvg,
   DeleteSvg,
   EditSvg,
@@ -25,6 +26,7 @@ import UserBubble from "../../../../Elements/UserBubble"
 import { nameValidator } from "../../../../../Utils/validationSchema"
 import Menu from "../../../../../UI-components/Menu"
 import { getUserDisplayName } from "../../../../../Utils/getUserDisplayName"
+import CustomModal from "../../../../Elements/CustomModal"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => {
 
@@ -111,6 +113,46 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
     },
     focusVisible:{
       backgroundColor: "transparent !important"
+    },
+    modalRoot: {
+      [breakpoints.down("md")]: {
+        paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit
+      }
+    },
+    modalInner: {
+      [breakpoints.down("md")]: {
+        bottom:
+          Number(constants?.mobileButtonHeight) + constants.generalUnit,
+        borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
+        borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
+        borderBottomLeftRadius: `${constants.generalUnit * 1.5}px`,
+        borderBottomRightRadius: `${constants.generalUnit * 1.5}px`,
+        maxWidth: `${breakpoints.width("md")}px !important`
+      }
+    },
+    renameHeader: {
+      textAlign: "center"
+    },
+    renameFooter: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-end"
+    },
+    renameModal: {
+      padding: constants.generalUnit * 4
+    },
+    okButton: {
+      marginLeft: constants.generalUnit
+    },
+    cancelButton: {
+      [breakpoints.down("md")]: {
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        height: constants?.mobileButtonHeight
+      }
     }
   })
 })
@@ -228,79 +270,136 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
   useOnClickOutside(formRef, stopEditing)
 
   return  (
-    <TableRow
-      data-cy="shared-folder-item-row"
-      className={classes.tableRow}
-      type="grid"
-    >
-      {desktop &&
+    <>
+      <TableRow
+        data-cy="shared-folder-item-row"
+        className={classes.tableRow}
+        type="grid"
+      >
+        {desktop &&
         <TableCell
           className={classes.folderIcon}
           onClick={(e) => onFolderClick(e)}
         >
           <FolderFilledIcon/>
         </TableCell>
-      }
-      <TableCell
-        data-cy="shared-folder-item-name"
-        align="left"
-        className={clsx(classes.filename, desktop && isRenaming && "editing")}
-        onClick={(e) => onFolderClick(e)}
-      >
-        {!isRenaming
-          ? <Typography>{name}</Typography>
-          : (
-            <FormikProvider value={formik}>
-              <Form
-                className={classes.desktopRename}
-                data-cy='rename-form'
-              >
-                <FormikTextInput
-                  className={classes.renameInput}
-                  data-cy='input-rename-share'
-                  name="name"
-                  inputVariant="minimal"
-                  onKeyDown={(event) => {
-                    if (event.key === "Escape") {
-                      stopEditing()
-                    }
-                  }}
-                  placeholder = {t`Please enter a folder name`}
-                  autoFocus={isRenaming}
-                />
-              </Form>
-            </FormikProvider>
-          )
         }
-      </TableCell>
-      {desktop &&
+        <TableCell
+          data-cy="shared-folder-item-name"
+          align="left"
+          className={clsx(classes.filename, desktop && isRenaming && "editing")}
+          onClick={(e) => onFolderClick(e)}
+        >
+          {!isRenaming || !desktop
+            ? <Typography>{name}</Typography>
+            : (
+              <FormikProvider value={formik}>
+                <Form
+                  className={classes.desktopRename}
+                  data-cy='rename-form'
+                >
+                  <FormikTextInput
+                    className={classes.renameInput}
+                    data-cy='input-rename-share'
+                    name="name"
+                    inputVariant="minimal"
+                    onKeyDown={(event) => {
+                      if (event.key === "Escape") {
+                        stopEditing()
+                      }
+                    }}
+                    placeholder = {t`Please enter a folder name`}
+                    autoFocus={isRenaming}
+                  />
+                </Form>
+              </FormikProvider>
+            )
+          }
+        </TableCell>
+        {desktop &&
         <TableCell align="left">
           {isOwner
             ? t`me`
             : <UserBubble tooltip={getUserDisplayName(bucket.owners[0])} />}
         </TableCell>
-      }
-      <TableCell
-        data-cy="shared-folder-item-shared-with"
-        align="left"
-        className={classes.sharedUser}
-      >
-        <SharedUsers bucket={bucket}/>
-      </TableCell>
-      {desktop &&
+        }
+        <TableCell
+          data-cy="shared-folder-item-shared-with"
+          align="left"
+          className={classes.sharedUser}
+        >
+          <SharedUsers bucket={bucket}/>
+        </TableCell>
+        {desktop &&
         <TableCell align="left">
           {formatBytes(size, 2)}
         </TableCell>
+        }
+        <TableCell align="right">
+          <Menu
+            testId='fileDropdown'
+            icon={<MoreIcon className={classes.dropdownIcon}/>}
+            options={menuItems}
+            style={{ focusVisible: classes.focusVisible }}
+          />
+        </TableCell>
+      </TableRow>
+      {
+        isRenaming && !desktop && (
+          <>
+            <CustomModal
+              className={classes.modalRoot}
+              injectedClass={{
+                inner: classes.modalInner
+              }}
+              closePosition="none"
+              active={isRenaming}
+              onClose={() => setIsRenaming(false)}
+            >
+              <FormikProvider value={formik}>
+                <Form className={classes.renameModal}>
+                  <Typography
+                    className={classes.renameHeader}
+                    component="p"
+                    variant="h5"
+                  >
+                    <Trans>Rename shared folder</Trans>
+                  </Typography>
+                  <FormikTextInput
+                    label="Name"
+                    className={classes.renameInput}
+                    name="name"
+                    placeholder={t`Please enter a folder name`}
+                    autoFocus={isRenaming}
+                  />
+                  <footer className={classes.renameFooter}>
+                    <Button
+                      onClick={() => setIsRenaming(false)}
+                      size="medium"
+                      className={classes.cancelButton}
+                      variant="outline"
+                      type="button"
+                    >
+                      <Trans>Cancel</Trans>
+                    </Button>
+                    <Button
+                      variant="primary"
+                      size="medium"
+                      type="submit"
+                      className={classes.okButton}
+                      disabled={!formik.dirty}
+                    >
+                      <Trans>Update</Trans>
+                    </Button>
+                  </footer>
+                </Form>
+              </FormikProvider>
+            </CustomModal>
+            <Typography>{name}</Typography>
+          </>
+        )
       }
-      <TableCell align="right">
-        <Menu
-          testId='fileDropdown'
-          icon={<MoreIcon className={classes.dropdownIcon}/>}
-          options={menuItems}
-          style={{ focusVisible: classes.focusVisible }}
-        />
-      </TableCell>
-    </TableRow>
+    </>
   )
 }
 

diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
@@ -571,6 +571,9 @@ msgstr "Datei umbenennen"
 msgid "Rename folder"
 msgstr "Ordner umbenennen"
 
+msgid "Rename shared folder"
+msgstr ""
+
 msgid "Report"
 msgstr "Melden"
 

diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
@@ -574,6 +574,9 @@ msgstr "Rename file"
 msgid "Rename folder"
 msgstr "Rename folder"
 
+msgid "Rename shared folder"
+msgstr "Rename shared folder"
+
 msgid "Report"
 msgstr "Report"
 

diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
@@ -575,6 +575,9 @@ msgstr ""
 msgid "Rename folder"
 msgstr ""
 
+msgid "Rename shared folder"
+msgstr ""
+
 msgid "Report"
 msgstr ""
 

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -575,6 +575,9 @@ msgstr "Renommer le fichier"
 msgid "Rename folder"
 msgstr "Renommer le dossier"
 
+msgid "Rename shared folder"
+msgstr ""
+
 msgid "Report"
 msgstr "Signaler"
 

diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
@@ -571,6 +571,9 @@ msgstr ""
 msgid "Rename folder"
 msgstr ""
 
+msgid "Rename shared folder"
+msgstr ""
+
 msgid "Report"
 msgstr ""