Add clear icon

components/cascader/demo/default-value.md

@@ -0,0 +1,43 @@
+# 默认值
+
+- order: 0
+
+默认值通过数组的方式指定。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
+, mountNode);
+````

components/cascader/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Cascader from 'rc-cascader';
 import Input from '../input';
+import Icon from '../icon';
 import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';
 
@@ -8,15 +9,33 @@ class AntCascader extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: [],
+      value: props.value || props.defaultValue || [],
+      popupVisible: false,
     };
     [
       'handleChange',
+      'handlePopupVisibleChange',
+      'setValue',
       'getLabel',
+      'clearSelection',
     ].forEach((method) => this[method] = this[method].bind(this));
   }
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      this.setState({ value: nextProps.value });
+    }
+  }
   handleChange(value, selectedOptions) {
+    this.setValue(value, selectedOptions);
+  }
+  handlePopupVisibleChange(popupVisible) {
+    this.setState({ popupVisible });
+    this.props.onPopupVisibleChange(popupVisible);
+  }
+  setValue(value, selectedOptions = []) {
+    if (!('value' in this.props)) {
       this.setState({ value });
+    }
     this.props.onChange(value, selectedOptions);
   }
   getLabel() {
@@ -25,20 +44,37 @@ class AntCascader extends React.Component {
       .map(o => o.label);
     return displayRender(label);
   }
+  clearSelection(e) {
+    e.preventDefault();
+    this.setValue([]);
+    this.setState({ popupVisible: false });
+  }
   render() {
     const { prefixCls, children, placeholder, style, size } = this.props;
     const sizeCls = classNames({
       'ant-input-lg': size === 'large',
       'ant-input-sm': size === 'small',
     });
+    const clearIcon = this.state.value.length > 0 ?
+      <Icon type="cross-circle"
+        className={`${prefixCls}-picker-clear`}
+        onClick={this.clearSelection} /> : null;
     return (
-      <Cascader {...this.props} onChange={this.handleChange}>
+      <Cascader {...this.props}
+        value={this.state.value}
+        popupVisible={this.state.popupVisible}
+        onPopupVisibleChange={this.handlePopupVisibleChange}
+        onChange={this.handleChange}>
         {children ||
+          <span className={`${prefixCls}-picker`}>
             <Input placeholder={placeholder}
               className={`${prefixCls}-input ant-input ${sizeCls}`}
               style={style}
               value={this.getLabel()}
-            readOnly />}
+              readOnly />
+            {clearIcon}
+          </span>
+        }
       </Cascader>
     );
   }
@@ -54,6 +90,7 @@ AntCascader.defaultProps = {
     return label.join(' / ');
   },
   size: 'default',
+  onPopupVisibleChange() {},
 };
 
 export default AntCascader;

package.json

@@ -40,7 +40,7 @@
     "object-assign": "~4.0.1",
     "rc-animate": "~2.0.2",
     "rc-calendar": "~5.2.0",
-    "rc-cascader": "~0.3.0",
+    "rc-cascader": "~0.4.0",
     "rc-checkbox": "~1.1.1",
     "rc-collapse": "~1.4.4",
     "rc-dialog": "~5.2.2",

style/components/cascader.less

@@ -4,6 +4,32 @@
     width: 172px;
     display: block;
   }
+  &-picker {
+    position: relative;
+    display: inline-block;
+    &-clear {
+      opacity: 0;
+      visibility: hidden;
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      font-size: 12px;
+      color: #ccc;
+      width: 12px;
+      height: 12px;
+      margin-top: -6px;
+      line-height: 12px;
+      cursor: pointer;
+      transition: color 0.3s ease, opacity 0.15s ease;
+      &:hover {
+        color: #999;
+      }
+    }
+    &:hover &-clear {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
   &-menus {
     font-size: 12px;
     overflow: hidden;