feat: Merge pull request #185 from HenryLiangzy/master

Migrate to Material UI v5

Author: seveibar

package.json

@@ -1,25 +1,30 @@
 {
   "name": "react-image-annotate",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "dependencies": {
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
     "@fortawesome/react-fontawesome": "^0.1.3",
-    "@material-ui/core": "^4.6.0",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.2.1",
+    "@mui/material": "^5.2.3",
+    "@mui/styles": "^5.2.3",
     "@semantic-release/git": "^9.0.0",
     "autoseg": "^0.0.12",
     "clamp": "^1.0.1",
     "color-alpha": "^1.0.4",
     "get-image-data": "^3.0.1",
-    "material-survey": "^1.0.34",
+    "material-survey": "^2.1.0",
     "mmgc1-cpp": "^1.0.50",
     "moment": "^2.23.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-full-screen": "^0.3.1",
     "react-hotkeys": "^2.0.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",
-    "react-material-workspace-layout": "^1.0.9",
+    "react-material-workspace-layout": "^1.0.10",
     "react-monaco-editor": "^0.25.1",
     "react-remove-scroll": "^2.0.4",
     "react-select": "^3.0.8",
@@ -35,8 +40,8 @@
     "use-key-hook": "^1.3.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "homepage": "/react-image-annotate",
   "repository": {
@@ -77,7 +82,7 @@
     "babel-loader": "^8.0.5",
     "babel-preset-react-app": "^7.0.0",
     "gh-pages": "^2.0.1",
-    "prettier": "^2.1.1",
+    "prettier": "^2.5.1",
     "raw.macro": "^0.3.0",
     "react-github-btn": "^1.1.1",
     "react-scripts": "^3.4.1"

src/Annotator/index.js

@@ -54,7 +54,7 @@ type Props = {
   hideClone?: boolean,
   hideSettings?: boolean,
   hideFullScreen?: boolean,
-  hideSave?: boolean
+  hideSave?: boolean,
 }
 
 export const Annotator = ({

src/Annotator/index.story.js

@@ -183,14 +183,12 @@ storiesOf("Annotator", module)
       showTags={false}
       images={[
         {
-          src:
-            "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
+          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
           name: "Bounding Box Test",
           regions: [],
         },
         {
-          src:
-            "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame001.png",
+          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame001.png",
           name: "Bounding Box Test",
           regions: [],
         },
@@ -207,8 +205,7 @@ storiesOf("Annotator", module)
       allowedArea={{ x: 0, y: 0.6, w: 0.3, h: 0.3 }}
       images={[
         {
-          src:
-            "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
+          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
           name: "Bounding Box Test",
           regions: [],
         },
@@ -440,14 +437,12 @@ storiesOf("Annotator", module)
         ]}
         images={[
           {
-            src:
-              "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
+            src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
             frameTime: 0,
             name: "Frame 1",
           },
           {
-            src:
-              "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
+            src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
             frameTime: 4500,
             name: "Frame 2",
           },

src/Annotator/reducers/combine-reducers.js

@@ -1,6 +1,7 @@
-export default (...reducers) => (state, action) => {
-  for (const reducer of reducers) {
-    state = reducer(state, action)
+export default (...reducers) =>
+  (state, action) => {
+    for (const reducer of reducers) {
+      state = reducer(state, action)
+    }
+    return state
   }
-  return state
-}

src/Annotator/reducers/general-reducer.js

@@ -44,9 +44,8 @@ export default (state: MainLayoutState, action: Action) => {
     state = setIn(state, ["lastAction"], action)
   }
 
-  const { currentImageIndex, pathToActiveImage, activeImage } = getActiveImage(
-    state
-  )
+  const { currentImageIndex, pathToActiveImage, activeImage } =
+    getActiveImage(state)
 
   const getRegionIndex = (region) => {
     const regionId =
@@ -634,9 +633,8 @@ export default (state: MainLayoutState, action: Action) => {
         }
         case "create-keypoints": {
           state = saveToHistory(state, "Create Keypoints")
-          const [
-            [keypointsDefinitionId, { landmarks, connections }],
-          ] = (Object.entries(state.keypointDefinitions): any)
+          const [[keypointsDefinitionId, { landmarks, connections }]] =
+            (Object.entries(state.keypointDefinitions): any)
 
           newRegion = {
             type: "keypoints",

src/Annotator/reducers/image-reducer.js

@@ -8,9 +8,8 @@ import { setIn } from "seamless-immutable"
 import getActiveImage from "./get-active-image"
 
 export default (state: MainLayoutImageAnnotationState, action: Action) => {
-  const { currentImageIndex, pathToActiveImage, activeImage } = getActiveImage(
-    state
-  )
+  const { currentImageIndex, pathToActiveImage, activeImage } =
+    getActiveImage(state)
 
   switch (action.type) {
     case "IMAGE_OR_VIDEO_LOADED": {

src/ClassSelectionMenu/index.js

@@ -1,14 +1,16 @@
 import React, { useEffect } from "react"
-import { styled } from "@material-ui/core/styles"
-import Box from "@material-ui/core/Box"
-import * as muiColors from "@material-ui/core/colors"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import * as muiColors from "@mui/material/colors"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import colors from "../colors"
-import BallotIcon from "@material-ui/icons/Ballot"
+import BallotIcon from "@mui/icons-material/Ballot"
 import capitalize from "lodash/capitalize"
 import classnames from "classnames"
 
-const LabelContainer = styled("div")({
+const theme = createTheme()
+const LabelContainer = styled("div")(({ theme }) => ({
   display: "flex",
   paddingTop: 4,
   paddingBottom: 4,
@@ -25,31 +27,31 @@ const LabelContainer = styled("div")({
     opacity: 1,
     fontWeight: "bold",
   },
-})
-const Circle = styled("div")({
+}))
+const Circle = styled("div")(({ theme }) => ({
   width: 12,
   height: 12,
   borderRadius: 12,
   marginRight: 8,
-})
-const Label = styled("div")({
+}))
+const Label = styled("div")(({ theme }) => ({
   fontSize: 11,
-})
-const DashSep = styled("div")({
+}))
+const DashSep = styled("div")(({ theme }) => ({
   flexGrow: 1,
   borderBottom: `2px dotted ${muiColors.grey[300]}`,
   marginLeft: 8,
   marginRight: 8,
-})
-const Number = styled("div")({
+}))
+const Number = styled("div")(({ theme }) => ({
   fontSize: 11,
   textAlign: "center",
   minWidth: 14,
   paddingTop: 2,
   paddingBottom: 2,
   fontWeight: "bold",
   color: muiColors.grey[700],
-})
+}))
 
 export const ClassSelectionMenu = ({
   selectedCls,
@@ -73,29 +75,33 @@ export const ClassSelectionMenu = ({
   }, [regionClsList, selectedCls])
 
   return (
-    <SidebarBoxContainer
-      title="Classifications"
-      subTitle=""
-      icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
-      expandedByDefault
-    >
-      {regionClsList.map((label, index) => (
-        <LabelContainer
-          className={classnames({ selected: label === selectedCls })}
-          onClick={() => onSelectCls(label)}
-        >
-          <Circle style={{ backgroundColor: colors[index % colors.length] }} />
-          <Label className={classnames({ selected: label === selectedCls })}>
-            {capitalize(label)}
-          </Label>
-          <DashSep />
-          <Number className={classnames({ selected: label === selectedCls })}>
-            {index < 9 ? `Key [${index + 1}]` : ""}
-          </Number>
-        </LabelContainer>
-      ))}
-      <Box pb={2} />
-    </SidebarBoxContainer>
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Classifications"
+        subTitle=""
+        icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
+        expandedByDefault
+      >
+        {regionClsList.map((label, index) => (
+          <LabelContainer
+            className={classnames({ selected: label === selectedCls })}
+            onClick={() => onSelectCls(label)}
+          >
+            <Circle
+              style={{ backgroundColor: colors[index % colors.length] }}
+            />
+            <Label className={classnames({ selected: label === selectedCls })}>
+              {capitalize(label)}
+            </Label>
+            <DashSep />
+            <Number className={classnames({ selected: label === selectedCls })}>
+              {index < 9 ? `Key [${index + 1}]` : ""}
+            </Number>
+          </LabelContainer>
+        ))}
+        <Box pb={2} />
+      </SidebarBoxContainer>
+    </ThemeProvider>
   )
 }