@iobroker/adapter-react-v5 7.2.4 → 7.2.6

package/{Components → build/Components}/UploadImage.js

@@ -1,39 +1,11 @@
-"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_dropzone_1 = __importDefault(require("react-dropzone"));
-const react_cropper_1 = require("react-cropper");
-const material_1 = require("@mui/material");
-const icons_material_1 = require("@mui/icons-material");
-const fa_1 = require("react-icons/fa");
-const i18n_1 = __importDefault(require("../i18n"));
-const Icon_1 = __importDefault(require("./Icon"));
+import React, { Component, createRef } from 'react';
+import Dropzone from 'react-dropzone';
+import { Cropper } from 'react-cropper';
+import { Menu, MenuItem, Tooltip, IconButton } from '@mui/material';
+import { Close as IconClose, Crop as CropIcon } from '@mui/icons-material';
+import { FaFileUpload as UploadIcon } from 'react-icons/fa';
+import { I18n } from '../i18n';
+import { Icon } from './Icon';
 // import 'cropperjs/dist/cropper.css';
 const cropperStyles = `
 /*!
@@ -417,7 +389,8 @@ const styles = {
         boxSizing: 'border-box',
     },
 };
-class UploadImage extends react_1.Component {
+export class UploadImage extends Component {
+    cropperRef;
     constructor(props) {
         super(props);
         this.state = {
@@ -425,7 +398,7 @@ class UploadImage extends react_1.Component {
             anchorEl: null,
             cropHandler: false,
         };
-        this.cropperRef = (0, react_1.createRef)();
+        this.cropperRef = createRef();
         if (!window.document.getElementById('cropper-style-json-component')) {
             const style = window.document.createElement('style');
             style.setAttribute('id', 'cropper-style-json-component');
@@ -441,12 +414,11 @@ class UploadImage extends react_1.Component {
         reader.onabort = () => console.log('file reading was aborted');
         reader.onerror = () => console.log('file reading has failed');
         reader.onload = () => {
-            var _a, _b;
             if (!file || !file.name) {
                 return;
             }
-            const parts = (_a = file.name) === null || _a === void 0 ? void 0 : _a.split('.');
-            let ext = (parts === null || parts === void 0 ? void 0 : parts.length) ? `image/${(_b = parts.pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase()}` : 'image/jpeg';
+            const parts = file.name?.split('.');
+            let ext = parts?.length ? `image/${parts.pop()?.toLowerCase()}` : 'image/jpeg';
             if (ext === 'image/jpg') {
                 ext = 'image/jpeg';
             }
@@ -454,7 +426,7 @@ class UploadImage extends react_1.Component {
                 ext = 'image/svg+xml';
             }
             if (file.size > maxSize) {
-                window.alert(i18n_1.default.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));
+                window.alert(I18n.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));
             }
             else {
                 const base64 = `data:${ext};base64,${btoa(new Uint8Array(reader.result).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
@@ -484,7 +456,7 @@ class UploadImage extends react_1.Component {
             });
             accept = result;
         }
-        return (react_1.default.createElement(react_dropzone_1.default, { disabled: !!disabled || cropHandler, key: "dropzone", multiple: false, accept: accept, maxSize: maxSize, onDragEnter: () => this.setState({ uploadFile: 'dragging' }), onDragLeave: () => this.setState({ uploadFile: true }), onDrop: (acceptedFiles, errors) => {
+        return (React.createElement(Dropzone, { disabled: !!disabled || cropHandler, key: "dropzone", multiple: false, accept: accept, maxSize: maxSize, onDragEnter: () => this.setState({ uploadFile: 'dragging' }), onDragLeave: () => this.setState({ uploadFile: true }), onDrop: (acceptedFiles, errors) => {
                 this.setState({ uploadFile: false });
                 if (!acceptedFiles.length) {
                     window.alert((errors &&
@@ -492,29 +464,35 @@ class UploadImage extends react_1.Component {
                         errors[0].errors &&
                         errors[0].errors[0] &&
                         errors[0].errors[0].message) ||
-                        i18n_1.default.t('ra_Cannot upload'));
+                        I18n.t('ra_Cannot upload'));
                 }
                 else {
                     this.onDrop(acceptedFiles);
                 }
-            } }, ({ getRootProps, getInputProps }) => (react_1.default.createElement("div", Object.assign({ style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, styles.uploadDiv), (uploadFile === 'dragging' ? styles.uploadDivDragging : undefined)), styles.dropZone), (disabled ? styles.disabledOpacity : undefined)), (!icon ? styles.dropZoneEmpty : undefined)) }, getRootProps()),
-            react_1.default.createElement("input", Object.assign({}, getInputProps())),
-            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.uploadCenterDiv), (error ? styles.error : undefined)) },
-                !icon ? (react_1.default.createElement("div", { style: styles.uploadCenterTextAndIcon },
-                    react_1.default.createElement(fa_1.FaFileUpload, { style: styles.uploadCenterIcon }),
-                    react_1.default.createElement("div", { style: styles.uploadCenterText }, uploadFile === 'dragging'
-                        ? i18n_1.default.t('ra_Drop file here')
-                        : i18n_1.default.t('ra_Place your files here or click here to open the browse dialog')))) : (removeIconFunc &&
-                    !cropHandler && (react_1.default.createElement("div", { style: styles.buttonRemoveWrapper },
-                    react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Clear'), slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
-                        react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
+            } }, ({ getRootProps, getInputProps }) => (React.createElement("div", { style: {
+                ...styles.uploadDiv,
+                ...(uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),
+                ...styles.dropZone,
+                ...(disabled ? styles.disabledOpacity : undefined),
+                ...(!icon ? styles.dropZoneEmpty : undefined),
+            }, ...getRootProps() },
+            React.createElement("input", { ...getInputProps() }),
+            React.createElement("div", { style: { ...styles.uploadCenterDiv, ...(error ? styles.error : undefined) } },
+                !icon ? (React.createElement("div", { style: styles.uploadCenterTextAndIcon },
+                    React.createElement(UploadIcon, { style: styles.uploadCenterIcon }),
+                    React.createElement("div", { style: styles.uploadCenterText }, uploadFile === 'dragging'
+                        ? I18n.t('ra_Drop file here')
+                        : I18n.t('ra_Place your files here or click here to open the browse dialog')))) : (removeIconFunc &&
+                    !cropHandler && (React.createElement("div", { style: styles.buttonRemoveWrapper },
+                    React.createElement(Tooltip, { title: I18n.t('ra_Clear'), slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
+                        React.createElement(IconButton, { size: "large", onClick: e => {
                                 removeIconFunc && removeIconFunc();
                                 e.stopPropagation();
                             } },
-                            react_1.default.createElement(icons_material_1.Close, null)))))),
-                icon && crop && (react_1.default.createElement("div", { style: styles.buttonCropWrapper },
-                    react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Crop'), slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
-                        react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
+                            React.createElement(IconClose, null)))))),
+                icon && crop && (React.createElement("div", { style: styles.buttonCropWrapper },
+                    React.createElement(Tooltip, { title: I18n.t('ra_Crop'), slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
+                        React.createElement(IconButton, { size: "large", onClick: e => {
                                 if (!cropHandler) {
                                     this.setState({ cropHandler: true });
                                 }
@@ -523,11 +501,10 @@ class UploadImage extends react_1.Component {
                                 }
                                 e.stopPropagation();
                             } },
-                            react_1.default.createElement(icons_material_1.Crop, { color: cropHandler ? 'primary' : 'inherit' }))),
-                    react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: () => this.setState({ anchorEl: null }) },
-                        react_1.default.createElement(material_1.MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }, () => {
-                                var _a, _b;
-                                const imageElement = (_b = (_a = this.cropperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.cropper;
+                            React.createElement(CropIcon, { color: cropHandler ? 'primary' : 'inherit' }))),
+                    React.createElement(Menu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: () => this.setState({ anchorEl: null }) },
+                        React.createElement(MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }, () => {
+                                const imageElement = this.cropperRef?.current?.cropper;
                                 if (imageElement) {
                                     if (onChange) {
                                         onChange(imageElement.getCroppedCanvas().toDataURL());
@@ -536,10 +513,10 @@ class UploadImage extends react_1.Component {
                                         console.log(imageElement.getCroppedCanvas().toDataURL());
                                     }
                                 }
-                            }) }, i18n_1.default.t('ra_Save')),
-                        react_1.default.createElement(material_1.MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }) }, i18n_1.default.t('ra_Close'))))),
-                icon && !cropHandler ? (react_1.default.createElement(Icon_1.default, { src: icon, style: styles.image, alt: "icon" })) : null,
-                icon && crop && cropHandler ? (react_1.default.createElement(react_cropper_1.Cropper, { ref: this.cropperRef, style: styles.image, src: icon, initialAspectRatio: 1, viewMode: 1, guides: false, minCropBoxHeight: 10, minCropBoxWidth: 10, background: false, checkOrientation: false })) : null)))));
+                            }) }, I18n.t('ra_Save')),
+                        React.createElement(MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }) }, I18n.t('ra_Close'))))),
+                icon && !cropHandler ? (React.createElement(Icon, { src: icon, style: styles.image, alt: "icon" })) : null,
+                icon && crop && cropHandler ? (React.createElement(Cropper, { ref: this.cropperRef, style: styles.image, src: icon, initialAspectRatio: 1, viewMode: 1, guides: false, minCropBoxHeight: 10, minCropBoxWidth: 10, background: false, checkOrientation: false })) : null)))));
     }
 }
-exports.default = UploadImage;
+//# sourceMappingURL=UploadImage.js.map

package/build/Components/UploadImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadImage.js","sourceRoot":"./src/","sources":["Components/UploadImage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component, createRef, type JSX } from 'react';\nimport Dropzone from 'react-dropzone';\nimport { Cropper, type ReactCropperElement } from 'react-cropper';\n\nimport { Menu, MenuItem, Tooltip, IconButton } from '@mui/material';\n\nimport { Close as IconClose, Crop as CropIcon } from '@mui/icons-material';\nimport { FaFileUpload as UploadIcon } from 'react-icons/fa';\n\nimport { I18n } from '../i18n';\nimport { Icon } from './Icon';\n\n// import 'cropperjs/dist/cropper.css';\nconst cropperStyles = `\n/*!\n * Cropper.js v1.5.12\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2021-06-12T08:00:11.623Z\n */\n\n.cropper-container {\n  direction: ltr;\n  font-size: 0;\n  line-height: 0;\n  position: relative;\n  -ms-touch-action: none;\n  touch-action: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.cropper-container img {\n  display: block;\n  height: 100%;\n  image-orientation: 0deg;\n  max-height: none !important;\n  max-width: none !important;\n  min-height: 0 !important;\n  min-width: 0 !important;\n  width: 100%;\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n  overflow: hidden;\n}\n\n.cropper-drag-box {\n  background-color: #fff;\n  opacity: 0;\n}\n\n.cropper-modal {\n  background-color: #000;\n  opacity: 0.5;\n}\n\n.cropper-view-box {\n  display: block;\n  height: 100%;\n  outline: 1px solid #39f;\n  outline-color: rgba(51, 153, 255, 0.75);\n  overflow: hidden;\n  width: 100%;\n}\n\n.cropper-dashed {\n  border: 0 dashed #eee;\n  display: block;\n  opacity: 0.5;\n  position: absolute;\n}\n\n.cropper-dashed.dashed-h {\n  border-bottom-width: 1px;\n  border-top-width: 1px;\n  height: calc(100% / 3);\n  left: 0;\n  top: calc(100% / 3);\n  width: 100%;\n}\n\n.cropper-dashed.dashed-v {\n  border-left-width: 1px;\n  border-right-width: 1px;\n  height: 100%;\n  left: calc(100% / 3);\n  top: 0;\n  width: calc(100% / 3);\n}\n\n.cropper-center {\n  display: block;\n  height: 0;\n  left: 50%;\n  opacity: 0.75;\n  position: absolute;\n  top: 50%;\n  width: 0;\n}\n\n.cropper-center::before,\n.cropper-center::after {\n  background-color: #eee;\n  content: ' ';\n  display: block;\n  position: absolute;\n}\n\n.cropper-center::before {\n  height: 1px;\n  left: -3px;\n  top: 0;\n  width: 7px;\n}\n\n.cropper-center::after {\n  height: 7px;\n  left: 0;\n  top: -3px;\n  width: 1px;\n}\n\n.cropper-face,\n.cropper-line,\n.cropper-point {\n  display: block;\n  height: 100%;\n  opacity: 0.1;\n  position: absolute;\n  width: 100%;\n}\n\n.cropper-face {\n  background-color: #fff;\n  left: 0;\n  top: 0;\n}\n\n.cropper-line {\n  background-color: #39f;\n}\n\n.cropper-line.line-e {\n  cursor: ew-resize;\n  right: -3px;\n  top: 0;\n  width: 5px;\n}\n\n.cropper-line.line-n {\n  cursor: ns-resize;\n  height: 5px;\n  left: 0;\n  top: -3px;\n}\n\n.cropper-line.line-w {\n  cursor: ew-resize;\n  left: -3px;\n  top: 0;\n  width: 5px;\n}\n\n.cropper-line.line-s {\n  bottom: -3px;\n  cursor: ns-resize;\n  height: 5px;\n  left: 0;\n}\n\n.cropper-point {\n  background-color: #39f;\n  height: 5px;\n  opacity: 0.75;\n  width: 5px;\n}\n\n.cropper-point.point-e {\n  cursor: ew-resize;\n  margin-top: -3px;\n  right: -3px;\n  top: 50%;\n}\n\n.cropper-point.point-n {\n  cursor: ns-resize;\n  left: 50%;\n  margin-left: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-w {\n  cursor: ew-resize;\n  left: -3px;\n  margin-top: -3px;\n  top: 50%;\n}\n\n.cropper-point.point-s {\n  bottom: -3px;\n  cursor: s-resize;\n  left: 50%;\n  margin-left: -3px;\n}\n\n.cropper-point.point-ne {\n  cursor: nesw-resize;\n  right: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-nw {\n  cursor: nwse-resize;\n  left: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-sw {\n  bottom: -3px;\n  cursor: nesw-resize;\n  left: -3px;\n}\n\n.cropper-point.point-se {\n  bottom: -3px;\n  cursor: nwse-resize;\n  height: 20px;\n  opacity: 1;\n  right: -3px;\n  width: 20px;\n}\n\n@media (min-width: 768px) {\n  .cropper-point.point-se {\n    height: 15px;\n    width: 15px;\n  }\n}\n\n@media (min-width: 992px) {\n  .cropper-point.point-se {\n    height: 10px;\n    width: 10px;\n  }\n}\n\n@media (min-width: 1200px) {\n  .cropper-point.point-se {\n    height: 5px;\n    opacity: 0.75;\n    width: 5px;\n  }\n}\n\n.cropper-point.point-se::before {\n  background-color: #39f;\n  bottom: -50%;\n  content: ' ';\n  display: block;\n  height: 200%;\n  opacity: 0;\n  position: absolute;\n  right: -50%;\n  width: 200%;\n}\n\n.cropper-invisible {\n  opacity: 0;\n}\n\n.cropper-bg {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');\n}\n\n.cropper-hide {\n  display: block;\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.cropper-hidden {\n  display: none !important;\n}\n\n.cropper-move {\n  cursor: move;\n}\n\n.cropper-crop {\n  cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n  cursor: not-allowed;\n}\n`;\n\nconst styles: Record<string, React.CSSProperties> = {\n    dropZone: {\n        width: '100%',\n        height: 100,\n        position: 'relative',\n    },\n    dropZoneEmpty: {},\n    image: {\n        objectFit: 'contain',\n        margin: 'auto',\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n    },\n\n    uploadDiv: {\n        position: 'relative',\n        width: '100%',\n        height: 300,\n        opacity: 0.9,\n        marginTop: 30,\n        cursor: 'pointer',\n        outline: 'none',\n    },\n    uploadDivDragging: {\n        opacity: 1,\n        background: 'rgba(128,255,128,0.1)',\n    },\n\n    uploadCenterDiv: {\n        margin: 5,\n        border: '3px dashed grey',\n        borderRadius: 5,\n        width: 'calc(100% - 10px)',\n        height: 'calc(100% - 10px)',\n        position: 'relative',\n        display: 'flex',\n    },\n    uploadCenterIcon: {\n        paddingTop: 10,\n        width: 48,\n        height: 48,\n    },\n    uploadCenterText: {\n        fontSize: 16,\n    },\n    uploadCenterTextAndIcon: {\n        textAlign: 'center',\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    disabledOpacity: {\n        opacity: 0.3,\n        cursor: 'default',\n    },\n    buttonRemoveWrapper: {\n        position: 'absolute',\n        zIndex: 222,\n        right: 0,\n    },\n    buttonCropWrapper: {\n        position: 'absolute',\n        zIndex: 222,\n        right: 0,\n        top: 50,\n    },\n    error: {\n        border: '2px solid red',\n        boxSizing: 'border-box',\n    },\n};\n\ninterface UploadImageProps {\n    maxSize?: number;\n    disabled?: boolean;\n    crop?: boolean;\n    error?: boolean;\n    onChange: (base64: string) => void | undefined;\n    icon: string | null;\n    removeIconFunc: () => void | null;\n    accept?: Record<string, string[]>;\n}\n\ninterface UploadImageState {\n    uploadFile: boolean | 'dragging';\n    anchorEl: HTMLElement | null;\n    cropHandler: boolean;\n}\n\nexport class UploadImage extends Component<UploadImageProps, UploadImageState> {\n    private readonly cropperRef: React.RefObject<ReactCropperElement>;\n\n    constructor(props: UploadImageProps) {\n        super(props);\n\n        this.state = {\n            uploadFile: false,\n            anchorEl: null,\n            cropHandler: false,\n        };\n        this.cropperRef = createRef();\n\n        if (!window.document.getElementById('cropper-style-json-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'cropper-style-json-component');\n            style.innerHTML = cropperStyles;\n            window.document.head.appendChild(style);\n        }\n    }\n\n    onDrop(acceptedFiles: File[]): void {\n        const onChange = this.props.onChange;\n        const maxSize = this.props.maxSize || 10 * 1024;\n\n        const file = acceptedFiles[0];\n        const reader = new FileReader();\n\n        reader.onabort = () => console.log('file reading was aborted');\n        reader.onerror = () => console.log('file reading has failed');\n        reader.onload = () => {\n            if (!file || !file.name) {\n                return;\n            }\n            const parts = file.name?.split('.');\n            let ext = parts?.length ? `image/${parts.pop()?.toLowerCase()}` : 'image/jpeg';\n            if (ext === 'image/jpg') {\n                ext = 'image/jpeg';\n            } else if (ext.includes('svg')) {\n                ext = 'image/svg+xml';\n            }\n            if (file.size > maxSize) {\n                window.alert(I18n.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));\n            } else {\n                const base64 = `data:${ext};base64,${btoa(\n                    new Uint8Array(reader.result as ArrayBufferLike).reduce(\n                        (data, byte) => data + String.fromCharCode(byte),\n                        '',\n                    ),\n                )}`;\n\n                if (onChange) {\n                    onChange(base64);\n                } else {\n                    console.log(base64);\n                }\n            }\n        };\n        reader.readAsArrayBuffer(file);\n    }\n\n    render(): JSX.Element {\n        const { disabled, icon, removeIconFunc, error, crop, onChange } = this.props;\n        const maxSize = this.props.maxSize || 10 * 1024;\n        let accept = this.props.accept || { 'image/*': [] };\n        const { uploadFile, anchorEl, cropHandler } = this.state;\n\n        // covert '\"image/png\"' to { 'image/*': [] }\n        if (typeof accept === 'string') {\n            accept = { [accept]: [] };\n        } else if (Array.isArray(accept)) {\n            const result: Record<string, string[]> = {};\n            accept.forEach(item => {\n                result[item] = [];\n            });\n            accept = result;\n        }\n\n        return (\n            <Dropzone\n                disabled={!!disabled || cropHandler}\n                key=\"dropzone\"\n                multiple={false}\n                accept={accept}\n                maxSize={maxSize}\n                onDragEnter={() => this.setState({ uploadFile: 'dragging' })}\n                onDragLeave={() => this.setState({ uploadFile: true })}\n                onDrop={(acceptedFiles: File[], errors) => {\n                    this.setState({ uploadFile: false });\n                    if (!acceptedFiles.length) {\n                        window.alert(\n                            (errors &&\n                                errors[0] &&\n                                errors[0].errors &&\n                                errors[0].errors[0] &&\n                                errors[0].errors[0].message) ||\n                                I18n.t('ra_Cannot upload'),\n                        );\n                    } else {\n                        this.onDrop(acceptedFiles);\n                    }\n                }}\n            >\n                {({ getRootProps, getInputProps }) => (\n                    <div\n                        style={{\n                            ...styles.uploadDiv,\n                            ...(uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),\n                            ...styles.dropZone,\n                            ...(disabled ? styles.disabledOpacity : undefined),\n                            ...(!icon ? styles.dropZoneEmpty : undefined),\n                        }}\n                        {...getRootProps()}\n                    >\n                        <input {...getInputProps()} />\n                        <div style={{ ...styles.uploadCenterDiv, ...(error ? styles.error : undefined) }}>\n                            {!icon ? (\n                                <div style={styles.uploadCenterTextAndIcon}>\n                                    <UploadIcon style={styles.uploadCenterIcon} />\n                                    <div style={styles.uploadCenterText}>\n                                        {uploadFile === 'dragging'\n                                            ? I18n.t('ra_Drop file here')\n                                            : I18n.t(\n                                                  'ra_Place your files here or click here to open the browse dialog',\n                                              )}\n                                    </div>\n                                </div>\n                            ) : (\n                                removeIconFunc &&\n                                !cropHandler && (\n                                    <div style={styles.buttonRemoveWrapper}>\n                                        <Tooltip\n                                            title={I18n.t('ra_Clear')}\n                                            slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n                                        >\n                                            <IconButton\n                                                size=\"large\"\n                                                onClick={e => {\n                                                    removeIconFunc && removeIconFunc();\n                                                    e.stopPropagation();\n                                                }}\n                                            >\n                                                <IconClose />\n                                            </IconButton>\n                                        </Tooltip>\n                                    </div>\n                                )\n                            )}\n                            {icon && crop && (\n                                <div style={styles.buttonCropWrapper}>\n                                    <Tooltip\n                                        title={I18n.t('ra_Crop')}\n                                        slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n                                    >\n                                        <IconButton\n                                            size=\"large\"\n                                            onClick={e => {\n                                                if (!cropHandler) {\n                                                    this.setState({ cropHandler: true });\n                                                } else {\n                                                    this.setState({ anchorEl: e.currentTarget });\n                                                }\n                                                e.stopPropagation();\n                                            }}\n                                        >\n                                            <CropIcon color={cropHandler ? 'primary' : 'inherit'} />\n                                        </IconButton>\n                                    </Tooltip>\n                                    <Menu\n                                        anchorEl={anchorEl}\n                                        keepMounted\n                                        open={Boolean(anchorEl)}\n                                        onClose={() => this.setState({ anchorEl: null })}\n                                    >\n                                        <MenuItem\n                                            onClick={() =>\n                                                this.setState({ anchorEl: null, cropHandler: false }, () => {\n                                                    const imageElement = this.cropperRef?.current?.cropper;\n                                                    if (imageElement) {\n                                                        if (onChange) {\n                                                            onChange(imageElement.getCroppedCanvas().toDataURL());\n                                                        } else {\n                                                            console.log(imageElement.getCroppedCanvas().toDataURL());\n                                                        }\n                                                    }\n                                                })\n                                            }\n                                        >\n                                            {I18n.t('ra_Save')}\n                                        </MenuItem>\n                                        <MenuItem onClick={() => this.setState({ anchorEl: null, cropHandler: false })}>\n                                            {I18n.t('ra_Close')}\n                                        </MenuItem>\n                                    </Menu>\n                                </div>\n                            )}\n                            {icon && !cropHandler ? (\n                                <Icon\n                                    src={icon}\n                                    style={styles.image}\n                                    alt=\"icon\"\n                                />\n                            ) : null}\n\n                            {icon && crop && cropHandler ? (\n                                <Cropper\n                                    ref={this.cropperRef}\n                                    style={styles.image}\n                                    src={icon}\n                                    initialAspectRatio={1}\n                                    viewMode={1}\n                                    guides={false}\n                                    minCropBoxHeight={10}\n                                    minCropBoxWidth={10}\n                                    background={false}\n                                    checkOrientation={false}\n                                />\n                            ) : null}\n                        </div>\n                    </div>\n                )}\n            </Dropzone>\n        );\n    }\n}\n"]}

package/{Components → build/Components}/Utils.d.ts

@@ -17,7 +17,7 @@ type SmartName = null | false | string | ({
 type ClassDictionary = Record<string, any>;
 type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined;
 type ClassArray = ClassValue[];
-declare class Utils {
+export declare class Utils {
     static namespace: string;
     static INSTANCES: string;
     static dateFormat: string[];
@@ -327,4 +327,4 @@ declare class Utils {
     static isValidDate(date: any): boolean;
     static getStyle(theme: IobTheme, ...args: (((_theme: IobTheme) => Record<string, any>) | undefined | Record<string, any>)[]): Record<string, any>;
 }
-export default Utils;
+export {};

package/{Components → build/Components}/Utils.js

@@ -1,17 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * Copyright 2018-2024 Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
  */
-const react_1 = __importDefault(require("react"));
-const CopyToClipboard_1 = __importDefault(require("./CopyToClipboard"));
-const i18n_1 = __importDefault(require("../i18n"));
+import React from 'react';
+import { copy } from './CopyToClipboard';
+import { I18n } from '../i18n';
 const NAMESPACE = 'material';
 const days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -42,7 +37,11 @@ const SIGNATURES = {
     Qk1: 'bmp',
     AAABAA: 'ico', // 00 00 01 00 according to https://en.wikipedia.org/wiki/List_of_file_signatures
 };
-class Utils {
+export class Utils {
+    static namespace = NAMESPACE;
+    static INSTANCES = 'instances';
+    static dateFormat = ['DD', 'MM'];
+    static FORBIDDEN_CHARS = /[^._\-/ :!#$%&()+=@^{}|~\p{Ll}\p{Lu}\p{Nd}]+/gu;
     /**
      * Capitalize words.
      */
@@ -67,7 +66,7 @@ class Utils {
         const secondsStr = Math.floor(seconds).toString().padStart(2, '0');
         let text = '';
         if (days_) {
-            text += `${days_} ${i18n_1.default.t('ra_daysShortText')} `;
+            text += `${days_} ${I18n.t('ra_daysShortText')} `;
         }
         text += `${hours}:${minutes}:${secondsStr}`;
         return text;
@@ -78,7 +77,6 @@ class Utils {
     static getObjectName(objects, id, settings, options, 
     /** Set to true to get the description. */
     isDesc) {
-        var _a;
         const item = objects[id];
         let text;
         if (typeof settings === 'string' && !options) {
@@ -94,7 +92,7 @@ class Utils {
                     window.sysLang ||
                     'en';
         }
-        if (settings === null || settings === void 0 ? void 0 : settings.name) {
+        if (settings?.name) {
             const textObj = settings.name;
             if (typeof textObj === 'object') {
                 text = (options.language && textObj[options.language]) || textObj.en;
@@ -103,7 +101,7 @@ class Utils {
                 text = textObj;
             }
         }
-        else if (isDesc && ((_a = item === null || item === void 0 ? void 0 : item.common) === null || _a === void 0 ? void 0 : _a.desc)) {
+        else if (isDesc && item?.common?.desc) {
             const textObj = item.common.desc;
             if (typeof textObj === 'object') {
                 text = (options.language && textObj[options.language]) || textObj.en || textObj.de || textObj.ru || '';
@@ -116,7 +114,7 @@ class Utils {
                 text = text[0] + text.substring(1).toLowerCase();
             }
         }
-        else if (!isDesc && (item === null || item === void 0 ? void 0 : item.common)) {
+        else if (!isDesc && item?.common) {
             const textObj = item.common.name || item.common.desc;
             if (textObj && typeof textObj === 'object') {
                 text = (options.language && textObj[options.language]) || textObj.en || textObj.de || textObj.ru || '';
@@ -134,7 +132,7 @@ class Utils {
             text = id.substring(pos + 1).replace(/[_.]/g, ' ');
             text = Utils.CapitalWords(text);
         }
-        return (text === null || text === void 0 ? void 0 : text.trim()) || '';
+        return text?.trim() || '';
     }
     /**
      * Get the name of the object from the name or description.
@@ -146,7 +144,6 @@ class Utils {
     isDesc, 
     /** Allow using spaces in name (by edit) */
     noTrim) {
-        var _a, _b;
         const item = obj;
         let text = (obj && obj._id) || '';
         if (typeof settings === 'string' && !options) {
@@ -154,7 +151,7 @@ class Utils {
             settings = null;
         }
         options = options || {};
-        if (settings === null || settings === void 0 ? void 0 : settings.name) {
+        if (settings?.name) {
             const name = settings.name;
             if (typeof name === 'object') {
                 text = (options.language && name[options.language]) || name.en;
@@ -163,7 +160,7 @@ class Utils {
                 text = name;
             }
         }
-        else if (isDesc && ((_a = item === null || item === void 0 ? void 0 : item.common) === null || _a === void 0 ? void 0 : _a.desc)) {
+        else if (isDesc && item?.common?.desc) {
             const desc = item.common.desc;
             if (typeof desc === 'object') {
                 text = (options.language && desc[options.language]) || desc.en;
@@ -176,7 +173,7 @@ class Utils {
                 text = text[0] + text.substring(1).toLowerCase();
             }
         }
-        else if (!isDesc && ((_b = item === null || item === void 0 ? void 0 : item.common) === null || _b === void 0 ? void 0 : _b.name)) {
+        else if (!isDesc && item?.common?.name) {
             let name = item.common.name;
             if (!name && item.common.desc) {
                 name = item.common.desc;
@@ -206,7 +203,7 @@ class Utils {
             common = obj;
         }
         let settings;
-        if (common === null || common === void 0 ? void 0 : common.custom) {
+        if (common?.custom) {
             settings = common.custom[NAMESPACE];
             const user = options.user || 'admin';
             if (settings && settings[user]) {
@@ -234,7 +231,7 @@ class Utils {
             common = obj;
         }
         let settings;
-        if (common === null || common === void 0 ? void 0 : common.custom) {
+        if (common?.custom) {
             settings = common.custom[NAMESPACE];
             const user = options.user || 'admin';
             if (settings && settings[user]) {
@@ -264,7 +261,7 @@ class Utils {
      */
     static getSettings(obj, options, defaultEnabling) {
         let settings;
-        const id = (obj === null || obj === void 0 ? void 0 : obj._id) || (options === null || options === void 0 ? void 0 : options.id);
+        const id = obj?._id || options?.id;
         let common;
         if (obj && Object.prototype.hasOwnProperty.call(obj, 'common')) {
             common = obj.common;
@@ -272,7 +269,7 @@ class Utils {
         else {
             common = obj;
         }
-        if (common === null || common === void 0 ? void 0 : common.custom) {
+        if (common?.custom) {
             settings = common.custom;
             settings =
                 settings[NAMESPACE] && settings[NAMESPACE][options.user || 'admin']
@@ -359,16 +356,16 @@ class Utils {
      * Get the icon for the given settings.
      */
     static getIcon(settings, style) {
-        if (settings === null || settings === void 0 ? void 0 : settings.icon) {
+        if (settings?.icon) {
             // If UTF-8 icon
             if (settings.icon.length <= 2) {
-                return react_1.default.createElement("span", { style: style || {} }, settings.icon);
+                return React.createElement("span", { style: style || {} }, settings.icon);
             }
             if (settings.icon.startsWith('data:image')) {
-                return (react_1.default.createElement("img", { alt: settings.name, src: settings.icon, style: style || {} }));
+                return (React.createElement("img", { alt: settings.name, src: settings.icon, style: style || {} }));
             }
             // maybe later some changes for a second type
-            return (react_1.default.createElement("img", { alt: settings.name, src: (settings.prefix || '') + settings.icon, style: style }));
+            return (React.createElement("img", { alt: settings.name, src: (settings.prefix || '') + settings.icon, style: style }));
         }
         return null;
     }
@@ -376,13 +373,12 @@ class Utils {
      * Get the icon for the given object.
      */
     static getObjectIcon(id, obj) {
-        var _a;
         // If id is Object
         if (typeof id === 'object') {
             obj = id;
-            id = obj === null || obj === void 0 ? void 0 : obj._id;
+            id = obj?._id;
         }
-        if ((_a = obj === null || obj === void 0 ? void 0 : obj.common) === null || _a === void 0 ? void 0 : _a.icon) {
+        if (obj?.common?.icon) {
             let icon = obj.common.icon;
             // If UTF-8 icon
             if (typeof icon === 'string' && icon.length <= 2) {
@@ -644,8 +640,8 @@ class Utils {
         else {
             now = new Date(now);
         }
-        let date = i18n_1.default.t(`ra_dow_${days[now.getDay()]}`).replace('ra_dow_', '');
-        date += `. ${now.getDate()} ${i18n_1.default.t(`ra_month_${months[now.getMonth()]}`).replace('ra_month_', '')}`;
+        let date = I18n.t(`ra_dow_${days[now.getDay()]}`).replace('ra_dow_', '');
+        date += `. ${now.getDate()} ${I18n.t(`ra_month_${months[now.getMonth()]}`).replace('ra_month_', '')}`;
         return date;
     }
     /**
@@ -659,15 +655,15 @@ class Utils {
             do {
                 const start = text.substring(0, m.index);
                 text = text.substring((m.index || 0) + m[0].length);
-                start && result.push(react_1.default.createElement("span", { key: `a${key++}` }, start));
+                start && result.push(React.createElement("span", { key: `a${key++}` }, start));
                 if (m[0].startsWith('<b>')) {
-                    result.push(react_1.default.createElement("b", { key: `a${key++}` }, m[0].substring(3, m[0].length - 4)));
+                    result.push(React.createElement("b", { key: `a${key++}` }, m[0].substring(3, m[0].length - 4)));
                 }
                 else if (m[0].startsWith('<i>')) {
-                    result.push(react_1.default.createElement("i", { key: `a${key++}` }, m[0].substring(3, m[0].length - 4)));
+                    result.push(React.createElement("i", { key: `a${key++}` }, m[0].substring(3, m[0].length - 4)));
                 }
                 else if (m[0].startsWith('<br')) {
-                    result.push(react_1.default.createElement("br", { key: `a${key++}` }));
+                    result.push(React.createElement("br", { key: `a${key++}` }));
                 }
                 else {
                     const href = m[0].match(/href="([^"]+)"/) || m[0].match(/href='([^']+)'/);
@@ -676,11 +672,11 @@ class Utils {
                     const title = m[0].match(/>([^<]*)</);
                     result.push(
                     // eslint-disable-next-line react/jsx-no-target-blank
-                    react_1.default.createElement("a", { key: `a${key++}`, href: href ? href[1] : '', target: target ? target[1] : '_blank', rel: rel ? rel[1] : 'noreferrer', style: { color: 'inherit' } }, title ? title[1] : ''));
+                    React.createElement("a", { key: `a${key++}`, href: href ? href[1] : '', target: target ? target[1] : '_blank', rel: rel ? rel[1] : 'noreferrer', style: { color: 'inherit' } }, title ? title[1] : ''));
                 }
                 m = text ? text.match(/<a [^<]+<\/a>|<br\/?>|<b>[^<]+<\/b>|<i>[^<]+<\/i>/) : null;
                 if (!m) {
-                    text && result.push(react_1.default.createElement("span", { key: `a${key++}` }, text));
+                    text && result.push(React.createElement("span", { key: `a${key++}` }, text));
                 }
             } while (m);
             return result;
@@ -691,7 +687,6 @@ class Utils {
      * Get the smart name of the given state.
      */
     static getSmartName(states, id, instanceId, noCommon) {
-        var _a, _b;
         if (!id) {
             if (!noCommon) {
                 if (!states.common) {
@@ -706,7 +701,7 @@ class Utils {
                 return states.smartName;
             }
             const obj = states;
-            return ((_a = obj === null || obj === void 0 ? void 0 : obj.common) === null || _a === void 0 ? void 0 : _a.custom) && obj.common.custom[instanceId]
+            return obj?.common?.custom && obj.common.custom[instanceId]
                 ? obj.common.custom[instanceId].smartName
                 : undefined;
         }
@@ -714,7 +709,7 @@ class Utils {
             return states[id].common.smartName;
         }
         const obj = states[id];
-        return ((_b = obj === null || obj === void 0 ? void 0 : obj.common) === null || _b === void 0 ? void 0 : _b.custom) && obj.common.custom[instanceId]
+        return obj?.common?.custom && obj.common.custom[instanceId]
             ? obj.common.custom[instanceId].smartName || null
             : null;
     }
@@ -722,7 +717,6 @@ class Utils {
      * Get the smart name from a state.
      */
     static getSmartNameFromObj(obj, instanceId, noCommon) {
-        var _a, _b;
         if (!noCommon) {
             if (!obj.common) {
                 return obj.smartName;
@@ -735,7 +729,7 @@ class Utils {
         if (obj && !obj.common) {
             return obj.smartName;
         }
-        const custom = (_b = (_a = obj === null || obj === void 0 ? void 0 : obj.common) === null || _a === void 0 ? void 0 : _a.custom) === null || _b === void 0 ? void 0 : _b[instanceId];
+        const custom = obj?.common?.custom?.[instanceId];
         return custom ? custom.smartName : undefined;
     }
     /**
@@ -768,7 +762,7 @@ class Utils {
      * Update the smart name of a state.
      */
     static updateSmartName(obj, newSmartName, byON, smartType, instanceId, noCommon) {
-        const language = i18n_1.default.getLanguage();
+        const language = I18n.getLanguage();
         // convert the old format
         if (typeof obj.common.smartName === 'string') {
             const nnn = obj.common.smartName;
@@ -914,7 +908,7 @@ class Utils {
             e.stopPropagation();
             e.preventDefault();
         }
-        return (0, CopyToClipboard_1.default)(text);
+        return copy(text);
     }
     /**
      * Gets the extension of a file name.
@@ -1365,7 +1359,6 @@ class Utils {
         }
     }
     static MDgetTitle(text) {
-        var _a;
         const result = Utils.MDextractHeader(text);
         const header = result.header;
         let body = result.body;
@@ -1381,7 +1374,7 @@ class Utils {
             }
             return '';
         }
-        return ((_a = header.title) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+        return header.title?.toString() || '';
     }
     static MDextractHeader(text) {
         const attrs = {};
@@ -1480,15 +1473,14 @@ class Utils {
      * @returns states as an object in form {"value1": "label1", "value2": "label2"} or null
      */
     static getStates(obj) {
-        var _a;
-        const states = (_a = obj === null || obj === void 0 ? void 0 : obj.common) === null || _a === void 0 ? void 0 : _a.states;
+        const states = obj?.common?.states;
         let result;
         if (states) {
             if (typeof states === 'string' && states[0] === '{') {
                 try {
                     result = JSON.parse(states);
                 }
-                catch (_b) {
+                catch {
                     console.error(`Cannot parse states: ${states}`);
                     result = null;
                 }
@@ -1504,13 +1496,13 @@ class Utils {
             }
             else if (Array.isArray(states)) {
                 result = {};
-                if ((obj === null || obj === void 0 ? void 0 : obj.common.type) === 'number') {
+                if (obj?.common.type === 'number') {
                     states.forEach((value, key) => (result[key] = value));
                 }
-                else if ((obj === null || obj === void 0 ? void 0 : obj.common.type) === 'string') {
+                else if (obj?.common.type === 'string') {
                     states.forEach(value => (result[value] = value));
                 }
-                else if ((obj === null || obj === void 0 ? void 0 : obj.common.type) === 'boolean') {
+                else if (obj?.common.type === 'boolean') {
                     result.false = states[0];
                     result.true = states[1];
                 }
@@ -1533,8 +1525,7 @@ class Utils {
         return new Promise(resolve => {
             const reader = new FileReader();
             reader.onload = function () {
-                var _a;
-                resolve(((_a = this.result) === null || _a === void 0 ? void 0 : _a.toString()) || '');
+                resolve(this.result?.toString() || '');
             };
             reader.readAsDataURL(blob);
         });
@@ -1606,8 +1597,4 @@ class Utils {
         return result;
     }
 }
-Utils.namespace = NAMESPACE;
-Utils.INSTANCES = 'instances';
-Utils.dateFormat = ['DD', 'MM'];
-Utils.FORBIDDEN_CHARS = /[^._\-/ :!#$%&()+=@^{}|~\p{Ll}\p{Lu}\p{Nd}]+/gu;
-exports.default = Utils;
+//# sourceMappingURL=Utils.js.map