PF4 - use context api in page component (#2208)

* use context api in page component * fix linter issue
patternfly · Jun 19, 2019 · 1251326 · 1251326
1 parent 012059d
commit 1251326
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 68 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Page/Page.js b/packages/patternfly-4/react-core/src/components/Page/Page.js
@@ -1,4 +1,4 @@
-import React, { cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
@@ -10,6 +10,10 @@ export const PageLayouts = {
   horizontal: 'horizontal'
 };
 
+const PageContext = React.createContext({});
+export const PageContextProvider = PageContext.Provider;
+export const PageContextConsumer = PageContext.Consumer;
+
 const propTypes = {
   /** Content rendered inside the main section of the page layout (e.g. <PageSection />) */
   children: PropTypes.node,
@@ -101,26 +105,25 @@ class Page extends React.Component {
     } = this.props;
     const { mobileView, mobileIsNavOpen, desktopIsNavOpen } = this.state;
 
+    const context = {
+      isManagedSidebar,
+      onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
+      isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen
+    };
+
     return (
-      <div {...rest} className={css(styles.page, className)}>
-        {skipToContent}
-        {isManagedSidebar
-          ? cloneElement(header, {
-              onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
-              isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen
-            })
-          : header}
-        {isManagedSidebar
-          ? cloneElement(sidebar, {
-              isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen
-            })
-          : sidebar}
-        <main role="main" className={css(styles.pageMain)}>
-          {breadcrumb && <section className={css(styles.pageMainBreadcrumb)}>{breadcrumb}</section>}
-          {skipToContent && <a id={skipToContent.props.href.replace(/#*/, '')} />}
-          {children}
-        </main>
-      </div>
+      <PageContextProvider value={context}>
+        <div {...rest} className={css(styles.page, className)}>
+          {skipToContent}
+          {header}
+          {sidebar}
+          <main role="main" className={css(styles.pageMain)}>
+            {breadcrumb && <section className={css(styles.pageMainBreadcrumb)}>{breadcrumb}</section>}
+            {skipToContent && <a id={skipToContent.props.href.replace(/#*/, '')} />}
+            {children}
+          </main>
+        </div>
+      </PageContextProvider>
     );
   }
 }

diff --git a/packages/patternfly-4/react-core/src/components/Page/PageHeader.js b/packages/patternfly-4/react-core/src/components/Page/PageHeader.js
@@ -4,6 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { BarsIcon } from '@patternfly/react-icons';
 import { Button, ButtonVariant } from '../../components/Button';
+import { PageContextConsumer } from './Page';
 
 const propTypes = {
   /** Additional classes added to the page header */
@@ -60,42 +61,51 @@ const PageHeader = ({
   'aria-label': ariaLabel,
   ...props
 }) => (
-  <header role="banner" className={css(styles.pageHeader, className)} {...props}>
-    {(showNavToggle || logo) && (
-      <div className={css(styles.pageHeaderBrand)}>
-        {showNavToggle && (
-          <div className={css(styles.pageHeaderBrandToggle)}>
-            <Button
-              id="nav-toggle"
-              onClick={onNavToggle}
-              aria-label={ariaLabel}
-              aria-controls="page-sidebar"
-              aria-expanded={isNavOpen ? 'true' : 'false'}
-              variant={ButtonVariant.plain}
-            >
-              <BarsIcon />
-            </Button>
-          </div>
-        )}
-        {logo && (
-          <LogoComponent className={css(styles.pageHeaderBrandLink)} {...logoProps}>
-            {logo}
-          </LogoComponent>
-        )}
-      </div>
-    )}
-    {/* Hide for now until we have the context selector component */}
-    {/* <div className={css(styles.pageHeaderSelector)}>
-      pf-c-context-selector
-    </div> */}
-    {topNav && <div className={css(styles.pageHeaderNav)}>{topNav}</div>}
-    {(toolbar || avatar) && (
-      <div className={css(styles.pageHeaderTools)}>
-        {toolbar}
-        {avatar}
-      </div>
-    )}
-  </header>
+  <PageContextConsumer>
+    {({ isManagedSidebar, onNavToggle: managedOnNavToggle, isNavOpen: managedIsNavOpen }) => {
+      const navToggle = isManagedSidebar ? managedOnNavToggle : onNavToggle;
+      const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
+
+      return (
+        <header role="banner" className={css(styles.pageHeader, className)} {...props}>
+          {(showNavToggle || logo) && (
+            <div className={css(styles.pageHeaderBrand)}>
+              {showNavToggle && (
+                <div className={css(styles.pageHeaderBrandToggle)}>
+                  <Button
+                    id="nav-toggle"
+                    onClick={navToggle}
+                    aria-label={ariaLabel}
+                    aria-controls="page-sidebar"
+                    aria-expanded={navOpen ? 'true' : 'false'}
+                    variant={ButtonVariant.plain}
+                  >
+                    <BarsIcon />
+                  </Button>
+                </div>
+              )}
+              {logo && (
+                <LogoComponent className={css(styles.pageHeaderBrandLink)} {...logoProps}>
+                  {logo}
+                </LogoComponent>
+              )}
+            </div>
+          )}
+          {/* Hide for now until we have the context selector component */}
+          {/* <div className={css(styles.pageHeaderSelector)}>
+            pf-c-context-selector
+          </div> */}
+          {topNav && <div className={css(styles.pageHeaderNav)}>{topNav}</div>}
+          {(toolbar || avatar) && (
+            <div className={css(styles.pageHeaderTools)}>
+              {toolbar}
+              {avatar}
+            </div>
+          )}
+        </header>
+      );
+    }}
+  </PageContextConsumer>
 );
 
 PageHeader.propTypes = propTypes;

diff --git a/packages/patternfly-4/react-core/src/components/Page/PageSidebar.js b/packages/patternfly-4/react-core/src/components/Page/PageSidebar.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
+import { PageContextConsumer } from './Page';
 
 const propTypes = {
   /** Additional classes added to the page sidebar */
@@ -21,18 +22,26 @@ const defaultProps = {
 };
 
 const PageSidebar = ({ className, nav, isNavOpen, ...props }) => (
-  <div
-    id="page-sidebar"
-    className={css(
-      styles.pageSidebar,
-      isNavOpen && styles.modifiers.expanded,
-      !isNavOpen && styles.modifiers.collapsed,
-      className
-    )}
-    {...props}
-  >
-    <div className={css(styles.pageSidebarBody)}>{nav}</div>
-  </div>
+  <PageContextConsumer>
+    {({ isManagedSidebar, isNavOpen: managedIsNavOpen }) => {
+      const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
+
+      return (
+        <div
+          id="page-sidebar"
+          className={css(
+            styles.pageSidebar,
+            navOpen && styles.modifiers.expanded,
+            !navOpen && styles.modifiers.collapsed,
+            className
+          )}
+          {...props}
+        >
+          <div className={css(styles.pageSidebarBody)}>{nav}</div>
+        </div>
+      );
+    }}
+  </PageContextConsumer>
 );
 
 PageSidebar.propTypes = propTypes;