Upgrade to material-ui@1 (#31)

webcatalog · May 26, 2018 · 76c1bfd · 76c1bfd
1 parent 4c248da
commit 76c1bfd
Show file tree

Hide file tree

Showing 19 changed files with 638 additions and 531 deletions.
diff --git a/package.json b/package.json
@@ -24,38 +24,38 @@
   },
   "dependencies": {
     "electron-is-dev": "0.3.0",
-    "electron-settings": "3.1.4",
+    "electron-settings": "3.2.0",
     "menubar": "5.2.3"
   },
   "devDependencies": {
+    "@material-ui/core": "1.1.0",
+    "@material-ui/icons": "1.1.0",
     "babel-cli": "6.26.0",
-    "babel-preset-env": "1.6.1",
+    "babel-preset-env": "1.7.0",
     "classnames": "2.2.5",
     "concurrently": "3.5.1",
-    "cross-env": "5.1.4",
+    "cross-env": "5.1.6",
     "del": "3.0.0",
-    "electron": "1.8.4",
-    "electron-builder": "20.4.1",
+    "electron": "2.0.2",
+    "electron-builder": "20.15.1",
     "eslint": "4.19.1",
     "eslint-config-airbnb": "16.1.0",
-    "eslint-plugin-import": "2.9.0",
+    "eslint-plugin-import": "2.12.0",
     "eslint-plugin-jsx-a11y": "6.0.3",
-    "eslint-plugin-react": "7.7.0",
-    "esm": "3.0.18",
-    "fs-extra": "5.0.0",
+    "eslint-plugin-react": "7.8.2",
+    "esm": "3.0.38",
+    "fs-extra": "6.0.1",
     "glob": "7.1.2",
     "history": "4.7.2",
-    "material-ui": "1.0.0-beta.36",
-    "material-ui-icons": "1.0.0-beta.36",
     "mousetrap": "1.6.1",
     "pouchdb-browser": "6.4.3",
     "prop-types": "15.6.1",
-    "react": "16.3.2",
-    "react-dom": "16.3.2",
+    "react": "16.4.0",
+    "react-dom": "16.4.0",
     "react-redux": "5.0.7",
     "react-router": "3.0.5",
     "react-router-redux": "4.0.8",
-    "react-scripts": "1.1.1",
+    "react-scripts": "1.1.4",
     "recordrtc": "5.4.6",
     "redux": "3.7.2",
     "redux-thunk": "2.2.0",

diff --git a/src/components/app.js b/src/components/app.js
@@ -2,14 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { replace, goBack } from 'react-router-redux';
 
-import { CircularProgress } from 'material-ui/Progress';
-import ActionHome from 'material-ui-icons/Home';
-import ActionSettings from 'material-ui-icons/Settings';
-import BottomNavigation, { BottomNavigationAction } from 'material-ui/BottomNavigation';
-import Button from 'material-ui/Button';
-import Paper from 'material-ui/Paper';
-import Snackbar from 'material-ui/Snackbar';
-import ToggleStar from 'material-ui-icons/Star';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import ActionHome from '@material-ui/icons/Home';
+import ActionSettings from '@material-ui/icons/Settings';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
+import Snackbar from '@material-ui/core/Snackbar';
+import ToggleStar from '@material-ui/icons/Star';
 
 import connectComponent from '../helpers/connect-component';
 

diff --git a/src/components/pages/bigger-text.js b/src/components/pages/bigger-text.js
@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { goBack } from 'react-router-redux';
 
-import Typography from 'material-ui/Typography';
-import Button from 'material-ui/Button';
-import CloseIcon from 'material-ui-icons/Close';
-import ZoomInIcon from 'material-ui-icons/ZoomIn';
-import ZoomOutIcon from 'material-ui-icons/ZoomOut';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import CloseIcon from '@material-ui/icons/Close';
+import ZoomInIcon from '@material-ui/icons/ZoomIn';
+import ZoomOutIcon from '@material-ui/icons/ZoomOut';
 
 import connectComponent from '../../helpers/connect-component';
 
@@ -56,15 +56,13 @@ const BiggerText = (props) => {
     <div className={classes.container}>
       <Button
         variant="fab"
-        size="small"
         className={classes.closeButton}
         onClick={onCloseClick}
       >
         <CloseIcon />
       </Button>
       <Button
         variant="fab"
-        size="small"
         className={classes.minusButton}
         onClick={() => {
           if (biggerTextFontSize < 10) return;
@@ -75,7 +73,6 @@ const BiggerText = (props) => {
       </Button>
       <Button
         variant="fab"
-        size="small"
         className={classes.plusButton}
         onClick={() => onUpdateBiggerTextFontSize(biggerTextFontSize + 5)}
       >

diff --git a/src/components/pages/enhanced-menu.js b/src/components/pages/enhanced-menu.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Menu from 'material-ui/Menu';
+import Menu from '@material-ui/core/Menu';
 
 import connectComponent from '../../helpers/connect-component';
 
 const styles = {
   container: {
-    display: 'inline-flex',
+    display: 'inline',
   },
 };
 
@@ -16,20 +16,19 @@ class EnhancedMenu extends React.Component {
     super(props);
 
     this.state = {
-      anchorEl: undefined,
-      open: false,
+      anchorEl: null,
     };
 
     this.handleClick = this.handleClick.bind(this);
-    this.handleRequestClose = this.handleRequestClose.bind(this);
+    this.handleClose = this.handleClose.bind(this);
   }
 
   handleClick(event) {
-    this.setState({ open: true, anchorEl: event.currentTarget });
+    this.setState({ anchorEl: event.currentTarget });
   }
 
-  handleRequestClose() {
-    this.setState({ open: false });
+  handleClose() {
+    this.setState({ anchorEl: null });
   }
 
   render() {
@@ -43,20 +42,20 @@ class EnhancedMenu extends React.Component {
     return (
       <div className={classes.container}>
         {React.cloneElement(buttonElement, {
-          'aria-owns': id,
+          'aria-owns': this.state.anchorEl ? id : null,
           'aria-haspopup': true,
           onClick: this.handleClick,
         })}
         <Menu
           id={id}
           anchorEl={this.state.anchorEl}
-          open={this.state.open}
-          onRequestClose={this.handleRequestClose}
+          open={Boolean(this.state.anchorEl)}
+          onClose={this.handleClose}
         >
           {React.Children.map(children, child => React.cloneElement(child, {
             onClick: () => {
               if (child.props.onClick) child.props.onClick();
-              this.handleRequestClose();
+              this.handleClose();
             },
           }))}
         </Menu>

diff --git a/src/components/pages/home/dictionary.js b/src/components/pages/home/dictionary.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Divider from 'material-ui/Divider';
-import Typography from 'material-ui/Typography';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
 
 import connectComponent from '../../../helpers/connect-component';
 

diff --git a/src/components/pages/home/handwriting.js b/src/components/pages/home/handwriting.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Paper from 'material-ui/Paper';
-import Chip from 'material-ui/Chip';
-import Button from 'material-ui/Button';
+import Paper from '@material-ui/core/Paper';
+import Chip from '@material-ui/core/Chip';
+import Button from '@material-ui/core/Button';
 
 import connectComponent from '../../../helpers/connect-component';
 

diff --git a/src/components/pages/home/history.js b/src/components/pages/home/history.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { LinearProgress } from 'material-ui/Progress';
-import IconButton from 'material-ui/IconButton';
-import List, { ListItem, ListItemText, ListItemSecondaryAction } from 'material-ui/List';
-import ActionDelete from 'material-ui-icons/Delete';
-import Divider from 'material-ui/Divider';
-import Tooltip from 'material-ui/Tooltip';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ActionDelete from '@material-ui/icons/Delete';
+import Divider from '@material-ui/core/Divider';
+import Tooltip from '@material-ui/core/Tooltip';
 
 import connectComponent from '../../../helpers/connect-component';
 

diff --git a/src/components/pages/home/index.js b/src/components/pages/home/index.js
@@ -5,35 +5,39 @@ import { push } from 'react-router-redux';
 import classNames from 'classnames';
 import Mousetrap from 'mousetrap';
 
-import { CircularProgress } from 'material-ui/Progress';
-import { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
-import AppBar from 'material-ui/AppBar';
-import Button from 'material-ui/Button';
-import Card, { CardActions, CardContent } from 'material-ui/Card';
-import IconButton from 'material-ui/IconButton';
-import Paper from 'material-ui/Paper';
-import Toolbar from 'material-ui/Toolbar';
-import Typography from 'material-ui/Typography';
-
-import ActionSwapHoriz from 'material-ui-icons/SwapHoriz';
-import ContentClear from 'material-ui-icons/Clear';
-import NavigationMoreVert from 'material-ui-icons/MoreVert';
-import ImageCameraAlt from 'material-ui-icons/CameraAlt';
-import ImageImage from 'material-ui-icons/Image';
-import ContentGesture from 'material-ui-icons/Gesture';
-import AVVolumeUp from 'material-ui-icons/VolumeUp';
-import AVStop from 'material-ui-icons/Stop';
-import AVMic from 'material-ui-icons/Mic';
-import ContentCopy from 'material-ui-icons/ContentCopy';
-import ContentPaste from 'material-ui-icons/ContentPaste';
-import SocialShare from 'material-ui-icons/Share';
-import EditorFormatSize from 'material-ui-icons/FormatSize';
-import ActionSwapVert from 'material-ui-icons/SwapVert';
-import ToggleStarBorder from 'material-ui-icons/StarBorder';
-import ToggleStar from 'material-ui-icons/Star';
-import NavigationFullscreen from 'material-ui-icons/Fullscreen';
-import NavigationFullscreenExit from 'material-ui-icons/FullscreenExit';
-import Tooltip from 'material-ui/Tooltip';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import AppBar from '@material-ui/core/AppBar';
+import Button from '@material-ui/core/Button';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import IconButton from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+
+import ActionSwapHoriz from '@material-ui/icons/SwapHoriz';
+import ContentClear from '@material-ui/icons/Clear';
+import NavigationMoreVert from '@material-ui/icons/MoreVert';
+import ImageCameraAlt from '@material-ui/icons/CameraAlt';
+import ImageImage from '@material-ui/icons/Image';
+import ContentGesture from '@material-ui/icons/Gesture';
+import AVVolumeUp from '@material-ui/icons/VolumeUp';
+import AVStop from '@material-ui/icons/Stop';
+import AVMic from '@material-ui/icons/Mic';
+import ContentCopy from '@material-ui/icons/ContentCopy';
+import ContentPaste from '@material-ui/icons/ContentPaste';
+import SocialShare from '@material-ui/icons/Share';
+import EditorFormatSize from '@material-ui/icons/FormatSize';
+import ActionSwapVert from '@material-ui/icons/SwapVert';
+import ToggleStarBorder from '@material-ui/icons/StarBorder';
+import ToggleStar from '@material-ui/icons/Star';
+import NavigationFullscreen from '@material-ui/icons/Fullscreen';
+import NavigationFullscreenExit from '@material-ui/icons/FullscreenExit';
+import Tooltip from '@material-ui/core/Tooltip';
 
 import connectComponent from '../../../helpers/connect-component';
 
@@ -719,11 +723,9 @@ class Home extends React.Component {
                   <EnhancedMenu
                     id="homeMore"
                     buttonElement={(
-                      <Tooltip title={strings.more} placement={fullscreenInputBox ? 'top' : 'bottom'}>
-                        <IconButton aria-label={strings.more}>
-                          <NavigationMoreVert />
-                        </IconButton>
-                      </Tooltip>
+                      <IconButton aria-label={strings.more}>
+                        <NavigationMoreVert />
+                      </IconButton>
                     )}
                   >
                     {

diff --git a/src/components/pages/home/speech.js b/src/components/pages/home/speech.js
@@ -4,11 +4,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import Paper from 'material-ui/Paper';
-import Button from 'material-ui/Button';
-import { CircularProgress } from 'material-ui/Progress';
-import AVMic from 'material-ui-icons/Mic';
-import AVStop from 'material-ui-icons/Stop';
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import AVMic from '@material-ui/icons/Mic';
+import AVStop from '@material-ui/icons/Stop';
 
 import connectComponent from '../../../helpers/connect-component';
 

diff --git a/src/components/pages/language-list.js b/src/components/pages/language-list.js
@@ -3,16 +3,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { goBack } from 'react-router-redux';
 
-import AppBar from 'material-ui/AppBar';
-import CloseIcon from 'material-ui-icons/Close';
-import Divider from 'material-ui/Divider';
-import IconButton from 'material-ui/IconButton';
-import List, { ListItem, ListItemText } from 'material-ui/List';
-import ListSubheader from 'material-ui/List/ListSubheader';
-import Input from 'material-ui/Input/Input';
-import Toolbar from 'material-ui/Toolbar';
-import Typography from 'material-ui/Typography';
-import grey from 'material-ui/colors/grey';
+import AppBar from '@material-ui/core/AppBar';
+import CloseIcon from '@material-ui/icons/Close';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Input from '@material-ui/core/Input/Input';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import grey from '@material-ui/core/colors/grey';
 
 import connectComponent from '../../helpers/connect-component';
 

diff --git a/src/components/pages/ocr.js b/src/components/pages/ocr.js
@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { goBack } from 'react-router-redux';
 
-import Button from 'material-ui/Button';
-import CloseIcon from 'material-ui-icons/Close';
-import NavigationMoreVert from 'material-ui-icons/MoreVert';
-import { MenuItem } from 'material-ui/Menu';
-import IconButton from 'material-ui/IconButton';
-import ZoomInIcon from 'material-ui-icons/ZoomIn';
-import ZoomOutIcon from 'material-ui-icons/ZoomOut';
+import Button from '@material-ui/core/Button';
+import CloseIcon from '@material-ui/icons/Close';
+import NavigationMoreVert from '@material-ui/icons/MoreVert';
+import MenuItem from '@material-ui/core/MenuItem';
+import IconButton from '@material-ui/core/IconButton';
+import ZoomInIcon from '@material-ui/icons/ZoomIn';
+import ZoomOutIcon from '@material-ui/icons/ZoomOut';
 
 import connectComponent from '../../helpers/connect-component';