From 241d0409f6d93c7ebbfe6738c344e1ab16f556ec Mon Sep 17 00:00:00 2001 From: Jack Works Date: Fri, 25 Mar 2022 00:07:42 +0800 Subject: [PATCH] fix: plugin wrapper --- .../CompositionDialog/CompositionUI.tsx | 5 +- .../CompositionDialog/PluginEntryRender.tsx | 9 ++-- .../CompositionDialog/TypedMessageEditor.tsx | 47 +++++++++---------- packages/mask/src/components/shared/Image.tsx | 5 +- .../plugins/ITO/SNSAdaptor/RegionSelect.tsx | 16 ++++--- .../mask/src/plugins/MaskPluginWrapper.tsx | 18 ++++++- .../twitter.com/utils/selector.ts | 2 +- .../src/utils/createInjectHooksRenderer.tsx | 12 +++-- 8 files changed, 67 insertions(+), 47 deletions(-) diff --git a/packages/mask/src/components/CompositionDialog/CompositionUI.tsx b/packages/mask/src/components/CompositionDialog/CompositionUI.tsx index 18bb65e04ecd..7da4567a6222 100644 --- a/packages/mask/src/components/CompositionDialog/CompositionUI.tsx +++ b/packages/mask/src/components/CompositionDialog/CompositionUI.tsx @@ -106,8 +106,7 @@ export const CompositionDialogUI = forwardRef( }) }, []) - useImperativeHandle( - ref, + const refItem = useMemo( (): CompositionRef => ({ setMessage: (msg) => { if (Editor.current) Editor.current.value = msg @@ -119,6 +118,8 @@ export const CompositionDialogUI = forwardRef( [reset], ) + useImperativeHandle(ref, () => refItem, [refItem]) + const context = useMemo( (): CompositionContext => ({ attachMetadata: (meta, data) => Editor.current?.attachMetadata(meta, data), diff --git a/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx b/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx index 5d9e55775a7a..5db488b0ef98 100644 --- a/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx +++ b/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx @@ -12,7 +12,7 @@ import { RedPacketPluginID } from '../../plugins/RedPacket/constants' import { ITO_PluginID } from '../../plugins/ITO/constants' import { ClickableChip } from '../shared/SelectRecipients/ClickableChip' import { makeStyles } from '@masknet/theme' -import { useCallback, useState, useRef, forwardRef, memo, useImperativeHandle } from 'react' +import { useCallback, useState, useRef, forwardRef, memo, useImperativeHandle, useMemo } from 'react' import { useChainId } from '@masknet/web3-shared-evm' import { Trans } from 'react-i18next' const useStyles = makeStyles()({ @@ -60,8 +60,7 @@ export const PluginEntryRender = memo( function useSetPluginEntryRenderRef(ref: React.ForwardedRef) { const pluginRefs = useRef>({}) - useImperativeHandle( - ref, + const refItem: PluginEntryRenderRef = useMemo( () => ({ openPlugin: function openPlugin(id: string, tryTimes = 4) { const ref = pluginRefs.current[id] @@ -74,13 +73,15 @@ function useSetPluginEntryRenderRef(ref: React.ForwardedRef refItem, [refItem]) const trackPluginRef = (pluginID: string) => (ref: PluginRef | null) => { pluginRefs.current = { ...pluginRefs.current, [pluginID]: ref } } return [trackPluginRef] } function useSetPluginRef(ref: React.ForwardedRef, onClick: () => void) { - useImperativeHandle(ref, () => ({ open: onClick }), [onClick]) + const refItem = useMemo(() => ({ open: onClick }), [onClick]) + useImperativeHandle(ref, () => refItem, [refItem]) } type PluginRef = { open(): void } diff --git a/packages/mask/src/components/CompositionDialog/TypedMessageEditor.tsx b/packages/mask/src/components/CompositionDialog/TypedMessageEditor.tsx index d8c2b2541e77..0e1f0d9da9f5 100644 --- a/packages/mask/src/components/CompositionDialog/TypedMessageEditor.tsx +++ b/packages/mask/src/components/CompositionDialog/TypedMessageEditor.tsx @@ -8,7 +8,7 @@ import { } from '@masknet/typed-message' import { makeStyles } from '@masknet/theme' import { InputBase, Alert, Button } from '@mui/material' -import { useCallback, useImperativeHandle, useState, useRef, forwardRef, memo } from 'react' +import { useCallback, useImperativeHandle, useState, useRef, forwardRef, memo, useMemo } from 'react' import { useI18N } from '../../utils' import { BadgeRenderer } from './BadgeRenderer' @@ -81,30 +81,27 @@ export const TypedMessageEditor = memo( }, [setMessage], ) - useImperativeHandle( - ref, - (): TypedMessageEditorRef => { - return { - get estimatedLength() { - // TODO: we should count metadata into the estimated size - if (isTypedMessageText(currentValue.current)) return currentValue.current.content.length - return 0 - }, - get value() { - return currentValue.current - }, - set value(val) { - setMessage(val) - }, - reset: () => setMessage(emptyMessage), - attachMetadata(meta, data) { - setMessage(editTypedMessageMeta(currentValue.current, (map) => map.set(meta, data))) - }, - dropMetadata: deleteMetaID, - } - }, - [setMessage, deleteMetaID], - ) + const refItem = useMemo((): TypedMessageEditorRef => { + return { + get estimatedLength() { + // TODO: we should count metadata into the estimated size + if (isTypedMessageText(currentValue.current)) return currentValue.current.content.length + return 0 + }, + get value() { + return currentValue.current + }, + set value(val) { + setMessage(val) + }, + reset: () => setMessage(emptyMessage), + attachMetadata(meta, data) { + setMessage(editTypedMessageMeta(currentValue.current, (map) => map.set(meta, data))) + }, + dropMetadata: deleteMetaID, + } + }, [setMessage, deleteMetaID]) + useImperativeHandle(ref, () => refItem, [refItem]) if (!isTypedMessageText(value)) { const reset = () => setAsText('') diff --git a/packages/mask/src/components/shared/Image.tsx b/packages/mask/src/components/shared/Image.tsx index 00da7a77d999..38e79eb2aedf 100644 --- a/packages/mask/src/components/shared/Image.tsx +++ b/packages/mask/src/components/shared/Image.tsx @@ -1,4 +1,4 @@ -import { useRef, useEffect, forwardRef, useImperativeHandle, useState } from 'react' +import { useRef, useEffect, forwardRef, useImperativeHandle, useState, useMemo } from 'react' import { useAsync } from 'react-use' import Services from '../../extension/service' import { Skeleton, SkeletonProps } from '@mui/material' @@ -78,7 +78,8 @@ export const Image = forwardRef(function Image(props, outg const url: string | undefined = blobURL || (typeof src === 'string' ? src : undefined) useEffect(() => void (url && onURL?.(url)), [onURL, url]) - useImperativeHandle(outgoingRef, () => ({ canvas: canvasRef.current, img: imgRef.current }), []) + const outgoingRefItem = useMemo(() => ({ canvas: canvasRef.current, img: imgRef.current }), []) + useImperativeHandle(outgoingRef, () => outgoingRefItem, [outgoingRefItem]) // TODO: handle image loading error const { loading, error, value } = useAsync( diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/RegionSelect.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/RegionSelect.tsx index b53d0080d8f9..780fe7f27453 100644 --- a/packages/mask/src/plugins/ITO/SNSAdaptor/RegionSelect.tsx +++ b/packages/mask/src/plugins/ITO/SNSAdaptor/RegionSelect.tsx @@ -1,4 +1,4 @@ -import { useState, useRef, useCallback, forwardRef, useImperativeHandle } from 'react' +import { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo } from 'react' import type { InputBaseComponentProps } from '@mui/material' import { makeStyles } from '@masknet/theme' import { useDebounce } from 'react-use' @@ -80,11 +80,15 @@ export const RegionSelect = forwardRef(({ value = [], onRegionChange, ...props } }, []) const [minPopoverWidth, setMinPopoverWidth] = useState(0) - useImperativeHandle(ref, () => ({ - focus: () => { - displayRef.current?.focus() - }, - })) + const refItem = useMemo( + () => ({ + focus: () => { + displayRef.current?.focus() + }, + }), + [], + ) + useImperativeHandle(ref, () => refItem, [refItem]) const [filterText, setFilterText] = useState('') const [filteredRegions, setFilteredRegions] = useState(allRegions) diff --git a/packages/mask/src/plugins/MaskPluginWrapper.tsx b/packages/mask/src/plugins/MaskPluginWrapper.tsx index e193ca16bf5c..a029e4439a42 100644 --- a/packages/mask/src/plugins/MaskPluginWrapper.tsx +++ b/packages/mask/src/plugins/MaskPluginWrapper.tsx @@ -7,7 +7,13 @@ import { isTwitter } from '../social-network-adaptor/twitter.com/base' import { usePersonaConnectStatus } from '../components/DataSource/usePersonaConnectStatus' import { useI18N } from '../utils' import { Box } from '@mui/system' -import { usePluginI18NField, PluginI18NFieldRender, PluginWrapperComponent, Plugin } from '@masknet/plugin-infra' +import { + usePluginI18NField, + PluginI18NFieldRender, + PluginWrapperComponent, + Plugin, + PluginWrapperMethods, +} from '@masknet/plugin-infra' interface PluginWrapperProps extends React.PropsWithChildren<{}> { title: string @@ -137,7 +143,15 @@ export const MaskPostExtraPluginWrapper: PluginWrapperComponent(false) const [title, setTitle] = useState(undefined) - useImperativeHandle(ref, () => ({ setWidth, setWrap: setOpen, setWrapperName: setTitle }), []) + const refItem = useMemo((): PluginWrapperMethods => { + return { + setWidth, + setWrap: setOpen, + setWrapperName: setTitle, + } + }, []) + + useImperativeHandle(ref, () => refItem, [refItem]) if (!open) return <>{props.children} return ( diff --git a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts index 7382fbb7032f..f74e52a042c2 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts @@ -157,7 +157,7 @@ export const bioPageUserNickNameSelector = () => .map((x) => x.parentElement?.parentElement?.previousElementSibling) .querySelector('div[dir]') export const bioPageUserIDSelector = (selector: () => LiveSelector) => - selector().map((x) => (x.parentElement?.nextElementSibling as HTMLElement).innerText.replace('@', '')) + selector().map((x) => (x.parentElement?.nextElementSibling as HTMLElement)?.innerText?.replace('@', '')) export const floatingBioCardSelector = () => querySelector( '[style~="left:"] a[role=link] > div:first-child > div:first-child > div:first-child[dir="auto"]', diff --git a/packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx b/packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx index 5264eb6cfa97..2da5547361b3 100644 --- a/packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx +++ b/packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx @@ -3,7 +3,7 @@ import { ErrorBoundary } from '@masknet/shared-base-ui' import { ShadowRootIsolation } from '@masknet/theme' import type { Plugin } from '../types' import { usePluginI18NField, PluginWrapperComponent, PluginWrapperMethods } from '../hooks' -import { emptyPluginWrapperMethods, PluginWrapperMethodsContext } from '../hooks/usePluginWrapper' +import { PluginWrapperMethodsContext } from '../hooks/usePluginWrapper' type Inject = Plugin.InjectUI type Raw = Plugin.InjectUIRaw @@ -18,10 +18,12 @@ export function createInjectHooksRenderer(null) if (PluginWrapperComponent) { return ( - (ref === r ? void 0 : setRef(ref))}> - - {element} - + + {ref ? ( + + {element} + + ) : null} ) }