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'; class AntCascader extends React.Component { constructor(props) { super(props); this.state = { 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() { const { options, displayRender } = this.props; const label = arrayTreeFilter(options, (o, level) => o.value === this.state.value[level]) .map(o => o.label); return displayRender(label); } clearSelection(e) { e.preventDefault(); e.stopPropagation(); 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; const arrowCls = classNames({ [`${prefixCls}-picker-arrow`]: true, [`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible, }); return ( {children || {clearIcon} } ); } } AntCascader.defaultProps = { prefixCls: 'ant-cascader', placeholder: '请选择', transitionName: 'slide-up', onChange() {}, options: [], displayRender(label) { return label.join(' / '); }, size: 'default', onPopupVisibleChange() {}, }; export default AntCascader;