import { useCallback, useState } from
"react"
;
import
'@blueprintjs/datetime/lib/css/blueprint-datetime.css'
;
import
'@blueprintjs/core/lib/css/blueprint.css'
;
import { Button, H5, PanelStack2 } from
"@blueprintjs/core"
;
import
'./App.css'
const Panel1 = props => {
const openNewPanel = () => {
props.openPanel({
props: {},
renderPanel: Panel2,
title: `Panel 2`,
});
};
return
(
<div className=
"docs-panel-stack-contents-example"
>
<Button onClick={openNewPanel}
text=
"Open panel type 2"
/>
</div>
);
};
const Panel2 = props => {
const openNewPanel = () => {
props.openPanel({
props: {},
renderPanel: Panel3,
title: `Panel 3`,
});
};
return
(
<div className=
"docs-panel-stack-contents-example"
>
<h5>Parent counter was {props.counter}</h5>
<Button onClick={openNewPanel}
text=
"Open panel type 3"
/>
</div>
);
};
const Panel3 = props => {
const openNewPanel = () => {
props.openPanel({
props: {},
renderPanel: Panel1,
title: `Panel 1`,
});
};
return
(
<div className=
"docs-panel-stack-contents-example"
>
<Button onClick={openNewPanel}
text=
"Open panel type 1"
/>
</div>
);
};
const initialPanel = {
props: {
panelNumber: 1,
},
renderPanel: Panel1,
title:
"Panel 1"
,
};
export
default
function
App() {
const [activePanelOnly, setActivePanelOnly] =
useState(
false
);
const [showHeader, setShowHeader] =
useState(
true
);
const [currentPanelStack, setCurrentPanelStack] =
useState([initialPanel]);
const addToPanelStack = useCallback(
(newPanel) => setCurrentPanelStack(stack =>
[...stack, newPanel]),
[],
);
const removeFromPanelStack = useCallback(() =>
setCurrentPanelStack(stack =>
stack.slice(0, -1)), []);
return
(
<div>
<div
className=
"head"
style={{
width:
"fit-content"
,
margin:
"auto"
,
}}
>
<h1
style={{
color:
"green"
,
}}
>
GeeksforGeeks
</h1>
<strong>React blueprint PanelStack2 API</strong>
<br />
<br />
</div>
<div className=
"container"
style={{ height:
'240px'
,
width:
'300px'
, margin:
'auto'
}}>
<PanelStack2
style={{ height:
'300px'
}}
onOpen={addToPanelStack}
onClose={removeFromPanelStack}
renderActivePanelOnly={activePanelOnly}
showPanelHeader={showHeader}
stack={currentPanelStack}
/>
</div>
</div>
);
}