feat(CascaderSelect): support itemRender

alibaba-fusion · Dec 27, 2018 · 7f9b0f5 · 7f9b0f5
1 parent d518cf0
commit 7f9b0f5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/docs/cascader-select/demo/custom-style.md b/docs/cascader-select/demo/custom-style.md
@@ -15,7 +15,7 @@ You can use displayRender to customize the results displayed when single select,
 ---
 
 ````jsx
-import { CascaderSelect } from '@alifd/next';
+import { CascaderSelect, Icon } from '@alifd/next';
 
 const dataSource = [{
     value: '2973',
@@ -48,5 +48,13 @@ const dataSource = [{
     }]
 }];
 
-ReactDOM.render(<CascaderSelect style={{ width: '452px'}} listStyle={{ width: '150px', height: '160px' }} displayRender={labels => labels[labels.length - 1]} defaultValue="3431" dataSource={dataSource} />, mountNode);
+const itemRender = item => {
+    return (
+        <span>
+            <Icon type="account" size="xs" /> {item.label}
+        </span>
+    );
+};
+
+ReactDOM.render(<CascaderSelect style={{ width: '452px'}} listStyle={{ width: '150px', height: '160px' }} displayRender={labels => labels[labels.length - 1]} defaultValue="3431" dataSource={dataSource} itemRender={itemRender} />, mountNode);
 ````
diff --git a/docs/cascader-select/index.md b/docs/cascader-select/index.md
@@ -41,6 +41,7 @@
 | listStyle            | 每列列表样式对象                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Object                  | -                                                                                       |
 | listClassName        | 每列列表类名                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | String                  | -                                                                                       |
 | 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] |
+| itemRender           | 渲染 item 内容的方法<br><br>**签名**:<br>Function(item: Object) => ReactNode<br>**参数**:<br>_item_: {Object} 渲染节点的item<br>**返回值**:<br>{ReactNode} item node<br>                                                                                                                                                                                                                                                                                                                                                                      | Function                | -                                                                                       |
 | showSearch           | 是否显示搜索框                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Boolean                 | false                                                                                   |
 | filter               | 自定义搜索函数<br><br>**签名**:<br>Function(searchValue: String, path: Array) => Boolean<br>**参数**:<br>_searchValue_: {String} 搜索的关键字<br>_path_: {Array} 节点路径<br>**返回值**:<br>{Boolean} 是否匹配<br>                                                                                                                                                                                                                                                                                                                                     | Function                | 根据路径所有节点的文本值模糊匹配                                                                        |
 | 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 的模式渲染                                                                  |

diff --git a/src/cascader-select/cascader-select.jsx b/src/cascader-select/cascader-select.jsx
@@ -117,6 +117,12 @@ export default class CascaderSelect extends Component {
          * @default 单选时：labelPath => labelPath.join(' / ')；多选时：labelPath => labelPath[labelPath.length - 1]
          */
         displayRender: PropTypes.func,
+        /**
+         * 渲染 item 内容的方法
+         * @param {Object} item 渲染节点的item
+         * @return {ReactNode} item node
+         */
+        itemRender: PropTypes.func,
         /**
          * 是否显示搜索框
          */
@@ -619,7 +625,8 @@ export default class CascaderSelect extends Component {
             loadData,
             showSearch,
             resultRender,
-            readOnly
+            readOnly,
+            itemRender
         } = this.props;
         const { value } = this.state;
 
@@ -636,7 +643,8 @@ export default class CascaderSelect extends Component {
             onExpand,
             listStyle,
             listClassName,
-            loadData
+            loadData,
+            itemRender
         };
         if (!readOnly) {
             props.onChange = this.handleChange;