@iobroker/adapter-react-v5 4.14.1 → 5.0.0

package/Components/SaveCloseButtons.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { IobTheme } from '../types';
 interface SaveCloseButtonsProps {
     noTextOnButtons?: boolean;
-    theme: any;
+    theme: IobTheme;
     isIFrame?: boolean;
     newReact?: boolean;
     onSave: (close: boolean) => void;
@@ -10,10 +11,7 @@ interface SaveCloseButtonsProps {
     paddingLeft?: number;
     changed: boolean;
     error?: boolean;
-    classes: {
-        buttonIcon: string;
-    };
+    classes: Record<string, string>;
 }
-/** @type {typeof SaveCloseButtons} */
-declare const _export: React.JSXElementConstructor<Omit<SaveCloseButtonsProps, "classes"> & import("@mui/styles").StyledComponentProps<"buttonIcon"> & object>;
-export default _export;
+declare const _default: React.JSXElementConstructor<Omit<SaveCloseButtonsProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
+export default _default;

package/Components/SaveCloseButtons.js

@@ -9,11 +9,11 @@ const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const i18n_1 = __importDefault(require("../i18n"));
-const styles = () => ({
+const styles = {
     buttonIcon: {
         marginRight: 8,
     },
-});
+};
 /**
  * @typedef {object} SaveCloseButtonsProps
  * @property {boolean} noTextOnButtons Are the buttons without text
@@ -76,6 +76,4 @@ class SaveCloseButtons extends react_1.default.Component {
                 !noTextOnButtons && i18n_1.default.t('ra_Close')));
     }
 }
-/** @type {typeof SaveCloseButtons} */
-const _export = (0, styles_1.withStyles)(styles)(SaveCloseButtons);
-exports.default = _export;
+exports.default = (0, styles_1.withStyles)(styles)(SaveCloseButtons);

package/Components/Schedule.d.ts

@@ -1,32 +1,3 @@
 import React from 'react';
-interface ScheduleConfig {
-    time: {
-        exactTime: boolean;
-        start: string;
-        end: string;
-        mode: string;
-        interval: number;
-    };
-    period: {
-        once: string;
-        days: number;
-        dows: string;
-        dates: string;
-        weeks: number;
-        months: string | number;
-        years: number;
-        yearMonth: number;
-        yearDate: number;
-    };
-    valid: {
-        from: string;
-        to?: string;
-    };
-}
-interface ScheduleProps {
-    classes: Record<string, string>;
-    schedule: string | ScheduleConfig;
-    onChange: (schedule: string, desc?: string) => void;
-}
-declare const _default: React.JSXElementConstructor<Omit<ScheduleProps, "classes"> & import("@mui/styles").StyledComponentProps<"hr" | "scrollWindow" | "rowDiv" | "modeDiv" | "settingsDiv" | "inputTime" | "inputDate" | "inputEvery" | "inputRadio" | "inputGroup" | "inputGroupElement" | "inputDateDay" | "inputDateDayCheck" | "inputSmallCheck" | "rowOnce" | "rowDays" | "rowDows" | "rowDates" | "rowWeeks" | "rowMonths" | "rowMonthsDates" | "rowYears" | "rowDaysDows" | "rowDowsDows"> & object>;
+declare const _default: React.JSXElementConstructor<any>;
 export default _default;

package/Components/Schedule.js

@@ -30,7 +30,7 @@ const react_1 = __importStar(require("react"));
 const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const i18n_1 = __importDefault(require("../i18n"));
-const styles = (theme) => ({
+const styles = theme => ({
     hr: {
         border: 0,
         borderTop: '1px solid gray',

package/Components/SimpleCron/cronText.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const cron2text_1 = __importDefault(require("./cron2text"));
 const jquery_cron_locale_1 = __importDefault(require("./jquery.cron.locale"));
+// TODO: other languages
 function correctCasus(text /* , seconds */) {
     text = text.replace('Каждую(ый) минуту', 'Каждую минуту');
     text = text.replace('Каждую(ый) минут(у)', 'Каждую минуту');

package/Components/TabContainer.d.ts

@@ -5,13 +5,9 @@ interface TabContainerProps {
     className?: string;
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     tabIndex?: number;
-    classes: {
-        root: string;
-        overflowHidden: string;
-        container: string;
-    };
+    classes: Record<string, string>;
     children: React.ReactNode;
 }
 /** @type {typeof TabContainer} */
-declare const _export: React.JSXElementConstructor<Omit<TabContainerProps, "classes"> & import("@mui/styles").StyledComponentProps<"root" | "container" | "overflowHidden"> & object>;
+declare const _export: React.JSXElementConstructor<Omit<TabContainerProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
 export default _export;

package/Components/TabContainer.js

@@ -1,32 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const Utils_1 = __importDefault(require("./Utils"));
@@ -42,12 +19,9 @@ const styles = {
         height: '100%',
     },
 };
-class TabContainer extends react_1.Component {
-    render() {
-        const { classes } = this.props;
-        return react_1.default.createElement(material_1.Paper, { elevation: !Number.isNaN(this.props.elevation) ? this.props.elevation : 1, className: Utils_1.default.clsx(classes.root, { [classes.overflowHidden]: this.props.overflow !== 'visible' }, this.props.className), onKeyDown: this.props.onKeyDown, tabIndex: this.props.tabIndex },
-            react_1.default.createElement(material_1.Grid, { container: true, direction: "column", wrap: "nowrap", className: classes.container }, this.props.children));
-    }
+function TabContainer(props) {
+    return react_1.default.createElement(material_1.Paper, { elevation: !Number.isNaN(props.elevation) ? props.elevation : 1, className: Utils_1.default.clsx(props.classes.root, { [props.classes.overflowHidden]: props.overflow !== 'visible' }, props.className), onKeyDown: props.onKeyDown, tabIndex: props.tabIndex },
+        react_1.default.createElement(material_1.Grid, { container: true, direction: "column", wrap: "nowrap", className: props.classes.container }, props.children));
 }
 /** @type {typeof TabContainer} */
 const _export = (0, styles_1.withStyles)(styles)(TabContainer);

package/Components/TabContent.js

@@ -17,10 +17,7 @@ const styles = {
         overflow: 'auto',
     },
 };
-class TabContent extends react_1.default.Component {
-    render() {
-        const { classes } = this.props;
-        return react_1.default.createElement(material_1.Grid, { item: true, className: Utils_1.default.clsx(classes.root, this.props.overflow === 'auto' ? classes.overflowAuto : '') }, this.props.children);
-    }
+function TabContent(props) {
+    return react_1.default.createElement(material_1.Grid, { item: true, className: Utils_1.default.clsx(props.classes.root, props.overflow === 'auto' ? props.classes.overflowAuto : '') }, props.children);
 }
 exports.default = (0, styles_1.withStyles)(styles)(TabContent);

package/Components/TabHeader.d.ts

@@ -2,7 +2,5 @@ import React from 'react';
 interface TabHeaderProps {
     children: React.ReactNode;
 }
-declare class TabHeader extends React.Component<TabHeaderProps> {
-    render(): React.JSX.Element;
-}
+declare function TabHeader(props: TabHeaderProps): React.JSX.Element;
 export default TabHeader;

package/Components/TabHeader.js

@@ -5,9 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-class TabHeader extends react_1.default.Component {
-    render() {
-        return react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, this.props.children);
-    }
+function TabHeader(props) {
+    return react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, props.children);
 }
 exports.default = TabHeader;

package/Components/TreeTable.js

@@ -241,63 +241,46 @@ class TreeTable extends react_1.Component {
             val = val[0];
         }
         if (col.lookup) {
-            return this.renderCellEditSelect(item, col, val);
+            return this.renderCellEditSelect(col, val);
         }
         if (col.editComponent) {
-            return this.renderCellEditCustom(item, col, val);
+            return this.renderCellEditCustom(col, val, item);
         }
         if (col.type === 'boolean' || (!col.type && typeof val === 'boolean')) {
-            return this.renderCellEditBoolean(item, col, val);
+            return this.renderCellEditBoolean(col, val);
         }
         if (col.type === 'color') {
-            return this.renderCellEditColor(item, col, val);
+            return this.renderCellEditColor(col, val);
         }
         if (col.type === 'oid') {
-            return this.renderCellEditObjectID(item, col, val);
+            return this.renderCellEditObjectID(col, val);
         }
         if (col.type === 'numeric') {
-            return this.renderCellEditNumber(item, col, val);
+            return this.renderCellEditNumber(col, val);
         }
-        return this.renderCellEditString(item, col, val);
+        return this.renderCellEditString(col, val);
     }
-    renderCellEditSelect(item, col, val) {
-        return react_1.default.createElement(material_1.Select, { variant: "standard", onChange: e => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (e.target.value === val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = e.target.value;
-                }
-                this.setState({ editData });
-            }, value: (this.state.editData && this.state.editData[col.field]) || val }, col.lookup && Object.keys(col.lookup)
+    onChange(col, oldValue, newValue) {
+        const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+        if (newValue === oldValue) {
+            delete editData[col.field];
+        }
+        else {
+            editData[col.field] = newValue;
+        }
+        this.setState({ editData });
+    }
+    renderCellEditSelect(col, val) {
+        return react_1.default.createElement(material_1.Select, { variant: "standard", onChange: e => this.onChange(col, val, e.target.value), value: (this.state.editData && this.state.editData[col.field]) || val }, col.lookup && Object.keys(col.lookup)
             .map((v, i) => { var _c; return react_1.default.createElement(material_1.MenuItem, { key: i, value: v }, (_c = col.lookup) === null || _c === void 0 ? void 0 : _c[v]); }));
     }
-    renderCellEditString(item, col, val) {
-        return react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.fieldEdit, fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (e.target.value === val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = e.target.value;
-                }
-                this.setState({ editData });
-            } });
+    renderCellEditString(col, val) {
+        return react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.fieldEdit, fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) });
     }
-    renderCellEditNumber(item, col, val) {
-        return react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.fieldEdit, type: "number", fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (e.target.value === val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = e.target.value;
-                }
-                this.setState({ editData });
-            } });
+    renderCellEditNumber(col, val) {
+        return react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.fieldEdit, type: "number", fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) });
     }
-    renderCellEditCustom(item, col, val) {
+    renderCellEditCustom(col, val, item) {
         const EditComponent = col.editComponent;
         // use new value if exists
         if (this.state.editData && this.state.editData[col.field] !== undefined) {
@@ -305,28 +288,10 @@ class TreeTable extends react_1.Component {
             item = JSON.parse(JSON.stringify(item));
             item[col.field] = val;
         }
-        return react_1.default.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (newVal === val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = newVal;
-                }
-                this.setState({ editData });
-            } });
+        return react_1.default.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => this.onChange(col, val, newVal) });
     }
-    renderCellEditBoolean(item, col, val) {
-        return react_1.default.createElement(material_1.Checkbox, { checked: this.state.editData && this.state.editData[col.field] !== undefined ? !!this.state.editData[col.field] : !!val, onChange: e => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (e.target.checked === !!val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = e.target.checked;
-                }
-                this.setState({ editData });
-            }, inputProps: { 'aria-label': 'checkbox' } });
+    renderCellEditBoolean(col, val) {
+        return react_1.default.createElement(material_1.Checkbox, { checked: this.state.editData && this.state.editData[col.field] !== undefined ? !!this.state.editData[col.field] : !!val, onChange: e => this.onChange(col, !!val, e.target.checked), inputProps: { 'aria-label': 'checkbox' } });
     }
     renderSelectColorDialog() {
         return react_1.default.createElement(material_1.Dialog, { classes: { root: this.props.classes.colorDialog, paper: this.props.classes.colorDialog }, onClose: () => {
@@ -335,30 +300,12 @@ class TreeTable extends react_1.Component {
             }, open: this.state.showSelectColor },
             react_1.default.createElement(react_colorful_1.HexColorPicker, { color: this.state.selectIdValue, onChange: color => this.setState({ selectIdValue: color }, () => this.selectCallback && this.selectCallback(color)) }));
     }
-    renderCellEditColor(item, col, val) {
+    renderCellEditColor(col, val) {
         const _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
         return react_1.default.createElement("div", { className: this.props.classes.fieldEdit },
-            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, className: this.props.classes.fieldEditWithButton, value: _val, inputProps: { style: { backgroundColor: _val, color: Utils_1.default.isUseBright(_val) ? '#FFF' : '#000' } }, onChange: e => {
-                    const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                    if (e.target.value === val) {
-                        delete editData[col.field];
-                    }
-                    else {
-                        editData[col.field] = e.target.value;
-                    }
-                    this.setState({ editData });
-                } }),
+            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, className: this.props.classes.fieldEditWithButton, value: _val, inputProps: { style: { backgroundColor: _val, color: Utils_1.default.isUseBright(_val) ? '#FFF' : '#000' } }, onChange: e => this.onChange(col, !!val, e.target.value) }),
             react_1.default.createElement(material_1.IconButton, { className: this.props.classes.fieldButton, onClick: () => {
-                    this.selectCallback = newColor => {
-                        const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                        if (newColor === val) {
-                            delete editData[col.field];
-                        }
-                        else {
-                            editData[col.field] = newColor;
-                        }
-                        this.setState({ editData });
-                    };
+                    this.selectCallback = newColor => this.onChange(col, val, newColor);
                     this.setState({ showSelectColor: true, selectIdValue: val });
                 }, size: "large" },
                 react_1.default.createElement(icons_material_1.Colorize, null)));
@@ -373,29 +320,11 @@ class TreeTable extends react_1.Component {
         }
         return null;
     }
-    renderCellEditObjectID(item, col, val) {
+    renderCellEditObjectID(col, val) {
         return react_1.default.createElement("div", { className: this.props.classes.fieldEdit },
-            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, className: this.props.classes.fieldEditWithButton, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => {
-                    const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                    if (e.target.value === val) {
-                        delete editData[col.field];
-                    }
-                    else {
-                        editData[col.field] = e.target.value;
-                    }
-                    this.setState({ editData });
-                } }),
+            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, className: this.props.classes.fieldEditWithButton, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) }),
             react_1.default.createElement(material_1.IconButton, { className: this.props.classes.fieldButton, onClick: () => {
-                    this.selectCallback = selected => {
-                        const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                        if (selected === val) {
-                            delete editData[col.field];
-                        }
-                        else {
-                            editData[col.field] = selected;
-                        }
-                        this.setState({ editData });
-                    };
+                    this.selectCallback = selected => this.onChange(col, val, selected);
                     this.setState({ showSelectId: true, selectIdValue: val });
                 }, size: "large" },
                 react_1.default.createElement(icons_material_1.ViewHeadline, null)));

package/Components/Utils.d.ts

@@ -5,7 +5,7 @@
  *
  **/
 import React from 'react';
-import { ThemeName, ThemeType } from "../types";
+import { ThemeName, ThemeType } from '../types';
 interface GetObjectNameOptions {
     name?: ioBroker.StringOrTranslated;
     language?: ioBroker.Languages;

package/GenericApp.d.ts

@@ -7,7 +7,7 @@
 import React from 'react';
 import { AdminConnection } from '@iobroker/socket-client';
 import Router from './Components/Router';
-import { GenericAppProps, GenericAppState, GenericAppSettings, ThemeName, ThemeType, Theme, Width } from './types';
+import { GenericAppProps, GenericAppState, GenericAppSettings, ThemeName, ThemeType, IobTheme, Width } from './types';
 declare global {
     /** If config has been changed */
     var changed: boolean;
@@ -69,15 +69,15 @@ declare class GenericApp<TProps extends GenericAppProps = GenericAppProps, TStat
      * Get a theme
      * @param name Theme name
      */
-    createTheme(name?: ThemeName | null | undefined): Theme;
+    createTheme(name?: ThemeName | null | undefined): IobTheme;
     /**
      * Get the theme name
      */
-    getThemeName(currentTheme: Theme): ThemeName;
+    getThemeName(currentTheme: IobTheme): ThemeName;
     /**
      * Get the theme type
      */
-    getThemeType(currentTheme: Theme): ThemeType;
+    getThemeType(currentTheme: IobTheme): ThemeType;
     onThemeChanged(newThemeName: string): void;
     onToggleExpertMode(expertMode: boolean): void;
     /**

package/README.md

@@ -670,9 +670,10 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
 -->
 
 ## Changelog
-### 4.14.1 (2024-05-29)
+### 5.0.0 (2024-05-29)
 * (bluefox) Types are now exported
 * (bluefox) Translator renamed to Translate
+* (bluefox) Breaking: Theme renamed to IobTheme because of the naming conflict
 
 ### 4.13.24 (2024-05-25)
 * (bluefox) Updated packages

package/Theme.d.ts

@@ -1,6 +1,6 @@
-import { type Theme, type ThemeName } from './types';
+import { type IobTheme, type ThemeName } from './types';
 /**
  * The theme creation factory function.
  */
-declare const CustomTheme: (type: ThemeName) => Theme;
+declare const CustomTheme: (type: ThemeName) => IobTheme;
 export default CustomTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "4.14.1",
+  "version": "5.0.0",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",

package/types.d.ts

@@ -79,7 +79,7 @@ export interface GenericAppState {
     loaded: boolean;
     themeType: ThemeType;
     themeName: ThemeName;
-    theme: Theme;
+    theme: IobTheme;
     expertMode: boolean;
     selectedTab: string;
     selectedTabNum: number | undefined;
@@ -123,7 +123,7 @@ interface Palette extends MuiPalette {
     }
 }
 
-export interface Theme extends MuiTheme {
+export interface IobTheme extends MuiTheme {
     name: ThemeName;
     palette: Palette;
     toolbar: React.CSSProperties;