aws-northstar/layouts/AppLayout/index.d.ts

NorthStar Design System

/** *******************************************************************************************************************
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  
  Licensed under the Apache License, Version 2.0 (the "License").
  You may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.                                                                              *
 ******************************************************************************************************************** */
import { ReactNode, ReactElement, FunctionComponent } from 'react';
import { FlashbarMessage } from '../../components/Flashbar';
import { SideNavigationProps } from '../../components/SideNavigation';
import { HelpPanelProps } from '../../components/HelpPanel';
export interface Notification extends FlashbarMessage {
    id: string;
}
export interface AppLayoutContextApi {
    /**
     * Open/close the help panel.
     */
    openHelpPanel: (open?: boolean) => void;
    /**
     * Set the content of the help panel.
     */
    setHelpPanelContent: (content: ReactNode) => void;
    /**
     * Open/close the split panel.
     */
    openSplitPanel: (open?: boolean) => void;
    /**
     * Set the content of the split panel.
     */
    setSplitPanelContent: (content: ReactNode) => void;
    /**
     * Set the default height of the split panel.
     */
    setDefaultSplitPanelHeight: (height?: number) => void;
    /**
     * Add a notification to the notification panel.
     */
    addNotification: (notification: Notification) => void;
    /**
     * Dismiss the specified notification
     * or all the notifications if notification id is not provided.
     */
    dismissNotifications: (id?: string) => void;
}
export interface AppLayoutProps {
    /**The header */
    header: ReactNode;
    /**SideNavigation drawer.*/
    navigation?: ReactElement<SideNavigationProps>;
    /**Help Panel drawer <br/>
     * Alternatively, the helpPanel can be added dynamically via <b>setHelpPanelContent</b> callback in the AppLayoutContext. See <a href="https://storybook.northstar.aws-prototyping.cloud/?path=/story/layouts-applayout--dynamic-help-panel" target="_blank" rel="noreferrer noopener">example</a>.
     */
    helpPanel?: ReactElement<HelpPanelProps>;
    /**
     * Split Panel drawer <br/>
     * Alternatively, the splitPanel can be added dynamically via <b>setSplitPanelContent</b> callback in the AppLayoutContext. See <a href="https://storybook.northstar.aws-prototyping.cloud/?path=/story/layouts-applayout--dynamic-split-panel" target="_blank" rel="noreferrer noopener">example</a>.
     */
    splitPanel?: ReactNode;
    /**Whether to render padding within the content area*/
    paddingContentArea?: boolean;
    /**Breadcrumbs should be defined whithin this region in order to benefit from the responsive breadcrumb pattern.*/
    breadcrumbs?: ReactNode;
    /**Whether to display in Progress global overlay*/
    inProgress?: boolean;
    /**A list of notifications. <br/>
     * The notifications are displayed on top of the main content in the scrollable area,
     * it occupies the full width and is not affected by the padding that is added to the content region. <br/>
     * Alternatively, the notification can be pushed dynamically via <b>addNotification</b> callback in the AppLayoutContext. See <a href='http://https://storybook.northstar.aws-prototyping.cloud/?path=/story/layouts-applayout--dynamic-notification-add' target="_blank" rel="noreferrer noopener">example</a>.
     * */
    notifications?: Notification[];
    /**Maximum number of notifications to be displayed*/
    maxNotifications?: number;
    /**
     * Height Of Header in pixel when custom header is used.
     * By default, 65px will be used for the <a href='/#/Components/Header'>NorthStar Header</a>. */
    headerHeightInPx?: number;
}
/**
 * Basic layout for application, with place holder for header, navigation area, content area, breadcrumbs and tools/help panel.
 * It should be placed as the top most component in main content area. There should not be any spacing around it, it consumes
 * 100% of the width and height of the main content area, providing its own scrolling behavior.
 * By default it comes with a padding inside the content region. It can be removed by setting prop paddingContentArea == false.
 */
declare const AppLayout: FunctionComponent<AppLayoutProps>;
export declare const useAppLayoutContext: () => AppLayoutContextApi;
export default AppLayout;