v1.1.20 Release

2023-04-20 15:27:18 -04:00
parent e2b62da073
commit 37426d9047
117 changed files with 2147 additions and 711 deletions
@@ -33,7 +33,7 @@ import IconButton from '@mui/material/IconButton';
 import OldDeleteIcon from './OldDeleteIcon';

 import ResizeResponsiveComponent from './ResizeResponsiveComponent';
-import { PiPedalFileProperty } from './Lv2Plugin';
+import { UiFileProperty } from './Lv2Plugin';
 import ButtonBase from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
 import DialogEx from './DialogEx';
@@ -42,9 +42,9 @@ import OkCancelDialog from './OkCancelDialog';

 export interface FilePropertyDialogProps {
    open: boolean,
-    fileProperty: PiPedalFileProperty,
+    fileProperty: UiFileProperty,
    selectedFile: string,
-    onOk: (fileProperty: PiPedalFileProperty, selectedItem: string) => void,
+    onOk: (fileProperty: UiFileProperty, selectedItem: string) => void,
    onCancel: () => void
 };

@@ -53,6 +53,8 @@ export interface FilePropertyDialogState {
    selectedFile: string;
    hasSelection: boolean;
    files: string[];
+    columns: number;
+    columnWidth: number;
    openUploadFileDialog: boolean;
    openConfirmDeleteDialog: boolean;
 };
@@ -70,13 +72,33 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
            fullScreen: false,
            selectedFile: props.selectedFile,
            hasSelection: false,
+            columns: 0,
+            columnWidth: 1,
            files: [],
            openUploadFileDialog: false,
            openConfirmDeleteDialog: false
        };
-
+        this.requestScroll = true;
        this.requestFiles();
    }
+     
+    private scrollRef: HTMLDivElement | null = null;
+
+    onScrollRef(element: HTMLDivElement | null) {
+        this.scrollRef = element;
+        this.maybeScrollIntoView();
+    }
+    private maybeScrollIntoView()
+    {
+        if (this.scrollRef !== null && this.state.files.length !== 0 && this.mounted && this.requestScroll)
+        {
+            this.requestScroll = false;
+            let options: ScrollIntoViewOptions = { block: "nearest"};
+            options.block = "nearest";
+
+            this.scrollRef.scrollIntoView(options);
+        }
+    }
    private mounted: boolean = false;
    private model: PiPedalModel;

@@ -91,6 +113,7 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
        this.model.requestFileList(this.props.fileProperty)
            .then((files) => {
                if (this.mounted) {
+                    files.splice(0,0,"");
                    this.setState({ files: files, hasSelection: this.isFileInList(files, this.state.selectedFile) });
                }
            }).catch((error) => {
@@ -98,10 +121,39 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
            });
    }

+    private lastDivRef : HTMLDivElement | null = null;
+
+    onMeasureRef(div: HTMLDivElement | null)
+    {
+        this.lastDivRef = div;
+        if (div) {
+            let width = div.offsetWidth;
+            if (width === 0) return;
+            let columns = Math.floor((width-40)/280);
+            if(columns === 0)
+            {
+                columns = 1;
+            }
+            let columnWidth = (width-40)/columns;
+            if (columns !== this.state.columns || columnWidth !== this.state.columnWidth)
+            {
+                this.setState({columns: columns, columnWidth: columnWidth});
+            }
+        }
+    }
    onWindowSizeChanged(width: number, height: number): void {
-        this.setState({ fullScreen: height < 200 })
+
+        this.setState({ 
+            fullScreen: height < 200 
+        })
+        if (this.lastDivRef !== null)
+        {
+            this.onMeasureRef(this.lastDivRef);
+        }
+
    }

+    private requestScroll: boolean = false;

    componentDidMount() {
        super.componentDidMount();
@@ -110,6 +162,7 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
    componentWillUnmount() {
        super.componentWillUnmount();
        this.mounted = false;
+        this.lastDivRef = null;
    }
    componentDidUpdate(prevProps: Readonly<FilePropertyDialogProps>, prevState: Readonly<FilePropertyDialogState>, snapshot?: any): void {
        super.componentDidUpdate?.(prevProps, prevState, snapshot);
@@ -118,6 +171,11 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
            if (this.props.open)
            {
                this.requestFiles()
+                this.requestScroll = true;
+                if (this.state.selectedFile !== this.props.selectedFile)
+                {
+                    this.setState({selectedFile: this.props.selectedFile});
+                }
            }
        } else if (prevProps.fileProperty !== this.props.fileProperty) {
            this.requestFiles()
@@ -144,6 +202,7 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
    private isFileInList(files: string[], file: string) {

        let hasSelection = false;
+        if (file === "") return true;
        for (var listFile of files) {
            if (listFile === file) {
                hasSelection = true;
@@ -154,6 +213,7 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
    }

    onSelectValue(selectedFile: string) {
+        this.requestScroll = true;
        this.setState({ selectedFile: selectedFile, hasSelection: this.isFileInList(this.state.files, selectedFile) })
    }
    onDoubleClickValue(selectedFile: string) {
@@ -205,9 +265,13 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
        }
    }

+    private wantsScrollRef: boolean = true;
+
    mapKey: number = 0;
    render() {
        this.mapKey = 0;
+        let columnWidth = this.state.columnWidth;
+
        return this.props.open &&
            (
                <DialogEx onClose={() => this.props.onCancel()} open={this.props.open} tag="FilePropertyDialog" fullWidth maxWidth="xl" style={{ height: "90%" }}
@@ -223,22 +287,40 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
                        </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", paddingLeft: 16, paddingTop: 16 }}>
+                    <div style={{ flex: "1 1 auto", height: "300", display: "flex", flexFlow: "row wrap", overflowX: "hidden", overflowY: "auto" }}>
+                        <div 
+                            ref={(element)=> this.onMeasureRef(element)}
+                            style={{ flex: "1 1 100%", display: "flex", flexFlow: "row wrap",
+                                 justifyContent: "flex-start", alignContent: "flex-start", paddingLeft: 16, paddingTop: 16,paddingBottom: 16 }}>
                            {
+                                (this.state.columns !== 0) && // don't render until we have number of columns derived from layout.
                                this.state.files.map(
                                    (value: string, index: number) => {
+                                        let displayValue = value;
+                                        if (displayValue === "")
+                                        {
+                                            displayValue = "<none>";
+                                        } else {
+                                            displayValue = this.fileNameOnly(value);
+                                        }
                                        let selected = value === this.state.selectedFile;
                                        let selectBg = selected ? "rgba(0,0,0,0.15)" : "rgba(0,0,0,0.0)";
+                                        let scrollRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
+                                        if (selected)
+                                        {
+                                            scrollRef = (element)=> { this.onScrollRef(element)};
+                                        }
+
                                        return (
                                            <ButtonBase key={this.mapKey++}
-                                                style={{ width: "320px", flex: "0 0 48px", position: "relative" }}
+                                                
+                                                style={{ width: columnWidth, flex: "0 0 auto", height: 48, position: "relative" }}
                                                onClick={() => this.onSelectValue(value)} onDoubleClick={()=> {this.onDoubleClickValue(value);}}
                                            >
-                                                <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%" }}>
+                                                <div ref={scrollRef} style={{ position: "absolute", background: selectBg, width: "100%", height: "100%", borderRadius: 4 }} />
+                                                <div style={{ display: "flex", flexFlow: "row nowrap", textOverflow: "ellipsis", justifyContent: "start", alignItems: "center", width: "100%", height: "100%" }}>
                                                    <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>
+                                                    <Typography noWrap style={{ flex: "1 1 auto", textAlign: "left" }}>{displayValue}</Typography>
                                                </div>
                                            </ButtonBase>
                                        );
@@ -265,7 +347,11 @@ export default class FilePropertyDialog extends ResizeResponsiveComponent<FilePr
                            <Button onClick={() => { this.props.onCancel(); }} aria-label="cancel">
                                Cancel
                            </Button>
-                            <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">
+                            <Button style={{ flex: "0 0 auto" }} 
+                                onClick={() => { this.props.onOk(this.props.fileProperty, this.state.selectedFile); }} 
+                                color="secondary" 
+                                disabled={(!this.state.hasSelection) && this.state.selectedFile !== ""} aria-label="select"
+                                >
                                Select
                            </Button>
                        </div>