@hzab/form-render 1.6.3 → 1.6.5

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# @hzab/form-render@1.6.4
+
+fix: 修复LocationListPicker组件在编辑时第一次无法正确渲染的bug。
+feat: LocationPicker渲染时增加范围
+
+# @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.3",
+  "version": "1.6.5",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/LocationListPicker/index.tsx

@@ -49,6 +49,7 @@ export const LocationListPicker = observer((props) => {
   const popupRef = useRef();
   const isEditingRef = useRef();
   const mapBoxRef = useRef(null)
+  const [mapInitCompleted, setMapInitCompleted] = useState(false);
 
   useEffect(() => {
     return () => {
@@ -60,7 +61,8 @@ export const LocationListPicker = observer((props) => {
   }, []);
 
   useEffect(() => {
-    if (!Array.isArray(value) || value?.length == 0 || !mapUtilsRef.current) {
+
+    if (!Array.isArray(value) || value?.length == 0 || !mapInitCompleted) {
       return;
     }
     // 处理 id
@@ -70,11 +72,11 @@ export const LocationListPicker = observer((props) => {
       }
     });
     listRef.current = value || [];
-    renderMarker();
-  }, [value]);
+    renderMarker(value);
+  }, [value, mapInitCompleted]);
 
-  function renderMarker() {
-    listRef.current?.forEach((item) => {
+  function renderMarker(value = []) {
+    (listRef.current || value)?.forEach((item) => {
       if (item.type === "polygon") {
         mapUtilsRef.current.setPolygon({
           ...item,
@@ -105,6 +107,7 @@ export const LocationListPicker = observer((props) => {
       onClick: onPolygonClick,
     });
 
+    mapUtils && setMapInitCompleted(true);
     renderMarker();
     mapUtilsRef.current.setFitView();
   }

package/src/components/LocationPicker/common/utils.ts

@@ -11,18 +11,20 @@
     }
  */
 export function getPropsValue(value = {}, opt) {
-  const { lonKey = "longitude", latKey = "latitude", addrKey = "address", pointsKey = "points" } = opt || {};
+  const { lonKey = "longitude", latKey = "latitude", addrKey = "address", pointsKey = "points", rangeKey = "range" } = opt || {};
 
   let lon = value[lonKey];
   let lat = value[latKey];
   let addr = value[addrKey];
   let points = value[pointsKey];
+  let range =  value[rangeKey];
 
   const res = {
     lon,
     lat,
     addr,
-    points
+    points,
+    range
   };
   return res;
 }

package/src/components/LocationPicker/components/ModalContent/index.tsx

@@ -38,6 +38,7 @@ export const ModalContent = observer((props: any) => {
     latKey = "latitude",
     addrKey = "address",
     pointsKey = "points",
+    rangeKey = "range",
     value,
     // 搜索框是否自动搜索
     isAutoSearch = true,
@@ -63,8 +64,9 @@ export const ModalContent = observer((props: any) => {
         latKey,
         addrKey,
         pointsKey,
+        rangeKey
       }),
-    [lonKey, latKey, addrKey, pointsKey, value, value?.[pointsKey], value?.[lonKey], value?.[latKey], value?.[addrKey]],
+    [lonKey, latKey, addrKey, pointsKey,rangeKey, value, value?.[rangeKey], value?.[pointsKey], value?.[lonKey], value?.[latKey], value?.[addrKey]],
   );
 
   const [loading, setLoading] = useState(props.loading || false);
@@ -167,6 +169,7 @@ export const ModalContent = observer((props: any) => {
           addr,
           lon: center[0],
           lat: center[1],
+          range: 0
         });
       }
     }
@@ -178,14 +181,17 @@ export const ModalContent = observer((props: any) => {
     let _lon = defaultLocation.lon;
     let _lat = defaultLocation.lat;
     let _points = defaultLocation.points;
+    let _range = defaultLocation.range
     if (pickInfo.lon && pickInfo.lat) {
       _lon = pickInfo.lon;
       _lat = pickInfo.lat;
       _points = pickInfo.points;
+      _range = pickInfo.range
     } else if (formatValRef.current?.lon && formatValRef.current?.lat) {
       _lon = formatValRef.current?.lon;
       _lat = formatValRef.current?.lat;
       _points = formatValRef.current?.points;
+      _range = formatValRef.current?.range;
     }
 
     setMapCenter(_lon, _lat);
@@ -211,6 +217,7 @@ export const ModalContent = observer((props: any) => {
       // 禁用、只读情况使用 marker 展示点位
       if (element === "Polypoint") {
         mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+        mapUtilsRef.current.setCircle(_lon, _lat, _range);
       } else {
         setDrawEditor(_points, true);
       }