Skip to content

Commit ac3279d

Browse files
jooy2jooy2
committed
pack: upgrade material ui to v6
1 parent 61593ec commit ac3279d

File tree

8 files changed

+177
-171
lines changed

8 files changed

+177
-171
lines changed

‎package-lock.json‎

Lines changed: 136 additions & 126 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@
6666
"dependencies": {
6767
"@emotion/react": "^11.13.5",
6868
"@emotion/styled": "^11.13.5",
69-
"@mui/icons-material": "^5.16.4",
70-
"@mui/material": "^5.16.4",
69+
"@mui/icons-material": "^6.1.8",
70+
"@mui/material": "^6.1.8",
7171
"@reduxjs/toolkit": "^2.3.0",
7272
"electron-localshortcut": "^3.2.1",
7373
"electron-store": "^10.0.0",

‎src/renderer/components/layouts/Layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Helmet } from 'react-helmet';
33

44
import Container from '@mui/material/Container';
5-
import Grid from '@mui/material/Grid';
5+
import Grid from '@mui/material/Grid2';
66
import { css } from '@emotion/react';
77
import Header from '@/renderer/components/layouts/Header';
88
import { headerArea } from '@/renderer/utils/styles';
@@ -59,12 +59,12 @@ const Layout = ({
5959
>
6060
{container ? (
6161
<Container>
62-
<Grid item xs={12} css={[header ? headerArea : []]}>
62+
<Grid size={12} css={[header ? headerArea : []]}>
6363
{children}
6464
</Grid>
6565
</Container>
6666
) : (
67-
<Grid item xs={12} css={[header ? headerArea : []]}>
67+
<Grid size={12} css={[header ? headerArea : []]}>
6868
{children}
6969
</Grid>
7070
)}

‎src/renderer/components/views/FlashPlayer.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
55
import { useDispatch, useSelector } from 'react-redux';
66
import { RootState } from '@/renderer/store';
77
import { setConfig } from '@/renderer/store/slices/appScreenSlice';
8-
import Grid from '@mui/material/Grid';
8+
import Grid from '@mui/material/Grid2';
99
import IconButton from '@mui/material/IconButton';
1010
import Tooltip from '@mui/material/Tooltip';
1111
import Replay from '@mui/icons-material/Replay';
@@ -193,9 +193,9 @@ const FlashPlayer = ({ url = '', autoplay = true, filePath = '', header = true }
193193
height: 42px;
194194
`}
195195
>
196-
<Grid item xs={12}>
196+
<Grid size={12}>
197197
<Grid container alignItems="center">
198-
<Grid item>
198+
<Grid>
199199
<IconButton
200200
color="primary"
201201
size="small"
@@ -205,7 +205,7 @@ const FlashPlayer = ({ url = '', autoplay = true, filePath = '', header = true }
205205
{rufflePlayer?.isPlaying ? <Pause /> : <PlayArrow />}
206206
</IconButton>
207207
</Grid>
208-
<Grid item>
208+
<Grid>
209209
<Tooltip title={t('replay')}>
210210
<IconButton
211211
size="small"
@@ -217,7 +217,7 @@ const FlashPlayer = ({ url = '', autoplay = true, filePath = '', header = true }
217217
</IconButton>
218218
</Tooltip>
219219
</Grid>
220-
<Grid item xs={6} md={4}>
220+
<Grid size={{ xs: 6, md: 4 }}>
221221
<Stack spacing={2} direction="row" alignItems="center">
222222
<IconButton size="small" aria-label="player-mute" onClick={handleMute}>
223223
{stateAppScreen.flashVolume === 0 ? <VolumeOff /> : <VolumeUp />}

‎src/renderer/screens/About.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @jsxImportSource @emotion/react */
22
import { useMemo } from 'react';
33
import Button from '@mui/material/Button';
4-
import Grid from '@mui/material/Grid';
4+
import Grid from '@mui/material/Grid2';
55
import Paper from '@mui/material/Paper';
66
import Typography from '@mui/material/Typography';
77
import { useTranslation } from 'react-i18next';
@@ -23,7 +23,7 @@ const About = () => {
2323

2424
return (
2525
<Layout title={t('about-title') as string} withBackButton>
26-
<Grid item xs={12}>
26+
<Grid size={12}>
2727
<Paper css={paperBase}>
2828
<img
2929
css={css`

‎src/renderer/screens/Explorer.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { useState, useCallback, useEffect, SetStateAction } from 'react';
33
import Alert from '@mui/material/Alert';
44
import CircularProgress from '@mui/material/CircularProgress';
5-
import Grid from '@mui/material/Grid';
5+
import Grid from '@mui/material/Grid2';
66
import IconButton from '@mui/material/IconButton';
77
import List from '@mui/material/List';
88
import ListItem from '@mui/material/ListItem';
@@ -130,8 +130,7 @@ const Explorer = () => {
130130
return (
131131
<Layout header={!loading} center={loading} title={t('main-title') as string}>
132132
<Grid
133-
item
134-
xs={12}
133+
size={12}
135134
css={css`
136135
max-height: calc(100vh - 68px);
137136
overflow-y: auto;
@@ -140,7 +139,7 @@ const Explorer = () => {
140139
<Grid container>
141140
{!loading && (
142141
<>
143-
<Grid item xs={12}>
142+
<Grid size={12}>
144143
<Paper css={paperSm}>
145144
<div
146145
data-testid="uiFileOpen"
@@ -174,21 +173,21 @@ const Explorer = () => {
174173
<input {...getInputProps()} />
175174
</div>
176175
{flashContentError && (
177-
<Grid item xs={12}>
176+
<Grid size={12}>
178177
<Alert severity="error">{errorMessage}</Alert>
179178
</Grid>
180179
)}
181180
</Paper>
182181
</Grid>
183-
<Grid item xs={12}>
182+
<Grid size={12}>
184183
<Paper css={paperSm}>
185184
<Grid container justifyContent="space-between">
186-
<Grid item xs={5}>
185+
<Grid size={5}>
187186
<Typography component="h2" variant="h6">
188187
<strong>{t('common:recent-file-title')}</strong>
189188
</Typography>
190189
</Grid>
191-
<Grid item>
190+
<Grid>
192191
<IconButton
193192
onClick={handleRemoveRecentFiles}
194193
disabled={stateAppScreen.recentFiles.length < 1}
@@ -204,7 +203,7 @@ const Explorer = () => {
204203
)}
205204
{stateAppScreen.recentFiles.length > 0 && (
206205
<Grid container>
207-
<Grid item xs={12}>
206+
<Grid size={12}>
208207
<List
209208
component="nav"
210209
aria-label="recent files"
@@ -245,8 +244,7 @@ const Explorer = () => {
245244
)}
246245
{loading && (
247246
<Grid
248-
item
249-
xs={12}
247+
size={12}
250248
css={css`
251249
text-align: center;
252250
`}

‎src/renderer/screens/Main.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @jsxImportSource @emotion/react */
22
import { useEffect, useState } from 'react';
33
import CircularProgress from '@mui/material/CircularProgress';
4-
import Grid from '@mui/material/Grid';
4+
import Grid from '@mui/material/Grid2';
55
import Typography from '@mui/material/Typography';
66
import useMediaQuery from '@mui/material/useMediaQuery';
77
import { useTranslation } from 'react-i18next';
@@ -141,8 +141,7 @@ const Main = () => {
141141
return (
142142
<Layout center header={false}>
143143
<Grid
144-
item
145-
xs={12}
144+
size={12}
146145
css={css`
147146
text-align: center;
148147
`}

‎src/renderer/screens/Settings.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState } from 'react';
33
import Button from '@mui/material/Button';
44
import Checkbox from '@mui/material/Checkbox';
55
import FormControlLabel from '@mui/material/FormControlLabel';
6-
import Grid from '@mui/material/Grid';
6+
import Grid from '@mui/material/Grid2';
77
import MenuItem from '@mui/material/MenuItem';
88
import Paper from '@mui/material/Paper';
99
import Radio from '@mui/material/Radio';
@@ -155,8 +155,7 @@ const Settings = () => {
155155
return (
156156
<Layout title={t('menu:settings') as string} withBackButton>
157157
<Grid
158-
item
159-
xs={12}
158+
size={12}
160159
css={css`
161160
max-height: calc(100vh - 68px);
162161
overflow-y: auto;
@@ -196,7 +195,7 @@ const Settings = () => {
196195
}
197196
`}
198197
>
199-
<Grid item xs={12}>
198+
<Grid size={12}>
200199
<PanelHeader
201200
title={t('settings-language-title')}
202201
desc={t('settings-language-desc')}
@@ -220,7 +219,7 @@ const Settings = () => {
220219
</Select>
221220
</Typography>
222221
</Grid>
223-
<Grid item xs={12} css={marginTopSm}>
222+
<Grid size={12} css={marginTopSm}>
224223
<PanelHeader title={t('settings-title-2')} desc={t('settings-desc-2')} />
225224
<RadioGroup
226225
row
@@ -247,10 +246,10 @@ const Settings = () => {
247246
/>
248247
</RadioGroup>
249248
</Grid>
250-
<Grid item xs={12} css={marginTopSm}>
249+
<Grid size={12} css={marginTopSm}>
251250
<PanelHeader title={t('settings-title-1')} desc={t('settings-desc-1')} />
252251
<Grid container>
253-
<Grid item xs={12}>
252+
<Grid size={12}>
254253
<FormControlLabel
255254
control={
256255
<Checkbox
@@ -263,7 +262,7 @@ const Settings = () => {
263262
label={t('menu:show-player-controller')}
264263
/>
265264
</Grid>
266-
<Grid item xs={12}>
265+
<Grid size={12}>
267266
<FormControlLabel
268267
control={
269268
<Checkbox
@@ -276,7 +275,7 @@ const Settings = () => {
276275
label={t('menu:hide-header')}
277276
/>
278277
</Grid>
279-
<Grid item xs={12}>
278+
<Grid size={12}>
280279
<FormControlLabel
281280
control={
282281
<Checkbox
@@ -289,7 +288,7 @@ const Settings = () => {
289288
label={t('menu:letterbox')}
290289
/>
291290
</Grid>
292-
<Grid item xs={12}>
291+
<Grid size={12}>
293292
<FormControlLabel
294293
control={
295294
<Checkbox
@@ -302,7 +301,7 @@ const Settings = () => {
302301
label={t('menu:hide-context')}
303302
/>
304303
</Grid>
305-
<Grid item xs={12}>
304+
<Grid size={12}>
306305
<FormControlLabel
307306
control={
308307
<Checkbox
@@ -315,7 +314,7 @@ const Settings = () => {
315314
label={t('menu:adjust-original-size')}
316315
/>
317316
</Grid>
318-
<Grid item xs={12}>
317+
<Grid size={12}>
319318
<FormControlLabel
320319
control={
321320
<Checkbox
@@ -328,7 +327,7 @@ const Settings = () => {
328327
label={t('menu:show-player-version-select')}
329328
/>
330329
</Grid>
331-
<Grid item xs={12}>
330+
<Grid size={12}>
332331
<FormControlLabel
333332
control={
334333
<Checkbox
@@ -343,7 +342,7 @@ const Settings = () => {
343342
</Grid>
344343
</Grid>
345344
</Grid>
346-
<Grid item xs={12} css={marginTopSm}>
345+
<Grid size={12} css={marginTopSm}>
347346
<PanelHeader title={t('settings-title-3')} desc={t('settings-desc-3')} />
348347
<RadioGroup
349348
aria-label="position"
@@ -379,7 +378,7 @@ const Settings = () => {
379378
/>
380379
</RadioGroup>
381380
</Grid>
382-
<Grid item xs={12} css={marginTopSm}>
381+
<Grid size={12} css={marginTopSm}>
383382
<PanelHeader title={t('settings-title-4')} desc={t('settings-desc-4')} />
384383
<RadioGroup
385384
row
@@ -411,7 +410,7 @@ const Settings = () => {
411410
/>
412411
</RadioGroup>
413412
</Grid>
414-
<Grid item xs={12} css={marginTopSm}>
413+
<Grid size={12} css={marginTopSm}>
415414
<PanelHeader title={t('settings-title-5')} desc={t('settings-desc-5')} />
416415
<RadioGroup
417416
row
@@ -433,10 +432,10 @@ const Settings = () => {
433432
/>
434433
</RadioGroup>
435434
</Grid>
436-
<Grid item xs={12}>
435+
<Grid size={12}>
437436
<PanelHeader title={t('settings-other-title')} desc={t('settings-other-desc')} />
438437
<Grid container>
439-
<Grid item xs={12}>
438+
<Grid size={12}>
440439
<Button
441440
color="primary"
442441
variant="contained"
@@ -449,7 +448,7 @@ const Settings = () => {
449448
</Grid>
450449
</Grid>
451450
</Grid>
452-
<Grid item xs={12} css={marginTopSm}>
451+
<Grid size={12} css={marginTopSm}>
453452
<PanelHeader title={t('settings-reset-title')} desc={t('settings-reset-desc')} />
454453
<Typography component="div" css={marginTopSm}>
455454
<Button variant="contained" size="small" color="secondary" onClick={handleReset}>

0 commit comments

Comments
 (0)