Improved backwards compatibility

invertase · Dec 29, 2015 · ea38639 · ea38639
1 parent 472383d
commit ea38639
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/lib/Button.js b/lib/Button.js
@@ -195,7 +195,15 @@ export default class Button extends Component {
                     rippleColor={rippleColor}
                     onPress={!disabled ? onPress : null}
                     onLongPress={!disabled ? onLongPress : null}
-                    style={Object.assign({}, styles.button, buttonStyle, { backgroundColor: buttonStyle && buttonStyle.backgroundColor })}
+                    style={[
+                        styles.button,
+                        buttonStyle, {
+                            backgroundColor: buttonStyle && buttonStyle.backgroundColor,
+                        }, raised && !isCompatible('elevation') && {
+                             borderWidth: 1,
+                             borderColor: 'rgba(0,0,0,.12)'
+                        }
+                    ]}
                 >
                     <Text style={[TYPO.paperFontButton, textStyle]}>
                         {value}

diff --git a/lib/Card/index.js b/lib/Card/index.js
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes, View } from 'react-native';
+import { isCompatible } from '../helpers';
 
 import Media from './Media';
 import Body from './Body';
@@ -25,7 +26,14 @@ export default class Card extends Component {
         const { elevation, children } = this.props;
 
         return (
-            <View style={Object.assign(styles.container, { elevation })}>
+            <View style={[
+                styles.container, {
+                    elevation
+                }, !isCompatible('elevation') && {
+                    borderWidth: 1,
+                    borderColor: 'rgba(0,0,0,.12)'
+                }]}
+            >
                 {children}
             </View>
         );

diff --git a/lib/Drawer/Section.js b/lib/Drawer/Section.js
@@ -95,13 +95,16 @@ export default class Section extends Component {
                         return (
                             <Ripple
                                 key={i}
-                                rippleColor={'rgba(153,153,153,.4)'}
+                                rippleColor="rgba(153,153,153,.4)"
                                 onPress={item.onPress}
                                 onLongPress={item.onLongPress}
+                                style={{
+                                    flex: 1,
+                                    flexDirection: 'row',
+                                    backgroundColor: item.active ? ACTIVE_COLOR : null
+                                }}
                             >
-                                <View style={item.active ? { backgroundColor: ACTIVE_COLOR } : {}}>
-                                    {this.renderRow(item, i, TEXT_COLOR)}
-                                </View>
+                                {this.renderRow(item, i, TEXT_COLOR)}
                             </Ripple>
                         );
                     }
@@ -126,6 +129,7 @@ export default class Section extends Component {
 
 const styles = {
     section: {
+        flex: 1,
         marginTop: 8
     },
     item: {

diff --git a/lib/helpers.js b/lib/helpers.js
@@ -26,17 +26,18 @@ export function getColor(string) {
 
 /**
  * Detect whether a specific feature is compatible with the device
- * @param feature
+ * @param string
  * @returns bool
  */
 export function isCompatible(feature) {
     const version = Platform.Version;
 
     switch(feature) {
         case 'TouchableNativeFeedback':
-            const required = 21;
-
-            return version >= required;
+            return version >= 21;
+            break;
+        case 'elevation':
+            return version >= 21;
             break;
         default:
             return true;

diff --git a/lib/polyfill/Ripple.js b/lib/polyfill/Ripple.js
@@ -28,7 +28,7 @@ export default class Ripple extends Component {
         elevation: PropTypes.array,
         onPress: PropTypes.func,
         onLongPress: PropTypes.func,
-        style: PropTypes.object,
+        style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
         children: PropTypes.element.isRequired
     };
 
@@ -49,7 +49,7 @@ export default class Ripple extends Component {
             <View
                 elevation={elevation ? elevation : 0}
                 ref='container'
-                style={Object.assign(styles.container, style)}
+                style={style || {}}
                 {...this._responder}
             >
                 <Animated.View style={[
@@ -150,7 +150,6 @@ export default class Ripple extends Component {
 
 const styles = {
     container: {
-        backgroundColor: 'rgba(0,0,0,0)',
         overflow: 'hidden'
     },
     background: {