@hzab/form-render-mobile 0.2.3 → 0.2.4

package/src/components/LocationPicker/index.tsx

@@ -1,35 +1,28 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Popup, Button, SpinLoading, Toast } from "antd-mobile";
+import { useRef, useState } from "react";
+import { Popup, Button } from "antd-mobile";
 import { useField, useFieldSchema } from "@formily/react";
-import { LocationFill } from "antd-mobile-icons";
-import { debounce } from "lodash";
 
 import ResInfo from "./components/ResInfo";
-
-import PickerInfo from "./components/PickerInfo";
-import AMapCom from "./Map/AMap";
-import Notice from "./components/Notice";
+import ModalContent from "./components/ModalContent";
 
 import { MapUtils } from "./Map/AMap/common/utils";
 import { getCurrentPosition } from "../../common/location-utils";
-import MapSearch from "./components/MapSearch";
-
-import { getAddress } from "./servers/index";
-import { getPropsValue, getParentValue } from "./common/utils";
+import { getParentValue } from "./common/utils";
 
 import "./index.less";
 
-const defaultLngLat = {
-  lon: 120.160217,
-  lat: 30.243861,
+const defaultLocation = {
+  lon: 120.168893,
+  lat: 30.225404,
+  addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
 };
 
 // 获取当前经纬度
 getCurrentPosition()
   .then((res) => {
     const { coords = {} } = res;
-    defaultLngLat.lon = coords.longitude;
-    defaultLngLat.lat = coords.latitude;
+    defaultLocation.lon = coords.longitude;
+    defaultLocation.lat = coords.latitude;
   })
   .catch((e) => {
     console.warn("Error getCurrentPosition e: ", e);
@@ -37,6 +30,18 @@ getCurrentPosition()
 
 export function LocationPicker(props) {
   const {
+    /**
+     * 地图显示类型：
+     * 弹窗 dialog
+     * 直接显示 show
+     */
+    mode = "dialog",
+    /**
+     * 选择器和地图的布局
+     * 水平 hor
+     * 垂直 ver
+     */
+    layout = "ver",
     // 是否允许搜索
     hasSearch = true,
     /**
@@ -52,8 +57,8 @@ export function LocationPicker(props) {
     isAutoFixAddr = false,
     /**
      * 改变经纬度等数据的触发模式
-     * 移动地图：move
-     * 点击地图：click
+     * 移动地图 move
+     * 点击地图 click
      */
     changeMode = "move",
     lonKey = "longitude",
@@ -62,128 +67,15 @@ export function LocationPicker(props) {
     value,
     // 搜索框是否自动搜索
     isAutoSearch = true,
-    // 是否是移动端，changeMode == 'move' 时改变监听事件
-    isMobile = true,
   } = props;
   const field: any = useField();
   const fieldSchema = useFieldSchema();
 
   const mapUtilsRef = useRef<MapUtils>();
+  const pickInfoRef = useRef(defaultLocation);
 
   const [loading, setLoading] = useState(false);
-  const [addrLoading, setAddrLoading] = useState(false);
   const [visible, setVisible] = useState(false);
-  // 数据格式转为内部格式，方便存取
-  const opt = {
-    isObjectRes,
-    lonKey,
-    latKey,
-    addrKey,
-  };
-
-  const formatVal = useMemo(
-    () => getPropsValue(value, field, opt),
-    [isObjectRes, lonKey, latKey, addrKey, value, field.data],
-  );
-
-  // 地图选点组件选中的值
-  const [pickInfo, setPickInfo] = useState(formatVal);
-
-  useEffect(() => {
-    if (visible) {
-      let _lon = defaultLngLat.lon;
-      let _lat = defaultLngLat.lat;
-      if (formatVal.lon && formatVal.lat) {
-        _lon = formatVal.lon;
-        _lat = formatVal.lat;
-      }
-      // 解决关闭弹窗之后点位不居中的问题
-      if (window.AMap && window.AMap.LngLat) {
-        setMapCenter(_lon, _lat);
-      }
-      setPoint(_lon, _lat, { isAutoFixAddr: false });
-    }
-  }, [visible, formatVal, changeMode]);
-
-  useEffect(() => {
-    setPickInfo(formatVal);
-  }, [formatVal, isAutoFixAddr]);
-
-  function mapInit({ map, mapUtils }) {
-    mapUtilsRef.current = mapUtils;
-    setLoading(false);
-    let _lon = defaultLngLat.lon;
-    let _lat = defaultLngLat.lat;
-    if (pickInfo.lon && pickInfo.lat) {
-      _lon = pickInfo.lon;
-      _lat = pickInfo.lat;
-    }
-    setPoint(_lon, _lat, { isAutoFixAddr });
-
-    setMapCenter(_lon, _lat);
-    if (changeMode === "click") {
-      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
-      // 点击选中点位的情况
-      mapUtilsRef.current.on("click", function (ev) {
-        const { lng: evLon, lat: evLat } = ev.lnglat || {};
-        setPoint(evLon, evLat, { changeCenter: true });
-      });
-    } else {
-      // 移动地图
-      mapUtilsRef.current.on(
-        isMobile ? "touchend" : "mouseup",
-        debounce(function (ev) {
-          let currentCenter = mapUtilsRef.current?.getCenter();
-          const { lng: centerLon, lat: centerLat } = currentCenter || {};
-          // 移动选中点位的情况
-          let _lon = centerLon;
-          let _lat = centerLat;
-          setPoint(_lon, _lat);
-        }, 1000),
-      );
-    }
-  }
-
-  /**
-   * 设置地图中心点
-   * @param lon
-   * @param lat
-   */
-  function setMapCenter(lon, lat) {
-    mapUtilsRef.current?.setCenter(lon, lat);
-  }
-
-  function setPoint(_lon, _lat, opt?: any) {
-    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter } = opt || {};
-    const lon = _lon || pickInfo.lon;
-    const lat = _lat || pickInfo.lat;
-    (_isAutoFixAddr || !pickInfo.addr) && getAddr(lon, lat);
-    const res = { ...pickInfo, lon, lat, center: [lon, lat] };
-    setPickInfo(res);
-    if (changeMode === "click") {
-      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
-    }
-    if (changeCenter) {
-      setMapCenter(_lon, _lat);
-    }
-  }
-
-  function getAddr(_lng, _lat) {
-    if (!window.AMap) {
-      return "";
-    }
-
-    setAddrLoading(true);
-    getAddress(_lng, _lat)
-      .then((addr) => {
-        setAddrLoading(false);
-        setPickInfo((_p) => ({ ..._p, addr }));
-      })
-      .catch((err) => {
-        Toast.show({ icon: "fail", content: err });
-        setAddrLoading(false);
-      });
-  }
 
   function onShow() {
     // 等待地图加载完毕
@@ -193,81 +85,123 @@ export function LocationPicker(props) {
 
   function onClose() {
     setVisible(false);
-    setLoading(false);
   }
 
-  function onOk() {
-    const res = {
-      [lonKey]: pickInfo.lon,
-      [latKey]: pickInfo.lat,
-      [addrKey]: pickInfo.addr,
+  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);
+    props.onChange && props.onChange(_res);
     if (isObjectRes === false) {
       // 只有一层的情况
       if (!field.parent) {
-        field.form.setValues(res);
+        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];
+        Object.keys(_res).forEach((key) => {
+          parentVal[key] = _res[key];
         });
       }
     }
+  }
 
+  function onOk() {
+    onChange();
     onClose();
   }
 
-  return (
-    <div className="location-picker">
-      {/* 显示表单选中的结果 */}
-      <ResInfo {...props} onShow={onShow} />
-      {/* 弹窗 */}
-      <Popup
-        maskClassName="location-picker-popup-mask"
-        className="location-picker-popup"
-        onMaskClick={onClose}
-        onClose={onClose}
-        bodyStyle={{
-          minHeight: "80vh",
-          maxHeight: "100vh",
-        }}
-        visible={visible}
-      >
-        <div className="location-popup-header">
-          <Button fill="none" onClick={onClose}>
-            取消
-          </Button>
-          <Button color="primary" fill="none" onClick={onOk} loading={addrLoading || loading}>
-            确认
-          </Button>
-        </div>
+  function setResInfo(res) {
+    setPickInfo(res);
+    onChange(res);
+  }
+
+  function setPickInfo(res) {
+    pickInfoRef.current = res;
+  }
 
-        <div className="location-popup-content">
-          {/* 点击/移动 地图选中的数据 */}
-          <PickerInfo
-            pickInfo={pickInfo}
-            setPickInfo={setPickInfo}
-            setPoint={setPoint}
-            addrLoading={addrLoading}
-            defaultLngLat={defaultLngLat}
-          />
+  const _props = {
+    /**
+     * 地图显示类型：
+     * 弹窗 dialog
+     * 直接显示 show
+     */
+    mode: mode ?? "dialog",
+    /**
+     * 选择器和地图的布局
+     * 水平 hor
+     * 垂直 ver
+     */
+    layout: layout ?? "ver",
+    // 是否允许搜索
+    hasSearch: hasSearch ?? true,
+    /**
+      * 
+      isObjectRes 
+       true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
+       false: 所有数据打平放到当前的 data 中，和其他表单项平级
+      */
+    isObjectRes: isObjectRes ?? true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr: isAutoFixAddr ?? false,
+    /**
+     * 改变经纬度等数据的触发模式
+     * 移动地图：move
+     * 点击地图：click
+     */
+    changeMode: changeMode ?? "move",
+    lonKey: lonKey ?? "longitude",
+    latKey: latKey ?? "latitude",
+    addrKey: addrKey ?? "address",
+    value,
+    // 搜索框是否自动搜索
+    isAutoSearch: isAutoSearch ?? true,
+    defaultLocation,
+  };
 
-          {/* 关闭弹窗之后清除搜索内容 */}
-          {hasSearch && visible ? <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} /> : null}
-          <div className="location-picker-map">
-            <AMapCom init={mapInit} loading={loading} style={{ height: "68vh" }} />
-            <Notice changeMode={changeMode} />
-            {!loading && changeMode !== "click" && <LocationFill className="location-picker-center-icon" />}
-          </div>
-          {loading && (
-            <div className="spin-loading-wrap">
-              <SpinLoading className="spin-loading" color="primary" />
+  return (
+    <div className="location-picker">
+      {mode === "show" ? (
+        <ModalContent {..._props} visible={visible} setPickInfo={setResInfo} layout={layout} />
+      ) : (
+        <>
+          {/* 弹窗 */}
+          {/* 有弹窗时，显示表单选中的结果 */}
+          <ResInfo {..._props} onShow={onShow} />
+          <Popup
+            maskClassName="location-picker-popup-mask"
+            className="location-picker-popup"
+            onMaskClick={onClose}
+            onClose={onClose}
+            bodyStyle={{
+              minHeight: "78vh",
+              maxHeight: "100vh",
+            }}
+            visible={visible}
+          >
+            <div className="location-popup-header">
+              <Button fill="none" onClick={onClose}>
+                取消
+              </Button>
+              <Button color="primary" fill="none" onClick={onOk} loading={loading}>
+                确认
+              </Button>
             </div>
-          )}
-        </div>
-      </Popup>
+            <ModalContent
+              {..._props}
+              visible={visible}
+              setPickInfo={setPickInfo}
+              layout={layout}
+              setLoading={setLoading}
+            />
+          </Popup>
+        </>
+      )}
     </div>
   );
 }

package/src/index.less

@@ -1,13 +1,14 @@
 .form-render {
+  font-size: 4vw;
+  .adm-formily-item {
+    font-size: 4vw;
+  }
   .adm-list-body {
     background-color: unset;
     .adm-card-body {
       .adm-list-item-content {
         border-top: unset;
       }
-      .adm-formily-item{
-        font-size: 30px ;
-      }
     }
   }
   .picker-box {
@@ -37,7 +38,8 @@
     }
   }
 
-  & .adm-radio, & .adm-checkbox {
+  & .adm-radio,
+  & .adm-checkbox {
     padding-right: 10px;
   }
 }