Merge pull request #768 from imploy/stage

Release to PROD

packages/common-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chainsafe/common-components",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Common Components",
   "author": "Michael Yankelev <[email protected]>",
   "license": "GPL-3.0",
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@material-ui/styles": "^4.11.2",
+    "@types/react-scroll": "^1.8.2",
     "@types/react-select": "^3.0.27",
     "a11y-react-emoji": "^1.1.2",
     "clsx": "^1.1.1",
@@ -22,6 +23,7 @@
     "react-blockies": "^1.4.1",
     "react-dropzone": "^11.2.4",
     "react-router-dom": "^5.2.0",
+    "react-scroll": "^1.8.1",
     "react-select": "^3.1.1",
     "react-spinners": "^0.9.0",
     "reset-css": "^5.0.1",

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react"
 import clsx from "clsx"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
+import { Loading } from "../Spinner"
 
 const useStyles = makeStyles(
   ({ constants, typography, animation, palette, overrides }: ITheme) =>
@@ -232,6 +233,8 @@ interface IButtonProps extends Omit<ReactButton, "size"> {
   iconButton?: boolean
   size?: "large" | "medium" | "small"
   type?: "button" | "submit" | "reset"
+  loading?: boolean
+  loadingText?: string
 }
 
 const Button: React.FC<IButtonProps> = ({
@@ -242,6 +245,8 @@ const Button: React.FC<IButtonProps> = ({
   variant = "primary",
   disabled = false,
   size = "medium",
+  loading,
+  loadingText,
   ...rest
 }: IButtonProps) => {
   const classes = useStyles()
@@ -257,10 +262,15 @@ const Button: React.FC<IButtonProps> = ({
         iconButton && classes.icon,
         `${size}`,
       )}
-      disabled={disabled}
+      disabled={disabled || loading}
       {...rest}
     >
-      {children}
+      {loading && (
+        <>
+          <Loading type="inherit" size={16} />
+        </>
+      )}
+      {loading && loadingText ? loadingText : children}
     </button>
   )
 }

packages/common-components/src/Helpers/StringFormatters.ts

@@ -1 +1,19 @@
-export const formatBytes = (a: number, b: number = 2) => {if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][d]}
+export const formatBytes = (
+  sizeInBytes: number,
+  base: 2 | 10 = 10,
+  decimals: number = 2,
+) => {
+  if (0 === sizeInBytes) return "0 Bytes"
+  const c = 0 > decimals ? 0 : decimals
+  const units = base === 2 ? 1024 : 1000
+  const suffixes =
+    base === 2
+      ? ["Bytes", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]
+      : ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+  const d = Math.floor(Math.log(sizeInBytes) / Math.log(units))
+  return (
+    parseFloat((sizeInBytes / Math.pow(units, d)).toFixed(c)) +
+    " " +
+    suffixes[d]
+  )
+}

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

@@ -161,7 +161,7 @@ const Modal: React.FC<IModalProps> = ({
 
   useOnClickOutside(ref, () => handleClose())
 
-  return (
+  return active ? (
     <article
       className={clsx(
         classes.root,
@@ -202,7 +202,7 @@ const Modal: React.FC<IModalProps> = ({
         {children}
       </section>
     </article>
-  )
+  ) : null
 }
 
 export default Modal

packages/common-components/src/Scroll/ScrollToTop.hook.tsx

@@ -0,0 +1,14 @@
+import { useCallback, useEffect } from "react"
+import { animateScroll as scroll } from "react-scroll"
+
+export function useScrollToTop(onMount: boolean = false) {
+  const scrollToTop = useCallback(() => {
+    scroll.scrollToTop()
+  }, [])
+  if (onMount) {
+    useEffect(() => {
+      scrollToTop
+    }, [])
+  }
+  return scrollToTop
+}

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

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

packages/common-components/src/Spinner/Loading.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import { ITheme, useTheme } from "@chainsafe/common-theme"
+
+export interface ILoadingProps {
+  type?: "inherit" | "primary" | "dark" | "light"
+  size?: number
+  className?: string
+}
+
+const Loading: React.FC<ILoadingProps> = ({
+  type = "primary",
+  size = 64,
+  className,
+}) => {
+  const theme: ITheme = useTheme()
+  return (
+    <svg width={size} height={size} className={className} viewBox="0 0 100 100">
+      <defs>
+        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop
+            offset="0%"
+            stop-color={
+              type === "primary"
+                ? theme.palette.primary.main
+                : type === "dark"
+                ? theme.palette.common.black.main
+                : theme.palette.additional["gray"][5]
+            }
+          />
+          <stop
+            offset="100%"
+            stop-color={
+              type === "light" ? theme.palette.common.white.main : "transparent"
+            }
+          />
+        </linearGradient>
+      </defs>
+      <circle
+        cx="50"
+        cy="50"
+        r="47"
+        stroke="url(#gradient)"
+        stroke-width="6"
+        fill="none"
+        transform="rotate(90 50 50)"
+      >
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          dur="1s"
+          from="0 50 50"
+          to="360 50 50"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </svg>
+  )
+}
+
+export default Loading

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

@@ -1,2 +1,4 @@
 export { default as Spinner } from "./Spinner"
+export { default as Loading } from "./Loading"
 export * from "./Spinner"
+export * from "./Loading"

packages/common-components/src/TextInput/FormikTextInput.tsx

@@ -7,45 +7,51 @@ export interface FormikTextInputProps
   name: string
 }
 
-const FormikTextInput: React.FC<FormikTextInputProps> = ({
-  className,
-  inputVariant = "default",
-  type = "text",
-  placeholder,
-  name,
-  size,
-  label,
-  labelClassName,
-  disabled = false,
-  autoFocus,
-  captionMessage,
-  ...rest
-}: FormikTextInputProps) => {
-  const [field, meta, helpers] = useField(name)
-  return (
-    <TextInput
-      label={label ? label : field.name}
-      inputVariant={inputVariant}
-      disabled={disabled}
-      type={type}
-      size={size}
-      className={className}
-      labelClassName={labelClassName}
-      name={field.name}
-      value={field.value}
-      placeholder={placeholder}
-      captionMessage={
-        <>
-          {captionMessage && captionMessage}
-          {meta.touched && meta.error && `${meta.error}`}
-        </>
-      }
-      state={meta.error ? "error" : undefined}
-      onChange={helpers.setValue}
-      autoFocus={autoFocus}
-      {...rest}
-    />
-  )
-}
+const FormikTextInput = React.forwardRef(
+  (
+    {
+      className,
+      inputVariant = "default",
+      type = "text",
+      placeholder,
+      name,
+      size,
+      label,
+      labelClassName,
+      disabled = false,
+      autoFocus,
+      captionMessage,
+      ...rest
+    }: FormikTextInputProps,
+    forwardedRef: any,
+  ) => {
+    const [field, meta, helpers] = useField(name)
+    return (
+      <TextInput
+        label={label ? label : field.name}
+        inputVariant={inputVariant}
+        disabled={disabled}
+        type={type}
+        size={size}
+        className={className}
+        labelClassName={labelClassName}
+        name={field.name}
+        value={field.value}
+        placeholder={placeholder}
+        captionMessage={
+          <>
+            {captionMessage && captionMessage}
+            {meta.touched && meta.error && `${meta.error}`}
+          </>
+        }
+        state={meta.error ? "error" : undefined}
+        onChange={helpers.setValue}
+        autoFocus={autoFocus}
+        ref={forwardedRef}
+        {...rest}
+      />
+    )
+  },
+)
 
 export default FormikTextInput