Add ToolTip component

README.md

@@ -9,23 +9,38 @@ A react-native component from displaying tooltip. Uses UIMenuController.
    Files to "Your Project Name"` [(Screenshot)](http://url.brentvatne.ca/jQp8) then [(Screenshot)](http://url.brentvatne.ca/1gqUD).
 3. Add `libRNToolTipMenu.a` to `Build Phases -> Link Binary With Libraries`
    [(Screenshot)](http://url.brentvatne.ca/17Xfe).
-4. Whenever you want to use it within React code now you can: `var ToolTipText = require('react-native-tooltip');`
+4. Whenever you want to use it within React code: `var ToolTip = require('react-native-tooltip');`
 
+## Usage
+
+### Props
+
+- `actions`: Array of actions `[{text: 'Copy', onPress: () => Clipboard.set(this.someValue) }]`
+- `longPress`: Boolean indicating if the tooltip should be showing on longPress, false by default.
+
+#### Props from TouchableHighlight.propTypes
+
+- `activeOpacity`
+- `onHideUnderlay`
+- `onShowUnderlay`
+- `style`
+- `underlayColor`
+
+You can see the list on the react native [website](https://facebook.github.io/react-native/docs/touchablehighlight.html#content)
+
+### Example
 
-## Example
 ```javascript
 var React = require('react-native');
 var {
   AppRegistry,
   StyleSheet,
-  Text,
-  TouchableHighlight,
   PixelRatio,
   View,
+  Text,
 } = React;
 
-var ToolTipMenu = require('NativeModules').ToolTipMenu;
-var ToolTipText = require('react-native-tooltip');
+var ToolTip = require('react-native-tooltip');
 
 var tooltip = React.createClass({
   getInitialState: function() {
@@ -33,23 +48,24 @@ var tooltip = React.createClass({
       input: 'chirag',
     }
   },
-  handleChange: function(event) {
-    this.setState({input: event.nativeEvent.text});
-  },
-  handleFocus: function(change) {
-    ToolTipMenu.show(React.findNodeHandle(this.refs.input), ['x', 'z']);
-  },
   render: function() {
     return (
       <View style={styles.container}>
         <View style={styles.textinputContainer}>
-          <ToolTipText
-            suppressHighlighting={true}
-            onChange={this.handleChange}
-            onPress={this.handleFocus}
-            ref={'input'}
+          <ToolTip
+            ref='theToolTip'
+            actions={[
+              {text: 'x', onPress: () => { this.setState({input: 'x pressed'}) }},
+              {text: 'y', onPress: () => { this.setState({input: 'y pressed'}) }}
+            ]}
+            underlayColor='transparent'
+            longPress={true}
             style={styles.textinput}
-          >{this.state.input}</ToolTipText>
+          >
+            <Text>
+              {this.state.input}
+            </Text>
+          </ToolTip>
         </View>
       </View>
     );
@@ -84,5 +100,9 @@ var styles = StyleSheet.create({
 AppRegistry.registerComponent('tooltip', () => tooltip);
 ```
 
+### Note
+
+It is also possible to open the menu programmatically, by calling `this.refs.theToolTip.showMenu();` ( `theToolTip` being the reference of the component).
+
 ## Here is how it looks:
 ![Demo gif](https://github.com/chirag04/react-native-tooltip/blob/master/screenshot.png)

ToolTip.android.js

@@ -2,10 +2,10 @@
 
 var warning = require('warning');
 
-var ToolTipText = {
+var ToolTip = {
   test: function() {
     warning("Not yet implemented for Android.");
   }
 };
 
-module.exports = ToolTipText;
+module.exports = ToolTip;

ToolTip.ios.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var React = require('react-native');
+var {
+  requireNativeComponent,
+  TouchableHighlight,
+  View,
+} = React;
+
+var ToolTipMenu = React.NativeModules.ToolTipMenu;
+
+var RCTToolTipText = requireNativeComponent('RCTToolTipText', null);
+
+var propTypes = {
+  actions: React.PropTypes.arrayOf(React.PropTypes.shape({
+    text: React.PropTypes.string.isRequired,
+    onPress: React.PropTypes.func,
+  })),
+  longPress: React.PropTypes.bool,
+  ...TouchableHighlight.propTypes,
+};
+
+var ViewClass = React.createClass({
+  showMenu: function() {
+    ToolTipMenu.show(React.findNodeHandle(this.refs.toolTipText), this.getOptionTexts());
+  },
+
+  getOptionTexts: function() {
+    return this.props.actions.map((option) => option.text);
+  },
+
+  // Assuming there is no actions with the same text
+  getCallback: function(optionText) {
+    var selectedOption = this.props.actions.find((option) => option.text === optionText);
+
+    if (selectedOption) {
+      return selectedOption.onPress;
+    }
+
+    return null;
+  },
+
+  getTouchableHighlightProps: function() {
+    var props = {};
+
+    Object.keys(TouchableHighlight.propTypes).forEach((key) => props[key] = this.props[key]);
+
+    if (this.props.longPress) {
+      props.onLongPress = this.showMenu;
+    } else {
+      props.onPress = this.showMenu;
+    }
+
+    return props;
+  },
+
+  handleToolTipTextChange: function(event) {
+    var callback = this.getCallback(event.nativeEvent.text);
+
+    if (callback) {
+      callback(event);
+    }
+  },
+
+  render: function() {
+    return (
+      <RCTToolTipText ref='toolTipText' onChange={this.handleToolTipTextChange}>
+        <TouchableHighlight
+          {...this.getTouchableHighlightProps()}
+        >
+          <View>
+            {this.props.children}
+          </View>
+        </TouchableHighlight>
+      </RCTToolTipText>
+    );
+  }
+});
+
+ViewClass.propTypes = propTypes;
+
+module.exports = ViewClass;

ToolTipText.ios.js

@@ -1,28 +0,0 @@
-'use strict';
-
-var React = require('react-native');
-var {
-  Text,
-  requireNativeComponent,
-} = React;
-
-var ViewClass = React.createClass({
-
-  _onChange: function(event: Event) {
-    this.props.onChange && this.props.onChange(event);
-  },
-
-  render: function() {
-    //don't pass onChange to text.
-    var { onChange, ...other } = this.props;
-    return (
-      <RCTToolTipText onChange={this._onChange}>
-        <Text {...other } />
-      </RCTToolTipText>
-    );
-  }
-});
-
-var RCTToolTipText = requireNativeComponent('RCTToolTipText', null);
-
-module.exports = ViewClass;

package.json

@@ -2,7 +2,7 @@
   "name": "react-native-tooltip",
   "version": "3.1.0",
   "description": "A react-native wrapper for showing tooltips",
-  "main": "ToolTipText.ios.js",
+  "main": "ToolTip.ios.js",
   "author": {
     "name": "Chirag Jain",
     "email": "jain_chirag04@yahoo.com",