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;