Merge pull request #1743 from ant-design/feat-cascader-custom-jsx-label

Support custom label react element in Cascader Picker

components/cascader/demo/custom-render.md

@@ -0,0 +1,61 @@
+---
+order: 8
+title: 自定义已选项
+---
+
+例如给最后一项加上邮编链接。
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+      code: 752100,
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+      code: 453400,
+    }],
+  }],
+}];
+
+function handleAreaClick(e, label, option) {
+  e.stopPropagation();
+  console.log('点击了', label, option);
+}
+
+const displayRender = (labels, selectedOptions) => labels.map((label, i) => {
+  const option = selectedOptions[i];
+  if (i === labels.length - 1) {
+    return (
+      <span key={option.value}>
+        {label} (<a onClick={(e) => handleAreaClick(e, label, option)}>{option.code}</a>)
+      </span>
+    );
+  }
+  return <span key={option.value}>{label} / </span>;
+});
+
+ReactDOM.render(
+  <Cascader
+    options={options}
+    defaultValue={['zhejiang', 'hangzhou', 'xihu']}
+    displayRender={displayRender}
+    style={{ width: 200 }} />
+, mountNode);
+````

components/cascader/index.jsx

@@ -57,9 +57,9 @@ export default class Cascader extends React.Component {
 
   getLabel() {
     const { options, displayRender } = this.props;
-    const label = arrayTreeFilter(options, (o, level) => o.value === this.state.value[level])
-      .map(o => o.label);
-    return displayRender(label);
+    const selectedOptions = arrayTreeFilter(options, (o, level) => o.value === this.state.value[level]);
+    const label = selectedOptions.map(o => o.label);
+    return displayRender(label, selectedOptions);
   }
 
   clearSelection = (e) => {
@@ -105,12 +105,12 @@ export default class Cascader extends React.Component {
             style={style}
             className={pickerCls}>
             <Input {...otherProps}
-              placeholder={placeholder}
+              placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
               className={`${prefixCls}-input ant-input ${sizeCls}`}
-              style={{ width: '100%' }}
-              value={this.getLabel()}
+              value={null}
               disabled={disabled}
               readOnly />
+            <span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
             {clearIcon}
             <Icon type="down" className={arrowCls} />
           </span>

components/cascader/index.md

@@ -26,7 +26,7 @@ english: Cascader
 | defaultValue | 默认的选中项 | array  |[] |
 | value | 指定选中项 | array  | - |
 | onChange | 选择完成后的回调 | `function(value, selectedOptions)` | - |
-| displayRender | 选择后展示的渲染函数 | `function(label)` | `label => label.join(' / ')` |
+| displayRender | 选择后展示的渲染函数 | `function(label, selectedOptions)` | `label => label.join(' / ')` |
 | style | 自定义样式 | string | - |
 | className | 自定义类名 | string | - |
 | popupClassName | 自定义浮层类名 | string | - |

components/cascader/style/index.less

@@ -8,17 +8,31 @@
   &-input {
     display: block;
     cursor: pointer;
+    width: 100%;
   }
   &-picker {
     position: relative;
     display: inline-block;
     cursor: pointer;
     vertical-align: middle;
+    font-size: @font-size-base;
+    overflow: hidden;
 
     &-disabled {
       cursor: not-allowed;
     }
 
+    &-label {
+      position: absolute;
+      top: 0;
+      left: 8px;
+      height: 20px;
+      line-height: 20px;
+      top: 50%;
+      margin-top: -10px;
+      white-space: nowrap;
+    }
+
     &-clear {
       opacity: 0;
       position: absolute;
@@ -53,6 +67,7 @@
       margin-top: -6px;
       line-height: 12px;
       color: #999;
+      background: #fff;
       .iconfont-size-under-12px(8px);
       &:before {
         transition: transform 0.2s ease;