Replace react-mdl with material-ui

kokororin · Jun 26, 2018 · c1efbe2 · c1efbe2
1 parent 91a674f
commit c1efbe2
Show file tree

Hide file tree

Showing 22 changed files with 717 additions and 1,638 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,8 @@ Table of Contents
 * redux
 * redux-thunk
 * react-redux
-* react-mdl
+* react-intl
+* material-ui
 * whatwg-fetch
 
 ## Online Site

diff --git a/build/webpack.config.base.js b/build/webpack.config.base.js
@@ -4,7 +4,8 @@ const webpack = require('webpack');
 module.exports = {
   output: {
     path: path.join(__dirname, '/../dist'),
-    filename: process.env.NODE_ENV === 'production' ? 'app.[hash].js' : 'app.js',
+    filename:
+      process.env.NODE_ENV === 'production' ? 'app.[hash].js' : 'app.js',
     publicPath: '/'
   },
   resolve: {
@@ -23,7 +24,7 @@ module.exports = {
       },
       {
         test: /(\.scss|\.css)$/,
-        exclude: /node_modules|material-design-lite\.scss/,
+        exclude: /node_modules/,
         use: [
           'style-loader',
           {
@@ -41,7 +42,7 @@ module.exports = {
       },
       {
         test: /(\.scss|\.css)$/,
-        include: /node_modules|material-design-lite\.scss/,
+        include: /node_modules/,
         use: [
           'style-loader',
           {

diff --git a/package.json b/package.json
@@ -95,14 +95,15 @@
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
+    "@material-ui/core": "^1.2.3",
+    "@material-ui/docs": "^1.0.0-alpha.3",
+    "@material-ui/icons": "^1.1.0",
     "animation-frame": "^0.3.0",
     "autobind-decorator": "^1.4.1",
     "classlist-polyfill": "^1.2.0",
     "classnames": "^2.2.5",
     "inobounce": "^0.1.6",
     "jszip": "^3.1.4",
-    "material-design-icons": "^3.0.1",
-    "material-design-lite": "^1.2.1",
     "moment": "^2.16.0",
     "namespaced-types": "^0.1.2",
     "prop-types": "^15.5.10",
@@ -114,7 +115,6 @@
     "react-image": "^1.0.1",
     "react-intl": "^2.4.0",
     "react-masonry-component": "^6.2.1",
-    "react-mdl": "^1.10.3",
     "react-modal": "^3.3.1",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.1.2",

diff --git a/src/components/Comment.js b/src/components/Comment.js
@@ -4,8 +4,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
 import Img from 'react-image';
-import ListItem from 'react-mdl/lib/List/ListItem';
-import ListItemContent from 'react-mdl/lib/List/ListItemContent';
 import EmojiParser from '@/utils/EmojiParser';
 
 const Comment = ({ item }) => {
@@ -19,27 +17,27 @@ const Comment = ({ item }) => {
   }
 
   return (
-    <ListItem>
-      <ListItemContent
-        avatar={
-          <div>
-            <Img
-              src={[item.user.profile_image_urls.medium]}
-              loader={
-                <img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" />
-              }
-            />
-          </div>
-        }>
-        {item.user.name}
-        <span
-          styleName="comment-content"
-          dangerouslySetInnerHTML={{
-            __html: EmojiParser.parse(item.comment)
-          }}
-        />
-      </ListItemContent>
-    </ListItem>
+    <li styleName="comment-list-item">
+      <span styleName="comment-main">
+        <div styleName="comment-avatar">
+          <Img
+            src={[item.user.profile_image_urls.medium]}
+            loader={
+              <img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" />
+            }
+          />
+        </div>
+        <span>
+          {item.user.name}
+          <span
+            styleName="comment-content"
+            dangerouslySetInnerHTML={{
+              __html: EmojiParser.parse(item.comment)
+            }}
+          />
+        </span>
+      </span>
+    </li>
   );
 };
 

diff --git a/src/components/InfiniteScroll.js b/src/components/InfiniteScroll.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default class InfiniteScroll extends React.Component {
-  static scrollingClassName = 'mdl-layout__content';
+import ScrollContext from '@/components/ScrollContext';
 
+export default class InfiniteScroll extends React.Component {
   static propTypes = {
     distance: PropTypes.number.isRequired,
     onLoadMore: PropTypes.func.isRequired,
@@ -44,7 +44,7 @@ export default class InfiniteScroll extends React.Component {
   }
 
   get scrollingElement() {
-    return document.querySelector(`.${InfiniteScroll.scrollingClassName}`);
+    return document.querySelector(`.${ScrollContext.scrollingClassName}`);
   }
 
   render() {

diff --git a/src/components/Item.js b/src/components/Item.js
@@ -5,7 +5,9 @@ import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'react-mdl/lib/Icon';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import TrendingDownIcon from '@material-ui/icons/TrendingDown';
+import StarIcon from '@material-ui/icons/Star';
 
 @CSSModules(styles, { allowMultiple: true })
 export default class Item extends React.Component {
@@ -34,7 +36,7 @@ export default class Item extends React.Component {
         this.setState({
           width: offsetWidth,
           // eslint-disable-next-line prettier/prettier
-          height: offsetWidth * height / width
+          height: (offsetWidth * height) / width
         });
         clearInterval(this.wait);
       }
@@ -76,9 +78,9 @@ export default class Item extends React.Component {
 
     const icon =
       this.props.item.previous_rank < this.props.item.rank ? (
-        <Icon styleName="trending-down" name="trending_down" />
+        <TrendingDownIcon style={{ color: '#3f51b5' }} />
       ) : (
-        <Icon styleName="trending-up" name="trending_up" />
+        <TrendingUpIcon style={{ color: '#d32f2f' }} />
       );
 
     return (
@@ -142,7 +144,7 @@ export default class Item extends React.Component {
           ) : (
             <div styleName="meta">
               <span styleName="count">
-                <Icon name="star" />
+                <StarIcon />
                 {this.props.item.stats.favorited_count.public +
                   this.props.item.stats.favorited_count.private}
               </span>

diff --git a/src/components/Loading.js b/src/components/Loading.js
@@ -3,12 +3,12 @@ import styles from '@/styles/Message.scss';
 import React from 'react';
 import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
-import Spinner from 'react-mdl/lib/Spinner';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 const Loading = ({ isHidden }) => {
   return isHidden ? null : (
     <div styleName="message">
-      <Spinner />
+      <CircularProgress size={30} />
     </div>
   );
 };

diff --git a/src/components/Login.js b/src/components/Login.js
@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
 import Modal from 'react-modal';
 import classNames from 'classnames';
-import Button from 'react-mdl/lib/Button';
-import Textfield from 'react-mdl/lib/Textfield';
-import Icon from 'react-mdl/lib/Icon';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import ClearIcon from '@material-ui/icons/Clear';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import moment from '@/utils/moment';
 import Storage from '@/utils/Storage';
@@ -111,36 +111,34 @@ export default class Login extends React.Component {
     }
     return (
       <React.Fragment>
-        <Textfield
+        <TextField
           onChange={event => this.setUsername(event.target.value)}
           value={this.getUsername()}
           label={this.props.intl.formatMessage({
             id: 'Email Address / pixiv ID'
           })}
-          spellCheck={false}
-          floatingLabel
-          style={{ width: '100%' }}
+          fullWidth
+          margin="normal"
         />
-        <Textfield
+        <TextField
           type="password"
           onChange={event => this.setPassword(event.target.value)}
           value={this.getPassword()}
           label={this.props.intl.formatMessage({
             id: 'Password'
           })}
-          floatingLabel
-          style={{ width: '100%' }}
+          fullWidth
+          margin="normal"
         />
         <div styleName="footer">
           <Button
+            variant="contained"
+            color="secondary"
             className={classNames({
               'fn-disallow': this.props.isSubmitting
             })}
             onClick={this.props.onLoginClick}
-            disabled={this.props.isSubmitting}
-            raised
-            accent
-            ripple>
+            disabled={this.props.isSubmitting}>
             <FormattedMessage
               id={this.props.isSubmitting ? 'Wait a Moment' : 'Login'}
             />
@@ -159,7 +157,7 @@ export default class Login extends React.Component {
         onRequestClose={this.close}
         contentLabel="login-modal">
         <div styleName="clear" onClick={this.close}>
-          <Icon name="clear" />
+          <ClearIcon />
         </div>
         <div styleName="form">
           <div styleName="fields">{this.renderContent()}</div>

diff --git a/src/components/Refresh.js b/src/components/Refresh.js
@@ -4,14 +4,14 @@ import styles from '@/styles/Button.scss';
 import React from 'react';
 import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
-import FABButton from 'react-mdl/lib/FABButton';
-import Icon from 'react-mdl/lib/Icon';
+import Button from '@material-ui/core/Button';
+import RefreshIcon from '@material-ui/icons/Refresh';
 
 const Refresh = props => (
   <div styleName="float-btn">
-    <FABButton {...props} colored ripple>
-      <Icon name="refresh" />
-    </FABButton>
+    <Button variant="fab" color="secondary" aria-label="add" {...props}>
+      <RefreshIcon />
+    </Button>
   </div>
 );
 

diff --git a/src/components/ScrollContext.js b/src/components/ScrollContext.js
@@ -1,10 +1,16 @@
+import styles from '@/styles/Base.scss';
+
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 
 @withRouter
 export default class ScrollContext extends React.Component {
   static prefix = '@@SCROLL/';
-  static scrollingClassName = 'mdl-layout__content';
+  static scrollingClassName = styles['scroll-context-container'];
+
+  static Container = props => (
+    <div className={ScrollContext.scrollingClassName} {...props} />
+  );
 
   constructor(props) {
     super(props);
@@ -45,6 +51,12 @@ export default class ScrollContext extends React.Component {
   }
 
   render() {
-    return this.props.children;
+    return (
+      <div className={styles['scroll-context']}>
+        <div className={styles['scroll-context-inner-container']}>
+          {this.props.children}
+        </div>
+      </div>
+    );
   }
 }
diff --git a/src/containers/AppContainer.js b/src/containers/AppContainer.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import { Router, Route, Switch } from 'react-router-dom';
-import 'react-mdl/extra/material.js';
-import 'material-design-icons/iconfont/material-icons.css';
-import '@/styles/mdl/material-design-lite.scss';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import blue from '@material-ui/core/colors/blue';
+import red from '@material-ui/core/colors/red';
 import '@/styles/Base.scss';
-import '@/styles/Reset.scss';
 
 import { history } from '@/stores';
 import GalleryContainer from '@/containers/GalleryContainer';
@@ -15,19 +14,28 @@ import NotFoundContainer from '@/containers/NotFoundContainer';
 import ScrollContext from '@/components/ScrollContext';
 import TrackPageView from '@/components/TrackPageView';
 
+const theme = createMuiTheme({
+  palette: {
+    primary: { main: blue[500] },
+    secondary: { main: red.A200 }
+  }
+});
+
 const AppContainer = () => (
-  <Router history={history}>
-    <ScrollContext>
-      <TrackPageView>
-        <Switch>
-          <Route exact path="/" component={GalleryContainer} />
-          <Route path="/illust/:illustId(\d+)" component={IllustContainer} />
-          <Route path="/:illustId(\d+)" component={RedirectContainer} />
-          <Route component={NotFoundContainer} />
-        </Switch>
-      </TrackPageView>
-    </ScrollContext>
-  </Router>
+  <MuiThemeProvider theme={theme}>
+    <Router history={history}>
+      <ScrollContext>
+        <TrackPageView>
+          <Switch>
+            <Route exact path="/" component={GalleryContainer} />
+            <Route path="/illust/:illustId(\d+)" component={IllustContainer} />
+            <Route path="/:illustId(\d+)" component={RedirectContainer} />
+            <Route component={NotFoundContainer} />
+          </Switch>
+        </TrackPageView>
+      </ScrollContext>
+    </Router>
+  </MuiThemeProvider>
 );
 
 export default AppContainer;