@hzab/form-render-mobile 0.2.2 → 0.2.3

package/src/components/LocationPicker/index.tsx

@@ -1,10 +1,16 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Popup, Button, SpinLoading, DotLoading, NoticeBar } from "antd-mobile";
+import { Popup, Button, SpinLoading, Toast } from "antd-mobile";
 import { useField, useFieldSchema } from "@formily/react";
-import { LocationFill, ExclamationCircleOutline } from "antd-mobile-icons";
+import { LocationFill } from "antd-mobile-icons";
 import { debounce } from "lodash";
 
+import ResInfo from "./components/ResInfo";
+
+import PickerInfo from "./components/PickerInfo";
 import AMapCom from "./Map/AMap";
+import Notice from "./components/Notice";
+
+import { MapUtils } from "./Map/AMap/common/utils";
 import { getCurrentPosition } from "../../common/location-utils";
 import MapSearch from "./components/MapSearch";
 
@@ -18,8 +24,6 @@ const defaultLngLat = {
   lat: 30.243861,
 };
 
-declare var AMap: any;
-
 // 获取当前经纬度
 getCurrentPosition()
   .then((res) => {
@@ -58,14 +62,16 @@ export function LocationPicker(props) {
     value,
     // 搜索框是否自动搜索
     isAutoSearch = true,
+    // 是否是移动端，changeMode == 'move' 时改变监听事件
+    isMobile = true,
   } = props;
   const field: any = useField();
   const fieldSchema = useFieldSchema();
 
-  const mapRef: any = useRef();
-  const markerRef: any = useRef();
+  const mapUtilsRef = useRef<MapUtils>();
 
   const [loading, setLoading] = useState(false);
+  const [addrLoading, setAddrLoading] = useState(false);
   const [visible, setVisible] = useState(false);
   // 数据格式转为内部格式，方便存取
   const opt = {
@@ -80,42 +86,31 @@ export function LocationPicker(props) {
     [isObjectRes, lonKey, latKey, addrKey, value, field.data],
   );
 
-  // 表单实际的值
-  const [resInfo, setResInfo] = useState(formatVal);
   // 地图选点组件选中的值
   const [pickInfo, setPickInfo] = useState(formatVal);
-  const [addrLoading, setAddrLoading] = useState(false);
 
   useEffect(() => {
     if (visible) {
       let _lon = defaultLngLat.lon;
       let _lat = defaultLngLat.lat;
-      if (resInfo.lon && resInfo.lat) {
-        _lon = resInfo.lon;
-        _lat = resInfo.lat;
+      if (formatVal.lon && formatVal.lat) {
+        _lon = formatVal.lon;
+        _lat = formatVal.lat;
       }
       // 解决关闭弹窗之后点位不居中的问题
       if (window.AMap && window.AMap.LngLat) {
-        const position = new window.AMap.LngLat(_lon, _lat);
-        mapRef.current?.setCenter(position);
+        setMapCenter(_lon, _lat);
       }
       setPoint(_lon, _lat, { isAutoFixAddr: false });
     }
-  }, [visible, resInfo, changeMode]);
+  }, [visible, formatVal, changeMode]);
 
   useEffect(() => {
-    setResInfo((_res) => {
-      const { lon: _lon, lat: _lat, addr: _addr } = formatVal;
-      if ((_lon && _lon != _res.lon) || (_lat && _lat != _res.lat)) {
-        setPoint(_lon, _lat, { isAutoFixAddr });
-      }
-      return formatVal;
-    });
     setPickInfo(formatVal);
   }, [formatVal, isAutoFixAddr]);
 
-  function mapInit(_map, AMap) {
-    mapRef.current = _map;
+  function mapInit({ map, mapUtils }) {
+    mapUtilsRef.current = mapUtils;
     setLoading(false);
     let _lon = defaultLngLat.lon;
     let _lat = defaultLngLat.lat;
@@ -125,45 +120,37 @@ export function LocationPicker(props) {
     }
     setPoint(_lon, _lat, { isAutoFixAddr });
 
+    setMapCenter(_lon, _lat);
     if (changeMode === "click") {
-      setMarker(_lon, _lat);
+      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
       // 点击选中点位的情况
-      mapRef.current.on("click", function (ev) {
+      mapUtilsRef.current.on("click", function (ev) {
         const { lng: evLon, lat: evLat } = ev.lnglat || {};
         setPoint(evLon, evLat, { changeCenter: true });
       });
     } else {
       // 移动地图
-      mapRef.current.on(
-        "moveend",
+      mapUtilsRef.current.on(
+        isMobile ? "touchend" : "mouseup",
         debounce(function (ev) {
-          let currentCenter = mapRef.current.getCenter();
+          let currentCenter = mapUtilsRef.current?.getCenter();
           const { lng: centerLon, lat: centerLat } = currentCenter || {};
           // 移动选中点位的情况
           let _lon = centerLon;
           let _lat = centerLat;
           setPoint(_lon, _lat);
-        }, 500),
+        }, 1000),
       );
     }
   }
 
-  function setMarker(_lon, _lat) {
-    if (changeMode !== "click") {
-      return;
-    }
-    if (window.AMap && mapRef.current) {
-      const position = new AMap.LngLat(_lon, _lat);
-      // 创建 Marker 或修改位置
-      if (markerRef.current) {
-        markerRef.current.setPosition(position);
-      } else {
-        markerRef.current = new AMap.Marker({
-          position,
-        });
-        mapRef.current?.add(markerRef.current);
-      }
-    }
+  /**
+   * 设置地图中心点
+   * @param lon
+   * @param lat
+   */
+  function setMapCenter(lon, lat) {
+    mapUtilsRef.current?.setCenter(lon, lat);
   }
 
   function setPoint(_lon, _lat, opt?: any) {
@@ -173,11 +160,11 @@ export function LocationPicker(props) {
     (_isAutoFixAddr || !pickInfo.addr) && getAddr(lon, lat);
     const res = { ...pickInfo, lon, lat, center: [lon, lat] };
     setPickInfo(res);
-    setMarker(_lon, _lat);
+    if (changeMode === "click") {
+      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+    }
     if (changeCenter) {
-      const position = new AMap.LngLat(_lon, _lat);
-      // 设置中心点
-      mapRef.current.setCenter(position);
+      setMapCenter(_lon, _lat);
     }
   }
 
@@ -193,17 +180,20 @@ export function LocationPicker(props) {
         setPickInfo((_p) => ({ ..._p, addr }));
       })
       .catch((err) => {
+        Toast.show({ icon: "fail", content: err });
         setAddrLoading(false);
       });
   }
 
   function onShow() {
-    !mapRef.current && setLoading(true);
+    // 等待地图加载完毕
+    !mapUtilsRef.current && setVisible(true);
     setVisible(true);
   }
 
   function onClose() {
     setVisible(false);
+    setLoading(false);
   }
 
   function onOk() {
@@ -231,19 +221,9 @@ export function LocationPicker(props) {
 
   return (
     <div className="location-picker">
-      <div className="location-value-box">
-        <div className="location-value-head-box">
-          <div className="location-lon-lat">
-            <div>经度：{resInfo.lon} </div>
-            <div>纬度：{resInfo.lat}</div>
-          </div>
-          <Button className="location-btn" color="primary" fill="none" onClick={onShow}>
-            <LocationFill />
-            选点
-          </Button>
-        </div>
-        <div>地址：{resInfo.addr}</div>
-      </div>
+      {/* 显示表单选中的结果 */}
+      <ResInfo {...props} onShow={onShow} />
+      {/* 弹窗 */}
       <Popup
         maskClassName="location-picker-popup-mask"
         className="location-picker-popup"
@@ -263,33 +243,30 @@ export function LocationPicker(props) {
             确认
           </Button>
         </div>
-        <div className="picker-info">
-          <div className="picker-info-lon">经度：{pickInfo.lon} </div>
-          <div className="picker-info-lat">纬度：{pickInfo.lat}</div>
-          <div className="picker-info-addr">地址：{addrLoading ? <DotLoading /> : pickInfo.addr}</div>
-        </div>
-        {/* 关闭弹窗之后清除搜索内容 */}
-        {hasSearch && visible ? <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} /> : null}
-        <div className="location-picker-map">
-          <AMapCom
-            init={mapInit}
-            loading={loading}
-            center={pickInfo.center ? pickInfo.center : [defaultLngLat.lon, defaultLngLat.lat]}
-            style={{ height: "68vh" }}
-          />
-          <NoticeBar
-            className="location-picker-notice-bar"
-            content={changeMode === "click" ? "点击地图上的位置，选择目标地址" : "拖拽移动地图，中心标点为目标地址"}
-            color="default"
-            icon={<ExclamationCircleOutline />}
+
+        <div className="location-popup-content">
+          {/* 点击/移动 地图选中的数据 */}
+          <PickerInfo
+            pickInfo={pickInfo}
+            setPickInfo={setPickInfo}
+            setPoint={setPoint}
+            addrLoading={addrLoading}
+            defaultLngLat={defaultLngLat}
           />
-          {!loading && changeMode !== "click" && <LocationFill className="location-picker-center-icon" />}
-        </div>
-        {loading && (
-          <div className="spin-loading-wrap">
-            <SpinLoading className="spin-loading" color="primary" />
+
+          {/* 关闭弹窗之后清除搜索内容 */}
+          {hasSearch && visible ? <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} /> : null}
+          <div className="location-picker-map">
+            <AMapCom init={mapInit} loading={loading} style={{ height: "68vh" }} />
+            <Notice changeMode={changeMode} />
+            {!loading && changeMode !== "click" && <LocationFill className="location-picker-center-icon" />}
           </div>
-        )}
+          {loading && (
+            <div className="spin-loading-wrap">
+              <SpinLoading className="spin-loading" color="primary" />
+            </div>
+          )}
+        </div>
       </Popup>
     </div>
   );

package/src/components/LocationPicker/servers/index.ts

@@ -1,5 +1,9 @@
-import { Toast } from "antd-mobile";
-
+/**
+ * 根据经纬度获取定义的地址
+ * @param lon
+ * @param lat
+ * @returns
+ */
 export function getAddress(lon, lat) {
   return new Promise((resolve, reject) => {
     if (!window.AMap) {
@@ -15,7 +19,7 @@ export function getAddress(lon, lat) {
       } else if (result === "USER_DAILY_QUERY_OVER_LIMIT") {
         // 超出限制，使用 webServer 进行请求
         if (!window._AMapLoaderTemp.serverKey) {
-          Toast.show({ icon: "fail", content: "超出使用限制，请联系管理员" });
+          reject(new Error("超出使用限制，请联系管理员"));
           return;
         }
         fetch(
@@ -31,7 +35,8 @@ export function getAddress(lon, lat) {
             if (res.status === "1") {
               resolve(res.regeocode?.formatted_address);
             } else {
-              Toast.show({ icon: "fail", content: res.info });
+              console.warn("Warn getAddress fetch: ", res);
+              reject(new Error(res.info));
             }
           })
           .catch(reject);
@@ -42,6 +47,12 @@ export function getAddress(lon, lat) {
   });
 }
 
+/**
+ * 获取搜索提示
+ * @param search
+ * @param cityCode
+ * @returns
+ */
 export function getSearchTips(search, cityCode = "0571") {
   return new Promise((resolve, reject) => {
     if (!window.AMap) {
@@ -70,7 +81,7 @@ export function getSearchTips(search, cityCode = "0571") {
       } else if (result === "USER_DAILY_QUERY_OVER_LIMIT") {
         // 超出限制，使用 webServer 进行请求
         if (!window._AMapLoaderTemp.serverKey) {
-          Toast.show({ icon: "fail", content: "超出使用限制，请联系管理员" });
+          reject(new Error("超出使用限制，请联系管理员"));
           return;
         }
         fetch(
@@ -97,7 +108,8 @@ export function getSearchTips(search, cityCode = "0571") {
                 }),
               );
             } else {
-              Toast.show({ icon: "fail", content: res.info });
+              console.warn("Warn getSearchTips fetch: ", res);
+              reject(new Error(res.info));
             }
           })
           .catch(reject);

package/src/index.less

@@ -5,6 +5,9 @@
       .adm-list-item-content {
         border-top: unset;
       }
+      .adm-formily-item{
+        font-size: 30px ;
+      }
     }
   }
   .picker-box {

package/src/components/LocationPicker/Map/AMap/common/getCurrentPosition.js

@@ -1,17 +0,0 @@
-function getCurrentPosition(config) {
-  return new Promise((resolve, reject) => {
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        resolve(position);
-      },
-      reject,
-      {
-        enableHighAccuracy: true,
-        timeout: 5000,
-        ...config,
-      },
-    );
-  });
-}
-
-export default getCurrentPosition;

package/src/components/LocationPicker/Map/AMap/common/utils.js

@@ -1,53 +0,0 @@
-import AMapLoader from "@/components/AMap/common/loader.js";
-
-if (!window._AMapLoaderTemp) {
-  window._AMapLoaderTemp = {};
-}
-
-/**
- * 根据经纬度获取地址
- * @param {Array} lngLatArr
- * @returns
- */
-export function getAddress(lngLatArr) {
-  return new Promise((resolve, reject) => {
-    if (!lngLatArr) {
-      reject("参数有误");
-      return;
-    }
-    return AMapLoader({
-      key: window._AMapLoaderTemp.key,
-      securityJsCode: window._AMapLoaderTemp.securityJsCode,
-    }).then((AMap) => {
-      const geocoder = new AMap.Geocoder({});
-
-      geocoder.getAddress(lngLatArr, function (state, result) {
-        if (state === "complete" && result.regeocode) {
-          resolve(result.regeocode.formattedAddress);
-        } else {
-          reject("根据经纬度查询地址失败");
-          console.error("根据经纬度查询地址失败");
-        }
-      });
-    });
-  });
-}
-
-export function setKey(key, securityJsCode) {
-  window._AMapLoaderTemp.key = key;
-  window._AMapLoaderTemp.securityJsCode = securityJsCode;
-}
-
-export function setServerKey(key, securityJsCode) {
-  window._AMapLoaderTemp.serverKey = key;
-  window._AMapLoaderTemp.serverSecurityJsCode = securityJsCode;
-}
-
-export function setSecurityJsCode(securityJsCode) {
-  window._AMapLoaderTemp.securityJsCode = securityJsCode;
-  window._AMapSecurityConfig = {
-    securityJsCode: securityJsCode,
-  };
-}
-
-export { AMapLoader };