From dd4d883b0b06f1deb3af70c92d024d65cf53111e Mon Sep 17 00:00:00 2001 From: Robin Davies Date: Sun, 13 Feb 2022 18:13:59 -0500 Subject: [PATCH] NueralPi bug fixes. --- react/package.json | 9 +- react/src/App.tsx | 506 ++++++++++++------------ react/src/ControlViewFactory.tsx | 2 +- react/src/DialogEx.tsx | 2 +- react/src/Draggable.tsx | 7 +- react/src/DraggableGrid.tsx | 7 +- react/src/FullScreenIME.tsx | 13 +- react/src/GxTunerControl.tsx | 11 +- react/src/JackHostStatus.tsx | 2 +- react/src/JackServerSettingsDialog.tsx | 26 +- react/src/LoadPluginDialog.tsx | 8 +- react/src/LoadPluginDialogBackup.tsx | 8 +- react/src/MainPage.tsx | 38 +- react/src/MidiBindingView.tsx | 59 +-- react/src/MidiBindingsDialog.tsx | 29 +- react/src/NoChangePassword.tsx | 18 +- react/src/NumericInput.tsx | 11 +- react/src/Pedal.tsx | 8 +- react/src/PedalBoardView.tsx | 13 +- react/src/PluginControl.tsx | 19 +- react/src/PluginControlView.tsx | 11 +- react/src/PluginIcon.tsx | 5 +- react/src/PluginInfoDialog.tsx | 42 +- react/src/PluginPresetSelector.tsx | 23 +- react/src/PresetSelector.tsx | 44 ++- react/src/RenameDialog.tsx | 8 +- react/src/SearchControl.tsx | 24 +- react/src/SelectChannelsDialog.tsx | 18 +- react/src/SelectHoverBackground.tsx | 11 +- react/src/SelectMidiChannelsDialog.tsx | 16 +- react/src/SplitControlView.tsx | 7 +- react/src/TemporaryDrawer.tsx | 19 +- react/src/ToobCabSimView.tsx | 12 +- react/src/ToobFrequencyResponseView.tsx | 10 +- react/src/ToobInputStageView.tsx | 12 +- react/src/ToobPowerStage2View.tsx | 12 +- react/src/ToobSpectrumAnalyzerView.tsx | 12 +- react/src/ToobSpectrumResponseView.tsx | 10 +- react/src/ToobToneStackView.tsx | 12 +- react/src/ToobWaveShapeView.tsx | 10 +- react/src/UploadDialog.tsx | 10 +- react/src/VuMeter.tsx | 13 +- react/src/WifiConfigDialog.tsx | 33 +- react/src/XxxSnippet.tsx | 11 +- react/src/ZoomedDial.tsx | 9 +- react/src/ZoomedUiControl.tsx | 15 +- 46 files changed, 679 insertions(+), 526 deletions(-) diff --git a/react/package.json b/react/package.json index 04e7f3a..d3001c7 100644 --- a/react/package.json +++ b/react/package.json @@ -1,10 +1,13 @@ { - "name": "my-app", + "name": "pipedal", "version": "0.1.0", "private": true, "dependencies": { - "@material-ui/core": "^4.11.4", - "@material-ui/icons": "^4.11.2", + "@emotion/react": "^11.7.1", + "@emotion/styled": "^11.6.0", + "@mui/icons-material": "^5.4.1", + "@mui/material": "^5.4.1", + "@mui/styles": "^5.4.1", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", diff --git a/react/src/App.tsx b/react/src/App.tsx index a55e309..538bd5c 100644 --- a/react/src/App.tsx +++ b/react/src/App.tsx @@ -18,31 +18,31 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { SyntheticEvent } from 'react'; -import { ThemeProvider } from '@material-ui/styles'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, WithStyles } from '@mui/styles'; +import { createTheme, StyledEngineProvider, adaptV4Theme, Theme } from '@mui/material/styles'; import './App.css'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import Typography from '@material-ui/core/Typography'; -import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; -import IconButton from '@material-ui/core/IconButton'; -import MenuButton from '@material-ui/icons/Menu'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import CssBaseline from '@mui/material/CssBaseline'; +import Typography from '@mui/material/Typography'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; +import IconButton from '@mui/material/IconButton'; +import MenuButton from '@mui/icons-material/Menu'; import { TemporaryDrawer } from './TemporaryDrawer'; -import { Theme } from '@material-ui/core/styles/createMuiTheme'; -import FullscreenIcon from '@material-ui/icons/Fullscreen'; -import FullscreenExitIcon from '@material-ui/icons/FullscreenExit'; -import List from '@material-ui/core/List'; -import Divider from '@material-ui/core/Divider'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import FullscreenIcon from '@mui/icons-material/Fullscreen'; +import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; +import List from '@mui/material/List'; +import Divider from '@mui/material/Divider'; +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import CircularProgress from '@mui/material/CircularProgress'; import { OnChangedHandler } from './ObservableProperty'; -import ErrorOutlineIcon from '@material-ui/icons/Error'; +import ErrorOutlineIcon from '@mui/icons-material/Error'; import ResizeResponsiveComponent from './ResizeResponsiveComponent'; -import Button from '@material-ui/core/Button'; +import Button from '@mui/material/Button'; import PresetSelector from './PresetSelector'; import SettingsDialog from './SettingsDialog'; import AboutDialog from './AboutDialog'; @@ -51,18 +51,27 @@ import BankDialog from './BankDialog'; import { PiPedalModelFactory, PiPedalModel, State, ZoomedControlInfo } from './PiPedalModel'; import ZoomedUiControl from './ZoomedUiControl' import MainPage from './MainPage'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import ListSubheader from '@material-ui/core/ListSubheader'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import ListSubheader from '@mui/material/ListSubheader'; import { BankIndex, BankIndexEntry } from './Banks'; import RenameDialog from './RenameDialog'; import JackStatusView from './JackStatusView'; -const theme = createMuiTheme({ + +declare module '@mui/styles/defaultTheme' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends Theme {} +} + + + + +const theme = createTheme(adaptV4Theme({ palette: { primary: { main: "#324c6c" @@ -71,7 +80,7 @@ const theme = createMuiTheme({ main: "#FF6060" } } -}); +})); const appStyles = ({ palette, spacing, mixins }: Theme) => createStyles({ loadingContent: { @@ -619,37 +628,68 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent -
{ - if (!this.model_.serverVersion?.debug ?? false) { - e.preventDefault(); e.stopPropagation(); - } + + +
- - {(!this.state.tinyToolBar) ? - ( - - - { this.showDrawer() }} - > + onContextMenu={(e) => { + if (!this.model_.serverVersion?.debug ?? false) { + e.preventDefault(); e.stopPropagation(); + } + }} + > + + {(!this.state.tinyToolBar) ? + ( + + + { this.showDrawer() }} + size="large"> + + +
+
+ +
+
+ {this.state.canFullScreen && + { this.toggleFullScreen(); }} + size="large"> + {this.state.isFullScreen ? ( + + ) : ( + + + )} + + + } + + + ) : ( +
+ { this.showDrawer() }} + size="large"> -
-
- -
-
- {this.state.canFullScreen && + {this.state.canFullScreen && ( { this.toggleFullScreen(); }}> + style={{ position: "absolute", right: 8, top: 8, zIndex: 2 }} + aria-label="menu" + onClick={() => { this.toggleFullScreen(); }} + size="large"> {this.state.isFullScreen ? ( ) : ( @@ -658,213 +698,193 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent - } - - - ) : ( -
- { this.showDrawer() }} - > - - - {this.state.canFullScreen && ( - { this.toggleFullScreen(); }}> - {this.state.isFullScreen ? ( - - ) : ( - + )} +
+ )} + { this.hideDrawer(); }} > + Banks + }> + { + shortBankList.map((bank) => { + return ( + this.onOpenBank(bank.instanceId)} + > - )} + + - - )} -
- )} - { this.hideDrawer(); }} > - Banks - }> - { - shortBankList.map((bank) => { - return ( - this.onOpenBank(bank.instanceId)} + ); + }) + } + { + showBankSelectDialog && ( + this.handleDrawerSelectBank()} > - + - ); - }) - } - { - showBankSelectDialog && ( - this.handleDrawerSelectBank()} - > - - - - - ) - } - - - - { this.handleDrawerRenameBank() }}> - - - - { this.handleDrawerSaveBankAs() }} > - - - - - - { this.handleDrawerManageBanks(); }}> - - - - - - - - - { this.handleDrawerSettingsClick() }}> - - - - - - { this.handleDrawerAboutClick() }}> - - - - - - - - - {!this.state.tinyToolBar && ( - - )} -
-
-
- {(this.state.displayState !== State.Loading) && ( - - )} -
- -
-
- this.setState({ bankDialogOpen: false })} /> - this.setState({ aboutDialogOpen: false })} /> - this.handleSettingsDialogClose()} /> - { - this.setState({ - renameBankDialogOpen: false, - saveBankAsDialogOpen: false - }) - }} - onOk={(text: string) => { - if (this.state.renameBankDialogOpen) { - this.handleBankRenameOk(text); - } else if (this.state.saveBankAsDialogOpen) { - this.handleSaveBankAsOk(text); - } - } - } - /> - - { this.setState({ zoomedControlOpen: false }); }} - onDialogClosed={() => { this.model_.zoomedUiControl.set(undefined); } - } - /> - - - - { - this.model_.alertMessage.get() + ) } - - - - - - - -
-
+ + + + { this.handleDrawerRenameBank() }}> + + + + { this.handleDrawerSaveBankAs() }} > + + + + + + { this.handleDrawerManageBanks(); }}> + + + + + + + + + { this.handleDrawerSettingsClick() }}> + + + + + + { this.handleDrawerAboutClick() }}> + + + + + + + + + {!this.state.tinyToolBar && ( + + )} +
+
+
+ {(this.state.displayState !== State.Loading) && ( + + )} +
-
-
-
- - Reconnecting... - -
-
-
-
-
 
-
-
- -
-
-

- Error: {this.state.errorMessage} -

-
-
-
+ this.setState({ bankDialogOpen: false })} /> + this.setState({ aboutDialogOpen: false })} /> + this.handleSettingsDialogClose()} /> + { + this.setState({ + renameBankDialogOpen: false, + saveBankAsDialogOpen: false + }) + }} + onOk={(text: string) => { + if (this.state.renameBankDialogOpen) { + this.handleBankRenameOk(text); + } else if (this.state.saveBankAsDialogOpen) { + this.handleSaveBankAsOk(text); + } + } + } + /> + + { this.setState({ zoomedControlOpen: false }); }} + onDialogClosed={() => { this.model_.zoomedUiControl.set(undefined); } + } + /> + + + + { + this.model_.alertMessage.get() + } + + + + + + + +
+
+ +
+
+ +
+ + Reconnecting... + +
+
+
+
+
 
+
+
+ +
+
+

+ Error: {this.state.errorMessage} +

+
+
+ + +
+
 
+
- -
 
- -
-
-
-
-
- +
+
+
+
+ +
+ + Loading... +
- - Loading... -
-
-
- +
+ + ); } } diff --git a/react/src/ControlViewFactory.tsx b/react/src/ControlViewFactory.tsx index 07870f8..54094b4 100644 --- a/react/src/ControlViewFactory.tsx +++ b/react/src/ControlViewFactory.tsx @@ -24,7 +24,7 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import {PedalBoardItem, PedalBoardSplitItem} from './PedalBoard'; import PluginControlView from './PluginControlView'; import SplitControlView from './SplitControlView'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import IControlViewFactory from './IControlViewFactory'; import ToobInputStageViewFactory from './ToobInputStageView'; import ToobToneStackViewFactory from './ToobToneStackView'; diff --git a/react/src/DialogEx.tsx b/react/src/DialogEx.tsx index 38f0fa2..42bd688 100644 --- a/react/src/DialogEx.tsx +++ b/react/src/DialogEx.tsx @@ -19,7 +19,7 @@ import React from 'react'; -import Dialog, {DialogProps} from '@material-ui/core/Dialog'; +import Dialog, {DialogProps} from '@mui/material/Dialog'; interface DialogExProps extends DialogProps { diff --git a/react/src/Draggable.tsx b/react/src/Draggable.tsx index afb1b1f..ec609d4 100644 --- a/react/src/Draggable.tsx +++ b/react/src/Draggable.tsx @@ -18,7 +18,10 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { MouseEvent, PointerEvent, ReactNode, Component } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalStateError } from './PiPedalError'; @@ -51,7 +54,7 @@ export interface DraggableProps extends WithStyles { draggable?: boolean; -}; +} type DraggableState = { }; diff --git a/react/src/DraggableGrid.tsx b/react/src/DraggableGrid.tsx index a0760f0..8ed59b3 100644 --- a/react/src/DraggableGrid.tsx +++ b/react/src/DraggableGrid.tsx @@ -17,7 +17,8 @@ // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, { MouseEvent, PointerEvent, Component } from 'react'; -import { createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import createStyles from '@mui/styles/createStyles'; import { Property } from "csstype"; import { nullCast} from './Utility' @@ -63,7 +64,7 @@ class AnimationData { this.animating = true; } -}; +} // eslint-disable-next-line @typescript-eslint/no-unused-vars const styles = (theme: Theme) => createStyles({ @@ -99,7 +100,7 @@ export interface DraggableGridProps moveElement: (from: number, to: number) => void; scroll: ScrollDirection; -}; +} type DraggableGridState = { indexToSelect?: number; diff --git a/react/src/FullScreenIME.tsx b/react/src/FullScreenIME.tsx index 7acb54d..0a9cb8a 100644 --- a/react/src/FullScreenIME.tsx +++ b/react/src/FullScreenIME.tsx @@ -18,14 +18,17 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, { ReactNode } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import ResizeResponsiveComponent from './ResizeResponsiveComponent'; import { UiControl } from './Lv2Plugin'; -import Dialog from '@material-ui/core/Dialog'; -import Input from '@material-ui/core/Input'; +import Dialog from '@mui/material/Dialog'; +import Input from '@mui/material/Input'; import { nullCast } from './Utility'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; const styles = (theme: Theme) => createStyles({ @@ -51,7 +54,7 @@ interface FullScreenIMEProps extends WithStyles { onChange: (key: string, value: number) => void; onClose: () => void; initialHeight: number; -}; +} type FullScreenIMEState = { error: boolean; }; diff --git a/react/src/GxTunerControl.tsx b/react/src/GxTunerControl.tsx index 7aa6ded..a47ddb5 100644 --- a/react/src/GxTunerControl.tsx +++ b/react/src/GxTunerControl.tsx @@ -18,7 +18,10 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, {Component} from 'react'; -import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { MonitorPortHandle, PiPedalModel, State, PiPedalModelFactory } from "./PiPedalModel"; import SvgPathBuilder from './SvgPathBuilder' @@ -55,7 +58,7 @@ interface PitchInfo { fraction: number; semitoneCents: number -}; +} const FLAT = "\u{266d}"; const SHARP = "#"; @@ -64,7 +67,7 @@ const DOUBLE_SHARP = "\uD834\uDD2A"; const HALF_FLAT = "\uD834\uDD33"; const HALF_SHARP = "\uD834\uDD32"; - + const NOTES_12TET: string[] = [ "C", "C" + SHARP, "D", "E"+FLAT,"E", "F", "F" + SHARP, "G", "A"+FLAT,"A","B"+FLAT,"B" ]; @@ -86,7 +89,7 @@ const NOTES_53TET = ["la","laa","lo","law","ta","teh","te","tu","tuh","ti","tih" interface GxTunerControlProps extends WithStyles { theme: Theme; instanceId: number; -}; +} type GxTunerControlState = { pitchInfo: PitchInfo tet: number; diff --git a/react/src/JackHostStatus.tsx b/react/src/JackHostStatus.tsx index 626eb40..9a1e624 100644 --- a/react/src/JackHostStatus.tsx +++ b/react/src/JackHostStatus.tsx @@ -18,7 +18,7 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; const RED_COLOR = "#C00"; diff --git a/react/src/JackServerSettingsDialog.tsx b/react/src/JackServerSettingsDialog.tsx index 4186f36..e909cb2 100644 --- a/react/src/JackServerSettingsDialog.tsx +++ b/react/src/JackServerSettingsDialog.tsx @@ -20,20 +20,24 @@ import React, { Component } from 'react'; -import { createStyles, WithStyles, withStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import Button from '@material-ui/core/Button'; -import DialogActions from '@material-ui/core/DialogActions'; -import Dialog from '@material-ui/core/Dialog'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; + +import Button from '@mui/material/Button'; +import DialogActions from '@mui/material/DialogActions'; +import Dialog from '@mui/material/Dialog'; import JackServerSettings from './JackServerSettings'; -import InputLabel from '@material-ui/core/InputLabel'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import DialogContent from '@material-ui/core/DialogContent'; -import MenuItem from '@material-ui/core/MenuItem'; -import Typography from '@material-ui/core/Typography'; +import InputLabel from '@mui/material/InputLabel'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import DialogContent from '@mui/material/DialogContent'; +import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import AlsaDeviceInfo from './AlsaDeviceInfo'; @@ -43,7 +47,7 @@ interface JackServerSettingsDialogState { latencyText: string; jackServerSettings: JackServerSettings; alsaDevices?: AlsaDeviceInfo[]; -}; +} const styles = (theme: Theme) => createStyles({ diff --git a/react/src/LoadPluginDialog.tsx b/react/src/LoadPluginDialog.tsx index 3655b86..065f10b 100644 --- a/react/src/LoadPluginDialog.tsx +++ b/react/src/LoadPluginDialog.tsx @@ -500,7 +500,6 @@ export const LoadPluginDialog = let gridColumnCount = this.state.grid_cell_columns; this.gridColumnCount = gridColumnCount; return ( - { this.handleKeyPress(e); }} @@ -546,9 +545,12 @@ export const LoadPluginDialog = }} />
- { this.onFilterChange(e); }} style={{ flex: "0 0 160px" }} - > + variant="standard"> {this.createFilterOptions()}
diff --git a/react/src/LoadPluginDialogBackup.tsx b/react/src/LoadPluginDialogBackup.tsx index fd197eb..5d61b4d 100644 --- a/react/src/LoadPluginDialogBackup.tsx +++ b/react/src/LoadPluginDialogBackup.tsx @@ -372,7 +372,6 @@ export const LoadPluginDialog = } return ( - 520 ? "Select Plugin" : "" }
- { this.onFilterChange(e); }} style={{ flex: "0 0 160px" }} - > + variant="standard"> {this.createFilterOptions()}
diff --git a/react/src/MainPage.tsx b/react/src/MainPage.tsx index 1cb3d4f..4fba174 100644 --- a/react/src/MainPage.tsx +++ b/react/src/MainPage.tsx @@ -18,24 +18,27 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { SyntheticEvent } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import { PedalBoard, PedalBoardItem, PedalBoardSplitItem, SplitType } from './PedalBoard'; -import Button from '@material-ui/core/Button'; -import InputIcon from '@material-ui/icons/Input'; +import Button from '@mui/material/Button'; +import InputIcon from '@mui/icons-material/Input'; import LoadPluginDialog from './LoadPluginDialog'; -import Switch from '@material-ui/core/Switch'; +import Switch from '@mui/material/Switch'; import PedalBoardView from './PedalBoardView'; import { PiPedalStateError } from './PiPedalError'; -import IconButton from '@material-ui/core/IconButton'; -import AddIcon from '@material-ui/icons/Add'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Fade from '@material-ui/core/Fade'; -import Divider from '@material-ui/core/Divider'; +import IconButton from '@mui/material/IconButton'; +import AddIcon from '@mui/icons-material/Add'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Fade from '@mui/material/Fade'; +import Divider from '@mui/material/Divider'; import ResizeResponsiveComponent from './ResizeResponsiveComponent'; import PluginInfoDialog from './PluginInfoDialog'; import { GetControlView } from './ControlViewFactory'; @@ -88,7 +91,7 @@ const styles = ({ palette }: Theme) => createStyles({ interface MainProps extends WithStyles { hasTinyToolBar: boolean; theme: Theme; -}; +} interface MainState { selectedPedal: number; @@ -99,7 +102,7 @@ interface MainState { horizontalScrollLayout: boolean; showMidiBindingsDialog: boolean; screenHeight: number; -}; +} export const MainPage = @@ -392,7 +395,7 @@ export const MainPage =
- { this.onAddClick(e) }} > + { this.onAddClick(e) }} size="large">
- { this.onDeletePedal(pedalBoardItem?.instanceId ?? -1) }} > + { this.onDeletePedal(pedalBoardItem?.instanceId ?? -1) }} + size="large"> Delete
@@ -428,7 +433,9 @@ export const MainPage =
- { this.handleMidiConfiguration(instanceId); }}> + { this.handleMidiConfiguration(instanceId); }} + size="large"> Midi configuration @@ -462,7 +469,6 @@ export const MainPage = ) }
- ); } } diff --git a/react/src/MidiBindingView.tsx b/react/src/MidiBindingView.tsx index eb3d470..04d77a8 100644 --- a/react/src/MidiBindingView.tsx +++ b/react/src/MidiBindingView.tsx @@ -19,15 +19,18 @@ import { Component } from 'react'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; -import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; import MidiBinding from './MidiBinding'; import Utility, { nullCast } from './Utility'; -import Typography from '@material-ui/core/Typography'; -import MicNoneOutlinedIcon from '@material-ui/icons/MicNoneOutlined'; -import MicOutlinedIcon from '@material-ui/icons/MicOutlined'; -import IconButton from '@material-ui/core/IconButton'; +import Typography from '@mui/material/Typography'; +import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined'; +import MicOutlinedIcon from '@mui/icons-material/MicOutlined'; +import IconButton from '@mui/material/IconButton'; import NumericInput from './NumericInput'; @@ -44,11 +47,11 @@ interface MidiBindingViewProps extends WithStyles { midiBinding: MidiBinding; onChange: (instanceId: number, newBinding: MidiBinding) => void; onListen: (instanceId: number, key: string, listenForControl: boolean) => void; -}; +} interface MidiBindingViewState { -}; +} @@ -191,14 +194,16 @@ const MidiBindingView = this.generateMidiSelects() } - { - if (this.props.listen) - { - this.props.onListen(-2, "", false) - } else { - this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, false) - } - }}> + { + if (this.props.listen) + { + this.props.onListen(-2, "", false) + } else { + this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, false) + } + }} + size="large"> { this.props.listen ? ( ) : ( @@ -223,14 +228,16 @@ const MidiBindingView = this.generateControlSelects() } - { - if (this.props.listen) - { - this.props.onListen(-2, "", false) - } else { - this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, true) - } - }}> + { + if (this.props.listen) + { + this.props.onListen(-2, "", false) + } else { + this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, true) + } + }} + size="large"> { this.props.listen ? ( ) : ( @@ -310,7 +317,7 @@ const MidiBindingView = ) }
- ) + ); } }); diff --git a/react/src/MidiBindingsDialog.tsx b/react/src/MidiBindingsDialog.tsx index 880241b..921395b 100644 --- a/react/src/MidiBindingsDialog.tsx +++ b/react/src/MidiBindingsDialog.tsx @@ -21,15 +21,18 @@ import React, { SyntheticEvent } from 'react'; import DialogEx from './DialogEx'; import ResizeResponsiveComponent from './ResizeResponsiveComponent'; import { PiPedalModel, PiPedalModelFactory, ListenHandle } from './PiPedalModel'; -import Typography from '@material-ui/core/Typography'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import IconButton from '@material-ui/core/IconButton'; +import Typography from '@mui/material/Typography'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import IconButton from '@mui/material/IconButton'; import MidiBinding from './MidiBinding'; import MidiBindingView from './MidiBindingView'; -import Snackbar from '@material-ui/core/Snackbar'; +import Snackbar from '@mui/material/Snackbar'; const styles = (theme: Theme) => createStyles({ dialogAppBar: { @@ -63,14 +66,14 @@ const styles = (theme: Theme) => createStyles({ export interface MidiBindingDialogProps extends WithStyles { open: boolean, onClose: () => void -}; +} export interface MidiBindingDialogState { listenInstanceId: number; listenSymbol: string; listenSnackbarOpen: boolean; -}; +} export const MidiBindingDialog = withStyles(styles, { withTheme: true })( @@ -274,8 +277,12 @@ export const MidiBindingDialog =
- + diff --git a/react/src/NoChangePassword.tsx b/react/src/NoChangePassword.tsx index bf5d6dc..33d72f8 100644 --- a/react/src/NoChangePassword.tsx +++ b/react/src/NoChangePassword.tsx @@ -18,15 +18,15 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import IconButton from '@material-ui/core/IconButton'; -import FormControl from '@material-ui/core/FormControl'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import InputLabel from '@material-ui/core/InputLabel'; -import Input from '@material-ui/core/Input'; +import InputAdornment from '@mui/material/InputAdornment'; +import IconButton from '@mui/material/IconButton'; +import FormControl from '@mui/material/FormControl'; +import FormHelperText from '@mui/material/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import Input from '@mui/material/Input'; -import Visibility from '@material-ui/icons/Visibility'; -import VisibilityOff from '@material-ui/icons/VisibilityOff'; +import Visibility from '@mui/icons-material/Visibility'; +import VisibilityOff from '@mui/icons-material/VisibilityOff'; @@ -124,7 +124,7 @@ class NoChangePassword extends React.Component this.handleShowPassword()} onMouseDown={(e) => e.preventDefault()} - > + size="large"> {this.state.showPassword ? : } diff --git a/react/src/NumericInput.tsx b/react/src/NumericInput.tsx index 1b6b641..ab6229a 100644 --- a/react/src/NumericInput.tsx +++ b/react/src/NumericInput.tsx @@ -18,8 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, { Component } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; -import Input from '@material-ui/core/Input'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; +import Input from '@mui/material/Input'; @@ -35,11 +38,11 @@ interface NumericInputProps extends WithStyles { min: number; max: number; onChange: (value: number) => void; -}; +} interface NumericInputState { error: boolean; -}; +} export const NumericInput = withStyles(styles, { withTheme: true })( diff --git a/react/src/Pedal.tsx b/react/src/Pedal.tsx index 8f195e2..50d3e31 100644 --- a/react/src/Pedal.tsx +++ b/react/src/Pedal.tsx @@ -18,8 +18,10 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, { Component, ReactNode } from 'react'; -import { withStyles, createStyles, WithStyles } from '@material-ui/core'; -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import { Theme } from '@mui/material/styles'; import { Lv2Plugin } from './Lv2Plugin' @@ -31,7 +33,7 @@ interface PedalProps extends WithStyles { plugin: Lv2Plugin; children?: React.ReactChild | React.ReactChild[]; -}; +} type PedalState = { diff --git a/react/src/PedalBoardView.tsx b/react/src/PedalBoardView.tsx index adc30cf..feb3243 100644 --- a/react/src/PedalBoardView.tsx +++ b/react/src/PedalBoardView.tsx @@ -18,11 +18,14 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, { ReactNode, Component, SyntheticEvent } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import { PluginType } from './Lv2Plugin'; -import ButtonBase from '@material-ui/core/ButtonBase'; -import Typography from '@material-ui/core/Typography'; +import ButtonBase from '@mui/material/ButtonBase'; +import Typography from '@mui/material/Typography'; import { SelectIcon } from './PluginIcon'; import { SelectHoverBackground } from './SelectHoverBackground'; import SvgPathBuilder from './SvgPathBuilder'; @@ -174,11 +177,11 @@ interface PedalBoardProps extends WithStyles { onDoubleClick?: OnSelectHandler; hasTinyToolBar: boolean; -}; +} interface LayoutSize { width: number; height: number; -}; +} type PedalBoardState = { pedalBoard?: PedalBoard; diff --git a/react/src/PluginControl.tsx b/react/src/PluginControl.tsx index e5d9c5b..91d38a9 100644 --- a/react/src/PluginControl.tsx +++ b/react/src/PluginControl.tsx @@ -18,14 +18,17 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, { TouchEvent, PointerEvent, ReactNode, Component, SyntheticEvent } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { UiControl, ScalePoint } from './Lv2Plugin'; -import Typography from '@material-ui/core/Typography'; -import Input from '@material-ui/core/Input'; -import Select from '@material-ui/core/Select'; -import Switch from '@material-ui/core/Switch'; +import Typography from '@mui/material/Typography'; +import Input from '@mui/material/Input'; +import Select from '@mui/material/Select'; +import Switch from '@mui/material/Switch'; import Utility, {nullCast} from './Utility'; -import MenuItem from '@material-ui/core/MenuItem'; +import MenuItem from '@mui/material/MenuItem'; import {PiPedalModel,PiPedalModelFactory} from './PiPedalModel'; @@ -60,7 +63,7 @@ const styles = (theme: Theme) => createStyles({ duration: theme.transitions.duration.shortest }), backgroundColor: theme.palette.secondary.main, - opacity: theme.palette.type === 'light' ? 0.38 : 0.3 + opacity: theme.palette.mode === 'light' ? 0.38 : 0.3 }, displayValue: { position: "absolute", @@ -84,7 +87,7 @@ export interface PluginControlProps extends WithStyles { onChange: (value: number) => void; theme: Theme; requestIMEEdit: (uiControl: UiControl, value: number) => void; -}; +} type PluginControlState = { error: boolean; }; diff --git a/react/src/PluginControlView.tsx b/react/src/PluginControlView.tsx index 20bdce0..45510ad 100644 --- a/react/src/PluginControlView.tsx +++ b/react/src/PluginControlView.tsx @@ -18,7 +18,10 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { ReactNode } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import { UiPlugin, UiControl } from './Lv2Plugin'; import { @@ -30,7 +33,7 @@ import VuMeter from './VuMeter'; import { nullCast } from './Utility' import GxTunerControl from './GxTunerControl'; import { PiPedalStateError } from './PiPedalError'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import FullScreenIME from './FullScreenIME'; @@ -181,7 +184,7 @@ export type ControlNodes = (ReactNode | ControlGroup)[]; export interface ControlViewCustomization { ModifyControls(controls: (React.ReactNode | ControlGroup)[]): (React.ReactNode | ControlGroup)[]; -}; +} export interface PluginControlViewProps extends WithStyles { theme: Theme; @@ -189,7 +192,7 @@ export interface PluginControlViewProps extends WithStyles { item: PedalBoardItem; customization?: ControlViewCustomization; customizationId?: number; -}; +} type PluginControlViewState = { landscapeGrid: boolean; imeUiControl?: UiControl; diff --git a/react/src/PluginIcon.tsx b/react/src/PluginIcon.tsx index 0506e4a..755bc8f 100644 --- a/react/src/PluginIcon.tsx +++ b/react/src/PluginIcon.tsx @@ -17,7 +17,10 @@ // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModelFactory } from "./PiPedalModel"; import { PluginType } from './Lv2Plugin'; diff --git a/react/src/PluginInfoDialog.tsx b/react/src/PluginInfoDialog.tsx index 6b1c00b..88ec6f5 100644 --- a/react/src/PluginInfoDialog.tsx +++ b/react/src/PluginInfoDialog.tsx @@ -18,18 +18,21 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import MuiDialogTitle from '@material-ui/core/DialogTitle'; -import MuiDialogContent from '@material-ui/core/DialogContent'; -import MuiDialogActions from '@material-ui/core/DialogActions'; -import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; -import Grid from '@material-ui/core/Grid'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import MuiDialogTitle from '@mui/material/DialogTitle'; +import MuiDialogContent from '@mui/material/DialogContent'; +import MuiDialogActions from '@mui/material/DialogActions'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; import { PiPedalModelFactory } from "./PiPedalModel"; -import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import { UiPlugin, UiControl } from './Lv2Plugin'; import PluginIcon from './PluginIcon'; @@ -132,7 +135,7 @@ function makeParagraphs(description: string) { } function makeControls(controls: UiControl[]) { return ( - + { controls.map((control) => ( @@ -143,7 +146,6 @@ function makeControls(controls: UiControl[]) { )) } - ); } @@ -176,8 +178,10 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => { return (
- + {open && ( @@ -190,8 +194,12 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
{plugin.name}
- handleClose()} - style={{ flex: "0 0 auto" }}> + handleClose()} + style={{ flex: "0 0 auto" }} + size="large">
diff --git a/react/src/PluginPresetSelector.tsx b/react/src/PluginPresetSelector.tsx index b8608e5..b66aabb 100644 --- a/react/src/PluginPresetSelector.tsx +++ b/react/src/PluginPresetSelector.tsx @@ -18,14 +18,17 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { SyntheticEvent, Component } from 'react'; -import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; -import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; import PresetDialog from './PresetDialog'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Fade from '@material-ui/core/Fade'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Fade from '@mui/material/Fade'; import RenameDialog from './RenameDialog' import PluginPreset from './PluginPreset'; @@ -34,7 +37,7 @@ interface PluginPresetSelectorProps extends WithStyles { pluginUri?: string; onSelectPreset: (presetName: string) => void; -}; +} interface PluginPresetSelectorState { @@ -49,7 +52,7 @@ interface PluginPresetSelectorState { renameDialogActionName: string; renameDialogOnOk?: (name: string) => void; -}; +} const styles = (theme: Theme) => createStyles({ @@ -257,7 +260,7 @@ const PluginPresetSelector = } return (
- this.handlePresetMenuClick(e)}> + this.handlePresetMenuClick(e)} size="large"> Plugin Presets this.handleRenameDialogClose()} onOk={(name: string) => this.handleRenameDialogOk(name)} />
- ) + ); } }); diff --git a/react/src/PresetSelector.tsx b/react/src/PresetSelector.tsx index a602d0b..98d1f3e 100644 --- a/react/src/PresetSelector.tsx +++ b/react/src/PresetSelector.tsx @@ -18,27 +18,30 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { SyntheticEvent, Component } from 'react'; -import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; import { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel'; -import SaveIconOutline from '@material-ui/icons/Save'; -import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; -import ButtonBase from "@material-ui/core/ButtonBase"; -import MoreVertIcon from '@material-ui/icons/MoreVert'; -import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles'; +import SaveIconOutline from '@mui/icons-material/Save'; +import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; +import ButtonBase from "@mui/material/ButtonBase"; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; import PresetDialog from './PresetDialog'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Fade from '@material-ui/core/Fade'; -import Divider from '@material-ui/core/Divider'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Fade from '@mui/material/Fade'; +import Divider from '@mui/material/Divider'; import RenameDialog from './RenameDialog' -import Select from '@material-ui/core/Select'; +import Select from '@mui/material/Select'; import UploadDialog from './UploadDialog'; interface PresetSelectorProps extends WithStyles { -}; +} interface PresetSelectorState { @@ -54,7 +57,7 @@ interface PresetSelectorState { renameDialogOnOk?: (name: string) => void; openUploadDialog: boolean; -}; +} const selectColor = "black"; @@ -329,13 +332,18 @@ const PresetSelector = )}
- { this.handleSave(); }} > + { this.handleSave(); }} + size="large">
- this.handlePresetMenuClick(e)}> + this.handlePresetMenuClick(e)} + size="large"> { this.setState({ openUploadDialog: false }) }} />
- ) + ); } }); diff --git a/react/src/RenameDialog.tsx b/react/src/RenameDialog.tsx index 0b8a095..650a9d3 100644 --- a/react/src/RenameDialog.tsx +++ b/react/src/RenameDialog.tsx @@ -18,11 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; import DialogEx from './DialogEx'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; import { nullCast } from './Utility'; import ResizeResponsiveComponent from './ResizeResponsiveComponent'; diff --git a/react/src/SearchControl.tsx b/react/src/SearchControl.tsx index ffd1b9d..4e5dabb 100644 --- a/react/src/SearchControl.tsx +++ b/react/src/SearchControl.tsx @@ -18,12 +18,15 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles'; -import Input from '@material-ui/core/Input'; -import IconButton from '@material-ui/core/IconButton'; -import SearchIcon from '@material-ui/icons/Search'; -import ClearIcon from '@material-ui/icons/Clear'; -import InputAdornment from '@material-ui/core/InputAdornment'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import Input from '@mui/material/Input'; +import IconButton from '@mui/material/IconButton'; +import SearchIcon from '@mui/icons-material/Search'; +import ClearIcon from '@mui/icons-material/Clear'; +import InputAdornment from '@mui/material/InputAdornment'; const styles = (theme: Theme) => createStyles({ }); @@ -39,10 +42,10 @@ interface SearchControlProps extends WithStyles { inputRef?: React.RefObject; showSearchIcon?: boolean -}; +} interface SearchControlState { -}; +} const SearchControl = withStyles(styles, { withTheme: true })( @@ -87,8 +90,7 @@ const SearchControl = withStyles(styles, { withTheme: true })( return (
{(this.props.showSearchIcon ?? true) && ( - { this.props.onClick(); }} - > + { this.props.onClick(); }} size="large"> ) @@ -112,7 +114,7 @@ const SearchControl = withStyles(styles, { withTheme: true })( } }} edge="end" - > + size="large"> diff --git a/react/src/SelectChannelsDialog.tsx b/react/src/SelectChannelsDialog.tsx index 50f76a3..fe77594 100644 --- a/react/src/SelectChannelsDialog.tsx +++ b/react/src/SelectChannelsDialog.tsx @@ -18,16 +18,16 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { useState } from 'react'; -import Button from '@material-ui/core/Button'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogActions from '@material-ui/core/DialogActions'; -import Dialog from '@material-ui/core/Dialog'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Button from '@mui/material/Button'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogActions from '@mui/material/DialogActions'; +import Dialog from '@mui/material/Dialog'; +import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@material-ui/core/Checkbox'; +import Checkbox from '@mui/material/Checkbox'; diff --git a/react/src/SelectHoverBackground.tsx b/react/src/SelectHoverBackground.tsx index 581c728..6e205cc 100644 --- a/react/src/SelectHoverBackground.tsx +++ b/react/src/SelectHoverBackground.tsx @@ -18,7 +18,12 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { Component, SyntheticEvent } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; const styles = ({ palette }: Theme) => createStyles({ @@ -50,11 +55,11 @@ interface HoverProps extends WithStyles { selected: boolean; showHover?: boolean; theme: Theme; -}; +} interface HoverState { hovering: boolean; -}; +} export const SelectHoverBackground = diff --git a/react/src/SelectMidiChannelsDialog.tsx b/react/src/SelectMidiChannelsDialog.tsx index 5aa2461..ff7a3c0 100644 --- a/react/src/SelectMidiChannelsDialog.tsx +++ b/react/src/SelectMidiChannelsDialog.tsx @@ -18,15 +18,15 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { useState } from 'react'; -import Button from '@material-ui/core/Button'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogActions from '@material-ui/core/DialogActions'; -import Dialog from '@material-ui/core/Dialog'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Button from '@mui/material/Button'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogActions from '@mui/material/DialogActions'; +import Dialog from '@mui/material/Dialog'; +import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@material-ui/core/Checkbox'; +import Checkbox from '@mui/material/Checkbox'; diff --git a/react/src/SplitControlView.tsx b/react/src/SplitControlView.tsx index 36c8e9d..6fa68a7 100644 --- a/react/src/SplitControlView.tsx +++ b/react/src/SplitControlView.tsx @@ -18,7 +18,10 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { ReactNode } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import { UiPlugin } from './Lv2Plugin'; import { @@ -95,7 +98,7 @@ interface SplitControlViewProps extends WithStyles { theme: Theme; instanceId: number; item: PedalBoardSplitItem; -}; +} type SplitControlViewState = { landscapeGrid: boolean; }; diff --git a/react/src/TemporaryDrawer.tsx b/react/src/TemporaryDrawer.tsx index 08ecb1e..1b3f272 100644 --- a/react/src/TemporaryDrawer.tsx +++ b/react/src/TemporaryDrawer.tsx @@ -18,13 +18,15 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, { Component } from 'react'; -import { withStyles, createStyles, WithStyles } from '@material-ui/core'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; -import Toolbar from '@material-ui/core/Toolbar'; -import IconButton from '@material-ui/core/Toolbar'; -import Drawer from '@material-ui/core/Drawer'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import Toolbar from '@mui/material/Toolbar'; +import IconButton from '@mui/material/Toolbar'; +import Drawer from '@mui/material/Drawer'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import { Theme } from '@mui/material/styles'; const drawerStyles = ({ palette }: Theme) => createStyles({ @@ -55,7 +57,7 @@ interface DrawerProps extends WithStyles { onClose?: CloseEventHandler; children?: React.ReactChild | React.ReactChild[]; -}; +} type DrawerState = { is_open: boolean; } @@ -98,8 +100,7 @@ export const TemporaryDrawer = withStyles(drawerStyles)( - + diff --git a/react/src/ToobCabSimView.tsx b/react/src/ToobCabSimView.tsx index 03b571f..e1455a4 100644 --- a/react/src/ToobCabSimView.tsx +++ b/react/src/ToobCabSimView.tsx @@ -18,7 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import IControlViewFactory from './IControlViewFactory'; import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel"; @@ -35,10 +39,10 @@ interface ToobCabSimProps extends WithStyles { instanceId: number; item: PedalBoardItem; -}; +} interface ToobCabSimState { -}; +} const ToobCabSimView = withStyles(styles, { withTheme: true })( @@ -84,5 +88,5 @@ class ToobCabSimViewFactory implements IControlViewFactory { } -}; +} export default ToobCabSimViewFactory; \ No newline at end of file diff --git a/react/src/ToobFrequencyResponseView.tsx b/react/src/ToobFrequencyResponseView.tsx index 8ee543d..22fdd8b 100644 --- a/react/src/ToobFrequencyResponseView.tsx +++ b/react/src/ToobFrequencyResponseView.tsx @@ -18,7 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModelFactory, PiPedalModel, State } from "./PiPedalModel"; import { StandardItemSize } from './PluginControlView'; @@ -43,10 +47,10 @@ const styles = (theme: Theme) => createStyles({ interface ToobFrequencyResponseProps extends WithStyles { instanceId: number; -}; +} interface ToobFrequencyResponseState { path: string; -}; +} const ToobFrequencyResponseView = withStyles(styles, { withTheme: true })( diff --git a/react/src/ToobInputStageView.tsx b/react/src/ToobInputStageView.tsx index 050a446..cf0cf6f 100644 --- a/react/src/ToobInputStageView.tsx +++ b/react/src/ToobInputStageView.tsx @@ -18,7 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import IControlViewFactory from './IControlViewFactory'; import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel"; @@ -35,10 +39,10 @@ interface ToobInputStageProps extends WithStyles { instanceId: number; item: PedalBoardItem; -}; +} interface ToobInputStageState { -}; +} const ToobInputStageView = withStyles(styles, { withTheme: true })( @@ -85,5 +89,5 @@ class ToobInputStageViewFactory implements IControlViewFactory { } -}; +} export default ToobInputStageViewFactory; \ No newline at end of file diff --git a/react/src/ToobPowerStage2View.tsx b/react/src/ToobPowerStage2View.tsx index d1394a1..9105caa 100644 --- a/react/src/ToobPowerStage2View.tsx +++ b/react/src/ToobPowerStage2View.tsx @@ -18,7 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import IControlViewFactory from './IControlViewFactory'; import { PiPedalModelFactory, PiPedalModel, State,ListenHandle } from "./PiPedalModel"; @@ -35,10 +39,10 @@ interface ToobPowerstage2Props extends WithStyles { instanceId: number; item: PedalBoardItem; -}; +} interface ToobPowerstage2State { uiState: number[]; -}; +} const ToobPowerstage2View = withStyles(styles, { withTheme: true })( @@ -181,5 +185,5 @@ class ToobPowerstage2ViewFactory implements IControlViewFactory { } -}; +} export default ToobPowerstage2ViewFactory; \ No newline at end of file diff --git a/react/src/ToobSpectrumAnalyzerView.tsx b/react/src/ToobSpectrumAnalyzerView.tsx index 0f282cd..fa95568 100644 --- a/react/src/ToobSpectrumAnalyzerView.tsx +++ b/react/src/ToobSpectrumAnalyzerView.tsx @@ -18,7 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import IControlViewFactory from './IControlViewFactory'; import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel"; @@ -36,10 +40,10 @@ interface ToobSpectrumAnalyzerProps extends WithStyles { instanceId: number; item: PedalBoardItem; -}; +} interface ToobSpectrumAnalyzerState { -}; +} const ToobSpectrumAnalyzerView = withStyles(styles, { withTheme: true })( @@ -85,5 +89,5 @@ class ToobSpectrumAnalyzerViewFactory implements IControlViewFactory { } -}; +} export default ToobSpectrumAnalyzerViewFactory; \ No newline at end of file diff --git a/react/src/ToobSpectrumResponseView.tsx b/react/src/ToobSpectrumResponseView.tsx index 94f2fe9..6826859 100644 --- a/react/src/ToobSpectrumResponseView.tsx +++ b/react/src/ToobSpectrumResponseView.tsx @@ -19,7 +19,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModelFactory, PiPedalModel, State,ListenHandle } from "./PiPedalModel"; import { StandardItemSize } from './PluginControlView'; @@ -44,12 +48,12 @@ const styles = (theme: Theme) => createStyles({ interface ToobSpectrumResponseProps extends WithStyles { instanceId: number; -}; +} interface ToobSpectrumResponseState { path: string; minF: number; maxF: number; -}; +} const ToobSpectrumResponseView = withStyles(styles, { withTheme: true })( diff --git a/react/src/ToobToneStackView.tsx b/react/src/ToobToneStackView.tsx index e2fb8d6..d023aac 100644 --- a/react/src/ToobToneStackView.tsx +++ b/react/src/ToobToneStackView.tsx @@ -18,7 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import IControlViewFactory from './IControlViewFactory'; import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel"; @@ -35,10 +39,10 @@ interface ToobToneStackProps extends WithStyles { instanceId: number; item: PedalBoardItem; -}; +} interface ToobToneStackState { -}; +} const ToobToneStackView = withStyles(styles, { withTheme: true })( @@ -84,5 +88,5 @@ class ToobToneStackViewFactory implements IControlViewFactory { } -}; +} export default ToobToneStackViewFactory; \ No newline at end of file diff --git a/react/src/ToobWaveShapeView.tsx b/react/src/ToobWaveShapeView.tsx index a141c95..04170da 100644 --- a/react/src/ToobWaveShapeView.tsx +++ b/react/src/ToobWaveShapeView.tsx @@ -18,7 +18,11 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModelFactory, PiPedalModel, State, ControlValueChangedHandle } from "./PiPedalModel"; import { StandardItemSize } from './PluginControlView'; @@ -55,10 +59,10 @@ interface ToobWaveShapeProps extends WithStyles { vuOutMinPeak: number; vuOutMaxPeak: number; -}; +} interface ToobWaveShapeState { data: number[]; -}; +} const HOLD_TIME: number = 1.6; // seconds. const DECAY_RATE = 1.0; // full range/second. diff --git a/react/src/UploadDialog.tsx b/react/src/UploadDialog.tsx index 8f54c5e..b4fa016 100644 --- a/react/src/UploadDialog.tsx +++ b/react/src/UploadDialog.tsx @@ -18,15 +18,15 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import Button from '@material-ui/core/Button'; +import Button from '@mui/material/Button'; import {PiPedalModel,PiPedalModelFactory} from './PiPedalModel'; import DialogEx from './DialogEx'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; import ResizeResponsiveComponent from './ResizeResponsiveComponent'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; const PRESET_EXTENSION = ".piPreset"; diff --git a/react/src/VuMeter.tsx b/react/src/VuMeter.tsx index 243b45f..12c2ffe 100644 --- a/react/src/VuMeter.tsx +++ b/react/src/VuMeter.tsx @@ -18,7 +18,10 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, { Component } from 'react'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { PiPedalModel, State,PiPedalModelFactory, VuUpdateInfo, VuSubscriptionHandle } from './PiPedalModel'; @@ -46,7 +49,7 @@ interface VuChannelData { greenDiv: HTMLDivElement; telltaleDiv: HTMLDivElement; -}; +} class TelltaleState { telltaleDb: number = MIN_DB; @@ -85,7 +88,7 @@ class TelltaleState { } } -}; +} const LEFT_X = BORDER_THICKNESS; const RIGHT_X = BORDER_THICKNESS + + CHANNEL_WIDTH + BORDER_THICKNESS; @@ -186,11 +189,11 @@ interface VuMeterProps extends WithStyles { instanceId: number; display: "input" | "output"; theme: Theme; -}; +} interface VuMeterState { isStereo: boolean; -}; +} function aToDb(value: number): number { if (value === 0) return -96; diff --git a/react/src/WifiConfigDialog.tsx b/react/src/WifiConfigDialog.tsx index 17281d8..73c47ba 100644 --- a/react/src/WifiConfigDialog.tsx +++ b/react/src/WifiConfigDialog.tsx @@ -18,23 +18,26 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; import DialogEx from './DialogEx'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import Switch from '@material-ui/core/Switch'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import Switch from '@mui/material/Switch'; +import FormControlLabel from '@mui/material/FormControlLabel'; import ResizeResponsiveComponent from './ResizeResponsiveComponent'; import WifiConfigSettings from './WifiConfigSettings'; import NoChangePassword from './NoChangePassword'; -import Typography from '@material-ui/core/Typography'; -import { Theme, withStyles, WithStyles,createStyles } from '@material-ui/core/styles'; -import Select from '@material-ui/core/Select'; -import FormControl from '@material-ui/core/FormControl'; -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; +import Typography from '@mui/material/Typography'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import Select from '@mui/material/Select'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; import WifiChannel from './WifiChannel'; import {PiPedalModel, PiPedalModelFactory} from './PiPedalModel'; @@ -51,7 +54,7 @@ export interface WifiConfigProps extends WithStyles { wifiConfigSettings: WifiConfigSettings, onOk: (wifiConfigSettings: WifiConfigSettings) => void, onClose: () => void -}; +} export interface WifiConfigState { fullScreen: boolean; @@ -67,7 +70,7 @@ export interface WifiConfigState { countryCode: string; channel: string; wifiChannels: WifiChannel[]; -}; +} diff --git a/react/src/XxxSnippet.tsx b/react/src/XxxSnippet.tsx index 4ddf01b..ae11187 100644 --- a/react/src/XxxSnippet.tsx +++ b/react/src/XxxSnippet.tsx @@ -18,7 +18,12 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { Theme, withStyles, WithStyles,createStyles } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + + +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; const styles = (theme: Theme) => createStyles({ @@ -27,11 +32,11 @@ const styles = (theme: Theme) => createStyles({ interface XxxProps extends WithStyles { theme: Theme, -}; +} interface XxxState { -}; +} const Xxx = withStyles(styles, { withTheme: true })( diff --git a/react/src/ZoomedDial.tsx b/react/src/ZoomedDial.tsx index d3ba1ac..cae1f90 100644 --- a/react/src/ZoomedDial.tsx +++ b/react/src/ZoomedDial.tsx @@ -17,7 +17,10 @@ // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -import React, { TouchEvent, PointerEvent, SyntheticEvent } from 'react'; import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles'; +import React, { TouchEvent, PointerEvent, SyntheticEvent } from 'react';import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; import { PiPedalModel, PiPedalModelFactory, ZoomedControlInfo } from './PiPedalModel'; const SELECTED_OPACITY = 0.8; @@ -42,11 +45,11 @@ interface ZoomedDialProps extends WithStyles { onPreviewValue(value: number): void, onSetValue(value: number): void -}; +} interface ZoomedDialState { -}; +} const ZoomedDial = withStyles(styles, { withTheme: true })( diff --git a/react/src/ZoomedUiControl.tsx b/react/src/ZoomedUiControl.tsx index 84ffae6..5e38862 100644 --- a/react/src/ZoomedUiControl.tsx +++ b/react/src/ZoomedUiControl.tsx @@ -18,10 +18,13 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React, {SyntheticEvent} from 'react'; -import { Theme, withStyles, WithStyles,createStyles } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; import { ZoomedControlInfo } from './PiPedalModel'; import DialogEx from './DialogEx'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import { PiPedalModelFactory,PiPedalModel } from './PiPedalModel'; import ZoomedDial from './ZoomedDial'; @@ -35,11 +38,11 @@ interface ZoomedUiControlProps extends WithStyles { onDialogClose: () => void; onDialogClosed: () => void; controlInfo: ZoomedControlInfo | undefined -}; +} interface ZoomedUiControlState { value: number -}; +} /* const Transition = React.forwardRef(function Transition( @@ -120,10 +123,6 @@ const ZoomedUiControl = withStyles(styles, { withTheme: true })( { this.props.onDialogClose()}} onAbort={()=> { this.props.onDialogClose()}} - onExited={ () => { - this.props.onDialogClosed() - } - } >