From 570e073ad7677b1163c04777ab8256fb19524b75 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Fri, 11 Mar 2022 11:50:37 +0800
Subject: [PATCH] fix: don't pass the unrecognized prop isFacebook to a DOM
 element

closes #5554
---
 packages/mask/src/UIRoot.tsx                  |  2 +-
 .../theme/src/Components/Snackbar/index.tsx   | 23 ++++++++-----------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/mask/src/UIRoot.tsx b/packages/mask/src/UIRoot.tsx
index c7e3306adc14..1d6c6f6251e8 100644
--- a/packages/mask/src/UIRoot.tsx
+++ b/packages/mask/src/UIRoot.tsx
@@ -44,7 +44,7 @@ function MaskThemeProvider({ children, baseline, useTheme }: MaskThemeProvider)
                 disableWindowBlurListener={false}
                 anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                 children={jsx}
-                isFacebook={isFacebook(activatedSocialNetworkUI)}
+                offsetY={isFacebook(activatedSocialNetworkUI) ? 80 : undefined}
             />
         ),
         baseline
diff --git a/packages/theme/src/Components/Snackbar/index.tsx b/packages/theme/src/Components/Snackbar/index.tsx
index 7bb3a85acb97..2b3a8b40a9d3 100644
--- a/packages/theme/src/Components/Snackbar/index.tsx
+++ b/packages/theme/src/Components/Snackbar/index.tsx
@@ -26,10 +26,10 @@ export { SnackbarProvider, useSnackbar } from 'notistack'
 export type { VariantType, OptionsObject, SnackbarKey, SnackbarMessage } from 'notistack'
 
 interface StyleProps {
-    isFacebook?: boolean
+    offsetY?: number
 }
 
-const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { isFacebook }, refs) => {
+const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offsetY }, refs) => {
     const { palette } = theme
     const isDark = palette.mode === 'dark'
     const spinningAnimationKeyFrames = keyframes`
@@ -104,7 +104,7 @@ to {
     return {
         root: {
             zIndex: 9999,
-            transform: isFacebook ? 'translateY(80px)' : 'none',
+            transform: typeof offsetY !== undefined ? `translateY(${80}px)` : 'none',
             color: MaskColorVar.textLight,
             pointerEvents: 'inherit',
         },
@@ -172,7 +172,7 @@ export interface CustomSnackbarContentProps {
     processing?: boolean
     variant?: VariantType
     action?: SnackbarAction
-    isFacebook?: boolean
+    offsetY?: number
     classes?: Partial<ReturnType<typeof useStyles>['classes']>
 }
 const IconMap: Record<VariantType, React.ReactNode> = {
@@ -184,7 +184,7 @@ const IconMap: Record<VariantType, React.ReactNode> = {
 }
 
 export const CustomSnackbarContent = forwardRef<HTMLDivElement, CustomSnackbarContentProps>((props, ref) => {
-    const classes = useStylesExtends(useStyles({ isFacebook: props.isFacebook ?? false }), props)
+    const classes = useStylesExtends(useStyles({ offsetY: props.offsetY }), props)
     const snackbar = useSnackbar()
     const loadingIcon = <LoadingIcon color="inherit" className={classes.spinning} />
     const variantIcon = props.processing ? loadingIcon : props.variant ? IconMap[props.variant] : null
@@ -214,9 +214,9 @@ export const CustomSnackbarContent = forwardRef<HTMLDivElement, CustomSnackbarCo
     )
 })
 
-export const CustomSnackbarProvider = memo<SnackbarProviderProps & { isFacebook?: boolean }>((props) => {
+export const CustomSnackbarProvider = memo<SnackbarProviderProps & { offsetY?: number }>(({ offsetY, ...rest }) => {
     const ref = useRef<SnackbarProvider>(null)
-    const { classes } = useStyles({ isFacebook: props.isFacebook ?? false })
+    const { classes } = useStyles({ offsetY: offsetY })
     const onDismiss = (key: string | number) => () => {
         ref.current?.closeSnackbar(key)
     }
@@ -229,12 +229,7 @@ export const CustomSnackbarProvider = memo<SnackbarProviderProps & { isFacebook?
             anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
             hideIconVariant
             content={(key, title) => (
-                <CustomSnackbarContent
-                    id={key}
-                    variant={props.variant ?? 'default'}
-                    title={title}
-                    isFacebook={props.isFacebook}
-                />
+                <CustomSnackbarContent id={key} variant={rest.variant ?? 'default'} title={title} offsetY={offsetY} />
             )}
             action={(key) => (
                 <IconButton size="large" onClick={onDismiss(key)} sx={{ color: 'inherit' }}>
@@ -248,7 +243,7 @@ export const CustomSnackbarProvider = memo<SnackbarProviderProps & { isFacebook?
                 variantInfo: classes.info,
                 variantWarning: classes.warning,
             }}
-            {...props}
+            {...rest}
         />
     )
 })