mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
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,
|
addAnnotationLayer: PropTypes.func,
|
||||||
removeAnnotationLayer: PropTypes.func,
|
removeAnnotationLayer: PropTypes.func,
|
||||||
close: PropTypes.func,
|
close: PropTypes.func,
|
||||||
|
|
||||||
|
onPopoverClear: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
@ -93,6 +95,7 @@ const defaultProps = {
|
|||||||
addAnnotationLayer: () => {},
|
addAnnotationLayer: () => {},
|
||||||
removeAnnotationLayer: () => {},
|
removeAnnotationLayer: () => {},
|
||||||
close: () => {},
|
close: () => {},
|
||||||
|
onPopoverClear: () => {},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class AnnotationLayer extends React.PureComponent {
|
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.handleValue = this.handleValue.bind(this);
|
||||||
this.isValidForm = this.isValidForm.bind(this);
|
this.isValidForm = this.isValidForm.bind(this);
|
||||||
|
this.popoverClearWrapper = this.popoverClearWrapper.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -238,6 +242,15 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||||||
return !errors.filter(x => x).length;
|
return !errors.filter(x => x).length;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
popoverClearWrapper(value, actionMeta, callback) {
|
||||||
|
if (callback) {
|
||||||
|
callback(value);
|
||||||
|
}
|
||||||
|
if (actionMeta?.action === 'clear') {
|
||||||
|
this.props.onPopoverClear(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handleAnnotationType(annotationType) {
|
handleAnnotationType(annotationType) {
|
||||||
this.setState({
|
this.setState({
|
||||||
annotationType,
|
annotationType,
|
||||||
@ -409,7 +422,9 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||||||
options={valueOptions}
|
options={valueOptions}
|
||||||
isLoading={isLoadingOptions}
|
isLoading={isLoadingOptions}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={this.handleValue}
|
onChange={(value, _, actionMeta) =>
|
||||||
|
this.popoverClearWrapper(value, actionMeta, this.handleValue)
|
||||||
|
}
|
||||||
validationErrors={!value ? ['Mandatory'] : []}
|
validationErrors={!value ? ['Mandatory'] : []}
|
||||||
optionRenderer={this.renderOption}
|
optionRenderer={this.renderOption}
|
||||||
/>
|
/>
|
||||||
@ -490,7 +505,11 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||||||
validationErrors={!intervalEndColumn ? ['Mandatory'] : []}
|
validationErrors={!intervalEndColumn ? ['Mandatory'] : []}
|
||||||
options={columns}
|
options={columns}
|
||||||
value={intervalEndColumn}
|
value={intervalEndColumn}
|
||||||
onChange={v => this.setState({ intervalEndColumn: v })}
|
onChange={(value, _, actionMeta) =>
|
||||||
|
this.popoverClearWrapper(value, actionMeta, v =>
|
||||||
|
this.setState({ intervalEndColumn: v }),
|
||||||
|
)
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<SelectControl
|
<SelectControl
|
||||||
@ -500,7 +519,11 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||||||
description="Pick a title for you annotation."
|
description="Pick a title for you annotation."
|
||||||
options={[{ value: '', label: 'None' }].concat(columns)}
|
options={[{ value: '', label: 'None' }].concat(columns)}
|
||||||
value={titleColumn}
|
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 && (
|
{annotationType !== ANNOTATION_TYPES.TIME_SERIES && (
|
||||||
<SelectControl
|
<SelectControl
|
||||||
@ -512,7 +535,11 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||||||
multi
|
multi
|
||||||
options={columns}
|
options={columns}
|
||||||
value={descriptionColumns}
|
value={descriptionColumns}
|
||||||
onChange={v => this.setState({ descriptionColumns: v })}
|
onChange={(value, _, actionMeta) =>
|
||||||
|
this.popoverClearWrapper(value, actionMeta, v =>
|
||||||
|
this.setState({ descriptionColumns: v }),
|
||||||
|
)
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div style={{ marginTop: '1rem' }}>
|
<div style={{ marginTop: '1rem' }}>
|
||||||
@ -628,7 +655,11 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||||||
{ value: 'opacityHigh', label: '0.8' },
|
{ value: 'opacityHigh', label: '0.8' },
|
||||||
]}
|
]}
|
||||||
value={opacity}
|
value={opacity}
|
||||||
onChange={v => this.setState({ opacity: v })}
|
onChange={(value, _, actionMeta) =>
|
||||||
|
this.popoverClearWrapper(value, actionMeta, v =>
|
||||||
|
this.setState({ opacity: v }),
|
||||||
|
)
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<ControlHeader label={t('Color')} />
|
<ControlHeader label={t('Color')} />
|
||||||
@ -734,7 +765,13 @@ export default class AnnotationLayer extends React.PureComponent {
|
|||||||
name="annotation-source-type"
|
name="annotation-source-type"
|
||||||
options={supportedSourceTypes}
|
options={supportedSourceTypes}
|
||||||
value={sourceType}
|
value={sourceType}
|
||||||
onChange={this.handleAnnotationSourceType}
|
onChange={(value, _, actionMeta) =>
|
||||||
|
this.popoverClearWrapper(
|
||||||
|
value,
|
||||||
|
actionMeta,
|
||||||
|
this.handleAnnotationSourceType,
|
||||||
|
)
|
||||||
|
}
|
||||||
validationErrors={!sourceType ? [t('Mandatory')] : []}
|
validationErrors={!sourceType ? [t('Mandatory')] : []}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -59,10 +59,15 @@ const defaultProps = {
|
|||||||
class AnnotationLayerControl extends React.PureComponent {
|
class AnnotationLayerControl extends React.PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = { popoverVisible: {}, addedAnnotationIndex: null };
|
this.state = {
|
||||||
|
popoverVisible: {},
|
||||||
|
addedAnnotationIndex: null,
|
||||||
|
popoverClear: false,
|
||||||
|
};
|
||||||
this.addAnnotationLayer = this.addAnnotationLayer.bind(this);
|
this.addAnnotationLayer = this.addAnnotationLayer.bind(this);
|
||||||
this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
|
this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
|
||||||
this.handleVisibleChange = this.handleVisibleChange.bind(this);
|
this.handleVisibleChange = this.handleVisibleChange.bind(this);
|
||||||
|
this.handlePopoverClear = this.handlePopoverClear.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -100,9 +105,19 @@ class AnnotationLayerControl extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleVisibleChange(visible, popoverKey) {
|
handleVisibleChange(visible, popoverKey) {
|
||||||
this.setState(prevState => ({
|
if (!this.state.popoverClear) {
|
||||||
popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
|
this.setState(prevState => ({
|
||||||
}));
|
popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
this.handlePopoverClear(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePopoverClear(popoverClear) {
|
||||||
|
this.setState({
|
||||||
|
popoverClear,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
removeAnnotationLayer(annotation) {
|
removeAnnotationLayer(annotation) {
|
||||||
@ -128,6 +143,7 @@ class AnnotationLayerControl extends React.PureComponent {
|
|||||||
this.handleVisibleChange(false, popoverKey);
|
this.handleVisibleChange(false, popoverKey);
|
||||||
this.setState({ addedAnnotationIndex: null });
|
this.setState({ addedAnnotationIndex: null });
|
||||||
}}
|
}}
|
||||||
|
onPopoverClear={this.handlePopoverClear}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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
|
// 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).
|
// (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;
|
let optionValue = this.props.multi ? [] : null;
|
||||||
if (opt) {
|
if (opt) {
|
||||||
if (this.props.multi) {
|
if (this.props.multi) {
|
||||||
@ -126,7 +126,7 @@ export default class SelectControl extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// will eventually call `exploreReducer`: SET_FIELD_VALUE
|
// will eventually call `exploreReducer`: SET_FIELD_VALUE
|
||||||
this.props.onChange(optionValue);
|
this.props.onChange(optionValue, [], actionMeta);
|
||||||
}
|
}
|
||||||
|
|
||||||
getSelectRef(instance) {
|
getSelectRef(instance) {
|
||||||
|
Loading…
Reference in New Issue
Block a user