@hzab/form-render-mobile 0.1.0 → 0.2.0

package/src/components/LocationPicker/index.tsx

@@ -0,0 +1,353 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Popup, Button, SpinLoading, DotLoading, NoticeBar } from "antd-mobile";
+import { connect, mapProps, useField, useFieldSchema } from "@formily/react";
+import { LocationFill, ExclamationCircleOutline } from "antd-mobile-icons";
+import { debounce } from "lodash";
+
+import AMapCom from "./Map/AMap";
+import { getCurrentPosition } from "../../common/location-utils";
+import MapSearch from "./components/MapSearch";
+
+import { getAddress } from "./servers/index";
+import { getPropsValue, getParentValue } from "./common/utils";
+
+import "./index.less";
+
+const defaultLngLat = {
+  lon: 120.160217,
+  lat: 30.243861,
+};
+
+declare var AMap: any;
+
+// 获取当前经纬度
+getCurrentPosition()
+  .then((res) => {
+    const { coords = {} } = res;
+    defaultLngLat.lon = coords.longitude;
+    defaultLngLat.lat = coords.latitude;
+  })
+  .catch((e) => {
+    console.warn("Error getCurrentPosition e: ", e);
+  });
+
+export function LocationPicker(props) {
+  const {
+    // 是否允许搜索
+    hasSearch = true,
+    /**
+     * 
+     isObjectRes 
+      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
+      false: 所有数据打平放到当前的 data 中，和其他表单项平级
+     */
+    isObjectRes = true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr = false,
+    /**
+     * 改变经纬度等数据的触发模式
+     * 移动地图：move
+     * 点击地图：click
+     */
+    changeMode = "move",
+    lonKey = "longitude",
+    latKey = "latitude",
+    addrKey = "address",
+    value,
+  } = props;
+  const field: any = useField();
+  const fieldSchema = useFieldSchema();
+
+  const mapRef: any = useRef();
+  const markerRef: any = useRef();
+
+  const [loading, setLoading] = 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 [resInfo, setResInfo] = useState(formatVal);
+  // 地图选点组件选中的值
+  const [pickInfo, setPickInfo] = useState(formatVal);
+  const [addrLoading, setAddrLoading] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      let _lon = defaultLngLat.lon;
+      let _lat = defaultLngLat.lat;
+      if (resInfo.lon && resInfo.lat) {
+        _lon = resInfo.lon;
+        _lat = resInfo.lat;
+      }
+      // 解决关闭弹窗之后点位不居中的问题
+      if (window.AMap && window.AMap.LngLat) {
+        const position = new window.AMap.LngLat(_lon, _lat);
+        mapRef.current?.setCenter(position);
+      }
+      if (changeMode === "click") {
+        setMarker(_lon, _lat);
+      }
+      setPoint(_lon, _lat, false);
+    }
+  }, [visible, resInfo, changeMode]);
+
+  useEffect(() => {
+    setResInfo((_res) => {
+      const { lon: _lon, lat: _lat, addr: _addr } = formatVal;
+      if ((_lon && _lon != _res.lon) || (_lat && _lat != _res.lat)) {
+        setPoint(_lon, _lat, isAutoFixAddr);
+      }
+      return formatVal;
+    });
+    setPickInfo(formatVal);
+  }, [formatVal, isAutoFixAddr]);
+
+  function mapInit(_map, AMap) {
+    mapRef.current = _map;
+    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);
+
+    if (changeMode === "click") {
+      setMarker(_lon, _lat);
+      // 点击选中点位的情况
+      mapRef.current.on("click", function (ev) {
+        const { lng: evLon, lat: evLat } = ev.lnglat || {};
+        if (AMap) {
+          const position = new AMap.LngLat(evLon, evLat);
+          mapRef.current.setCenter(position);
+        }
+        setMarker(evLon, evLat);
+        setPoint(evLon, evLat);
+      });
+    } else {
+      // 移动地图
+      mapRef.current.on(
+        "moveend",
+        debounce(function (ev) {
+          let currentCenter = mapRef.current.getCenter();
+          const { lng: centerLon, lat: centerLat } = currentCenter || {};
+          // 移动选中点位的情况
+          let _lon = centerLon;
+          let _lat = centerLat;
+          setPoint(_lon, _lat);
+        }, 500),
+      );
+    }
+  }
+
+  function setMarker(_lon, _lat) {
+    if (window.AMap && mapRef.current) {
+      const position = new AMap.LngLat(_lon, _lat);
+      // 创建 Marker 或修改位置
+      if (markerRef.current) {
+        markerRef.current.setPosition(position);
+      } else {
+        markerRef.current = new AMap.Marker({
+          position,
+        });
+        mapRef.current?.add(markerRef.current);
+      }
+    }
+  }
+
+  function setPoint(_lon, _lat, isAutoFixAddr = true) {
+    const lon = _lon || pickInfo.lon;
+    const lat = _lat || pickInfo.lat;
+    (isAutoFixAddr || !pickInfo.addr) && getAddr(lon, lat);
+    const res = { ...pickInfo, lon, lat };
+    setPickInfo(res);
+  }
+
+  function getAddr(_lng, _lat) {
+    if (!AMap) {
+      return "";
+    }
+    if (addrLoading) {
+      return;
+    }
+    setAddrLoading(true);
+    getAddress(_lng, _lat)
+      .then((addr) => {
+        setAddrLoading(false);
+
+        setPickInfo((_p) => ({ ..._p, addr }));
+      })
+      .catch((err) => {
+        setAddrLoading(false);
+      });
+  }
+
+  function onShow() {
+    !mapRef.current && setLoading(true);
+    setVisible(true);
+  }
+
+  function onClose() {
+    setVisible(false);
+  }
+
+  function onOk() {
+    const res = {
+      [lonKey]: pickInfo.lon,
+      [latKey]: pickInfo.lat,
+      [addrKey]: pickInfo.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];
+        });
+      }
+    }
+
+    onClose();
+  }
+
+  return (
+    <div className="location-picker">
+      <div className="location-value-box">
+        <div className="location-value-head-box">
+          <div className="location-lon-lat">
+            <div>经度：{resInfo.lon} </div>
+            <div>纬度：{resInfo.lat}</div>
+          </div>
+          <Button className="location-btn" color="primary" fill="none" onClick={onShow}>
+            <LocationFill />
+            选点
+          </Button>
+        </div>
+        <div>地址：{resInfo.addr}</div>
+      </div>
+      <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>
+        <div className="picker-info">
+          <div className="picker-info-lon">经度：{pickInfo.lon} </div>
+          <div className="picker-info-lat">纬度：{pickInfo.lat}</div>
+          <div className="picker-info-addr">地址：{addrLoading ? <DotLoading /> : pickInfo.addr}</div>
+        </div>
+        {hasSearch ? <MapSearch setPoint={setPoint} /> : null}
+        <div className="location-picker-map">
+          <AMapCom
+            init={mapInit}
+            loading={loading}
+            center={pickInfo.center ? pickInfo.center : [defaultLngLat.lon, defaultLngLat.lat]}
+            style={{ height: "68vh" }}
+          />
+          <NoticeBar
+            className="location-picker-notice-bar"
+            content={changeMode === "click" ? "点击地图上的位置，选择目标地址" : "拖拽移动地图，中心标点为目标地址"}
+            color="default"
+            icon={<ExclamationCircleOutline />}
+          />
+          {!loading && changeMode !== "click" && <LocationFill className="location-picker-center-icon" />}
+        </div>
+        {loading && (
+          <div className="spin-loading">
+            <SpinLoading />
+          </div>
+        )}
+      </Popup>
+    </div>
+  );
+}
+
+//  longitude latitude location
+/*
+ isObject 
+  true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
+  false: 所有数据打平放到当前的 data 中，和其他表单项平级
+*/
+export const LocationPickerT = connect(
+  LocationPicker,
+  mapProps((props, field, ...args) => {
+    const { lonKey = "longitude", latKey = "latitude", addrKey = "address", level } = props;
+    const _onChange = (val, ...args) => {
+      if (level === 1) {
+        // if (field.parent?.componentType === 'ArrayTable') {
+        const dataKey = field.parent?.props?.name;
+        const data = field?.form?.getValuesIn(dataKey);
+        const idx = field.indexes?.[0];
+        data[idx][addrKey] = val.addr;
+        field?.form?.setValues(dataKey, data);
+      } else if (level === 2) {
+        const parentKey = field.parent?.props?.name; //父级key值
+        // @ts-ignore
+        const dataKey = field.parent?.parent?.props?.basePath?.entire; //爷级key值
+        const data = field?.form?.getValuesIn(dataKey);
+        const grandpaidx = field.indexes?.[0]; //爷级下标
+        const parentidx = field.indexes?.[1]; //父级下标
+        // @ts-ignore
+        data[grandpaidx][parentKey][parentidx][addrKey] = val.addr;
+        field?.form?.setValues(dataKey[parentKey], data);
+      } else {
+        field?.form?.setValues({
+          // [lonKey]: val?.lng,
+          // [latKey]: val?.lat,
+          [addrKey]: val?.addr,
+        });
+      }
+      props.onChange && props.onChange(val, ...args);
+      // props.onChange && props.onChange(`${val?.lng}, ${val?.lat}`, ...args);
+    };
+    let lng;
+    let lat;
+    if (props.value) {
+      lng = props.value?.[lonKey];
+      lat = props.value?.[latKey];
+    }
+    // const lng = field?.form?.getValuesIn(lonKey);
+    // const lat = field?.form?.getValuesIn(latKey);
+    return {
+      ...props,
+      field,
+      lng,
+      lat,
+      addr: field?.form?.getValuesIn(addrKey),
+      _onChange,
+    };
+  }),
+);
+
+export default LocationPicker;

package/src/components/LocationPicker/servers/index.ts

@@ -0,0 +1,109 @@
+import { Toast } from "antd-mobile";
+
+export function getAddress(lon, lat) {
+  return new Promise((resolve, reject) => {
+    if (!window.AMap) {
+      reject(Error("Error getAddress window.AMap is not defined."));
+      return;
+    }
+    const geocoder = new window.AMap.Geocoder({});
+    geocoder.getAddress([lon, lat], function (status, result) {
+      if (status === "complete" && result.info === "OK") {
+        const formattedAddress = result?.regeocode?.formattedAddress;
+        resolve(formattedAddress);
+        return formattedAddress;
+      } else if (result === "USER_DAILY_QUERY_OVER_LIMIT") {
+        // 超出限制，使用 webServer 进行请求
+        if (!window._AMapLoaderTemp.serverKey) {
+          Toast.show({ icon: "fail", content: "超出使用限制，请联系管理员" });
+          return;
+        }
+        fetch(
+          `https://restapi.amap.com/v3/geocode/regeo?location=${lon?.toFixed(6)},${lat?.toFixed(6)}&key=${
+            window._AMapLoaderTemp.serverKey
+          }`,
+          {
+            mode: "cors",
+          },
+        )
+          .then((res) => res.json())
+          .then((res) => {
+            if (res.status === "1") {
+              resolve(res.regeocode?.formatted_address);
+            } else {
+              Toast.show({ icon: "fail", content: res.info });
+            }
+          })
+          .catch(reject);
+      } else {
+        reject(result);
+      }
+    });
+  });
+}
+
+export function getSearchTips(search, cityCode = "0571") {
+  return new Promise((resolve, reject) => {
+    if (!window.AMap) {
+      reject(Error("Error getAddress window.AMap is not defined."));
+      return;
+    }
+    const autoComplete = new window.AMap.Autocomplete({
+      // city 限定城市，默认全国
+      city: cityCode,
+    });
+    autoComplete.search(search, function (status, result) {
+      if (status === "complete" && result.info === "OK") {
+        resolve(
+          result.tips?.map((it) => {
+            const { lng, lat } = it?.location || {};
+            return {
+              ...it,
+              label: it.name,
+              value: it.id,
+              lon: +lng,
+              lng: +lng,
+              lat: +lat,
+            };
+          }),
+        );
+      } else if (result === "USER_DAILY_QUERY_OVER_LIMIT") {
+        // 超出限制，使用 webServer 进行请求
+        if (!window._AMapLoaderTemp.serverKey) {
+          Toast.show({ icon: "fail", content: "超出使用限制，请联系管理员" });
+          return;
+        }
+        fetch(
+          `https://restapi.amap.com/v3/assistant/inputtips?key=${window._AMapLoaderTemp.serverKey}&keywords=${search}&city=${cityCode}`,
+          {
+            mode: "cors",
+          },
+        )
+          .then((res) => res.json())
+          .then((res) => {
+            if (res.status === "1") {
+              resolve(
+                res.tips?.map((it) => {
+                  const [lng, lat] = it.location?.split(",");
+
+                  return {
+                    ...it,
+                    label: it.name,
+                    value: it.id,
+                    lng: +lng,
+                    lon: +lng,
+                    lat: +lat,
+                  };
+                }),
+              );
+            } else {
+              Toast.show({ icon: "fail", content: res.info });
+            }
+          })
+          .catch(reject);
+      } else {
+        reject(result);
+      }
+    });
+  });
+}

package/src/components/Placeholder/index.tsx

@@ -1,7 +1,7 @@
 import "./index.less";
 
-export const Placeholder = (props) => {
-  const { value, placeholder, className, isPicker } = props;
+export const Placeholder = ({ className = "", isPicker = false, ...props }) => {
+  const { value, placeholder } = props;
   if (value !== null && value !== undefined && value !== "") {
     return value;
   }

package/src/components/Select/index.tsx

@@ -17,6 +17,7 @@ type fieldT = {
 type SelectPropsT = {
   value: number | string;
   onChange: (val: any) => void;
+  onConfirm: (val: any) => void;
 } & formItemProps;
 
 export const Select = observer((props: SelectPropsT) => {
@@ -50,8 +51,10 @@ export const Select = observer((props: SelectPropsT) => {
   }
 
   function onConfirm(value) {
-    // 去除数组？
-    onChange && onChange(value.length === 1 ? value[0] : value);
+    // 去除数组
+    const resVal = value.length === 1 ? value[0] : value;
+    props.onConfirm && props.onConfirm(resVal);
+    onChange && onChange(resVal);
   }
 
   return (

package/src/components/TimePicker/index.tsx

@@ -8,6 +8,7 @@ import { formItemProps } from "../form-item";
 
 type TimePickerPropsT = {
   use12Hours: boolean;
+  onConfirm?: (date: string | number) => void;
 } & formItemProps;
 
 export const TimePicker = observer((props: TimePickerPropsT) => {
@@ -27,6 +28,7 @@ export const TimePicker = observer((props: TimePickerPropsT) => {
       resVal = [...val]?.slice(0, 3)?.join(":");
       resVal += ` ${val[3] || ""}`;
     }
+    props.onConfirm && props.onConfirm(resVal);
     onChange && onChange(resVal);
   }
 

package/src/components/Uploader/index.jsx

@@ -35,4 +35,6 @@ export const Uploader = (props) => {
   return <UploaderCom {..._props} onChange={onUploadChange} />;
 };
 
+export const Upload = Uploader;
+
 export default Uploader;

package/src/components/index.ts

@@ -11,4 +11,5 @@ export * from "./TimePicker";
 export * from "./Uploader";
 export * from "./UserSelect";
 export * from "./Radio";
-export * from "./Checkbox";
+export * from "./Checkbox";
+export * from "./LocationPicker";