Port from CRT to Vite
This commit is contained in:
@@ -0,0 +1,191 @@
|
||||
// Copyright (c) 2022 Robin Davies
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
// this software and associated documentation files (the "Software"), to deal in
|
||||
// the Software without restriction, including without limitation the rights to
|
||||
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
// the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
// subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in all
|
||||
// copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
// 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 { useState } from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import List from '@mui/material/List';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogEx from './DialogEx';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import { ListItemButton } from '@mui/material';
|
||||
|
||||
|
||||
|
||||
export interface SelectChannelsDialogProps {
|
||||
open: boolean;
|
||||
selectedChannels: string[];
|
||||
availableChannels: string[];
|
||||
onClose: (selectedChannels: string[] | null) => void;
|
||||
}
|
||||
|
||||
function isChecked(selectedChannels: string[], channel: string): boolean {
|
||||
for (let i = 0; i < selectedChannels.length; ++i) {
|
||||
if (selectedChannels[i] === channel) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function addPort(availableChannels: string[], selectedChannels: string[], newChannel: string) {
|
||||
let result: string[] = [];
|
||||
for (let i = 0; i < availableChannels.length; ++i) {
|
||||
let channel = availableChannels[i];
|
||||
if (isChecked(selectedChannels, channel) || channel === newChannel) {
|
||||
result.push(channel);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function removePort(selectedChannels: string[], channel: string) {
|
||||
let result: string[] = [];
|
||||
for (let i = 0; i < selectedChannels.length; ++i) {
|
||||
if (selectedChannels[i] !== channel) {
|
||||
result.push(selectedChannels[i]);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function makeChannelName(id: string)
|
||||
{
|
||||
let pos = id.lastIndexOf("_");
|
||||
if (pos === -1)
|
||||
{
|
||||
return id;
|
||||
}
|
||||
let i = Number(id.substring(pos+1));
|
||||
return "Channel " + (i+1);
|
||||
}
|
||||
function SelectChannelsDialog(props: SelectChannelsDialogProps) {
|
||||
//const classes = useStyles();
|
||||
const { onClose, selectedChannels, availableChannels, open } = props;
|
||||
const [currentSelection, setCurrentSelection] = useState(selectedChannels);
|
||||
|
||||
let showCheckboxes = availableChannels.length !== 2;
|
||||
if (showCheckboxes) {
|
||||
|
||||
let toggleSelect = (value: string) => {
|
||||
if (!isChecked(currentSelection, value)) {
|
||||
setCurrentSelection(addPort(availableChannels, currentSelection, value));
|
||||
} else {
|
||||
setCurrentSelection(removePort(currentSelection, value));
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = (): void => {
|
||||
onClose(null);
|
||||
};
|
||||
const handleOk = (): void => {
|
||||
if (currentSelection.length >= 1 && currentSelection.length <= 2)
|
||||
{
|
||||
onClose(currentSelection);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogEx tag="audioChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open} fullWidth maxWidth="xs"
|
||||
onEnterKey={handleOk}
|
||||
>
|
||||
<DialogTitle id="simple-dialog-title">Select Channels</DialogTitle>
|
||||
<List>
|
||||
{availableChannels.map((channel) => (
|
||||
<ListItemButton key={channel}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox checked={isChecked(currentSelection, channel)} onClick={() => toggleSelect(channel)} style={{marginLeft: 24}} />
|
||||
}
|
||||
label={makeChannelName(channel)}
|
||||
/>
|
||||
</ListItemButton>
|
||||
)
|
||||
|
||||
)}
|
||||
</List>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} variant="dialogSecondary" >
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleOk} variant="dialogPrimary" disabled={currentSelection.length === 0 || currentSelection.length > 2} >
|
||||
OK
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</DialogEx>
|
||||
);
|
||||
|
||||
} else {
|
||||
|
||||
const handleCancel = () => {
|
||||
onClose(null);
|
||||
}
|
||||
const handleOk = (channels: string[]) => {
|
||||
onClose(channels);
|
||||
};
|
||||
|
||||
const handleListItemClick = (value: string) => {
|
||||
switch (value) {
|
||||
case "Stereo":
|
||||
handleOk(availableChannels);
|
||||
break;
|
||||
case "Left":
|
||||
handleOk([availableChannels[0]]);
|
||||
break;
|
||||
case "Right":
|
||||
handleOk([availableChannels[1]]);
|
||||
break;
|
||||
case "None":
|
||||
default:
|
||||
handleOk([]);
|
||||
}
|
||||
};
|
||||
let selectionKey = "None";
|
||||
if (currentSelection.length === 2) {
|
||||
selectionKey = "Stereo";
|
||||
} else if (currentSelection.length === 1) {
|
||||
if (currentSelection[0] === availableChannels[0]) {
|
||||
selectionKey = "Left";
|
||||
} else {
|
||||
selectionKey = "Right";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogEx tag="channels" onClose={handleCancel} aria-labelledby="select-channels-title" open={open}
|
||||
onEnterKey={()=>{}}
|
||||
>
|
||||
|
||||
<List style={{ marginLeft: 0, marginRight: 0}}>
|
||||
<ListItemButton onClick={() => handleListItemClick("Stereo")} key={"Stereo"} selected={selectionKey === "Stereo"} >
|
||||
<ListItemText primary={"Stereo"} />
|
||||
</ListItemButton>
|
||||
<ListItemButton onClick={() => handleListItemClick("Left")} key={"LeftChannel"} selected={selectionKey === "Left"} >
|
||||
<ListItemText primary={"Mono (left channel only)"} />
|
||||
</ListItemButton>
|
||||
<ListItemButton onClick={() => handleListItemClick("Right")} key={"RightChannel"} selected={selectionKey === "Right"}>
|
||||
<ListItemText primary={"Mono (right channel only"} />
|
||||
</ListItemButton>
|
||||
</List>
|
||||
</DialogEx>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SelectChannelsDialog;
|
||||
Reference in New Issue
Block a user