Merge branch 'release/0.16.0'

shoutem · Jun 26, 2017 · e24505f · e24505f
2 parents 11272fc + d58e037
commit e24505f
Show file tree

Hide file tree

Showing 11 changed files with 238 additions and 103 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -8,16 +8,21 @@
   ],
   "parser": "babel-eslint",
   "rules": {
+    "import/no-extraneous-dependencies": 0,
+    "import/extensions": 0,
+    "import/prefer-default-export": 0,
+    "import/no-named-as-default": 0,
     "no-empty-label": 0,
     "no-console": 0,
+    "no-shadow": 0,
     "import/no-unresolved": 0,
     "global-require": 0,
     "no-underscore-dangle": 0,
     "space-before-keywords": 0,
     "space-after-keywords": 0,
     "space-return-throw-case": 0,
+    "react/jsx-filename-extension": 0,
     "react-native/no-unused-styles": 2,
-    "react-native/split-platform-components": 2,
-    "react/prefer-stateless-function": 0,
+    "react-native/split-platform-components": 2
   }
-}
+}
diff --git a/navigation/NavigationBar.js b/navigation/NavigationBar.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
-
-import { NavigationBarView, NavigationBarStyleName } from './NavigationBarView';
 import { DriverShape } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
+import { NavigationBarView, NavigationBarStyleName } from './NavigationBarView';
 
 /**
  * A NavigationBar component that can be used to define
@@ -38,7 +37,6 @@ class NavigationBar extends Component {
 
   constructor(props, context) {
     super(props, context);
-
     this.setNavBarProps(props);
   }
 

diff --git a/navigation/NavigationBarView.js b/navigation/NavigationBarView.js
@@ -176,9 +176,9 @@ class NavigationBarView extends PureComponent {
           // If the backgroundColor is animated, we want to listen for
           // color changes, so that we can update the bar style as the
           // animation runs.
-          this.backgroundListenerId = addAnimatedValueListener(backgroundColor, () =>
-            this.setStatusBarStyleForBackgroundColor(backgroundColor)
-          );
+          this.backgroundListenerId = addAnimatedValueListener(backgroundColor, () => {
+            this.setStatusBarStyleForBackgroundColor(backgroundColor);
+          });
         }
 
         // Set the bar style based on the current background color value
@@ -206,7 +206,7 @@ class NavigationBarView extends PureComponent {
       // if necessary in `setStatusBarStyle`.
       removeAnimatedValueListener(
         this.props.style.container.backgroundColor,
-        this.backgroundListenerId
+        this.backgroundListenerId,
       );
       this.backgroundListenerId = null;
     }
@@ -368,6 +368,14 @@ class NavigationBarView extends PureComponent {
     return null;
   }
 
+  renderBackground() {
+    const { renderBackground } = this.props;
+    if (renderBackground) {
+      return renderBackground(this.props);
+    }
+    return null;
+  }
+
   render() {
     const { scene } = this.props;
     const { style, hidden, child } = this.resolveSceneProps(scene);
@@ -380,6 +388,7 @@ class NavigationBarView extends PureComponent {
 
     return (
       <Animated.View style={[style.container, this.interpolateNavBarStyle()]}>
+        {this.renderBackground()}
         {this.renderLinearGradient()}
         <NavigationHeader
           {...this.createNavigationHeaderProps(style)}

diff --git a/navigation/children-composers/back-button.composer.js b/navigation/children-composers/back-button.composer.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  View,
+  Button,
+  Icon,
+} from '../../index';
+
+const createBackButton = navBarProps => sceneProps => (
+  <View virtual styleName="container">
+    <Button onPress={sceneProps.onNavigateBack}>
+      <Icon name="back" animationName={navBarProps.animationName} />
+    </Button>
+  </View>
+);
+
+const SceneComposer = {
+  canCompose(navBarProps) {
+    return !(navBarProps.scene.index === 0 || !navBarProps.onNavigateBack);
+  },
+  compose(navBarProps) {
+    return {
+      renderLeftComponent: createBackButton(navBarProps),
+    };
+  },
+};
+
+export default SceneComposer;
diff --git a/navigation/children-composers/index.js b/navigation/children-composers/index.js
@@ -0,0 +1,13 @@
+import NavBarComposer from './navbar-image.composer';
+import TitleComposer from './title.composer';
+import ShareComposer from './share.composer';
+import BackButtonComposer from './back-button.composer';
+
+const ChildrenComposers = [
+  NavBarComposer,
+  TitleComposer,
+  ShareComposer,
+  BackButtonComposer,
+];
+
+export default ChildrenComposers;
diff --git a/navigation/children-composers/navbar-image.composer.js b/navigation/children-composers/navbar-image.composer.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import _ from 'lodash';
+import { NavigationBar } from '../NavigationBar';
+import { Image } from '../../index';
+
+const imageFitContainer = navBarProps => (NavigationBar.fitContainer || navBarProps.fitContainer);
+
+const interpolateNavBarStyle = navBarProps => (
+  _.get(navBarProps, 'style.navigationBarImage') || {}
+);
+
+const interpolateNavBarProps = (navBarProps) => {
+  const { animationName } = navBarProps;
+  const newProps = {
+    resizeMode: imageFitContainer(navBarProps) ? 'cover' : 'contain',
+    resizeMethod: imageFitContainer(navBarProps) ? 'scale' : 'auto',
+  };
+
+  if (animationName) {
+    _.assign(newProps, {
+      animationName,
+    });
+  }
+  return newProps;
+};
+
+const createNavBarBackgroundImage = navBarProps => () => {
+  const navigationBarImage =
+    (NavigationBar.globalNavigationBarImage || navBarProps.navigationBarImage);
+
+  return (
+    <Image
+      source={{ uri: navigationBarImage }}
+      style={interpolateNavBarStyle(navBarProps)}
+      {...interpolateNavBarProps(navBarProps)}
+    />
+  );
+};
+
+const NavBarComposer = {
+  canCompose(navBarProps) {
+    return !!(NavigationBar.globalNavigationBarImage || navBarProps.navigationBarImage);
+  },
+  compose(navBarProps) {
+    return {
+      renderBackground: createNavBarBackgroundImage(navBarProps),
+    };
+  },
+};
+
+export default NavBarComposer;
diff --git a/navigation/children-composers/share.composer.js b/navigation/children-composers/share.composer.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import _ from 'lodash';
+import {
+  View,
+  ShareButton,
+} from '../../index';
+
+const createShareButton = navBarProps => () => {
+  const { title, text, link } = navBarProps.share;
+  return (
+    <View virtual styleName="container">
+      <ShareButton
+        animationName={navBarProps.animationName}
+        title={title || navBarProps.title}
+        message={text}
+        url={link}
+      />
+    </View>
+  );
+};
+
+const ShareComposer = {
+  canCompose(navBarProps) {
+    return _.get(navBarProps, 'share.link');
+  },
+  compose(navBarProps) {
+    return {
+      renderRightComponent: createShareButton(navBarProps),
+    };
+  },
+};
+
+export default ShareComposer;
diff --git a/navigation/children-composers/title.composer.js b/navigation/children-composers/title.composer.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import _ from 'lodash';
+import {
+  View,
+  Title,
+} from '../../index';
+import { NavigationBar } from '../NavigationBar';
+
+function hasBackgroundImage(navBarProps) {
+  return (NavigationBar.globalNavigationBarImage || navBarProps.navigationBarImage);
+}
+
+/**
+ * Check if title should be displayed or now
+ * @param {bool} showTitle
+ */
+function canShowTitle(navBarProps) {
+  if (!hasBackgroundImage(navBarProps)) {
+    return true;
+  } else if (NavigationBar.showTitle === false) {
+    return false;
+  }
+  return NavigationBar.showTitle;
+}
+
+const createTitle = navBarProps => () => {
+  const value = navBarProps.title;
+  return (
+    <View virtual styleName="container">
+      <Title animationName={navBarProps.animationName} numberOfLines={1}>
+        {value || ''}
+      </Title>
+    </View>
+  );
+};
+
+const TitleComposer = {
+  canCompose(navBarProps) {
+    const value = navBarProps.title;
+    return (!!value && canShowTitle(navBarProps));
+  },
+  compose(navBarProps) {
+    return {
+      renderTitleComponent: createTitle(navBarProps),
+    };
+  },
+};
+
+export default TitleComposer;
diff --git a/navigation/composeChildren.js b/navigation/composeChildren.js
@@ -1,90 +1,17 @@
 import React, { Component } from 'react';
-import Share from 'react-native-share';
 import _ from 'lodash';
-
-import {
-  View,
-  Button,
-  ShareButton,
-  Title,
-  Icon,
-} from '../index';
-
-const composers = {
-  title: (value, navBarProps) => ({
-    renderTitleComponent() {
-      return (
-        <View virtual styleName="container">
-          <Title animationName={navBarProps.animationName} numberOfLines={1}>
-            {value || ''}
-          </Title>
-        </View>
-      );
-    },
-  }),
-  share: (value, navBarProps) => {
-    if (!value.link) {
-      return undefined;
-    }
-
-    const { title, text, link } = value;
-
-    return {
-      renderRightComponent() {
-        return (
-          <View virtual styleName="container">
-            <ShareButton
-              animationName={navBarProps.animationName}
-              title={title || navBarProps.title}
-              message={text}
-              url={link}
-            />
-          </View>
-        );
-      },
-    };
-  },
-  scene: (value, navBarProps) => ({
-    renderLeftComponent: (sceneProps) => {
-      if (sceneProps.scene.index === 0 || !sceneProps.onNavigateBack) {
-        return null;
-      }
-
-      return (
-        <View virtual styleName="container">
-          <Button onPress={sceneProps.onNavigateBack}>
-            <Icon name="back" animationName={navBarProps.animationName} />
-          </Button>
-        </View>
-      );
-    },
-  }),
-};
-
-/**
- * Merge customizer that ignores undefined values.
- * If source (usually state set by the component) has undefined
- * property values, ignore those properties.
- *
- * @param objValue The resulting object value.
- * @param srcValue The source object value.
- * @returns {*} The value to use in the result.
- */
-function skipUndefined(objValue, srcValue) {
-  return _.isUndefined(srcValue) ? objValue : srcValue;
-}
+import ChildrenComposers from './children-composers';
 
 // eslint-disable-next-line react/prefer-stateless-function
 const composeChildren = NavigationBarComponent => class extends Component {
   render() {
     const newProps = {};
-    _.forEach(this.props, (value, key) => {
-      if (_.isFunction(composers[key])) {
-        _.assign(newProps, composers[key](value, this.props));
-      }
-    });
+    ChildrenComposers
+      .filter(composer => composer.canCompose(this.props))
+      .map(composer => composer.compose(this.props))
+      .reduce(_.assign, newProps);
 
-    return <NavigationBarComponent {..._.assignWith(newProps, this.props, skipUndefined)} />;
+    return <NavigationBarComponent {..._.assign(newProps, this.props)} />;
   }
 };