UNPKG

4.66 kBTypeScriptView Raw
1import * as React from 'react';
2import { PageGroupProps } from './PageGroup';
3export declare enum PageLayouts {
4 vertical = "vertical",
5 horizontal = "horizontal"
6}
7export interface PageContextProps {
8 isManagedSidebar: boolean;
9 onNavToggle: () => void;
10 isNavOpen: boolean;
11 width: number;
12 getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
13}
14export declare const pageContextDefaults: PageContextProps;
15export declare const PageContext: React.Context<PageContextProps>;
16export declare const PageContextProvider: React.Provider<PageContextProps>;
17export declare const PageContextConsumer: React.Consumer<PageContextProps>;
18export interface PageProps extends React.HTMLProps<HTMLDivElement> {
19 /** Content rendered inside the main section of the page layout (e.g. <PageSection />) */
20 children?: React.ReactNode;
21 /** Additional classes added to the page layout */
22 className?: string;
23 /** Header component (e.g. <PageHeader />) */
24 header?: React.ReactNode;
25 /** Sidebar component for a side nav (e.g. <PageSidebar />) */
26 sidebar?: React.ReactNode;
27 /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
28 notificationDrawer?: React.ReactNode;
29 /** Flag indicating Notification drawer in expanded */
30 isNotificationDrawerExpanded?: boolean;
31 /** Flag indicating if breadcrumb width should be limited */
32 isBreadcrumbWidthLimited?: boolean;
33 /** Callback when notification drawer panel is finished expanding. */
34 onNotificationDrawerExpand?: () => void;
35 /** Skip to content component for the page */
36 skipToContent?: React.ReactElement;
37 /** Sets the value for role on the <main> element */
38 role?: string;
39 /** an id to use for the [role="main"] element */
40 mainContainerId?: string;
41 /** tabIndex to use for the [role="main"] element, null to unset it */
42 mainTabIndex?: number | null;
43 /**
44 * If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into
45 * the sidebar component or add a callback onNavToggle function into the PageHeader component
46 */
47 isManagedSidebar?: boolean;
48 /** Flag indicating if tertiary nav width should be limited */
49 isTertiaryNavWidthLimited?: boolean;
50 /**
51 * If true, the managed sidebar is initially open for desktop view
52 */
53 defaultManagedSidebarIsOpen?: boolean;
54 /**
55 * Can add callback to be notified when resize occurs, for example to set the sidebar isNav prop to false for a width < 768px
56 * Returns object { mobileView: boolean, windowSize: number }
57 */
58 onPageResize?: (object: any) => void;
59 /**
60 * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
61 * You can override the default getBreakpoint function to return breakpoints at different sizes than the default
62 * You can view the default getBreakpoint function here:
63 * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
64 */
65 getBreakpoint?: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
66 /** Breadcrumb component for the page */
67 breadcrumb?: React.ReactNode;
68 /** Tertiary nav component for the page */
69 tertiaryNav?: React.ReactNode;
70 /** Accessible label, can be used to name main section */
71 mainAriaLabel?: string;
72 /** Flag indicating if the tertiaryNav should be in a group */
73 isTertiaryNavGrouped?: boolean;
74 /** Flag indicating if the breadcrumb should be in a group */
75 isBreadcrumbGrouped?: boolean;
76 /** Additional content of the group */
77 additionalGroupedContent?: React.ReactNode;
78 /** Additional props of the group */
79 groupProps?: PageGroupProps;
80}
81export interface PageState {
82 desktopIsNavOpen: boolean;
83 mobileIsNavOpen: boolean;
84 mobileView: boolean;
85 width: number;
86}
87export declare class Page extends React.Component<PageProps, PageState> {
88 static displayName: string;
89 static defaultProps: PageProps;
90 mainRef: React.RefObject<HTMLDivElement>;
91 pageRef: React.RefObject<HTMLDivElement>;
92 observer: any;
93 constructor(props: PageProps);
94 componentDidMount(): void;
95 componentWillUnmount(): void;
96 getWindowWidth: () => number;
97 isMobile: () => boolean;
98 resize: () => void;
99 handleResize: (...args: any[]) => void;
100 handleMainClick: () => void;
101 onNavToggleMobile: () => void;
102 onNavToggleDesktop: () => void;
103 render(): JSX.Element;
104}
105//# sourceMappingURL=Page.d.ts.map
\No newline at end of file