@hzab/form-render-mobile 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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/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/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,73 @@
+import { Input, DotLoading } from "antd-mobile";
+
+import "./index.less";
+
+export const PickerInfo = (props) => {
+  const { pickInfo, setPickInfo, setPoint, addrLoading, defaultLngLat } = 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;
+    });
+    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;
+    });
+    return res;
+  }
+
+  /**
+   * 失去焦点之后，地图居中
+   * @param e
+   */
+  function onPILonBlur(e) {
+    const res = onPILonChange(e);
+    setPoint(res.lon, res.lat);
+  }
+
+  /**
+   * 失去焦点之后，地图居中
+   * @param e
+   */
+  function onPILatBlur(e) {
+    const res = onPILatChange(e);
+    setPoint(res.lon, res.lat);
+  }
+
+  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} />
+      </div>
+      <div className="picker-info-lat">
+        <div className="picker-info-label">纬度：</div>
+
+        <Input value={pickInfo.lat} onChange={onPILatChange} onBlur={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;

package/src/components/LocationPicker/index.less

@@ -1,20 +1,10 @@
 .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 {
+  .location-popup-content {
+    position: relative;
+  }
   .adm-popup-body {
     display: flex;
     flex-direction: column;
@@ -26,23 +16,6 @@
       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%;
@@ -59,10 +32,10 @@
 
       .location-picker-notice-bar {
         position: absolute;
-        bottom: 0;
+        top: 0;
         left: 0;
         width: 100vw;
-        --background-color: rgba(0, 0, 0, 1);
+        --background-color: rgba(0, 0, 0, 0.6);
       }
 
       .location-picker-center-icon {
@@ -85,7 +58,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgba(0, 0, 0, 0.3);
       .spin-loading {
       }
     }