Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ 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: `var ToolTip = require('react-native-tooltip');`
4. Whenever you want to use it within React code: `import ToolTip from 'react-native-tooltip';`

## Usage

Expand All @@ -32,24 +32,26 @@ You can see the list on the react native [website](https://facebook.github.io/re
### Example

```javascript
var React = require('react-native');
var {
import React from 'react';
import {
AppRegistry,
StyleSheet,
PixelRatio,
View,
Text,
} = React;
} from 'react-native';

var ToolTip = require('react-native-tooltip');
import ToolTip from 'react-native-tooltip';

var tooltip = React.createClass({
getInitialState: function() {
return {
class tooltip extends React.Component {
constructor() {
super();

this.state = {
input: 'chirag',
}
},
render: function() {
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.textinputContainer}>
Expand All @@ -72,7 +74,7 @@ var tooltip = React.createClass({
</View>
);
}
});
}

var styles = StyleSheet.create({
container: {
Expand Down
52 changes: 26 additions & 26 deletions ToolTip.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,50 +7,50 @@ var {
NativeModules,
findNodeHandle,
} = require('react-native');
var PropTypes = require('prop-types');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you add this to package.json?

Also it would be awesome to have those vars as const/let.

var React = require('react');
var ToolTipMenu = 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,
actions: PropTypes.arrayOf(PropTypes.shape({
text: PropTypes.string.isRequired,
onPress: PropTypes.func,
})),
arrowDirection: React.PropTypes.oneOf(['up', 'down', 'left', 'right']),
longPress: React.PropTypes.bool,
arrowDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']),
longPress: PropTypes.bool,
...TouchableHighlight.propTypes,
};

var ViewClass = React.createClass({
getDefaultProps: function() {
return {
arrowDirection: 'down'
};
},
class ViewClass extends React.Component {
static defaultProps = {
arrowDirection: 'down'
};

showMenu: function() {
showMenu = () => {
ToolTipMenu.show(findNodeHandle(this.refs.toolTipText), this.getOptionTexts(), this.props.arrowDirection);
},
hideMenu: function() {
};

hideMenu = () => {
ToolTipMenu.hide();
},
getOptionTexts: function() {
};

getOptionTexts = () => {
return this.props.actions.map((option) => option.text);
},
};

// Assuming there is no actions with the same text
getCallback: function(optionText) {
getCallback = (optionText) => {
var selectedOption = this.props.actions.find((option) => option.text === optionText);

if (selectedOption) {
return selectedOption.onPress;
}

return null;
},
};

getTouchableHighlightProps: function() {
getTouchableHighlightProps = () => {
var props = {};

Object.keys(TouchableHighlight.propTypes).forEach((key) => props[key] = this.props[key]);
Expand All @@ -62,17 +62,17 @@ var ViewClass = React.createClass({
}

return props;
},
};

handleToolTipTextChange: function(event) {
handleToolTipTextChange = (event) => {
var callback = this.getCallback(event.nativeEvent.text);

if (callback) {
callback(event);
}
},
};

render: function() {
render() {
return (
<RCTToolTipText ref='toolTipText' onChange={this.handleToolTipTextChange}>
<TouchableHighlight
Expand All @@ -85,7 +85,7 @@ var ViewClass = React.createClass({
</RCTToolTipText>
);
}
});
}

ViewClass.propTypes = propTypes;

Expand Down