fix : popover flash move bug

package.json

@@ -83,6 +83,7 @@
     "umi": "^3.2.19",
     "video-react": "^0.14.1",
     "xlsx": "^0.16.7",
+    "yh-react-popover": "^0.2.0",
     "yorkie": "^2.0.0",
     "zarm": "^2.5.1"
   },

src/components/PanelComponents/FormEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, RefObject, useEffect } from 'react';
 import { Form, Select, InputNumber, Input, Switch, Radio, Button } from 'antd';
 import Upload from '../Upload';
 import DataList from '../DataList';
@@ -33,10 +33,11 @@ interface FormEditorProps {
   onDel: Function;
   defaultValue: { [key: string]: any };
   config: Array<any>;
+  rightPannelRef: RefObject<HTMLDivElement>;
 }
 
 const FormEditor = (props: FormEditorProps) => {
-  const { config, defaultValue, onSave, onDel, uid } = props;
+  const { config, defaultValue, onSave, onDel, uid, rightPannelRef } = props;
   const onFinish = (values: Store) => {
     onSave && onSave(values);
   };
@@ -157,7 +158,7 @@ const FormEditor = (props: FormEditorProps) => {
             )}
             {item.type === 'FormItems' && (
               <Form.Item name={item.key} valuePropName="formList">
-                <FormItems data={item.data} />
+                <FormItems data={item.data} rightPannelRef={rightPannelRef} />
               </Form.Item>
             )}
           </React.Fragment>

src/components/PanelComponents/FormItems/FormItems.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import React, { memo, RefObject, useCallback, useEffect, useState } from 'react';
 import BaseForm from '../../BasicShop/BasicComponents/Form/BaseForm';
 import BasePopoverForm from '../../BasicShop/BasicComponents/Form/BasePopoverForm';
 import EditorModal from './EditorModal';
@@ -6,8 +6,8 @@ import { MinusCircleFilled, EditFilled, PlusOutlined } from '@ant-design/icons';
 import styles from './formItems.less';
 import { baseFormUnion, TFormItemsDefaultType } from '../FormEditor/types';
 import { uuid } from '@/utils/tool';
-import { Button, Popover } from 'antd';
-
+import { Button } from 'antd';
+import MyPopover from 'yh-react-popover';
 // import { Popconfirm } from 'antd';
 
 const formTpl: TFormItemsDefaultType = [
@@ -60,24 +60,27 @@ interface FormItemsProps {
   formList?: TFormItemsDefaultType;
   onChange?: (v: TFormItemsDefaultType) => void;
   data: any;
+  rightPannelRef: RefObject<HTMLDivElement>;
 }
 
 const FormItems = (props: FormItemsProps) => {
-  const { formList, onChange } = props;
+  const { formList, onChange, rightPannelRef } = props;
   const [formData, setFormData] = useState<TFormItemsDefaultType>(formList || []);
   const [visible, setVisible] = useState(false);
   const [curItem, setCurItem] = useState<baseFormUnion>();
-  const [isFormTplVisible, setFormTplVisible] = useState(false);
+  const [force, setforce] = useState<{ force: Function }>({
+    force: () => {},
+  });
 
   const handleAddItem = (item: baseFormUnion) => {
     let tpl = formTpl.find(v => v.type === item.type);
     let newData = [...formData, { ...tpl!, id: uuid(6, 10) }];
     setFormData(newData);
     onChange && onChange(newData);
+    force.force();
   };
 
   const handleEditItem = (item: baseFormUnion) => {
-    console.log(item);
     setVisible(true);
     setCurItem(item);
   };
@@ -94,9 +97,28 @@ const FormItems = (props: FormItemsProps) => {
     onChange && onChange(newData);
     setVisible(false);
   };
-  const handleVisibleChange = (visible: boolean) => {
-    setFormTplVisible(visible);
-  };
+
+  const callback = useCallback((v: Function) => {
+    console.log(v);
+    setforce({ force: v });
+  }, []);
+
+  useEffect(() => {
+    let listenner: (e: Event) => void;
+    if (rightPannelRef.current) {
+      listenner = () => {
+        force.force();
+      };
+      rightPannelRef.current.addEventListener('scroll', listenner);
+    }
+    return () => {
+      if (rightPannelRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        rightPannelRef.current.removeEventListener('scroll', listenner);
+      }
+    };
+  }, [force, rightPannelRef]);
+
   return (
     <div className={styles.formItemWrap}>
       <div className={styles.formTitle}>表单控件</div>
@@ -122,7 +144,7 @@ const FormItems = (props: FormItemsProps) => {
           );
         })}
         <div className={styles.formAddWrap}>
-          <Popover
+          <MyPopover
             content={
               <>
                 <div className={styles.formTpl} style={{ color: 'red' }}>
@@ -148,19 +170,15 @@ const FormItems = (props: FormItemsProps) => {
                 {/* <a style={{color: 'red'}} onClick={() => setFormTplVisible(false)}>Close</a> */}
               </>
             }
-            color="#4A4A4A"
-            overlayStyle={{ width: '200px' }}
-            // title="表单模板"
-            trigger="click"
-            placement="left"
-            visible={isFormTplVisible}
-            autoAdjustOverflow
-            onVisibleChange={handleVisibleChange}
+            directions={'LB'}
+            innerConstDomStyle={{ display: 'block' }}
+            constDomStyle={{ display: 'block' }}
+            callback={callback}
           >
-            <Button block icon={<PlusOutlined />}>
+            <Button style={{ width: '100%' }} block icon={<PlusOutlined />}>
               添加
             </Button>
-          </Popover>
+          </MyPopover>
         </div>
       </div>
 

src/pages/editor/Container.tsx

@@ -223,11 +223,12 @@ const Container = (props: {
   //   ratioSpeed: { x: 1.2, y: 1.2 },
   //   intervalDelay: 5,
   // });
-
+  const ref = useRef<HTMLDivElement>(null);
   const renderRight = useMemo(() => {
     if (context.theme === 'h5') {
       return (
         <div
+          ref={ref}
           className={styles.attrSetting}
           style={{
             transition: 'all ease-in-out 0.5s',
@@ -243,6 +244,7 @@ const Container = (props: {
                 defaultValue={curPoint.item.config}
                 onSave={handleFormSave}
                 onDel={handleDel}
+                rightPannelRef={ref}
               />
               {/* <div className={styles.del}>
                 <Button block>删顶顶顶顶除</Button>
@@ -277,6 +279,7 @@ const Container = (props: {
                 defaultValue={curPoint.item.config}
                 onSave={handleFormSave}
                 onDel={handleDel}
+                rightPannelRef={ref}
               />
             </>
           ) : (

src/pages/editor/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, memo, useContext, useState, useEffect } from 'react';
-import { Button, Input, Popover, Modal, Select } from 'antd';
+import { Button, Input, Modal, Select } from 'antd';
 import {
   ArrowLeftOutlined,
   MobileOutlined,
@@ -19,6 +19,7 @@ import req from '@/utils/req';
 import Code from '@/assets/code.png';
 import styles from './index.less';
 import { dooringContext } from '@/layouts';
+import MyPopover from 'yh-react-popover';
 
 const { confirm } = Modal;
 
@@ -216,7 +217,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
         >
           <FileAddOutlined />
         </Button>
-        <Popover placement="bottom" title={null} content={content} trigger="click">
+        <MyPopover content={content()} directions="BOTTOM">
           <Button
             type="link"
             style={{ marginRight: '9px' }}
@@ -225,7 +226,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
           >
             <MobileOutlined />
           </Button>
-        </Popover>
+        </MyPopover>
         <Button
           type="link"
           style={{ marginRight: '9px' }}

yarn.lock

@@ -14691,6 +14691,11 @@ yeast@0.1.2:
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
   integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
 
+yh-react-popover@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/yh-react-popover/-/yh-react-popover-0.2.0.tgz#a5e3bdaa50b5e7e119bf0ce38a24bea57068cfc4"
+  integrity sha512-cTH2huOrUvsbyhvH0iTE+S/Lu7dOpxuF8upyNP4GCsCN8IzQXLvlbxZl8395wOwa6Xm5+kT7QvZw+wI3vA8q8Q==
+
 ylru@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f"