diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md
new file mode 100644
index 0000000000..db4ea4eee0
--- /dev/null
+++ b/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(
+
+, mountNode);
+````
diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx
index 775631031a..d68271a104 100644
--- a/components/cascader/index.jsx
+++ b/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.setState({ value });
+ 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 ?
+ : null;
return (
-
+
{children ||
- }
+
+
+ {clearIcon}
+
+ }
);
}
@@ -54,6 +90,7 @@ AntCascader.defaultProps = {
return label.join(' / ');
},
size: 'default',
+ onPopupVisibleChange() {},
};
export default AntCascader;
diff --git a/package.json b/package.json
index a7e5f16409..3188130e81 100644
--- a/package.json
+++ b/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",
diff --git a/style/components/cascader.less b/style/components/cascader.less
index e79f6089f7..e2063faba6 100644
--- a/style/components/cascader.less
+++ b/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;