@hzab/form-render-mobile 0.2.2 → 0.2.4

package/src/components/LocationPicker/index.less

@@ -1,20 +1,11 @@
 .location-picker {
-  .location-value-box {
-    .location-value-head-box {
-      display: flex;
-      .location-lon-lat {
-        flex: 1;
-      }
-    }
-
-    .location-btn {
-      padding: 4px 0;
-      padding-left: 5px;
-    }
-  }
 }
 
 .location-picker-popup {
+  font-size: 4vw;
+  .location-popup-content {
+    position: relative;
+  }
   .adm-popup-body {
     display: flex;
     flex-direction: column;
@@ -25,69 +16,5 @@
       align-items: center;
       border-bottom: 1px solid #f2f2f2;
     }
-
-    .picker-info {
-      padding: 2vw 4vw;
-      .picker-info-lon,
-      .picker-info-lat {
-        display: inline-block;
-      }
-      .picker-info-lon {
-        margin-right: 4vw;
-      }
-      .picker-info-lat {
-      }
-      .picker-info-addr {
-        margin-top: 2vw;
-        line-height: 1.6;
-      }
-    }
-
-    .location-picker-map {
-      position: relative;
-      width: 100%;
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      .a-map-container {
-        height: inherit;
-        .amap-logo,
-        .amap-copyright {
-          z-index: 0;
-        }
-      }
-
-      .location-picker-notice-bar {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100vw;
-        --background-color: rgba(0, 0, 0, 1);
-      }
-
-      .location-picker-center-icon {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -100%);
-        font-size: 32px;
-        color: #1890ff;
-      }
-    }
-
-    .spin-loading-wrap {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 9;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: rgba(0, 0, 0, 0.5);
-      .spin-loading {
-      }
-    }
   }
 }

package/src/components/LocationPicker/index.tsx

@@ -1,31 +1,28 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Popup, Button, SpinLoading, DotLoading, NoticeBar } from "antd-mobile";
+import { useRef, useState } from "react";
+import { Popup, Button } from "antd-mobile";
 import { useField, useFieldSchema } from "@formily/react";
-import { LocationFill, ExclamationCircleOutline } from "antd-mobile-icons";
-import { debounce } from "lodash";
 
-import AMapCom from "./Map/AMap";
-import { getCurrentPosition } from "../../common/location-utils";
-import MapSearch from "./components/MapSearch";
+import ResInfo from "./components/ResInfo";
+import ModalContent from "./components/ModalContent";
 
-import { getAddress } from "./servers/index";
-import { getPropsValue, getParentValue } from "./common/utils";
+import { MapUtils } from "./Map/AMap/common/utils";
+import { getCurrentPosition } from "../../common/location-utils";
+import { getParentValue } from "./common/utils";
 
 import "./index.less";
 
-const defaultLngLat = {
-  lon: 120.160217,
-  lat: 30.243861,
+const defaultLocation = {
+  lon: 120.168893,
+  lat: 30.225404,
+  addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
 };
 
-declare var AMap: any;
-
 // 获取当前经纬度
 getCurrentPosition()
   .then((res) => {
     const { coords = {} } = res;
-    defaultLngLat.lon = coords.longitude;
-    defaultLngLat.lat = coords.latitude;
+    defaultLocation.lon = coords.longitude;
+    defaultLocation.lat = coords.latitude;
   })
   .catch((e) => {
     console.warn("Error getCurrentPosition e: ", e);
@@ -33,6 +30,18 @@ getCurrentPosition()
 
 export function LocationPicker(props) {
   const {
+    /**
+     * 地图显示类型：
+     * 弹窗 dialog
+     * 直接显示 show
+     */
+    mode = "dialog",
+    /**
+     * 选择器和地图的布局
+     * 水平 hor
+     * 垂直 ver
+     */
+    layout = "ver",
     // 是否允许搜索
     hasSearch = true,
     /**
@@ -48,8 +57,8 @@ export function LocationPicker(props) {
     isAutoFixAddr = false,
     /**
      * 改变经纬度等数据的触发模式
-     * 移动地图：move
-     * 点击地图：click
+     * 移动地图 move
+     * 点击地图 click
      */
     changeMode = "move",
     lonKey = "longitude",
@@ -62,143 +71,15 @@ export function LocationPicker(props) {
   const field: any = useField();
   const fieldSchema = useFieldSchema();
 
-  const mapRef: any = useRef();
-  const markerRef: any = useRef();
+  const mapUtilsRef = useRef<MapUtils>();
+  const pickInfoRef = useRef(defaultLocation);
 
   const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
-  // 数据格式转为内部格式，方便存取
-  const opt = {
-    isObjectRes,
-    lonKey,
-    latKey,
-    addrKey,
-  };
-
-  const formatVal = useMemo(
-    () => getPropsValue(value, field, opt),
-    [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 (window.AMap && window.AMap.LngLat) {
-        const position = new window.AMap.LngLat(_lon, _lat);
-        mapRef.current?.setCenter(position);
-      }
-      setPoint(_lon, _lat, { isAutoFixAddr: false });
-    }
-  }, [visible, resInfo, 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;
-    setLoading(false);
-    let _lon = defaultLngLat.lon;
-    let _lat = defaultLngLat.lat;
-    if (pickInfo.lon && pickInfo.lat) {
-      _lon = pickInfo.lon;
-      _lat = pickInfo.lat;
-    }
-    setPoint(_lon, _lat, { isAutoFixAddr });
-
-    if (changeMode === "click") {
-      setMarker(_lon, _lat);
-      // 点击选中点位的情况
-      mapRef.current.on("click", function (ev) {
-        const { lng: evLon, lat: evLat } = ev.lnglat || {};
-        setPoint(evLon, evLat, { changeCenter: true });
-      });
-    } else {
-      // 移动地图
-      mapRef.current.on(
-        "moveend",
-        debounce(function (ev) {
-          let currentCenter = mapRef.current.getCenter();
-          const { lng: centerLon, lat: centerLat } = currentCenter || {};
-          // 移动选中点位的情况
-          let _lon = centerLon;
-          let _lat = centerLat;
-          setPoint(_lon, _lat);
-        }, 500),
-      );
-    }
-  }
-
-  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);
-      }
-    }
-  }
-
-  function setPoint(_lon, _lat, opt?: any) {
-    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter } = opt || {};
-    const lon = _lon || pickInfo.lon;
-    const lat = _lat || pickInfo.lat;
-    (_isAutoFixAddr || !pickInfo.addr) && getAddr(lon, lat);
-    const res = { ...pickInfo, lon, lat, center: [lon, lat] };
-    setPickInfo(res);
-    setMarker(_lon, _lat);
-    if (changeCenter) {
-      const position = new AMap.LngLat(_lon, _lat);
-      // 设置中心点
-      mapRef.current.setCenter(position);
-    }
-  }
-
-  function getAddr(_lng, _lat) {
-    if (!window.AMap) {
-      return "";
-    }
-
-    setAddrLoading(true);
-    getAddress(_lng, _lat)
-      .then((addr) => {
-        setAddrLoading(false);
-        setPickInfo((_p) => ({ ..._p, addr }));
-      })
-      .catch((err) => {
-        setAddrLoading(false);
-      });
-  }
 
   function onShow() {
-    !mapRef.current && setLoading(true);
+    // 等待地图加载完毕
+    !mapUtilsRef.current && setVisible(true);
     setVisible(true);
   }
 
@@ -206,91 +87,121 @@ export function LocationPicker(props) {
     setVisible(false);
   }
 
-  function onOk() {
-    const res = {
-      [lonKey]: pickInfo.lon,
-      [latKey]: pickInfo.lat,
-      [addrKey]: pickInfo.addr,
+  function onChange(res = pickInfoRef.current) {
+    const info = res || pickInfoRef.current;
+    const _res = {
+      [lonKey]: info.lon,
+      [latKey]: info.lat,
+      [addrKey]: info.addr,
     };
-    props.onChange && props.onChange(res);
+    props.onChange && props.onChange(_res);
     if (isObjectRes === false) {
       // 只有一层的情况
       if (!field.parent) {
-        field.form.setValues(res);
+        field.form.setValues(_res);
       } else if (field.parent && fieldSchema.parent) {
         // 嵌套在 ArrayBase: ArrayTable ArrayCard 等 里面的情况
         const parentVal = getParentValue(field);
-        Object.keys(res).forEach((key) => {
-          parentVal[key] = res[key];
+        Object.keys(_res).forEach((key) => {
+          parentVal[key] = _res[key];
         });
       }
     }
+  }
 
+  function onOk() {
+    onChange();
     onClose();
   }
 
+  function setResInfo(res) {
+    setPickInfo(res);
+    onChange(res);
+  }
+
+  function setPickInfo(res) {
+    pickInfoRef.current = res;
+  }
+
+  const _props = {
+    /**
+     * 地图显示类型：
+     * 弹窗 dialog
+     * 直接显示 show
+     */
+    mode: mode ?? "dialog",
+    /**
+     * 选择器和地图的布局
+     * 水平 hor
+     * 垂直 ver
+     */
+    layout: layout ?? "ver",
+    // 是否允许搜索
+    hasSearch: hasSearch ?? true,
+    /**
+      * 
+      isObjectRes 
+       true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
+       false: 所有数据打平放到当前的 data 中，和其他表单项平级
+      */
+    isObjectRes: isObjectRes ?? true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr: isAutoFixAddr ?? false,
+    /**
+     * 改变经纬度等数据的触发模式
+     * 移动地图：move
+     * 点击地图：click
+     */
+    changeMode: changeMode ?? "move",
+    lonKey: lonKey ?? "longitude",
+    latKey: latKey ?? "latitude",
+    addrKey: addrKey ?? "address",
+    value,
+    // 搜索框是否自动搜索
+    isAutoSearch: isAutoSearch ?? true,
+    defaultLocation,
+  };
+
   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>
-      <Popup
-        maskClassName="location-picker-popup-mask"
-        className="location-picker-popup"
-        onMaskClick={onClose}
-        onClose={onClose}
-        bodyStyle={{
-          minHeight: "80vh",
-          maxHeight: "100vh",
-        }}
-        visible={visible}
-      >
-        <div className="location-popup-header">
-          <Button fill="none" onClick={onClose}>
-            取消
-          </Button>
-          <Button color="primary" fill="none" onClick={onOk} loading={addrLoading || loading}>
-            确认
-          </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 />}
-          />
-          {!loading && changeMode !== "click" && <LocationFill className="location-picker-center-icon" />}
-        </div>
-        {loading && (
-          <div className="spin-loading-wrap">
-            <SpinLoading className="spin-loading" color="primary" />
-          </div>
-        )}
-      </Popup>
+      {mode === "show" ? (
+        <ModalContent {..._props} visible={visible} setPickInfo={setResInfo} layout={layout} />
+      ) : (
+        <>
+          {/* 弹窗 */}
+          {/* 有弹窗时，显示表单选中的结果 */}
+          <ResInfo {..._props} onShow={onShow} />
+          <Popup
+            maskClassName="location-picker-popup-mask"
+            className="location-picker-popup"
+            onMaskClick={onClose}
+            onClose={onClose}
+            bodyStyle={{
+              minHeight: "78vh",
+              maxHeight: "100vh",
+            }}
+            visible={visible}
+          >
+            <div className="location-popup-header">
+              <Button fill="none" onClick={onClose}>
+                取消
+              </Button>
+              <Button color="primary" fill="none" onClick={onOk} loading={loading}>
+                确认
+              </Button>
+            </div>
+            <ModalContent
+              {..._props}
+              visible={visible}
+              setPickInfo={setPickInfo}
+              layout={layout}
+              setLoading={setLoading}
+            />
+          </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

@@ -1,4 +1,8 @@
 .form-render {
+  font-size: 4vw;
+  .adm-formily-item {
+    font-size: 4vw;
+  }
   .adm-list-body {
     background-color: unset;
     .adm-card-body {
@@ -34,7 +38,8 @@
     }
   }
 
-  & .adm-radio, & .adm-checkbox {
+  & .adm-radio,
+  & .adm-checkbox {
     padding-right: 10px;
   }
 }

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 };