@hzab/form-render-mobile 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "formily-form-render-mobile",
   "main": "lib",
   "scripts": {

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

@@ -26,11 +26,7 @@ export function getPropsValue(value = {}, field: any, opt) {
     lon,
     lat,
     addr,
-    center: null,
   };
-  if (lon && lat) {
-    res.center = [lon, lat];
-  }
   return res;
 }
 

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

@@ -0,0 +1,48 @@
+.location-picker-modal-content {
+  position: relative;
+
+  .location-picker-map {
+    position: relative;
+    width: 100%;
+    flex: 1;
+    .a-map-container {
+      height: inherit;
+      .amap-logo,
+      .amap-copyright {
+        z-index: 0;
+      }
+    }
+
+    .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 {
+    }
+  }
+  /* 水平样式 */
+  &.location-modal-content-layout-hor {
+    display: flex;
+
+    .location-picker-info {
+      width: 50vw;
+    }
+  }
+}

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

@@ -0,0 +1,202 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { SpinLoading, Toast } from "antd-mobile";
+import { LocationFill } from "antd-mobile-icons";
+import { useField } from "@formily/react";
+import { debounce } from "lodash";
+
+import PickerInfo from "../PickerInfo";
+import AMapCom from "../../Map/AMap";
+import Notice from "../Notice";
+import MapSearch from "../MapSearch";
+
+import { MapUtils } from "../../Map/AMap/common/utils";
+import { getAddress } from "../../servers";
+import { getPropsValue } from "../../common/utils";
+
+import "./index.less";
+
+export const ModalContent = (props) => {
+  const {
+    /**
+     * 选择器和地图的布局
+     * 水平 hor
+     * 垂直 ver
+     */
+    layout = "ver",
+    // 是否允许搜索
+    hasSearch = true,
+    /**
+     * 
+     isObjectRes 
+      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
+      false: 所有数据打平放到当前的 data 中，和其他表单项平级
+     */
+    isObjectRes = true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr = false,
+    /**
+     * 改变经纬度等数据的触发模式
+     * 移动地图 move
+     * 点击地图 click
+     */
+    changeMode = "move",
+    lonKey = "longitude",
+    latKey = "latitude",
+    addrKey = "address",
+    value,
+    // 搜索框是否自动搜索
+    isAutoSearch = true,
+    //
+    visible,
+    defaultLocation,
+  } = props;
+
+  const field: any = useField();
+
+  const mapUtilsRef = useRef<MapUtils>();
+
+  // 数据格式转为内部格式，方便存取
+  const formatVal = useMemo(
+    () =>
+      getPropsValue(value, field, {
+        isObjectRes,
+        lonKey,
+        latKey,
+        addrKey,
+      }),
+    [isObjectRes, lonKey, latKey, addrKey, value, field.data],
+  );
+  const [loading, setLoading] = useState(false);
+  const [addrLoading, setAddrLoading] = useState(false);
+  // 地图选点组件选中的值
+  const [pickInfo, setPickInfo] = useState(formatVal);
+
+  useEffect(() => {
+    if (visible) {
+      let _lon = defaultLocation.lon;
+      let _lat = defaultLocation.lat;
+      if (formatVal.lon && formatVal.lat) {
+        _lon = formatVal.lon;
+        _lat = formatVal.lat;
+      }
+      // 解决关闭弹窗之后点位不居中的问题
+      if (window.AMap && window.AMap.LngLat) {
+        setMapCenter(_lon, _lat);
+      }
+      setPickPoint(_lon, _lat, { isAutoFixAddr: false });
+    }
+  }, [visible, formatVal, changeMode]);
+
+  function mapInit({ map, mapUtils }) {
+    mapUtilsRef.current = mapUtils;
+    let _lon = defaultLocation.lon;
+    let _lat = defaultLocation.lat;
+    if (pickInfo.lon && pickInfo.lat) {
+      _lon = pickInfo.lon;
+      _lat = pickInfo.lat;
+    }
+    setPickPoint(_lon, _lat, { isAutoFixAddr });
+
+    setMapCenter(_lon, _lat);
+    setLoading(false);
+
+    if (changeMode === "click") {
+      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+      // 点击选中点位的情况
+      mapUtilsRef.current.on("click", function (ev) {
+        const { lng: evLon, lat: evLat } = ev.lnglat || {};
+        setPickPoint(evLon, evLat, { changeCenter: true });
+      });
+    } else {
+      // 移动地图
+      mapUtilsRef.current.on(
+        "touchend",
+        debounce(function (ev) {
+          let currentCenter = mapUtilsRef.current?.getCenter();
+          const { lng: centerLon, lat: centerLat } = currentCenter || {};
+          // 移动选中点位的情况
+          let _lon = centerLon;
+          let _lat = centerLat;
+          setPickPoint(_lon, _lat);
+        }, 1000),
+      );
+    }
+  }
+
+  /**
+   * 设置地图中心点
+   * @param lon
+   * @param lat
+   */
+  function setMapCenter(lon, lat) {
+    mapUtilsRef.current?.setCenter(lon, lat);
+  }
+
+  async function setPickPoint(_lon, _lat, opt?: any) {
+    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter } = opt || {};
+    const lon = _lon || pickInfo.lon;
+    const lat = _lat || pickInfo.lat;
+    if (changeMode === "click") {
+      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+    }
+    if (changeCenter) {
+      setMapCenter(_lon, _lat);
+    }
+    const addr = _isAutoFixAddr || !pickInfo.addr ? await getAddr(lon, lat) : pickInfo.addr;
+    const res = { ...pickInfo, lon, lat, addr };
+    setPickInfo(res);
+    props.setPickInfo && props.setPickInfo(res);
+  }
+
+  function getAddr(_lng, _lat) {
+    return new Promise((resolve, reject) => {
+      if (!window.AMap) {
+        reject();
+        return new Error("window.AMap is not defined");
+      }
+
+      setAddrLoading(true);
+      getAddress(_lng, _lat)
+        .then((addr) => {
+          setAddrLoading(false);
+          setPickInfo((_p) => ({ ..._p, addr }));
+          resolve(addr);
+        })
+        .catch((err) => {
+          reject(err);
+          Toast.show({ icon: "fail", content: err });
+          setAddrLoading(false);
+        });
+    });
+  }
+
+  return (
+    <div className={`location-picker-modal-content location-modal-content-layout-${layout}`}>
+      {/* 点击/移动 地图选中的数据 */}
+      <PickerInfo
+        pickInfo={pickInfo}
+        setPickInfo={setPickInfo}
+        setPoint={setPickPoint}
+        addrLoading={addrLoading}
+        defaultLocation={defaultLocation}
+      />
+
+      <div className="location-picker-map">
+        {/* 关闭弹窗之后清除搜索内容 */}
+        {hasSearch && visible ? <MapSearch setPoint={setPickPoint} isAutoSearch={isAutoSearch} /> : null}
+        <AMapCom init={mapInit} loading={loading} style={{ height: "66vh" }} />
+        {!loading && changeMode !== "click" && <LocationFill className="location-picker-center-icon" />}
+        <Notice changeMode={changeMode} />
+      </div>
+      {loading && (
+        <div className="spin-loading-wrap">
+          <SpinLoading className="spin-loading" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ModalContent;

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

@@ -3,33 +3,21 @@ import { Input, DotLoading } from "antd-mobile";
 import "./index.less";
 
 export const PickerInfo = (props) => {
-  const { pickInfo, setPickInfo, setPoint, addrLoading, defaultLngLat } = props;
+  const { pickInfo, setPickInfo, setPoint, addrLoading, defaultLocation } = props;
 
   function onPILonChange(e) {
-    const val = +(e.target?.value || e || defaultLngLat.lon);
-    let res = null;
-    setPickInfo((info) => {
-      res = {
-        ...info,
-        lon: val,
-        center: [val, info.lat],
-      };
-      return res;
-    });
+    const val = e?.target?.value ?? e;
+    const res: { lon; lat; addr } = { ...pickInfo };
+    res.lon = val;
+    setPickInfo(res);
     return res;
   }
 
   function onPILatChange(e) {
-    const val = +(e.target?.value || e || defaultLngLat.lat);
-    let res = null;
-    setPickInfo((info) => {
-      res = {
-        ...info,
-        lat: val,
-        center: [info.lon, val],
-      };
-      return res;
-    });
+    const val = e?.target?.value ?? e;
+    const res: { lon; lat; addr } = { ...pickInfo };
+    res.lat = val;
+    setPickInfo(res);
     return res;
   }
 
@@ -39,7 +27,7 @@ export const PickerInfo = (props) => {
    */
   function onPILonBlur(e) {
     const res = onPILonChange(e);
-    setPoint(res.lon, res.lat);
+    setPoint && setPoint(res?.lon || defaultLocation.lon, res?.lat || defaultLocation.lat, { changeCenter: true });
   }
 
   /**
@@ -48,19 +36,36 @@ export const PickerInfo = (props) => {
    */
   function onPILatBlur(e) {
     const res = onPILatChange(e);
-    setPoint(res.lon, res.lat);
+    setPoint && setPoint(res?.lon || defaultLocation.lon, res?.lat || defaultLocation.lat, { changeCenter: true });
   }
 
   return (
     <div className="location-picker-info">
       <div className="picker-info-lon">
         <div className="picker-info-label">经度：</div>
-        <Input value={pickInfo.lon} onChange={onPILonChange} onBlur={onPILonBlur} />
+        <Input
+          className="picker-info-input"
+          disabled={addrLoading}
+          max={180}
+          min={-180}
+          value={pickInfo.lon}
+          onChange={onPILonChange}
+          onBlur={onPILonBlur}
+          onEnterPress={onPILonBlur}
+        />
       </div>
       <div className="picker-info-lat">
         <div className="picker-info-label">纬度：</div>
-
-        <Input value={pickInfo.lat} onChange={onPILatChange} onBlur={onPILatBlur} />
+        <Input
+          className="picker-info-input"
+          disabled={addrLoading}
+          max={90}
+          min={-90}
+          value={pickInfo.lat}
+          onChange={onPILatChange}
+          onBlur={onPILatBlur}
+          onEnterPress={onPILatBlur}
+        />
       </div>
       <div className="picker-info-addr">
         <div className="picker-info-label">地址：</div>

package/src/components/LocationPicker/index.less

@@ -2,6 +2,7 @@
 }
 
 .location-picker-popup {
+  font-size: 4vw;
   .location-popup-content {
     position: relative;
   }
@@ -15,52 +16,5 @@
       align-items: center;
       border-bottom: 1px solid #f2f2f2;
     }
-
-    .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;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        --background-color: rgba(0, 0, 0, 0.6);
-      }
-
-      .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.3);
-      .spin-loading {
-      }
-    }
   }
 }