From 4944887d4a22237d34e1b8be1e8a63bf69525a9f Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Fri, 12 Aug 2022 18:51:56 +0800
Subject: [PATCH] fix: fix pendant popover obscured by screen

---
 .../editor-core/src/block-pendant/AddPendantPopover.tsx   | 8 +++++++-
 .../src/block-pendant/pendant-modify-panel/types.ts       | 1 +
 .../pendant-operation-panel/CreatePendantPanel.tsx        | 6 ++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
index 015f8a4120..ce5dc6cdc9 100644
--- a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
+++ b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
@@ -5,6 +5,7 @@ import {
     type PopoverProps,
     PopperHandler,
     Tag,
+    type PopperProps,
 } from '@toeverything/components/ui';
 import { TagsIcon } from '@toeverything/components/icons';
 
@@ -26,9 +27,11 @@ export const AddPendantPopover = ({
     ...popoverProps
 }: Props) => {
     const popoverHandlerRef = useRef<PopperHandler>();
+    const popperRef = useRef<any>();
     return (
         <Popover
-            ref={popoverHandlerRef}
+            popperHandlerRef={popoverHandlerRef}
+            popperRef={popperRef}
             content={
                 <CreatePendantPanel
                     block={block}
@@ -36,6 +39,9 @@ export const AddPendantPopover = ({
                         popoverHandlerRef.current?.setVisible(false);
                         onSure?.();
                     }}
+                    onTypeChange={() => {
+                        popperRef.current?.update?.();
+                    }}
                 />
             }
             placement="bottom-start"
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts
index a7ed9e0198..5afbb29ad5 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts
@@ -11,6 +11,7 @@ export type ModifyPanelProps = {
     iconConfig?: PendantConfig;
     isStatusSelect?: boolean;
     property?: RecastMetaProperty;
+    onTypeChange?: (type: PendantTypes) => void;
 };
 
 export type ModifyPanelContentProps = {
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
index 42e36e063f..88fd5b039f 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
@@ -24,9 +24,11 @@ import { useOnCreateSure } from './hooks';
 export const CreatePendantPanel = ({
     block,
     onSure,
+    onTypeChange,
 }: {
     block: AsyncBlock;
     onSure?: () => void;
+    onTypeChange?: (option: PendantOptions) => void;
 }) => {
     const [selectedOption, setSelectedOption] = useState<PendantOptions>();
     const [fieldName, setFieldName] = useState<string>('');
@@ -37,6 +39,10 @@ export const CreatePendantPanel = ({
             setFieldName(generateRandomFieldName(selectedOption.type));
     }, [selectedOption]);
 
+    useEffect(() => {
+        onTypeChange?.(selectedOption);
+    }, [selectedOption, onTypeChange]);
+
     return (
         <StyledPopoverWrapper>
             <StyledOperationTitle>Add Field</StyledOperationTitle>