Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update entry file & README to fix deprecations #32

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
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.
Jump to
Jump to file
Failed to load files.
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