@hzab/form-render-mobile 0.2.2 → 0.2.4

package/package.json

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

package/src/components/LocationPicker/Map/AMap/common/{loader.js → loader.ts}

@@ -34,7 +34,7 @@ function Loader(opt) {
 
     window._AMapLoaderTemp.plugins = plugins ? [...defaultPlugins, ...(plugins || [])] : defaultPlugins;
 
-    // 不用改组件时可以不安装  "@amap/amap-jsapi-loader"
+    // 不用地图组件时可以不安装  "@amap/amap-jsapi-loader"
     const AMapLoader = require("@amap/amap-jsapi-loader");
 
     window._AMapLoaderTemp.loading = true;

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

@@ -0,0 +1,129 @@
+import AMapLoader from "./loader";
+
+if (!window._AMapLoaderTemp) {
+  window._AMapLoaderTemp = {};
+}
+
+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 type setMarkerOptT = {
+  id?: number | string;
+  marker?: Object;
+  map?: Object;
+  AMap?: Object;
+};
+
+export type markersT = {
+  [k: number | string]: Object;
+};
+
+export class MapUtils {
+  public map;
+  public AMap;
+  public markers: markersT = {};
+  public pickerMarker;
+
+  constructor({ map, AMap }) {
+    if (!map) {
+      throw new Error("请传入地图实例");
+    }
+    this.map = map;
+    this.AMap = AMap;
+  }
+
+  /**
+   * 获取地图中心点
+   * @param map
+   * @returns { lng: Number, lat: Number }
+   */
+  getCenter(map = this.map) {
+    if (!map) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    return map && map.getCenter && map.getCenter();
+  }
+
+  /**
+   * 设置地图中心点
+   * @param lon
+   * @param lat
+   * @param opt
+   */
+  setCenter(lon, lat, opt = { map: this.map, AMap: this.AMap || window.AMap }) {
+    const { map = this.map, AMap = this.AMap || window.AMap } = opt || {};
+    if (!(AMap && map)) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    const position = new window.AMap.LngLat(lon, lat);
+    // 设置中心点
+    map.setCenter(position);
+  }
+
+  /**
+   * 创建或修改 Marker
+   * @param lon
+   * @param lat
+   * @param opt
+   * @returns
+   */
+  setMarker(lon, lat, opt?: setMarkerOptT) {
+    const { id = Date.now(), marker, map = this.map, AMap = this.AMap } = opt || {};
+    if (!(AMap && map)) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    const position = new AMap.LngLat(lon, lat);
+    let _marker = marker || this.markers[id];
+    // 创建 Marker 或修改位置
+    if (_marker) {
+      // @ts-ignore
+      _marker.setPosition(position);
+      return _marker;
+    }
+    const _m = new AMap.Marker({
+      position,
+    });
+    this.markers[id] = _m;
+    map?.add(_m);
+    return _m;
+  }
+
+  /**
+   * 创建或修改地图选点的 Marker
+   * @param lon
+   * @param lat
+   * @param opt
+   * @returns
+   */
+  setPickerMarker(lon, lat, opt?: any) {
+    const { marker = this.pickerMarker } = opt || {};
+    this.pickerMarker = this.setMarker(lon, lat, {
+      ...opt,
+      marker,
+    });
+  }
+
+  on(...args) {
+    return this.map?.on(...args);
+  }
+
+  off(...args) {
+    return this.map?.off(...args);
+  }
+}
+
+export { AMapLoader };

package/src/components/LocationPicker/Map/AMap/index.jsx

@@ -1,23 +1,20 @@
 import { useEffect, useRef } from "react";
 
+import { MapUtils } from "./common/utils";
 import AMapLoader from "./common/loader";
 
 import "./index.less";
 
-let map = null;
-let AMap = null;
-
 if (window._AMapLoaderTemp && window._AMapLoaderTemp.key) {
   AMapLoader({
     key: window._AMapLoaderTemp.key,
     securityJsCode: window._AMapLoaderTemp.securityJsCode,
-  }).then((_AMap) => {
-    AMap = _AMap;
   });
 }
 
 function AMapCom(props) {
   const mapRef = useRef();
+  const mapDomRef = useRef();
 
   useEffect(() => {
     const { key, securityJsCode, plugins } = props;
@@ -27,21 +24,21 @@ function AMapCom(props) {
       plugins,
     }).then((AMap) => {
       const { zoom, center, init } = props;
-      map = new AMap.Map(mapRef.current, {
+      mapRef.current = new AMap.Map(mapDomRef.current, {
         zoom: zoom || 11,
         center: center || [120.160217, 30.243861],
       });
-      init && init(map, AMap);
+      init && init({ map: mapRef.current, mapUtils: new MapUtils({ map: mapRef.current, AMap }), AMap });
     });
   }, []);
 
   useEffect(() => {
     if (Array.isArray(props.center) && props.center.length > 1) {
-      map?.setCenter(props.center);
+      mapRef.current?.setCenter(props.center);
     }
   }, [props.center]);
 
-  return <div ref={mapRef} className="a-map-container" style={props.style}></div>;
+  return <div ref={mapDomRef} className="a-map-container" style={props.style}></div>;
 }
 
 export default AMapCom;

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/MapSearch/index.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { SearchBar, CheckList, Button } from "antd-mobile";
+import { SearchBar, CheckList, Button, Toast } from "antd-mobile";
 import { debounce } from "lodash";
 
 import { getSearchTips } from "../../servers";
@@ -37,6 +37,7 @@ function Search(props) {
           setLoading(false);
         })
         .catch((err) => {
+          Toast.show({ icon: "fail", content: err });
           setLoading(false);
         });
     }, 500),

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/Notice/index.tsx

@@ -0,0 +1,15 @@
+import { NoticeBar } from "antd-mobile";
+import { ExclamationCircleOutline } from "antd-mobile-icons";
+
+export const Notice = (props) => {
+  return (
+    <NoticeBar
+      className="location-picker-notice-bar"
+      content={props.changeMode === "click" ? "点击地图上的位置，选择目标地址" : "拖拽移动地图，中心标点为目标地址"}
+      color="default"
+      icon={<ExclamationCircleOutline />}
+    />
+  );
+};
+
+export default Notice;

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

@@ -0,0 +1,17 @@
+.location-picker-info {
+  padding: 2vw 4vw;
+  .picker-info-lon,
+  .picker-info-lat,
+  .picker-info-addr {
+    display: flex;
+    .picker-info-label {
+      white-space: nowrap;
+    }
+  }
+  .picker-info-lon {
+  }
+  .picker-info-lat {
+  }
+  .picker-info-addr {
+  }
+}

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

@@ -0,0 +1,78 @@
+import { Input, DotLoading } from "antd-mobile";
+
+import "./index.less";
+
+export const PickerInfo = (props) => {
+  const { pickInfo, setPickInfo, setPoint, addrLoading, defaultLocation } = props;
+
+  function onPILonChange(e) {
+    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;
+    const res: { lon; lat; addr } = { ...pickInfo };
+    res.lat = val;
+    setPickInfo(res);
+    return res;
+  }
+
+  /**
+   * 失去焦点之后，地图居中
+   * @param e
+   */
+  function onPILonBlur(e) {
+    const res = onPILonChange(e);
+    setPoint && setPoint(res?.lon || defaultLocation.lon, res?.lat || defaultLocation.lat, { changeCenter: true });
+  }
+
+  /**
+   * 失去焦点之后，地图居中
+   * @param e
+   */
+  function onPILatBlur(e) {
+    const res = onPILatChange(e);
+    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
+          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
+          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>
+        {addrLoading ? <DotLoading /> : pickInfo.addr}
+      </div>
+    </div>
+  );
+};
+
+export default PickerInfo;

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

@@ -0,0 +1,13 @@
+.location-value-box {
+  .location-value-head-box {
+    display: flex;
+    .location-lon-lat {
+      flex: 1;
+    }
+  }
+
+  .location-btn {
+    padding: 4px 0;
+    padding-left: 5px;
+  }
+}

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

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+import { Button } from "antd-mobile";
+import { LocationFill } from "antd-mobile-icons";
+import { useField } from "@formily/react";
+
+import { getPropsValue } from "../../common/utils";
+
+import "./index.less";
+
+/**
+ * 展示 form 表单当前项的数据
+ * @param props
+ * @returns
+ */
+export const ResInfo = (props) => {
+  const { onShow, isObjectRes, lonKey, latKey, addrKey, value, pickerText = "选点" } = props || {};
+  const field: any = useField();
+
+  // 数据格式转为内部格式，方便存取
+  const formatVal = useMemo(
+    () =>
+      getPropsValue(value, field, {
+        isObjectRes,
+        lonKey,
+        latKey,
+        addrKey,
+      }),
+    [isObjectRes, lonKey, latKey, addrKey, value, field.data],
+  );
+
+  return (
+    <div className="location-value-box">
+      <div className="location-value-head-box">
+        <div className="location-lon-lat">
+          <div>经度：{formatVal.lon} </div>
+          <div>纬度：{formatVal.lat}</div>
+        </div>
+        <Button className="location-btn" color="primary" fill="none" onClick={onShow}>
+          <LocationFill />
+          {pickerText}
+        </Button>
+      </div>
+      <div>地址：{formatVal.addr}</div>
+    </div>
+  );
+};
+
+export default ResInfo;