Button now implements native TouchableNativeFeedback & raised buttons…

… have elevation
invertase · Dec 24, 2015 · 042c897 · 042c897
1 parent d038043
commit 042c897
Showing 1 changed file with 55 additions and 16 deletions.
diff --git a/lib/Button.js b/lib/Button.js
@@ -1,7 +1,6 @@
-import React, { Component, PropTypes, Text } from 'react-native';
+import React, { Component, PropTypes, View, Text, TouchableNativeFeedback } from 'react-native';
 import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';
 import { getColor } from './helpers';
-import Ripple from './Ripple';
 
 export default class Button extends Component {
 
@@ -16,7 +15,8 @@ export default class Button extends Component {
         }),
         disabled: PropTypes.bool,
         raised: PropTypes.bool,
-        onPress: PropTypes.func
+        onPress: PropTypes.func,
+        onLongPress: PropTypes.func,
     };
 
     static defaultProps = {
@@ -26,8 +26,28 @@ export default class Button extends Component {
         raised: false
     };
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            elevation: 2
+        };
+    }
+
+    setElevation = () => {
+        this.setState({
+            elevation: 4
+        });
+    };
+
+    removeElevation = () => {
+        this.setState({
+            elevation: 2
+        });
+    };
+
     render() {
-        const { value, theme, primary, overrides, disabled, raised, onPress } = this.props;
+        const { elevation } = this.state;
+        const { value, theme, primary, overrides, disabled, raised, onPress, onLongPress } = this.props;
 
         const textStyleMap = {
             flat: {
@@ -72,11 +92,8 @@ export default class Button extends Component {
             raised: {
                 light: {
                     normal: {
-                        borderWidth: 1,
                         backgroundColor: '#fff',
                         borderColor: 'rgba(0,0,0,.12)',
-                        borderBottomWidth: 1,
-                        borderBottomColor: 'rgba(0,0,0,.12)'
                     },
                     disabled: {
                         backgroundColor: 'rgba(0,0,0,.12)',
@@ -153,18 +170,36 @@ export default class Button extends Component {
             return getColor(overrides.rippleColor)
         })();
 
+        if (disabled) {
+            return (
+                <View style={[styles.button, buttonStyle, { backgroundColor: buttonStyle && buttonStyle.backgroundColor }]}>
+                    <Text style={[TYPO.paperFontButton, textStyle, styles.text]}>
+                        {value}
+                    </Text>
+                </View>
+            );
+        }
+
         return (
-            <Ripple
-                disabled={disabled}
-                color={rippleColor}
-                rippleOpacity={1}
+            <TouchableNativeFeedback
+                background={TouchableNativeFeedback.Ripple(rippleColor)}
                 onPress={!disabled ? onPress : null}
-                style={Object.assign({}, styles.button, buttonStyle, { backgroundColor: buttonStyle && buttonStyle.backgroundColor })}
+                onLongPress={!disabled ? onLongPress : null}
+                onPressIn={raised ? this.setElevation : null}
+                onPressOut={raised ? this.removeElevation : null}
             >
-                <Text style={[TYPO.paperFontButton, textStyle]}>
-                    {value}
-                </Text>
-            </Ripple>
+                <View style={[
+                    styles.button,
+                    buttonStyle, {
+                        backgroundColor: buttonStyle && buttonStyle.backgroundColor,
+                        elevation: raised ? elevation : 0
+                    }
+                ]}>
+                    <Text style={[TYPO.paperFontButton, textStyle, styles.text]}>
+                        {value}
+                    </Text>
+                </View>
+            </TouchableNativeFeedback>
         );
     };
 }
@@ -178,5 +213,9 @@ const styles = {
         paddingHorizontal: 16,
         margin: 6,
         borderRadius: 2
+    },
+    text: {
+        position: 'relative',
+        top: 2
     }
 };