diff --git a/README.md b/README.md
index 47c15c1..faf1415 100644
--- a/README.md
+++ b/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 (
- { this.setState({input: 'x pressed'}) }},
+ {text: 'y', onPress: () => { this.setState({input: 'y pressed'}) }}
+ ]}
+ underlayColor='transparent'
+ longPress={true}
style={styles.textinput}
- >{this.state.input}
+ >
+
+ {this.state.input}
+
+
);
@@ -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:
diff --git a/ToolTipText.android.js b/ToolTip.android.js
similarity index 71%
rename from ToolTipText.android.js
rename to ToolTip.android.js
index daf47b0..110bffc 100644
--- a/ToolTipText.android.js
+++ b/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;
diff --git a/ToolTip.ios.js b/ToolTip.ios.js
new file mode 100644
index 0000000..1d16dc3
--- /dev/null
+++ b/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 (
+
+
+
+ {this.props.children}
+
+
+
+ );
+ }
+});
+
+ViewClass.propTypes = propTypes;
+
+module.exports = ViewClass;
diff --git a/ToolTipText.ios.js b/ToolTipText.ios.js
deleted file mode 100644
index c6c3f63..0000000
--- a/ToolTipText.ios.js
+++ /dev/null
@@ -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 (
-
-
-
- );
- }
-});
-
-var RCTToolTipText = requireNativeComponent('RCTToolTipText', null);
-
-module.exports = ViewClass;
diff --git a/package.json b/package.json
index 488cb9c..0effd59 100644
--- a/package.json
+++ b/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",