@hzab/form-render 0.4.2 → 0.5.1

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Spin, message } from "antd";
-import { useField } from "@formily/react";
+import { observer } from "@formily/react";
 import { debounce } from "lodash";
 
 import PickerInfo from "../PickerInfo";
@@ -13,13 +13,15 @@ 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 {
+  markerIcon as markerIconDef,
+  positionIcon as positionIconDef,
+  resetIcon as resetIconDef,
+} from "../../assets/svg-icon";
 
 import "./index.less";
 
-export const ModalContent = (props) => {
+export const ModalContent = observer((props: any) => {
   const {
     mode,
     /**
@@ -32,23 +34,10 @@ export const ModalContent = (props) => {
     layout = "ver",
     // 是否允许搜索
     hasSearch = true,
-    /**
-     * 
-     isObjectRes 
-      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
-      false: 所有数据打平放到当前的 data 中，和其他表单项平级
-     */
-    isObjectRes = true,
     /**
      * 打开地图时是否根据经纬度自动修正已填的地址
      */
     isAutoFixAddr = false,
-    /**
-     * 改变经纬度等数据的触发模式
-     * 移动地图：move
-     * 点击地图：click
-     */
-    changeMode = "click",
     lonKey = "longitude",
     latKey = "latitude",
     addrKey = "address",
@@ -57,88 +46,92 @@ export const ModalContent = (props) => {
     isAutoSearch = true,
     //
     visible,
-    defaultLocation,
+    visibleKey,
+    defaultLocation = {},
     disabled,
     readOnly,
+    icons,
+    markerIconConf,
+    getCurPositionConf,
   } = props;
 
-  const field: any = useField() || {};
-
   const mapUtilsRef = useRef<MapUtils>();
 
   // 数据格式转为内部格式，方便存取
   const formatVal = useMemo(
     () =>
-      getPropsValue(value, field, {
-        isObjectRes,
+      getPropsValue(value, {
         lonKey,
         latKey,
         addrKey,
       }),
-    [isObjectRes, lonKey, latKey, addrKey, value, field.data],
+    [lonKey, latKey, addrKey, value, value?.[lonKey], value?.[latKey], value?.[addrKey]],
   );
+
   const [loading, setLoading] = useState(props.loading || false);
   const [addrLoading, setAddrLoading] = useState(false);
   // 地图选点组件选中的值
   const [pickInfo, setPickInfo] = useState(formatVal);
+  const pickerInfoRef = useRef(pickInfo);
+
+  const isShowMode = mode === "show";
 
   useEffect(() => {
     setLoading(props.loading);
   }, [props.loading]);
 
   useEffect(() => {
-    if (visible) {
+    if (isShowMode) {
+      // mode === 'show' 的情况
+      let _lon = formatVal.lon;
+      let _lat = formatVal.lat;
+      if (_lon && _lat && _lon !== pickInfo.lon && _lat !== pickInfo.lat) {
+        // 解决关闭弹窗之后点位不居中的问题
+        if (window.AMap && window.AMap.LngLat) {
+          setMapCenter(_lon, _lat);
+          setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
+        }
+      }
+    } else if (visibleKey) {
+      // 处理弹窗展示数据回显逻辑
       let _lon = defaultLocation.lon;
       let _lat = defaultLocation.lat;
+      let addr = defaultLocation.addr;
       if (formatVal.lon && formatVal.lat) {
         _lon = formatVal.lon;
         _lat = formatVal.lat;
+        addr = formatVal.addr;
       }
       // 解决关闭弹窗之后点位不居中的问题
       if (window.AMap && window.AMap.LngLat) {
         setMapCenter(_lon, _lat);
       }
-      setPickPoint(_lon, _lat, { isAutoFixAddr: false });
+      if (_lon && _lat && _lon !== pickerInfoRef.current?.lon && _lat !== pickerInfoRef.current?.lat) {
+        setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: addr });
+      }
     }
-  }, [visible, formatVal, changeMode]);
+  }, [visibleKey, formatVal, isShowMode]);
 
   function mapInit({ map, mapUtils }) {
     mapUtilsRef.current = mapUtils;
-    let _lon = defaultLocation.lon;
-    let _lat = defaultLocation.lat;
+    let _lon = isShowMode ? undefined : defaultLocation.lon;
+    let _lat = isShowMode ? undefined : defaultLocation.lat;
     if (pickInfo.lon && pickInfo.lat) {
       _lon = pickInfo.lon;
       _lat = pickInfo.lat;
     }
-    setPickPoint(_lon, _lat, { isAutoFixAddr });
 
     setMapCenter(_lon, _lat);
-    console.log("props.loading", props.loading);
 
     setLoading(props.loading || 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),
-        );
-      }
+      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+      // 点击选中点位的情况
+      mapUtilsRef.current.on("click", function (ev) {
+        const { lng: evLon, lat: evLat } = ev.lnglat || {};
+        setPickPoint(evLon, evLat, { changeCenter: true });
+      });
     } else {
       // 禁用、只读情况使用 marker 展示点位
       mapUtilsRef.current?.setPickerMarker(_lon, _lat);
@@ -151,23 +144,26 @@ export const ModalContent = (props) => {
    * @param lat
    */
   function setMapCenter(lon = pickInfo.lon, lat = pickInfo.lat) {
-    mapUtilsRef.current?.setCenter(lon, lat);
+    lon && lat && mapUtilsRef.current?.setCenter(lon, lat);
   }
 
   async function setPickPoint(_lon, _lat, opt?: any) {
-    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter } = opt || {};
+    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter, addr: _addr } = opt || {};
     const lon = _lon || pickInfo.lon;
     const lat = _lat || pickInfo.lat;
-    // 禁用、只读情况使用 marker 展示点位
-    if (changeMode === "click" || disabled || readOnly) {
-      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
-    }
+    let addr = _addr;
+    mapUtilsRef.current?.setPickerMarker(_lon, _lat);
     if (changeCenter) {
       setMapCenter(_lon, _lat);
     }
-    const addr = _isAutoFixAddr || !pickInfo.addr ? await getAddr(lon, lat) : pickInfo.addr;
+
+    // 开启自动修复地址 且 opt 参数中没有地址，请求地址
+    if (_isAutoFixAddr && !addr) {
+      addr = await getAddr(lon, lat);
+    }
     const res = { ...pickInfo, lon, lat, addr };
     setPickInfo(res);
+    pickerInfoRef.current = res;
     props.setPickInfo && props.setPickInfo(res);
   }
 
@@ -182,7 +178,10 @@ export const ModalContent = (props) => {
       getAddress(_lng, _lat)
         .then((addr) => {
           setAddrLoading(false);
-          setPickInfo((_p) => ({ ..._p, addr }));
+          setPickInfo((_p) => {
+            pickerInfoRef.current = { ..._p, addr };
+            return pickerInfoRef.current;
+          });
           resolve(addr);
         })
         .catch((err) => {
@@ -200,7 +199,7 @@ export const ModalContent = (props) => {
   function getPosition() {
     setLoading(true);
     // 获取当前经纬度
-    getCurrentPosition()
+    getCurrentPosition(getCurPositionConf)
       .then((res) => {
         const { coords = {} } = res;
         setPickPoint(coords.longitude, coords.latitude, { changeCenter: true });
@@ -213,8 +212,6 @@ export const ModalContent = (props) => {
       });
   }
 
-  // 展示已选点位恢复居中按钮:changeMode !== 'move' 或 禁用、只读模式。用于详情等只读情况恢复点位居中
-  const showResetCenter = changeMode !== "move" || disabled || readOnly;
   // 展示获取当前定位按钮 props.showGetPositionBtn !== false 且非禁用、只读模式
   const showGetPositionBtn = props.showGetPositionBtn !== false && !(disabled || readOnly);
 
@@ -233,25 +230,38 @@ export const ModalContent = (props) => {
     );
   };
 
+  const { markerIcon, positionIcon, resetIcon } = icons || {};
+
   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" }} />
+          {hasSearch ? <MapSearch key={visible} setPoint={setPickPoint} isAutoSearch={isAutoSearch} /> : null}
+          <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
           <div className="set-map-actions">
             {/* 已选的点位居中 */}
-            {showResetCenter ? <img className="reset-icon" src={ResetIcon} onClick={resetCenter} /> : null}
+            <div className="actions-icon-box reset-icon-box" onClick={resetCenter}>
+              {typeof resetIcon === "string" ? (
+                <img className="reset-icon" src={resetIcon} />
+              ) : (
+                resetIcon || resetIconDef
+              )}
+            </div>
             {/* 获取当前经纬度 */}
-            {showGetPositionBtn ? <img className="center-icon" src={PositionIcon} onClick={getPosition} /> : null}
+            {showGetPositionBtn ? (
+              <div className="actions-icon-box center-icon-box" onClick={getPosition}>
+                {typeof positionIcon === "string" ? (
+                  <img className="center-icon" src={positionIcon} />
+                ) : (
+                  positionIcon || positionIconDef
+                )}
+              </div>
+            ) : null}
           </div>
-          {changeMode !== "click" && !(disabled || readOnly) && (
-            <img className="location-picker-center-icon" src={MarkerIcon} />
-          )}
         </div>
-        <Notice changeMode={changeMode} />
+        {disabled || readOnly ? null : <Notice />}
       </div>
       {loading && (
         <div className="spin-loading-wrap">
@@ -260,6 +270,6 @@ export const ModalContent = (props) => {
       )}
     </div>
   );
-};
+});
 
 export default ModalContent;

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

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

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

@@ -13,9 +13,15 @@
     &:focus {
       background: transparent;
     }
-    .location-picker-icon {
-      width: 16px;
+    .location-picker-icon-box {
+      display: inline-block;
       margin-right: 4px;
+      svg,
+      img {
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+      }
     }
     .location-picker-text {
       display: inline-block;

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

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { Button } from "antd";
-import { useField } from "@formily/react";
+import { observer } from "@formily/react";
 
-import pickerIconDefault from "./picker-icon.svg";
+import { pickerIcon as pickerIconDefault } from "../../assets/svg-icon";
 import { getPropsValue } from "../../common/utils";
 
 import "./index.less";
@@ -12,30 +12,18 @@ import "./index.less";
  * @param props
  * @returns
  */
-export const ResInfo = (props) => {
-  const {
-    onShow,
-    isObjectRes,
-    lonKey,
-    latKey,
-    addrKey,
-    value,
-    pickerText = "选点",
-    pickerIcon,
-    pickerIconUrl,
-  } = props || {};
-  const field: any = useField() || {};
+export const ResInfo = observer((props: any) => {
+  const { onShow, lonKey, latKey, addrKey, value, pickerText = "选点", pickerIcon } = props || {};
 
   // 数据格式转为内部格式，方便存取
   const formatVal = useMemo(
     () =>
-      getPropsValue(value, field, {
-        isObjectRes,
+      getPropsValue(value, {
         lonKey,
         latKey,
         addrKey,
       }),
-    [isObjectRes, lonKey, latKey, addrKey, value, field.data],
+    [lonKey, latKey, addrKey, value, value?.[lonKey], value?.[latKey], value?.[addrKey]],
   );
 
   return (
@@ -46,13 +34,19 @@ export const ResInfo = (props) => {
           <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-icon-box">
+            {typeof pickerIcon === "string" ? (
+              <img className="location-picker-icon" src={pickerIcon} />
+            ) : (
+              pickerIcon || pickerIconDefault
+            )}
+          </span>
           <span className="location-picker-text">{pickerText}</span>
         </Button>
       </div>
       <div>地址：{formatVal.addr}</div>
     </div>
   );
-};
+});
 
 export default ResInfo;

package/src/components/LocationPicker/index.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Modal } from "antd";
-import { useField, useFieldSchema } from "@formily/react";
+import { observer } from "@formily/react";
 
 import ResInfo from "./components/ResInfo";
 import ModalContent from "./components/ModalContent";
@@ -8,11 +8,12 @@ import ModalContent from "./components/ModalContent";
 import { MapUtils } from "./Map/AMap/common/utils";
 import { getCurrentPosition } from "../../common/location-utils";
 
-import { getParentValue, getPropsValue } from "./common/utils";
+import { getPropsValue } from "./common/utils";
+import { getAddress } from "./servers";
 
 import "./index.less";
 
-export function LocationPicker(props) {
+export const LocationPicker = observer(function (props: any) {
   const {
     /**
      * 地图显示类型：
@@ -28,23 +29,10 @@ export function LocationPicker(props) {
     layout = "ver",
     // 是否允许搜索
     hasSearch = true,
-    /**
-     * 
-     isObjectRes 
-      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
-      false: 所有数据打平放到当前的 data 中，和其他表单项平级
-     */
-    isObjectRes = true,
     /**
      * 打开地图时是否根据经纬度自动修正已填的地址
      */
     isAutoFixAddr = false,
-    /**
-     * 改变经纬度等数据的触发模式
-     * 移动地图 move
-     * 点击地图 click
-     */
-    changeMode = "click",
     lonKey = "longitude",
     latKey = "latitude",
     addrKey = "address",
@@ -52,24 +40,23 @@ export function LocationPicker(props) {
     // 搜索框是否自动搜索
     isAutoSearch = true,
     modalConf = {},
+    icons = {},
+    getCurPositionConf,
   } = props;
-  const field: any = useField() || {};
-  const fieldSchema: any = useFieldSchema() || {};
 
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [defaultLocation, setDefaultLocation] = useState({
     lon: 120.168893,
     lat: 30.225404,
     addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
   });
-  const [visible, setVisible] = useState(false);
-
-  const mapUtilsRef = useRef<MapUtils>();
+  const [visible, setVisible] = useState(mode === "show");
+  // 解决 弹窗关闭之后 visible 无法传入 ModalContent 的问题
+  const [visibleKey, setVisibleKey] = useState(0);
   const pickInfoRef = useRef(defaultLocation);
 
   useEffect(() => {
-    const propsVal = getPropsValue(value, field, {
-      isObjectRes,
+    const propsVal = getPropsValue(value, {
       lonKey,
       latKey,
       addrKey,
@@ -78,13 +65,18 @@ export function LocationPicker(props) {
       setLoading(true);
       // 如果没有传入的经纬度，获取当前实际的经纬度数据
       // 获取当前经纬度
-      getCurrentPosition()
-        .then((res) => {
+      getCurrentPosition(getCurPositionConf)
+        .then(async (res) => {
           const { coords = {} } = res;
+          const lon = coords.longitude;
+          const lat = coords.latitude;
+          const addr: string = await getAddress(lon, lat).then((addr) => {
+            return addr;
+          });
           pickInfoRef.current = {
-            lon: coords.longitude,
-            lat: coords.latitude,
-            addr: "",
+            lon,
+            lat,
+            addr,
           };
           setDefaultLocation(pickInfoRef.current);
           setLoading(false);
@@ -99,13 +91,13 @@ export function LocationPicker(props) {
   }, []);
 
   function onShow() {
-    // 等待地图加载完毕
-    !mapUtilsRef.current && setVisible(true);
     setVisible(true);
+    setVisibleKey(Date.now());
   }
 
   function onClose() {
     setVisible(false);
+    setVisibleKey(Date.now());
   }
 
   function onChange(res = pickInfoRef.current) {
@@ -116,18 +108,6 @@ export function LocationPicker(props) {
       [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() {
@@ -146,8 +126,7 @@ export function LocationPicker(props) {
 
   const isHor = layout === "hor" || layout === "hor-reverse";
   const _props = {
-    disabled: props.disabled,
-    readOnly: props.readOnly,
+    ...props,
     /**
      * 地图显示类型：
      * 弹窗 dialog
@@ -155,58 +134,33 @@ export function LocationPicker(props) {
      */
     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,
+    visible,
+    visibleKey,
     defaultLocation,
-    // 地图选点按钮的 icon 元素
-    pickerIcon: props.pickerIcon,
-    // 地图选点按钮的 icon img 的地址
-    pickerIconUrl: props.pickerIconUrl,
+    loading,
+    setLoading,
   };
 
   return (
     <div className="location-picker">
       {mode === "show" ? (
-        <ModalContent
-          {..._props}
-          visible={visible}
-          setPickInfo={setResInfo}
-          layout={layout}
-          setLoading={setLoading}
-          loading={loading}
-        />
+        <ModalContent {..._props} setPickInfo={setResInfo} />
       ) : (
         <>
           {/* 弹窗 */}
           {/* 有弹窗时，显示表单选中的结果 */}
-          <ResInfo {..._props} onShow={onShow} />
+          <ResInfo {..._props} onShow={onShow} pickerIcon={icons.pickerIcon} />
           <Modal
             className="location-picker-modal"
             title="地图选点"
@@ -216,19 +170,12 @@ export function LocationPicker(props) {
             confirmLoading={loading}
             width={modalConf?.width || isHor ? "1024px" : "720px"}
           >
-            <ModalContent
-              {..._props}
-              visible={visible}
-              setPickInfo={setPickInfo}
-              layout={layout}
-              setLoading={setLoading}
-              loading={loading}
-            />
+            <ModalContent {..._props} setPickInfo={setPickInfo} />
           </Modal>
         </>
       )}
     </div>
   );
-}
+});
 
 export default LocationPicker;