import * as React from "react" ; import { Classes , DISPLAYNAME_PREFIX } from "../../common" ; import { Button } from "../button/buttons" ; import { Text } from "../text/text" ; import { Panel , PanelProps } from "./panelTypes" ; export interface PanelView2Props < T extends Panel < object > > { /**
     * Callback invoked when the user presses the back button or a panel invokes
     * the `closePanel()` injected prop method.
     */ onClose : ( removedPanel : T ) => void ; /**
     * Callback invoked when a panel invokes the `openPanel(panel)` injected
     * prop method.
     */ onOpen : ( addedPanel : T ) => void ; /** The panel to be displayed. */ panel : T ; /** The previous panel in the stack, for rendering the "back" button. */ previousPanel ? : T ; /** Whether to show the header with the "back" button. */ showHeader : boolean ; } interface PanelView2Component { < T extends Panel < object > > ( props ) : JSX . Element | null ; displayName : string ; } export const PanelView2 = < T extends Panel < object > > ( props ) => { const handleClose = React . useCallback ( ( ) => props . onClose ( props . panel ) , [ props . onClose , props . panel ] ) ; const maybeBackButton = props . previousPanel === undefined ? null : ( < Button aria - label = "Back" className = { Classes . PANEL_STACK_HEADER_BACK } icon = "chevron-left" minimal = { true } onClick = { handleClose } small = { true } text = { props . previousPanel . title } title = { props . previousPanel . htmlTitle } / > ) ; const PanelWrapper = React . useMemo ( ( ) => ( ) => props . panel . renderPanel ( { closePanel : handleClose , openPanel : props . onOpen , ... props . panel . props , } as PanelProps < T > ) , [ props . panel , props . onOpen ] ) ; return ( < div className = { Classes . PANEL_STACK2_VIEW } > { props . showHeader && ( < div className = { Classes . PANEL_STACK2_HEADER } > { } < span > { maybeBackButton } < /span> < Text className = { Classes . HEADING } ellipsize = { true } title = { props . panel . htmlTitle } > { props . panel . title } < /Text> < span / > < /div>)} < PanelWrapper / > < /div>); } ; PanelView2 . displayName = `${ DISPLAYNAME_PREFIX }.PanelView2` ;