Refactor GenericRightPaneComponent to accept a ReactComponent as its content (#146)

This commit is contained in:
victor-meng
2020-08-12 11:41:19 -07:00
committed by GitHub
parent 455722c316
commit fb71fb4e82
6 changed files with 288 additions and 236 deletions

View File

@@ -8,7 +8,6 @@ import Explorer from "../Explorer";
export interface GenericRightPaneProps {
container: Explorer;
content: JSX.Element;
formError: string;
formErrorDetail: string;
id: string;
@@ -57,18 +56,18 @@ export class GenericRightPaneComponent extends React.Component<GenericRightPaneP
onKeyDown={this.onKeyDown}
>
<div className="panelContentWrapper">
{this.createPanelHeader()}
{this.createErrorSection()}
{this.props.content}
{this.createPanelFooter()}
{this.renderPanelHeader()}
{this.renderErrorSection()}
{this.props.children}
{this.renderPanelFooter()}
</div>
{this.createLoadingScreen()}
{this.renderLoadingScreen()}
</div>
</div>
);
}
private createPanelHeader = (): JSX.Element => {
private renderPanelHeader = (): JSX.Element => {
return (
<div className="firstdivbg headerline">
<span id="databaseTitle">{this.props.title}</span>
@@ -84,7 +83,7 @@ export class GenericRightPaneComponent extends React.Component<GenericRightPaneP
);
};
private createErrorSection = (): JSX.Element => {
private renderErrorSection = (): JSX.Element => {
return (
<div className="warningErrorContainer" aria-live="assertive" hidden={!this.props.formError}>
<div className="warningErrorContent">
@@ -104,7 +103,7 @@ export class GenericRightPaneComponent extends React.Component<GenericRightPaneP
);
};
private createPanelFooter = (): JSX.Element => {
private renderPanelFooter = (): JSX.Element => {
return (
<div className="paneFooter">
<div className="leftpanel-okbut">
@@ -122,7 +121,7 @@ export class GenericRightPaneComponent extends React.Component<GenericRightPaneP
);
};
private createLoadingScreen = (): JSX.Element => {
private renderLoadingScreen = (): JSX.Element => {
return (
<div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.props.isExecuting}>
<img className="dataExplorerLoader" src={LoadingIndicatorIcon} />