Merge pull request mac-s-g#102 from mac-s-g/speed-boost

removed react-tooltip because performance was not good

Author: mac-s-g

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-json-view",
   "description": "Interactive react component for displaying javascript arrays and JSON objects.",
-  "version": "1.11.7",
+  "version": "1.11.8",
   "main": "dist/main.js",
   "files": [
     "dist/"
@@ -10,8 +10,7 @@
     "clipboard": "^1.6.1",
     "flux": "^3.1.2",
     "radium":"^0.19.1",
-    "react-base16-styling": "^0.5.3",
-    "react-tooltip": "^3.3.0"
+    "react-base16-styling": "^0.5.3"
   },
   "devDependencies": {
     "babel-core": "^6.21.0",

src/js/components/VariableEditor.js

@@ -14,9 +14,6 @@ import {
 //clibboard icon
 import {Edit, CheckCircle, RemoveCircle as Remove} from './icons';
 
-//tooltip component
-import ReactTooltip from 'react-tooltip';
-
 //theme
 import Theme from './../themes/getStyle';
 import Radium from 'radium';
@@ -37,10 +34,6 @@ class VariableEditor extends React.Component {
         super(props);
     }
 
-    componentDidMount() {
-        ReactTooltip.rebuild();
-    }
-
     render() {
         const {
             variable, singleIndent, type, theme,
@@ -89,24 +82,14 @@ class VariableEditor extends React.Component {
     getEditIcon = () => {
         const {variable, namespace, theme} = this.props;
         const {editMode} = this.state;
-        const tooltip_id = variable.name + '_'
-            + namespace + '-edit-tooltip';
         let display = 'inline-block';
 
         if (editMode) {
             display = 'none';
         }
 
         return (
-        <div
-        class="click-to-edit"
-        data-tip='edit this value'
-        data-for={tooltip_id} >
-            <ReactTooltip
-            effect="solid"
-            id={tooltip_id}
-            place="right"
-            delayShow={1000} />
+        <div class="click-to-edit" >
             <Edit
             class="click-to-edit-icon"
             {...Theme(theme, 'editVarIcon')}

src/js/components/VariableMeta.js

@@ -11,7 +11,6 @@ import {
 //clipboard library
 //https://www.npmjs.com/package/clipboard
 import Clipboard from 'clipboard';
-import ReactTooltip from 'react-tooltip';
 
 //theme
 import Theme from './../themes/getStyle';
@@ -62,10 +61,7 @@ export default class extends React.Component {
     getCopyComponent = () => {
         const {id, copy_state} = this.state;
         const {src, size, theme, enableClipboard} = this.props;
-        const tooltip_id = 'tooltip-' + id;
-        //had to jump through some hoops to get the
-        //react-tooltip to act like a react component should.
-        //it does not support dynamic content updates
+
         let style = Theme(theme, 'copy-to-clipboard').style;
         return (
             enableClipboard ?
@@ -76,35 +72,16 @@ export default class extends React.Component {
                     display:copy_state=='success' ? 'none' : 'inline-block'
                 }}
                 data-clipboard-text={JSON.stringify(src, null, '  ')}
-                id={"clipboard-container-" + id}
-                data-tip='copy to clipboard'
-                data-for={tooltip_id} >
+                id={"clipboard-container-" + id} >
                     <Clippy {...Theme(theme, 'copy-icon')} />
-                    <ReactTooltip
-                    effect="solid"
-                    class="rjv-tooltip"
-                    id={tooltip_id}
-                    place="right"
-                    delayShow={1000} />
                 </span>
                 <span
                 style={{
                     ...style,
                     display:copy_state == 'success'
                     ? 'inline-block' : 'none'
-                }}
-                data-tip='copied'
-                data-for={tooltip_id + '-success'} >
+                }} >
                     <Clippy {...Theme(theme, 'copy-icon')} />
-                    <ReactTooltip
-                    effect="solid"
-                    class="rjv-tooltip"
-                    id={tooltip_id + '-success'}
-                    place="right"
-                    afterHide={()=>{
-                        this.setState({copy_state: null});
-                    }}
-                    delayShow={0} />
                 </span>
             </span>
             : null