@hzab/form-render 0.3.0 → 0.4.0

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

@@ -0,0 +1,258 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Spin, message } from "antd";
+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 { getCurrentPosition } from "../../../../common/location-utils";
+import { MapUtils } from "../../Map/AMap/common/utils";
+import { getAddress } from "../../servers";
+import { getPropsValue } from "../../common/utils";
+
+import MarkerIcon from "../../assets/marker-icon.svg";
+import PositionIcon from "../../assets/position-icon.svg";
+import ResetIcon from "../../assets/reset-icon.svg";
+
+import "./index.less";
+
+export const ModalContent = (props) => {
+  const {
+    mode,
+    /**
+     * 选择器和地图的布局
+     * 水平 输入框在前 hor
+     * 垂直 输入框在前 ver
+     * 水平 输入框在后 hor-reverse
+     * 垂直 输入框在后 ver-reverse
+     */
+    layout = "ver",
+    // 是否允许搜索
+    hasSearch = true,
+    /**
+     * 
+     isObjectRes 
+      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
+      false: 所有数据打平放到当前的 data 中，和其他表单项平级
+     */
+    isObjectRes = true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr = false,
+    /**
+     * 改变经纬度等数据的触发模式
+     * 移动地图：move
+     * 点击地图：click
+     */
+    changeMode = "click",
+    lonKey = "longitude",
+    latKey = "latitude",
+    addrKey = "address",
+    value,
+    // 搜索框是否自动搜索
+    isAutoSearch = true,
+    //
+    visible,
+    defaultLocation,
+    disabled,
+    readOnly,
+  } = 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 (!(disabled || readOnly)) {
+      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(
+          "mouseup",
+          debounce(function (ev) {
+            let currentCenter = mapUtilsRef.current?.getCenter();
+            const { lng: centerLon, lat: centerLat } = currentCenter || {};
+            // 移动选中点位的情况
+            let _lon = centerLon;
+            let _lat = centerLat;
+            setPickPoint(_lon, _lat);
+          }, 1000),
+        );
+      }
+    } else {
+      // 禁用、只读情况使用 marker 展示点位
+      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+    }
+  }
+
+  /**
+   * 设置地图中心点
+   * @param lon
+   * @param lat
+   */
+  function setMapCenter(lon = pickInfo.lon, lat = pickInfo.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;
+    // 禁用、只读情况使用 marker 展示点位
+    if (changeMode === "click" || disabled || readOnly) {
+      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);
+          message.error(err);
+          setAddrLoading(false);
+        });
+    });
+  }
+
+  function resetCenter() {
+    setMapCenter();
+  }
+
+  function getPosition() {
+    setLoading(true);
+    // 获取当前经纬度
+    getCurrentPosition()
+      .then((res) => {
+        const { coords = {} } = res;
+        setPickPoint(coords.longitude, coords.latitude, { changeCenter: true });
+        setLoading(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+        message.error("定位获取失败");
+        console.warn("Error getCurrentPosition e: ", e);
+      });
+  }
+
+  // 展示已选点位恢复居中按钮:changeMode !== 'move' 或 禁用、只读模式。用于详情等只读情况恢复点位居中
+  const showResetCenter = changeMode !== "move" || disabled || readOnly;
+  // 展示获取当前定位按钮 props.showGetPositionBtn !== false 且非禁用、只读模式
+  const showGetPositionBtn = props.showGetPositionBtn !== false && !(disabled || readOnly);
+
+  const pickInfoRender = function () {
+    /* 点击/移动 地图选中的数据 */
+    return (
+      <PickerInfo
+        pickInfo={pickInfo}
+        setPickInfo={setPickInfo}
+        setPoint={setPickPoint}
+        addrLoading={addrLoading}
+        defaultLocation={defaultLocation}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+    );
+  };
+
+  return (
+    <div className={`location-picker-modal-content location-mode-${mode} location-modal-content-layout-${layout}`}>
+      {pickInfoRender()}
+      <div className="location-picker-map-wrap">
+        <div className="location-picker-map">
+          {/* 关闭弹窗之后清除搜索内容 */}
+          {hasSearch && visible ? <MapSearch setPoint={setPickPoint} isAutoSearch={isAutoSearch} /> : null}
+          <AMapCom init={mapInit} loading={loading} style={{ height: "500px" }} />
+          <div className="set-map-actions">
+            {/* 已选的点位居中 */}
+            {showResetCenter ? <img className="reset-icon" src={ResetIcon} onClick={resetCenter} /> : null}
+            {/* 获取当前经纬度 */}
+            {showGetPositionBtn ? <img className="center-icon" src={PositionIcon} onClick={getPosition} /> : null}
+          </div>
+          {changeMode !== "click" && !(disabled || readOnly) && (
+            <img className="location-picker-center-icon" src={MarkerIcon} />
+          )}
+        </div>
+        <Notice changeMode={changeMode} />
+      </div>
+      {loading && (
+        <div className="spin-loading-wrap">
+          <Spin className="spin-loading" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ModalContent;

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

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

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

@@ -0,0 +1,21 @@
+.location-picker-info {
+  padding: 12px;
+  .picker-info-lon,
+  .picker-info-lat,
+  .picker-info-addr {
+    display: flex;
+    margin-bottom: 8px;
+    .picker-info-label {
+      white-space: nowrap;
+    }
+  }
+  .picker-info-input {
+    min-width: 300px;
+  }
+  .picker-info-lon {
+  }
+  .picker-info-lat {
+  }
+  .picker-info-addr {
+  }
+}

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

@@ -0,0 +1,100 @@
+import { InputNumber, Spin } from "antd";
+
+import "./index.less";
+
+export const PickerInfo = (props) => {
+  const { pickInfo, setPickInfo, setPoint, addrLoading, defaultLocation, disabled, readOnly } = props;
+
+  function onPILonChange(e) {
+    const val = e?.target?.value ?? e;
+    let res = null;
+    setPickInfo((info) => {
+      res = {
+        ...info,
+        lon: val,
+      };
+      return res;
+    });
+    return res;
+  }
+
+  function onPILatChange(e) {
+    const val = e?.target?.value ?? e;
+    let res = null;
+    setPickInfo((info) => {
+      res = {
+        ...info,
+        lat: val,
+      };
+      return 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-position">
+        <div className="picker-info-lon">
+          <div className="picker-info-label">经度：</div>
+          {readOnly ? (
+            pickInfo.lon
+          ) : (
+            <InputNumber
+              className="picker-info-input"
+              disabled={disabled || addrLoading}
+              max={180}
+              min={-180}
+              controls={false}
+              value={pickInfo.lon}
+              onChange={onPILonChange}
+              onBlur={onPILonBlur}
+              onPressEnter={onPILonBlur}
+            />
+          )}
+        </div>
+        <div className="picker-info-lat">
+          <div className="picker-info-label">纬度：</div>
+          {readOnly ? (
+            pickInfo.lat
+          ) : (
+            <InputNumber
+              className="picker-info-input"
+              disabled={disabled || addrLoading}
+              max={90}
+              min={-90}
+              controls={false}
+              value={pickInfo.lat}
+              onChange={onPILatChange}
+              onBlur={onPILatBlur}
+              onPressEnter={onPILatBlur}
+            />
+          )}
+        </div>
+      </div>
+      <div className="picker-info-addr">
+        <div className="picker-info-label">地址：</div>
+        {addrLoading ? <Spin size="small" /> : pickInfo.addr}
+      </div>
+    </div>
+  );
+};
+
+export default PickerInfo;

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

@@ -0,0 +1,25 @@
+.location-value-box {
+  .location-value-head-box {
+    display: flex;
+    .location-lon-lat {
+      flex: 1;
+    }
+  }
+
+  .location-btn {
+    padding: 4px 0;
+    padding-left: 5px;
+    line-height: 1;
+    &:focus {
+      background: transparent;
+    }
+    .location-picker-icon {
+      width: 16px;
+      margin-right: 4px;
+    }
+    .location-picker-text {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+import { useMemo } from "react";
+import { Button } from "antd";
+import { useField } from "@formily/react";
+
+import pickerIconDefault from "./picker-icon.svg";
+import { getPropsValue } from "../../common/utils";
+
+import "./index.less";
+
+/**
+ * 展示 form 表单当前项的数据
+ * @param props
+ * @returns
+ */
+export const ResInfo = (props) => {
+  const {
+    onShow,
+    isObjectRes,
+    lonKey,
+    latKey,
+    addrKey,
+    value,
+    pickerText = "选点",
+    pickerIcon,
+    pickerIconUrl,
+  } = 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" type="text" onClick={onShow}>
+          {pickerIcon ? pickerIcon : <img className="location-picker-icon" src={pickerIconUrl || pickerIconDefault} />}
+          <span className="location-picker-text">{pickerText}</span>
+        </Button>
+      </div>
+      <div>地址：{formatVal.addr}</div>
+    </div>
+  );
+};
+
+export default ResInfo;

package/src/components/LocationPicker/components/ResInfo/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/index.less

@@ -0,0 +1,17 @@
+.location-picker {
+  .location-value-box {
+    .location-value-head-box {
+      display: flex;
+      .location-lon-lat {
+        flex: 1;
+      }
+    }
+  }
+}
+
+.location-picker-modal {
+  .ant-modal-body {
+    display: flex;
+    flex-direction: column;
+  }
+}

package/src/components/LocationPicker/index.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Modal } from "antd";
+import { useField, useFieldSchema } from "@formily/react";
+
+import ResInfo from "./components/ResInfo";
+import ModalContent from "./components/ModalContent";
+
+import { MapUtils } from "./Map/AMap/common/utils";
+import { getCurrentPosition } from "../../common/location-utils";
+
+import { getParentValue } from "./common/utils";
+
+import "./index.less";
+
+const defaultLocation = {
+  lon: 120.168893,
+  lat: 30.225404,
+  addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
+};
+
+// 获取当前经纬度
+getCurrentPosition()
+  .then((res) => {
+    const { coords = {} } = res;
+    defaultLocation.lon = coords.longitude;
+    defaultLocation.lat = coords.latitude;
+  })
+  .catch((e) => {
+    console.warn("Error getCurrentPosition e: ", e);
+  });
+
+export function LocationPicker(props) {
+  const {
+    /**
+     * 地图显示类型：
+     * 弹窗 dialog
+     * 直接显示 show
+     */
+    mode = "dialog",
+    /**
+     * 选择器和地图的布局
+     * 水平 hor
+     * 垂直 ver
+     */
+    layout = "ver",
+    // 是否允许搜索
+    hasSearch = true,
+    /**
+     * 
+     isObjectRes 
+      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
+      false: 所有数据打平放到当前的 data 中，和其他表单项平级
+     */
+    isObjectRes = true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr = false,
+    /**
+     * 改变经纬度等数据的触发模式
+     * 移动地图 move
+     * 点击地图 click
+     */
+    changeMode = "click",
+    lonKey = "longitude",
+    latKey = "latitude",
+    addrKey = "address",
+    value,
+    // 搜索框是否自动搜索
+    isAutoSearch = true,
+    modalConf = {},
+  } = props;
+  const field: any = useField();
+  const fieldSchema = useFieldSchema();
+
+  const mapUtilsRef = useRef<MapUtils>();
+  const pickInfoRef = useRef(defaultLocation);
+
+  const [visible, setVisible] = useState(false);
+
+  function onShow() {
+    // 等待地图加载完毕
+    !mapUtilsRef.current && setVisible(true);
+    setVisible(true);
+  }
+
+  function onClose() {
+    setVisible(false);
+  }
+
+  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);
+    if (isObjectRes === false) {
+      // 只有一层的情况
+      if (!field.parent) {
+        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];
+        });
+      }
+    }
+  }
+
+  function onOk() {
+    onChange();
+    onClose();
+  }
+
+  function setResInfo(res) {
+    setPickInfo(res);
+    onChange(res);
+  }
+
+  function setPickInfo(res) {
+    pickInfoRef.current = res;
+  }
+
+  const isHor = layout === "hor" || layout === "hor-reverse";
+  const _props = {
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    /**
+     * 地图显示类型：
+     * 弹窗 dialog
+     * 直接显示 show
+     */
+    mode: mode ?? "dialog",
+    layout: layout ?? "ver",
+    /**
+     * 是否是水平布局
+     */
+    isHor,
+    // 是否允许搜索
+    hasSearch: hasSearch ?? true,
+    /**
+      * 
+      isObjectRes 
+       true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
+       false: 所有数据打平放到当前的 data 中，和其他表单项平级
+      */
+    isObjectRes: isObjectRes ?? true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr: isAutoFixAddr ?? false,
+    /**
+     * 改变经纬度等数据的触发模式
+     * 移动地图：move
+     * 点击地图：click
+     */
+    changeMode: changeMode ?? "click",
+    lonKey: lonKey ?? "longitude",
+    latKey: latKey ?? "latitude",
+    addrKey: addrKey ?? "address",
+    value,
+    // 搜索框是否自动搜索
+    isAutoSearch: isAutoSearch ?? true,
+    defaultLocation,
+    // 地图选点按钮的 icon 元素
+    pickerIcon: props.pickerIcon,
+    // 地图选点按钮的 icon img 的地址
+    pickerIconUrl: props.pickerIconUrl,
+  };
+
+  return (
+    <div className="location-picker">
+      {mode === "show" ? (
+        <ModalContent {..._props} visible={visible} setPickInfo={setResInfo} layout={layout} />
+      ) : (
+        <>
+          {/* 弹窗 */}
+          {/* 有弹窗时，显示表单选中的结果 */}
+          <ResInfo {..._props} onShow={onShow} />
+          <Modal
+            className="location-picker-modal"
+            title="地图选点"
+            onCancel={onClose}
+            onOk={onOk}
+            visible={visible}
+            width={modalConf?.width || isHor ? "1024px" : "720px"}
+          >
+            <ModalContent {..._props} visible={visible} setPickInfo={setPickInfo} layout={layout} />
+          </Modal>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default LocationPicker;