From 442699457cc16628b804fc4ddd8f549d788a6125 Mon Sep 17 00:00:00 2001
From: ajackster <jacksonal300@gmail.com>
Date: Mon, 30 Jan 2017 13:47:48 -0500
Subject: [PATCH 1/2] Added tooltip prop to ActionButton.Item

---
 ActionButton.js     |  53 +++++++++---------
 ActionButtonItem.js | 127 ++++++++++++++++++++++++++++++++------------
 2 files changed, 121 insertions(+), 59 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index 2a4ddb5..3e9b043 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -108,11 +108,11 @@ export default class ActionButton extends Component {
           activeOpacity={0.85}
           onLongPress={this.props.onLongPress}
           onPress={() => {
-              this.props.onPress();
-              if (this.props.children) {
-                this.animateButton();
-              }
-            }}
+            this.props.onPress();
+            if (this.props.children) {
+              this.animateButton();
+            }
+          }}
         >
           <Animated.View
             style={
@@ -155,12 +155,12 @@ export default class ActionButton extends Component {
     return (
       <Animated.Text
         style={[styles.btnText,
-                {
-                  color: this.state.anim.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [this.props.buttonTextColor, this.props.btnOutRangeTxt]
-                  })
-                }]}>
+          {
+            color: this.state.anim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [this.props.buttonTextColor, this.props.btnOutRangeTxt]
+            })
+          }]}>
         +
       </Animated.Text>
     );
@@ -181,6 +181,9 @@ export default class ActionButton extends Component {
 
     return (
       React.Children.map(this.props.children, (button, index) => {
+        const length = this.props.children.length;
+        const leftSide = index < length / 2 - 1;
+        const middle = length % 2 === 0 ? (index === (length / 2) || index === (length / 2) - 1) : index === (length / 2) - 0.5;
         return (
 
           <View
@@ -197,13 +200,15 @@ export default class ActionButton extends Component {
               btnColor={this.props.btnOutRange}
               {...button.props}
               onPress={() => {
-                  if (this.props.autoInactive) {
-                    this.timeout = setTimeout(() => {
-                      this.reset();
-                    }, 200);
-                  }
-                  button.props.onPress();
-                }}
+                if (this.props.autoInactive) {
+                  this.timeout = setTimeout(() => {
+                    this.reset();
+                  }, 200);
+                }
+                button.props.onPress();
+              }}
+              leftSide={leftSide}
+              middle={middle}
             />
           </View>
         );
@@ -222,12 +227,12 @@ export default class ActionButton extends Component {
         >
           <Animated.View
             style={
-              {
-                backgroundColor: this.props.bgColor,
-                opacity: this.state.anim,
-                flex: 1,
-              }
-                  }
+            {
+              backgroundColor: this.props.bgColor,
+              opacity: this.state.anim,
+              flex: 1,
+            }
+            }
           >
             {this.props.backdrop}
           </Animated.View>
diff --git a/ActionButtonItem.js b/ActionButtonItem.js
index edb344d..9637e66 100644
--- a/ActionButtonItem.js
+++ b/ActionButtonItem.js
@@ -7,55 +7,109 @@ import {
   View,
   Animated,
   TouchableOpacity,
+  Text
 } from 'react-native';
 
 export default class ActionButtonItem extends Component {
-
+  constructor(props) {
+    super(props);
+    this.state = {
+      tooltipWidth: 0
+    };
+    this.onLayout = this.onLayout.bind(this);
+  }
+  onLayout(event) {
+    this.setState({ tooltipWidth: event.nativeEvent.layout.width });
+  }
   render() {
     const offsetX = this.props.radius * Math.cos(this.props.angle);
     const offsetY = this.props.radius * Math.sin(this.props.angle);
+    const tooltipStyles = {
+      leftToolTip: {
+        position: 'absolute',
+        color: 'white',
+        minWidth: 80,
+        maxHeight: 17,
+        left: -this.state.tooltipWidth - 10,
+        top: 10,
+        textAlign: 'right'
+      },
+      middleToolTip: {
+        color: 'white',
+        position: 'absolute',
+        minWidth: 80,
+        maxHeight: 17,
+        top: -25,
+        left: (-this.state.tooltipWidth / 4) - 2,
+        alignSelf: 'center',
+        textAlign: 'center'
+      },
+      rightToolTip: {
+        color: 'white',
+        position: 'absolute',
+        minWidth: 80,
+        maxHeight: 17,
+        top: 10,
+        left: 45
+      }
+    };
     return (
       <Animated.View
         style={[{
-            opacity: this.props.anim,
-            width: this.props.size,
-            height: this.props.size,
-            transform: [
-              {
-                translateY: this.props.anim.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0, offsetY],
-                }) },
-              {
-                translateX: this.props.anim.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0, offsetX],
-                }) },
-              {
-                rotate: this.props.anim.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: ['0deg', '720deg'],
-                }) },
-              {
-                scale: this.props.anim.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0, 1],
-                }) },
-            ]
-          }]}
+          opacity: this.props.anim,
+          width: this.props.size,
+          height: this.props.size,
+          transform: [
+            {
+              translateY: this.props.anim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, offsetY],
+              }) },
+            {
+              translateX: this.props.anim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, offsetX],
+              }) },
+            {
+              rotate: this.props.anim.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['0deg', '720deg'],
+              }) },
+            {
+              scale: this.props.anim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 1],
+              }) },
+          ]
+        }]}
       >
-        <TouchableOpacity style={{flex:1}} activeOpacity={this.props.activeOpacity || 0.85} onPress={this.props.onPress}>
+        {this.props.leftSide ?
+          <Text onLayout={this.onLayout} style={tooltipStyles.leftToolTip}>
+            {this.props.tooltip}
+          </Text> :
+          null
+        }
+        <TouchableOpacity style={{flex: 1}} activeOpacity={this.props.activeOpacity || 0.85} onPress={this.props.onPress}>
           <View
-            style={[styles.actionButton,{
-                width: this.props.size,
-                height: this.props.size,
-                borderRadius: this.props.size / 2,
-                backgroundColor: this.props.buttonColor,
-              }]}
+            style={[ styles.actionButton, {
+              width: this.props.size,
+              height: this.props.size,
+              borderRadius: this.props.size / 2,
+              backgroundColor: this.props.buttonColor
+            }]}
           >
             {this.props.children}
           </View>
         </TouchableOpacity>
+        {this.props.middle ?
+          <Text onLayout={this.onLayout} style={tooltipStyles.middleToolTip}>
+            {this.props.tooltip}
+          </Text> :
+          !this.props.leftSide ?
+            <Text style={tooltipStyles.rightToolTip}>
+              {this.props.tooltip}
+            </Text> : null
+        }
       </Animated.View>
     );
   }
@@ -68,6 +122,9 @@ ActionButtonItem.propTypes = {
   buttonColor: PropTypes.string,
   onPress: PropTypes.func,
   children: PropTypes.node.isRequired,
+  middle: PropTypes.bool,
+  leftSide: PropTypes.bool,
+  tooltip: PropTypes.string
 };
 
 ActionButtonItem.defaultProps = {
@@ -89,5 +146,5 @@ const styles = StyleSheet.create({
     shadowRadius: 1,
     backgroundColor: 'red',
     position: 'absolute',
-  },
+  }
 });

From 37643b523962923a560fdc167553a893b3f76383 Mon Sep 17 00:00:00 2001
From: ajackster <jacksonal300@gmail.com>
Date: Wed, 8 Feb 2017 01:47:41 -0500
Subject: [PATCH 2/2] Updated README with tooltip prop

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index baccb15..315970c 100644
--- a/README.md
+++ b/README.md
@@ -100,3 +100,4 @@ Also this example uses `react-native-vector-icons` for the button Icons.
 | ------------- |:-------------:|:------------:       | ----------- |
 | onPress       | func          | null                | **required** function, triggers when a button is tapped
 | buttonColor   | string        | same as + button    | background color of the Button
+| tooltip       | string        | null                | text that is displayed next to the button
\ No newline at end of file