import * as React from "react";
import { history as routeHistory } from "../history";
import { last, trim } from "lodash";
import { Link } from "../link";
import { Panel, TAB_COLOR, PanelColor } from "./panel_header";
import { t } from "../i18next_wrapper";
import { ErrorBoundary } from "../error_boundary";
interface DesignerPanelProps {
panelName: string;
panel?: Panel;
panelColor?: PanelColor;
children?: React.ReactNode;
}
export const DesignerPanel = (props: DesignerPanelProps) => {
const color = props.panel ? TAB_COLOR[props.panel] : props.panelColor;
return
{props.children}
;
};
interface DesignerPanelHeaderProps {
panelName: string;
panel?: Panel;
panelColor?: PanelColor;
title?: string;
blackText?: boolean;
description?: string;
descriptionElement?: JSX.Element;
backTo?: string;
onBack?: () => void;
style?: React.CSSProperties;
children?: React.ReactNode;
}
const backToText = (to: string | undefined): string => {
const lastPathName = last(trim(to, "/").split("/"));
const s = (lastPathName || "").replace("_", " ");
return s ? ` ${t("to")} ${s}` : "";
};
export const DesignerPanelHeader = (props: DesignerPanelHeaderProps) => {
const color = props.panel ? TAB_COLOR[props.panel] : props.panelColor;
const textColor = props.blackText ? "black" : "white";
return
{
props.backTo ? routeHistory.push(props.backTo) : history.back();
props.onBack?.();
}} />
{props.title &&
{t(props.title)}
}
{props.children}
{(props.description || props.descriptionElement) &&
{props.description && t(props.description)}
{props.descriptionElement}
}
;
};
interface DesignerPanelTopProps {
panel: Panel;
linkTo?: string;
onClick?(): void;
title?: string;
children?: React.ReactNode;
}
export const DesignerPanelTop = (props: DesignerPanelTopProps) => {
const withBtn = !!props.linkTo || !!props.onClick;
return
{props.children}
{props.onClick &&
}
{props.linkTo &&
}
;
};
interface DesignerPanelContentProps {
panelName: string;
children?: React.ReactNode;
className?: string;
}
export const DesignerPanelContent = (props: DesignerPanelContentProps) =>
{props.children}
;