XiaoMi · solarjoker · Nov 30, 2020 · Nov 27, 2020 · Nov 27, 2020 · Nov 30, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 - 修复 `DatePicker` weekOffset 为 1 时 周与日对照显示异常 [#1352](https://github.com/XiaoMi/hiui/issues/1352)
 - 修复 `Input` type 等于 amount 时，数据初始化展示问题以及添加前后置节点聚焦问题 [#1362](https://github.com/XiaoMi/hiui/pull/1362)
 - 修复 `Select` 异步多选下拉数据显示问题 [#1364](https://github.com/XiaoMi/hiui/issues/1364)
+- 修复 `SelectTree` 异步加载子节点数据显示位置错误以及国际化适配等问题 [#1386](https://github.com/XiaoMi/hiui/issues/1386)
 - 修复 `Progress` placement 为 inside 时，字显示折行问题 [#1385](https://github.com/XiaoMi/hiui/issues/1385)
 - 优化 `Select` 弹层触发方式 [#1358](https://github.com/XiaoMi/hiui/issues/1358)
 - 优化 `Select` 下拉框展开收起，输入框内容存在显示差异[#1380](https://github.com/XiaoMi/hiui/issues/1380)

diff --git a/components/locales/en-US.js b/components/locales/en-US.js
@@ -57,7 +57,8 @@ export default {
   selectTree: {
     back: 'Back',
     search: 'search',
-    placeholder: 'Please select'
+    placeholder: 'Please select',
+    emptyContent: 'Not found'
   },
   search: {
     searchEmptyResult: 'No serach results',

diff --git a/components/locales/zh-CN.js b/components/locales/zh-CN.js
@@ -60,7 +60,8 @@ export default {
   selectTree: {
     back: '返回',
     search: '搜索',
-    placeholder: '请选择'
+    placeholder: '请选择',
+    emptyContent: '无匹配数据'
   },
   search: {
     searchEmptyResult: '未找到搜索结果',

diff --git a/components/locales/zh-Hant-HK.js b/components/locales/zh-Hant-HK.js
@@ -60,7 +60,8 @@ export default {
   selectTree: {
     back: '返回',
     search: '搜索',
-    placeholder: '請選擇'
+    placeholder: '請選擇',
+    emptyContent: '無匹配數據'
   },
   search: {
     searchEmptyResult: '未找到搜索結果',

diff --git a/components/locales/zh-Hant-TW.js b/components/locales/zh-Hant-TW.js
@@ -60,7 +60,8 @@ export default {
   selectTree: {
     back: '返回',
     search: '搜索',
-    placeholder: '請選擇'
+    placeholder: '請選擇',
+    emptyContent: '無匹配數據'
   },
   search: {
     searchEmptyResult: '未找到搜索結果',

diff --git a/components/select-tree/SelectTreeHook.js b/components/select-tree/SelectTreeHook.js
@@ -2,6 +2,7 @@ import React, { useState, useRef, useCallback, useEffect } from 'react'
 import Tree from './components/tree'
 import _ from 'lodash'
 import Popper from '../popper'
+import Loading from '../loading'
 import HiRequest from '../_util/hi-request'
 import Icon from '../icon'
 
@@ -415,70 +416,73 @@ const SelectTree = ({
             setShow(false)
           }}
         >
-          <div className={`hi-selecttree__root theme__${theme} ${searchable ? 'hi-selecttree--hassearch' : ''}`}>
-            {searchable && mode !== 'breadcrumb' && (
-              <div className="hi-selecttree__searchbar-wrapper">
-                <div className="hi-selecttree__searchbar-inner">
-                  <Icon name="search" />
-                  <input
-                    className="hi-selecttree__searchinput"
-                    placeholder={localeDatas.selectTree.search}
-                    clearable="true"
-                    value={searchValue}
-                    clearabletrigger="always"
-                    onKeyDown={(e) => {
-                      if (e.keyCode === '13') {
-                        searchTreeNode(e.target.value)
-                      }
-                    }}
-                    onChange={changeEvents}
-                  />
-                  {searchValue.length > 0 ? (
-                    <i
-                      className={`hi-icon icon-close-circle hi-selecttree_searchbar__icon-close`}
-                      onClick={clearSearchEvent}
+          <Loading size="small" visible={nodeDataState === 'loading'}>
+            <div className={`hi-selecttree__root theme__${theme} ${searchable ? 'hi-selecttree--hassearch' : ''}`}>
+              {searchable && mode !== 'breadcrumb' && (
+                <div className="hi-selecttree__searchbar-wrapper">
+                  <div className="hi-selecttree__searchbar-inner">
+                    <Icon name="search" />
+                    <input
+                      className="hi-selecttree__searchinput"
+                      placeholder={localeDatas.selectTree.search}
+                      clearable="true"
+                      value={searchValue}
+                      clearabletrigger="always"
+                      onKeyDown={(e) => {
+                        if (e.keyCode === '13') {
+                          searchTreeNode(e.target.value)
+                        }
+                      }}
+                      onChange={changeEvents}
                     />
-                  ) : null}
+                    {searchValue.length > 0 ? (
+                      <i
+                        className={`hi-icon icon-close-circle hi-selecttree_searchbar__icon-close`}
+                        onClick={clearSearchEvent}
+                      />
+                    ) : null}
+                  </div>
                 </div>
-              </div>
-            )}
-            {mode === 'breadcrumb' ? (
-              <NavTree
-                data={flattenData}
-                originData={data}
-                checkedNodes={checkedNodes}
-                selectedItems={selectedItems}
-                checkable={type === 'multiple'}
-                onCheck={checkedEvents}
-                autoExpand={autoExpand}
-                nodeDataState={nodeDataState}
-                onSelected={selectedEvents}
-                isRemoteLoadData={!!dataSource}
-                onExpand={expandEvents}
-                localeDatas={localeDatas}
-              />
-            ) : (
-              <Tree
-                data={flattenData}
-                originData={data}
-                expandIds={expandIds}
-                dataSource={dataSource}
-                loadDataOnExpand={false}
-                checkable={type === 'multiple'}
-                checkedNodes={checkedNodes}
-                selectedItems={selectedItems}
-                nodeDataState={nodeDataState}
-                onSearch={searchTreeNode}
-                // searchMode='highlight'
-                // defaultExpandIds={[]}
-                // defaultExpandAll
-                onExpand={expandEvents}
-                onClick={selectedEvents}
-                isRemoteLoadData={!!dataSource}
-                onCheck={checkedEvents}
-              />
-            )}
-          </div>
+              )}
+              {mode === 'breadcrumb' ? (
+                <NavTree
+                  data={flattenData}
+                  originData={data}
+                  checkedNodes={checkedNodes}
+                  selectedItems={selectedItems}
+                  checkable={type === 'multiple'}
+                  onCheck={checkedEvents}
+                  autoExpand={autoExpand}
+                  nodeDataState={nodeDataState}
+                  onSelected={selectedEvents}
+                  isRemoteLoadData={!!dataSource}
+                  onExpand={expandEvents}
+                  localeDatas={localeDatas}
+                />
+              ) : (
+                <Tree
+                  data={flattenData}
+                  originData={data}
+                  expandIds={expandIds}
+                  dataSource={dataSource}
+                  loadDataOnExpand={false}
+                  checkable={type === 'multiple'}
+                  checkedNodes={checkedNodes}
+                  selectedItems={selectedItems}
+                  nodeDataState={nodeDataState}
+                  onSearch={searchTreeNode}
+                  localeDatas={localeDatas}
+                  // searchMode='highlight'
+                  // defaultExpandIds={[]}
+                  // defaultExpandAll
+                  onExpand={expandEvents}
+                  onClick={selectedEvents}
+                  isRemoteLoadData={!!dataSource}
+                  onCheck={checkedEvents}
+                />
+              )}
+            </div>
+          </Loading>
         </Popper>
       }
       {/* <NavTree data={data} /> */}

diff --git a/components/select-tree/components/tree/NavTree.js b/components/select-tree/components/tree/NavTree.js
@@ -108,14 +108,11 @@ const NavTree = ({
       {Object.keys(fullBreadData).length > 0 && (
         <Bread datas={fullBreadData} localeDatas={localeDatas} onClick={onBreadClick} onReturnClick={onReturnClick} />
       )}
-      {loadingState === 'loading' && <Loading size="small" />}
-      <ul className="hi-breadtree__list">
-        {loadingState === 'empty' ? (
-          <li>
-            <span className="hi-select-tree--empty">empty</span>
-          </li>
-        ) : (
-          renderData.map((node, index) => {
+      {loadingState === 'empty' ? (
+        <span className="hi-select-tree--empty">{localeDatas.selectTree.emptyContent}</span>
+      ) : (
+        <ul className="hi-breadtree__list">
+          {renderData.map((node, index) => {
             const children = getChildrenNodes(node, data)
             const textCls = classNames(
               'hi-breadtree__text',
@@ -146,9 +143,9 @@ const NavTree = ({
                 )}
               </li>
             )
-          })
-        )}
-      </ul>
+          })}
+        </ul>
+      )}
     </div>
   )
 }

diff --git a/components/select-tree/components/tree/index.jsx b/components/select-tree/components/tree/index.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import Loading from '../../../loading'
 import TreeNode from './TreeNode'
 import TreeContext from './context'
 import './style/index'
@@ -21,7 +20,8 @@ const Tree = ({
   onExpand,
   nodeDataState,
   loadDataOnExpand,
-  isRemoteLoadData
+  isRemoteLoadData,
+  localeDatas
 }) => {
   return (
     <TreeContext.Provider
@@ -42,10 +42,10 @@ const Tree = ({
       }}
     >
       <div className={`${PREFIX}`}>
-        <Loading size="small" visible={nodeDataState === 'loading'}>
-          {nodeDataState === 'empty' && <span className="hi-select-tree--empty">empty</span>}
-          {nodeDataState === 'normal' && <TreeNode data={getRootNodes(data)} flttenData={data} />}
-        </Loading>
+        {nodeDataState === 'empty' && (
+          <span className="hi-select-tree--empty">{localeDatas.selectTree.emptyContent}</span>
+        )}
+        {nodeDataState === 'normal' && <TreeNode data={getRootNodes(data)} flttenData={data} />}
       </div>
     </TreeContext.Provider>
   )

diff --git a/components/select-tree/components/tree/style/index.scss b/components/select-tree/components/tree/style/index.scss
@@ -8,10 +8,8 @@ $tree: 'hi-select-tree' !default;
   overflow: auto;
 
   &--empty {
-    margin-left: 50%;
-    margin-top: 45%;
     display: inline-block;
-    transform: translate(-50%, 0);
+    margin-bottom: 12px;
   }
 
   &__nodes {
@@ -81,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/components/select-tree/components/tree/util.js b/components/select-tree/components/tree/util.js
@@ -204,9 +204,9 @@ export const flattenNodesData = (data, isGenEntries = false) => {
   const fun = (datas, newArr, parent = {}) => {
     datas = _.cloneDeep(datas)
     datas.forEach((node) => {
-      const pId = parent.id
+      const pId = node.pId !== undefined ? node.pId : parent.id
+      node.pId = pId
       if (pId) {
-        node.pId = pId
         const arr = parent.ancestors ? [...parent.ancestors] : []
         arr.unshift(pId)
         node.ancestors = arr

diff --git a/docs/demo/select-tree/section-async.jsx b/docs/demo/select-tree/section-async.jsx
@@ -20,12 +20,11 @@ const code = [
                 params: {pId: key},
                 url: 'http://my-json-server.typicode.com/hiui-group/db/fulldata',
                 transformResponse: (res) => {
-                  console.log(2, res)
                   return res.map(r => {
                     return {
                       ...r,
-                      id: r.code,
-                      title: r.name
+                      id: r.code || r.id,
+                      title: r.name || r.title
                     }
                   })
                 }
@@ -56,8 +55,8 @@ const code = [
                   return res.map(r => {
                     return {
                       ...r,
-                      id: r.code,
-                      title: r.name
+                      id: r.code || r.id,
+                      title: r.name || r.title
                     }
                   })
                 }
@@ -85,7 +84,6 @@ const code = [
                 params: {pId: key ? key : -1},
                 url: 'https://mife-gallery.test.mi.com/hiui/tree',
                 transformResponse: (res) => {
-                  console.log(2, res)
                   return res.data.map(r => {
                     return {
                       ...r,

diff --git a/docs/demo/select-tree/section-bread.jsx b/docs/demo/select-tree/section-bread.jsx
@@ -286,25 +286,6 @@ const code = [
             data={singleList}
             type='multiple'
             defaultValue={[{id: '0-1-0-0-0'}]}
-            // defaultExpandAll
-            // defaultExpandIds={['1-2-0-0-0-0']}
-            // dataSource={key => {
-            //   return {
-            //     type: 'GET',
-            //     key: 'id',
-            //     params: {pId: key},
-            //     url: 'http://localhost:3000/tree',
-            //     transformResponse: (res) => {
-            //       return res.map(r => {
-            //         return {
-            //           ...r,
-            //           id: r.code,
-            //           title: r.name
-            //         }
-            //       })
-            //     }
-            //   }
-            // }}
           />
         )
       }
@@ -339,8 +320,8 @@ const code = [
                   return res.map(r => {
                     return {
                       ...r,
-                      id: r.code,
-                      title: r.name
+                      id: r.id,
+                      title: r.title
                     }
                   })
                 }
@@ -376,16 +357,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-filter.jsx b/docs/demo/select-tree/section-filter.jsx
@@ -111,12 +111,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