refactor(tsx): convert Snackbar components

Author: fabiovincenzi

src/ui/assets/jss/material-dashboard-react/components/snackbarContentStyle.js

@@ -0,0 +1,129 @@
+import { createStyles, Theme } from '@material-ui/core/styles';
+import {
+  defaultFont,
+  primaryBoxShadow,
+  infoBoxShadow,
+  successBoxShadow,
+  warningBoxShadow,
+  dangerBoxShadow,
+  roseBoxShadow,
+  whiteColor,
+  blackColor,
+  grayColor,
+  infoColor,
+  successColor,
+  dangerColor,
+  roseColor,
+  primaryColor,
+  warningColor,
+  hexToRgb,
+} from '../../material-dashboard-react';
+
+const snackbarContentStyle = (theme: Theme) =>
+  createStyles({
+    root: {
+      ...defaultFont,
+      flexWrap: 'unset',
+      position: 'relative' as const,
+      padding: '20px 15px',
+      lineHeight: '20px',
+      marginBottom: '20px',
+      fontSize: '14px',
+      backgroundColor: whiteColor,
+      color: grayColor[7],
+      borderRadius: '3px',
+      minWidth: 'unset',
+      maxWidth: 'unset',
+      boxShadow: `0 12px 20px -10px rgba(${hexToRgb(whiteColor)}, 0.28), 
+       0 4px 20px 0px rgba(${hexToRgb(blackColor)}, 0.12), 
+       0 7px 8px -5px rgba(${hexToRgb(whiteColor)}, 0.2)`,
+      fontWeight: 400,
+    },
+    top20: {
+      top: '20px',
+    },
+    top40: {
+      top: '40px',
+    },
+    info: {
+      backgroundColor: infoColor[3],
+      color: whiteColor,
+      ...infoBoxShadow,
+    },
+    success: {
+      backgroundColor: successColor[3],
+      color: whiteColor,
+      ...successBoxShadow,
+    },
+    warning: {
+      backgroundColor: warningColor[3],
+      color: whiteColor,
+      ...warningBoxShadow,
+    },
+    danger: {
+      backgroundColor: dangerColor[3],
+      color: whiteColor,
+      ...dangerBoxShadow,
+    },
+    primary: {
+      backgroundColor: primaryColor[3],
+      color: whiteColor,
+      ...primaryBoxShadow,
+    },
+    rose: {
+      backgroundColor: roseColor[3],
+      color: whiteColor,
+      ...roseBoxShadow,
+    },
+    message: {
+      padding: '0',
+      display: 'block' as const,
+      maxWidth: '89%',
+    },
+    close: {
+      width: '11px',
+      height: '11px',
+    },
+    iconButton: {
+      width: '24px',
+      height: '24px',
+      padding: '0px',
+    },
+    icon: {
+      display: 'block' as const,
+      left: '15px',
+      position: 'absolute' as const,
+      top: '50%',
+      marginTop: '-15px',
+      width: '30px',
+      height: '30px',
+    },
+    infoIcon: {
+      color: infoColor[3],
+    },
+    successIcon: {
+      color: successColor[3],
+    },
+    warningIcon: {
+      color: warningColor[3],
+    },
+    dangerIcon: {
+      color: dangerColor[3],
+    },
+    primaryIcon: {
+      color: primaryColor[3],
+    },
+    roseIcon: {
+      color: roseColor[3],
+    },
+    iconMessage: {
+      paddingLeft: '50px',
+      display: 'block' as const,
+    },
+    actionRTL: {
+      marginLeft: '-8px',
+      marginRight: 'auto',
+    },
+  });
+
+export default snackbarContentStyle;

src/ui/assets/jss/material-dashboard-react/components/snackbarContentStyle.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import Snack from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
@@ -9,31 +8,47 @@ import styles from '../../assets/jss/material-dashboard-react/components/snackba
 
 const useStyles = makeStyles(styles);
 
-export default function Snackbar(props) {
+type Color = 'info' | 'success' | 'warning' | 'danger' | 'primary';
+type Placement = 'tl' | 'tr' | 'tc' | 'br' | 'bl' | 'bc';
+
+interface SnackbarProps {
+  message: React.ReactNode;
+  color?: Color;
+  close?: boolean;
+  icon?: React.ComponentType<{ className: string }>;
+  place?: Placement;
+  open: boolean;
+  rtlActive?: boolean;
+  closeNotification: () => void;
+}
+
+const Snackbar: React.FC<SnackbarProps> = (props) => {
   const classes = useStyles();
-  const { message, color, close, icon, place, open, rtlActive } = props;
-  let action = [];
+  const { message, color = 'info', close, icon: Icon, place = 'tr', open, rtlActive } = props;
+
+  let action: React.ReactNode[] = [];
   const messageClasses = classNames({
-    [classes.iconMessage]: icon !== undefined,
+    [classes.iconMessage]: Icon !== undefined,
   });
-  if (close !== undefined) {
+
+  if (close) {
     action = [
       <IconButton
         className={classes.iconButton}
         key='close'
         aria-label='Close'
         color='inherit'
-        onClick={() => props.closeNotification()}
+        onClick={props.closeNotification}
       >
         <Close className={classes.close} />
       </IconButton>,
     ];
   }
 
-  const calculateHorizontal = () => {
-    if (place.indexOf('l') !== -1) {
+  const calculateHorizontal = (): 'left' | 'center' | 'right' => {
+    if (place.includes('l')) {
       return 'left';
-    } else if (place.indexOf('c') !== -1) {
+    } else if (place.includes('c')) {
       return 'center';
     }
     return 'right';
@@ -42,35 +57,26 @@ export default function Snackbar(props) {
   return (
     <Snack
       anchorOrigin={{
-        vertical: place.indexOf('t') === -1 ? 'bottom' : 'top',
+        vertical: place.includes('t') ? 'top' : 'bottom',
         horizontal: calculateHorizontal(),
       }}
       open={open}
       message={
         <div>
-          {icon !== undefined ? <props.icon className={classes.icon} /> : null}
+          {Icon && <Icon className={classes.icon} />}
           <span className={messageClasses}>{message}</span>
         </div>
       }
       action={action}
       ContentProps={{
         classes: {
-          root: classes.root + ' ' + classes[color],
+          root: `${classes.root} ${classes[color]}`,
           message: classes.message,
           action: classNames({ [classes.actionRTL]: rtlActive }),
         },
       }}
     />
   );
-}
-
-Snackbar.propTypes = {
-  message: PropTypes.node.isRequired,
-  color: PropTypes.oneOf(['info', 'success', 'warning', 'danger', 'primary']),
-  close: PropTypes.bool,
-  icon: PropTypes.object,
-  place: PropTypes.oneOf(['tl', 'tr', 'tc', 'br', 'bl', 'bc']),
-  open: PropTypes.bool,
-  rtlActive: PropTypes.bool,
-  closeNotification: PropTypes.func,
 };
+
+export default Snackbar;