fix: #1386

XiaoMi · Nov 30, 2020 · c8ba1d3 · c8ba1d3
1 parent fe98d2b
commit c8ba1d3
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 61 deletions.
diff --git a/components/select-tree/SelectTreeHook.js b/components/select-tree/SelectTreeHook.js
@@ -251,7 +251,7 @@ const SelectTree = ({
    * Remote load Data
    * @param {*} id click node's id
    */
-  const loadNodes = useCallback((id) => {
+  const loadNodes = (id) => {
     const _dataSource = typeof dataSource === 'function' ? dataSource(id || '') : dataSource
     return HiRequest({
       ..._dataSource
@@ -267,7 +267,7 @@ const SelectTree = ({
         })
       return nArr
     })
-  }, [])
+  }
   /**
    * 多选模式下复选框事件
    * @param {*} checked 是否被选中

diff --git a/components/select-tree/components/tree/NavTree.js b/components/select-tree/components/tree/NavTree.js
@@ -108,48 +108,44 @@ const NavTree = ({
       {Object.keys(fullBreadData).length > 0 && (
         <Bread datas={fullBreadData} localeDatas={localeDatas} onClick={onBreadClick} onReturnClick={onReturnClick} />
       )}
-      <Loading size="small" visible={loadingState === 'loading'}>
+      {loadingState === 'empty' ? (
+        <span className="hi-select-tree--empty">{localeDatas.selectTree.emptyContent}</span>
+      ) : (
         <ul className="hi-breadtree__list">
-          {loadingState === 'empty' ? (
-            <li>
-              <span className="hi-select-tree--empty">{localeDatas.selectTree.emptyContent}</span>
-            </li>
-          ) : (
-            renderData.map((node, index) => {
-              const children = getChildrenNodes(node, data)
-              const textCls = classNames(
-                'hi-breadtree__text',
-                selectedItems.find((n) => n.id === node.id) && 'hi-breadtree__text--selected'
-              )
-              return (
-                <li key={index} className="hi-breadtree__item">
-                  {checkable && node.isLeaf ? (
-                    <Checkbox
-                      indeterminate={checkedNodes.semiChecked.includes(node.id)}
-                      checked={checkedNodes.checked.includes(node.id)}
-                      onChange={(e) => onCheck(e.target.checked, node)}
-                    >
-                      <span className={textCls}>{node.title}</span>
-                    </Checkbox>
-                  ) : (
-                    <span
-                      className={textCls}
-                      onClick={() => {
-                        onNodeClick(node, children)
-                      }}
-                    >
-                      {node.title}
-                    </span>
-                  )}
-                  {(children.length > 0 || !node.isLeaf) && (
-                    <Icon name={'right'} onClick={() => onNodeClick(node, children)} />
-                  )}
-                </li>
-              )
-            })
-          )}
+          {renderData.map((node, index) => {
+            const children = getChildrenNodes(node, data)
+            const textCls = classNames(
+              'hi-breadtree__text',
+              selectedItems.find((n) => n.id === node.id) && 'hi-breadtree__text--selected'
+            )
+            return (
+              <li key={index} className="hi-breadtree__item">
+                {checkable && node.isLeaf ? (
+                  <Checkbox
+                    indeterminate={checkedNodes.semiChecked.includes(node.id)}
+                    checked={checkedNodes.checked.includes(node.id)}
+                    onChange={(e) => onCheck(e.target.checked, node)}
+                  >
+                    <span className={textCls}>{node.title}</span>
+                  </Checkbox>
+                ) : (
+                  <span
+                    className={textCls}
+                    onClick={() => {
+                      onNodeClick(node, children)
+                    }}
+                  >
+                    {node.title}
+                  </span>
+                )}
+                {(children.length > 0 || !node.isLeaf) && (
+                  <Icon name={'right'} onClick={() => onNodeClick(node, children)} />
+                )}
+              </li>
+            )
+          })}
         </ul>
-      </Loading>
+      )}
     </div>
   )
 }

diff --git a/components/select-tree/components/tree/style/index.scss b/components/select-tree/components/tree/style/index.scss
@@ -79,6 +79,10 @@ $tree: 'hi-select-tree' !default;
     width: 100%;
     display: flex;
     flex-direction: column;
+
+    .hi-select-tree--empty {
+      padding: 12px 0 0 12px;
+    }
   }
 
   &__list {

diff --git a/docs/demo/select-tree/section-bread.jsx b/docs/demo/select-tree/section-bread.jsx
@@ -339,8 +339,8 @@ const code = [
                   return res.map(r => {
                     return {
                       ...r,
-                      id: r.code,
-                      title: r.name
+                      id: r.id,
+                      title: r.title
                     }
                   })
                 }
@@ -376,16 +376,7 @@ const code = [
                 method: 'GET',
                 key: 'id',
                 params: {pId: key},
-                url: 'http://localhost:8001/tree',
-                transformResponse: (res) => {
-                  return res.map(r => {
-                    return {
-                      ...r,
-                      id: r.code,
-                      title: r.name
-                    }
-                  })
-                }
+                url: 'http://my-json-server.typicode.com/hiui-group/db/fulldata',
               }
             }}
           />

diff --git a/docs/demo/select-tree/section-nav.jsx b/docs/demo/select-tree/section-nav.jsx
@@ -144,12 +144,6 @@ class Demo extends React.Component {
   }
 }`
 const DemoType = () => (
-  <DocViewer
-    code={code}
-    scope={{ SelectTree }}
-    prefix={prefix}
-    rightOptions={rightOptions}
-    desc={desc}
-  />
+  <DocViewer code={code} scope={{ SelectTree }} prefix={prefix} rightOptions={rightOptions} desc={desc} />
 )
 export default DemoType