@hzab/form-render-mobile 0.3.1 → 0.4.0

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) => {
+    getAddressByAMap(lon, lat)
+      .then(resolve)
+      .catch((err) => {
+        if (err.result === "USER_DAILY_QUERY_OVER_LIMIT" || err.result === "A_MAP_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) {
-      reject(Error("Error getAddress window.AMap is not defined."));
+      const error: addressErrorI = Error("Error getAddress window.AMap is not defined.");
+      error.result = "A_MAP_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 进行请求
+    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);
+  });
+};
 
 /**
  * 获取搜索提示

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,16 +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}>

package/src/components/TreeSelect/common/data-handler.ts

@@ -1,3 +1,5 @@
+import _ from "lodash";
+
 /**
  * 获取列表枚举数据
  * @param list
@@ -14,14 +16,24 @@ export const getDataEnum = function (list, opt?: any) {
       level,
       fullPathLabels: [...(parent.fullPathLabels || []), it[label]],
       fullPathValues: [...(parent.fullPathValues || []), it[value]],
+      parentEnum: { ...parent.parentEnum },
     };
+    if (parent[value]) {
+      item.parentEnum[parent[value]] = 1;
+    }
     item.fullPathItems = [...(parent.fullPathItems || []), item];
     delete item[children];
 
     dataEnum[it[value]] = item;
 
-    if (it[children]) {
-      getDataEnum(it[children], { ...opt, dataEnum, parent: item });
+    const childrenList = it[children];
+    if (childrenList) {
+      const childrenEnum = {};
+      childrenList.forEach((it) => {
+        childrenEnum[it[value]] = 1;
+      });
+      item.childrenEnum = childrenEnum;
+      getDataEnum(childrenList, { ...opt, dataEnum, parent: item });
     }
   });
   return dataEnum;
@@ -89,21 +101,32 @@ export const flatActiveTreeData = function (treeData, activeKeys = [], opt?: any
   const { list = [], fieldNames, parent = {}, level = 1 } = opt || {};
   const { value = "value", children = "children", label = "label" } = fieldNames || {};
   treeData?.forEach((it) => {
+    const childrenList = it?.[children];
     const item = {
       ...it,
       parent,
       level,
       fullPathLabel: [...(parent.fullPathLabel || []), it[label]],
+      fullPathValues: [...(parent.fullPathValues || []), it[value]],
+      parentEnum: { ...parent.parentEnum },
+      childrenLen: childrenList?.length || 0,
     };
+    if (parent[value]) {
+      item.parentEnum[parent[value]] = 1;
+    }
     item.fullPathItems = [...(parent.fullPathItems || []), item];
 
     if (item.parentId === null || item.parentId === undefined || item.parentId === "") {
       item.parentId = parent[value];
     }
-    const childrenList = it?.[children];
     delete item[children];
     list.push(item);
     if (Array.isArray(childrenList) && childrenList.length > 0) {
+      const childrenEnum = {};
+      childrenList.forEach((it) => {
+        childrenEnum[it[value]] = 1;
+      });
+      item.childrenEnum = childrenEnum;
       item.hasChildren = true;
       activeKeys.includes(it[value]) &&
         flatActiveTreeData(childrenList, activeKeys, {
@@ -133,3 +156,135 @@ export const getTreeAllExpandKeys = function (treeData, opt?: any) {
   });
   return expandKeys;
 };
+
+export const removeAllSelected = function (treeData, selected = [], opt?: any) {
+  const { fieldNames } = opt || {};
+  const { value = "value", children = "children" } = fieldNames || {};
+  treeData?.forEach((it) => {
+    const key = it[value];
+    const idx = selected.findIndex((k) => k === key);
+    idx >= 0 && selected.splice(idx, 1);
+    const childList = it[children];
+    if (Array.isArray(childList) && childList.length > 0) {
+      removeAllSelected(childList, selected, opt);
+    }
+  });
+  return selected;
+};
+
+/**
+ * 处理选中状态
+ * @param treeData
+ * @param key
+ * @param val
+ * @param opt
+ * @returns
+ * _checked 选中状态
+ * _indeterminate 半选状态（只在父子联动中使用）
+ */
+export const handleChecked = function (treeData, targetKey, targetVal, opt) {
+  const {
+    fieldNames,
+    /**
+     * 是否是父子联动
+     */
+    treeCheckStrictly,
+    selected = [],
+  } = opt || {};
+  const { value = "value", children = "children" } = fieldNames || {};
+  const dataLen = treeData?.length;
+  let checkedCount = 0;
+  let indeterminate = false;
+  for (let i = 0; i < dataLen; i++) {
+    const it = treeData[i];
+    const key = it[value];
+    // 处理禁用、只读状态？
+    if (key === targetKey) {
+      it._checked = targetVal;
+      it._indeterminate = false;
+      if (treeCheckStrictly) {
+        // 父子联动，处理当前项子项的选中状态，所有子项跟随当前项
+        setAllChecked(it[children], targetVal, opt);
+        // 结束当前项的处理，当前项及父级的状态由上层遍历处理
+      }
+    } else {
+      const childList = it[children];
+      if (Array.isArray(childList) && childList.length > 0) {
+        const childRes = handleChecked(childList, targetKey, targetVal, { ...opt, selected });
+        if (treeCheckStrictly) {
+          // 父子联动，处理父级的选中、半选状态
+          it._checked = childRes._checked;
+          it._indeterminate = childRes._indeterminate;
+          // 子项有半选，则父级也是半选
+          if (it._indeterminate && !it._checked) {
+            indeterminate = true;
+          }
+          if (it._checked) {
+            it._indeterminate = false;
+            removeAllSelected(childList, selected, opt);
+          }
+        }
+      }
+    }
+
+    if (it._checked) {
+      // 当前项处理完处理选中状态，checkedCount + 1, key 添加到 selected 数组中
+      checkedCount += 1;
+      selected.push(key);
+    }
+  }
+
+  return {
+    treeData,
+    checkedCount,
+    _checked: dataLen > 0 && checkedCount === dataLen,
+    _indeterminate: indeterminate || (checkedCount > 0 && checkedCount < dataLen),
+    selected,
+  };
+};
+
+/**
+ * 初始化选中状态
+ * @param _treeData
+ * @param opt
+ * _checked 选中状态
+ * _indeterminate 半选状态（只在父子联动中使用）
+ */
+export const initChecked = function (_treeData, selected, opt) {
+  const treeData = _.cloneDeep(_treeData);
+  _.uniq(selected || [])?.forEach((it) => {
+    handleChecked(treeData, it, true, opt);
+  });
+  return treeData;
+};
+
+/**
+ * 设置所有项的选中状态
+ * @param treeData
+ * @param targetVal
+ * @param opt
+ */
+export const setAllChecked = function (treeData, targetVal, opt) {
+  const { fieldNames } = opt || {};
+  const { children = "children" } = fieldNames || {};
+  treeData?.forEach((it) => {
+    it._checked = targetVal;
+    it._indeterminate = undefined;
+    const childList = it[children];
+    if (Array.isArray(childList) && childList.length > 0) {
+      setAllChecked(childList, targetVal, opt);
+    }
+  });
+  return treeData;
+};
+/**
+ * 清除所有的选中状态
+ * @param treeData
+ * @param opt
+ * @returns
+ * _checked 选中状态
+ * _indeterminate 半选状态
+ */
+export const cleanChecked = function (treeData, opt) {
+  return setAllChecked(treeData, undefined, opt);
+};

package/src/components/TreeSelect/index.less

@@ -1,6 +1,7 @@
 .formily-tree-select {
   height: 100%;
   .tree-selected {
+    flex: 1;
     height: 100%;
   }
 }

package/src/components/TreeSelect/index.tsx

@@ -122,7 +122,14 @@ export const TreeSelect = observer((props: any) => {
           {showSearch && (
             <TreeSearch visible={visible} dataSource={dataSource} setTreeData={setTreeData} fieldNames={fieldNames} />
           )}
-          <SelectList {...props} visible={visible} treeData={treeData} selected={selected} setSelected={setSelected} />
+          <SelectList
+            {...props}
+            visible={visible}
+            dataSource={dataSource}
+            treeData={treeData}
+            selected={selected}
+            setSelected={setSelected}
+          />
         </div>
       </Popup>
     </PickerRightOutline>

package/src/index.less

@@ -3,10 +3,13 @@
   .adm-formily-item {
     font-size: 4vw;
     .adm-formily-item-label {
-      line-height: 1.2;
+      line-height: 1.5;
     }
     .adm-formily-item-error-help {
-      line-height: 1.2;
+      line-height: 1.5;
+    }
+    .adm-formily-item-control .adm-formily-item-control-content .adm-formily-item-control-content-component {
+      line-height: 1.5;
     }
   }
   .adm-list-body {