Refactor CustomIconButtons

app/src/actions/Connection.ts

@@ -1,13 +1,13 @@
 import * as q from '../../../backend/src/Model'
 import * as url from 'url'
 import { Action, ActionTypes } from '../reducers/Connection'
-import { Action as SettingsAction, ActionTypes as SettingsActionTypes } from '../reducers/Settings'
+import { ActionTypes as SettingsActionTypes } from '../reducers/Settings'
 import { AppState } from '../reducers'
 import { DataSourceState, MqttOptions } from '../../../backend/src/DataSource'
 import { Dispatch } from 'redux'
 import { globalActions } from '.'
+import { resetStore as resetTreeStore, showTree } from './Tree'
 import { showError } from './Global'
-import { showTree, resetStore as resetTreeStore } from './Tree'
 import { TopicViewModel } from '../model/TopicViewModel'
 import {
   addMqttConnectionEvent,

app/src/components/Layout/PauseButton.tsx

@@ -71,12 +71,8 @@ class PauseButton extends React.Component<Props, {changes: number}> {
     return (
       <div style={{ display: 'inline-flex' }}>
         <span>
-          <CustomIconButton onClick={this.props.actions.tree.togglePause} >
-            <Tooltip title={message}>
-              <div /* Required so tooltip does not loose the anchor when the icon changes */>
-                {this.props.paused ? <Resume className={this.props.classes.icon} /> : <Pause className={this.props.classes.icon} />}
-              </div>
-            </Tooltip>
+          <CustomIconButton onClick={this.props.actions.tree.togglePause} tooltip={message}>
+            {this.props.paused ? <Resume className={this.props.classes.icon} /> : <Pause className={this.props.classes.icon} />}
           </CustomIconButton>
         </span>
         {this.props.paused ? this.renderBufferStats() : null}

app/src/components/Sidebar/Sidebar.tsx

@@ -70,12 +70,8 @@ class Sidebar extends React.Component<Props, State> {
     }
 
     return (
-      <CustomIconButton onClick={() => this.deleteTopic(this.props.node)}>
-        <Tooltip title="Clear this topic">
-          <span>
-            <Delete />
-          </span>
-        </Tooltip>
+      <CustomIconButton onClick={() => this.deleteTopic(this.props.node)} tooltip="Clear this topic">
+        <Delete />
       </CustomIconButton>
     )
   }
@@ -88,17 +84,15 @@ class Sidebar extends React.Component<Props, State> {
     }
 
     return (
-      <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}>
-        <Tooltip title={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
-          <Badge
-            classes={{ badge: this.props.classes.badge }}
-            badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
-            color="secondary"
-          >
-            <Delete color="action" />
-          </Badge>
-        </Tooltip>
-      </CustomIconButton>
+      <Badge
+        classes={{ badge: this.props.classes.badge }}
+        badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
+        color="secondary"
+      >
+        <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
+          <Delete color="action" />
+        </CustomIconButton>
+      </Badge>
     )
   }
 

app/src/components/helper/Copy.tsx

@@ -48,13 +48,11 @@ class Copy extends React.Component<Props, State> {
 
     return (
       <span>
-        <Tooltip placement="top" title="Copy to clipboard">
-          <span style={{ fontSize: '16px' }}>
-            <CustomIconButton onClick={this.handleClick} >
-              {icon}
-            </CustomIconButton>
-          </span>
-        </Tooltip>
+        <span style={{ fontSize: '16px' }}>
+          <CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
+            {icon}
+          </CustomIconButton>
+        </span>
         <Snackbar
           anchorOrigin={{
             vertical: 'bottom',

app/src/components/helper/CustomIconButton.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
-import { IconButton } from '@material-ui/core'
+import { IconButton, Tooltip } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
 
 interface Props {
-  onClick: any,
-  classes: any,
+  onClick: any
+  tooltip: string
+  classes: any
 }
 
 const styles = (theme: Theme) => ({
@@ -26,7 +27,11 @@ class CustomIconButton extends React.Component<Props, {}> {
 
   public render() {
     return (
-      <IconButton className={this.props.classes.button} onClick={this.onClick}>{this.props.children}</IconButton>
+      <IconButton className={this.props.classes.button} onClick={this.onClick}>
+        <Tooltip title={this.props.tooltip}>
+          <span>{this.props.children}</span>
+        </Tooltip>
+      </IconButton>
     )
   }
 }