From 5f73a49994f93e50d3ecf49d026bc31f7757790e Mon Sep 17 00:00:00 2001 From: Hossein Dehnokhalaji Date: Sun, 8 Mar 2020 16:52:37 +0000 Subject: [PATCH] Type util functions --- .eslintrc | 9 +++++- src/SnackbarItem/SnackbarItem.util.js | 38 ------------------------ src/SnackbarItem/SnackbarItem.util.ts | 42 +++++++++++++++++++++++++++ src/utils/constants.ts | 17 +++++++++-- src/utils/defaultIconVariants.tsx | 4 +-- 5 files changed, 67 insertions(+), 43 deletions(-) delete mode 100644 src/SnackbarItem/SnackbarItem.util.js create mode 100644 src/SnackbarItem/SnackbarItem.util.ts diff --git a/.eslintrc b/.eslintrc index af0c9137..cf5f1ea5 100644 --- a/.eslintrc +++ b/.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 + } + ] } } ], diff --git a/src/SnackbarItem/SnackbarItem.util.js b/src/SnackbarItem/SnackbarItem.util.js deleted file mode 100644 index df554d69..00000000 --- a/src/SnackbarItem/SnackbarItem.util.js +++ /dev/null @@ -1,38 +0,0 @@ -import classNames from 'classnames'; -import { allClasses } from '../utils/constants'; - -const DIRECTION = { - right: 'left', - left: 'right', - bottom: 'up', - top: 'down', -}; - -export const getTransitionDirection = (anchorOrigin) => { - if (anchorOrigin.horizontal !== 'center') { - return DIRECTION[anchorOrigin.horizontal]; - } - return DIRECTION[anchorOrigin.vertical]; -}; - -/** - * Filter classes object and return keys that are allowed in material-ui snackbar classes prop - */ -export const getSnackbarClasses = (classes) => { - const snackbarMuiClasses = Object.keys(classes) - .filter(key => allClasses.mui[key] !== undefined) - .reduce((obj, key) => ({ - ...obj, - [key]: classes[key], - }), {}); - - return { - ...snackbarMuiClasses, - root: classNames(snackbarMuiClasses.root, classes.wrappedRoot), - }; -}; - -export const getCollapseClasses = (classes, dense) => ({ - container: classes.collapseContainer, - wrapper: classNames(classes.collapseWrapper, { [classes.collapseWrapperDense]: dense }), -}); diff --git a/src/SnackbarItem/SnackbarItem.util.ts b/src/SnackbarItem/SnackbarItem.util.ts new file mode 100644 index 00000000..05cec0fc --- /dev/null +++ b/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 }), +}); diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 9e7aa47c..3f960d50 100644 --- a/src/utils/constants.ts +++ b/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; + container: Record; +} = { 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', diff --git a/src/utils/defaultIconVariants.tsx b/src/utils/defaultIconVariants.tsx index 1582461e..48cd867d 100644 --- a/src/utils/defaultIconVariants.tsx +++ b/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 = { success: , warning: , error: ,