@hzab/form-render-mobile 0.3.2 → 0.4.1

package/src/components/LocationPicker/index.tsx

@@ -1,17 +1,18 @@
 import { useEffect, useRef, useState } from "react";
 import { Popup, Button } from "antd-mobile";
-import { useField, useFieldSchema } from "@formily/react";
+import { observer } 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, 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 {
     /**
      * 地图显示类型：
@@ -33,47 +34,32 @@ export function LocationPicker(props) {
      * 展示获取经纬度的按钮
      */
     showGetPositionBtn = true,
-    /**
-     * 
-     isObjectRes 
-      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
-      false: 所有数据打平放到当前的 data 中，和其他表单项平级
-     */
-    isObjectRes = true,
     /**
      * 打开地图时是否根据经纬度自动修正已填的地址
      */
     isAutoFixAddr = false,
-    /**
-     * 改变经纬度等数据的触发模式
-     * 移动地图 move
-     * 点击地图 click
-     */
-    changeMode = "move",
     lonKey = "longitude",
     latKey = "latitude",
     addrKey = "address",
     value,
     // 搜索框是否自动搜索
     isAutoSearch = true,
+    icons = {},
   } = props;
-  const field: any = useField();
-  const fieldSchema = useFieldSchema();
 
-  const [loading, setLoading] = useState(true);
   const [defaultLocation, setDefaultLocation] = useState({
     lon: 120.168893,
     lat: 30.225404,
     addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
   });
+  const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
 
   const mapUtilsRef = useRef<MapUtils>();
   const pickInfoRef = useRef(defaultLocation);
 
   useEffect(() => {
-    const propsVal = getPropsValue(value, field, {
-      isObjectRes,
+    const propsVal = getPropsValue(value, {
       lonKey,
       latKey,
       addrKey,
@@ -83,12 +69,17 @@ export function LocationPicker(props) {
       // 如果没有传入的经纬度，获取当前实际的经纬度数据
       // 获取当前经纬度
       getCurrentPosition()
-        .then((res) => {
+        .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);
@@ -120,18 +111,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() {
@@ -149,8 +128,7 @@ export function LocationPicker(props) {
   }
 
   const _props = {
-    disabled: props.disabled,
-    readOnly: props.readOnly,
+    ...props,
     /**
      * 地图显示类型：
      * 弹窗 dialog
@@ -165,23 +143,10 @@ export function LocationPicker(props) {
     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",
@@ -189,27 +154,21 @@ export function LocationPicker(props) {
     // 搜索框是否自动搜索
     isAutoSearch: isAutoSearch ?? true,
     defaultLocation,
-    // 地图选点按钮的 icon 元素
-    pickerIcon: props.pickerIcon,
     showGetPositionBtn,
+    visible,
+    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} />
           <Popup
             maskClassName="location-picker-popup-mask"
             className="location-picker-popup"
@@ -229,19 +188,12 @@ export function LocationPicker(props) {
                 确认
               </Button>
             </div>
-            <ModalContent
-              {..._props}
-              visible={visible}
-              setPickInfo={setPickInfo}
-              layout={layout}
-              setLoading={setLoading}
-              loading={loading}
-            />
+            <ModalContent {..._props} setPickInfo={setPickInfo} />
           </Popup>
         </>
       )}
     </div>
   );
-}
+});
 
 export default LocationPicker;

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

@@ -1,13 +1,33 @@
+export interface addressErrorI extends Error {
+  result?: string;
+}
+
 /**
  * 根据经纬度获取定义的地址
  * @param lon
  * @param lat
  * @returns
  */
-export function getAddress(lon, lat) {
+export function getAddress(lon, lat): Promise<string> {
   return new Promise((resolve, reject) => {
-    if (!window.AMap) {
-      reject(Error("Error getAddress window.AMap is not defined."));
+    getAddressByAMap(lon, lat)
+      .then(resolve)
+      .catch((err) => {
+        if (err.result === "USER_DAILY_QUERY_OVER_LIMIT" || err.result === "A_MAP_GEOCODER_IS_NOT_DEFINED") {
+          getAddressByFetch(lon, lat).then(resolve).catch(reject);
+        } else {
+          reject(err);
+        }
+      });
+  });
+}
+
+export const getAddressByAMap = function (lon, lat): Promise<string> {
+  return new Promise((resolve, reject) => {
+    if (!window.AMap?.Geocoder) {
+      const error: addressErrorI = Error("Error getAddress window.AMap.Geocoder is not defined.");
+      error.result = "A_MAP_GEOCODER_IS_NOT_DEFINED";
+      reject(error);
       return;
     }
     const geocoder = new window.AMap.Geocoder({});
@@ -17,35 +37,43 @@ export function getAddress(lon, lat) {
         resolve(formattedAddress);
         return formattedAddress;
       } else if (result === "USER_DAILY_QUERY_OVER_LIMIT") {
-        // 超出限制，使用 webServer 进行请求
-        if (!window._AMapLoaderTemp.serverKey) {
-          reject(new Error("超出使用限制，请联系管理员"));
-          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 {
-              console.warn("Warn getAddress fetch: ", res);
-              reject(new Error(res.info));
-            }
-          })
-          .catch(reject);
+        const error: addressErrorI = new Error("超出使用限制，请联系管理员");
+        error.result = result;
+        reject(error);
       } else {
         reject(result);
       }
     });
   });
-}
+};
+
+export const getAddressByFetch = function (lon, lat): Promise<string> {
+  return new Promise((resolve, reject) => {
+    // 使用 webServer 进行请求，需要配置对应的 serverKey
+    if (!window._AMapLoaderTemp?.serverKey) {
+      reject(new Error("请配置 serverKey"));
+      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 {
+          console.warn("Warn getAddressByFetch: ", res);
+          reject(new Error(res.info));
+        }
+      })
+      .catch(reject);
+  });
+};
 
 /**
  * 获取搜索提示
@@ -56,7 +84,31 @@ export function getAddress(lon, lat) {
 export function getSearchTips(search, cityCode = "0571") {
   return new Promise((resolve, reject) => {
     if (!window.AMap) {
-      reject(Error("Error getAddress window.AMap is not defined."));
+      reject(Error("Error getSearchTips window.AMap is not defined."));
+      return;
+    }
+    if (window.AMap.AutoComplete) {
+      getSearchTipsByAMap(search, cityCode)
+        .then(resolve)
+        .catch((err) => {
+          if (err.result === "USER_DAILY_QUERY_OVER_LIMIT" || err.result === "A_MAP_AUTO_COMPLETE_IS_NOT_DEFINED") {
+            getSearchTipsByFetch(search, cityCode).then(resolve).catch(reject);
+          } else {
+            reject(err);
+          }
+        });
+    } else {
+      getSearchTipsByFetch(search, cityCode).then(resolve).catch(reject);
+    }
+  });
+}
+
+export function getSearchTipsByAMap(search, cityCode = "0571") {
+  return new Promise((resolve, reject) => {
+    if (!window.AMap?.Autocomplete) {
+      const error: addressErrorI = Error("Error getSearchTips window.AMap.Autocomplete is not defined.");
+      error.result = "A_MAP_AUTO_COMPLETE_IS_NOT_DEFINED";
+      reject(error);
       return;
     }
     const autoComplete = new window.AMap.Autocomplete({
@@ -78,44 +130,48 @@ export function getSearchTips(search, cityCode = "0571") {
             };
           }),
         );
-      } else if (result === "USER_DAILY_QUERY_OVER_LIMIT") {
-        // 超出限制，使用 webServer 进行请求
-        if (!window._AMapLoaderTemp.serverKey) {
-          reject(new Error("超出使用限制，请联系管理员"));
-          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 {
-              console.warn("Warn getSearchTips fetch: ", res);
-              reject(new Error(res.info));
-            }
-          })
-          .catch(reject);
       } else {
         reject(result);
       }
     });
   });
 }
+
+export function getSearchTipsByFetch(search, cityCode = "0571") {
+  return new Promise((resolve, reject) => {
+    // 使用 webServer 进行请求，需要配置对应的 serverKey
+    if (!window._AMapLoaderTemp?.serverKey) {
+      reject(new Error("请配置 serverKey"));
+      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 {
+          console.warn("Warn getSearchTips fetch: ", res);
+          reject(new Error(res.info));
+        }
+      })
+      .catch(reject);
+  });
+}

package/src/components/TreeSelect/SelectList/index.tsx

@@ -1,29 +1,59 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Checkbox } from "antd-mobile";
 import { DownOutline, UpOutline } from "antd-mobile-icons";
 import { List as VirtualizedList, AutoSizer } from "react-virtualized";
 import _ from "lodash";
 
-import { getTreeAllExpandKeys, flatActiveTreeData } from "../common/data-handler";
+import { getTreeAllExpandKeys, flatActiveTreeData, handleChecked, initChecked } from "../common/data-handler";
 
 import "./index.less";
 
 export const SelectList = (props) => {
-  const { multiple, selected, treeData, fieldNames, setSelected, treeDefaultExpandAll } = props;
+  const {
+    multiple,
+    selected,
+    // 处理过的数据（搜索等）
+    treeData,
+    // 源数据
+    dataSource,
+    fieldNames,
+    setSelected = () => {},
+    treeDefaultExpandAll,
+    treeCheckStrictly,
+  } = props;
   const { label: labelKey = "label", value: valueKey = "value", children: childrenKey = "children" } = fieldNames || {};
 
   const [activeKeys, setActiveKeys] = useState(
     treeDefaultExpandAll ? getTreeAllExpandKeys(treeData, { fieldNames }) : [],
   );
 
+  const checkedOpt = {
+    fieldNames,
+    treeCheckStrictly,
+  };
+
   const boxRef = useRef();
   const [boxH, setBoxH] = useState(0);
+  const [treeDataChecked, setTreeDataChecked] = useState(
+    initChecked(treeData, multiple ? selected : [selected], checkedOpt),
+  );
   const [list, setList] = useState(flatActiveTreeData(treeData, activeKeys, { fieldNames }));
+  const selectedRef = useRef(selected);
+
+  useEffect(() => {
+    selectedRef.current = selected;
+  }, [selected]);
 
   useEffect(() => {
-    const _activeKeys = treeDefaultExpandAll ? getTreeAllExpandKeys(treeData, { fieldNames }) : [];
+    const _treeDataChecked = initChecked(
+      treeData,
+      Array.isArray(selectedRef.current) ? selectedRef.current : [selectedRef.current],
+      checkedOpt,
+    );
+    const _activeKeys = treeDefaultExpandAll ? getTreeAllExpandKeys(_treeDataChecked, { fieldNames }) : [];
     setActiveKeys(_activeKeys);
-    setList(flatActiveTreeData(treeData, _activeKeys, { fieldNames }));
+    setList(flatActiveTreeData(_treeDataChecked, _activeKeys, { fieldNames }));
+    setTreeDataChecked(_treeDataChecked);
   }, [treeData]);
 
   useEffect(() => {
@@ -50,42 +80,44 @@ export const SelectList = (props) => {
       } else {
         keys.push(val);
       }
-      setList(flatActiveTreeData(treeData, keys, { fieldNames }));
+      setList(flatActiveTreeData(treeDataChecked, keys, { fieldNames }));
       return [...keys];
     });
   }
 
   function onCheckboxChange(key, val) {
+    // 处理选中状态
     if (multiple) {
       // 多选
-      setSelected &&
-        setSelected((v = []) => {
-          if (val) {
-            // 选中则往选中数组中添加
-            return _.uniq([...v, key]);
-          }
-          // 非选中，从选中数组中剔除
-          const idx = v.findIndex((it) => it === key);
-          if (idx >= 0) {
-            v.splice(idx, 1);
-            return [...v];
-          }
-          return v;
-        });
+      const checkedRes = handleChecked(treeDataChecked, key, val, checkedOpt);
+      const treeDataRes = _.cloneDeep(checkedRes.treeData);
+      setTreeDataChecked(treeDataRes);
+      setList(flatActiveTreeData(checkedRes.treeData, activeKeys, { fieldNames }));
+      setSelected(checkedRes.selected);
     } else {
       setSelected(key);
     }
   }
 
-  function rowRender({ index, key: listKey, style }: { index: number; key: string; style: ElementCSSInlineStyle }) {
+  // TODO: useCallback 优化
+  const rowRender = function ({
+    index,
+    key: listKey,
+    style,
+  }: {
+    index: number;
+    key: string;
+    style: ElementCSSInlineStyle;
+  }) {
     const it = list[index];
     if (!it) {
       return null;
     }
 
     const itKey = it[valueKey];
-    const checked = multiple ? selected?.includes(itKey) : selected === itKey;
+
     const active = activeKeys.includes(itKey);
+
     return (
       <div
         className="virtualized-list-item"
@@ -102,17 +134,18 @@ export const SelectList = (props) => {
         <Checkbox
           key={itKey}
           value={itKey}
-          checked={checked}
+          indeterminate={it._indeterminate}
+          checked={it._checked}
           disabled={it.disabled}
           onClick={onStopPropagation}
           onChange={(v) => onCheckboxChange(itKey, v)}
         >
-          {it[labelKey]}
+          {it[labelKey]}-{itKey}
         </Checkbox>
         {it.hasChildren && (active ? <UpOutline className="arrow-icon" /> : <DownOutline className="arrow-icon" />)}
       </div>
     );
-  }
+  };
 
   return (
     <div className="tree-select-list" ref={boxRef}>