Enter key handling for dialogs.

This commit is contained in:
Robin Davies
2024-10-08 04:20:37 -04:00
parent ebe56f4df9
commit a8061a6d15
31 changed files with 131 additions and 49 deletions
+1
View File
@@ -199,6 +199,7 @@ const AboutDialog = withStyles(styles, { withTheme: true })(
return (
<DialogEx tag="about" fullScreen open={this.props.open}
onClose={() => { this.props.onClose() }} TransitionComponent={Transition}
onEnterKey={() => { this.props.onClose() }}
style={{ userSelect: "none" }}
>
+1
View File
@@ -1020,6 +1020,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
<DialogEx tag="Alert"
open={this.state.alertDialogOpen}
onClose={this.handleCloseAlert}
onEnterKey={this.handleCloseAlert}
aria-describedby="alert-dialog-description"
>
<DialogContent>
+4 -1
View File
@@ -409,6 +409,7 @@ const BankDialog = withStyles(styles, { withTheme: true })(
return (
<DialogEx tag="bank" fullScreen open={this.props.show}
onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition}
onEnterKey={()=>{}}
style={{ userSelect: "none" }}
>
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
@@ -544,7 +545,9 @@ const BankDialog = withStyles(styles, { withTheme: true })(
/>
<DialogEx tag="deletePrompt" open={this.state.showDeletePrompt} onClose={() => this.handleDeletePromptClose()}
style={{ userSelect: "none" }}>
style={{ userSelect: "none" }}
onEnterKey={()=>{ this.handleDeletePromptOk() }}
>
<DialogContent>
<Typography>Are you sure you want to delete bank '{this.getSelectedBankName()}'?</Typography>
</DialogContent>
+5 -1
View File
@@ -25,6 +25,7 @@ import Dialog, {DialogProps} from '@mui/material/Dialog';
interface DialogExProps extends DialogProps {
tag: string;
fullwidth?: boolean;
onEnterKey: () => void;
}
interface DialogExState {
@@ -186,7 +187,10 @@ class DialogEx extends React.Component<DialogExProps,DialogExState> implements I
}
onEnterKey() {
if (this.props.onEnterKey)
{
this.props.onEnterKey();
}
}
onKeyDown(evt: React.KeyboardEvent<HTMLDivElement>)
{
+5 -2
View File
@@ -484,9 +484,12 @@ export default withStyles(styles, { withTheme: true })(
fullScreen={this.state.fullScreen}
onClose={() => {
this.props.onCancel();
}}
}}
onEnterKey={()=> {
this.openSelectedFile();
}}
open={this.props.open} tag="fileProperty"
fullWidth maxWidth="xl"
fullWidth maxWidth="md"
PaperProps={
this.state.fullScreen ?
{}
@@ -319,6 +319,7 @@ export default class FilePropertyDirectorySelectDialog extends ResizeResponsiveC
<DialogEx tag="fpDirectorySelect" open={this.props.open} fullWidth onClose={() => { this.onClose(); }} aria-labelledby="Rename-dialog-title"
fullScreen={this.state.fullScreen}
style={{ userSelect: "none" }}
onEnterKey={()=>{ this.onOK(); }}
PaperProps={{ style: { minHeight: "80%", maxHeight: "80%", minWidth: "75%", maxWidth: "75%", overflowY: "visible" } }}
>
<DialogTitle>
+14 -8
View File
@@ -166,15 +166,19 @@ const FullScreenIME =
}
}
onOk() {
if (this.inputChanged) {
this.inputChanged = false;
this.validateInput(true);
}
else {
this.props.onClose();
}
}
onInputKeyPress(e: any): void {
if (e.charCode === 13) {
if (this.inputChanged) {
this.inputChanged = false;
this.validateInput(true);
}
else {
this.props.onClose();
}
this.onOk();
}
}
@@ -196,7 +200,9 @@ const FullScreenIME =
let value = this.props.value;
return (
<DialogEx tag="ime" fullScreen open={!!(this.props.uiControl)} onClose={(e, r) => this.handleClose(e, r)} >
<DialogEx tag="ime" fullScreen open={!!(this.props.uiControl)} onClose={(e, r) => this.handleClose(e, r)}
onEnterKey={()=>{ /*nothing*/}}
>
<div style={{
width: "100%", height: "100%", position: "relative",
display: "flex", flexDirection: "column", flexWrap: "nowrap",
+10 -3
View File
@@ -393,8 +393,10 @@ const JackServerSettingsDialog = withStyles(styles)(
}
handleApply() {
this.props.onApply(this.state.jackServerSettings.clone());
if (this.state.okEnabled)
{
this.props.onApply(this.state.jackServerSettings.clone());
}
};
render() {
@@ -422,7 +424,12 @@ const JackServerSettingsDialog = withStyles(styles)(
let bufferCountDisabled = !selectedDevice;
return (
<DialogEx tag="jack" onClose={handleClose} aria-labelledby="select-channels-title" open={open}>
<DialogEx tag="jack" onClose={handleClose} aria-labelledby="select-channels-title" open={open}
onEnterKey={() => {
this.handleApply();
}}
>
<DialogContent>
<div>
<FormControl className={classes.formControl}>
+18 -2
View File
@@ -375,8 +375,22 @@ export const LoadPluginDialog =
e.preventDefault();
this.cancel();
}
handleOk(e: SyntheticEvent): void {
e.preventDefault();
handleOk(e?: SyntheticEvent): void {
if (e) {
e.preventDefault();
}
let selectedPlugin: UiPlugin | undefined = undefined;
if (this.state.selected_uri) {
let t = this.model.getUiPlugin(this.state.selected_uri);
if (t) selectedPlugin = t;
}
if (!selectedPlugin)
{
return;
}
if (this.state.selected_uri) {
this.props.onOk(this.state.selected_uri);
}
@@ -688,7 +702,9 @@ export const LoadPluginDialog =
return (
<React.Fragment>
<DialogEx tag="plugins"
onEnterKey={()=>{ this.handleOk(); }}
onKeyPress={(e) => { this.handleKeyPress(e); }}
fullScreen={true}
TransitionComponent={undefined}
maxWidth={false}
+2
View File
@@ -326,6 +326,8 @@ export const MidiBindingDialog =
<DialogEx tag="midiBindings" open={open} fullWidth onClose={this.handleClose} aria-labelledby="Rename-dialog-title"
fullScreen={true}
style={{userSelect: "none"}}
onEnterKey={()=>{}}
>
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
<div style={{ flex: "0 0 auto" }}>
+1
View File
@@ -63,6 +63,7 @@ export default class OkCancelDialog extends React.Component<OkCancelDialogProps,
}
return (
<DialogEx tag="okCancel" open={open} onClose={handleClose}
onEnterKey={handleOk}
style={{userSelect: "none"}}
>
<DialogContent>
+1 -1
View File
@@ -70,7 +70,7 @@ function OptionsDialog(props: OptionsDialogProps) {
onClose();
};
return (
<DialogEx tag="options" onClose={handleCancel} aria-labelledby="select-option" open={open} >
<DialogEx tag="options" onClose={handleCancel} aria-labelledby="select-option" open={open} onEnterKey={()=>{}} >
{title && (
<DialogTitle style={{paddingLeft: 8}}>
<Typography variant="body2" color="textSecondary">
+3 -1
View File
@@ -235,7 +235,9 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
<InfoOutlinedIcon className={classes.icon} color='inherit' />
</IconButton>
{open && (
<DialogEx tag="info" onClose={handleClose} open={open} fullWidth >
<DialogEx tag="info" onClose={handleClose} open={open} fullWidth maxWidth="md"
onEnterKey={handleClose}
>
<MuiDialogTitle >
<div style={{ display: "flex", flexDirection: "row", alignItems: "start", flexWrap: "nowrap" }}>
<div style={{ flex: "0 0 auto", marginRight: 16 }}>
+3 -1
View File
@@ -361,7 +361,9 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
return (
<DialogEx tag="pluginPresets" fullScreen open={this.props.show}
onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition}
style={{userSelect: "none"}}>
style={{userSelect: "none"}}
onEnterKey={()=>{}}
>
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
<div style={{ flex: "0 0 auto" }}>
<AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} >
+3 -1
View File
@@ -340,7 +340,9 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
return (
<DialogEx tag="preset" fullScreen open={this.props.show}
onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition}
style={{userSelect: "none"}}>
style={{userSelect: "none"}}
onEnterKey={()=>{}}
>
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
<div style={{ flex: "0 0 auto" }}>
<AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} >
@@ -18,7 +18,6 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Button from '@mui/material/Button';
import Radio from '@mui/material/Radio';
@@ -29,11 +28,10 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import DialogEx from './DialogEx';
import DialogActions from '@mui/material/DialogActions';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
export interface ListSelectDialogProps {
export interface RadioSelectDialogProps {
open: boolean,
title: string,
width: number,
@@ -43,15 +41,15 @@ export interface ListSelectDialogProps {
onClose: () => void
};
export interface ListSelectDialogState {
export interface RadioSelectDialogState {
fullScreen: boolean;
};
export default class ListSelectDialog extends ResizeResponsiveComponent<ListSelectDialogProps, ListSelectDialogState> {
export default class RadioSelectDialog extends ResizeResponsiveComponent<RadioSelectDialogProps, RadioSelectDialogState> {
refText: React.RefObject<HTMLInputElement>;
constructor(props: ListSelectDialogProps) {
constructor(props: RadioSelectDialogProps) {
super(props);
this.state = {
fullScreen: false
@@ -82,7 +80,9 @@ export default class ListSelectDialog extends ResizeResponsiveComponent<ListSele
render() {
return (
<DialogEx tag="list" onClose={()=>this.props.onClose()} open={this.props.open}>
<DialogEx tag="list" onClose={()=>this.props.onClose()} open={this.props.open}
onEnterKey={()=>{ }}
>
<List sx={{pt: 0}}>
{
this.props.items.map(
@@ -105,11 +105,6 @@ export default class ListSelectDialog extends ResizeResponsiveComponent<ListSele
)
}
</List>
<DialogActions>
<Button variant="dialogSecondary" onClick={()=> this.props.onClose()} color="primary">
Cancel
</Button>
</DialogActions>
</DialogEx>
);
}
+1
View File
@@ -117,6 +117,7 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
<DialogEx tag="nameDialog" open={open} fullWidth maxWidth="sm" onClose={handleClose} aria-labelledby="Rename-dialog-title"
fullScreen={this.state.fullScreen}
style={{userSelect: "none"}}
onEnterKey={()=>{}}
>
<DialogContent style={{minHeight: 96}}>
<TextField
+6 -2
View File
@@ -90,7 +90,9 @@ function SelectChannelsDialog(props: SelectChannelsDialogProps) {
return (
<DialogEx tag="audioChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open}>
<DialogEx tag="audioChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open}
onEnterKey={handleOk}
>
<DialogTitle id="simple-dialog-title">Select Channels</DialogTitle>
<List>
{availableChannels.map((channel) => (
@@ -154,7 +156,9 @@ function SelectChannelsDialog(props: SelectChannelsDialogProps) {
}
return (
<DialogEx tag="channels" onClose={handleCancel} aria-labelledby="select-channels-title" open={open}>
<DialogEx tag="channels" onClose={handleCancel} aria-labelledby="select-channels-title" open={open}
onEnterKey={()=>{}}
>
<List style={{ marginLeft: 0, marginRight: 0}}>
<ListItem button onClick={() => handleListItemClick("Stereo")} key={"Stereo"} selected={selectionKey === "Stereo"} >
+3 -1
View File
@@ -93,7 +93,9 @@ function SelectMidiChannelsDialog(props: SelectMidiChannelsDialogProps) {
return (
<DialogEx tag="midiChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open}>
<DialogEx tag="midiChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open}
onEnterKey={handleOk}
>
<DialogTitle id="simple-dialog-title">Select MIDI Device</DialogTitle>
<List>
{availableChannels.map((channel) => (
+3 -1
View File
@@ -64,7 +64,9 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
return (
<DialogEx tag="theme" onClose={handleClose} open={open}>
<DialogEx tag="theme" onClose={handleClose} open={open}
onEnterKey={handleOk}
>
<DialogTitle id="simple-dialog-title">Theme</DialogTitle>
<DialogContent>
<FormControl>
+4 -3
View File
@@ -20,7 +20,7 @@
import React, { SyntheticEvent, Component } from 'react';
import Switch from "@mui/material/Switch";
import OkCancelDialog from './OkCancelDialog';
import ListSelectDialog from './ListSelectDialog';
import RadioSelectDialog from './RadioSelectDialog';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
@@ -542,6 +542,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<DialogEx tag="settings" fullScreen open={this.props.open}
onClose={() => { this.props.onClose() }} TransitionComponent={Transition}
style={{ userSelect: "none" }}
onEnterKey={()=>{}}
>
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
@@ -882,7 +883,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
{
(this.state.showGovernorSettingsDialog) &&
(
<ListSelectDialog
<RadioSelectDialog
width={220}
open={this.state.showGovernorSettingsDialog}
items={this.state.governorSettings.governors}
@@ -901,7 +902,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
this.setState({ showGovernorSettingsDialog: false })
}}
>
</ListSelectDialog>
</RadioSelectDialog>
)
}
{
+1
View File
@@ -108,6 +108,7 @@ export default class SnapshotDialog extends ResizeResponsiveComponent<SnapshotDi
},
}}
onEnterKey={()=>{} }
>
<DialogTitle>
<div>
+1
View File
@@ -113,6 +113,7 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
return (
<DialogEx maxWidth="sm" fullWidth={true} tag="snapshotProps" open={this.props.open} onClose={handleClose}
style={{ userSelect: "none" }} fullScreen={this.state.compactVertical}
onEnterKey={()=> { this.handleOk(); }}
>
<DialogTitle>
<div>
+1
View File
@@ -328,6 +328,7 @@ export const SystemMidiBindingDialog =
<DialogEx tag="systemMidiBindings" open={open} fullWidth onClose={this.handleClose} aria-labelledby="Rename-dialog-title"
fullScreen={true}
style={{ userSelect: "none" }}
onEnterKey={()=>{}}
>
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
<div style={{ flex: "0 0 auto" }}>
+2
View File
@@ -166,6 +166,7 @@ export default class UpdateDialog extends ResizeResponsiveComponent<UpdateDialog
return (
<DialogEx tag="update" open={this.props.open} onClose={() => { this.handleClose(); }}
style={{ userSelect: "none" }}
onEnterKey={()=>{ this.handleOK();}}
>
<DialogTitle>
<div style={{ display: "flex", flexFlow: "row noWrap", alignItems: "center" }} >
@@ -288,6 +289,7 @@ export default class UpdateDialog extends ResizeResponsiveComponent<UpdateDialog
open={this.state.alertDialogOpen}
onClose={() => { this.handleCloseAlert(); }}
aria-describedby="Alert Dialog"
onEnterKey={()=>{ this.handleCloseAlert(); }}
>
<DialogContent>
<Typography variant="body2" color="secondaryText">
+8 -4
View File
@@ -311,9 +311,13 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
let isAndroid = UploadFileDialog.IsAndroid();
return (
<DialogEx tag="uploadFile" open={this.props.open} fullWidth onClose={() => this.handleClose()}
fullScreen={this.state.fullScreen}
style={{ userSelect: "none" }}
<DialogEx tag="uploadFile" open={this.props.open} onClose={() => this.handleClose()}
fullScreen={false}
fullWidth={true}
maxWidth={"sm"}
style={{ userSelect: "none",}}
onEnterKey={()=>{ this.handleClose(); }}
>
<DialogTitle >
<div>
@@ -326,7 +330,7 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
</DialogTitle>
<DialogContent style={{ paddingBottom: 0 }}>
<div style={{
width: "100%", height: 140, marginBottom: 0,
height: 140, marginBottom: 0,
border: (isAndroid? "2px solid #CCC" :"2px dashed #CCC"),
borderRadius: "10px",
fontFamily: "Roboto",
+2 -1
View File
@@ -157,9 +157,10 @@ export default class UploadPresetDialog extends ResizeResponsiveComponent<Upload
return (
<DialogEx tag="uploadPreset" open={this.props.open} fullWidth onClose={() => this.handleClose()}
<DialogEx tag="uploadPreset" open={this.props.open} fullWidth maxWidth="sm" onClose={() => this.handleClose()}
fullScreen={this.state.fullScreen}
style={{userSelect: "none"}}
onEnterKey={()=>{}}
>
<DialogTitle>{this.props.title}</DialogTitle>
<DialogContent>
+14 -3
View File
@@ -328,6 +328,13 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
}
return result;
}
handleWarningDialogOk()
{
this.setState({ showWifiWarningDialog: false });
this.handleOk(true);
}
render() {
let props = this.props;
let classes = this.props.classes;
@@ -569,7 +576,11 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
</DialogActions>
{this.state.showHelpDialog && (
<DialogEx open={this.state.showHelpDialog} tag="wifiHelp"
style={{ userSelect: "none" }}>
style={{ userSelect: "none" }}
onEnterKey={()=>{
this.setState({ showHelpDialog: false });
}}
>
<DialogContent>
<Typography className={classes.pgraph} variant="h6" color="textPrimary">
PiPedal Auto-Hotspot
@@ -633,6 +644,7 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
)}
{this.state.showWifiWarningDialog && (
<DialogEx open={this.state.showWifiWarningDialog} tag="wifiConfirm"
onEnterKey={()=>{ this.handleWarningDialogOk();}}
style={{ userSelect: "none" }}>
<DialogContent>
<Typography className={classes.pgraph} variant="body2" color="textPrimary">
@@ -654,8 +666,7 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
Cancel
</Button>
<Button onClick={() => {
this.setState({ showWifiWarningDialog: false });
this.handleOk(true);
this.handleWarningDialogOk();
}} variant="dialogPrimary" style={{ width: 120 }} >
PROCEED
</Button>
+1 -1
View File
@@ -307,7 +307,7 @@ const WifiDirectConfigDialog = withStyles(styles, { withTheme: true })(
return (
<DialogEx tag="p2pConfig" open={open} onClose={handleClose} style={{ userSelect: "none", }}
fullScreen={this.state.fullScreen} fullWidth={this.useLandscapeLayout()}
fullScreen={this.state.fullScreen} fullWidth={this.useLandscapeLayout()} onEnterKey={()=>{}}
>
{this.state.landscapeLayout && (
<DialogContent >
+1
View File
@@ -222,6 +222,7 @@ const ZoomedUiControl = withStyles(styles, { withTheme: true })(
<DialogEx tag="zoomedControl" open={this.props.dialogOpen}
onClose={() => { this.props.onDialogClose() }}
onAbort={() => { this.props.onDialogClose() }}
onEnterKey={()=>{/*nothing*/}}
>
<div style={{
width: 380, height: 300,
+4
View File
@@ -1,3 +1,7 @@
Splittype changes.
- disable splittype control when editing snapshot.
- identical structure requires no changes in split type.
Review current handleNotifyPatchProperty. I tink server-side support needs to be
removed, and rely on handleNotifyPathPatchPropertyChanged instead.