@hzab/form-render 1.6.2 → 1.6.4

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/form-render@1.6.3
+
+fix: 修复LocationListPicker组件的Pupup弹窗在某些时候漂移的bug。
+
 # @hzab/form-render@1.6.2
 
 feat:自增列表组件新增删除二次确认功能

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/LocationListPicker/components/Popup/index.less

@@ -1,7 +1,10 @@
 .popup-box {
-  position: fixed;
+  position: absolute;
   z-index: 9;
   min-width: 200px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
   padding: 20px;
   border-radius: 4px;
   background-color: #fff;

package/src/components/LocationListPicker/components/Popup/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, forwardRef, useImperativeHandle, useState } from "react";
+import { useRef, forwardRef, useImperativeHandle, useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Button } from "antd";
 
@@ -15,6 +15,7 @@ export interface IPopupProps {
     schema;
     initialValues?: Object;
   };
+  mountElement?: HTMLElement;
 }
 
 export interface IData {
@@ -24,7 +25,7 @@ export interface IData {
 }
 
 export const Popup = forwardRef((props: IPopupProps, parentRef) => {
-  const { formProps = { schema: RangeSchema } } = props;
+  const { formProps = { schema: RangeSchema }, mountElement } = props;
 
   const [data, setData] = useState<IData>();
 
@@ -62,9 +63,10 @@ export const Popup = forwardRef((props: IPopupProps, parentRef) => {
 
   const schema = mergeSchema(AddressSchema, formProps?.schema ?? RangeSchema);
 
+
   return data
     ? createPortal(
-        <div className="popup-box" style={{ top: data?.top, left: data?.left }}>
+        <div className="popup-box">
           <div className="popup-body">
             {/* TODO: schema 中插入地址字段 text 格式 */}
             <div>地址：{data?.address}</div>
@@ -82,7 +84,7 @@ export const Popup = forwardRef((props: IPopupProps, parentRef) => {
             <Button onClick={onCancel}>取消</Button>
           </div>
         </div>,
-        document.body,
+      mountElement || document.body,
       )
     : null;
 });

package/src/components/LocationListPicker/index.tsx

@@ -48,6 +48,7 @@ export const LocationListPicker = observer((props) => {
   const currentItemRef = useRef();
   const popupRef = useRef();
   const isEditingRef = useRef();
+  const mapBoxRef = useRef(null)
 
   useEffect(() => {
     return () => {
@@ -469,7 +470,7 @@ export const LocationListPicker = observer((props) => {
 
   return (
     <div className="location-list-picker">
-      <div className="map-box">
+      <div className="map-box" ref={mapBoxRef}>
         <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
         {!readOnly && !disabled && <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} />}
         {showTip && (
@@ -485,7 +486,7 @@ export const LocationListPicker = observer((props) => {
             新增地址
           </Button>
         )}
-        <Popup ref={popupRef} {...popupProps} />
+        <Popup ref={popupRef} mountElement={mapBoxRef.current} {...popupProps} />
       </div>
       <AddrList
         {...listProps}