From fdc0a89d702b0dc5627aa9b63196fb6c9801a42d Mon Sep 17 00:00:00 2001 From: Jean-Richard Lai Date: Tue, 3 Nov 2015 14:40:06 -0800 Subject: [PATCH] Add ToolTip component --- README.md | 56 ++++++++----- ToolTipText.android.js => ToolTip.android.js | 4 +- ToolTip.ios.js | 82 ++++++++++++++++++++ ToolTipText.ios.js | 28 ------- package.json | 2 +- 5 files changed, 123 insertions(+), 49 deletions(-) rename ToolTipText.android.js => ToolTip.android.js (71%) create mode 100644 ToolTip.ios.js delete mode 100644 ToolTipText.ios.js 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: ![Demo gif](https://github.com/chirag04/react-native-tooltip/blob/master/screenshot.png) 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",