@hzab/form-render-mobile 0.3.2 → 0.4.1

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 {

package/lib/static/imgs/marker-icon_ab8bbcc8cb.svg

@@ -1,4 +0,0 @@
-<svg t="1708497164654" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="8489" width="200" height="200">
-  <path d="M512 1024c-205.76-241.472-326.272-411.712-361.664-510.72a384 384 0 1 1 723.072 0.832C837.76 612.928 717.312 782.848 512 1024.064z m0-512a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" fill="#1677ff" p-id="8490"></path>
-</svg>

package/lib/static/imgs/picker-icon_24d725ef02.svg

@@ -1,5 +0,0 @@
-<svg t="1708305242338" class="icon" viewBox="0 0 1088 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="1494" width="200" height="200">
-  <path d="M812.224 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576 193.472-184.448 288-338.432 288-456.576z m-288 544c-234.688-213.312-352-394.688-352-544a352 352 0 1 1 704 0c0 149.312-117.312 330.688-352 544z" fill="#1677ff" p-id="1495"></path>
-  <path d="M524.224 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z m345.6 192l102.4 256h-288v-64h-320v64h-288l102.4-256h691.2z m-68.928 0H247.552l-76.8 192h706.944l-76.8-192z" fill="#1677ff" p-id="1496"></path>
-</svg>

package/lib/static/imgs/position-icon_5bcb8a742e.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1708478996666" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="6897"
-  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-  <path d="M895.044488 550.176484l-42.200124 0C834.62235 708.540282 709.048353 834.001715 550.718325 852.244194l0 42.258453c0 21.946848-17.790178 39.730886-39.729863 39.730886s-39.729863-17.784038-39.729863-39.730886l0-42.258453C312.926524 834.001715 187.354574 708.540282 169.131537 550.176484l-42.199101 0c-21.940708 0-39.730886-17.786085-39.730886-39.729863 0-21.940708 17.789155-39.726793 39.730886-39.726793l42.257429 0c18.24248-158.335145 143.711076-283.907095 302.068733-302.126039l0-42.200124c0-21.940708 17.789155-39.730886 39.729863-39.730886s39.729863 17.789155 39.729863 39.730886l0 42.258453c158.331052 18.241456 283.904025 143.706983 302.126039 302.06771l42.200124 0c21.940708 0 39.729863 17.786085 39.729863 39.726793C934.774351 532.390399 916.986219 550.176484 895.044488 550.176484zM696.395172 470.719828l76.16161 0c-17.251919-114.39847-107.492176-204.651007-221.838458-221.913159l0 76.236312c0 21.939685-17.790178 39.726793-39.729863 39.726793s-39.729863-17.787108-39.729863-39.726793l0-76.165704c-114.39233 17.256012-204.644867 107.495246-221.910089 221.842551l76.233242 0c21.946848 0 39.729863 17.786085 39.729863 39.726793 0 21.943778-17.781992 39.729863-39.729863 39.729863l-76.162634 0c17.251919 114.39847 107.498316 204.649983 221.839481 221.910089l0-76.234265c0-21.943778 17.789155-39.72577 39.729863-39.72577s39.729863 17.781992 39.729863 39.72577l0 76.234265c114.346281-17.260106 204.586538-107.511619 221.838458-221.910089l-76.16161 0c-21.941732 0-39.729863-17.786085-39.729863-39.729863C656.665309 488.505913 674.453441 470.719828 696.395172 470.719828zM510.988462 550.176484c-21.939685 0-39.729863-17.786085-39.729863-39.729863 0-21.940708 17.789155-39.726793 39.729863-39.726793s39.729863 17.786085 39.729863 39.726793C550.718325 532.390399 532.928147 550.176484 510.988462 550.176484z" fill="#000000" p-id="6898"></path>
-</svg>

package/lib/static/imgs/reset-icon_9edad62306.svg

@@ -1,5 +0,0 @@
-<svg t="1708485324277" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="7503" width="200" height="200">
-  <path d="M512 682.666667c71.296 0 128-56.789333 128-128s-56.704-128-128-128-128 56.789333-128 128 56.704 128 128 128z" p-id="7504"></path>
-  <path d="M888.192 477.269333a381.44 381.44 0 0 0-57.813333-137.344 386.261333 386.261333 0 0 0-103.68-103.68 381.866667 381.866667 0 0 0-137.344-57.813333 385.194667 385.194667 0 0 0-78.421334-7.68V85.333333L341.333333 213.333333l169.6 128V256.085333c20.650667-0.085333 41.301333 1.877333 61.226667 5.973334a297.002667 297.002667 0 0 1 106.752 44.928 298.88 298.88 0 0 1 80.725333 80.725333A297.258667 297.258667 0 0 1 810.666667 554.666667a300.032 300.032 0 0 1-23.466667 116.266666 303.36 303.36 0 0 1-27.477333 50.688 307.2 307.2 0 0 1-36.608 44.330667 299.861333 299.861333 0 0 1-150.869334 81.365333 304.213333 304.213333 0 0 1-120.405333 0 297.002667 297.002667 0 0 1-106.794667-44.970666 298.752 298.752 0 0 1-80.64-80.64A298.496 298.496 0 0 1 213.333333 554.666667H128a384.853333 384.853333 0 0 0 65.664 214.784 388.096 388.096 0 0 0 103.594667 103.594666A381.866667 381.866667 0 0 0 512 938.666667a387.84 387.84 0 0 0 77.397333-7.808 384.597333 384.597333 0 0 0 137.301334-57.813334 379.136 379.136 0 0 0 56.789333-46.890666 393.728 393.728 0 0 0 46.933333-56.832A381.952 381.952 0 0 0 896 554.666667a387.84 387.84 0 0 0-7.808-77.397334z" p-id="7505"></path>
-</svg>

package/src/components/LocationPicker/assets/marker-icon.svg

@@ -1,4 +0,0 @@
-<svg t="1708497164654" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="8489" width="200" height="200">
-  <path d="M512 1024c-205.76-241.472-326.272-411.712-361.664-510.72a384 384 0 1 1 723.072 0.832C837.76 612.928 717.312 782.848 512 1024.064z m0-512a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" fill="#1677ff" p-id="8490"></path>
-</svg>

package/src/components/LocationPicker/assets/picker-icon.svg

@@ -1,5 +0,0 @@
-<svg t="1708305242338" class="icon" viewBox="0 0 1088 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="1494" width="200" height="200">
-  <path d="M812.224 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576 193.472-184.448 288-338.432 288-456.576z m-288 544c-234.688-213.312-352-394.688-352-544a352 352 0 1 1 704 0c0 149.312-117.312 330.688-352 544z" fill="#1677ff" p-id="1495"></path>
-  <path d="M524.224 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z m345.6 192l102.4 256h-288v-64h-320v64h-288l102.4-256h691.2z m-68.928 0H247.552l-76.8 192h706.944l-76.8-192z" fill="#1677ff" p-id="1496"></path>
-</svg>

package/src/components/LocationPicker/assets/position-icon.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1708478996666" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="6897"
-  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-  <path d="M895.044488 550.176484l-42.200124 0C834.62235 708.540282 709.048353 834.001715 550.718325 852.244194l0 42.258453c0 21.946848-17.790178 39.730886-39.729863 39.730886s-39.729863-17.784038-39.729863-39.730886l0-42.258453C312.926524 834.001715 187.354574 708.540282 169.131537 550.176484l-42.199101 0c-21.940708 0-39.730886-17.786085-39.730886-39.729863 0-21.940708 17.789155-39.726793 39.730886-39.726793l42.257429 0c18.24248-158.335145 143.711076-283.907095 302.068733-302.126039l0-42.200124c0-21.940708 17.789155-39.730886 39.729863-39.730886s39.729863 17.789155 39.729863 39.730886l0 42.258453c158.331052 18.241456 283.904025 143.706983 302.126039 302.06771l42.200124 0c21.940708 0 39.729863 17.786085 39.729863 39.726793C934.774351 532.390399 916.986219 550.176484 895.044488 550.176484zM696.395172 470.719828l76.16161 0c-17.251919-114.39847-107.492176-204.651007-221.838458-221.913159l0 76.236312c0 21.939685-17.790178 39.726793-39.729863 39.726793s-39.729863-17.787108-39.729863-39.726793l0-76.165704c-114.39233 17.256012-204.644867 107.495246-221.910089 221.842551l76.233242 0c21.946848 0 39.729863 17.786085 39.729863 39.726793 0 21.943778-17.781992 39.729863-39.729863 39.729863l-76.162634 0c17.251919 114.39847 107.498316 204.649983 221.839481 221.910089l0-76.234265c0-21.943778 17.789155-39.72577 39.729863-39.72577s39.729863 17.781992 39.729863 39.72577l0 76.234265c114.346281-17.260106 204.586538-107.511619 221.838458-221.910089l-76.16161 0c-21.941732 0-39.729863-17.786085-39.729863-39.729863C656.665309 488.505913 674.453441 470.719828 696.395172 470.719828zM510.988462 550.176484c-21.939685 0-39.729863-17.786085-39.729863-39.729863 0-21.940708 17.789155-39.726793 39.729863-39.726793s39.729863 17.786085 39.729863 39.726793C550.718325 532.390399 532.928147 550.176484 510.988462 550.176484z" fill="#000000" p-id="6898"></path>
-</svg>

package/src/components/LocationPicker/assets/reset-icon.svg

@@ -1,5 +0,0 @@
-<svg t="1708485324277" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="7503" width="200" height="200">
-  <path d="M512 682.666667c71.296 0 128-56.789333 128-128s-56.704-128-128-128-128 56.789333-128 128 56.704 128 128 128z" p-id="7504"></path>
-  <path d="M888.192 477.269333a381.44 381.44 0 0 0-57.813333-137.344 386.261333 386.261333 0 0 0-103.68-103.68 381.866667 381.866667 0 0 0-137.344-57.813333 385.194667 385.194667 0 0 0-78.421334-7.68V85.333333L341.333333 213.333333l169.6 128V256.085333c20.650667-0.085333 41.301333 1.877333 61.226667 5.973334a297.002667 297.002667 0 0 1 106.752 44.928 298.88 298.88 0 0 1 80.725333 80.725333A297.258667 297.258667 0 0 1 810.666667 554.666667a300.032 300.032 0 0 1-23.466667 116.266666 303.36 303.36 0 0 1-27.477333 50.688 307.2 307.2 0 0 1-36.608 44.330667 299.861333 299.861333 0 0 1-150.869334 81.365333 304.213333 304.213333 0 0 1-120.405333 0 297.002667 297.002667 0 0 1-106.794667-44.970666 298.752 298.752 0 0 1-80.64-80.64A298.496 298.496 0 0 1 213.333333 554.666667H128a384.853333 384.853333 0 0 0 65.664 214.784 388.096 388.096 0 0 0 103.594667 103.594666A381.866667 381.866667 0 0 0 512 938.666667a387.84 387.84 0 0 0 77.397333-7.808 384.597333 384.597333 0 0 0 137.301334-57.813334 379.136 379.136 0 0 0 56.789333-46.890666 393.728 393.728 0 0 0 46.933333-56.832A381.952 381.952 0 0 0 896 554.666667a387.84 387.84 0 0 0-7.808-77.397334z" p-id="7505"></path>
-</svg>