refactor: avoid prop drilling (#6083)

DimensionDev · Apr 15, 2022 · 1e1da2d · 1e1da2d
1 parent 714147d
commit 1e1da2d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 32 deletions.
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
 }))
 
 export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly [number, (next: number) => void] }) {
-    const { origin, onNext, onChange, onClose, SelectMenuProps, state } = props
+    const { origin, onNext, onChange, onClose, state } = props
     const { t } = useI18N()
     const { classes } = useStyles({ snsId: activatedSocialNetworkUI.networkIdentifier })
     const chainId = useChainId()
@@ -63,15 +63,7 @@ export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly
                         <span>{t('plugin_red_packet_erc20_tab_title')}</span>
                     </div>
                 ),
-                children: (
-                    <RedPacketERC20Form
-                        origin={origin}
-                        onClose={onClose}
-                        onNext={onNext}
-                        onChange={onChange}
-                        SelectMenuProps={SelectMenuProps}
-                    />
-                ),
+                children: <RedPacketERC20Form origin={origin} onClose={onClose} onNext={onNext} onChange={onChange} />,
                 sx: { p: 0 },
             },
             {

diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
@@ -1,17 +1,7 @@
-import { useState, useCallback, useRef, useMemo, useEffect } from 'react'
-import { DialogContent } from '@mui/material'
-import { usePortalShadowRoot, makeStyles } from '@masknet/theme'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { useCompositionContext } from '@masknet/plugin-infra/content-script'
 import { InjectedDialog } from '@masknet/shared'
-import { useI18N } from '../../../utils'
-import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
-import { RedPacketJSONPayload, DialogTabs, RedPacketRecord, RpTypeTabs } from '../types'
-import { RedPacketRPC } from '../messages'
-import { RedPacketMetaKey } from '../constants'
-import { RedPacketCreateNew } from './RedPacketCreateNew'
-import { RedPacketPast } from './RedPacketPast'
-import Services from '../../../extension/service'
-import Web3Utils from 'web3-utils'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { makeStyles } from '@masknet/theme'
 import {
     formatBalance,
     getChainName,
@@ -22,11 +12,21 @@ import {
     useRedPacketConstants,
     useWeb3,
 } from '@masknet/web3-shared-evm'
-import { RedPacketSettings, useCreateCallback } from './hooks/useCreateCallback'
+import { DialogContent } from '@mui/material'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Web3Utils from 'web3-utils'
 import { useCurrentIdentity } from '../../../components/DataSource/useActivatedUI'
+import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
+import Services from '../../../extension/service'
+import { useI18N } from '../../../utils'
 import { WalletMessages } from '../../Wallet/messages'
+import { RedPacketMetaKey } from '../constants'
+import { RedPacketRPC } from '../messages'
+import { DialogTabs, RedPacketJSONPayload, RedPacketRecord, RpTypeTabs } from '../types'
+import { RedPacketSettings, useCreateCallback } from './hooks/useCreateCallback'
 import { RedPacketConfirmDialog } from './RedPacketConfirmDialog'
-import { useCompositionContext } from '@masknet/plugin-infra/content-script'
+import { RedPacketCreateNew } from './RedPacketCreateNew'
+import { RedPacketPast } from './RedPacketPast'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -244,16 +244,15 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
         tabs: [
             {
                 label: t('plugin_red_packet_create_new'),
-                children: usePortalShadowRoot((container) => (
+                children: (
                     <RedPacketCreateNew
                         origin={settings}
                         onNext={onNext}
                         state={tokenState}
                         onClose={onClose}
                         onChange={onChange}
-                        SelectMenuProps={{ container }}
                     />
-                )),
+                ),
                 sx: { p: 0 },
             },
             {

diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
@@ -10,10 +10,10 @@ import {
     useNativeTokenDetailed,
     useRedPacketConstants,
 } from '@masknet/web3-shared-evm'
-import { FormControl, InputLabel, MenuItem, MenuProps, Select, TextField } from '@mui/material'
+import { FormControl, InputLabel, MenuItem, Select, TextField } from '@mui/material'
 import BigNumber from 'bignumber.js'
 import { omit } from 'lodash-unified'
-import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
+import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { usePickToken } from '@masknet/shared'
 import { useCurrentIdentity } from '../../../components/DataSource/useActivatedUI'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
@@ -75,7 +75,6 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface RedPacketFormProps extends withClasses<never> {
-    SelectMenuProps?: Partial<MenuProps>
     onChange(settings: RedPacketSettings): void
     onClose: () => void
     origin?: RedPacketSettings
@@ -184,13 +183,16 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
         onNext()
     }, [creatingParams, onChange, onNext])
 
+    const selectRef = useRef(null)
+
     if (!token) return null
     return (
         <>
             <div className={classes.field}>
                 <FormControl className={classes.input} variant="outlined">
                     <InputLabel className={classes.selectShrinkLabel}>{t('plugin_red_packet_split_mode')}</InputLabel>
                     <Select
+                        ref={selectRef}
                         value={isRandom ? 1 : 0}
                         onChange={(e) => {
                             // foolproof, reset amount since the meaning of amount changed:
@@ -199,7 +201,12 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
                             setRandom(e.target.value as number)
                         }}
                         MenuProps={{
-                            ...props.SelectMenuProps,
+                            anchorOrigin: {
+                                vertical: 'bottom',
+                                horizontal: 'center',
+                            },
+                            container: selectRef.current,
+                            anchorEl: selectRef.current,
                         }}>
                         <MenuItem value={0}>{t('plugin_red_packet_average')}</MenuItem>
                         <MenuItem value={1}>{t('plugin_red_packet_random')}</MenuItem>