From 3fdabca842244dbcc28c446744910232f65fe3be Mon Sep 17 00:00:00 2001 From: Jeremy Eaton Date: Tue, 10 Oct 2017 15:00:23 -0700 Subject: [PATCH 1/3] update entry file & README to fix deprecations --- README.md | 26 +++++++++++++------------ ToolTip.ios.js | 52 +++++++++++++++++++++++++------------------------- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 559909e..27598ab 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 ( @@ -72,7 +74,7 @@ var tooltip = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/ToolTip.ios.js b/ToolTip.ios.js index 13e11b3..9000681 100644 --- a/ToolTip.ios.js +++ b/ToolTip.ios.js @@ -7,40 +7,40 @@ var { NativeModules, findNodeHandle, } = require('react-native'); +var PropTypes = require('prop-types'); 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) { @@ -48,9 +48,9 @@ var ViewClass = React.createClass({ } return null; - }, + }; - getTouchableHighlightProps: function() { + getTouchableHighlightProps = () => { var props = {}; Object.keys(TouchableHighlight.propTypes).forEach((key) => props[key] = this.props[key]); @@ -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 ( ); } -}); +} ViewClass.propTypes = propTypes; From b836af07a6db4e45238ece8b14a93c9b272319f2 Mon Sep 17 00:00:00 2001 From: Jeremy Eaton Date: Thu, 12 Oct 2017 10:40:11 -0700 Subject: [PATCH 2/3] add prop-types & create-react-class dependencies --- package-lock.json | 129 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 6 ++- 2 files changed, 134 insertions(+), 1 deletion(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e003088 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,129 @@ +{ + "name": "react-native-tooltip", + "version": "5.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" + }, + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "create-react-class": { + "version": "15.6.2", + "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.2.tgz", + "integrity": "sha1-zx7RXxKq1/FO9fLf4F5sQvke8Co=", + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1" + } + }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "0.4.19" + } + }, + "fbjs": { + "version": "0.8.16", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", + "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", + "requires": { + "core-js": "1.2.7", + "isomorphic-fetch": "2.2.1", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "promise": "7.3.1", + "setimmediate": "1.0.5", + "ua-parser-js": "0.7.17" + } + }, + "iconv-lite": { + "version": "0.4.19", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", + "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" + }, + "is-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" + }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "1.7.3", + "whatwg-fetch": "2.0.3" + } + }, + "js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" + }, + "loose-envify": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", + "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", + "requires": { + "js-tokens": "3.0.2" + } + }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "0.1.12", + "is-stream": "1.1.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "2.0.6" + } + }, + "prop-types": { + "version": "15.6.0", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz", + "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=", + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1" + } + }, + "setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + }, + "ua-parser-js": { + "version": "0.7.17", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz", + "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" + }, + "whatwg-fetch": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz", + "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=" + } + } +} diff --git a/package.json b/package.json index 1f9df31..b34c8d1 100644 --- a/package.json +++ b/package.json @@ -19,5 +19,9 @@ "react-component", "ios", "tooltip" - ] + ], + "dependencies": { + "create-react-class": "^15.6.2", + "prop-types": "^15.6.0" + } } From 650173e66ba5c430e0805f443a17813f2882a389 Mon Sep 17 00:00:00 2001 From: Jeremy Eaton Date: Thu, 12 Oct 2017 10:42:24 -0700 Subject: [PATCH 3/3] use const in entry files --- ToolTip.android.js | 8 ++++---- ToolTip.ios.js | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/ToolTip.android.js b/ToolTip.android.js index 110bffc..560fa15 100644 --- a/ToolTip.android.js +++ b/ToolTip.android.js @@ -1,11 +1,11 @@ 'use strict'; -var warning = require('warning'); +const warning = require('warning'); -var ToolTip = { - test: function() { +const ToolTip = { + test() { warning("Not yet implemented for Android."); - } + }, }; module.exports = ToolTip; diff --git a/ToolTip.ios.js b/ToolTip.ios.js index 9000681..4acd030 100644 --- a/ToolTip.ios.js +++ b/ToolTip.ios.js @@ -1,18 +1,18 @@ 'use strict'; -var { +const { requireNativeComponent, TouchableHighlight, View, NativeModules, findNodeHandle, } = require('react-native'); -var PropTypes = require('prop-types'); -var React = require('react'); -var ToolTipMenu = NativeModules.ToolTipMenu; -var RCTToolTipText = requireNativeComponent('RCTToolTipText', null); +const PropTypes = require('prop-types'); +const React = require('react'); +const ToolTipMenu = NativeModules.ToolTipMenu; +const RCTToolTipText = requireNativeComponent('RCTToolTipText', null); -var propTypes = { +const propTypes = { actions: PropTypes.arrayOf(PropTypes.shape({ text: PropTypes.string.isRequired, onPress: PropTypes.func,