/// import { IObservableValue, IReadonlyObservableValue } from '../Core/Observable'; /** * Describes the state of the current Master panel */ export interface IMasterPanelContent { /** * If true, doesn't display the back button for the current set of master-details * @default false */ hideBackButton?: boolean; /** * Additional handler for back button click * Return false if you want to prevent a pop from the context */ onBackButtonClick?: () => boolean; /** * Renders the content area of the MasterPanel * Your List/Tree goes here */ renderContent?: (parentItem: P, selectedMasterItem: IObservableValue) => JSX.Element; /** * For standard titles, mark the title element with "bolt-master-panel-header-title" * For standard subtitles, mark the subtitle element with "bolt-master-panel-header-subtitle bolt-master-panel-header-secondary" * * Mark all secondary elements with the css class "bolt-master-panel-header-secondary" so they are hidden on scroll * @see SimpleMasterDetailsHeader for a good basic implementation of title and subtitle */ renderHeader?: (parentItem: P) => JSX.Element; /** * Optional renderer for any search functionality * Renders into a styled area that scrolls with the content */ renderSearch?: (parentItem: P) => JSX.Element; } /** * Describes the state of the Detail Area */ export interface IDetailsAreaContent { /** * Renderer for Detail Area content */ renderContent: (detailItem: T) => JSX.Element; } /** * Describes the state of the current Master/Details View */ export interface IMasterDetailsContextLayer { /** * When the user navigates to this layer, what should be read to the user. */ ariaLabel?: string; /** * Information about Detail Area content */ detailsContent: IDetailsAreaContent; /** * Unique identifier for the layer */ key: string; /** * Details about the Master Panel, including what to render etc. */ masterPanelContent: IMasterPanelContent; /** * Optional handler for when this item is removed from the top of the context stack, before rendering happens */ onPopped?: (context: IMasterDetailsContext) => void; /** * Optional handler for logic that should happen when this is pushed to the context, before any rendering happens etc. * Includes things like inspecting page state to potentially push a sub-layer, etc. */ onPushed?: (context: IMasterDetailsContext) => void; /** * Parent item for this layer; should be set when creating a child layer * @see createChildLayer */ parentItem?: P; /** * Currently selected item in the Master portion of the view */ selectedMasterItem: IObservableValue; } /** * Allows interaction with a Master-Details pattern * Subscribe to the return value from @see getPayload to be notified of changes */ export interface IMasterDetailsContext { /** * Gets a reference to the relevant data for a Master Details view for purposes of subscribing to changes */ getCurrentLayer: () => IReadonlyObservableValue; /** * Gets the current stack of Layers the Context is managing */ getStack: () => IMasterDetailsContextLayer[]; /** * Whether or not the Details Panel is showing. The Details Panel may be hidden on smaller screens * when the user needs to select an item from the Master Panel. */ hideDetailsPanel: IReadonlyObservableValue; /** * Removes and returns the current top layer of the Master Details view * Updates the payload to the new top layer */ pop: () => IMasterDetailsContextLayer | undefined; /** * Pushes a new layer on top of the Master Details view and updates the payload accordingly */ push: (newLayer: IMasterDetailsContextLayer) => void; /** * Set whether or not the Details Panel should be visible. This is useful for small screens * when only the master or details panel can show at once. The MasterPanel hides by default on smaller screens. * Hiding the Details Panel will cause the Master Panel to show. */ setDetailsPanelVisbility: (visible: boolean) => void; }