@iobroker/gui-components 10.3.13 → 10.3.15

package/build/Components/FileBrowser.js

@@ -13,9 +13,9 @@ import { DialogError } from '../Dialogs/Error';
 import { Utils } from './Utils';
 import { DialogTextInput } from '../Dialogs/TextInput';
 // Custom Icons
-import { IconExpert } from '../icons/IconExpert';
+import { IconExpertMode } from './AnimatedIcons/IconExpertMode';
+import { IconFolder } from './AnimatedIcons/IconFolder';
 import { IconClosed } from '../icons/IconClosed';
-import { IconOpen } from '../icons/IconOpen';
 import { IconNoIcon } from '../icons/IconNoIcon';
 import { Icon } from './Icon';
 import { withWidth } from './withWidth';
@@ -1005,7 +1005,6 @@ export class FileBrowserClass extends Component {
             !item.temp) {
             return null;
         }
-        const IconEl = expanded ? IconOpen : IconClosed;
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
         const isUserData = item.name === USER_DATA;
         const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
@@ -1013,7 +1012,7 @@ export class FileBrowserClass extends Component {
         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(IconFolder, { open: !!expanded, 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]
                 ? this.state.folders[item.id].length
@@ -1263,7 +1262,7 @@ export class FileBrowserClass extends Component {
                     ...styles.menuButton,
                     ...(this.state.expertMode ? styles.menuButtonExpertActive : undefined),
                 }, "aria-label": "expert mode", onClick: () => this.setState({ expertMode: !this.state.expertMode }), size: "small" },
-                React.createElement(IconExpert, null))) : null,
+                React.createElement(IconExpertMode, { active: !!this.state.expertMode }))) : null,
             this.props.showViewTypeButton ? (React.createElement(IconButton, { edge: "start", title: this.props.t('ra_Toggle view mode'), style: styles.menuButton, "aria-label": "view mode", onClick: () => {
                     const viewType = this.state.viewType === TABLE ? TILE : TABLE;
                     this.localStorage.setItem('files.viewType', viewType);