Merge pull request #644 from smartxworks/perf/portal

perf(editor-sdk): add containerRef for portal

packages/editor-sdk/src/components/Widgets/PopoverWidget.tsx

@@ -4,6 +4,7 @@ import React, {
   useMemo,
   useCallback,
   useImperativeHandle,
+  useRef,
 } from 'react';
 import {
   Popover,
@@ -20,7 +21,10 @@ import { SpecWidget } from './SpecWidget';
 import { implementWidget } from '../../utils/widget';
 import { WidgetProps } from '../../types/widget';
 import { CORE_VERSION, CoreWidgetName } from '@sunmao-ui/shared';
-import { PREVENT_POPOVER_WIDGET_CLOSE_CLASS } from '../../constants/widget';
+import {
+  PREVENT_POPOVER_WIDGET_CLOSE_CLASS,
+  ComponentFormElementId,
+} from '../../constants';
 
 type EvenType = {
   'sub-popover-close': string[];
@@ -52,6 +56,7 @@ export const PopoverWidget = React.forwardRef<
   React.ComponentPropsWithoutRef<React.ComponentType> & WidgetProps<PopoverWidgetType>
 >((props, ref) => {
   const { spec, path, children } = props;
+  const containerRef = useRef(document.getElementById(ComponentFormElementId) || null);
   const isObjectChildren = children && typeof children === 'object';
   const [isInit, setIsInit] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -171,7 +176,7 @@ export const PopoverWidget = React.forwardRef<
           />
         )}
       </PopoverTrigger>
-      <Portal>
+      <Portal containerRef={containerRef}>
         <PopoverContent
           width="sm"
           className={PREVENT_POPOVER_WIDGET_CLOSE_CLASS}

packages/editor-sdk/src/components/Widgets/StyleWidgets/ColorWidget.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useRef } from 'react';
 import { CORE_VERSION, StyleWidgetName } from '@sunmao-ui/shared';
 import { WidgetProps } from '../../../types/widget';
 import { implementWidget, mergeWidgetOptionsIntoSpec } from '../../../utils/widget';
@@ -14,6 +14,7 @@ import {
   PopoverBody,
   Portal,
 } from '@chakra-ui/react';
+import { ComponentFormElementId } from '../../../constants';
 
 type ColorWidgetType = `${typeof CORE_VERSION}/${StyleWidgetName.Color}`;
 
@@ -32,6 +33,7 @@ const SketchPicker = React.lazy(async () => {
 
 export const ColorWidget: React.FC<WidgetProps<ColorWidgetType, string>> = props => {
   const { value, onChange } = props;
+  const containerRef = useRef(document.getElementById(ComponentFormElementId) || null);
   const onColorChange = ({ rgb }: any) => {
     onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`);
   };
@@ -62,7 +64,7 @@ export const ColorWidget: React.FC<WidgetProps<ColorWidgetType, string>> = props
               boxShadow="rgba(149, 157, 165, 0.2) 0px 8px 24px"
             />
           </PopoverTrigger>
-          <Portal>
+          <Portal containerRef={containerRef}>
             <PopoverContent w="auto">
               <PopoverArrow />
               <PopoverBody padding={0}>

packages/editor-sdk/src/constants/index.ts

@@ -3,4 +3,7 @@ export {
   CORE_VERSION,
   CoreWidgetName,
 } from '@sunmao-ui/shared';
+
+export const ComponentFormElementId = 'sunmao-component-form';
+
 export { PREVENT_POPOVER_WIDGET_CLOSE_CLASS } from './widget';

packages/editor/src/components/ComponentForm/ComponentForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Accordion, Input, Text, VStack } from '@chakra-ui/react';
-import { SpecWidget } from '@sunmao-ui/editor-sdk';
+import { ComponentFormElementId, SpecWidget } from '@sunmao-ui/editor-sdk';
 import { parseType } from '@sunmao-ui/core';
 import { generateDefaultValueFromSpec } from '@sunmao-ui/shared';
 import { css } from '@emotion/css';
@@ -133,6 +133,7 @@ export const ComponentForm: React.FC<Props> = observer(props => {
   return (
     <ErrorBoundary>
       <Accordion
+        id={ComponentFormElementId}
         reduceMotion
         className={ComponentFormStyle}
         defaultIndex={sections.map((_, i) => i)}

packages/editor/src/components/ComponentForm/GeneralTraitFormList/AddTraitButton.tsx

@@ -9,9 +9,10 @@ import {
   Portal,
 } from '@chakra-ui/react';
 import { RegistryInterface } from '@sunmao-ui/runtime';
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { hideCreateTraitsList } from '../../../constants';
 import { ComponentSchema } from '@sunmao-ui/core';
+import { ComponentFormElementId } from '@sunmao-ui/editor-sdk';
 
 type Props = {
   registry: RegistryInterface;
@@ -21,6 +22,7 @@ type Props = {
 
 export const AddTraitButton: React.FC<Props> = props => {
   const { onAddTrait, registry, component } = props;
+  const containerRef = useRef(document.getElementById(ComponentFormElementId) || null);
   const componentTraitsMap = useMemo(
     () =>
       component.traits.reduce((result, trait) => {
@@ -48,7 +50,7 @@ export const AddTraitButton: React.FC<Props> = props => {
   });
   return (
     <Box>
-      <Menu>
+      <Menu isLazy>
         <MenuButton
           as={Button}
           aria-label="add event"
@@ -59,7 +61,7 @@ export const AddTraitButton: React.FC<Props> = props => {
         >
           Add Trait
         </MenuButton>
-        <Portal>
+        <Portal containerRef={containerRef}>
           <MenuList>{menuItems}</MenuList>
         </Portal>
       </Menu>

packages/editor/src/components/DataSource/DataSource.tsx

@@ -73,7 +73,7 @@ export const DataSource: React.FC<Props> = props => {
           DataSource
         </Text>
         <Spacer />
-        <Menu>
+        <Menu isLazy>
           <MenuButton
             as={IconButton}
             aria-label="add event"