Skip to content

Commit

Permalink
feat: #1407
Browse files Browse the repository at this point in the history
  • Loading branch information
Wugaoliang committed Dec 7, 2020
1 parent aedf062 commit 1788bf3
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 17 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# 更新日志

## 3.2.1

- 新增 `SelectTree` renderInputContent 自定义渲染 Input 中展示内容 [#1407](https://github.com/XiaoMi/hiui/issues/1407)

## 3.2.0

- 新增 HiUI 基础样式 css 文件 [#1338](https://github.com/XiaoMi/hiui/issues/1338)
Expand Down
2 changes: 2 additions & 0 deletions components/select-tree/SelectTreeHook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const SelectTree = ({
localeDatas,
placeholder: propsPlaceholder,
style,
renderInputContent,
optionWidth,
placement = 'top-bottom-start'
}) => {
Expand Down Expand Up @@ -396,6 +397,7 @@ const SelectTree = ({
selectedItems={selectedItems}
clearable={clearable}
show={show}
renderInputContent={renderInputContent}
placeholder={placeholder}
checkedEvents={checkedEvents}
onTrigger={onTrigger}
Expand Down
7 changes: 5 additions & 2 deletions components/select-tree/components/Trigger.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const Trigger = ({
show,
selectedItemsRef,
placeholder,
renderInputContent,
isFocus
}) => {
return (
Expand All @@ -31,15 +32,17 @@ const Trigger = ({
<div className="hi-selecttree__selected-wrapper" ref={selectedItemsRef}>
<div className="hi-selecttree__selected--hidden">
{selectedItems.map((node, index) => (
<span key={index}>{node.title || ''}</span>
<span key={index}>{renderInputContent ? renderInputContent(node) : node.title || ''}</span>
))}
</div>
{selectedItems.length === 0 && <span>{placeholder}</span>}
{selectedItems.length > 0 &&
selectedItems.slice(0, showCount || 1).map((node, index) => {
return (
<div key={index} className="hi-selecttree__selecteditem">
<div className="hi-selecttree__selecteditem-name">{node ? node.title : ''}</div>
<div className="hi-selecttree__selecteditem-name">
{renderInputContent ? renderInputContent(node) : node.title || ''}
</div>
{type === 'multiple' && (
<span
className="hi-selecttree__selecteditem-remove"
Expand Down
31 changes: 16 additions & 15 deletions docs/zh-CN/components/select-tree.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,22 @@ import DemoBread from '../../demo/select-tree/section-bread'

## Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------- | ----------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------ |
| data | 展示数据 | DataItem [] | - | - |
| showCheckedMode | 数据回显模式 | string | ALL: 所有被选中节点，不区分父子节点 <br/>PARENT: 当所有子节点被选中时将只保留父节点<br/>CHILD:仅显示子节点 | ALL |
| mode | 数据展示形式 | string | normal \| breadcrumb | normal |
| type | 数据选择类型 | string | single \| multiple | single |
| defaultExpandAll | 是否默认展开所有树节点 | boolean | true \| false | false |
| defaultExpandIds | 默认高亮的节点（非受控） | string[] | - | - |
| defaultValue | 默认选中项 （非受控） | DataItem[] \| string[] \| string | - | - |
| value | 默认选中项 （受控） | DataItem[] \| string[] \| string | - | - |
| placeholder | 输入框占位 | string | - | 请选择 |
| searchMode | 节点搜索模式，仅在*mode=normal*模式下生效 | string | highlight \| filter | - |
| dataSource | 异步加载数据 | (key: string) => DataSource \| DataSource \| Promise | - | - |
| optionWidth | 自定义下拉选项宽度 | number | - | |
| overlayClassName | 下拉根元素的类名称 (3.0 新增) | string | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------ | ----------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------ |
| data | 展示数据 | DataItem [] | - | - |
| showCheckedMode | 数据回显模式 | string | ALL: 所有被选中节点，不区分父子节点 <br/>PARENT: 当所有子节点被选中时将只保留父节点<br/>CHILD:仅显示子节点 | ALL |
| mode | 数据展示形式 | string | normal \| breadcrumb | normal |
| type | 数据选择类型 | string | single \| multiple | single |
| defaultExpandAll | 是否默认展开所有树节点 | boolean | true \| false | false |
| defaultExpandIds | 默认高亮的节点（非受控） | string[] | - | - |
| defaultValue | 默认选中项 （非受控） | DataItem[] \| string[] \| string | - | - |
| value | 默认选中项 （受控） | DataItem[] \| string[] \| string | - | - |
| renderInputContent | 自定义渲染 Input 中展示内容 | (checkedNodes \| checkedNode) => ReactNode \| string | - | - |
| placeholder | 输入框占位 | string | - | 请选择 |
| searchMode | 节点搜索模式，仅在*mode=normal*模式下生效 | string | highlight \| filter | - |
| dataSource | 异步加载数据 | (key: string) => DataSource \| DataSource \| Promise | - | - |
| optionWidth | 自定义下拉选项宽度 | number | - | |
| overlayClassName | 下拉根元素的类名称 (3.0 新增) | string | - | - |

<!-- | expandIds | 默认高亮的节点（受控） | string[] | - | - | -->

Expand Down

0 comments on commit 1788bf3

Please sign in to comment.