further refactoring

.eslintrc

@@ -7,9 +7,6 @@
     "extends": [
         "airbnb"
     ],
-    "plugins": [
-        "babel"
-    ],
     "parser": "babel-eslint",
     "parserOptions": {
         "ecmaFeatures": {
@@ -24,17 +21,12 @@
         ],
         "object-curly-spacing": "off",
         "object-curly-newline": "off",
-        "require-jsdoc": "off",
-        "indent": "off",
-        "max-len": "off",
-        "react/require-default-props": "off",
-        "react/destructuring-assignment": "off",
-        "react/prop-types": "off",
         "arrow-body-style": "off",
+        "no-nested-ternary": "off",
         "no-confusing-arrow": "off",
-        "react/no-unescaped-entities": "off",
+        "react/prop-types": "off",
+        "react/destructuring-assignment": "off",
         "jsx-a11y/mouse-events-have-key-events": "off",
-        "jsx-a11y/click-events-have-key-events": "off",
-        "import/no-extraneous-dependencies": "off"
+        "jsx-a11y/click-events-have-key-events": "off"
     }
 }

package.json

@@ -75,6 +75,6 @@
     "moduleNameMapper": {
       "\\.(css)$": "jest-css-modules"
     },
-    "setupTestFrameworkScriptFile": "<rootDir>/enzyme-setup.js"
+    "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js"
   }
-}
+}

src/docs/Content/ToggleCode.jsx

@@ -17,7 +17,9 @@ class ShowCode extends Component {
   }
 
   render() {
-    const SVG = this.state.open ? ArrowUp : ArrowDown;
+    const { open } = this.state;
+    const { children } = this.props;
+    const SVG = open ? ArrowUp : ArrowDown;
     return (
       <>
         <div
@@ -26,14 +28,14 @@ class ShowCode extends Component {
           tabIndex={0}
           onClick={this.clickHandler}
         >
-          <span>{this.state.open ? 'Hide Code Example' : 'Show Code Example'}</span>
+          <span>{open ? 'Hide Code Example' : 'Show Code Example'}</span>
           <img
             style={{ marginLeft: '8px', width: '10px' }}
             src={SVG}
             alt=""
           />
         </div>
-        {this.state.open ? this.props.children : null}
+        {open ? children : null}
       </>
     );
   }

src/docs/index.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
+// eslint-disable-next-line
 import Prism from 'prismjs';
 
 import Header from './Content/Header';

src/lib/Tooltip/Arrow/Arrow.jsx → src/lib/Tooltip/Arrow.jsx

@@ -1,5 +1,4 @@
 import React from 'react'; //
-import './arrow.css';
 
 const Arrow = ({
   moveRight,

src/lib/Tooltip/TextBox/TextBox.jsx → src/lib/Tooltip/TextBox.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import './textBox.css';
 
 class TextBox extends Component {
   state = {
@@ -10,7 +9,8 @@ class TextBox extends Component {
   }
 
   componentDidMount() {
-    const heights = Object.keys(this.spanHeights).map(key => this.spanHeights[key].clientHeight);
+    const heights = Object.keys(this.spanHeights)
+      .map(key => this.spanHeights[key].clientHeight);
     const firstH = heights[0];
     const lastH = heights[heights.length - 1];
     const totH = heights.reduce(
@@ -106,6 +106,7 @@ class TextBox extends Component {
       }
 
       let ref = null;
+      // eslint-disable-next-line
       ref = span => this.spanHeights[`span${index + 1}`] = span;
 
       const childProps = {
@@ -163,7 +164,7 @@ class TextBox extends Component {
       case 'bottom':
         break;
       case 'top':
-        top = calcVPos(0, totH, 1, 11);
+        top = calcVPos(0, totH, 1, 13);
         break;
       case 'left':
         right = '8px';

src/lib/Tooltip/HOC/delayUnmount.jsx → src/lib/Tooltip/delayUnmount.jsx

@@ -18,6 +18,7 @@ export default (ChildComponent) => {
           time
         );
       } else if (!prevProps.show && this.props.show && !mount) {
+        // eslint-disable-next-line
         this.setState({ mount: true });
       }
     }

src/lib/Tooltip/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import delayUnmount from './HOC/delayUnmount';
-import TextBox from './TextBox/TextBox';
-import Arrow from './Arrow/Arrow';
+import delayUnmount from './delayUnmount';
+import TextBox from './TextBox';
+import Arrow from './Arrow';
 
 import './style.css';
 import './animation.css';

src/lib/Tooltip/style.css

@@ -151,4 +151,64 @@
     opacity: 0.01;
     transform: scale(0.8) translateY(0%);
     transition: all 200ms ease-out;
-  }
+  }
+
+/* TextBox related */
+/*+++++++++++++++++*/
+
+.tpTextBox {
+    position: relative;
+}
+
+.tpTextBox span {
+    display: block;
+    cursor: text;
+    box-sizing: border-box;
+}
+
+.tpHover span {  
+    cursor: pointer;
+}
+
+.tpShadowDiv {
+    width: 100%;
+    height: 100%;
+}
+
+.tpShadow {
+    position: absolute;
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.251), 0 0 3px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.15);
+    animation: none;  
+}
+
+.tpNoShadow {
+    position: absolute;
+    animation: none; 
+}
+
+.tpPulse {
+    animation-delay: 500ms;
+    animation: tpPulse 600ms 4;
+}
+
+@keyframes tpPulse {
+    0% {
+        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.251), 0 0 3px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.15);
+    }
+    50% {
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.251), 0 0 1px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.15);
+    }
+    100% {
+        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.251), 0 0 3px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.15);
+    }
+  }
+
+/* Arrow related */
+/* +++++++++++++ */
+
+.tpArrow {
+  transform: rotate(45deg);
+  width: 15px;
+  height: 15px;
+  margin:3px;
+}

src/lib/index.jsx

@@ -3,6 +3,7 @@ import Tooltip from './Tooltip';
 export default Tooltip;
 
 const printMsg = () => {
+  // eslint-disable-next-line
   console.log(`Thanks for choosing react-custom-tooltip!
   We are open for collaboration...get involved!!` .magenta);
 };