1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/Page/page';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
|
6 | import { debounce, canUseDOM } from '../../helpers/util';
|
7 | import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
|
8 | import { PageGroup } from './PageGroup';
|
9 | import { getResizeObserver } from '../../helpers/resizeObserver';
|
10 | import { getBreakpoint } from '../../helpers/util';
|
11 | export var PageLayouts;
|
12 | (function (PageLayouts) {
|
13 | PageLayouts["vertical"] = "vertical";
|
14 | PageLayouts["horizontal"] = "horizontal";
|
15 | })(PageLayouts || (PageLayouts = {}));
|
16 | export const pageContextDefaults = {
|
17 | isManagedSidebar: false,
|
18 | isNavOpen: false,
|
19 | onNavToggle: () => null,
|
20 | width: null,
|
21 | getBreakpoint
|
22 | };
|
23 | export const PageContext = React.createContext(pageContextDefaults);
|
24 | export const PageContextProvider = PageContext.Provider;
|
25 | export const PageContextConsumer = PageContext.Consumer;
|
26 | export class Page extends React.Component {
|
27 | constructor(props) {
|
28 | super(props);
|
29 | this.mainRef = React.createRef();
|
30 | this.pageRef = React.createRef();
|
31 | this.observer = () => { };
|
32 | this.getWindowWidth = () => {
|
33 | if (canUseDOM) {
|
34 | return this.pageRef.current ? this.pageRef.current.clientWidth : window.innerWidth;
|
35 | }
|
36 | else {
|
37 | return 1200;
|
38 | }
|
39 | };
|
40 | this.isMobile = () =>
|
41 |
|
42 | this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10);
|
43 | this.resize = () => {
|
44 | const { onPageResize } = this.props;
|
45 | const mobileView = this.isMobile();
|
46 | if (onPageResize) {
|
47 | onPageResize({ mobileView, windowSize: this.getWindowWidth() });
|
48 | }
|
49 | if (mobileView !== this.state.mobileView) {
|
50 | this.setState({ mobileView });
|
51 | }
|
52 | this.pageRef.current && this.setState({ width: this.pageRef.current.clientWidth });
|
53 | };
|
54 | this.handleResize = debounce(this.resize, 250);
|
55 | this.handleMainClick = () => {
|
56 | if (this.isMobile() && this.state.mobileIsNavOpen && this.mainRef.current) {
|
57 | this.setState({ mobileIsNavOpen: false });
|
58 | }
|
59 | };
|
60 | this.onNavToggleMobile = () => {
|
61 | this.setState(prevState => ({
|
62 | mobileIsNavOpen: !prevState.mobileIsNavOpen
|
63 | }));
|
64 | };
|
65 | this.onNavToggleDesktop = () => {
|
66 | this.setState(prevState => ({
|
67 | desktopIsNavOpen: !prevState.desktopIsNavOpen
|
68 | }));
|
69 | };
|
70 | const { isManagedSidebar, defaultManagedSidebarIsOpen } = props;
|
71 | const managedSidebarOpen = !isManagedSidebar ? true : defaultManagedSidebarIsOpen;
|
72 | this.state = {
|
73 | desktopIsNavOpen: managedSidebarOpen,
|
74 | mobileIsNavOpen: false,
|
75 | mobileView: false,
|
76 | width: null
|
77 | };
|
78 | }
|
79 | componentDidMount() {
|
80 | const { isManagedSidebar, onPageResize } = this.props;
|
81 | if (isManagedSidebar || onPageResize) {
|
82 | this.observer = getResizeObserver(this.pageRef.current, this.handleResize);
|
83 | const currentRef = this.mainRef.current;
|
84 | if (currentRef) {
|
85 | currentRef.addEventListener('mousedown', this.handleMainClick);
|
86 | currentRef.addEventListener('touchstart', this.handleMainClick);
|
87 | }
|
88 |
|
89 | this.resize();
|
90 | }
|
91 | }
|
92 | componentWillUnmount() {
|
93 | const { isManagedSidebar, onPageResize } = this.props;
|
94 | if (isManagedSidebar || onPageResize) {
|
95 | this.observer();
|
96 | const currentRef = this.mainRef.current;
|
97 | if (currentRef) {
|
98 | currentRef.removeEventListener('mousedown', this.handleMainClick);
|
99 | currentRef.removeEventListener('touchstart', this.handleMainClick);
|
100 | }
|
101 | }
|
102 | }
|
103 | render() {
|
104 | const _a = this.props, { breadcrumb, isBreadcrumbWidthLimited, className, children, header, sidebar, notificationDrawer, isNotificationDrawerExpanded, onNotificationDrawerExpand, isTertiaryNavWidthLimited, skipToContent, role, mainContainerId, isManagedSidebar,
|
105 |
|
106 | defaultManagedSidebarIsOpen,
|
107 |
|
108 | onPageResize, getBreakpoint, mainAriaLabel, mainTabIndex, tertiaryNav, isTertiaryNavGrouped, isBreadcrumbGrouped, additionalGroupedContent, groupProps } = _a, rest = __rest(_a, ["breadcrumb", "isBreadcrumbWidthLimited", "className", "children", "header", "sidebar", "notificationDrawer", "isNotificationDrawerExpanded", "onNotificationDrawerExpand", "isTertiaryNavWidthLimited", "skipToContent", "role", "mainContainerId", "isManagedSidebar", "defaultManagedSidebarIsOpen", "onPageResize", "getBreakpoint", "mainAriaLabel", "mainTabIndex", "tertiaryNav", "isTertiaryNavGrouped", "isBreadcrumbGrouped", "additionalGroupedContent", "groupProps"]);
|
109 | const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width } = this.state;
|
110 | const context = {
|
111 | isManagedSidebar,
|
112 | onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
|
113 | isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen,
|
114 | width,
|
115 | getBreakpoint
|
116 | };
|
117 | let nav = null;
|
118 | if (tertiaryNav && isTertiaryNavWidthLimited) {
|
119 | nav = (React.createElement("div", { className: css(styles.pageMainNav, styles.modifiers.limitWidth) },
|
120 | React.createElement("div", { className: css(styles.pageMainBody) }, tertiaryNav)));
|
121 | }
|
122 | else if (tertiaryNav) {
|
123 | nav = React.createElement("div", { className: css(styles.pageMainNav) }, tertiaryNav);
|
124 | }
|
125 | let crumb = null;
|
126 | if (breadcrumb && isBreadcrumbWidthLimited) {
|
127 | crumb = (React.createElement("section", { className: css(styles.pageMainBreadcrumb, styles.modifiers.limitWidth) },
|
128 | React.createElement("div", { className: css(styles.pageMainBody) }, breadcrumb)));
|
129 | }
|
130 | else if (breadcrumb) {
|
131 | crumb = React.createElement("section", { className: css(styles.pageMainBreadcrumb) }, breadcrumb);
|
132 | }
|
133 | const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
|
134 | const group = isGrouped ? (React.createElement(PageGroup, Object.assign({}, groupProps),
|
135 | isTertiaryNavGrouped && nav,
|
136 | isBreadcrumbGrouped && crumb,
|
137 | additionalGroupedContent)) : null;
|
138 | const main = (React.createElement("main", { ref: this.mainRef, role: role, id: mainContainerId, className: css(styles.pageMain), tabIndex: mainTabIndex, "aria-label": mainAriaLabel },
|
139 | group,
|
140 | !isTertiaryNavGrouped && nav,
|
141 | !isBreadcrumbGrouped && crumb,
|
142 | children));
|
143 | const panelContent = React.createElement(DrawerPanelContent, null, notificationDrawer);
|
144 | return (React.createElement(PageContextProvider, { value: context },
|
145 | React.createElement("div", Object.assign({ ref: this.pageRef }, rest, { className: css(styles.page, width !== null && 'pf-m-resize-observer', width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`, className) }),
|
146 | skipToContent,
|
147 | header,
|
148 | sidebar,
|
149 | notificationDrawer && (React.createElement("div", { className: css(styles.pageDrawer) },
|
150 | React.createElement(Drawer, { isExpanded: isNotificationDrawerExpanded, onExpand: onNotificationDrawerExpand },
|
151 | React.createElement(DrawerContent, { panelContent: panelContent },
|
152 | React.createElement(DrawerContentBody, null, main))))),
|
153 | !notificationDrawer && main)));
|
154 | }
|
155 | }
|
156 | Page.displayName = 'Page';
|
157 | Page.defaultProps = {
|
158 | isManagedSidebar: false,
|
159 | isBreadcrumbWidthLimited: false,
|
160 | defaultManagedSidebarIsOpen: true,
|
161 | onPageResize: () => null,
|
162 | mainTabIndex: -1,
|
163 | isNotificationDrawerExpanded: false,
|
164 | onNotificationDrawerExpand: () => null,
|
165 | getBreakpoint
|
166 | };
|
167 |
|
\ | No newline at end of file |