fix(Explore): "Customize" tab rendering behavior (#15841)

* Remove getDerivedStateFromProps

* Set loading
This commit is contained in:
Geido 2021-07-27 01:32:27 +02:00 committed by GitHub
parent 1297fd9169
commit e6a37022ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 15 deletions

View File

@ -118,6 +118,7 @@ type ControlPanelsContainerState = {
expandedCustomizeSections: string[];
querySections: ControlPanelSectionConfig[];
customizeSections: ControlPanelSectionConfig[];
loading: boolean;
};
const isTimeSection = (section: ControlPanelSectionConfig): boolean =>
@ -189,6 +190,7 @@ function getState(
expandedCustomizeSections,
querySections,
customizeSections,
loading: false,
};
}
@ -206,24 +208,12 @@ export class ControlPanelsContainer extends React.Component<
expandedCustomizeSections: [],
querySections: [],
customizeSections: [],
loading: false,
};
this.renderControl = this.renderControl.bind(this);
this.renderControlPanelSection = this.renderControlPanelSection.bind(this);
}
static getDerivedStateFromProps(
props: ControlPanelsContainerProps,
state: ControlPanelsContainerState,
): ControlPanelsContainerState {
// only update the sections, not the expanded/collapsed state
const newState = getState(props);
return {
...state,
customizeSections: newState.customizeSections,
querySections: newState.querySections,
};
}
componentDidUpdate(prevProps: ControlPanelsContainerProps) {
if (
this.props.form_data.datasource !== prevProps.form_data.datasource ||
@ -234,6 +224,17 @@ export class ControlPanelsContainer extends React.Component<
}
}
// required for an Antd bug that would otherwise malfunction re-rendering
// a collapsed panel after changing the datasource or viz type
UNSAFE_componentWillReceiveProps(nextProps: ControlPanelsContainerProps) {
if (
this.props.form_data.datasource !== nextProps.form_data.datasource ||
this.props.form_data.viz_type !== nextProps.form_data.viz_type
) {
this.setState({ loading: true });
}
}
componentDidMount() {
this.setState(getState(this.props));
}
@ -382,8 +383,9 @@ export class ControlPanelsContainer extends React.Component<
render() {
const controlPanelRegistry = getChartControlPanelRegistry();
if (
!controlPanelRegistry.has(this.props.form_data.viz_type) &&
this.context.loading
(!controlPanelRegistry.has(this.props.form_data.viz_type) &&
this.context.loading) ||
this.state.loading
) {
return <Loading />;
}