Skip to content

Commit 97acdcb

Browse files
HenryLiangzyHenryLiangzy
committed
migrate to material v5
1 parent 05e6f9e commit 97acdcb

File tree

34 files changed

+632
-282
lines changed

34 files changed

+632
-282
lines changed

‎package.json‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
"name": "react-image-annotate",
33
"version": "1.8.0",
44
"dependencies": {
5+
"@emotion/react": "^11.7.0",
6+
"@emotion/styled": "^11.6.0",
57
"@fortawesome/fontawesome-svg-core": "^1.2.12",
68
"@fortawesome/free-solid-svg-icons": "^5.6.3",
79
"@fortawesome/react-fontawesome": "^0.1.3",
8-
"@material-ui/core": "^4.6.0",
9-
"@material-ui/icons": "^4.9.1",
10+
"@mui/icons-material": "^5.2.1",
11+
"@mui/material": "^5.2.3",
12+
"@mui/styles": "^5.2.3",
1013
"@semantic-release/git": "^9.0.0",
1114
"autoseg": "^0.0.12",
1215
"clamp": "^1.0.1",
@@ -15,6 +18,8 @@
1518
"material-survey": "^1.0.34",
1619
"mmgc1-cpp": "^1.0.50",
1720
"moment": "^2.23.0",
21+
"react": "^17.0.2",
22+
"react-dom": "^17.0.2",
1823
"react-full-screen": "^0.3.1",
1924
"react-hotkeys": "^2.0.0",
2025
"react-json-view": "^1.19.1",
@@ -35,8 +40,8 @@
3540
"use-key-hook": "^1.3.0"
3641
},
3742
"peerDependencies": {
38-
"react": "^16.8.0",
39-
"react-dom": "^16.8.0"
43+
"react": "^17.0.0",
44+
"react-dom": "^17.0.0"
4045
},
4146
"homepage": "/react-image-annotate",
4247
"repository": {

‎src/ClassSelectionMenu/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useEffect } from "react"
2-
import { styled } from "@material-ui/core/styles"
3-
import Box from "@material-ui/core/Box"
4-
import * as muiColors from "@material-ui/core/colors"
2+
import { styled } from "@mui/material/styles"
3+
import Box from "@mui/material/Box"
4+
import * as muiColors from "@mui/material/colors"
55
import SidebarBoxContainer from "../SidebarBoxContainer"
66
import colors from "../colors"
7-
import BallotIcon from "@material-ui/icons/Ballot"
7+
import BallotIcon from "@mui/icons-material/Ballot"
88
import capitalize from "lodash/capitalize"
99
import classnames from "classnames"
1010

‎src/DemoSite/Editor.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// @flow
22

33
import React, { useState } from "react"
4-
import Button from "@material-ui/core/Button"
5-
import { makeStyles } from "@material-ui/core/styles"
4+
import Button from "@mui/material/Button"
5+
import { makeStyles } from '@mui/styles';
66
import Select from "react-select"
77
import Code from "react-syntax-highlighter"
8-
import Dialog from "@material-ui/core/Dialog"
9-
import DialogTitle from "@material-ui/core/DialogTitle"
10-
import DialogContent from "@material-ui/core/DialogContent"
11-
import DialogActions from "@material-ui/core/DialogActions"
8+
import Dialog from "@mui/material/Dialog"
9+
import DialogTitle from "@mui/material/DialogTitle"
10+
import DialogContent from "@mui/material/DialogContent"
11+
import DialogActions from "@mui/material/DialogActions"
1212
import MonacoEditor from "react-monaco-editor"
1313

1414
const useStyles = makeStyles({

‎src/DemoSite/ErrorBoundaryDialog.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// @flow
22

33
import React, { Component } from "react"
4-
import Dialog from "@material-ui/core/Dialog"
5-
import Button from "@material-ui/core/Button"
6-
import DialogTitle from "@material-ui/core/DialogTitle"
7-
import DialogContent from "@material-ui/core/DialogContent"
8-
import DialogActions from "@material-ui/core/DialogActions"
4+
import Dialog from "@mui/material/Dialog"
5+
import Button from "@mui/material/Button"
6+
import DialogTitle from "@mui/material/DialogTitle"
7+
import DialogContent from "@mui/material/DialogContent"
8+
import DialogActions from "@mui/material/DialogActions"
99

1010
export default class ErrorBoundaryDialog extends Component {
1111
state = { hasError: false, err: "" }

‎src/HighlightBox/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React from "react"
44
import classnames from "classnames"
5-
import { makeStyles } from "@material-ui/core/styles"
5+
import { makeStyles } from '@mui/styles';
66

77
const useStyles = makeStyles({
88
"@keyframes borderDance": {

‎src/HistorySidebarBox/index.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
// @flow
22

33
import React, { setState, memo } from "react"
4-
import { makeStyles } from "@material-ui/core/styles"
4+
import { makeStyles } from '@mui/styles';
55
import SidebarBoxContainer from "../SidebarBoxContainer"
6-
import HistoryIcon from "@material-ui/icons/History"
7-
import List from "@material-ui/core/List"
8-
import ListItem from "@material-ui/core/ListItem"
9-
import ListItemText from "@material-ui/core/ListItemText"
10-
import IconButton from "@material-ui/core/IconButton"
11-
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"
12-
import UndoIcon from "@material-ui/icons/Undo"
6+
import HistoryIcon from "@mui/icons-material/History"
7+
import List from "@mui/material/List"
8+
import ListItem from "@mui/material/ListItem"
9+
import ListItemText from "@mui/material/ListItemText"
10+
import IconButton from "@mui/material/IconButton"
11+
import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction"
12+
import UndoIcon from "@mui/icons-material/Undo"
1313
import moment from "moment"
14-
import { grey } from "@material-ui/core/colors"
14+
import { grey } from "@mui/material/colors"
1515
import isEqual from "lodash/isEqual"
16-
import Box from "@material-ui/core/Box"
16+
import Box from "@mui/material/Box"
1717

1818
const useStyles = makeStyles({
1919
emptyText: {

‎src/ImageCanvas/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import type {
1818
Keypoints,
1919
KeypointsDefinition,
2020
} from "./region-tools.js"
21-
import { makeStyles } from "@material-ui/core/styles"
21+
import { makeStyles } from '@mui/styles';
2222
import styles from "./styles"
2323
import PreventScrollToParents from "../PreventScrollToParents"
2424
import useWindowSize from "../hooks/use-window-size.js"

‎src/ImageCanvas/styles.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { grey } from "@material-ui/core/colors"
1+
import { grey } from "@mui/material/colors"
22

33
export default {
44
canvas: { width: "100%", height: "100%", position: "relative", zIndex: 1 },

‎src/ImageSelectorSidebarBox/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// @flow
22

33
import React, { memo } from "react"
4-
import { makeStyles } from "@material-ui/core/styles"
4+
import { makeStyles } from '@mui/styles';
55
import SidebarBoxContainer from "../SidebarBoxContainer"
6-
import CollectionsIcon from "@material-ui/icons/Collections"
7-
import { grey } from "@material-ui/core/colors"
8-
import List from "@material-ui/core/List"
9-
import ListItem from "@material-ui/core/ListItem"
10-
import ListItemText from "@material-ui/core/ListItemText"
11-
import Avatar from "@material-ui/core/Avatar"
6+
import CollectionsIcon from "@mui/icons-material/Collections"
7+
import { grey } from "@mui/material/colors"
8+
import List from "@mui/material/List"
9+
import ListItem from "@mui/material/ListItem"
10+
import ListItemText from "@mui/material/ListItemText"
11+
import Avatar from "@mui/material/Avatar"
1212
import isEqual from "lodash/isEqual"
1313

1414
const useStyles = makeStyles({

‎src/KeyframeTimeline/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// @flow weak
22

33
import React, { useMemo, useState, useEffect } from "react"
4-
import { styled } from "@material-ui/core/styles"
4+
import { styled } from "@mui/material/styles"
55
import range from "lodash/range"
6-
import * as colors from "@material-ui/core/colors"
6+
import * as colors from "@mui/material/colors"
77
import useMeasure from "react-use-measure"
88
import useEventCallback from "use-event-callback"
99
import { useRafState } from "react-use"

0 commit comments

Comments
 (0)