adjust NavBar for some QIPA browsers like UC(Android), see #12

docs/navbar/api.md

@@ -54,5 +54,37 @@ const leftNav = [
 
 链接点击时的处理函数，第一个参数为链接数据对象。
 
+## 兼容性问题
+
+### Android UC
+
+**问题描述**：
+
+NavBar 两侧的链接（`.navbar-nav-item`）应用 `display: inline-flex` 以后，在部分只支持 09 版 flexbox 的规范的浏览器中宽度异常（有时比实际内容宽度宽一些，有时呈块级显示）。
+
+**测试环境**：
+
+- 设备：MI 4
+- 系统：Android 6.0.1 / MIUI 7 6.4.14 开发版
+- 浏览器：UCBrowser 10.9.8.738
+
+**解决方式**：
+
+由于 UC 浏览器在[特征检测中返回的数据不准确](https://codepen.io/anon/pen/WQLePg)，只能通过 UA 识别，然后作回退处理。
+
+```javascript
+var ua = navigator.userAgent;
+if (/android/i.test(ua) && /ucbrowser/i.test(ua)) {
+  document.documentElement.className += ' ua-android-uc';
+}
+```
+
+上面的 JS 需要开发者手动添加到自己的项目中（以下样式已经集成在 CSS 文件中，）。
+
+```css
+.ua-android-uc .navbar-nav-itme {
+  display: inline-block;
+}
+```
 
 ## 示例

kitchen-sink/index.html

@@ -64,5 +64,11 @@
   <div id="sk-root" style="height: 100%; width: 100%; overflow: hidden;">
   </div>
   <script src="app__ENV__.js"></script>
+  <script>
+    var ua = navigator.userAgent;
+    if (/android/i.test(ua) && /ucbrowser/i.test(ua)) {
+      document.documentElement.className += ' ua-android-uc';
+    }
+  </script>
 </body>
 </html>

src/js/NavBar.js

@@ -41,6 +41,7 @@ const NavBar = React.createClass({
 
   renderNav(position) {
     let nav = this.props[position + 'Nav'];
+    this._navPosition = position;
 
     return nav && Array.isArray(nav) ? (
       <div
@@ -66,23 +67,36 @@ const NavBar = React.createClass({
       </span>
     );
 
-    let navIconKey = 'icon';
+    const navIconKey = 'icon';
+    const iconClassName = {
+      [this.prefixClass('icon')]: true,
+      // 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,
+    };
     let navIcon = item.customIcon ? (
       <img
         src={item.customIcon}
-        className={this.prefixClass('icon')}
+        className={classNames(iconClassName)}
         alt={item.title || null}
         key={navIconKey}
       />
     ) : item.icon ? (
       <Icon
-        className={this.prefixClass('icon')}
+        className={classNames(iconClassName)}
         name={item.icon}
         key={navIconKey}
       />
     ) : null;
 
-    navIcon && children.push(navIcon);
+    // adjust title and icon order for Android UC
+    // @see ../scss/helper/_mixins.scss `navbar-item-android-uc-fallback` mixin
+    if (navIcon) {
+      const action = this._navPosition === 'left' ? 'unshift' : 'push';
+      Array.prototype[action].call(children, navIcon);
+    }
+    // navIcon && children.push(navIcon);
 
     let {
       itemClassName,

src/scss/_variables.scss

@@ -117,6 +117,11 @@ $z-index-popover: $z-index-base + 30 !default;
 // Components Variables
 // -----------------------------------------------------------------------------
 
+// Compatibility
+// - set NavBar & Col width for browsers which don't support flex-basis
+// -----------------------------------------------------------------------------
+$legacyFlexBoxSupport: true !default;
+
 // Base
 // -----------------------------------------------------------------------------
 $body-background: #f4f4f4 !default;

src/scss/components/_navbar.scss

@@ -69,24 +69,33 @@
   display: inline-flex;
   align-items: center;
   cursor: pointer;
+  @include navbar-item-android-uc-fallback();
 
   & + & {
     margin-left: rem-calc(10);
   }
 }
 
+/*
 .#{$navbar-prefix}-nav-title {
   & ~ .#{$navbar-prefix}-icon {
     font-size: inherit;
     line-height: normal;
   }
 }
+*/
+
+.#{$navbar-prefix}-icon-sibling-of-title {
+  font-size: inherit;
+  line-height: normal;
+}
 
 
 // Order: left | center | right
 .#{$navbar-class-left} {
   order: 1;
   flex: 0 0 $navbar-side-width;
+  @include flex-basis-fallback($navbar-side-width);
 
   .#{$navbar-prefix}-icon {
     order: -1;
@@ -97,12 +106,14 @@
   order: 2;
   flex: 0 0 $navbar-center-width;
   text-align: center;
+  @include flex-basis-fallback($navbar-center-width);
 }
 
 .#{$navbar-class-right} {
   order: 3;
   flex: 0 0 $navbar-side-width;
   text-align: right;
+  @include flex-basis-fallback($navbar-side-width);
 }
 
 // only left + right

src/scss/helper/_mixins.scss

@@ -166,3 +166,20 @@
 @mixin fixes-flexbox-for-andriod {
   display: block;
 }
+
+// flex-basis fallback
+@mixin flex-basis-fallback($width) {
+  @if $legacyFlexBoxSupport {
+    width: $width;
+  }
+}
+
+// 安卓 UC UA 检测
+// - 解决 NavBar `.navbar-nav-item` 使用 inline-flex 以后宽度异常问题
+// - 测试环境：MI4 / Android 6.0.1 / MIUI 7 6.4.14 开发版
+// - 负面影响: 产生左侧的链接 icon 和 tile 顺序不对（`order` 失效）问题 -> JS 中已调整顺序
+@mixin navbar-item-android-uc-fallback() {
+  .ua-android-uc & {
+    display: inline-block;
+  }
+}