@iobroker/adapter-react-v5 6.1.9 → 6.1.10

package/README.md

@@ -744,40 +744,34 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 
 - Modify `classes`:
   Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>`
-
-  After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
+  After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`,
 
   Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>`
-
   After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
 
-  Before: `<ListItem classes={{ root: styles.listItem }} >`
-  
+  Before: `<ListItem classes={{ root: this.props.classes.listItem }} >`,
   After: `<ListItem sx={{ '&.MuiListItem-root': styles.listItem }} >`
 
-  Before: `<Typography component="h2" variant="h6" classes={{ root: styles.typography }}>`
-  
+  Before: `<Typography component="h2" variant="h6" classes={{ root: this.props.classes.typography }}>`,
   After: `<Typography component="h2" variant="h6" sx={{ '&.MuiTypography-root': styles.typography }}>`
 
-  Before: `<Badge classes={{ 'badge': styles.expertBadge }}>`
-  
+  Before: `<Badge classes={{ 'badge': this.props.classes.expertBadge }}>`,
   After: `<Badge sx={{ '& .MuiBadge-badge': styles.expertBadge }}>`
 
-  Before: `<Tab classes={{ selected: styles.selected }} />`
-  
+  Before: `<Tab classes={{ selected: this.props.classes..selected }} />`,
   After: `<Tab sx={{ '&.Mui-selected': styles.selected }} />`
 
-  Before: `<Tooltip title={this.props.t('ra_Refresh tree')} classes={{ popper: styles.tooltip }}>`
-  
-  After: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>`
-  Or: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: styles.tooltip } }}>`
+  Before: `<Tabs classes={{ indicator: this.props.classes.indicator }} />`,
+  After: `<Tabs sx={{ '& .MuiTabs-indicator': styles.indicator }} />`
 
-  Before. `<AccordionSummary classes={{ root: styles.rootStyle, content: styles.content }}>`
+  Before: `<Tooltip title={this.props.t('ra_Refresh tree')} classes={{ popper: this.props.classes.tooltip }}>`,
+  After: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>`,
+  Or: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: styles.tooltip } }}>`
 
+  Before. `<AccordionSummary classes={{ root: this.props.classes.rootStyle, content: this.props.classes.content }}>`,
   After. `<AccordionSummary sx={{ '&.MuiAccordionSummary-root': styles.rootStyle, '& .MuiAccordionSummary-content': styles.content }}>`
 
-  Before. `<Drawer classes={{ paper: styles.paperStyle }}>`
-
+  Before. `<Drawer classes={{ paper: this.props.classes.paperStyle }}>`,
   After. `<Drawer sx={{ '& .MuiDrawer-paper': styles.paperStyle }}>`
 
 <!--
@@ -786,6 +780,9 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 -->
 
 ## Changelog
+### 6.1.10 (2024-08-30)
+* (bluefox) Updated the object browser
+
 ### 6.1.9 (2024-08-14)
 * (bluefox) Updated JSON schema
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "6.1.9",
+  "version": "6.1.10",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -27,16 +27,16 @@
   "homepage": "https://github.com/ioBroker/adapter-react-v5#readme",
   "devDependencies": {},
   "dependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@iobroker/socket-client": "^2.4.18",
-    "@iobroker/types": "^6.0.10",
-    "@iobroker/js-controller-common": "^6.0.10",
-    "@iobroker/js-controller-common-db": "^6.0.10",
+    "@iobroker/types": "^6.0.11",
+    "@iobroker/js-controller-common": "^6.0.11",
+    "@iobroker/js-controller-common-db": "^6.0.11",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
-    "@mui/x-date-pickers": "^7.12.1",
-    "@sentry/browser": "^8.25.0",
+    "@mui/x-date-pickers": "^7.14.0",
+    "@sentry/browser": "^8.26.0",
     "cronstrue": "^2.50.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",

package/src/Components/FileBrowser.tsx

@@ -9,7 +9,6 @@ import Dropzone from 'react-dropzone';
 
 import {
     LinearProgress,
-    Hidden,
     ListItemIcon,
     ListItemText,
     Menu,
@@ -226,10 +225,10 @@ const styles: Record<string, any> = {
         fontSize: '1rem',
         verticalAlign: 'top',
         flexGrow: 1,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
         '@media screen and (max-width: 500px)': {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
             textAlign: 'end',
             direction: 'rtl',
         },
@@ -433,7 +432,9 @@ const USER_DATA = '0_userdata.0';
 
 function getParentDir(dir: string | null): string {
     const parts = (dir || '').split('/');
-    parts.length && parts.pop();
+    if (parts.length) {
+        parts.pop();
+    }
     return parts.join('/');
 }
 
@@ -637,7 +638,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 expanded = expanded.filter(id => id.startsWith(`${this.limitToPath}/`) ||
                     id === this.limitToPath || this.limitToPath?.startsWith(`${id}/`));
             }
-        } catch (e) {
+        } catch {
             expanded = [];
         }
 
@@ -770,7 +771,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
     scrollToSelected() {
         if (this.mounted) {
             const el = document.getElementById(this.state.selected);
-            el && el.scrollIntoView();
+            el?.scrollIntoView();
         }
     }
 
@@ -780,7 +781,9 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
             .catch(error => console.error(`Cannot load folders: ${error}`));
 
         this.supportSubscribes = await this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT');
-        this.supportSubscribes && (await this.props.socket.subscribeFiles('*', '*', this.onFileChange));
+        if (this.supportSubscribes) {
+            await this.props.socket.subscribeFiles('*', '*', this.onFileChange);
+        }
     }
 
     componentWillUnmount() {
@@ -844,7 +847,9 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                     adapter,
                     relPath,
                 });
-                !this.browseListRunning && this.processBrowseList();
+                if (!this.browseListRunning) {
+                    this.processBrowseList();
+                }
             }
         });
     }
@@ -1252,22 +1257,26 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 {isUserData ? this.props.t('ra_User files') : item.name}
             </Box>
 
-            <Hidden smDown>
-                <div style={styles[`itemSize${this.state.viewType}`]}>
-                    {this.state.viewType === TABLE && this.state.folders[item.id]
-                        ? this.state.folders[item.id].length
-                        : ''}
-                </div>
-            </Hidden>
+            <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]
+                    ? this.state.folders[item.id].length
+                    : ''}
+            </Box>
 
-            <Hidden smDown>
+            <Box
+                component="div"
+                sx={{ display: { md: 'inline-block', sm: 'none' } }}
+            >
                 {this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null}
-            </Hidden>
+            </Box>
+
+            {this.state.viewType === TABLE && this.props.expertMode ?
+                <Box component="div" sx={{ ...styles.itemDeleteButtonTable, display: { md: 'inline-block', sm: 'none' } }} /> : null}
 
-            <Hidden smDown>
-                {this.state.viewType === TABLE && this.props.expertMode ?
-                    <Box component="div" sx={styles[`itemDeleteButton${this.state.viewType}`]} /> : null}
-            </Hidden>
             {this.state.viewType === TABLE && this.props.allowDownload ?
                 <div style={styles[`itemDownloadEmpty${this.state.viewType}`]} /> : null}
 
@@ -1482,11 +1491,22 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 :
                 this.getFileIcon(ext)}
             <Box component="div" sx={styles[`itemName${this.state.viewType}`]}>{item.name}</Box>
-            <Hidden smDown>{this.formatSize(item.size)}</Hidden>
-            <Hidden smDown>
+            <Box
+                component="div"
+                sx={{ display: { md: 'inline-block', sm: 'none' } }}
+            >
+                {this.formatSize(item.size)}
+            </Box>
+            <Box
+                component="div"
+                sx={{ display: { md: 'inline-block', sm: 'none' } }}
+            >
                 {this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null}
-            </Hidden>
-            <Hidden smDown>
+            </Box>
+            <Box
+                component="div"
+                sx={{ display: { md: 'inline-block', sm: 'none' } }}
+            >
                 {this.state.viewType === TABLE && this.props.expertMode && FileBrowserClass.getEditFile(ext) ?
                     <IconButton
                         aria-label="edit"
@@ -1506,14 +1526,14 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                                 this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
                             }
                         }}
-                        sx={styles[`itemDeleteButton${this.state.viewType}`]}
+                        sx={styles.itemDeleteButtonTable}
                         size="large"
                     >
                         <EditIcon fontSize="small" />
                     </IconButton>
                     :
                     <Box component="div" sx={styles[`itemDeleteButton${this.state.viewType}`]} />}
-            </Hidden>
+            </Box>
             {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             {this.state.viewType === TABLE && this.props.allowDownload ? <Box
                 component="a"

package/src/Components/FileViewer.tsx

@@ -148,7 +148,7 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
                             newState.copyPossible = true;
                             try {
                                 fileData = atob(bufferToBase64((data as { data: Buffer; type: string }).data, true));
-                            } catch (e) {
+                            } catch {
                                 console.error('Cannot convert base64 to string');
                                 fileData = '';
                             }
@@ -185,21 +185,30 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
         const adapter = parts[0];
         const name = parts.splice(1).join('/');
 
-        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+        if (this.props.supportSubscribes) {
+            this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+        }
     }
 
     componentWillUnmount() {
-        this.timeout && clearTimeout(this.timeout);
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
         const parts = this.props.href.split('/');
         parts.splice(0, 2);
         const adapter = parts[0];
         const name = parts.splice(1).join('/');
-        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+        if (this.props.supportSubscribes) {
+            this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+        }
     }
 
     onFileChanged = (id: string, fileName: string, size: number | null) => {
         if (!this.state.changed) {
-            this.timeout && clearTimeout(this.timeout);
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+            }
             this.timeout = setTimeout(() => {
                 this.timeout = null;
                 if (size === null) {