Merge pull request #1739 from ChainSafe/dev

Release - 2021-11-16

.github/workflows/test-files-on-demand.yml

@@ -52,10 +52,11 @@ jobs:
       #     path: packages/files-ui/cypress/videos
 
       - name: Slack Notification
-        uses: rtCamp/action-slack-notify@v2.0.2
+        uses: rtCamp/action-slack-notify@v2.2.0
         env:
-          SLACK_TITLE: Files UI Test Suite On-Demand Result
-          SLACK_WEBHOOK: ${{ secrets.SLACK_UI_WEBHOOK }}
+          SLACK_TITLE: 'Files UI Test Suite On-Demand Result:'
           SLACK_MESSAGE: ${{ job.status }}
           SLACK_COLOR: ${{ job.status }}
-          SLACK_ICON: packages/common-components/src/Logos/ChainSafe-Files-logo.png
+          MSG_MINIMAL: actions url
+          SLACK_WEBHOOK: ${{ secrets.SLACK_UI_WEBHOOK }}
+          SLACK_FOOTER: 'Test run ${{ github.run_number }} was executed on branch: ${{ github.ref }}'

packages/common-components/src/Dialog/Dialog.tsx

@@ -7,13 +7,10 @@ import { Button, IButtonProps } from "../Button"
 
 const useStyles = makeStyles(({ breakpoints, constants }: ITheme) =>
   createStyles({
-    // JSS in CSS goes here
     root: {},
     inner: {
       padding: constants.generalUnit * 2,
       borderRadius: 2,
-      transform: "translate(-50%, 0)",
-      top: constants.generalUnit * 2,
       [breakpoints.down("sm")]: {
         maxWidth: `calc(100% - ${constants.generalUnit * 3}px) !important`
       }

packages/common-components/src/MenuDropdown/MenuDropdown.tsx

@@ -1,9 +1,10 @@
-import React, { ReactNode, useRef, useState } from "react"
+import React, { ReactNode, useCallback, useRef, useState } from "react"
 import { makeStyles, createStyles, ITheme, useOnClickOutside } from "@chainsafe/common-theme"
 import { Typography } from "../Typography"
 import clsx from "clsx"
 import { DirectionalDownIcon, SvgIcon } from "../Icons"
 import { Paper } from "../Paper"
+import { useOnScroll } from "../Scroll/useOnScroll.hook"
 
 const useStyles = makeStyles(
   ({ constants, animation, typography, palette, overrides }: ITheme) =>
@@ -83,34 +84,64 @@ const useStyles = makeStyles(
         zIndex: 1000,
         padding: 0,
         "&.top-left": {
-          top: 0,
+          "&.up": {
+            bottom: 0
+          },
+          "&.down": {
+            top: 0
+          },
           left: 0,
           ...overrides?.MenuDropdown?.options?.position?.topLeft
         },
         "&.top-center": {
-          top: 0,
+          "&.up": {
+            bottom: 0
+          },
+          "&.down": {
+            top: 0
+          },
           left: "50%",
           transform: "translateX(-50%)",
           ...overrides?.MenuDropdown?.options?.position?.topCenter
         },
         "&.top-right": {
-          top: 0,
+          "&.up": {
+            bottom: 0
+          },
+          "&.down": {
+            top: 0
+          },
           right: 0,
           ...overrides?.MenuDropdown?.options?.position?.topRight
         },
         "&.bottom-left": {
-          top: "100%",
+          "&.up": {
+            bottom: "100%"
+          },
+          "&.down": {
+            top: "100%"
+          },
           left: 0,
           ...overrides?.MenuDropdown?.options?.position?.bottomLeft
         },
         "&.bottom-center": {
-          top: "100%",
+          "&.up": {
+            bottom: "100%"
+          },
+          "&.down": {
+            top: "100%"
+          },
           left: "50%",
           transform: "translateX(-50%)",
           ...overrides?.MenuDropdown?.options?.position?.bottomCenter
         },
         "&.bottom-right": {
-          top: "100%",
+          "&.up": {
+            bottom: "100%"
+          },
+          "&.down": {
+            top: "100%"
+          },
           right: 0,
           ...overrides?.MenuDropdown?.options?.position?.bottomRight
         },
@@ -168,6 +199,7 @@ interface IMenuDropdownProps {
   | "bottom-left"
   | "bottom-center"
   | "bottom-right"
+  dynamicAnchor?: boolean
   menuItems: IMenuItem[]
   title?: string
   classNames?: {
@@ -201,6 +233,25 @@ const MenuDropdown = ({
       setOpen(false)
     }
   })
+
+  const [dropDirection, setDropDirection] = useState<"up" | "down">("down")
+
+  const managePosition = useCallback(() => {
+    // TODO: Debounce
+    const { offsetTop } = ref.current as unknown as HTMLDivElement
+
+    if (offsetTop < window.pageYOffset + (window.innerHeight / 2)) {
+      setDropDirection("down")
+    } else {
+      setDropDirection("up")
+    }
+  }, [ref])
+
+
+  useOnScroll({
+    onScroll: managePosition
+  })
+
   return (
     <div
       ref={ref}
@@ -230,7 +281,7 @@ const MenuDropdown = ({
       </section>
       <Paper
         shadow="shadow2"
-        className={clsx(classes.options, classNames?.options, anchor, {
+        className={clsx(classes.options, classNames?.options, anchor, dropDirection, {
           ["open"]: open
         })}
       >

packages/common-components/src/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useRef } from "react"
+import React, { ReactNode, useEffect, useRef } from "react"
 import { ITheme, useOnClickOutside, makeStyles, createStyles } from "@chainsafe/common-theme"
 import clsx from "clsx"
 import { CloseSvg } from "../Icons/icons/Close.icon"
@@ -43,6 +43,7 @@ const useStyles = makeStyles(
         "&.active": {
           visibility: "visible",
           opacity: 1,
+          zIndex: 2500,
           "& > *": {
             opacity: 1,
             visibility: "visible"
@@ -51,17 +52,48 @@ const useStyles = makeStyles(
         },
         ...overrides?.Modal?.root
       },
-      inner: {
+      modalSection: {
         ...constants.modal.inner,
-        flexGrow: 1,
-        flexDirection: "column",
-        display: "flex",
         backgroundColor: palette.common?.white.main,
-        top: "50%",
-        left: "50%",
+        zIndex: 1,
+        "&.subModal": {
+          marginTop: "0.5rem"
+        }
+      },
+      closeIcon: {
+        ...constants.icon,
+        width: 15,
+        height: 15,
+        display: "block",
+        top: 0,
+        cursor: "pointer",
         position: "absolute",
-        borderRadius: `${constants.generalUnit / 2}`,
-        transform: "translate(-50%, -50%)",
+        zIndex: 2,
+        "& svg": {
+          stroke: palette.common?.black.main
+        },
+        "&.right": {
+          transform: "translate(-50%, 50%)",
+          right: 0,
+          ...overrides?.Modal?.closeIcon?.right
+        },
+        "&.left": {
+          left: 0,
+          transform: "translate(50%, -50%)",
+          ...overrides?.Modal?.closeIcon?.left
+        },
+        "&.none": {
+          display: "none"
+        },
+        ...overrides?.Modal?.closeIcon?.root
+      },
+      wrapper : {
+        position: "relative",
+        flexDirection: "column",
+        display: "flex",
+        margin: "auto",
+        maxHeight: "100%",
+        overflow: "auto",
         "&.xs": {
           width: `calc(100% - ${constants.generalUnit * 2}px)`,
           maxWidth: breakpoints.width("xs"),
@@ -88,44 +120,19 @@ const useStyles = makeStyles(
           ...overrides?.Modal?.inner?.size?.xl
         },
         ...overrides?.Modal?.inner?.root
-      },
-      closeIcon: {
-        ...constants.icon,
-        width: 15,
-        height: 15,
-        display: "block",
-        top: 0,
-        cursor: "pointer",
-        position: "absolute",
-        "& svg": {
-          stroke: palette.common?.black.main
-        },
-        "&.right": {
-          transform: "translate(-50%, 50%)",
-          right: 0,
-          ...overrides?.Modal?.closeIcon?.right
-        },
-        "&.left": {
-          left: 0,
-          transform: "translate(50%, -50%)",
-          ...overrides?.Modal?.closeIcon?.left
-        },
-        "&.none": {
-          display: "none"
-        },
-        ...overrides?.Modal?.closeIcon?.root
       }
     })
 )
 
 interface IModalClasses {
   inner?: string
   closeIcon?: string
+  subModalInner?: string
 }
 
 interface IModalProps {
   className?: string
-  active: boolean
+  active?: boolean
   injectedClass?: IModalClasses
   closePosition?: "left" | "right" | "none"
   children?: ReactNode | ReactNode[]
@@ -134,6 +141,27 @@ interface IModalProps {
   onClickOutside?: (e?: React.MouseEvent) => void
   testId?: string
   onClose?: () => void
+  subModal?: ReactNode | ReactNode[]
+}
+
+interface IModalBaseProps {
+  children?: ReactNode | ReactNode[]
+  injectedClassInner?: string
+}
+
+const ModalBase = ({ children, injectedClassInner }: IModalBaseProps) => {
+  const classes = useStyles()
+
+  return (
+    <section
+      className={clsx(
+        classes.modalSection,
+        injectedClassInner
+      )}
+    >
+      {children}
+    </section>
+  )
 }
 
 const Modal = ({
@@ -146,12 +174,22 @@ const Modal = ({
   onModalBodyClick,
   testId,
   onClose,
-  onClickOutside
+  onClickOutside,
+  subModal
 }: IModalProps) => {
   const classes = useStyles()
-
   const ref = useRef(null)
 
+  useEffect(() => {
+    if(!active) return
+
+    document.body.style.overflow = "hidden"
+
+    return () => {
+      document.body.style.overflow = "auto"
+    }
+  }, [active])
+
   const handleClose = () => {
     onClose && onClose()
   }
@@ -164,10 +202,10 @@ const Modal = ({
     <article
       className={clsx(classes.root, className, "active")}
       onClick={onModalBodyClick}
+      ref={ref}
     >
       <section
         data-testid={`modal-container-${testId}`}
-        ref={ref}
         style={
           maxWidth && typeof maxWidth == "number"
             ? {
@@ -176,11 +214,7 @@ const Modal = ({
             }
             : {}
         }
-        className={clsx(
-          classes.inner,
-          injectedClass?.inner,
-          typeof maxWidth != "number" ? maxWidth : ""
-        )}
+        className={clsx(classes.wrapper, typeof maxWidth != "number" ? maxWidth : "")}
       >
         {closePosition !== "none" && (
           <div
@@ -190,7 +224,14 @@ const Modal = ({
             <CloseSvg />
           </div>
         )}
-        {children}
+        <ModalBase injectedClassInner={injectedClass?.inner}>
+          {children}
+        </ModalBase>
+        {subModal && (
+          <ModalBase injectedClassInner={clsx(injectedClass?.subModalInner, "subModal")}>
+            {subModal}
+          </ModalBase>
+        )}
       </section>
     </article>
   )

packages/common-components/src/Scroll/index.ts

@@ -1 +1,2 @@
 export { useScrollToTop } from "./ScrollToTop.hook"
+export { useOnScroll } from "./useOnScroll.hook"