@iobroker/adapter-react-v5 7.4.9 → 7.4.12

package/README.md

@@ -13,7 +13,7 @@ If you want to create the configuration page with ReactJS:
     - Change `name` from `src` to `ADAPTERNAME-admin` (Of course replace `ADAPTERNAME` with yours)
     - Add to devDependencies:
         ```json
-        "@iobroker/adapter-react-v5": "^7.4.9",
+        "@iobroker/adapter-react-v5": "^7.4.10",
         ```
         Versions can be higher.
         So your `src/package.json` should look like:
@@ -24,7 +24,7 @@ If you want to create the configuration page with ReactJS:
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@iobroker/adapter-react-v5": "^7.4.9",
+        "@iobroker/adapter-react-v5": "^7.4.10",
         "@iobroker/build-tools": "^1.0.0",
         "babel-eslint": "^10.1.0",
         "react-scripts": "^5.0.1"

package/build/Components/FileBrowser.d.ts

@@ -94,7 +94,7 @@ export interface FolderOrFileItem {
 }
 export type Folders = Record<string, FolderOrFileItem[]>;
 interface FileBrowserState {
-    viewType: string;
+    viewType: 'Table' | 'Tile';
     folders: Folders;
     filterEmpty: boolean;
     expanded: string[];
@@ -136,6 +136,8 @@ export declare class FileBrowserClass extends Component<FileBrowserProps, FileBr
     private foldersLoading;
     private cacheFolders;
     private readonly localStorage;
+    private readonly scrollPositions;
+    private readonly refFileDiv;
     constructor(props: FileBrowserProps);
     static getDerivedStateFromProps(props: FileBrowserProps, state: FileBrowserState): Partial<FileBrowserState> | null;
     loadFolders(): Promise<void>;

package/build/Components/FileBrowser.js

@@ -8,7 +8,7 @@ import React, { Component } from 'react';
 import Dropzone from 'react-dropzone';
 import { LinearProgress, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip, CircularProgress, Toolbar, IconButton, Fab, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Input, Breadcrumbs, Box, } from '@mui/material';
 // MUI Icons
-import { Refresh as RefreshIcon, Close as CloseIcon, Bookmark as JsonIcon, BookmarkBorder as CssIcon, Description as HtmlIcon, Edit as EditIcon, Code as JSIcon, InsertDriveFile as FileIcon, Publish as UploadIcon, MusicNote as MusicIcon, SaveAlt as DownloadIcon, CreateNewFolder as AddFolderIcon, FolderOpen as EmptyFilterIcon, List as IconList, ViewModule as IconTile, ArrowBack as IconBack, Delete as DeleteIcon, Brightness6 as Brightness5Icon, Image as TypeIconImages, FontDownload as TypeIconTxt, AudioFile as TypeIconAudio, Videocam as TypeIconVideo, KeyboardReturn as EnterIcon, FolderSpecial as RestrictedIcon, } from '@mui/icons-material';
+import { ArrowBack as IconBack, AudioFile as TypeIconAudio, Bookmark as JsonIcon, BookmarkBorder as CssIcon, Brightness6 as Brightness5Icon, Close as CloseIcon, Code as JSIcon, CreateNewFolder as AddFolderIcon, Delete as DeleteIcon, Description as HtmlIcon, Edit as EditIcon, FolderOpen as EmptyFilterIcon, FolderSpecial as RestrictedIcon, FontDownload as TypeIconTxt, Image as TypeIconImages, InsertDriveFile as FileIcon, KeyboardReturn as EnterIcon, List as IconList, MusicNote as MusicIcon, Publish as UploadIcon, Refresh as RefreshIcon, SaveAlt as DownloadIcon, Videocam as TypeIconVideo, ViewModule as IconTile, } from '@mui/icons-material';
 import { DialogError } from '../Dialogs/Error';
 import { Utils } from './Utils';
 import { DialogTextInput } from '../Dialogs/TextInput';
@@ -41,7 +41,7 @@ const styles = {
         position: 'relative',
     },
     filesDiv: {
-        width: 'calc(100% - 16px)',
+        width: 'calc(100% - 8px)',
         overflowX: 'hidden',
         overflowY: 'auto',
         padding: 8,
@@ -106,7 +106,7 @@ const styles = {
         top: 22,
         left: 18,
         zIndex: 1,
-        color: theme.palette.mode === 'dark' ? '#FFF' : '#000',
+        color: theme.palette.mode === 'dark' ? '#FFF' : '#FFF',
     }),
     itemSizeTile: {
         width: '100%',
@@ -319,6 +319,8 @@ const styles = {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.secondary.contrastText,
+        borderRadius: '4px 4px 0 0',
     }),
     pathDivInput: {
         width: '100%',
@@ -327,12 +329,15 @@ const styles = {
         pl: '2px',
         pr: '2px',
         cursor: 'pointer',
+        color: 'white',
         '&:hover': {
-            background: theme.palette.primary.main,
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
         },
     }),
     pathDivBreadcrumbSelected: {
-    // todo: add style
+        // todo: add style
+        color: '#FFF',
     },
     backgroundImageLight: {
         background: 'white',
@@ -394,10 +399,13 @@ export class FileBrowserClass extends Component {
     foldersLoading = null;
     cacheFolders = null;
     localStorage;
+    scrollPositions = {};
+    refFileDiv;
     constructor(props) {
         super(props);
         this.localStorage = window._localStorage || window.localStorage;
         const expandedStr = this.localStorage.getItem('files.expanded') || '[]';
+        this.refFileDiv = React.createRef();
         if (this.props.limitPath) {
             const parts = this.props.limitPath.split('/');
             this.limitToObjectID = parts[0];
@@ -890,6 +898,10 @@ export class FileBrowserClass extends Component {
         if (_folder === '/') {
             _folder = '';
         }
+        // remember scroll position for this folder
+        if (this.state.viewType === 'Tile' && this.refFileDiv.current?.scrollTop) {
+            this.scrollPositions[this.state.currentDir] = this.refFileDiv.current.scrollTop;
+        }
         this.localStorage.setItem('files.currentDir', _folder);
         if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
             this.setState({ selected: _folder });
@@ -913,7 +925,19 @@ export class FileBrowserClass extends Component {
             selected: _folder,
             path: _folder,
             pathFocus: false,
-        }, () => this.props.onSelect && this.props.onSelect(''));
+        }, () => {
+            if (this.props.onSelect) {
+                this.props.onSelect('');
+            }
+            // scroll to previous position
+            if (this.state.viewType === 'Tile' && this.scrollPositions[this.state.currentDir]) {
+                const pos = this.scrollPositions[this.state.currentDir];
+                delete this.scrollPositions[this.state.currentDir];
+                if (this.refFileDiv.current) {
+                    this.refFileDiv.current.scrollTop = pos;
+                }
+            }
+        });
     }
     select(id, e, cb) {
         if (e) {
@@ -948,9 +972,10 @@ export class FileBrowserClass extends Component {
         return undefined;
     }
     renderFolder(item, expanded) {
-        if (this.state.viewType === TABLE &&
-            this.state.filterEmpty &&
-            (!this.state.folders[item.id] || !this.state.folders[item.id].length) &&
+        if (
+        // this.state.viewType === TABLE &&
+        this.state.filterEmpty &&
+            !this.state.folders[item.id]?.length && // if the folder is empty
             item.id !== USER_DATA &&
             !item.temp) {
             return null;
@@ -960,7 +985,9 @@ export class FileBrowserClass extends Component {
         const isUserData = item.name === USER_DATA;
         const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
         const iconStyle = Utils.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`], isSpecialData && styles.specialFolder);
-        return (React.createElement(Box, { component: "div", key: item.id, id: item.id, style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px` } : {}, onClick: e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id)), onDoubleClick: e => this.state.viewType === TABLE && this.toggleFolder(item, e), title: this.getText(item.title), className: "browserItem", sx: Utils.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : {}, item.temp ? styles.itemFolderTemp : {}) },
+        return (React.createElement(Box, { component: "div", key: item.id, id: item.id, style: this.state.viewType === TABLE
+                ? { marginLeft: padding, width: `calc(100% - ${padding}px` }
+                : undefined, onClick: e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id)), onDoubleClick: e => this.state.viewType === TABLE && this.toggleFolder(item, e), title: this.getText(item.title), className: "browserItem", sx: Utils.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : {}, item.temp ? styles.itemFolderTemp : {}) },
             React.createElement(IconEl, { style: iconStyle, onClick: this.state.viewType === TABLE ? (e) => this.toggleFolder(item, e) : undefined }),
             React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
             React.createElement(Box, { component: "div", style: styles[`itemSize${this.state.viewType}`], sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.state.folders[item.id]
@@ -1083,7 +1110,9 @@ export class FileBrowserClass extends Component {
                             EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                     this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
                 }
-            }, onClick: e => this.select(item.id, e), style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px)` } : {}, className: "browserItem", sx: Utils.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFile${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : undefined) },
+            }, onClick: e => this.select(item.id, e), style: this.state.viewType === TABLE
+                ? { marginLeft: padding, width: `calc(100% - ${padding}px)` }
+                : undefined, className: "browserItem", sx: Utils.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFile${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : undefined) },
             ext && EXTENSIONS.images.includes(ext) ? (this.state.fileErrors.includes(item.id) ? (React.createElement(IconNoIcon, { style: {
                     ...styles[`itemImage${this.state.viewType}`],
                     ...this.getStyleBackgroundImage(),
@@ -1131,7 +1160,7 @@ export class FileBrowserClass extends Component {
                 React.createElement(DeleteIcon, { fontSize: "small" }))) : this.state.viewType === TABLE && this.props.allowDelete ? (React.createElement(Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] })) : null));
     }
     renderItems(folderId) {
-        if (this.state.folders && this.state.folders[folderId]) {
+        if (this.state.folders?.[folderId]) {
             // tile
             if (this.state.viewType === TILE) {
                 const res = [];
@@ -1151,6 +1180,7 @@ export class FileBrowserClass extends Component {
                 });
                 return res;
             }
+            // table
             const totalResult = [];
             this.state.folders[folderId].forEach(item => {
                 if (item.folder) {
@@ -1602,7 +1632,7 @@ export class FileBrowserClass extends Component {
             ? this.state.currentDir.split('/')
             : `/${this.state.currentDir}`.split('/');
         const p = [];
-        return (React.createElement(Breadcrumbs, { style: { paddingLeft: 8 } }, parts.map((part, i) => {
+        return (React.createElement(Breadcrumbs, { style: { paddingLeft: 8, color: '#FFF' } }, parts.map((part, i) => {
             if (part) {
                 p.push(part);
             }
@@ -1652,7 +1682,7 @@ export class FileBrowserClass extends Component {
                             e.stopPropagation();
                         }
                     }
-                } },
+                }, id: "dev", ref: this.refFileDiv },
                 this.state.viewType === TABLE
                     ? this.renderItems('/')
                     : this.renderItems(this.state.currentDir || '/'),