Type util functions

.eslintrc

@@ -66,7 +66,14 @@
                 "project": "./tsconfig.json"
             },
             "rules": {
-                "@typescript-eslint/ban-ts-ignore": "off"
+                "@typescript-eslint/ban-ts-ignore": "off",
+                "@typescript-eslint/no-unused-vars": [
+                    "warn",
+                    {
+                        "args": "after-used",
+                        "ignoreRestSiblings": true
+                    }
+                ]
             }
         }
     ],

src/SnackbarItem/SnackbarItem.util.ts

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { SnackbarProps } from '@material-ui/core/Snackbar';
+import { allClasses } from '../utils/constants';
+import { SnackbarItemProps } from './SnackbarItem';
+import { Snack } from '../SnackbarProvider';
+
+const DIRECTION = {
+    right: 'left',
+    left: 'right',
+    bottom: 'up',
+    top: 'down',
+} as const;
+export type DirectionType = typeof DIRECTION[keyof typeof DIRECTION]
+
+export const getTransitionDirection = (anchorOrigin: Snack['anchorOrigin']): DirectionType => {
+    if (anchorOrigin.horizontal !== 'center') {
+        return DIRECTION[anchorOrigin.horizontal];
+    }
+    return DIRECTION[anchorOrigin.vertical];
+};
+
+/**
+ * Omit all class keys except those allowed in material-ui snackbar
+ */
+export const omitNonMuiKeys: (classes: { wrappedRoot: string } & SnackbarProps['classes']) => SnackbarProps['classes'] = (classes) => {
+    const snackbarMuiClasses = Object.keys(classes)
+        // @ts-ignore
+        .filter(key => allClasses.mui[key] !== undefined).reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {});
+
+    return {
+        ...snackbarMuiClasses,
+        root: classNames(classes.root, classes.wrappedRoot),
+    };
+};
+
+/**
+ * Omit all class keys except what we need for collapse component
+ */
+export const omitNonCollapseKeys = (classes: { collapseContainer: string; collapseWrapper: string; collapseWrapperDense: string }, dense: SnackbarItemProps['dense']): { container: string; wrapper: string } => ({
+    container: classes.collapseContainer,
+    wrapper: classNames(classes.collapseWrapper, { [classes.collapseWrapperDense]: dense }),
+});

src/utils/constants.ts

@@ -1,7 +1,12 @@
-import { CloseReason } from '../index';
+import { SnackbarClassKey } from '@material-ui/core/Snackbar';
+import { CloseReason, ContainerClassKey, SnackbarProviderProps } from '../index';
+import { SnackbarItemProps } from '../SnackbarItem';
 import { Snack } from '../SnackbarProvider';
 
-export const allClasses = {
+export const allClasses: {
+    mui: Record<SnackbarClassKey, {}>;
+    container: Record<ContainerClassKey, {}>;
+} = {
     mui: {
         root: {},
         anchorOriginTopCenter: {},
@@ -36,6 +41,14 @@ export const originKeyExtractor = (anchor: Snack['anchorOrigin']): string => (
     `${capitalise(anchor.vertical)}${capitalise(anchor.horizontal)}`
 );
 
+/**
+ * Omit SnackbarContainer class keys that are not needed for SnackbarItem
+ */
+export const omitContainerKeys = (classes: SnackbarProviderProps['classes'] = {}): SnackbarItemProps['classes'] => (
+    // @ts-ignore
+    Object.keys(classes).filter(key => !allClasses.container[key]).reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {})
+);
+
 export const REASONS: { [key: string]: CloseReason } = {
     CLICKAWAY: 'clickaway',
     MAXSNACK: 'maxsnack',

src/utils/defaultIconVariants.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
-import { VariantType } from '../index';
+import { IconVariant } from '../index';
 
 type Icon = (props: SvgIconProps) => JSX.Element;
 
@@ -44,7 +44,7 @@ const iconStyles = {
     marginRight: 8,
 };
 
-const defaultIconVariants: Partial<{ [key in VariantType]: JSX.Element }> = {
+const defaultIconVariants: Omit<IconVariant, 'default'> = {
     success: <CheckIcon style={iconStyles} />,
     warning: <WarningIcon style={iconStyles} />,
     error: <ErrorIcon style={iconStyles} />,