Skip to content
Permalink
Browse files

further refactoring

  • Loading branch information...
Justin Rhodes
Justin Rhodes committed Nov 2, 2018
1 parent ec5bcc5 commit 1748ba01d34cdbf4585dbbe86a664a2ea1556cac
@@ -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"
}
}
File renamed without changes.
@@ -75,6 +75,6 @@
"moduleNameMapper": {
"\\.(css)$": "jest-css-modules"
},
"setupTestFrameworkScriptFile": "<rootDir>/enzyme-setup.js"
"setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js"
}
}
}
@@ -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}
</>
);
}
@@ -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';
@@ -1,5 +1,4 @@
import React from 'react'; //
import './arrow.css';

const Arrow = ({
moveRight,

This file was deleted.

@@ -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';

This file was deleted.

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

0 comments on commit 1748ba0

Please sign in to comment.
You can’t perform that action at this time.