Update MaterialUI

2019-06-14 11:25:32 +02:00
parent 3935b1d614
commit 6176859c7c
14 changed files with 370 additions and 356 deletions
--- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
@@ -8,7 +8,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'

 import {
  Button,
@@ -172,33 +172,31 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => {
-  return {
-    fullWidth: {
-      width: '100%',
-    },
-    gridPadding: {
-      padding: '0 12px !important',
-    },
-    topicList: {
-      height: '180px',
-      overflowY: 'scroll' as 'scroll',
-      margin: '8px 16px',
-      backgroundColor: theme.palette.background.default,
-    },
-    button: {
-      marginTop: theme.spacing(3),
-      float: 'right',
-    },
-    certificateName: {
-      width: '100%',
-      height: 'calc(1em + 4px)',
-      overflow: 'hidden' as 'hidden',
-      whiteSpace: 'nowrap' as 'nowrap',
-      textOverflow: 'ellipsis' as 'ellipsis',
-      color: theme.palette.text.hint,
-    },
-  }
-}
+const styles = (theme: Theme) => ({
+  fullWidth: {
+    width: '100%',
+  },
+  gridPadding: {
+    padding: '0 12px !important',
+  },
+  topicList: {
+    height: '180px',
+    overflowY: 'scroll' as 'scroll',
+    margin: '8px 16px',
+    backgroundColor: theme.palette.background.default,
+  },
+  button: {
+    marginTop: theme.spacing(3),
+    float: 'right' as 'right',
+  },
+  certificateName: {
+    width: '100%',
+    height: 'calc(1em + 4px)',
+    overflow: 'hidden' as 'hidden',
+    whiteSpace: 'nowrap' as 'nowrap',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    color: theme.palette.text.hint,
+  },
+})

 export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
--- a/app/src/components/ConnectionSetup/ConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSettings.tsx
@@ -10,7 +10,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, connectionManagerActions } from '../../actions'
 import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'

 import {
  Button,
@@ -321,21 +321,19 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => {
-  return {
-    textField: {
-      width: '100%',
-    },
-    switch: {
-      marginTop: 0,
-    },
-    button: {
-      margin: theme.spacing(1),
-    },
-    inputFormControl: {
-      marginTop: '16px',
-    },
-  }
-}
+const styles = (theme: Theme) => ({
+  textField: {
+    width: '100%',
+  },
+  switch: {
+    marginTop: 0,
+  },
+  button: {
+    margin: theme.spacing(1),
+  },
+  inputFormControl: {
+    marginTop: '16px',
+  },
+})

 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
--- a/app/src/components/Layout/PauseButton.tsx
+++ b/app/src/components/Layout/PauseButton.tsx
@@ -7,10 +7,9 @@ import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { treeActions } from '../../actions'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import { Tooltip } from '@material-ui/core'
+import { withStyles, Theme } from '@material-ui/core/styles'

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  icon: {
    color: theme.palette.primary.contrastText,
    verticalAlign: 'middle' as 'middle',
--- a/app/src/components/Layout/TitleBar.tsx
+++ b/app/src/components/Layout/TitleBar.tsx
@@ -3,13 +3,14 @@ import ClearAdornment from '../helper/ClearAdornment'
 import CloudOff from '@material-ui/icons/CloudOff'
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
 import Menu from '@material-ui/icons/Menu'
+import PauseButton from './PauseButton'
 import Search from '@material-ui/icons/Search'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { connectionActions, settingsActions, globalActions } from '../../actions'
+import { connectionActions, globalActions, settingsActions } from '../../actions'
 import { fade } from '@material-ui/core/styles/colorManipulator'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import {
  AppBar,
  Button,
@@ -18,18 +19,17 @@ import {
  Toolbar,
  Typography,
 } from '@material-ui/core'
-import PauseButton from './PauseButton'

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  title: {
-    display: 'none',
+    display: 'none' as 'none',
    [theme.breakpoints.up(750)]: {
-      display: 'block',
+      display: 'block' as 'block',
    },
    whiteSpace: 'nowrap' as 'nowrap',
  },
  search: {
-    position: 'relative',
+    position: 'relative' as 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
@@ -44,11 +44,11 @@ const styles: StyleRulesCallback = theme => ({
      maxWidth: '30%',

      marginLeft: theme.spacing(4),
-      width: 'auto',
+      width: 'auto' as 'auto',
    },
    [theme.breakpoints.up(750)]: {
      marginLeft: theme.spacing(4),
-      width: 'auto',
+      width: 'auto' as 'auto',
    },
  },
  disconnectIcon: {
@@ -61,14 +61,14 @@ const styles: StyleRulesCallback = theme => ({
  searchIcon: {
    width: theme.spacing(6),
    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+    position: 'absolute' as 'absolute',
+    pointerEvents: 'none' as 'none',
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+    justifyContent: 'center' as 'center',
  },
  inputRoot: {
-    color: 'inherit',
+    color: 'inherit' as 'inherit',
    width: '100%',
  },
  inputInput: {
--- a/app/src/components/SettingsDrawer/BrokerStatistics.tsx
+++ b/app/src/components/SettingsDrawer/BrokerStatistics.tsx
@@ -2,7 +2,7 @@ import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { StyleRulesCallback, withStyles, Theme } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { Typography } from '@material-ui/core'
 import { Base64Message } from '../../../../backend/src/Model/Base64Message'
@@ -15,7 +15,7 @@ interface Stats {
  title: string
 }

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  flex: {
    display: 'flex',
    width: '100%',
--- a/app/src/components/SettingsDrawer/Settings.tsx
+++ b/app/src/components/SettingsDrawer/Settings.tsx
@@ -2,12 +2,13 @@ import * as React from 'react'
 import BooleanSwitch from './BooleanSwitch'
 import BrokerStatistics from './BrokerStatistics'
 import ChevronRight from '@material-ui/icons/ChevronRight'
+import TimeLocale from './TimeLocale'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { globalActions, settingsActions } from '../../actions'
 import { shell } from 'electron'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicOrder } from '../../reducers/Settings'

 import {
@@ -21,7 +22,6 @@ import {
  Typography,
  Tooltip,
 } from '@material-ui/core'
-import TimeLocale from './TimeLocale';

 export const autoExpandLimitSet = [{
  limit: 0,
@@ -43,7 +43,7 @@ export const autoExpandLimitSet = [{
  name: 'All',
 }]

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  drawer: {
    backgroundColor: theme.palette.background.default,
    flexShrink: 0,
--- a/app/src/components/SettingsDrawer/TimeLocale.tsx
+++ b/app/src/components/SettingsDrawer/TimeLocale.tsx
@@ -8,7 +8,8 @@ import {
  InputLabel,
  MenuItem,
  Select,
-  StyleRulesCallback
+  StyleRulesCallback,
+  Theme
  } from '@material-ui/core'
 import { settingsActions } from '../../actions'
 import { withStyles } from '@material-ui/styles'
@@ -69,16 +70,16 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  input: {
    minWidth: '150px',
    margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`,
  },
  selected: {
    '& div': {
-      display: 'none'
-    }
-  }
+      display: 'none',
+    },
+  },
 })

 export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TimeLocaleSettings))
--- a/app/src/components/Sidebar/Publish/Publish.tsx
+++ b/app/src/components/Sidebar/Publish/Publish.tsx
@@ -10,7 +10,6 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { default as AceEditor } from 'react-ace'
 import { globalActions, publishActions } from '../../../actions'
-import { TopicViewModel } from '../../../model/TopicViewModel'
 import 'brace/mode/json'
 import 'brace/theme/dawn'
 import 'brace/theme/monokai'
@@ -301,7 +300,7 @@ class Publish extends React.Component<Props, State> {
  private renderEditor() {
    return (
      <AceEditor
-        style=""
+        style={{}}
        mode={this.props.editorMode}
        theme={this.props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
        name="UNIQUE_ID_OF_DIV"
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -11,7 +11,7 @@ import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'

 import {
@@ -186,24 +186,22 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => {
-  return {
-    drawer: {
-      display: 'block',
-      height: '100%',
-    },
-    badge: {
-      top: '3px',
-      right: '3px',
-    },
-    valuePaper: {
-      margin: theme.spacing(1),
-    },
-    heading: {
-      fontSize: theme.typography.pxToRem(15),
-      fontWeight: theme.typography.fontWeightRegular,
-    },
-  }
-}
+const styles = (theme: Theme) => ({
+  drawer: {
+    display: 'block' as 'block',
+    height: '100%',
+  },
+  badge: {
+    top: '3px',
+    right: '3px',
+  },
+  valuePaper: {
+    margin: theme.spacing(1),
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+})

 export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
--- a/app/src/components/Sidebar/Topic.tsx
+++ b/app/src/components/Sidebar/Topic.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import Button from '@material-ui/core/Button'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+import { withStyles, Theme } from '@material-ui/core/styles'
 import { treeActions } from '../../actions'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -16,9 +16,9 @@ interface Props {
  didSelectNode: (node: q.TreeNode<TopicViewModel>) => void
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => ({
+const styles = (theme: Theme) => ({
  button: {
-    textTransform: 'none',
+    textTransform: 'none' as 'none',
    padding: '3px 5px 3px 5px',
    minWidth: '30px',
  },
--- a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
@@ -184,19 +184,17 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => {
-  return {
-    heading: {
-      fontSize: theme.typography.pxToRem(15),
-      fontWeight: theme.typography.fontWeightRegular,
-    },
-    toggleButton: {
-      height: '36px',
-    },
-    toggleButtonIcon: {
-      verticalAlign: 'middle',
-    },
-  }
-}
+const styles = (theme: Theme) => ({
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+  toggleButton: {
+    height: '36px',
+  },
+  toggleButtonIcon: {
+    verticalAlign: 'middle',
+  },
+})

 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))
--- a/app/src/components/helper/ConnectionHealthIndicator.tsx
+++ b/app/src/components/helper/ConnectionHealthIndicator.tsx
@@ -4,10 +4,10 @@ import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
 import { ConnectionHealth } from '../../reducers/Connection'
 import { green, orange, red } from '@material-ui/core/colors'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { withStyles, Theme } from '@material-ui/core/styles'
 import { Tooltip } from '@material-ui/core'

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  offline: {
    color: red[700],
  },