Update components with MUI support

ohjintech · Sep 22, 2021 · 21c6e2d · 21c6e2d
1 parent 4fc16d7
commit 21c6e2d
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 44 deletions.
diff --git a/src/components/Autocomplete.tsx b/src/components/Autocomplete.tsx
@@ -1,8 +1,6 @@
 import React, { FunctionComponent } from 'react'
-import Paper from '@material-ui/core/Paper'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'
+import { Paper, List, ListItem } from '@mui/material'
+import { createStyles, withStyles, WithStyles } from '@mui/styles'
 
 export type TAutocompleteItem = {
     keys: string[]

diff --git a/src/components/Blockquote.tsx b/src/components/Blockquote.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
-import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'
+import { createStyles, withStyles, WithStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 
 const styles = ({ palette }: Theme) => createStyles({
     root: {

diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
-import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'
+import { createStyles, withStyles, WithStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 
 const styles = ({ spacing, palette }: Theme) => createStyles({
     root: {

diff --git a/src/components/Link.tsx b/src/components/Link.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import { ContentState } from 'draft-js'
-import MuiLink from '@material-ui/core/Link'
+import { Link as MuiLink } from '@mui/material'
 
 type TLinkProps = {
     children?: React.ReactNode

diff --git a/src/components/Media.tsx b/src/components/Media.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
 import { ContentState, ContentBlock } from 'draft-js'
-import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'
+import { createStyles, withStyles, WithStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 
 interface IMediaProps extends WithStyles<typeof styles> {
     block: ContentBlock

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -1,21 +1,21 @@
 import React, { FunctionComponent, useState, useEffect } from 'react'
 import { EditorState } from 'draft-js'
-import FormatBoldIcon from '@material-ui/icons/FormatBold'
-import FormatItalicIcon from '@material-ui/icons/FormatItalic'
-import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined'
-import StrikethroughIcon from '@material-ui/icons/StrikethroughS'
-import HighlightIcon from '@material-ui/icons/Highlight'
-import TitleIcon from '@material-ui/icons/Title'
-import InsertLinkIcon from '@material-ui/icons/InsertLink'
-import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary'
-import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered'
-import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'
-import FormatQuoteIcon from '@material-ui/icons/FormatQuote'
-import CodeIcon from '@material-ui/icons/Code'
-import FormatClearIcon from '@material-ui/icons/FormatClear'
-import SaveIcon from '@material-ui/icons/Save'
-import UndoIcon from '@material-ui/icons/Undo'
-import RedoIcon from '@material-ui/icons/Redo'
+import FormatBoldIcon from '@mui/icons-material/FormatBold'
+import FormatItalicIcon from '@mui/icons-material/FormatItalic'
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined'
+import StrikethroughIcon from '@mui/icons-material/StrikethroughS'
+import HighlightIcon from '@mui/icons-material/Highlight'
+import TitleIcon from '@mui/icons-material/Title'
+import InsertLinkIcon from '@mui/icons-material/InsertLink'
+import PhotoLibraryIcon from '@mui/icons-material/PhotoLibrary'
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote'
+import CodeIcon from '@mui/icons-material/Code'
+import FormatClearIcon from '@mui/icons-material/FormatClear'
+import SaveIcon from '@mui/icons-material/Save'
+import UndoIcon from '@mui/icons-material/Undo'
+import RedoIcon from '@mui/icons-material/Redo'
 import ToolbarButton from './ToolbarButton'
 import { getSelectionInfo } from '../utils'
 

diff --git a/src/components/ToolbarButton.tsx b/src/components/ToolbarButton.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react'
-import IconButton from '@material-ui/core/IconButton'
+import IconButton from '@mui/material/IconButton'
 import { TToolbarComponentProps, TToolbarButtonSize } from './Toolbar'
 
 interface IToolbarButtonProps {

diff --git a/src/components/UrlPopover.tsx b/src/components/UrlPopover.tsx
@@ -1,17 +1,18 @@
 import React, { FunctionComponent, useState } from 'react'
-import Button from '@material-ui/core/Button'
-import Grid from '@material-ui/core/Grid'
-import Popover from '@material-ui/core/Popover'
-import TextField from '@material-ui/core/TextField'
-import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'
-import ButtonGroup from '@material-ui/core/ButtonGroup'
-import InsertPhotoIcon from '@material-ui/icons/InsertPhoto'
-import MovieIcon from '@material-ui/icons/Movie'
-import CheckIcon from '@material-ui/icons/Check'
-import DeleteIcon from '@material-ui/icons/DeleteOutline'
-import FormatAlignCenter from '@material-ui/icons/FormatAlignCenter'
-import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
-import FormatAlignRight from '@material-ui/icons/FormatAlignRight'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Grid'
+import Popover from '@mui/material/Popover'
+import TextField from '@mui/material/TextField'
+import { createStyles, withStyles, WithStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import InsertPhotoIcon from '@mui/icons-material/InsertPhoto'
+import MovieIcon from '@mui/icons-material/Movie'
+import CheckIcon from '@mui/icons-material/Check'
+import DeleteIcon from '@mui/icons-material/DeleteOutline'
+import FormatAlignCenter from '@mui/icons-material/FormatAlignCenter'
+import FormatAlignLeft from '@mui/icons-material/FormatAlignLeft'
+import FormatAlignRight from '@mui/icons-material/FormatAlignRight'
 
 export type TAlignment = "left" | "center" | "right"
 
@@ -98,14 +99,14 @@ const UrlPopover: FunctionComponent<IUrlPopoverStateProps> = (props) => {
                                 <Grid item xs={12}>
                                     <ButtonGroup fullWidth>
                                         <Button 
-                                            color={(!data.type || data.type === "image") ? "primary" : "default"} 
+                                            color={(!data.type || data.type === "image") ? "primary" : "inherit"} 
                                             size="small" 
                                             onClick={() => setData({...data, type: "image"})}
                                         >
                                             <InsertPhotoIcon />
                                         </Button>
                                         <Button 
-                                            color={data.type === "video" ? "primary" : "default"} 
+                                            color={data.type === "video" ? "primary" : "inherit"} 
                                             size="small" 
                                             onClick={() => setData({...data, type: "video"})}
                                         >
@@ -136,21 +137,21 @@ const UrlPopover: FunctionComponent<IUrlPopoverStateProps> = (props) => {
                                 <Grid item xs={12}>
                                     <ButtonGroup fullWidth>
                                         <Button 
-                                            color={data.alignment === "left" ? "primary" : "default"} 
+                                            color={data.alignment === "left" ? "primary" : "inherit"} 
                                             size="small" 
                                             onClick={() => setData({...data, alignment: "left"})}
                                         >
                                             <FormatAlignLeft />
                                         </Button>
                                         <Button 
-                                            color={data.alignment === "center" ? "primary" : "default"} 
+                                            color={data.alignment === "center" ? "primary" : "inherit"} 
                                             size="small" 
                                             onClick={() => setData({...data, alignment: "center"})}
                                         >
                                             <FormatAlignCenter />
                                         </Button>
                                         <Button 
-                                            color={data.alignment === "right" ? "primary" : "default"} 
+                                            color={data.alignment === "right" ? "primary" : "inherit"} 
                                             size="small" 
                                             onClick={() => setData({...data, alignment: "right"})}>
                                             <FormatAlignRight />
@@ -160,7 +161,7 @@ const UrlPopover: FunctionComponent<IUrlPopoverStateProps> = (props) => {
                             </>
                             : null}
                     </Grid>
-                    <Grid container item xs={12} direction="row" justify="flex-end">
+                    <Grid container item xs={12} direction="row" justifyContent="flex-end">
                         {props.data && props.data.url ?
                         <Button
                             onClick={() => props.onConfirm(props.isMedia, "")}