diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a17e7d67..6612ccbd0 100644 --- 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 index 78fc4dd19..92c1433c4 100644 --- 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 index f819ebc93..093a6a9b6 100644 --- 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 index 802d616aa..0732d8531 100644 --- 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 index 802d616aa..0732d8531 100644 --- 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 index fc1988263..215a71c3b 100644 --- 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) }} > -
- {searchable && mode !== 'breadcrumb' && ( -
-
- - { - if (e.keyCode === '13') { - searchTreeNode(e.target.value) - } - }} - onChange={changeEvents} - /> - {searchValue.length > 0 ? ( - +
+ {searchable && mode !== 'breadcrumb' && ( +
+
+ + { + if (e.keyCode === '13') { + searchTreeNode(e.target.value) + } + }} + onChange={changeEvents} /> - ) : null} + {searchValue.length > 0 ? ( + + ) : null} +
-
- )} - {mode === 'breadcrumb' ? ( - - ) : ( - - )} -
+ )} + {mode === 'breadcrumb' ? ( + + ) : ( + + )} +
+ } {/* */} diff --git a/components/select-tree/components/tree/NavTree.js b/components/select-tree/components/tree/NavTree.js index 9a17d7051..ed0346f01 100644 --- 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 && ( )} - {loadingState === 'loading' && } -
    - {loadingState === 'empty' ? ( -
  • - empty -
    • - ) : ( - renderData.map((node, index) => { + {loadingState === 'empty' ? ( + {localeDatas.selectTree.emptyContent} + ) : ( +
      + {renderData.map((node, index) => { const children = getChildrenNodes(node, data) const textCls = classNames( 'hi-breadtree__text', @@ -146,9 +143,9 @@ const NavTree = ({ )} ) - }) - )} -
    + })} +
+ )}
) } diff --git a/components/select-tree/components/tree/index.jsx b/components/select-tree/components/tree/index.jsx index 6b66c4433..aefe7d7ba 100644 --- 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 (
- - {nodeDataState === 'empty' && empty} - {nodeDataState === 'normal' && } - + {nodeDataState === 'empty' && ( + {localeDatas.selectTree.emptyContent} + )} + {nodeDataState === 'normal' && }
) diff --git a/components/select-tree/components/tree/style/index.scss b/components/select-tree/components/tree/style/index.scss index 83ac7ce99..78d62c26e 100644 --- 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 index daeb8f41d..da589c817 100644 --- 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 index 1cf865de5..d35ad69e1 100644 --- 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 index a9db2ed4f..bd06014ab 100644 --- 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 index a057c35b4..1f5044770 100644 --- 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 = () => ( - + ) export default DemoType diff --git a/docs/demo/select-tree/section-multiple.jsx b/docs/demo/select-tree/section-multiple.jsx index bf1dbfa0b..1af174988 100644 --- a/docs/demo/select-tree/section-multiple.jsx +++ b/docs/demo/select-tree/section-multiple.jsx @@ -7,7 +7,7 @@ const desc = '展示从多个收起的备选项中选出的一个选项' const defaultStr = `constructor () { super() this.state = { - value: '3', + value: ['0-0'], singleList: [ { title: '手机类', @@ -123,7 +123,12 @@ class Demo extends React.Component { type='multiple' showCheckedMode='PARENT' data={singleList} - onChange={(a, b , c) => console.log(a, b , c)} + value={value} + onChange={(checkedIds, checkedNodes , currentNode) => { + this.setState({ + value:checkedIds + }) + }} /> ) } @@ -152,12 +157,6 @@ class Demo extends React.Component { } ] const DemoType = () => ( - + ) export default DemoType diff --git a/docs/demo/select-tree/section-nav.jsx b/docs/demo/select-tree/section-nav.jsx index a7574d963..0747b7a7b 100644 --- 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 = () => ( - + ) export default DemoType diff --git a/docs/demo/select-tree/section-single.jsx b/docs/demo/select-tree/section-single.jsx index a6d7f5877..18021350a 100644 --- a/docs/demo/select-tree/section-single.jsx +++ b/docs/demo/select-tree/section-single.jsx @@ -83,8 +83,8 @@ const code = [ return ( { - console.log('selectTree',...args) + onChange={(checkedIds, checkedNodes , currentNode)=>{ + console.log('selectTree',checkedIds, checkedNodes , currentNode) }} /> )