Merge pull request #68 from 5monkeys/feature/application-container

Enable passing a component that wraps the pages
5monkeys · Sep 21, 2021 · b7200d0 · b7200d0
2 parents 4579912 + 8c7df36
commit b7200d0
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@ ReactDOM.render(
 | **logLevel** | String, Object | _WARN_ | INFO, DEBUG, WARN, ERROR, OFF |
 | **prefix** | String | _""_ |  |
 | **customizeContext** | Function | _undefined_ |  |
+| **container** | Function | _React.Fragment_ |  |
 
 ### api
 
@@ -172,6 +173,17 @@ Prefix sets the base url for the router. Use this if the admin app is mounted on
 
 A function that receives the standard `AdminContext` and returns a new context object.
 
+## container
+
+A function (React component) that resides under the AdminContext but above pages. Useful for wrapping the entire app in a custom context so data can persist between pages.
+
+```jsx
+<Bananas.App
+  // ...
+  container={MyCustomContainer}
+/>
+```
+
 ## Browser support
 
 The code shipped to npm uses modern JavaScript, supported natively by all evergreen browsers. If you need deeper browser support, you need to configure your build system to transpile and polyfill `node_modules/` code.

diff --git a/src/Admin.js b/src/Admin.js
@@ -70,6 +70,7 @@ class Admin extends React.Component {
       collapsable: !(props.permanent || false),
       collapsed: props.collapsed || false,
       dense: props.dense || false,
+      container: props.container || undefined,
     };
 
     // Initialize GUI settings
@@ -531,7 +532,7 @@ class Admin extends React.Component {
 
   render() {
     const { PageComponent } = this;
-    const { classes, pageTheme, loginForm } = this.props;
+    const { classes, pageTheme, loginForm, container: Container } = this.props;
     const { booting, booted, context, settings, pageProps } = this.state;
     const { user } = context;
 
@@ -548,42 +549,44 @@ class Admin extends React.Component {
         >
           {booted ? (
             <AdminContext.Provider value={context}>
-              {user ? (
-                <>
-                  <NavBar
-                    variant={isHorizontalLayout ? "drawer" : "appbar"}
-                    dense={settings.dense}
-                    permanent={!settings.collapsable}
-                    collapsed={settings.collapsed}
-                    nav={
-                      settings.icons
-                        ? this.props.nav
-                        : Array.isArray(this.props.nav)
-                        ? this.props.nav
-                        : this.props.nav
-                        ? Object.keys(this.props.nav)
-                        : null
-                    }
+              <Container>
+                {user ? (
+                  <>
+                    <NavBar
+                      variant={isHorizontalLayout ? "drawer" : "appbar"}
+                      dense={settings.dense}
+                      permanent={!settings.collapsable}
+                      collapsed={settings.collapsed}
+                      nav={
+                        settings.icons
+                          ? this.props.nav
+                          : Array.isArray(this.props.nav)
+                          ? this.props.nav
+                          : this.props.nav
+                          ? Object.keys(this.props.nav)
+                          : null
+                      }
+                      logo={this.props.logo}
+                      title={this.props.title}
+                      branding={this.props.branding}
+                      version={this.props.version}
+                    />
+                    <Page
+                      theme={pageTheme}
+                      component={PageComponent}
+                      controller={this.controllers.PageLoadController}
+                      {...pageProps}
+                    />
+                  </>
+                ) : (
+                  <LoginPage
+                    form={loginForm}
+                    logger={logger}
                     logo={this.props.logo}
                     title={this.props.title}
-                    branding={this.props.branding}
-                    version={this.props.version}
                   />
-                  <Page
-                    theme={pageTheme}
-                    component={PageComponent}
-                    controller={this.controllers.PageLoadController}
-                    {...pageProps}
-                  />
-                </>
-              ) : (
-                <LoginPage
-                  form={loginForm}
-                  logger={logger}
-                  logo={this.props.logo}
-                  title={this.props.title}
-                />
-              )}
+                )}
+              </Container>
             </AdminContext.Provider>
           ) : (
             <LoadingScreen
@@ -641,6 +644,11 @@ class App extends React.Component {
     editableSettings: PropTypes.bool,
     customizeContext: PropTypes.func,
     customizeUser: PropTypes.func,
+    container: PropTypes.oneOfType([
+      PropTypes.symbol,
+      PropTypes.func,
+      PropTypes.node,
+    ]),
   };
 
   static defaultProps = {
@@ -664,6 +672,7 @@ class App extends React.Component {
     editableSettings: false,
     customizeContext: undefined,
     customizeUser: undefined,
+    container: React.Fragment,
   };
 
   render() {

diff --git a/tests/app.test.js b/tests/app.test.js
@@ -551,3 +551,17 @@ test("Can render logo as component", async () => {
 
   expect(getByTestId("custom_logo")).toBeTruthy();
 });
+
+const TestContainer = ({ children }) => {
+  return <div data-testid="custom_container">{children}</div>;
+};
+
+test("Can render using an app container", async () => {
+  const { getByTestId } = await renderApp({
+    props: {
+      container: TestContainer,
+    },
+  });
+
+  expect(getByTestId("custom_container")).toBeTruthy();
+});