[DDW-673] Consolidate multiple tooltips version

input-output-hk · Jun 5, 2019 · 82a419d · 82a419d
1 parent f35a147
commit 82a419d
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 61 deletions.
diff --git a/source/renderer/app/components/staking/stake-pools/StakePool.js b/source/renderer/app/components/staking/stake-pools/StakePool.js
@@ -7,11 +7,14 @@ import clockIcon from '../../../assets/images/clock.inline.svg';
 import styles from './StakePool.scss';
 import { getHSLColor } from '../../../utils/colors';
 import type { StakePoolProps } from '../../../api/staking/types';
+import StakePoolTooltip from './StakePoolTooltip';
 
 type Props = {
-  stakePool: StakePoolProps,
+  ...$Exact<StakePoolProps>,
   ranking: number,
+  onOpenExternalLink: Function,
   onClick: Function,
+  onClose: Function,
   isSelected: boolean,
   currentTheme: string,
   flipHorizontal: boolean,

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolTooltip.js b/source/renderer/app/components/staking/stake-pools/StakePoolTooltip.js
@@ -47,10 +47,11 @@ const messages = defineMessages({
 });
 
 type Props = {
-  stakePool: StakePoolProps,
+  ...$Exact<StakePoolProps>,
   ranking: number,
   onOpenExternalLink: Function,
   onClick: Function,
+  visible: boolean,
   currentTheme: string,
   flipHorizontal: boolean,
   flipVertical: boolean,
@@ -68,19 +69,12 @@ export default class StakePool extends Component<Props> {
 
   render() {
     const { intl } = this.context;
-    const {
-      stakePool,
-      ranking,
-      onOpenExternalLink,
-      onClick,
-      currentTheme,
-    } = this.props;
-
     const {
       id,
       name,
       description,
       url,
+      ranking,
       controlledStake,
       profitMargin,
       performance,
@@ -103,7 +97,7 @@ export default class StakePool extends Component<Props> {
     const lighnessOffset = currentTheme === 'dark-blue' ? -20 : 0;
 
     return (
-      <div className={styles.component}>
+      <div className={componentClassnames}>
         <h3 className={styles.name}>{name}</h3>
         <button className={styles.closeButton} onClick={onClick}>
           <SVGInline svg={closeCross} />

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolTooltip.scss b/source/renderer/app/components/staking/stake-pools/StakePoolTooltip.scss
@@ -6,6 +6,7 @@
   border-radius: 5px;
   border: 1px solid var(--theme-staking-stake-pool-tooltip-border-color);
   box-shadow: 0 5px 20px 0 var(--theme-staking-stake-pool-tooltip-shadow-color);
+  display: none;
   left: 50px;
   margin: 20px;
   padding: 20px;
@@ -112,6 +113,10 @@
   }
 }
 
+.visible {
+  display: block;
+}
+
 .name {
   color: var(--theme-staking-stake-pool-tooltip-text-color);
   font-size: 16px;

diff --git a/source/renderer/app/components/staking/stake-pools/StakingStakePools.js b/source/renderer/app/components/staking/stake-pools/StakingStakePools.js
@@ -8,8 +8,6 @@ import { Input } from 'react-polymorph/lib/components/Input';
 import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import StakePool from './StakePool';
 import type { StakePoolProps } from '../../../api/staking/types';
-import DynamicTooltip from '../../widgets/DynamicTooltip';
-import StakePoolTooltip from './StakePoolTooltip';
 
 import searchIcon from '../../../assets/images/search.inline.svg';
 import styles from './StakingStakePools.scss';
@@ -199,22 +197,12 @@ export default class StakingStakePools extends Component<Props, State> {
           </ul>
         </div>
 
-        <DynamicTooltip isVisible={!!selectedIndex}>
-          <StakePoolTooltip
-            stakePool={selectedPool}
-            className={styles.tooltip}
-            onClick={this.handleClose}
-            currentTheme={currentTheme}
-            onOpenExternalLink={onOpenExternalLink}
-          />
-        </DynamicTooltip>
-
         <h2>{intl.formatMessage(messages.delegatingListTitle)}</h2>
 
         <div className={styles.stakePoolsDelegatingList}>
           {stakePoolsDelegatingList.map(stakePool => (
             <StakePool
-              stakePool={stakePool}
+              {...stakePool}
               key={stakePool.id}
               ranking={this.getRanking(stakePool.index)}
               isSelected={this.isSelected(
@@ -245,9 +233,10 @@ export default class StakingStakePools extends Component<Props, State> {
         <div className={styles.stakePoolsList}>
           {this.props.stakePoolsList.map(stakePool => (
             <StakePool
-              stakePool={stakePool}
+              {...stakePool}
               key={stakePool.id}
               ranking={this.getRanking(stakePool.index)}
+              onOpenExternalLink={onOpenExternalLink}
               isSelected={this.isSelected('selectedIndexList', stakePool.index)}
               onClose={this.handleClose}
               onClick={(...params) =>

diff --git a/source/renderer/app/components/widgets/DynamicTooltip.js b/source/renderer/app/components/widgets/DynamicTooltip.js
diff --git a/source/renderer/app/components/widgets/DynamicTooltip.scss b/source/renderer/app/components/widgets/DynamicTooltip.scss