You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2021/05/20 14:27:41 UTC
[superset] branch master updated: fix(explore): fix clearing select
data causes popover dismiss (#14221)
This is an automated email from the ASF dual-hosted git repository.
villebro pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new ea37274 fix(explore): fix clearing select data causes popover dismiss (#14221)
ea37274 is described below
commit ea3727418071bd3d9630e561040429bf2dd77af6
Author: Yaozong Liu <75...@qq.com>
AuthorDate: Thu May 20 22:26:27 2021 +0800
fix(explore): fix clearing select data causes popover dismiss (#14221)
* fix(explore): fix clearing select data causes popover dismiss
* wip: lint
* wip: lint
---
.../AnnotationLayerControl/AnnotationLayer.jsx | 49 +++++++++++++++++++---
.../controls/AnnotationLayerControl/index.jsx | 24 +++++++++--
.../explore/components/controls/SelectControl.jsx | 4 +-
3 files changed, 65 insertions(+), 12 deletions(-)
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
index b2eef07..e3eb6b5 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
@@ -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')] : []}
/>
)}
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
index e5965ee..c94fe88 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
@@ -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>
);
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index e310da2..458792f 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -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) {