diff --git a/README.md b/README.md
index 559909e..3095b2a 100644
--- a/README.md
+++ b/README.md
@@ -32,49 +32,62 @@ 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;
-
-var ToolTip = require('react-native-tooltip');
-
-var tooltip = React.createClass({
- getInitialState: function() {
- return {
- input: 'chirag',
+} from 'react-native';
+
+import ToolTip from 'react-native-tooltip';
+
+export default class MyToolTip extends React.Component {
+ state = {
+ input: 'chirag'
+ };
+
+ handleCopyPress = () => {
+ AlertIOS.alert(`Copy has been pressed!`);
+ };
+
+ handleOtherPress = () => {
+ AlertIOS.alert(`Other has been pressed!`);
+ };
+
+ handleHide = () => {
+ console.log('Tooltip did hide');
+ };
+
+ handleShow = () => {
+ console.log('tooltip did show');
+ };
+
+ render() {
+ return (
+
+
+
+ Press Here.
+
+
+
+ );
}
- },
- render: function() {
- return (
-
-
- { this.setState({input: 'x pressed'}) }},
- {text: 'y', onPress: () => { this.setState({input: 'y pressed'}) }}
- ]}
- underlayColor='transparent'
- longPress={true}
- arrowDirection='down'
- style={styles.textinput}
- >
-
- {this.state.input}
-
-
-
-
- );
- }
-});
+}
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
diff --git a/ToolTip.ios.js b/ToolTip.ios.js
index 13e11b3..83bfbfe 100644
--- a/ToolTip.ios.js
+++ b/ToolTip.ios.js
@@ -1,92 +1,98 @@
'use strict';
-var {
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {
requireNativeComponent,
TouchableHighlight,
View,
NativeModules,
findNodeHandle,
-} = require('react-native');
-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,
- })),
- arrowDirection: React.PropTypes.oneOf(['up', 'down', 'left', 'right']),
- longPress: React.PropTypes.bool,
- ...TouchableHighlight.propTypes,
-};
-
-var ViewClass = React.createClass({
- getDefaultProps: function() {
- return {
- arrowDirection: 'down'
+} from 'react-native';
+
+const ToolTipMenu = NativeModules.ToolTipMenu;
+const RCTToolTipText = requireNativeComponent('RCTToolTipText', null);
+
+export default class ToolTip extends PureComponent {
+ static propTypes = {
+ actions: PropTypes.arrayOf(PropTypes.shape({
+ text: PropTypes.string.isRequired,
+ onPress: PropTypes.func
+ })),
+ arrowDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+ longPress: PropTypes.bool,
+ onHide: PropTypes.func,
+ onShow: PropTypes.func,
+ ...TouchableHighlight.propTypes
};
- },
-
- showMenu: function() {
- ToolTipMenu.show(findNodeHandle(this.refs.toolTipText), this.getOptionTexts(), this.props.arrowDirection);
- },
- hideMenu: function() {
- ToolTipMenu.hide();
- },
-
- 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;
- },
+ static defaultProps = {
+ arrowDirection: 'down',
+ onHide: () => true,
+ onShow: () => true
+ };
- getTouchableHighlightProps: function() {
- var props = {};
+ showMenu = () => {
+ ToolTipMenu.show(findNodeHandle(this.refs.toolTipText), this.getOptionTexts(), this.props.arrowDirection);
+ this.props.onShow();
+ };
- Object.keys(TouchableHighlight.propTypes).forEach((key) => props[key] = this.props[key]);
+ hideMenu = () => {
+ ToolTipMenu.hide();
+ this.props.onHide();
+ };
- if (this.props.longPress) {
- props.onLongPress = this.showMenu;
- } else {
- props.onPress = this.showMenu;
- }
+ getOptionTexts = () => {
+ return this.props.actions.map((option) => option.text);
+ };
+
+ // Assuming there is no actions with the same text
+ getCallback = (optionText) => {
+ const selectedOption = this.props.actions.find((option) => option.text === optionText);
- return props;
- },
+ if (selectedOption) {
+ return selectedOption.onPress;
+ }
+
+ return null;
+ };
- handleToolTipTextChange: function(event) {
- var callback = this.getCallback(event.nativeEvent.text);
+ getTouchableHighlightProps = () => {
+ const 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 = (event) => {
+ const callback = this.getCallback(event.nativeEvent.text);
+ if (callback) {
+ callback(event);
+ }
+ };
+
+ handleBlurToolTip = () => {
+ this.hideMenu();
+ };
- if (callback) {
- callback(event);
+ render() {
+ return (
+
+
+
+ {this.props.children}
+
+
+
+ );
}
- },
-
- render: function() {
- return (
-
-
-
- {this.props.children}
-
-
-
- );
- }
-});
-
-ViewClass.propTypes = propTypes;
-
-module.exports = ViewClass;
+}
diff --git a/ToolTipMenu/RCTToolTipText.h b/ToolTipMenu/RCTToolTipText.h
index 03a3586..17e0b28 100644
--- a/ToolTipMenu/RCTToolTipText.h
+++ b/ToolTipMenu/RCTToolTipText.h
@@ -7,6 +7,8 @@
- (void)tappedMenuItem:(NSString *)text;
+- (void)didHideMenu:(NSNotification *)notification;
+
- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
@end
diff --git a/ToolTipMenu/RCTToolTipText.m b/ToolTipMenu/RCTToolTipText.m
index 22d53e1..d3b4da9 100644
--- a/ToolTipMenu/RCTToolTipText.m
+++ b/ToolTipMenu/RCTToolTipText.m
@@ -34,6 +34,16 @@ - (void)tappedMenuItem:(NSString *)text {
eventCount:_nativeEventCount];
}
+- (void)didHideMenu:(NSNotification *)notification {
+ _nativeEventCount++;
+ [_eventDispatcher sendTextEventWithType:RCTTextEventTypeBlur
+ reactTag:self.reactTag
+ text:nil
+ key:nil
+ eventCount:_nativeEventCount];
+
+}
+
- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
NSString *sel = NSStringFromSelector(action);
NSRange match = [sel rangeOfString:@"magic_"];
diff --git a/ToolTipMenu/RCTToolTipTextManager.m b/ToolTipMenu/RCTToolTipTextManager.m
index a19d767..3e2a827 100644
--- a/ToolTipMenu/RCTToolTipTextManager.m
+++ b/ToolTipMenu/RCTToolTipTextManager.m
@@ -7,6 +7,11 @@ @implementation RCTToolTipTextManager
RCT_EXPORT_MODULE()
++ (BOOL)requiresMainQueueSetup
+{
+ return YES;
+}
+
- (UIView *)view
{
return [[RCTToolTipText alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
diff --git a/ToolTipMenu/ToolTipMenu.m b/ToolTipMenu/ToolTipMenu.m
index 9360b1b..2190b35 100644
--- a/ToolTipMenu/ToolTipMenu.m
+++ b/ToolTipMenu/ToolTipMenu.m
@@ -30,6 +30,9 @@ - (dispatch_queue_t)methodQueue
UIMenuController *menuCont = [UIMenuController sharedMenuController];
[menuCont setTargetRect:view.frame inView:view.superview];
+ [[NSNotificationCenter defaultCenter] addObserver:view selector:@selector(didHideMenu:) name:UIMenuControllerDidHideMenuNotification object:nil];
+
+
if([arrowDirection isEqualToString: @"up"]){
menuCont.arrowDirection = UIMenuControllerArrowUp;
}else if ([arrowDirection isEqualToString: @"right"]){