Interim checking, Convolution Reverb

react/src/FilePropertyDialog.tsx

@@ -23,35 +23,27 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
 
 
 import Button from '@mui/material/Button';
-import Radio from '@mui/material/Radio';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import AudioFileIcon from '@mui/icons-material/AudioFile';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
-import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 
 import ResizeResponsiveComponent from './ResizeResponsiveComponent';
-import { PiPedalFileProperty, PiPedalFileType } from './Lv2Plugin';
+import { PiPedalFileProperty } from './Lv2Plugin';
 import ButtonBase from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
 import DialogEx from './DialogEx';
-import { ModelTraining } from '@mui/icons-material';
 
 export interface FilePropertyDialogProps {
     open: boolean,
     fileProperty: PiPedalFileProperty,
     selectedFile: string,
     onOk: (fileProperty: PiPedalFileProperty, selectedItem: string) => void,
-    onClose: () => void
+    onCancel: () => void
 };
 
 export interface FilePropertyDialogState {
@@ -82,7 +74,23 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
     private mounted: boolean = false;
     private model: PiPedalModel;
 
+    private lastFileProperty: PiPedalFileProperty  = new PiPedalFileProperty();
+
     private requestFiles() {
+        if (!this.props.open) 
+        {
+            return;
+        }
+        if (this.props.fileProperty.directory === "")
+        {
+            return;
+        }
+        if (this.lastFileProperty === this.props.fileProperty)
+        {
+            return;
+        }
+        this.lastFileProperty = this.props.fileProperty;
+
         this.model.requestFileList(this.props.fileProperty)
         .then((files) => {
             if (this.mounted)
@@ -108,6 +116,11 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
         this.mounted = false;
     }
     componentDidUpdate(prevProps: Readonly<FilePropertyDialogProps>, prevState: Readonly<FilePropertyDialogState>, snapshot?: any): void {
+        super.componentDidUpdate?.(prevProps,prevState,snapshot);
+        if (prevProps.fileProperty !== this.props.fileProperty)
+        {
+            this.requestFiles()
+        }
     }
 
     private fileNameOnly(path: string): string {
@@ -142,29 +155,39 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
         this.setState({ selectedFile: selectedFile, hasSelection: this.isFileInList(this.state.files,selectedFile) })
     }
 
+    mapKey: number = 0;
     render() {
-
-        return (
-            <DialogEx onClose={() => this.props.onClose()} open={this.props.open} tag="FilePropertyDialog" fullWidth maxWidth="xl" style={{ height: "90%" }}
+        this.mapKey = 0;
+        return this.props.open &&
+            (
+            <DialogEx onClose={() => this.props.onCancel()} open={this.props.open} tag="FilePropertyDialog" fullWidth maxWidth="xl" style={{ height: "90%" }}
                 PaperProps={{ style: { minHeight: "90%", maxHeight: "90%", overflowY: "visible" } }}
             >
-                <DialogTitle >{this.props.fileProperty.name}</DialogTitle>
+                <DialogTitle >
+                    <div>
+                        <IconButton edge="start" color="inherit" onClick={()=> {this.props.onCancel();}} aria-label="back"
+                        >
+                            <ArrowBackIcon fontSize="small" style={{opacity: "0.6"}} />
+                        </IconButton>
+                    <Typography display="inline" >{this.props.fileProperty.name}</Typography>
+                    </div>
+                </DialogTitle>
                 <div style={{ flex: "0 0 auto", height: "1px", background: "rgba(0,0,0,0.2" }}>&nbsp;</div>
                 <div style={{ flex: "1 1 auto", height: "300", display: "flex", flexFlow: "row nowrap", overflowX: "auto", overflowY: "visible" }}>
-                    <div style={{ flex: "1 1 100%", display: "flex", flexFlow: "column wrap", justifyContent: "start", alignItems: "flex-start" }}>
+                    <div style={{ flex: "1 1 100%", display: "flex", flexFlow: "column wrap", justifyContent: "start", alignItems: "flex-start",paddingLeft: 16,paddingTop:16 }}>
                         {
                             this.state.files.map(
                                 (value: string, index: number) => {
                                     let selected = value === this.state.selectedFile;
                                     let selectBg = selected ? "rgba(0,0,0,0.15)" : "rgba(0,0,0,0.0)";
                                     return (
-                                        <ButtonBase
-                                            style={{ width: "320px", flex: "0 0 48px", position: "relative" }}
+                                        <ButtonBase key={ this.mapKey++ }
+                                            style={{ width: "320px", flex: "0 0 48px", position: "relative"}}
                                             onClick={() => this.onSelect(value)}
                                         >
-                                            <div style={{ position: "absolute", background: selectBg, width: "100%", height: "100%" }} />
+                                            <div style={{ position: "absolute", background: selectBg, width: "100%", height: "100%", borderRadius: 4 }} />
                                             <div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "start", alignItems: "center", width: "100%", height: "100%" }}>
-                                                <AudioFileIcon style={{ flex: "0 0 auto", opacity: 0.7, marginRight: 8, marginLeft: 4 }} />
+                                                <AudioFileIcon style={{ flex: "0 0 auto", opacity: 0.7, marginRight: 8, marginLeft: 8 }} />
                                                 <Typography noWrap style={{ flex: "1 1 auto", textAlign: "left" }}>{this.fileNameOnly(value)}</Typography>
                                             </div>
                                         </ButtonBase>
@@ -181,14 +204,14 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
                             <input hidden accept="audio/x-wav" name="Upload Impuse File" type="file" multiple />
                             Upload
                         </Button>
-                        <IconButton style={{visibility: (this.state.hasSelection? "visible": "hidden")}} aria-label="delete selected file" component="label">
-                            <DeleteIcon />
+                        <IconButton style={{visibility: (this.state.hasSelection? "visible": "hidden")}} aria-label="delete selected file" component="label" color="primary" >
+                            <DeleteIcon fontSize='small' />
                         </IconButton>
                         <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
-                        <Button onClick={() => this.props.onClose()} aria-label="cancel">
+                        <Button onClick={() => {this.props.onCancel();}} aria-label="cancel">
                             Cancel
                         </Button>
-                        <Button style={{ flex: "0 0 auto" }} onClick={() => this.props.onClose()} color="secondary" disabled={!this.state.hasSelection} aria-label="select">  
+                        <Button style={{ flex: "0 0 auto" }} onClick={() => {this.props.onOk(this.props.fileProperty,this.state.selectedFile);}} color="secondary" disabled={!this.state.hasSelection} aria-label="select">  
                             Select
                         </Button>
                     </div>