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"]){