Skip to content

Commit 7f9b0f5

Browse files
author
xifeng
committed
feat(CascaderSelect): support itemRender
1 parent d518cf0 commit 7f9b0f5

File tree

3 files changed

+21
-4
lines changed

3 files changed

+21
-4
lines changed

docs/cascader-select/demo/custom-style.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ You can use displayRender to customize the results displayed when single select,
1515
---
1616

1717
````jsx
18-
import { CascaderSelect } from '@alifd/next';
18+
import { CascaderSelect, Icon } from '@alifd/next';
1919

2020
const dataSource = [{
2121
value: '2973',
@@ -48,5 +48,13 @@ const dataSource = [{
4848
}]
4949
}];
5050

51-
ReactDOM.render(<CascaderSelect style={{ width: '452px'}} listStyle={{ width: '150px', height: '160px' }} displayRender={labels => labels[labels.length - 1]} defaultValue="3431" dataSource={dataSource} />, mountNode);
51+
const itemRender = item => {
52+
return (
53+
<span>
54+
<Icon type="account" size="xs" /> {item.label}
55+
</span>
56+
);
57+
};
58+
59+
ReactDOM.render(<CascaderSelect style={{ width: '452px'}} listStyle={{ width: '150px', height: '160px' }} displayRender={labels => labels[labels.length - 1]} defaultValue="3431" dataSource={dataSource} itemRender={itemRender} />, mountNode);
5260
````

docs/cascader-select/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
| listStyle | 每列列表样式对象 | Object | - |
4242
| listClassName | 每列列表类名 | String | - |
4343
| displayRender | 选择框单选时展示结果的自定义渲染函数<br><br>**签名**:<br>Function(label: Array) => ReactNode<br>**参数**:<br>_label_: {Array} 选中路径的文本数组<br>**返回值**:<br>{ReactNode} 渲染在选择框中的内容<br> | Function | 单选时:labelPath => labelPath.join(' / ');多选时:labelPath => labelPath[labelPath.length - 1] |
44+
| itemRender | 渲染 item 内容的方法<br><br>**签名**:<br>Function(item: Object) => ReactNode<br>**参数**:<br>_item_: {Object} 渲染节点的item<br>**返回值**:<br>{ReactNode} item node<br> | Function | - |
4445
| showSearch | 是否显示搜索框 | Boolean | false |
4546
| filter | 自定义搜索函数<br><br>**签名**:<br>Function(searchValue: String, path: Array) => Boolean<br>**参数**:<br>_searchValue_: {String} 搜索的关键字<br>_path_: {Array} 节点路径<br>**返回值**:<br>{Boolean} 是否匹配<br> | Function | 根据路径所有节点的文本值模糊匹配 |
4647
| resultRender | 搜索结果自定义渲染函数<br><br>**签名**:<br>Function(searchValue: String, path: Array) => ReactNode<br>**参数**:<br>_searchValue_: {String} 搜索的关键字<br>_path_: {Array} 匹配到的节点路径<br>**返回值**:<br>{ReactNode} 渲染的内容<br> | Function | 按照节点文本 a / b / c 的模式渲染 |

src/cascader-select/cascader-select.jsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,12 @@ export default class CascaderSelect extends Component {
117117
* @default 单选时:labelPath => labelPath.join(' / ');多选时:labelPath => labelPath[labelPath.length - 1]
118118
*/
119119
displayRender: PropTypes.func,
120+
/**
121+
* 渲染 item 内容的方法
122+
* @param {Object} item 渲染节点的item
123+
* @return {ReactNode} item node
124+
*/
125+
itemRender: PropTypes.func,
120126
/**
121127
* 是否显示搜索框
122128
*/
@@ -619,7 +625,8 @@ export default class CascaderSelect extends Component {
619625
loadData,
620626
showSearch,
621627
resultRender,
622-
readOnly
628+
readOnly,
629+
itemRender
623630
} = this.props;
624631
const { value } = this.state;
625632

@@ -636,7 +643,8 @@ export default class CascaderSelect extends Component {
636643
onExpand,
637644
listStyle,
638645
listClassName,
639-
loadData
646+
loadData,
647+
itemRender
640648
};
641649
if (!readOnly) {
642650
props.onChange = this.handleChange;

0 commit comments

Comments
 (0)