Support MUI v5 alpha (#333)

* Add mat snackbar * Add snackbar component * Allow any * Merge provider props. Remove Content props * Minor * Simpler content props * Move helper functions to their own file * Revert some changes * Move transition component one level up * Move defaults to constants file * Minor * Dont spread callbacks * Minor * sort out transition component, duration and props properties * Update tsdocs * Use transformer for container anchor origin * Add comment * Update typedoc * Attempt to stop spreading props * TSDX transpileOnly * Credit mui snackbar * Update docs * Update changelog
iamhosseindhv · Nov 26, 2020 · 424f57d · 424f57d
1 parent 6c6d49b
commit 424f57d
Show file tree

Hide file tree

Showing 12 changed files with 539 additions and 446 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -66,6 +66,8 @@
             },
             "rules": {
                 "@typescript-eslint/ban-ts-ignore": "off",
+                "@typescript-eslint/no-explicit-any": "off",
+                "@typescript-eslint/explicit-function-return-type": "off",
                 "@typescript-eslint/no-unused-vars": [
                     "warn",
                     {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 Thanks to all contributers who improved notistack by opening an issue/PR.
 
-### `notistack@1.0.2`
+### `notistack@1.0.3`
 ###### to be published
 * **@pctestjfarz**: Add swipe to dismiss feature [#138](https://github.com/iamhosseindhv/notistack/issues/138) 
 * **@molynerd**: Add support to update content of snackbar in place [#50](https://github.com/iamhosseindhv/notistack/issues/50)
@@ -9,6 +9,14 @@ Thanks to all contributers who improved notistack by opening an issue/PR.
 <br />
 
 
+### `notistack@1.0.2`
+###### November 26, 2020
+* Add support MUI v5 [#333](https://github.com/iamhosseindhv/notistack/pull/333) 
+
+
+<br />
+
+
 ### `notistack@1.0.1`
 ###### October 6, 2020
 * **@thierrysantos**: EnqueueSnackbar supports snackbar with key zero [#318](https://github.com/iamhosseindhv/notistack/pull/318)

diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
         "type": "git"
     },
     "scripts": {
-        "build": "tsdx build --entry ./src/index.js",
+        "build": "tsdx build --transpileOnly --entry ./src/index.js",
         "prebuild": "npm run docs",
         "prepublishOnly": "npm run build",
         "docs": "rimraf typedoc.json && typedoc --tsconfig",

diff --git a/src/SnackbarItem/Snackbar.js b/src/SnackbarItem/Snackbar.js
@@ -0,0 +1,113 @@
+/**
+ * @link https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Snackbar/Snackbar.js
+ */
+import * as React from 'react';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import { REASONS } from '../utils/constants';
+import useEventCallback from '../utils/useEventCallback';
+
+const Snackbar = React.forwardRef((props, ref) => {
+    const {
+        children,
+        autoHideDuration,
+        ClickAwayListenerProps,
+        disableWindowBlurListener = false,
+        onClose,
+        onMouseEnter,
+        onMouseLeave,
+        open,
+        resumeHideDuration,
+        ...other
+    } = props;
+
+    const timerAutoHide = React.useRef();
+
+    const handleClose = useEventCallback((...args) => {
+        if (onClose) {
+            onClose(...args);
+        }
+    });
+
+    const setAutoHideTimer = useEventCallback((autoHideDurationParam) => {
+        if (!onClose || autoHideDurationParam == null) {
+            return;
+        }
+
+        clearTimeout(timerAutoHide.current);
+        timerAutoHide.current = setTimeout(() => {
+            handleClose(null, REASONS.TIMEOUT);
+        }, autoHideDurationParam);
+    });
+
+    React.useEffect(() => {
+        if (open) {
+            setAutoHideTimer(autoHideDuration);
+        }
+
+        return () => {
+            clearTimeout(timerAutoHide.current);
+        };
+    }, [open, autoHideDuration, setAutoHideTimer]);
+
+    /**
+     * Pause the timer when the user is interacting with the Snackbar
+     * or when the user hide the window.
+     */
+    const handlePause = () => {
+        clearTimeout(timerAutoHide.current);
+    };
+
+    /**
+     * Restart the timer when the user is no longer interacting with the Snackbar
+     * or when the window is shown back.
+     */
+    const handleResume = React.useCallback(() => {
+        if (autoHideDuration != null) {
+            setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
+        }
+    }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
+
+    const handleMouseEnter = (event) => {
+        if (onMouseEnter) {
+            onMouseEnter(event);
+        }
+        handlePause();
+    };
+
+    const handleMouseLeave = (event) => {
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+        handleResume();
+    };
+
+    const handleClickAway = (event) => {
+        if (onClose) {
+            onClose(event, REASONS.CLICKAWAY);
+        }
+    };
+
+    React.useEffect(() => {
+        if (!disableWindowBlurListener && open) {
+            window.addEventListener('focus', handleResume);
+            window.addEventListener('blur', handlePause);
+
+            return () => {
+                window.removeEventListener('focus', handleResume);
+                window.removeEventListener('blur', handlePause);
+            };
+        }
+
+        return undefined;
+    }, [disableWindowBlurListener, handleResume, open]);
+
+    return (
+        <ClickAwayListener onClickAway={handleClickAway} {...ClickAwayListenerProps}>
+            <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} ref={ref} {...other}>
+                {children}
+            </div>
+        </ClickAwayListener>
+    );
+});
+
+export default Snackbar;