Fix popupVisible of Cascader not working, close #8088

This commit is contained in:
afc163 2017-11-03 13:03:54 +08:00
parent 43864988e3
commit 59db56e953
3 changed files with 14 additions and 7 deletions

View File

@ -40,6 +40,7 @@ Cascade selection box.
| value | selected value | [CascaderOptionType](https://git.io/vMMoK)\[] | - | | value | selected value | [CascaderOptionType](https://git.io/vMMoK)\[] | - |
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | | onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |
| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - | | onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |
| popupVisible | set visible of cascader popup | boolean | - |
Fields in `showSearch`: Fields in `showSearch`:

View File

@ -120,7 +120,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
value: props.value || props.defaultValue || [], value: props.value || props.defaultValue || [],
inputValue: '', inputValue: '',
inputFocused: false, inputFocused: false,
popupVisible: false, popupVisible: props.popupVisible,
flattenOptions: props.showSearch && this.flattenTree(props.options, props.changeOnSelect), flattenOptions: props.showSearch && this.flattenTree(props.options, props.changeOnSelect),
}; };
} }
@ -129,6 +129,9 @@ export default class Cascader extends React.Component<CascaderProps, any> {
if ('value' in nextProps) { if ('value' in nextProps) {
this.setState({ value: nextProps.value || [] }); this.setState({ value: nextProps.value || [] });
} }
if ('popupVisible' in nextProps) {
this.setState({ popupVisible: nextProps.popupVisible });
}
if (nextProps.showSearch && this.props.options !== nextProps.options) { if (nextProps.showSearch && this.props.options !== nextProps.options) {
this.setState({ flattenOptions: this.flattenTree(nextProps.options, nextProps.changeOnSelect) }); this.setState({ flattenOptions: this.flattenTree(nextProps.options, nextProps.changeOnSelect) });
} }
@ -146,11 +149,13 @@ export default class Cascader extends React.Component<CascaderProps, any> {
} }
handlePopupVisibleChange = (popupVisible) => { handlePopupVisibleChange = (popupVisible) => {
this.setState({ if (!('popupVisible' in this.props)) {
popupVisible, this.setState({
inputFocused: popupVisible, popupVisible,
inputValue: popupVisible ? this.state.inputValue : '', inputFocused: popupVisible,
}); inputValue: popupVisible ? this.state.inputValue : '',
});
}
const onPopupVisibleChange = this.props.onPopupVisibleChange; const onPopupVisibleChange = this.props.onPopupVisibleChange;
if (onPopupVisibleChange) { if (onPopupVisibleChange) {
@ -208,7 +213,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
e.stopPropagation(); e.stopPropagation();
if (!this.state.inputValue) { if (!this.state.inputValue) {
this.setValue([]); this.setValue([]);
this.setState({ popupVisible: false }); this.handlePopupVisibleChange(false);
} else { } else {
this.setState({ inputValue: '' }); this.setState({ inputValue: '' });
} }

View File

@ -41,6 +41,7 @@ subtitle: 级联选择
| value | 指定选中项 | [CascaderOptionType](https://git.io/vMMoK)\[] | - | | value | 指定选中项 | [CascaderOptionType](https://git.io/vMMoK)\[] | - |
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - | | onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - | | onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |
| popupVisible | 控制浮层显隐 | boolean | - |
`showSearch` 为对象时,其中的字段: `showSearch` 为对象时,其中的字段: