feat: update version of react-spectra-editor to v1.0.0-rc17 (#88) (#89)

feat: update MUI version
ComPlat · Sep 25, 2023 · 795b991 · 795b991
1 parent cd6bd44
commit 795b991
Show file tree

Hide file tree

Showing 10 changed files with 2,406 additions and 2,198 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@complat/chem-spectra-client",
-  "version": "1.0.0-rc16",
+  "version": "1.0.0-rc17",
   "description": "ChemSpectra client side server.",
   "repository": {
     "type": "git",
@@ -20,19 +20,20 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@complat/react-spectra-editor": "1.0.0-rc16",
-    "@material-ui/core": "^3.9.4",
-    "@material-ui/icons": "^3.0.2",
-    "axios": "^0.21.1",
+    "@complat/react-spectra-editor": "1.0.0-rc17",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/material": "^5.14.10",
+    "@mui/styles": "^5.14.10",
     "base-64": "^0.1.0",
     "classnames": "^2.2.6",
     "humps": "^2.0.1",
     "prop-types": "^15.6.2",
-    "react-copy-to-clipboard": "^5.0.2",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dropzone": "^8.0.3",
     "react-notification-system": "^0.2.17",
-    "react-redux": "6.0.1",
-    "react-router-dom": "^4.3.1",
+    "react-redux": "7.2.9",
     "redux": "^4.1.1",
     "redux-form": "^8.3.7",
     "redux-saga": "^1.1.3"

diff --git a/src/lib/components/content.js b/src/lib/components/content.js
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { SpectraEditor, FN } from '@complat/react-spectra-editor';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+// import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-import Tooltip from '@material-ui/core/Tooltip';
-import Button from '@material-ui/core/Button';
-import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+// import Tooltip from '@mui/material/Tooltip';
+// import Button from '@mui/material/Button';
+// import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';
 
 import { saveFileInit, refreshFileInit } from '../actions/action_file';
 import { predictInit, predictToWriteInit } from '../actions/action_predict';
@@ -43,13 +43,13 @@ const editorStyle = {
   width: W - 80,
 };
 
-const editorBtnStyle = {
-  border: '1px solid gray',
-  borderRadius: '0 8px 8px 0',
-  margin: '0 0 0 0',
-  width: 40,
-  verticalAlign: 'top',
-};
+// const editorBtnStyle = {
+//   border: '1px solid gray',
+//   borderRadius: '0 8px 8px 0',
+//   margin: '0 0 0 0',
+//   width: 40,
+//   verticalAlign: 'top',
+// };
 
 const renderTitle = () => (
   <div style={titleStyle}>
@@ -401,7 +401,7 @@ class Content extends React.Component {
             value={descSt}
             readOnly
           />
-          <Tooltip title="Copy to clipboard">
+          {/* <Tooltip title="Copy to clipboard">
             <CopyToClipboard text={descSt}>
               <Button
                 style={editorBtnStyle}
@@ -410,7 +410,7 @@ class Content extends React.Component {
                 <FileCopyOutlinedIcon />
               </Button>
             </CopyToClipboard>
-          </Tooltip>
+          </Tooltip> */}
         </div>
       </div>
     );

diff --git a/src/lib/components/input_file.js b/src/lib/components/input_file.js
@@ -5,8 +5,8 @@ import { bindActionCreators } from 'redux';
 import Dropzone from 'react-dropzone';
 import classNames from 'classnames';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
 
 import { addFileInit } from '../actions/action_file';
 

diff --git a/src/lib/components/input_form.js b/src/lib/components/input_form.js
@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import withStyles from '@mui/styles/withStyles';
+import Button from '@mui/material/Button';
 
 import {
   VerifyMsExt, VerifyJcampExt,

diff --git a/src/lib/components/input_mol.js b/src/lib/components/input_mol.js
@@ -5,8 +5,8 @@ import { bindActionCreators } from 'redux';
 import Dropzone from 'react-dropzone';
 import classNames from 'classnames';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
 
 import { addMolInit } from '../actions/action_mol';
 

diff --git a/src/lib/components/input_pred_json.js b/src/lib/components/input_pred_json.js
@@ -5,8 +5,8 @@ import { bindActionCreators } from 'redux';
 import Dropzone from 'react-dropzone';
 import classNames from 'classnames';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
 
 import { addPredJsonInit } from '../actions/action_predict';
 

diff --git a/src/lib/components/loading.js b/src/lib/components/loading.js
@@ -2,9 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { withStyles } from '@material-ui/core/styles';
-import Dialog from '@material-ui/core/Dialog';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import withStyles from '@mui/styles/withStyles';
+import { Dialog, CircularProgress } from '@mui/material';
 
 const styles = theme => ({
   card: {

diff --git a/src/lib/components/notice.js b/src/lib/components/notice.js
@@ -4,19 +4,19 @@ import { compose, bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 
-import { withStyles } from '@material-ui/core/styles';
-import Snackbar from '@material-ui/core/Snackbar';
-import SnackbarContent from '@material-ui/core/SnackbarContent';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
-import WarningIcon from '@material-ui/icons/Warning';
-import ErrorIcon from '@material-ui/icons/Error';
-import InfoIcon from '@material-ui/icons/Info';
-
-import green from '@material-ui/core/colors/green';
-import amber from '@material-ui/core/colors/amber';
+import { withStyles } from '@mui/styles';
+import {
+  Snackbar, SnackbarContent, IconButton,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import {
+  green, amber,
+} from '@mui/material/colors';
+
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import WarningIcon from '@mui/icons-material/Warning';
+import ErrorIcon from '@mui/icons-material/Error';
+import InfoIcon from '@mui/icons-material/Info';
 
 import { manualClear } from '../actions/action_notice';
 
@@ -88,6 +88,7 @@ const BarContent = (props) => {
             color="inherit"
             className={classes.close}
             onClick={onClose}
+            size="large"
           >
             <CloseIcon className={classes.icon} />
           </IconButton>,

diff --git a/src/lib/frame.js b/src/lib/frame.js
@@ -3,8 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import Grid from '@material-ui/core/Grid';
-import { withStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import withStyles from '@mui/styles/withStyles';
+import {
+  createTheme, ThemeProvider,
+} from '@mui/material/styles';
 
 import Content from './components/content';
 import InputMol from './components/input_mol';
@@ -14,14 +17,16 @@ import InputPredJson from './components/input_pred_json';
 import Loading from './components/loading';
 import Notice from './components/notice';
 
+const theme = createTheme();
+
 const styles = () => ({
   root: {
     flexGrow: 1,
   },
 });
 
 const FullVersion = ({ classes, editorOnly }) => (
-  <Grid container className={classes.root} spacing={24}>
+  <Grid container className={classes.root} spacing={10}>
     <Grid key="grid-drop-space" item xs={1} />
     <Grid key="grid-drop-mol" item xs={4}>
       <InputMol />
@@ -75,16 +80,18 @@ EditorVersion.propTypes = {
 };
 
 const Frame = ({ classes, editorOnly }) => (
-  <div>
-    {
-      editorOnly
-        ? <EditorVersion classes={classes} editorOnly={editorOnly} />
-        : <FullVersion classes={classes} editorOnly={editorOnly} />
-    }
-    <Content editorOnly={editorOnly} />
-    <Notice />
-    <Loading />
-  </div>
+  <ThemeProvider theme={theme}>
+    <div>
+      {
+        editorOnly
+          ? <EditorVersion classes={classes} editorOnly={editorOnly} />
+          : <FullVersion classes={classes} editorOnly={editorOnly} />
+      }
+      <Content editorOnly={editorOnly} />
+      <Notice />
+      <Loading />
+    </div>
+  </ThemeProvider>
 );
 
 Frame.propTypes = {