[changed] flatten NavBar nav data format

robyth · May 12, 2016 · eccf8e5 · eccf8e5
1 parent 470741e
commit eccf8e5
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 39 deletions.
diff --git a/docs/navbar/api.md b/docs/navbar/api.md
@@ -28,9 +28,10 @@ const leftNav = [
     component: 'a', // 默认为 `a`
     title: 'Left',
     href: '',
-    isCloning: false, // 可选，如果 component 为 OffCanvas 之类的组件时，设为 true
-    props: {
-    }, // 其他要传递的属性
+    customIcon: '', // 自定义图标 URL
+    icon: '', // 图标名称，如果设置了自定义图标，则 `icon` 失效
+    isClone: false, // 可选，如果 component 为 OffCanvasTrigger 之类的组件时，设为 true
+    //... 其他属性
   },
 ];
 ```
@@ -79,12 +80,12 @@ if (/android/i.test(ua) && /ucbrowser/i.test(ua)) {
 }
 ```
 
-上面的 JS 需要开发者手动添加到自己的项目中（以下样式已经集成在 CSS 文件中，）。
-
 ```css
 .ua-android-uc .navbar-nav-itme {
   display: inline-block;
 }
 ```
 
+由于测试面有限，上面的 JS 暂未添加到源码， 需要开发者手动添加到项目中（样式已经集成在 CSS 文件中，）。
+
 ## 示例
diff --git a/kitchen-sink/app.js b/kitchen-sink/app.js
@@ -90,10 +90,7 @@ const Detail = React.createClass({
       component: Link,
       icon: 'left-nav',
       title: '返回',
-      props: {
-        to: '/',
-        // onClick: () => this.props.history.goBack(),
-      }
+      to: '/',
     };
 
     return (

diff --git a/kitchen-sink/pages/NavBarExample.js b/kitchen-sink/pages/NavBarExample.js
@@ -48,10 +48,8 @@ var withOffCanvas = {
     icon: 'bars',
     title: 'Menu',
     component: OffCanvasTrigger,
-    isCloning: true, // IMPORTANT
-    props: {
-      offCanvas: <OffCanvas><p>OffCanvas 内容</p></OffCanvas>,
-    }
+    isClone: true, // IMPORTANT
+    offCanvas: <OffCanvas><p>OffCanvas 内容</p></OffCanvas>,
   }],
 };
 

diff --git a/src/js/NavBar.js b/src/js/NavBar.js
@@ -54,16 +54,33 @@ const NavBar = React.createClass({
   },
 
   renderNavItem(item, index) {
-    let Component = item.component || 'a';
-    let itemProps = item.props || {};
+    let {
+      component: Component,
+      title,
+      customIcon,
+      icon,
+      isClone,
+      // href,
+      className,
+      ...otherProps,
+    } = item;
     let children = [];
+    let itemClassName = classNames(this.prefixClass('nav-item'), className);
+    let itemProps = {
+      key: 'navbarNavItem' + index,
+      onClick: this.props.onAction.bind(this, item),
+      ...otherProps,
+      className: itemClassName,
+    };
 
-    item.title && children.push(
+    Component = Component || 'a';
+
+    title && children.push(
       <span
         className={this.prefixClass('nav-title')}
         key='title'
       >
-        {item.title}
+        {title}
       </span>
     );
 
@@ -73,19 +90,19 @@ const NavBar = React.createClass({
       // affected by order and icon order changing
       // .navbar-nav-title ~ .navbar-icon not works
       // add an className to set styles
-      [this.prefixClass('icon-sibling-of-title')]: !!item.title,
+      [this.prefixClass('icon-sibling-of-title')]: !!title,
     };
-    let navIcon = item.customIcon ? (
+    let navIcon = customIcon ? (
       <img
-        src={item.customIcon}
+        src={customIcon}
         className={classNames(iconClassName)}
-        alt={item.title || null}
+        alt={title || null}
         key={navIconKey}
       />
-    ) : item.icon ? (
+    ) : icon ? (
       <Icon
         className={classNames(iconClassName)}
-        name={item.icon}
+        name={icon}
         key={navIconKey}
       />
     ) : null;
@@ -97,34 +114,23 @@ const NavBar = React.createClass({
       Array.prototype[action].call(children, navIcon);
     }
     // 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,
+      // if `Component` is a clone type like OffCanvasTrigger,
       // this should return a element with the className.
       // TBC: should other props be transferred to the span element?
-      return item.isCloning ? (
+      return isClone ? (
         <span
-          className={props.className}
+          className={itemClassName}
         >
           {children}
         </span>
       ) : children;
     };
 
     return (
-      <Component {...props}>
+      <Component {...itemProps}>
         {renderChildren()}
       </Component>
     );