let NavBar API work with OffCanvasTrigger, resolves #40

robyth · May 4, 2016 · a79fe65 · a79fe65
1 parent b56c31c
commit a79fe65
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 10 deletions.
diff --git a/docs/navbar/api.md b/docs/navbar/api.md
@@ -28,6 +28,7 @@ const leftNav = [
     component: 'a', // 默认为 `a`
     title: 'Left',
     href: '',
+    isCloning: false, // 可选，如果 component 为 OffCanvas 之类的组件时，设为 true
     props: {
     }, // 其他要传递的属性
   },

diff --git a/kitchen-sink/pages/NavBarExample.js b/kitchen-sink/pages/NavBarExample.js
@@ -4,6 +4,8 @@ import {
   Group,
   NavBar,
   amStyles,
+  OffCanvas,
+  OffCanvasTrigger,
 } from 'amazeui-touch';
 
 const clickHandler = (item, e) => {
@@ -40,6 +42,19 @@ const dataRight = {
   onAction: clickHandler,
 };
 
+var withOffCanvas = {
+  title: 'With OffCanvas',
+  rightNav: [{
+    icon: 'bars',
+    title: 'Menu',
+    component: OffCanvasTrigger,
+    isCloning: true, // IMPORTANT
+    props: {
+      offCanvas: <OffCanvas><p>OffCanvas 内容</p></OffCanvas>,
+    }
+  }],
+};
+
 const NavBarExample = React.createClass({
   renderStyles(style, index) {
     return (
@@ -87,6 +102,15 @@ const NavBarExample = React.createClass({
             titleOnLeft
           />
         </Group>
+
+        <Group
+          header="With OffCanvas"
+        >
+          <NavBar
+            {...withOffCanvas}
+            amStyle="primary"
+          />
+        </Group>
       </Container>
     );
   }

diff --git a/src/js/NavBar.js b/src/js/NavBar.js
@@ -55,14 +55,17 @@ const NavBar = React.createClass({
   renderNavItem(item, index) {
     let Component = item.component || 'a';
     let itemProps = item.props || {};
-    let navTitle = item.title ? (
+    let children = [];
+
+    item.title && children.push(
       <span
         className={this.prefixClass('nav-title')}
         key='title'
       >
         {item.title}
       </span>
-    ) : null;
+    );
+
     let navIconKey = 'icon';
     let navIcon = item.customIcon ? (
       <img
@@ -79,15 +82,36 @@ const NavBar = React.createClass({
       />
     ) : null;
 
+    navIcon && children.push(navIcon);
+
+    let {
+      itemClassName,
+      ...otherProps
+    } = itemProps;
+    let props = {
+      href: item.href,
+      key: 'navbarNavItem' + index,
+      onClick: this.props.onAction.bind(this, item),
+      ...otherProps,
+      className: classNames(this.prefixClass('nav-item'), itemClassName),
+    };
+    let renderChildren = () => {
+      // #40
+      // if `Component` is a cloning type like OffCanvasTrigger,
+      // this should return a element with the className.
+      // TBC: should other props be transferred to the span element?
+      return item.isCloning ? (
+        <span
+          className={props.className}
+        >
+          {children}
+        </span>
+      ) : children;
+    };
+
     return (
-      <Component
-        href={item.href}
-        key={'navbarNavItem' + index}
-        onClick={this.props.onAction.bind(this, item)}
-        {...itemProps}
-        className={classNames(this.prefixClass('nav-item'), itemProps.className)}
-      >
-        {[navTitle, navIcon]}
+      <Component {...props}>
+        {renderChildren()}
       </Component>
     );
   },