mirror of https://github.com/apache/superset.git
fix(explore): fix clearing select data causes popover dismiss (#14221)
* fix(explore): fix clearing select data causes popover dismiss * wip: lint * wip: lint
This commit is contained in:
parent
a9d888ad40
commit
ea37274180
|
@ -70,6 +70,8 @@ const propTypes = {
|
|||
addAnnotationLayer: PropTypes.func,
|
||||
removeAnnotationLayer: PropTypes.func,
|
||||
close: PropTypes.func,
|
||||
|
||||
onPopoverClear: PropTypes.func,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
@ -93,6 +95,7 @@ const defaultProps = {
|
|||
addAnnotationLayer: () => {},
|
||||
removeAnnotationLayer: () => {},
|
||||
close: () => {},
|
||||
onPopoverClear: () => {},
|
||||
};
|
||||
|
||||
export default class AnnotationLayer extends React.PureComponent {
|
||||
|
@ -169,6 +172,7 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||
);
|
||||
this.handleValue = this.handleValue.bind(this);
|
||||
this.isValidForm = this.isValidForm.bind(this);
|
||||
this.popoverClearWrapper = this.popoverClearWrapper.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -238,6 +242,15 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||
return !errors.filter(x => x).length;
|
||||
}
|
||||
|
||||
popoverClearWrapper(value, actionMeta, callback) {
|
||||
if (callback) {
|
||||
callback(value);
|
||||
}
|
||||
if (actionMeta?.action === 'clear') {
|
||||
this.props.onPopoverClear(true);
|
||||
}
|
||||
}
|
||||
|
||||
handleAnnotationType(annotationType) {
|
||||
this.setState({
|
||||
annotationType,
|
||||
|
@ -409,7 +422,9 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||
options={valueOptions}
|
||||
isLoading={isLoadingOptions}
|
||||
value={value}
|
||||
onChange={this.handleValue}
|
||||
onChange={(value, _, actionMeta) =>
|
||||
this.popoverClearWrapper(value, actionMeta, this.handleValue)
|
||||
}
|
||||
validationErrors={!value ? ['Mandatory'] : []}
|
||||
optionRenderer={this.renderOption}
|
||||
/>
|
||||
|
@ -490,7 +505,11 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||
validationErrors={!intervalEndColumn ? ['Mandatory'] : []}
|
||||
options={columns}
|
||||
value={intervalEndColumn}
|
||||
onChange={v => this.setState({ intervalEndColumn: v })}
|
||||
onChange={(value, _, actionMeta) =>
|
||||
this.popoverClearWrapper(value, actionMeta, v =>
|
||||
this.setState({ intervalEndColumn: v }),
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<SelectControl
|
||||
|
@ -500,7 +519,11 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||
description="Pick a title for you annotation."
|
||||
options={[{ value: '', label: 'None' }].concat(columns)}
|
||||
value={titleColumn}
|
||||
onChange={v => this.setState({ titleColumn: v })}
|
||||
onChange={(value, _, actionMeta) =>
|
||||
this.popoverClearWrapper(value, actionMeta, v =>
|
||||
this.setState({ titleColumn: v }),
|
||||
)
|
||||
}
|
||||
/>
|
||||
{annotationType !== ANNOTATION_TYPES.TIME_SERIES && (
|
||||
<SelectControl
|
||||
|
@ -512,7 +535,11 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||
multi
|
||||
options={columns}
|
||||
value={descriptionColumns}
|
||||
onChange={v => this.setState({ descriptionColumns: v })}
|
||||
onChange={(value, _, actionMeta) =>
|
||||
this.popoverClearWrapper(value, actionMeta, v =>
|
||||
this.setState({ descriptionColumns: v }),
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
|
@ -628,7 +655,11 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||
{ value: 'opacityHigh', label: '0.8' },
|
||||
]}
|
||||
value={opacity}
|
||||
onChange={v => this.setState({ opacity: v })}
|
||||
onChange={(value, _, actionMeta) =>
|
||||
this.popoverClearWrapper(value, actionMeta, v =>
|
||||
this.setState({ opacity: v }),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<ControlHeader label={t('Color')} />
|
||||
|
@ -734,7 +765,13 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||
name="annotation-source-type"
|
||||
options={supportedSourceTypes}
|
||||
value={sourceType}
|
||||
onChange={this.handleAnnotationSourceType}
|
||||
onChange={(value, _, actionMeta) =>
|
||||
this.popoverClearWrapper(
|
||||
value,
|
||||
actionMeta,
|
||||
this.handleAnnotationSourceType,
|
||||
)
|
||||
}
|
||||
validationErrors={!sourceType ? [t('Mandatory')] : []}
|
||||
/>
|
||||
)}
|
||||
|
|
|
@ -59,10 +59,15 @@ const defaultProps = {
|
|||
class AnnotationLayerControl extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { popoverVisible: {}, addedAnnotationIndex: null };
|
||||
this.state = {
|
||||
popoverVisible: {},
|
||||
addedAnnotationIndex: null,
|
||||
popoverClear: false,
|
||||
};
|
||||
this.addAnnotationLayer = this.addAnnotationLayer.bind(this);
|
||||
this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
|
||||
this.handleVisibleChange = this.handleVisibleChange.bind(this);
|
||||
this.handlePopoverClear = this.handlePopoverClear.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -100,9 +105,19 @@ class AnnotationLayerControl extends React.PureComponent {
|
|||
}
|
||||
|
||||
handleVisibleChange(visible, popoverKey) {
|
||||
this.setState(prevState => ({
|
||||
popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
|
||||
}));
|
||||
if (!this.state.popoverClear) {
|
||||
this.setState(prevState => ({
|
||||
popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
|
||||
}));
|
||||
} else {
|
||||
this.handlePopoverClear(false);
|
||||
}
|
||||
}
|
||||
|
||||
handlePopoverClear(popoverClear) {
|
||||
this.setState({
|
||||
popoverClear,
|
||||
});
|
||||
}
|
||||
|
||||
removeAnnotationLayer(annotation) {
|
||||
|
@ -128,6 +143,7 @@ class AnnotationLayerControl extends React.PureComponent {
|
|||
this.handleVisibleChange(false, popoverKey);
|
||||
this.setState({ addedAnnotationIndex: null });
|
||||
}}
|
||||
onPopoverClear={this.handlePopoverClear}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -105,7 +105,7 @@ export default class SelectControl extends React.PureComponent {
|
|||
|
||||
// Beware: This is acting like an on-click instead of an on-change
|
||||
// (firing every time user chooses vs firing only if a new option is chosen).
|
||||
onChange(opt) {
|
||||
onChange(opt, actionMeta) {
|
||||
let optionValue = this.props.multi ? [] : null;
|
||||
if (opt) {
|
||||
if (this.props.multi) {
|
||||
|
@ -126,7 +126,7 @@ export default class SelectControl extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
// will eventually call `exploreReducer`: SET_FIELD_VALUE
|
||||
this.props.onChange(optionValue);
|
||||
this.props.onChange(optionValue, [], actionMeta);
|
||||
}
|
||||
|
||||
getSelectRef(instance) {
|
||||
|
|
Loading…
Reference in New Issue