Skip to content

Commit 4f9eaf6

Browse files
HenryLiangzyHenryLiangzy
committed
Fix migrate issue
1 parent 5fe5660 commit 4f9eaf6

File tree

22 files changed

+1244
-1138
lines changed

22 files changed

+1244
-1138
lines changed

‎src/ClassSelectionMenu/index.js‎

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect } from "react"
22
import { styled } from "@mui/material/styles"
3+
import { createTheme, ThemeProvider } from "@mui/material/styles"
34
import Box from "@mui/material/Box"
45
import * as muiColors from "@mui/material/colors"
56
import SidebarBoxContainer from "../SidebarBoxContainer"
@@ -8,7 +9,8 @@ import BallotIcon from "@mui/icons-material/Ballot"
89
import capitalize from "lodash/capitalize"
910
import classnames from "classnames"
1011

11-
const LabelContainer = styled("div")({
12+
const theme = createTheme()
13+
const LabelContainer = styled("div")(({ theme }) => ({
1214
display: "flex",
1315
paddingTop: 4,
1416
paddingBottom: 4,
@@ -25,31 +27,31 @@ const LabelContainer = styled("div")({
2527
opacity: 1,
2628
fontWeight: "bold",
2729
},
28-
})
29-
const Circle = styled("div")({
30+
}))
31+
const Circle = styled("div")(({ theme }) => ({
3032
width: 12,
3133
height: 12,
3234
borderRadius: 12,
3335
marginRight: 8,
34-
})
35-
const Label = styled("div")({
36+
}))
37+
const Label = styled("div")(({ theme }) => ({
3638
fontSize: 11,
37-
})
38-
const DashSep = styled("div")({
39+
}))
40+
const DashSep = styled("div")(({ theme }) => ({
3941
flexGrow: 1,
4042
borderBottom: `2px dotted ${muiColors.grey[300]}`,
4143
marginLeft: 8,
4244
marginRight: 8,
43-
})
44-
const Number = styled("div")({
45+
}))
46+
const Number = styled("div")(({ theme }) => ({
4547
fontSize: 11,
4648
textAlign: "center",
4749
minWidth: 14,
4850
paddingTop: 2,
4951
paddingBottom: 2,
5052
fontWeight: "bold",
5153
color: muiColors.grey[700],
52-
})
54+
}))
5355

5456
export const ClassSelectionMenu = ({
5557
selectedCls,
@@ -73,29 +75,33 @@ export const ClassSelectionMenu = ({
7375
}, [regionClsList, selectedCls])
7476

7577
return (
76-
<SidebarBoxContainer
77-
title="Classifications"
78-
subTitle=""
79-
icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
80-
expandedByDefault
81-
>
82-
{regionClsList.map((label, index) => (
83-
<LabelContainer
84-
className={classnames({ selected: label === selectedCls })}
85-
onClick={() => onSelectCls(label)}
86-
>
87-
<Circle style={{ backgroundColor: colors[index % colors.length] }} />
88-
<Label className={classnames({ selected: label === selectedCls })}>
89-
{capitalize(label)}
90-
</Label>
91-
<DashSep />
92-
<Number className={classnames({ selected: label === selectedCls })}>
93-
{index < 9 ? `Key [${index + 1}]` : ""}
94-
</Number>
95-
</LabelContainer>
96-
))}
97-
<Box pb={2} />
98-
</SidebarBoxContainer>
78+
<ThemeProvider theme={theme}>
79+
<SidebarBoxContainer
80+
title="Classifications"
81+
subTitle=""
82+
icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
83+
expandedByDefault
84+
>
85+
{regionClsList.map((label, index) => (
86+
<LabelContainer
87+
className={classnames({ selected: label === selectedCls })}
88+
onClick={() => onSelectCls(label)}
89+
>
90+
<Circle
91+
style={{ backgroundColor: colors[index % colors.length] }}
92+
/>
93+
<Label className={classnames({ selected: label === selectedCls })}>
94+
{capitalize(label)}
95+
</Label>
96+
<DashSep />
97+
<Number className={classnames({ selected: label === selectedCls })}>
98+
{index < 9 ? `Key [${index + 1}]` : ""}
99+
</Number>
100+
</LabelContainer>
101+
))}
102+
<Box pb={2} />
103+
</SidebarBoxContainer>
104+
</ThemeProvider>
99105
)
100106
}
101107

‎src/DemoSite/Editor.js‎

Lines changed: 98 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
import React, { useState } from "react"
44
import Button from "@mui/material/Button"
5-
import { makeStyles } from '@mui/styles';
5+
import { makeStyles } from "@mui/styles"
6+
import { createTheme, ThemeProvider } from "@mui/material/styles"
67
import Select from "react-select"
78
import Code from "react-syntax-highlighter"
89
import Dialog from "@mui/material/Dialog"
@@ -11,7 +12,8 @@ import DialogContent from "@mui/material/DialogContent"
1112
import DialogActions from "@mui/material/DialogActions"
1213
import MonacoEditor from "react-monaco-editor"
1314

14-
const useStyles = makeStyles({
15+
const theme = createTheme();
16+
const useStyles = makeStyles((theme) => ({
1517
editBar: {
1618
padding: 10,
1719
borderBottom: "1px solid #ccc",
@@ -27,7 +29,7 @@ const useStyles = makeStyles({
2729
specificationArea: {
2830
padding: 10,
2931
},
30-
})
32+
}))
3133

3234
const loadSavedInput = () => {
3335
try {
@@ -90,89 +92,90 @@ const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
9092
JSON.stringify(examples[selectedExample](), null, " ")
9193
)
9294
return (
93-
<div>
94-
<div className={c.editBar}>
95-
<h3>React Image Annotate</h3>
96-
<div style={{ flexGrow: 1 }} />
97-
<div>
98-
<div style={{ display: "inline-flex" }}>
99-
<Select
100-
className={c.select}
101-
value={{ label: selectedExample, value: selectedExample }}
102-
options={Object.keys(examples).map((s) => ({
103-
label: s,
104-
value: s,
105-
}))}
106-
onChange={(selectedOption) => {
107-
changeSelectedExample(selectedOption.value)
95+
<ThemeProvider theme={theme}>
96+
<div>
97+
<div className={c.editBar}>
98+
<h3>React Image Annotate</h3>
99+
<div style={{ flexGrow: 1 }} />
100+
<div>
101+
<div style={{ display: "inline-flex" }}>
102+
<Select
103+
className={c.select}
104+
value={{ label: selectedExample, value: selectedExample }}
105+
options={Object.keys(examples).map((s) => ({
106+
label: s,
107+
value: s,
108+
}))}
109+
onChange={(selectedOption) => {
110+
changeSelectedExample(selectedOption.value)
108111

109-
changeCurrentJSONValue(
110-
JSON.stringify(
111-
selectedOption.value === "Custom"
112-
? loadSavedInput()
113-
: examples[selectedOption.value](),
114-
null,
115-
" "
112+
changeCurrentJSONValue(
113+
JSON.stringify(
114+
selectedOption.value === "Custom"
115+
? loadSavedInput()
116+
: examples[selectedOption.value](),
117+
null,
118+
" "
119+
)
116120
)
121+
}}
122+
/>
123+
</div>
124+
<Button
125+
className="button"
126+
disabled={!lastOutput}
127+
onClick={() => changeOutputOpen(true)}
128+
>
129+
View Output
130+
</Button>
131+
<Button
132+
className="button"
133+
variant="outlined"
134+
disabled={Boolean(currentError)}
135+
onClick={() => {
136+
onOpenAnnotator(
137+
selectedExample === "Custom"
138+
? loadSavedInput()
139+
: examples[selectedExample]
117140
)
118141
}}
119-
/>
142+
>
143+
Open Annotator
144+
</Button>
120145
</div>
121-
<Button
122-
className="button"
123-
disabled={!lastOutput}
124-
onClick={() => changeOutputOpen(true)}
125-
>
126-
View Output
127-
</Button>
128-
<Button
129-
className="button"
130-
variant="outlined"
131-
disabled={Boolean(currentError)}
132-
onClick={() => {
133-
onOpenAnnotator(
134-
selectedExample === "Custom"
135-
? loadSavedInput()
136-
: examples[selectedExample]
137-
)
138-
}}
139-
>
140-
Open Annotator
141-
</Button>
142146
</div>
143-
</div>
144-
<div
145-
className={c.contentArea}
146-
style={
147-
currentError
148-
? { border: "2px solid #f00" }
149-
: { border: "2px solid #fff" }
150-
}
151-
>
152-
<div>
153-
<MonacoEditor
154-
value={currentJSONValue}
155-
language="javascript"
156-
onChange={(code) => {
157-
try {
158-
window.localStorage.setItem(
159-
"customInput",
160-
JSON.stringify(JSON.parse(code))
161-
)
162-
changeCurrentError(null)
163-
} catch (e) {
164-
changeCurrentError(e.toString())
165-
}
166-
changeCurrentJSONValue(code)
167-
}}
168-
width="100%"
169-
height="550px"
170-
/>
147+
<div
148+
className={c.contentArea}
149+
style={
150+
currentError
151+
? { border: "2px solid #f00" }
152+
: { border: "2px solid #fff" }
153+
}
154+
>
155+
<div>
156+
<MonacoEditor
157+
value={currentJSONValue}
158+
language="javascript"
159+
onChange={(code) => {
160+
try {
161+
window.localStorage.setItem(
162+
"customInput",
163+
JSON.stringify(JSON.parse(code))
164+
)
165+
changeCurrentError(null)
166+
} catch (e) {
167+
changeCurrentError(e.toString())
168+
}
169+
changeCurrentJSONValue(code)
170+
}}
171+
width="100%"
172+
height="550px"
173+
/>
174+
</div>
171175
</div>
172-
</div>
173-
<div className={c.specificationArea}>
174-
<h2>React Image Annotate Format</h2>
175-
<Code language="javascript">{`
176+
<div className={c.specificationArea}>
177+
<h2>React Image Annotate Format</h2>
178+
<Code language="javascript">{`
176179
{
177180
taskDescription?: string, // markdown
178181
regionTagList?: Array<string>,
@@ -212,22 +215,23 @@ const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
212215
}>,
213216
}
214217
`}</Code>
218+
</div>
219+
<Dialog fullScreen open={outputDialogOpen}>
220+
<DialogTitle>React Image Annotate Output</DialogTitle>
221+
<DialogContent style={{ minWidth: 400 }}>
222+
<MonacoEditor
223+
value={JSON.stringify(lastOutput, null, " ")}
224+
language="javascript"
225+
width="100%"
226+
height="550px"
227+
/>
228+
</DialogContent>
229+
<DialogActions>
230+
<Button onClick={() => changeOutputOpen(false)}>Close</Button>
231+
</DialogActions>
232+
</Dialog>
215233
</div>
216-
<Dialog fullScreen open={outputDialogOpen}>
217-
<DialogTitle>React Image Annotate Output</DialogTitle>
218-
<DialogContent style={{ minWidth: 400 }}>
219-
<MonacoEditor
220-
value={JSON.stringify(lastOutput, null, " ")}
221-
language="javascript"
222-
width="100%"
223-
height="550px"
224-
/>
225-
</DialogContent>
226-
<DialogActions>
227-
<Button onClick={() => changeOutputOpen(false)}>Close</Button>
228-
</DialogActions>
229-
</Dialog>
230-
</div>
234+
</ThemeProvider>
231235
)
232236
}
233237

0 commit comments

Comments
 (0)