If panelStates isn't defined, the default keeps being "show all panels".
If panelStates is defined, but some panel state isn't included, the default
is to set its initial visibility to false. If it is indeed included but
the optional visibility setting isn't defined, by default the panel will
be shown to avoid having to explicitly set visible:true to all panels.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
{React.cloneElement(props.children, { doHidePanel, panelName })}
</Grid>;
{React.cloneElement(props.children, { doHidePanel, panelName })}
</Grid>;
-export interface MPVContainerDataProps {
- panelNames?: string[];
+export interface MPVPanelState {
+ name: string;
+ visible?: boolean;
+}
+interface MPVContainerDataProps {
+ panelStates?: MPVPanelState[];
type MPVContainerProps = MPVContainerDataProps & GridProps;
// Grid container compatible component that also handles panel toggling.
type MPVContainerProps = MPVContainerDataProps & GridProps;
// Grid container compatible component that also handles panel toggling.
-const MPVContainerComponent = ({children, panelNames, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
+const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
if (children === undefined || children === null || children === {}) {
children = [];
} else if (!isArray(children)) {
children = [children];
}
if (children === undefined || children === null || children === {}) {
children = [];
} else if (!isArray(children)) {
children = [children];
}
- const visibility = (children as ReactNodeArray).map(() => true);
+ const visibility = (children as ReactNodeArray).map((_, idx) =>
+ !!!panelStates || // if panelStates wasn't passed, default to all visible panels
+ (panelStates[idx] &&
+ (panelStates[idx].visible || panelStates[idx].visible === undefined)));
const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
let panels: JSX.Element[] = [];
const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
let panels: JSX.Element[] = [];
const toggleIcon = panelVisibility[idx]
? <VisibleIcon className={classNames(classes.buttonIcon)} />
: <InvisibleIcon className={classNames(classes.buttonIcon)}/>
const toggleIcon = panelVisibility[idx]
? <VisibleIcon className={classNames(classes.buttonIcon)} />
: <InvisibleIcon className={classNames(classes.buttonIcon)}/>
- const panelName = panelNames === undefined
+ const panelName = panelStates === undefined
- : panelNames[idx] || `Panel ${idx+1}`;
+ : (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
const toggleVariant = panelVisibility[idx]
? "raised"
: "flat";
const toggleVariant = panelVisibility[idx]
? "raised"
: "flat";
import { Process } from 'store/processes/process';
import { SubprocessPanel } from 'views/subprocess-panel/subprocess-panel';
import { SubprocessFilterDataProps } from 'components/subprocess-filter/subprocess-filter';
import { Process } from 'store/processes/process';
import { SubprocessPanel } from 'views/subprocess-panel/subprocess-panel';
import { SubprocessFilterDataProps } from 'components/subprocess-filter/subprocess-filter';
-import { MPVContainer, MPVPanelContent } from 'components/multi-panel-view/multi-panel-view';
+import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
export interface ProcessPanelRootDataProps {
process?: Process;
export interface ProcessPanelRootDataProps {
process?: Process;
export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
+const panelsData: MPVPanelState[] = [
+ {name: "Info"},
+ {name: "Subprocesses"},
+];
+
export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
process
export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
process
- ? <MPVContainer spacing={8} panelNames={["Info", "Subprocesses"]} alignItems="stretch">
+ ? <MPVContainer spacing={8} panelStates={panelsData} alignItems="stretch">
<MPVPanelContent sm={12} md={12}>
<ProcessInformationCard
process={process}
<MPVPanelContent sm={12} md={12}>
<ProcessInformationCard
process={process}