Merge pull request #24 from opendexnetwork/refactor/components

refactor: buttons

Author: maybeast

src/common/components/ConnectionFailed.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   createStyles,
   Grid,
   makeStyles,
@@ -10,6 +9,7 @@ import React, { ReactElement, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { Path } from "../../router/Path";
 import { isElectron, sendMessageToParent } from "../utils/appUtil";
+import Button from "./input/buttons/Button";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -48,9 +48,11 @@ const ConnectionFailed = (): ReactElement => {
         </Typography>
       </Grid>
       <Grid item className={classes.row}>
-        <Button variant="outlined" onClick={() => history.push(Path.DASHBOARD)}>
-          Try again
-        </Button>
+        <Button
+          text="Try Again"
+          variant="outlined"
+          onClick={() => history.push(Path.DASHBOARD)}
+        />
       </Grid>
     </Grid>
   );

src/common/components/data-display/LabeledRow.tsx

@@ -1,7 +1,8 @@
-import { Divider, Grid, IconButton, makeStyles } from "@material-ui/core";
+import { Divider, Grid, makeStyles } from "@material-ui/core";
 import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import React, { ReactElement } from "react";
 import { copyToClipboard } from "../../utils/appUtil";
+import IconButton from "../input/buttons/IconButton";
 
 type LabeledRowProps = {
   label: string;
@@ -36,10 +37,11 @@ const LabeledRow = (props: LabeledRowProps): ReactElement => {
       {reserveSpaceForCopyIcon && (
         <Grid item xs={2} className={classes.cell}>
           {showCopyIcon && (
-            /* IconButton */
-            <IconButton onClick={() => copyToClipboard(value)}>
-              <FileCopyOutlinedIcon fontSize="small" />
-            </IconButton>
+            <IconButton
+              icon={<FileCopyOutlinedIcon fontSize="small" />}
+              tooltipTitle="Copy to clipboard"
+              onClick={() => copyToClipboard(value)}
+            />
           )}
         </Grid>
       )}

src/common/components/data-display/QrCode.tsx

@@ -1,7 +1,6 @@
 import {
   createStyles,
   Grid,
-  IconButton,
   makeStyles,
   Paper,
   Theme,
@@ -10,6 +9,7 @@ import {
 import CloseIcon from "@material-ui/icons/Close";
 import QRCode from "qrcode.react";
 import React, { ReactElement } from "react";
+import IconButton from "../input/buttons/IconButton";
 
 type QrCodeProps = {
   value: string;
@@ -39,9 +39,11 @@ const QrCode = (props: QrCodeProps): ReactElement => {
   return (
     <Paper className={classes.container}>
       <Grid item container justify="flex-end">
-        <IconButton onClick={handleClose}>
-          <CloseIcon />
-        </IconButton>
+        <IconButton
+          icon={<CloseIcon />}
+          tooltipTitle="Close"
+          onClick={handleClose}
+        />
       </Grid>
       <Grid item container justify="center" alignItems="center">
         <Typography component="div" align="center">

src/common/components/data-display/WarningMessage.tsx

@@ -2,14 +2,14 @@ import {
   Card,
   createStyles,
   Grid,
-  IconButton,
   makeStyles,
   Theme,
   Typography,
 } from "@material-ui/core";
 import WarningIcon from "@material-ui/icons/Warning";
 import React, { ReactElement } from "react";
 import CloseIcon from "@material-ui/icons/Close";
+import IconButton from "../input/buttons/IconButton";
 
 type WarningMessageProps = {
   message: string;
@@ -80,12 +80,12 @@ const WarningMessage = (props: WarningMessageProps): ReactElement => {
               {showCloseIcon && (
                 <Grid item>
                   <IconButton
+                    icon={<CloseIcon />}
+                    tooltipTitle="Close"
                     color="inherit"
                     size="small"
                     onClick={() => (onClose ? onClose() : void 0)}
-                  >
-                    <CloseIcon />
-                  </IconButton>
+                  />
                 </Grid>
               )}
             </Grid>

src/common/components/data-display/feedback/Snackbar.tsx

@@ -1,12 +1,12 @@
 import {
-  IconButton,
   makeStyles,
   Snackbar as MaterialSnackbar,
   SnackbarContent,
 } from "@material-ui/core";
 import CloseIcon from "@material-ui/icons/Close";
 import React, { ReactElement, useEffect, useState } from "react";
 import { Subject } from "rxjs";
+import IconButton from "../../input/buttons/IconButton";
 
 type SnackbarProps = {
   message: string;
@@ -47,9 +47,11 @@ const Snackbar = (props: SnackbarProps): ReactElement => {
         className={classes.snackbarContent}
         message={message}
         action={
-          <IconButton onClick={() => setOpen(false)}>
-            <CloseIcon />
-          </IconButton>
+          <IconButton
+            icon={<CloseIcon />}
+            tooltipTitle="Close"
+            onClick={() => setOpen(false)}
+          />
         }
       />
     </MaterialSnackbar>

src/common/components/data-display/table/SortingOptions.tsx

@@ -4,12 +4,10 @@ import {
   createStyles,
   Fade,
   Grid,
-  IconButton,
   makeStyles,
   Paper,
   Popper,
   Theme,
-  Tooltip,
   Typography,
 } from "@material-ui/core";
 import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
@@ -18,6 +16,7 @@ import CloseIcon from "@material-ui/icons/Close";
 import SortIcon from "@material-ui/icons/Sort";
 import React, { ReactElement, useState } from "react";
 import { SortingOrder } from "../../../utils/SortingUtil";
+import IconButton from "../../input/buttons/IconButton";
 
 export type SortingOptionsProps<T> = {
   sortOpts: SortOption<T>[];
@@ -102,11 +101,12 @@ function SortingOptions<T>(props: SortingOptionsProps<T>): ReactElement {
     >
       <ClickAwayListener onClickAway={closeSortOptions}>
         <div>
-          <Tooltip title="Sort" placement="left">
-            <IconButton onClick={handleSortIconClick}>
-              {!sortOptsOpen ? <SortIcon /> : <CloseIcon />}
-            </IconButton>
-          </Tooltip>
+          <IconButton
+            tooltipTitle="Sort"
+            tooltipPlacement="left"
+            onClick={handleSortIconClick}
+            icon={sortOptsOpen ? <CloseIcon /> : <SortIcon />}
+          />
           <Popper
             open={sortOptsOpen}
             anchorEl={sortOptsAnchorEl}

src/common/components/data-display/table/Table.tsx

@@ -2,14 +2,14 @@ import {
   createStyles,
   Divider,
   Grid,
-  IconButton,
   makeStyles,
   Theme,
   Typography,
 } from "@material-ui/core";
 import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import React, { ReactElement } from "react";
 import { copyToClipboard } from "../../../utils/appUtil";
+import IconButton from "../../input/buttons/IconButton";
 import CenterEllipsis from "../CenterEllipsis";
 
 export type TableRow = {
@@ -106,6 +106,8 @@ function Table<T extends TableRow>(props: TableProps<T>): ReactElement {
                   <Grid container item wrap="nowrap" alignItems="center">
                     <CenterEllipsis text={row[column.key] + ""} />
                     <IconButton
+                      icon={<FileCopyOutlinedIcon fontSize="inherit" />}
+                      tooltipTitle="Copy to clipboard"
                       size="small"
                       className={classes.tableCellIcon}
                       onClick={() => {
@@ -116,9 +118,7 @@ function Table<T extends TableRow>(props: TableProps<T>): ReactElement {
                           );
                         }
                       }}
-                    >
-                      <FileCopyOutlinedIcon fontSize="inherit" />
-                    </IconButton>
+                    />
                   </Grid>
                 ) : (
                   <Typography

src/common/components/input/Password.tsx

@@ -1,13 +1,13 @@
 import {
   FormControl,
-  IconButton,
   InputAdornment,
   InputLabel,
   OutlinedInput,
 } from "@material-ui/core";
 import Visibility from "@material-ui/icons/Visibility";
 import VisibilityOff from "@material-ui/icons/VisibilityOff";
 import React, { ChangeEvent, ReactElement, useState } from "react";
+import IconButton from "./buttons/IconButton";
 
 type PasswordProps = {
   label?: string;
@@ -36,12 +36,12 @@ const Password = (props: PasswordProps): ReactElement => {
         endAdornment={
           <InputAdornment position="end">
             <IconButton
+              icon={showPassword ? <Visibility /> : <VisibilityOff />}
+              tooltipTitle={""}
               aria-label="toggle password visibility"
               onClick={() => setShowPassword(!showPassword)}
               edge="end"
-            >
-              {showPassword ? <Visibility /> : <VisibilityOff />}
-            </IconButton>
+            />
           </InputAdornment>
         }
       />

src/common/components/input/buttons/Button.tsx

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+import ButtonBase, { ButtonBaseProps } from "./ButtonBase";
+
+type ButtonProps = Omit<ButtonBaseProps, "variant"> & {
+  variant?: "contained" | "outlined";
+};
+
+const Button = (props: ButtonProps): ReactElement => {
+  const buttonBaseProps: ButtonBaseProps = {
+    variant: props.variant || "contained",
+    ...props,
+  };
+  return ButtonBase(buttonBaseProps);
+};
+
+export default Button;

src/common/components/input/buttons/ButtonBase.tsx

@@ -0,0 +1,42 @@
+import {
+  Button as MaterialButton,
+  ButtonProps,
+  Tooltip,
+} from "@material-ui/core";
+import React, { ReactElement } from "react";
+import { getFormattedTooltipTitle } from "../../../utils/uiUtil";
+
+export type ButtonBaseProps = ButtonProps & {
+  text: string;
+  tooltipTitle?: string | string[];
+  tooltipPlacement?: "left" | "right" | "bottom" | "top";
+};
+
+const ButtonBase = (props: ButtonBaseProps): ReactElement => {
+  const { text, tooltipTitle, tooltipPlacement, ...buttonProps } = props;
+
+  const materialButtonProps: ButtonProps = {
+    disableElevation: true,
+    children: text,
+    ...buttonProps,
+  };
+
+  return (
+    <>
+      {tooltipTitle ? (
+        <Tooltip
+          title={getFormattedTooltipTitle(tooltipTitle)}
+          placement={tooltipPlacement}
+        >
+          <span>
+            <MaterialButton {...materialButtonProps} />
+          </span>
+        </Tooltip>
+      ) : (
+        <MaterialButton {...materialButtonProps} />
+      )}
+    </>
+  );
+};
+
+export default ButtonBase;