feat(SiteWrapper): Header and nav shorthand props

Rather than having all of the header and nav props individually they are now grouped into headerProps and navProps
tabler · May 15, 2018 · 61362fa · 61362fa
1 parent ea73d61
commit 61362fa
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 35 deletions.
diff --git a/example/src/SiteWrapper.react.js b/example/src/SiteWrapper.react.js
@@ -117,16 +117,33 @@ const notificationsObjects = [
   },
 ];
 
+const accountDropdownProps = {
+  avatarURL: "./demo/faces/female/25.jpg",
+  name: "Jane Pearson",
+  description: "Administrator",
+  options: [
+    { icon: "user", value: "Profile" },
+    { icon: "settings", value: "Settings" },
+    { icon: "mail", value: "Inbox", badge: "6" },
+    { icon: "send", value: "Message" },
+    { isDivider: true },
+    { icon: "help-circle", value: "Need help?" },
+    { icon: "log-out", value: "Sign out" },
+  ],
+};
+
 class SiteWrapper extends React.Component<Props, void> {
   render(): React.Node {
     return (
       <Site.Wrapper
-        href={"/"}
-        alt="Tabler React"
-        imageURL="./demo/brand/tabler.svg"
-        withNotifications={true}
-        notificationsObjects={notificationsObjects}
-        itemsObjects={navBarItems}
+        headerProps={{
+          href: "/",
+          alt: "Tabler React",
+          imageURL: "./demo/brand/tabler.svg",
+          notificationsTray: { notificationsObjects },
+          accountDropdown: accountDropdownProps,
+        }}
+        navProps={{ itemsObjects: navBarItems }}
       >
         {this.props.children}
       </Site.Wrapper>

diff --git a/src/components/Site/SiteWrapper.react.js b/src/components/Site/SiteWrapper.react.js
@@ -6,40 +6,24 @@ import { Page, Site } from "../";
 import type { Props as SiteHeaderProps } from "./SiteHeader.react";
 import type { Props as SiteNavProps } from "./SiteNav.react";
 
-type Props = SiteHeaderProps &
-  SiteNavProps & {|
-    +children: React.Node,
-  |};
+type Props = {|
+  +headerProps: SiteHeaderProps,
+  +navProps: SiteNavProps,
+  +children: React.Node,
+|};
 
 function SiteWrapper(props: Props): React.Node {
-  const {
-    href,
-    alt,
-    imageURL,
-    withNotifications,
-    notificationsObjects,
-    items: navItems,
-    itemsObjects: navItemsObjects,
-    withSearchForm,
-    rightColumnComponent,
-  } = props;
+  const { headerProps, navProps, children } = props;
+
+  const header = React.createElement(Site.Header, headerProps);
+  const nav = React.createElement(Site.Nav, navProps);
+
   return (
     <Page>
       <Page.Main>
-        <Site.Header
-          href={href}
-          alt={alt}
-          imageURL={imageURL}
-          withNotifications={withNotifications}
-          notificationsObjects={notificationsObjects}
-        />
-        <Site.Nav
-          items={navItems}
-          itemsObjects={navItemsObjects}
-          withSearchForm={withSearchForm}
-          rightColumnComponent={rightColumnComponent}
-        />
-        {props.children}
+        {header}
+        {nav}
+        {children}
       </Page.Main>
       <Site.Footer />
     </Page>