@hzab/form-render 0.3.1 → 0.4.0

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

@@ -0,0 +1,59 @@
+const defaultVersion = "1.4.15";
+const defaultPlugins = ["AMap.Geocoder", "AMap.Autocomplete"];
+
+if (!window._AMapLoaderTemp) {
+  window._AMapLoaderTemp = {};
+}
+
+window._AMapLoaderTemp.loading = false;
+window._AMapLoaderTemp.promise = null;
+
+function Loader(opt) {
+  if (!window.AMap) {
+    window._AMapSecurityConfig = {
+      securityJsCode: opt.securityJsCode || window._AMapLoaderTemp.securityJsCode,
+    };
+  }
+  const { key, version, plugins } = opt || {};
+  return new Promise((resolve, reject) => {
+    // 判断是否有进行中的加载器
+    if (window._AMapLoaderTemp.loading && window._AMapLoaderTemp.promise) {
+      window._AMapLoaderTemp.promise.then((AMap) => {
+        resolve(window.AMap);
+      });
+      return;
+    }
+    // 判断是否存在 AMap，且入参 plugins 是否改变
+    if (
+      (window.AMap && !plugins) ||
+      (window.AMap && plugins && JSON.stringify(window._AMapLoaderTemp.plugins) === JSON.stringify(plugins))
+    ) {
+      resolve(window.AMap);
+      return;
+    }
+
+    window._AMapLoaderTemp.plugins = plugins ? [...defaultPlugins, ...(plugins || [])] : defaultPlugins;
+
+    // 不用地图组件时可以不安装  "@amap/amap-jsapi-loader"
+    const AMapLoader = require("@amap/amap-jsapi-loader");
+
+    window._AMapLoaderTemp.loading = true;
+    window._AMapLoaderTemp.promise = AMapLoader.load({
+      key: key || window._AMapLoaderTemp.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: version || defaultVersion, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: window._AMapLoaderTemp.plugins, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    })
+      .then((AMap) => {
+        window.AMap = AMap;
+        resolve(window.AMap);
+        window._AMapLoaderTemp.loading = false;
+        return AMap;
+      })
+      .catch((e) => {
+        reject(e);
+        console.error("AMap loader: ", e);
+      });
+  });
+}
+
+export default Loader;

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

@@ -0,0 +1,137 @@
+import AMapLoader from "./loader";
+import MarkerIcon from "../../../assets/marker-icon.svg";
+
+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 icon = new AMap.Icon({
+      size: new AMap.Size(34, 34), //图标尺寸
+      image: MarkerIcon, // Icon 的图像
+      imageSize: new AMap.Size(34, 34), // 根据所设置的大小拉伸或压缩图片
+    });
+    const _m = new AMap.Marker({
+      offset: new AMap.Pixel(-17, -34),
+      icon,
+      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

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

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

@@ -0,0 +1,4 @@
+.a-map-container {
+  width: 100%;
+  height: 100%;
+}

package/src/components/LocationPicker/README.md

@@ -0,0 +1,35 @@
+#### 使用前安装依赖
+
+npm install @amap/amap-jsapi-loader
+
+#### 引入
+
+```jsx
+import MapLocationPoint from "./mapLocationPoint";
+
+export default function AMap(props) {
+  return <MapLocationPoint hasSearch={true}></MapLocationPoint>;
+}
+```
+
+### InfoPanel Attributes
+
+| 参数          | 类型      | 必填 | 默认值    | 说明                                                        |
+| ------------- | --------- | ---- | --------- | ----------------------------------------------------------- |
+| mode          | string    | 否   | dialog    | 地图显示的类型， dialog 弹窗显示、 show 直接显示            |
+| layout        | string    | 否   | ver       | 选择器和地图的布局 hor 水平、 ver 垂直                      |
+| hasSearch     | boolean   | 否   | true      | 是否允许搜索                                                |
+| isObjectRes   | boolean   | 否   | true      | 是否把数据存放在对象中                                      |
+| isAutoFixAddr | boolean   | 否   | false     | 打开地图时是否根据经纬度自动修正已填的地址                  |
+| changeMode    | string    | 否   | move      | 改变经纬度等数据的触发模式；移动地图：move，点击地图：click |
+| lonKey        | string    | 否   | longitude | 经度字段 key                                                |
+| latKey        | string    | 否   | latitude  | 维度字段 key                                                |
+| addrKey       | string    | 否   | address   | 地址字段 key                                                |
+| isAutoSearch  | boolean   | 否   | false     | 搜索框是否自动搜索                                          |
+| pickerIcon    | ReactNode | 否   | -         | 地图选点弹窗开启按钮的 icon 元素                            |
+| pickerIconUrl | string    | 否   | -         | 地图选点弹窗开启按钮的 icon img 的地址                      |
+
+- isObjectRes 是否把数据存放在对象中
+
+  - true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name；
+  - false: 所有数据打平放到当前的 data 中，和其他表单项平级

package/src/components/LocationPicker/assets/marker-icon.svg

@@ -0,0 +1,4 @@
+<svg t="1708497164654" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="8489" width="200" height="200">
+  <path d="M512 1024c-205.76-241.472-326.272-411.712-361.664-510.72a384 384 0 1 1 723.072 0.832C837.76 612.928 717.312 782.848 512 1024.064z m0-512a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" fill="#1677ff" p-id="8490"></path>
+</svg>

package/src/components/LocationPicker/assets/picker-icon.svg

@@ -0,0 +1,5 @@
+<svg t="1708305242338" class="icon" viewBox="0 0 1088 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="1494" width="200" height="200">
+  <path d="M812.224 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576 193.472-184.448 288-338.432 288-456.576z m-288 544c-234.688-213.312-352-394.688-352-544a352 352 0 1 1 704 0c0 149.312-117.312 330.688-352 544z" fill="#1677ff" p-id="1495"></path>
+  <path d="M524.224 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z m345.6 192l102.4 256h-288v-64h-320v64h-288l102.4-256h691.2z m-68.928 0H247.552l-76.8 192h706.944l-76.8-192z" fill="#1677ff" p-id="1496"></path>
+</svg>

package/src/components/LocationPicker/assets/position-icon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1708478996666" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="6897"
+  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+  <path d="M895.044488 550.176484l-42.200124 0C834.62235 708.540282 709.048353 834.001715 550.718325 852.244194l0 42.258453c0 21.946848-17.790178 39.730886-39.729863 39.730886s-39.729863-17.784038-39.729863-39.730886l0-42.258453C312.926524 834.001715 187.354574 708.540282 169.131537 550.176484l-42.199101 0c-21.940708 0-39.730886-17.786085-39.730886-39.729863 0-21.940708 17.789155-39.726793 39.730886-39.726793l42.257429 0c18.24248-158.335145 143.711076-283.907095 302.068733-302.126039l0-42.200124c0-21.940708 17.789155-39.730886 39.729863-39.730886s39.729863 17.789155 39.729863 39.730886l0 42.258453c158.331052 18.241456 283.904025 143.706983 302.126039 302.06771l42.200124 0c21.940708 0 39.729863 17.786085 39.729863 39.726793C934.774351 532.390399 916.986219 550.176484 895.044488 550.176484zM696.395172 470.719828l76.16161 0c-17.251919-114.39847-107.492176-204.651007-221.838458-221.913159l0 76.236312c0 21.939685-17.790178 39.726793-39.729863 39.726793s-39.729863-17.787108-39.729863-39.726793l0-76.165704c-114.39233 17.256012-204.644867 107.495246-221.910089 221.842551l76.233242 0c21.946848 0 39.729863 17.786085 39.729863 39.726793 0 21.943778-17.781992 39.729863-39.729863 39.729863l-76.162634 0c17.251919 114.39847 107.498316 204.649983 221.839481 221.910089l0-76.234265c0-21.943778 17.789155-39.72577 39.729863-39.72577s39.729863 17.781992 39.729863 39.72577l0 76.234265c114.346281-17.260106 204.586538-107.511619 221.838458-221.910089l-76.16161 0c-21.941732 0-39.729863-17.786085-39.729863-39.729863C656.665309 488.505913 674.453441 470.719828 696.395172 470.719828zM510.988462 550.176484c-21.939685 0-39.729863-17.786085-39.729863-39.729863 0-21.940708 17.789155-39.726793 39.729863-39.726793s39.729863 17.786085 39.729863 39.726793C550.718325 532.390399 532.928147 550.176484 510.988462 550.176484z" fill="#000000" p-id="6898"></path>
+</svg>

package/src/components/LocationPicker/assets/reset-icon.svg

@@ -0,0 +1,5 @@
+<svg t="1708485324277" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="7503" width="200" height="200">
+  <path d="M512 682.666667c71.296 0 128-56.789333 128-128s-56.704-128-128-128-128 56.789333-128 128 56.704 128 128 128z" p-id="7504"></path>
+  <path d="M888.192 477.269333a381.44 381.44 0 0 0-57.813333-137.344 386.261333 386.261333 0 0 0-103.68-103.68 381.866667 381.866667 0 0 0-137.344-57.813333 385.194667 385.194667 0 0 0-78.421334-7.68V85.333333L341.333333 213.333333l169.6 128V256.085333c20.650667-0.085333 41.301333 1.877333 61.226667 5.973334a297.002667 297.002667 0 0 1 106.752 44.928 298.88 298.88 0 0 1 80.725333 80.725333A297.258667 297.258667 0 0 1 810.666667 554.666667a300.032 300.032 0 0 1-23.466667 116.266666 303.36 303.36 0 0 1-27.477333 50.688 307.2 307.2 0 0 1-36.608 44.330667 299.861333 299.861333 0 0 1-150.869334 81.365333 304.213333 304.213333 0 0 1-120.405333 0 297.002667 297.002667 0 0 1-106.794667-44.970666 298.752 298.752 0 0 1-80.64-80.64A298.496 298.496 0 0 1 213.333333 554.666667H128a384.853333 384.853333 0 0 0 65.664 214.784 388.096 388.096 0 0 0 103.594667 103.594666A381.866667 381.866667 0 0 0 512 938.666667a387.84 387.84 0 0 0 77.397333-7.808 384.597333 384.597333 0 0 0 137.301334-57.813334 379.136 379.136 0 0 0 56.789333-46.890666 393.728 393.728 0 0 0 46.933333-56.832A381.952 381.952 0 0 0 896 554.666667a387.84 387.84 0 0 0-7.808-77.397334z" p-id="7505"></path>
+</svg>

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

@@ -0,0 +1,45 @@
+/**
+ * 获取传入的数据，并转为内部数据格式
+ * @param value
+ * @param form
+ * @param opt
+ * @returns
+ * {
+      lon: value[lonKey],
+      lat: value[latKey],
+      addr: value[addrKey],
+    }
+ */
+export function getPropsValue(value = {}, field: any, opt) {
+  const { isObjectRes = true, lonKey = "longitude", latKey = "latitude", addrKey = "address" } = opt || {};
+  let lon = value[lonKey];
+  let lat = value[latKey];
+  let addr = value[addrKey];
+  // 数据和其他子项平级的情况
+  let form = getParentValue(field);
+  if (form && isObjectRes === false) {
+    lon = form[lonKey];
+    lat = form[latKey];
+    addr = form[addrKey];
+  }
+  const res = {
+    lon,
+    lat,
+    addr,
+  };
+  return res;
+}
+
+/**
+ * 获取父级的数据对象（包括当前项的对象）
+ * { 当详情: xxx, 其他项: lll }
+ * @param field
+ * @returns
+ */
+export function getParentValue(field) {
+  let form = field?.parent?.value || field?.value;
+  if (Array.isArray(form)) {
+    form = form[field.index];
+  }
+  return form;
+}

package/src/components/LocationPicker/components/MapSearch/index.jsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Input, AutoComplete } from "antd";
+
+import { getSearchTips } from "../../servers";
+
+import "./index.less";
+
+const cityCode = "0571";
+
+function Search(props) {
+  const [loading, setLoading] = useState(false);
+  const [tips, setTips] = useState([]);
+
+  function onSelect(value, option) {
+    const { lng: _lng, lat: _lat } = option || {};
+    props.setPoint && props.setPoint(_lng, _lat, { changeCenter: true });
+  }
+
+  function onSearch(search) {
+    if (!window.AMap?.Autocomplete) {
+      return;
+    }
+    if (!search) {
+      setTips([]);
+      return;
+    }
+    setLoading(true);
+    getSearchTips(search, props.cityCode || cityCode)
+      .then((res) => {
+        setTips(
+          res?.map((it) => ({
+            ...it,
+            label: it.name,
+            // 解决回显为 id 的问题
+            value: it.name,
+          })),
+        );
+        setLoading(false);
+      })
+      .catch((err) => {
+        setLoading(false);
+      });
+  }
+
+  return (
+    <AutoComplete
+      className="location-map-search"
+      allowClear
+      options={tips}
+      onSelect={onSelect}
+      onSearch={_.debounce(onSearch, 500)}
+      onClear={() => {
+        setTips([]);
+      }}
+    >
+      <Input.Search loading={loading} placeholder="请输入" />
+    </AutoComplete>
+  );
+}
+
+export default Search;

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

@@ -0,0 +1,10 @@
+.location-map-search {
+  width: 300px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  .ant-input {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,81 @@
+.location-picker-modal-content {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  .location-picker-map-wrap {
+    flex: 1;
+  }
+  .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%);
+      width: 34px;
+      color: #1677ff;
+    }
+
+    .set-map-actions {
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+      & > img {
+        display: block;
+        width: 32px;
+        margin-bottom: 8px;
+        padding: 4px;
+        background-color: #fff;
+        border-radius: 8px;
+        cursor: pointer;
+        &:last-child {
+          margin-bottom: unset;
+        }
+      }
+    }
+  }
+
+  .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,
+  &.location-modal-content-layout-hor-reverse {
+    &.location-mode-dialog {
+      .location-picker-info {
+        width: 400px;
+      }
+    }
+    .location-picker-info {
+      margin-right: 20px;
+    }
+    .location-picker-info;
+  }
+  &.location-modal-content-layout-hor-reverse {
+    flex-direction: row-reverse;
+  }
+  &.location-modal-content-layout-ver-reverse {
+    flex-direction: column-reverse;
+  }
+}