@iobroker/adapter-react-v5 3.0.9 → 3.0.12

package/Components/FileViewer.js

@@ -45,7 +45,7 @@ var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 
 var _material = require("@mui/material");
 
-var _no_icon = _interopRequireDefault(require("../assets/no_icon.svg"));
+var _IconNoIcon = _interopRequireDefault(require("../icons/IconNoIcon"));
 
 var _Utils = _interopRequireDefault(require("./Utils"));
 
@@ -179,7 +179,8 @@ var FileViewer = /*#__PURE__*/function (_Component) {
       editingValue: null,
       copyPossible: EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext),
       forceUpdate: Date.now(),
-      changed: false
+      changed: false,
+      imgError: false
     };
     return _this;
   }
@@ -274,15 +275,24 @@ var FileViewer = /*#__PURE__*/function (_Component) {
       var _this3 = this;
 
       if (EXTENSIONS.images.includes(this.state.ext)) {
-        return /*#__PURE__*/_react["default"].createElement("img", {
-          onError: function onError(e) {
-            e.target.onerror = null;
-            e.target.src = _no_icon["default"];
-          },
-          className: _Utils["default"].clsx(this.props.classes.img, this.props.getClassBackgroundImage()),
-          src: this.props.href + '?ts=' + this.state.forceUpdate,
-          alt: this.props.href
-        });
+        if (this.state.imgError) {
+          return /*#__PURE__*/_react["default"].createElement(_IconNoIcon["default"], {
+            className: _Utils["default"].clsx(this.props.classes.img, this.props.getClassBackgroundImage())
+          });
+        } else {
+          return /*#__PURE__*/_react["default"].createElement("img", {
+            onError: function onError(e) {
+              e.target.onerror = null;
+
+              _this3.setState({
+                imgError: true
+              });
+            },
+            className: _Utils["default"].clsx(this.props.classes.img, this.props.getClassBackgroundImage()),
+            src: this.props.href + '?ts=' + this.state.forceUpdate,
+            alt: this.props.href
+          });
+        }
       } else if (this.state.code !== null || this.state.text !== null || this.state.editing) {
         return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
           variant: "standard",

package/Components/FileViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileViewer.js","names":["styles","theme","dialog","height","paper","content","textAlign","textarea","width","img","objectFit","dialogTitle","justifyContent","display","EXTENSIONS","images","code","txt","bufferToBase64","buffer","binary","bytes","Uint8Array","len","byteLength","i","String","fromCharCode","window","btoa","FileViewer","props","id","fileName","size","state","changed","timeout","clearTimeout","setTimeout","alert","text","readFile","setState","forceUpdate","Date","now","parts","href","split","data","editingValue","splice","adapter","name","join","socket","writeFile64","Buffer","from","toString","then","_","onClose","e","ext","Utils","getFileExtension","editing","formatEditFile","copyPossible","includes","file","undefined","newState","type","AdminUtils","detectMimeType","supportSubscribes","subscribeFiles","onFileChanged","target","onerror","src","NoImage","clsx","classes","getClassBackgroundImage","newValue","readOnly","scrollPaper","t","setStateBackgroundImage","getContent","copyToClipboard","Component","propTypes","PropTypes","func","lang","string","expertMode","bool","isRequired","_export","withWidth","withStyles"],"sources":["FileViewer.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { withStyles } from '@mui/styles';\nimport withWidth from './withWidth';\nimport PropTypes from 'prop-types';\n\nimport TextField from '@mui/material/TextField';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport { IconButton } from '@mui/material';\n\nimport NoImage from '../assets/no_icon.svg';\nimport Utils from './Utils';\n\n// Icons\nimport { FaCopy as CopyIcon } from 'react-icons/fa';\nimport Brightness5Icon from '@mui/icons-material/Brightness6';\nimport CloseIcon from '@mui/icons-material/Close';\nimport SaveIcon from '@mui/icons-material/Save';\n\nconst styles = theme => ({\n    dialog: {\n        height: '100%',\n    },\n    paper: {\n        height: 'calc(100% - 64px)',\n    },\n    content: {\n        textAlign: 'center',\n    },\n    textarea: {\n        width: '100%',\n        height: '100%',\n    },\n    img: {\n        width: 'auto',\n        height: 'calc(100% - 5px)',\n        objectFit: 'contain',\n    },\n    dialogTitle: {\n        justifyContent: 'space-between',\n        display: 'flex'\n    }\n});\n\nexport const EXTENSIONS = {\n    images: ['png', 'jpg', 'svg', 'jpeg', 'bmp'],\n    code:   ['js', 'json', 'md'],\n    txt:    ['log', 'txt', 'html', 'css', 'xml'],\n};\n\nfunction bufferToBase64(buffer) {\n    let binary = '';\n    let bytes = new Uint8Array(buffer);\n    let len = bytes.byteLength;\n    for (let i = 0; i < len && i < 50; i++) {\n        binary += String.fromCharCode(bytes[i]);\n    }\n    return window.btoa(binary);\n}\n\n/**\n * @typedef {object} FileViewerProps\n * @property {string} [key] The key to identify this component.\n * @property {import('../types').Translator} t Translation function\n * @property {ioBroker.Languages} [lang] The selected language.\n * @property {boolean} [expertMode] Is expert mode enabled? (default: false)\n * @property {() => void} onClose Callback when the viewer is closed.\n * @property {string} href The URL to the file to be displayed.\n *\n * @extends {React.Component<FileViewerProps>}\n */\nclass FileViewer extends Component {\n    /**\n     * @param {Readonly<FileViewerProps>} props\n     */\n    constructor(props) {\n        super(props);\n        const ext = Utils.getFileExtension(this.props.href);\n\n        this.state = {\n            text: null,\n            code: null,\n            ext,\n            editing: !!this.props.formatEditFile || false,\n            editingValue: null,\n            copyPossible: EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext),\n            forceUpdate: Date.now(),\n            changed: false,\n        };\n    }\n\n    readFile() {\n        if (this.props.href) {\n            const parts = this.props.href.split('/');\n            parts.splice(0, 2);\n            const adapter = parts[0];\n            const name = parts.splice(1).join('/');\n\n            this.props.socket.readFile(adapter, name)\n                .then(data => {\n                    if (data.file !== undefined) {\n                        data = data.file;\n                    }\n\n                    const newState = {copyPossible: this.state.copyPossible};\n                    // try to detect valid extension\n                    if (data.type === 'Buffer') {\n                        const ext = AdminUtils.detectMimeType(bufferToBase64(data.data));\n                        if (ext) {\n                            newState.ext = ext;\n                            newState.copyPossible = EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext);\n                        }\n                    }\n\n                    if (newState.copyPossible) {\n                        if (EXTENSIONS.txt.includes(this.state.ext)) {\n                            newState.text = data;\n                            newState.editingValue = data;\n                        } else if (EXTENSIONS.code.includes(this.state.ext)) {\n                            newState.code = data;\n                            newState.editingValue = data;\n                        }\n                    }\n\n                    this.setState(newState);\n                })\n                .catch(e => window.alert('Cannot read file: ' + e));\n        }\n    }\n\n    componentDidMount() {\n        this.readFile();\n\n        const parts = this.props.href.split('/');\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n\n        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);\n    }\n\n    componentWillUnmount() {\n        this.timeout && clearTimeout(this.timeout);\n        const parts = this.props.href.split('/');\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);\n    }\n\n    onFileChanged = (id, fileName, size) => {\n        if (!this.state.changed) {\n            this.timeout && clearTimeout(this.timeout);\n            this.timeout = setTimeout(() => {\n                this.timeout = null;\n                if (size === null) {\n                    window.alert('Show file was deleted!');\n                } else if (this.state.text !== null || this.state.code !== null) {\n                    this.readFile();\n                } else {\n                    this.setState({ forceUpdate: Date.now() });\n                }\n            }, 300);\n        }\n    };\n\n    writeFile64 = () => {\n        const parts = this.props.href.split('/');\n        const data = this.state.editingValue;\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n        this.props.socket.writeFile64(adapter, name, Buffer.from(data).toString('base64'))\n            .then(_ => this.props.onClose())\n            .catch(e => window.alert('Cannot write file: ' + e));\n    }\n\n    getEditFile(ext) {\n        switch (ext) {\n            case 'json':\n                return 'json';\n            case 'js':\n                return 'javascript';\n            case 'html':\n                return 'html';\n            case 'txt':\n                return 'html';\n            default:\n                return 'json';\n        }\n    }\n\n    getContent() {\n        if (EXTENSIONS.images.includes(this.state.ext)) {\n            return <img\n                onError={e => {\n                    e.target.onerror = null;\n                    e.target.src = NoImage;\n                }}\n                className={Utils.clsx(this.props.classes.img, this.props.getClassBackgroundImage())}\n                src={this.props.href + '?ts=' + this.state.forceUpdate}\n                alt={this.props.href}\n            />;\n        } else if (this.state.code !== null || this.state.text !== null || this.state.editing) {\n            return <TextField\n                variant=\"standard\"\n                className={ this.props.classes.textarea }\n                multiline\n                value={ this.state.editingValue || this.state.code || this.state.text }\n                onChange={newValue => this.setState({ editingValue: newValue, changed: true })}\n                InputProps={{ readOnly: !this.state.editing,}}\n            />;\n        }\n    }\n\n    render() {\n        return <Dialog\n            classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}\n            scroll=\"paper\"\n            open={!!this.props.href}\n            onClose={() => this.props.onClose()}\n            fullWidth={true}\n            maxWidth=\"xl\"\n            aria-labelledby=\"form-dialog-title\"\n        >\n            <div className={this.props.classes.dialogTitle}>\n                <DialogTitle id=\"form-dialog-title\">{this.props.t(this.state.editing ? 'Edit' : 'View') + ': ' + this.props.href}</DialogTitle>\n                {EXTENSIONS.images.includes(this.state.ext) && <div>\n                    <IconButton size=\"large\"\n                        color={'inherit'}\n                        onClick={this.props.setStateBackgroundImage}\n                    >\n                        <Brightness5Icon />\n                    </IconButton>\n                </div>\n                }\n            </div>\n            <DialogContent className={this.props.classes.content}>\n                {this.getContent()}\n            </DialogContent>\n            <DialogActions>\n                {this.state.copyPossible ?\n                    <Button\n                        color=\"grey\"\n                        onClick={e => Utils.copyToClipboard(this.state.text || this.state.code, e)}\n                        startIcon={<CopyIcon />}\n                    >\n                        {this.props.t('Copy content')}\n                    </Button> : null}\n                {this.state.editing ?\n                    <Button\n                        color=\"grey\"\n                        disabled={this.state.editingValue === this.state.code || this.state.editingValue === this.state.text}\n                        variant=\"contained\"\n                        onClick={this.writeFile64}\n                        startIcon={<SaveIcon />}\n                    >\n                        {this.props.t('Save')}\n                    </Button> : null}\n                <Button\n                    variant=\"contained\"\n                    onClick={() => this.props.onClose()}\n                    color=\"primary\"\n                    startIcon={<CloseIcon />}\n                >\n                    {this.props.t('Close')}\n                </Button>\n            </DialogActions>\n        </Dialog>;\n    }\n}\n\nFileViewer.propTypes = {\n    t: PropTypes.func,\n    lang: PropTypes.string,\n    expertMode: PropTypes.bool,\n    onClose: PropTypes.func,\n    href: PropTypes.string.isRequired,\n    supportSubscribes: PropTypes.bool,\n};\n\n/** @type {typeof FileViewer} */\nconst _export = withWidth()(withStyles(styles)(FileViewer));\nexport default _export;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;EAAA,OAAK;IACrBC,MAAM,EAAE;MACJC,MAAM,EAAE;IADJ,CADa;IAIrBC,KAAK,EAAE;MACHD,MAAM,EAAE;IADL,CAJc;IAOrBE,OAAO,EAAE;MACLC,SAAS,EAAE;IADN,CAPY;IAUrBC,QAAQ,EAAE;MACNC,KAAK,EAAE,MADD;MAENL,MAAM,EAAE;IAFF,CAVW;IAcrBM,GAAG,EAAE;MACDD,KAAK,EAAE,MADN;MAEDL,MAAM,EAAE,kBAFP;MAGDO,SAAS,EAAE;IAHV,CAdgB;IAmBrBC,WAAW,EAAE;MACTC,cAAc,EAAE,eADP;MAETC,OAAO,EAAE;IAFA;EAnBQ,CAAL;AAAA,CAApB;;AAyBO,IAAMC,UAAU,GAAG;EACtBC,MAAM,EAAE,CAAC,KAAD,EAAQ,KAAR,EAAe,KAAf,EAAsB,MAAtB,EAA8B,KAA9B,CADc;EAEtBC,IAAI,EAAI,CAAC,IAAD,EAAO,MAAP,EAAe,IAAf,CAFc;EAGtBC,GAAG,EAAK,CAAC,KAAD,EAAQ,KAAR,EAAe,MAAf,EAAuB,KAAvB,EAA8B,KAA9B;AAHc,CAAnB;;;AAMP,SAASC,cAAT,CAAwBC,MAAxB,EAAgC;EAC5B,IAAIC,MAAM,GAAG,EAAb;EACA,IAAIC,KAAK,GAAG,IAAIC,UAAJ,CAAeH,MAAf,CAAZ;EACA,IAAII,GAAG,GAAGF,KAAK,CAACG,UAAhB;;EACA,KAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGF,GAAJ,IAAWE,CAAC,GAAG,EAA/B,EAAmCA,CAAC,EAApC,EAAwC;IACpCL,MAAM,IAAIM,MAAM,CAACC,YAAP,CAAoBN,KAAK,CAACI,CAAD,CAAzB,CAAV;EACH;;EACD,OAAOG,MAAM,CAACC,IAAP,CAAYT,MAAZ,CAAP;AACH;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;IACMU,U;;;;;EACF;AACJ;AACA;EACI,oBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;IADe,kGA2EH,UAACC,EAAD,EAAKC,QAAL,EAAeC,IAAf,EAAwB;MACpC,IAAI,CAAC,MAAKC,KAAL,CAAWC,OAAhB,EAAyB;QACrB,MAAKC,OAAL,IAAgBC,YAAY,CAAC,MAAKD,OAAN,CAA5B;QACA,MAAKA,OAAL,GAAeE,UAAU,CAAC,YAAM;UAC5B,MAAKF,OAAL,GAAe,IAAf;;UACA,IAAIH,IAAI,KAAK,IAAb,EAAmB;YACfN,MAAM,CAACY,KAAP,CAAa,wBAAb;UACH,CAFD,MAEO,IAAI,MAAKL,KAAL,CAAWM,IAAX,KAAoB,IAApB,IAA4B,MAAKN,KAAL,CAAWnB,IAAX,KAAoB,IAApD,EAA0D;YAC7D,MAAK0B,QAAL;UACH,CAFM,MAEA;YACH,MAAKC,QAAL,CAAc;cAAEC,WAAW,EAAEC,IAAI,CAACC,GAAL;YAAf,CAAd;UACH;QACJ,CATwB,EAStB,GATsB,CAAzB;MAUH;IACJ,CAzFkB;IAAA,gGA2FL,YAAM;MAChB,IAAMC,KAAK,GAAG,MAAKhB,KAAL,CAAWiB,IAAX,CAAgBC,KAAhB,CAAsB,GAAtB,CAAd;;MACA,IAAMC,IAAI,GAAG,MAAKf,KAAL,CAAWgB,YAAxB;MACAJ,KAAK,CAACK,MAAN,CAAa,CAAb,EAAgB,CAAhB;MACA,IAAMC,OAAO,GAAGN,KAAK,CAAC,CAAD,CAArB;MACA,IAAMO,IAAI,GAAGP,KAAK,CAACK,MAAN,CAAa,CAAb,EAAgBG,IAAhB,CAAqB,GAArB,CAAb;;MACA,MAAKxB,KAAL,CAAWyB,MAAX,CAAkBC,WAAlB,CAA8BJ,OAA9B,EAAuCC,IAAvC,EAA6CI,MAAM,CAACC,IAAP,CAAYT,IAAZ,EAAkBU,QAAlB,CAA2B,QAA3B,CAA7C,EACKC,IADL,CACU,UAAAC,CAAC;QAAA,OAAI,MAAK/B,KAAL,CAAWgC,OAAX,EAAJ;MAAA,CADX,WAEW,UAAAC,CAAC;QAAA,OAAIpC,MAAM,CAACY,KAAP,CAAa,wBAAwBwB,CAArC,CAAJ;MAAA,CAFZ;IAGH,CApGkB;;IAEf,IAAMC,GAAG,GAAGC,iBAAA,CAAMC,gBAAN,CAAuB,MAAKpC,KAAL,CAAWiB,IAAlC,CAAZ;;IAEA,MAAKb,KAAL,GAAa;MACTM,IAAI,EAAE,IADG;MAETzB,IAAI,EAAE,IAFG;MAGTiD,GAAG,EAAHA,GAHS;MAITG,OAAO,EAAE,CAAC,CAAC,MAAKrC,KAAL,CAAWsC,cAAb,IAA+B,KAJ/B;MAKTlB,YAAY,EAAE,IALL;MAMTmB,YAAY,EAAExD,UAAU,CAACE,IAAX,CAAgBuD,QAAhB,CAAyBN,GAAzB,KAAiCnD,UAAU,CAACG,GAAX,CAAesD,QAAf,CAAwBN,GAAxB,CANtC;MAOTrB,WAAW,EAAEC,IAAI,CAACC,GAAL,EAPJ;MAQTV,OAAO,EAAE;IARA,CAAb;IAJe;EAclB;;;;WAED,oBAAW;MAAA;;MACP,IAAI,KAAKL,KAAL,CAAWiB,IAAf,EAAqB;QACjB,IAAMD,KAAK,GAAG,KAAKhB,KAAL,CAAWiB,IAAX,CAAgBC,KAAhB,CAAsB,GAAtB,CAAd;QACAF,KAAK,CAACK,MAAN,CAAa,CAAb,EAAgB,CAAhB;QACA,IAAMC,OAAO,GAAGN,KAAK,CAAC,CAAD,CAArB;QACA,IAAMO,IAAI,GAAGP,KAAK,CAACK,MAAN,CAAa,CAAb,EAAgBG,IAAhB,CAAqB,GAArB,CAAb;QAEA,KAAKxB,KAAL,CAAWyB,MAAX,CAAkBd,QAAlB,CAA2BW,OAA3B,EAAoCC,IAApC,EACKO,IADL,CACU,UAAAX,IAAI,EAAI;UACV,IAAIA,IAAI,CAACsB,IAAL,KAAcC,SAAlB,EAA6B;YACzBvB,IAAI,GAAGA,IAAI,CAACsB,IAAZ;UACH;;UAED,IAAME,QAAQ,GAAG;YAACJ,YAAY,EAAE,MAAI,CAACnC,KAAL,CAAWmC;UAA1B,CAAjB,CALU,CAMV;;UACA,IAAIpB,IAAI,CAACyB,IAAL,KAAc,QAAlB,EAA4B;YACxB,IAAMV,GAAG,GAAGW,UAAU,CAACC,cAAX,CAA0B3D,cAAc,CAACgC,IAAI,CAACA,IAAN,CAAxC,CAAZ;;YACA,IAAIe,GAAJ,EAAS;cACLS,QAAQ,CAACT,GAAT,GAAeA,GAAf;cACAS,QAAQ,CAACJ,YAAT,GAAwBxD,UAAU,CAACE,IAAX,CAAgBuD,QAAhB,CAAyBN,GAAzB,KAAiCnD,UAAU,CAACG,GAAX,CAAesD,QAAf,CAAwBN,GAAxB,CAAzD;YACH;UACJ;;UAED,IAAIS,QAAQ,CAACJ,YAAb,EAA2B;YACvB,IAAIxD,UAAU,CAACG,GAAX,CAAesD,QAAf,CAAwB,MAAI,CAACpC,KAAL,CAAW8B,GAAnC,CAAJ,EAA6C;cACzCS,QAAQ,CAACjC,IAAT,GAAgBS,IAAhB;cACAwB,QAAQ,CAACvB,YAAT,GAAwBD,IAAxB;YACH,CAHD,MAGO,IAAIpC,UAAU,CAACE,IAAX,CAAgBuD,QAAhB,CAAyB,MAAI,CAACpC,KAAL,CAAW8B,GAApC,CAAJ,EAA8C;cACjDS,QAAQ,CAAC1D,IAAT,GAAgBkC,IAAhB;cACAwB,QAAQ,CAACvB,YAAT,GAAwBD,IAAxB;YACH;UACJ;;UAED,MAAI,CAACP,QAAL,CAAc+B,QAAd;QACH,CA3BL,WA4BW,UAAAV,CAAC;UAAA,OAAIpC,MAAM,CAACY,KAAP,CAAa,uBAAuBwB,CAApC,CAAJ;QAAA,CA5BZ;MA6BH;IACJ;;;WAED,6BAAoB;MAChB,KAAKtB,QAAL;MAEA,IAAMK,KAAK,GAAG,KAAKhB,KAAL,CAAWiB,IAAX,CAAgBC,KAAhB,CAAsB,GAAtB,CAAd;MACAF,KAAK,CAACK,MAAN,CAAa,CAAb,EAAgB,CAAhB;MACA,IAAMC,OAAO,GAAGN,KAAK,CAAC,CAAD,CAArB;MACA,IAAMO,IAAI,GAAGP,KAAK,CAACK,MAAN,CAAa,CAAb,EAAgBG,IAAhB,CAAqB,GAArB,CAAb;MAEA,KAAKxB,KAAL,CAAW+C,iBAAX,IAAgC,KAAK/C,KAAL,CAAWyB,MAAX,CAAkBuB,cAAlB,CAAiC1B,OAAjC,EAA0CC,IAA1C,EAAgD,KAAK0B,aAArD,CAAhC;IACH;;;WAED,gCAAuB;MACnB,KAAK3C,OAAL,IAAgBC,YAAY,CAAC,KAAKD,OAAN,CAA5B;MACA,IAAMU,KAAK,GAAG,KAAKhB,KAAL,CAAWiB,IAAX,CAAgBC,KAAhB,CAAsB,GAAtB,CAAd;MACAF,KAAK,CAACK,MAAN,CAAa,CAAb,EAAgB,CAAhB;MACA,IAAMC,OAAO,GAAGN,KAAK,CAAC,CAAD,CAArB;MACA,IAAMO,IAAI,GAAGP,KAAK,CAACK,MAAN,CAAa,CAAb,EAAgBG,IAAhB,CAAqB,GAArB,CAAb;MACA,KAAKxB,KAAL,CAAW+C,iBAAX,IAAgC,KAAK/C,KAAL,CAAWyB,MAAX,CAAkBuB,cAAlB,CAAiC1B,OAAjC,EAA0CC,IAA1C,EAAgD,KAAK0B,aAArD,CAAhC;IACH;;;WA6BD,qBAAYf,GAAZ,EAAiB;MACb,QAAQA,GAAR;QACI,KAAK,MAAL;UACI,OAAO,MAAP;;QACJ,KAAK,IAAL;UACI,OAAO,YAAP;;QACJ,KAAK,MAAL;UACI,OAAO,MAAP;;QACJ,KAAK,KAAL;UACI,OAAO,MAAP;;QACJ;UACI,OAAO,MAAP;MAVR;IAYH;;;WAED,sBAAa;MAAA;;MACT,IAAInD,UAAU,CAACC,MAAX,CAAkBwD,QAAlB,CAA2B,KAAKpC,KAAL,CAAW8B,GAAtC,CAAJ,EAAgD;QAC5C,oBAAO;UACH,OAAO,EAAE,iBAAAD,CAAC,EAAI;YACVA,CAAC,CAACiB,MAAF,CAASC,OAAT,GAAmB,IAAnB;YACAlB,CAAC,CAACiB,MAAF,CAASE,GAAT,GAAeC,mBAAf;UACH,CAJE;UAKH,SAAS,EAAElB,iBAAA,CAAMmB,IAAN,CAAW,KAAKtD,KAAL,CAAWuD,OAAX,CAAmB7E,GAA9B,EAAmC,KAAKsB,KAAL,CAAWwD,uBAAX,EAAnC,CALR;UAMH,GAAG,EAAE,KAAKxD,KAAL,CAAWiB,IAAX,GAAkB,MAAlB,GAA2B,KAAKb,KAAL,CAAWS,WANxC;UAOH,GAAG,EAAE,KAAKb,KAAL,CAAWiB;QAPb,EAAP;MASH,CAVD,MAUO,IAAI,KAAKb,KAAL,CAAWnB,IAAX,KAAoB,IAApB,IAA4B,KAAKmB,KAAL,CAAWM,IAAX,KAAoB,IAAhD,IAAwD,KAAKN,KAAL,CAAWiC,OAAvE,EAAgF;QACnF,oBAAO,gCAAC,qBAAD;UACH,OAAO,EAAC,UADL;UAEH,SAAS,EAAG,KAAKrC,KAAL,CAAWuD,OAAX,CAAmB/E,QAF5B;UAGH,SAAS,MAHN;UAIH,KAAK,EAAG,KAAK4B,KAAL,CAAWgB,YAAX,IAA2B,KAAKhB,KAAL,CAAWnB,IAAtC,IAA8C,KAAKmB,KAAL,CAAWM,IAJ9D;UAKH,QAAQ,EAAE,kBAAA+C,QAAQ;YAAA,OAAI,MAAI,CAAC7C,QAAL,CAAc;cAAEQ,YAAY,EAAEqC,QAAhB;cAA0BpD,OAAO,EAAE;YAAnC,CAAd,CAAJ;UAAA,CALf;UAMH,UAAU,EAAE;YAAEqD,QAAQ,EAAE,CAAC,KAAKtD,KAAL,CAAWiC;UAAxB;QANT,EAAP;MAQH;IACJ;;;WAED,kBAAS;MAAA;;MACL,oBAAO,gCAAC,kBAAD;QACH,OAAO,EAAE;UAAEsB,WAAW,EAAE,KAAK3D,KAAL,CAAWuD,OAAX,CAAmBpF,MAAlC;UAA0CE,KAAK,EAAE,KAAK2B,KAAL,CAAWuD,OAAX,CAAmBlF;QAApE,CADN;QAEH,MAAM,EAAC,OAFJ;QAGH,IAAI,EAAE,CAAC,CAAC,KAAK2B,KAAL,CAAWiB,IAHhB;QAIH,OAAO,EAAE;UAAA,OAAM,MAAI,CAACjB,KAAL,CAAWgC,OAAX,EAAN;QAAA,CAJN;QAKH,SAAS,EAAE,IALR;QAMH,QAAQ,EAAC,IANN;QAOH,mBAAgB;MAPb,gBASH;QAAK,SAAS,EAAE,KAAKhC,KAAL,CAAWuD,OAAX,CAAmB3E;MAAnC,gBACI,gCAAC,uBAAD;QAAa,EAAE,EAAC;MAAhB,GAAqC,KAAKoB,KAAL,CAAW4D,CAAX,CAAa,KAAKxD,KAAL,CAAWiC,OAAX,GAAqB,MAArB,GAA8B,MAA3C,IAAqD,IAArD,GAA4D,KAAKrC,KAAL,CAAWiB,IAA5G,CADJ,EAEKlC,UAAU,CAACC,MAAX,CAAkBwD,QAAlB,CAA2B,KAAKpC,KAAL,CAAW8B,GAAtC,kBAA8C,0DAC3C,gCAAC,oBAAD;QAAY,IAAI,EAAC,OAAjB;QACI,KAAK,EAAE,SADX;QAEI,OAAO,EAAE,KAAKlC,KAAL,CAAW6D;MAFxB,gBAII,gCAAC,sBAAD,OAJJ,CAD2C,CAFnD,CATG,eAqBH,gCAAC,yBAAD;QAAe,SAAS,EAAE,KAAK7D,KAAL,CAAWuD,OAAX,CAAmBjF;MAA7C,GACK,KAAKwF,UAAL,EADL,CArBG,eAwBH,gCAAC,yBAAD,QACK,KAAK1D,KAAL,CAAWmC,YAAX,gBACG,gCAAC,kBAAD;QACI,KAAK,EAAC,MADV;QAEI,OAAO,EAAE,iBAAAN,CAAC;UAAA,OAAIE,iBAAA,CAAM4B,eAAN,CAAsB,MAAI,CAAC3D,KAAL,CAAWM,IAAX,IAAmB,MAAI,CAACN,KAAL,CAAWnB,IAApD,EAA0DgD,CAA1D,CAAJ;QAAA,CAFd;QAGI,SAAS,eAAE,gCAAC,UAAD;MAHf,GAKK,KAAKjC,KAAL,CAAW4D,CAAX,CAAa,cAAb,CALL,CADH,GAOe,IARpB,EASK,KAAKxD,KAAL,CAAWiC,OAAX,gBACG,gCAAC,kBAAD;QACI,KAAK,EAAC,MADV;QAEI,QAAQ,EAAE,KAAKjC,KAAL,CAAWgB,YAAX,KAA4B,KAAKhB,KAAL,CAAWnB,IAAvC,IAA+C,KAAKmB,KAAL,CAAWgB,YAAX,KAA4B,KAAKhB,KAAL,CAAWM,IAFpG;QAGI,OAAO,EAAC,WAHZ;QAII,OAAO,EAAE,KAAKgB,WAJlB;QAKI,SAAS,eAAE,gCAAC,gBAAD;MALf,GAOK,KAAK1B,KAAL,CAAW4D,CAAX,CAAa,MAAb,CAPL,CADH,GASe,IAlBpB,eAmBI,gCAAC,kBAAD;QACI,OAAO,EAAC,WADZ;QAEI,OAAO,EAAE;UAAA,OAAM,MAAI,CAAC5D,KAAL,CAAWgC,OAAX,EAAN;QAAA,CAFb;QAGI,KAAK,EAAC,SAHV;QAII,SAAS,eAAE,gCAAC,iBAAD;MAJf,GAMK,KAAKhC,KAAL,CAAW4D,CAAX,CAAa,OAAb,CANL,CAnBJ,CAxBG,CAAP;IAqDH;;;EAtMoBI,gB;;AAyMzBjE,UAAU,CAACkE,SAAX,GAAuB;EACnBL,CAAC,EAAEM,qBAAA,CAAUC,IADM;EAEnBC,IAAI,EAAEF,qBAAA,CAAUG,MAFG;EAGnBC,UAAU,EAAEJ,qBAAA,CAAUK,IAHH;EAInBvC,OAAO,EAAEkC,qBAAA,CAAUC,IAJA;EAKnBlD,IAAI,EAAEiD,qBAAA,CAAUG,MAAV,CAAiBG,UALJ;EAMnBzB,iBAAiB,EAAEmB,qBAAA,CAAUK;AANV,CAAvB;AASA;;AACA,IAAME,OAAO,GAAG,IAAAC,qBAAA,IAAY,IAAAC,kBAAA,EAAW1G,MAAX,EAAmB8B,UAAnB,CAAZ,CAAhB;;eACe0E,O"}
+{"version":3,"file":"FileViewer.js","names":["styles","theme","dialog","height","paper","content","textAlign","textarea","width","img","objectFit","dialogTitle","justifyContent","display","EXTENSIONS","images","code","txt","bufferToBase64","buffer","binary","bytes","Uint8Array","len","byteLength","i","String","fromCharCode","window","btoa","FileViewer","props","id","fileName","size","state","changed","timeout","clearTimeout","setTimeout","alert","text","readFile","setState","forceUpdate","Date","now","parts","href","split","data","editingValue","splice","adapter","name","join","socket","writeFile64","Buffer","from","toString","then","_","onClose","e","ext","Utils","getFileExtension","editing","formatEditFile","copyPossible","includes","imgError","file","undefined","newState","type","AdminUtils","detectMimeType","supportSubscribes","subscribeFiles","onFileChanged","clsx","classes","getClassBackgroundImage","target","onerror","newValue","readOnly","scrollPaper","t","setStateBackgroundImage","getContent","copyToClipboard","Component","propTypes","PropTypes","func","lang","string","expertMode","bool","isRequired","_export","withWidth","withStyles"],"sources":["FileViewer.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { withStyles } from '@mui/styles';\nimport withWidth from './withWidth';\nimport PropTypes from 'prop-types';\n\nimport TextField from '@mui/material/TextField';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport { IconButton } from '@mui/material';\n\nimport IconNoIcon from '../icons/IconNoIcon';\nimport Utils from './Utils';\n\n// Icons\nimport { FaCopy as CopyIcon } from 'react-icons/fa';\nimport Brightness5Icon from '@mui/icons-material/Brightness6';\nimport CloseIcon from '@mui/icons-material/Close';\nimport SaveIcon from '@mui/icons-material/Save';\n\nconst styles = theme => ({\n    dialog: {\n        height: '100%',\n    },\n    paper: {\n        height: 'calc(100% - 64px)',\n    },\n    content: {\n        textAlign: 'center',\n    },\n    textarea: {\n        width: '100%',\n        height: '100%',\n    },\n    img: {\n        width: 'auto',\n        height: 'calc(100% - 5px)',\n        objectFit: 'contain',\n    },\n    dialogTitle: {\n        justifyContent: 'space-between',\n        display: 'flex'\n    }\n});\n\nexport const EXTENSIONS = {\n    images: ['png', 'jpg', 'svg', 'jpeg', 'bmp'],\n    code:   ['js', 'json', 'md'],\n    txt:    ['log', 'txt', 'html', 'css', 'xml'],\n};\n\nfunction bufferToBase64(buffer) {\n    let binary = '';\n    let bytes = new Uint8Array(buffer);\n    let len = bytes.byteLength;\n    for (let i = 0; i < len && i < 50; i++) {\n        binary += String.fromCharCode(bytes[i]);\n    }\n    return window.btoa(binary);\n}\n\n/**\n * @typedef {object} FileViewerProps\n * @property {string} [key] The key to identify this component.\n * @property {import('../types').Translator} t Translation function\n * @property {ioBroker.Languages} [lang] The selected language.\n * @property {boolean} [expertMode] Is expert mode enabled? (default: false)\n * @property {() => void} onClose Callback when the viewer is closed.\n * @property {string} href The URL to the file to be displayed.\n *\n * @extends {React.Component<FileViewerProps>}\n */\nclass FileViewer extends Component {\n    /**\n     * @param {Readonly<FileViewerProps>} props\n     */\n    constructor(props) {\n        super(props);\n        const ext = Utils.getFileExtension(this.props.href);\n\n        this.state = {\n            text: null,\n            code: null,\n            ext,\n            editing: !!this.props.formatEditFile || false,\n            editingValue: null,\n            copyPossible: EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext),\n            forceUpdate: Date.now(),\n            changed: false,\n            imgError: false,\n        };\n    }\n\n    readFile() {\n        if (this.props.href) {\n            const parts = this.props.href.split('/');\n            parts.splice(0, 2);\n            const adapter = parts[0];\n            const name = parts.splice(1).join('/');\n\n            this.props.socket.readFile(adapter, name)\n                .then(data => {\n                    if (data.file !== undefined) {\n                        data = data.file;\n                    }\n\n                    const newState = {copyPossible: this.state.copyPossible};\n                    // try to detect valid extension\n                    if (data.type === 'Buffer') {\n                        const ext = AdminUtils.detectMimeType(bufferToBase64(data.data));\n                        if (ext) {\n                            newState.ext = ext;\n                            newState.copyPossible = EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext);\n                        }\n                    }\n\n                    if (newState.copyPossible) {\n                        if (EXTENSIONS.txt.includes(this.state.ext)) {\n                            newState.text = data;\n                            newState.editingValue = data;\n                        } else if (EXTENSIONS.code.includes(this.state.ext)) {\n                            newState.code = data;\n                            newState.editingValue = data;\n                        }\n                    }\n\n                    this.setState(newState);\n                })\n                .catch(e => window.alert('Cannot read file: ' + e));\n        }\n    }\n\n    componentDidMount() {\n        this.readFile();\n\n        const parts = this.props.href.split('/');\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n\n        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);\n    }\n\n    componentWillUnmount() {\n        this.timeout && clearTimeout(this.timeout);\n        const parts = this.props.href.split('/');\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);\n    }\n\n    onFileChanged = (id, fileName, size) => {\n        if (!this.state.changed) {\n            this.timeout && clearTimeout(this.timeout);\n            this.timeout = setTimeout(() => {\n                this.timeout = null;\n                if (size === null) {\n                    window.alert('Show file was deleted!');\n                } else if (this.state.text !== null || this.state.code !== null) {\n                    this.readFile();\n                } else {\n                    this.setState({ forceUpdate: Date.now() });\n                }\n            }, 300);\n        }\n    };\n\n    writeFile64 = () => {\n        const parts = this.props.href.split('/');\n        const data = this.state.editingValue;\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n        this.props.socket.writeFile64(adapter, name, Buffer.from(data).toString('base64'))\n            .then(_ => this.props.onClose())\n            .catch(e => window.alert('Cannot write file: ' + e));\n    }\n\n    getEditFile(ext) {\n        switch (ext) {\n            case 'json':\n                return 'json';\n            case 'js':\n                return 'javascript';\n            case 'html':\n                return 'html';\n            case 'txt':\n                return 'html';\n            default:\n                return 'json';\n        }\n    }\n\n    getContent() {\n        if (EXTENSIONS.images.includes(this.state.ext)) {\n            if (this.state.imgError) {\n                return <IconNoIcon className={Utils.clsx(this.props.classes.img, this.props.getClassBackgroundImage())} />;\n            } else {\n                return <img\n                    onError={e => {\n                        e.target.onerror = null;\n                        this.setState({ imgError: true });\n                    }}\n                    className={Utils.clsx(this.props.classes.img, this.props.getClassBackgroundImage())}\n                    src={this.props.href + '?ts=' + this.state.forceUpdate}\n                    alt={this.props.href}\n                />;\n            }\n        } else if (this.state.code !== null || this.state.text !== null || this.state.editing) {\n            return <TextField\n                variant=\"standard\"\n                className={ this.props.classes.textarea }\n                multiline\n                value={ this.state.editingValue || this.state.code || this.state.text }\n                onChange={newValue => this.setState({ editingValue: newValue, changed: true })}\n                InputProps={{ readOnly: !this.state.editing,}}\n            />;\n        }\n    }\n\n    render() {\n        return <Dialog\n            classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}\n            scroll=\"paper\"\n            open={!!this.props.href}\n            onClose={() => this.props.onClose()}\n            fullWidth={true}\n            maxWidth=\"xl\"\n            aria-labelledby=\"form-dialog-title\"\n        >\n            <div className={this.props.classes.dialogTitle}>\n                <DialogTitle id=\"form-dialog-title\">{this.props.t(this.state.editing ? 'Edit' : 'View') + ': ' + this.props.href}</DialogTitle>\n                {EXTENSIONS.images.includes(this.state.ext) && <div>\n                    <IconButton size=\"large\"\n                        color={'inherit'}\n                        onClick={this.props.setStateBackgroundImage}\n                    >\n                        <Brightness5Icon />\n                    </IconButton>\n                </div>\n                }\n            </div>\n            <DialogContent className={this.props.classes.content}>\n                {this.getContent()}\n            </DialogContent>\n            <DialogActions>\n                {this.state.copyPossible ?\n                    <Button\n                        color=\"grey\"\n                        onClick={e => Utils.copyToClipboard(this.state.text || this.state.code, e)}\n                        startIcon={<CopyIcon />}\n                    >\n                        {this.props.t('Copy content')}\n                    </Button> : null}\n                {this.state.editing ?\n                    <Button\n                        color=\"grey\"\n                        disabled={this.state.editingValue === this.state.code || this.state.editingValue === this.state.text}\n                        variant=\"contained\"\n                        onClick={this.writeFile64}\n                        startIcon={<SaveIcon />}\n                    >\n                        {this.props.t('Save')}\n                    </Button> : null}\n                <Button\n                    variant=\"contained\"\n                    onClick={() => this.props.onClose()}\n                    color=\"primary\"\n                    startIcon={<CloseIcon />}\n                >\n                    {this.props.t('Close')}\n                </Button>\n            </DialogActions>\n        </Dialog>;\n    }\n}\n\nFileViewer.propTypes = {\n    t: PropTypes.func,\n    lang: PropTypes.string,\n    expertMode: PropTypes.bool,\n    onClose: PropTypes.func,\n    href: PropTypes.string.isRequired,\n    supportSubscribes: PropTypes.bool,\n};\n\n/** @type {typeof FileViewer} */\nconst _export = withWidth()(withStyles(styles)(FileViewer));\nexport default _export;\n"],"mappings":"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"}

package/Components/Image.js

@@ -23,7 +23,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _no_icon = _interopRequireDefault(require("../assets/no_icon.svg"));
+var _IconNoIcon = _interopRequireDefault(require("../icons/IconNoIcon"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -149,18 +149,24 @@ var Image = /*#__PURE__*/function (_React$Component) {
 
         return this.svg;
       } else if (this.state.src) {
-        return /*#__PURE__*/_react["default"].createElement("img", {
-          className: this.props.className,
-          src: this.state.imgError ? _no_icon["default"] : (this.props.imagePrefix || '') + this.state.src || _no_icon["default"],
-          alt: "",
-          onError: function onError() {
-            return _this2.props.showError ? _this2.setState({
-              imgError: true
-            }) : _this2.setState({
-              src: ''
-            });
-          }
-        });
+        if (this.state.imgError || !this.state.src) {
+          return /*#__PURE__*/_react["default"].createElement(_IconNoIcon["default"], {
+            className: this.props.className
+          });
+        } else {
+          return /*#__PURE__*/_react["default"].createElement("img", {
+            className: this.props.className,
+            src: (this.props.imagePrefix || '') + this.state.src,
+            alt: "",
+            onError: function onError() {
+              return _this2.props.showError ? _this2.setState({
+                imgError: true
+              }) : _this2.setState({
+                src: ''
+              });
+            }
+          });
+        }
       } else {
         return null;
       }

package/Components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["getElementFromSource","src","svgContainer","document","createElement","innerHTML","svg","firstElementChild","remove","removeChild","serializeAttrs","map","ret","prop","i","length","key","name","startsWith","replace","g","toUpperCase","value","Image","props","state","created","color","imgError","showError","getSvgFromData","len","substring","atob","inner","svgProps","attributes","className","__html","e","setTimeout","setState","IconNoIcon","imagePrefix","newState","changed","React","Component","propTypes","PropTypes","string","isRequired"],"sources":["Image.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport IconNoIcon from '../assets/no_icon.svg';\n\nfunction getElementFromSource(src) {\n    const svgContainer = document.createElement('div');\n    svgContainer.innerHTML = src;\n    const svg = svgContainer.firstElementChild;\n    if (svg.remove) {\n        svg.remove();\n    } else {\n        svgContainer.removeChild(svg);\n    }\n    svgContainer.remove();\n    return svg;\n}\n\nfunction serializeAttrs(map) {\n    const ret = {};\n    for (let prop, i = 0; i < map.length; i++) {\n        const key = map[i].name;\n        if (key === 'class') {\n            prop = 'className';\n        }\n        else if (!key.startsWith('data-')) {\n            prop = key.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());\n        } else {\n            prop = key;\n        }\n\n        ret[prop] = map[i].value;\n    }\n    return ret;\n}\n\n/**\n * @typedef {object} ImageProps\n * @property {string} [key] The key to identify this component.\n * @property {string} [color] The color.\n * @property {string} [src] The source of the image.\n * @property {string} [imagePrefix] The image prefix (default: './files/')\n * @property {string} [className] The CSS class name.\n * @property {boolean} [showError] Show image errors (or just show no image)?\n *\n * @extends {React.Component<ImageProps>}\n */\nclass Image extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            svg: !!(this.props.src && this.props.src.startsWith('data:')),\n            created: true,\n            color: this.props.color || '',\n            src: this.props.src || '',\n            imgError: false,\n            showError: this.props.showError,\n        };\n\n        this.svg = this.state.svg ? this.getSvgFromData(this.state.src) : null;\n    }\n\n    static getDerivedStateFromProps(props, state) {\n        const newState = {};\n        let changed = false;\n\n        if (props && state && props.src !== state.src) {\n            newState.src = props.src;\n            newState.svg = props.src && props.src.startsWith('data:');\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.color !== state.color) {\n            newState.color = props.color;\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.showError !== state.showError) {\n            newState.showError = props.showError;\n            changed = true;\n        }\n\n        return changed ? newState : null;\n    }\n\n    getSvgFromData(src) {\n        const len = 'data:image/svg+xml;base64,';\n        if (!src.startsWith(len)) {\n            return null;\n        }\n        src = src.substring(len.length);\n        try {\n            src = atob(src);\n            const svg = getElementFromSource(src);\n            const inner = svg.innerHTML;\n            const svgProps = serializeAttrs(svg.attributes || []);\n\n            svg.remove();\n\n            return <svg\n                className={this.props.className}\n                style={this.state.color ? {color: this.state.color} : {}}\n                {...svgProps}\n                dangerouslySetInnerHTML={{ __html: inner }}\n            />;\n        } catch (e) {\n\n        }\n        return null;\n    }\n\n    render() {\n        if (this.state.svg) {\n            if (!this.state.created) {\n                setTimeout(() => {\n                    this.svg = this.getSvgFromData(this.state.src);\n                    this.setState({created: true});\n                }, 50);\n            }\n\n            return this.svg;\n        } else if (this.state.src) {\n            return <img\n                className={this.props.className}\n                src={this.state.imgError ? IconNoIcon : (this.props.imagePrefix || '') + this.state.src || IconNoIcon}\n                alt=\"\"\n                onError={() => this.props.showError ? this.setState({imgError: true}) : this.setState({src: ''})}\n            />;\n        } else {\n            return null;\n        }\n    }\n}\n\nImage.propTypes = {\n    color: PropTypes.string,\n    src: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    imagePrefix: PropTypes.string,\n};\n\nexport default Image;"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["getElementFromSource","src","svgContainer","document","createElement","innerHTML","svg","firstElementChild","remove","removeChild","serializeAttrs","map","ret","prop","i","length","key","name","startsWith","replace","g","toUpperCase","value","Image","props","state","created","color","imgError","showError","getSvgFromData","len","substring","atob","inner","svgProps","attributes","className","__html","e","setTimeout","setState","imagePrefix","newState","changed","React","Component","propTypes","PropTypes","string","isRequired"],"sources":["Image.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport IconNoIcon from '../icons/IconNoIcon';\n\nfunction getElementFromSource(src) {\n    const svgContainer = document.createElement('div');\n    svgContainer.innerHTML = src;\n    const svg = svgContainer.firstElementChild;\n    if (svg.remove) {\n        svg.remove();\n    } else {\n        svgContainer.removeChild(svg);\n    }\n\n    svgContainer.remove();\n    return svg;\n}\n\nfunction serializeAttrs(map) {\n    const ret = {};\n    for (let prop, i = 0; i < map.length; i++) {\n        const key = map[i].name;\n        if (key === 'class') {\n            prop = 'className';\n        }\n        else if (!key.startsWith('data-')) {\n            prop = key.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());\n        } else {\n            prop = key;\n        }\n\n        ret[prop] = map[i].value;\n    }\n    return ret;\n}\n\n/**\n * @typedef {object} ImageProps\n * @property {string} [key] The key to identify this component.\n * @property {string} [color] The color.\n * @property {string} [src] The source of the image.\n * @property {string} [imagePrefix] The image prefix (default: './files/')\n * @property {string} [className] The CSS class name.\n * @property {boolean} [showError] Show image errors (or just show no image)?\n *\n * @extends {React.Component<ImageProps>}\n */\nclass Image extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            svg: !!(this.props.src && this.props.src.startsWith('data:')),\n            created: true,\n            color: this.props.color || '',\n            src: this.props.src || '',\n            imgError: false,\n            showError: this.props.showError,\n        };\n\n        this.svg = this.state.svg ? this.getSvgFromData(this.state.src) : null;\n    }\n\n    static getDerivedStateFromProps(props, state) {\n        const newState = {};\n        let changed = false;\n\n        if (props && state && props.src !== state.src) {\n            newState.src = props.src;\n            newState.svg = props.src && props.src.startsWith('data:');\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.color !== state.color) {\n            newState.color = props.color;\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.showError !== state.showError) {\n            newState.showError = props.showError;\n            changed = true;\n        }\n\n        return changed ? newState : null;\n    }\n\n    getSvgFromData(src) {\n        const len = 'data:image/svg+xml;base64,';\n        if (!src.startsWith(len)) {\n            return null;\n        }\n        src = src.substring(len.length);\n        try {\n            src = atob(src);\n            const svg = getElementFromSource(src);\n            const inner = svg.innerHTML;\n            const svgProps = serializeAttrs(svg.attributes || []);\n\n            svg.remove();\n\n            return <svg\n                className={this.props.className}\n                style={this.state.color ? {color: this.state.color} : {}}\n                {...svgProps}\n                dangerouslySetInnerHTML={{ __html: inner }}\n            />;\n        } catch (e) {\n\n        }\n        return null;\n    }\n\n    render() {\n        if (this.state.svg) {\n            if (!this.state.created) {\n                setTimeout(() => {\n                    this.svg = this.getSvgFromData(this.state.src);\n                    this.setState({created: true});\n                }, 50);\n            }\n\n            return this.svg;\n        } else if (this.state.src) {\n            if (this.state.imgError || !this.state.src) {\n                return <IconNoIcon className={this.props.className} />;\n            } else {\n                return <img\n                    className={this.props.className}\n                    src={(this.props.imagePrefix || '') + this.state.src}\n                    alt=\"\"\n                    onError={() => this.props.showError ? this.setState({imgError: true}) : this.setState({src: ''})}\n                />;\n            }\n        } else {\n            return null;\n        }\n    }\n}\n\nImage.propTypes = {\n    color: PropTypes.string,\n    src: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    imagePrefix: PropTypes.string,\n};\n\nexport default Image;"],"mappings":"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"}

package/Components/JsonConfigComponent/ConfigCustom.js

@@ -29,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
 
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -95,7 +97,7 @@ var ConfigCustom = /*#__PURE__*/function (_Component) {
               case 7:
                 component = _context.sent;
 
-                if (!component || !!component["default"] || !component["default"][this.props.schema.name]) {
+                if (!component || !component["default"] || !component["default"][this.props.schema.name]) {
                   keys = Object.keys((component === null || component === void 0 ? void 0 : component["default"]) || {});
                   console.error('URL is empty. Cannot load custom component!');
                   this.setState({
@@ -124,13 +126,38 @@ var ConfigCustom = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var Component = this.state.Component;
+      var Component = this.state.Component; // render temporary placeholder
 
       if (!Component) {
         if (this.state.error) {
-          return /*#__PURE__*/_react["default"].createElement("div", null, this.state.error);
+          return;
         } else {
-          return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], null);
+          var schema = this.props.schema || {};
+
+          var item = /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+            item: true,
+            xs: schema.xs || undefined,
+            lg: schema.lg || undefined,
+            md: schema.md || undefined,
+            sm: schema.sm || undefined,
+            style: Object.assign({}, {
+              marginBottom: 0,
+              //marginRight: 8,
+              textAlign: 'left',
+              width: schema.type === 'divider' || schema.type === 'header' ? schema.width || '100%' : undefined
+            }, schema.style, this.props.themeType === 'dark' ? schema.darkStyle : {})
+          }, this.state.error ? /*#__PURE__*/_react["default"].createElement("div", null, this.state.error) : /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], null));
+
+          if (schema.newLine) {
+            return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+              style: {
+                flexBasis: '100%',
+                height: 0
+              }
+            }), item);
+          } else {
+            return item;
+          }
         }
       }
 

package/Components/JsonConfigComponent/ConfigCustom.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigCustom.js","names":["ConfigCustom","props","state","Component","error","schema","url","console","setState","startsWith","window","_customComponent","location","protocol","host","replace","component","name","keys","Object","join","propTypes","socket","PropTypes","object","isRequired","themeType","string","themeName","style","className","data","onError","func","onChange"],"sources":["JsonConfigComponent/ConfigCustom.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport LinearProgress from \"@mui/material/LinearProgress\";\n\nclass ConfigCustom extends Component {\n    constructor(props) {\n        super(props);\n        // schema.url - location of Widget\n        // schema.name - Component name\n\n        this.state = {\n            Component: null,\n            error: '',\n        };\n    }\n\n    // load component dynamically\n    async componentDidMount() {\n        if (!this.props.schema.url) {\n            console.error('URL is empty. Cannot load custom component!');\n            this.setState({ error: 'URL is empty. Cannot load custom component!' });\n            return;\n        }\n\n        if (this.props.schema.url.startsWith('http:') || this.props.schema.url.startsWith('https:')) {\n            window._customComponent = this.props.schema.url;\n        } else if (this.props.schema.url.startsWith('./')) {\n            window._customComponent = `${window.location.protocol}//${window.location.host}${this.props.schema.url.replace(/^\\./, '')}`;\n        } else {\n            window._customComponent = `${window.location.protocol}//${window.location.host}/${this.props.schema.url}`;\n        }\n\n        // custom component always has constant name\n        const component = await import('CustomComponent/Components');\n\n        if (!component || !!component.default || !component.default[this.props.schema.name]) {\n            const keys = Object.keys(component?.default || {});\n            console.error('URL is empty. Cannot load custom component!');\n            this.setState({ error: `Component ${this.props.schema.name} not found in ${this.props.schema.url}. Found: ${keys.join(', ')}` });\n        } else {\n            this.setState({\n                Component: component.default[this.props.schema.name]\n            });\n        }\n    }\n\n    render() {\n        const Component = this.state.Component;\n        if (!Component) {\n            if (this.state.error) {\n                return <div>{this.state.error}</div>;\n            } else {\n                return <LinearProgress />;\n            }\n        }\n\n        return <Component {...this.props} />;\n    }\n}\n\nConfigCustom.propTypes = {\n    socket: PropTypes.object.isRequired,\n    themeType: PropTypes.string,\n    themeName: PropTypes.string,\n    style: PropTypes.object,\n    className: PropTypes.string,\n    data: PropTypes.object.isRequired,\n    schema: PropTypes.object,\n    onError: PropTypes.func,\n    onChange: PropTypes.func,\n};\n\nexport default ConfigCustom;"],"mappings":"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"}
+{"version":3,"file":"ConfigCustom.js","names":["ConfigCustom","props","state","Component","error","schema","url","console","setState","startsWith","window","_customComponent","location","protocol","host","replace","component","name","keys","Object","join","item","xs","undefined","lg","md","sm","assign","marginBottom","textAlign","width","type","style","themeType","darkStyle","newLine","flexBasis","height","propTypes","socket","PropTypes","object","isRequired","string","themeName","className","data","onError","func","onChange"],"sources":["JsonConfigComponent/ConfigCustom.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport LinearProgress from '@mui/material/LinearProgress';\nimport Grid from '@mui/material/Grid';\n\nclass ConfigCustom extends Component {\n    constructor(props) {\n        super(props);\n        // schema.url - location of Widget\n        // schema.name - Component name\n\n        this.state = {\n            Component: null,\n            error: '',\n        };\n    }\n\n    // load component dynamically\n    async componentDidMount() {\n        if (!this.props.schema.url) {\n            console.error('URL is empty. Cannot load custom component!');\n            this.setState({ error: 'URL is empty. Cannot load custom component!' });\n            return;\n        }\n\n        if (this.props.schema.url.startsWith('http:') || this.props.schema.url.startsWith('https:')) {\n            window._customComponent = this.props.schema.url;\n        } else if (this.props.schema.url.startsWith('./')) {\n            window._customComponent = `${window.location.protocol}//${window.location.host}${this.props.schema.url.replace(/^\\./, '')}`;\n        } else {\n            window._customComponent = `${window.location.protocol}//${window.location.host}/${this.props.schema.url}`;\n        }\n\n        // custom component always has constant name\n        const component = await import('CustomComponent/Components');\n\n        if (!component || !component.default || !component.default[this.props.schema.name]) {\n            const keys = Object.keys(component?.default || {});\n            console.error('URL is empty. Cannot load custom component!');\n            this.setState({ error: `Component ${this.props.schema.name} not found in ${this.props.schema.url}. Found: ${keys.join(', ')}` });\n        } else {\n            this.setState({\n                Component: component.default[this.props.schema.name]\n            });\n        }\n    }\n\n    render() {\n        const Component = this.state.Component;\n\n        // render temporary placeholder\n        if (!Component) {\n            if (this.state.error) {\n                return ;\n            } else {\n                const schema = this.props.schema || {};\n\n                const item = <Grid\n                    item\n                    xs={schema.xs || undefined}\n                    lg={schema.lg || undefined}\n                    md={schema.md || undefined}\n                    sm={schema.sm || undefined}\n                    style={Object.assign({}, {\n                        marginBottom: 0,\n                        //marginRight: 8,\n                        textAlign: 'left',\n                        width: schema.type === 'divider' || schema.type === 'header' ? schema.width || '100%' : undefined\n                    }, schema.style, this.props.themeType === 'dark' ? schema.darkStyle : {})}>\n                    {this.state.error ? <div>{this.state.error}</div> : <LinearProgress />}\n                </Grid>;\n\n                if (schema.newLine) {\n                    return <>\n                        <div style={{ flexBasis: '100%', height: 0 }} />\n                        {item}\n                    </>;\n                } else {\n                    return item;\n                }\n            }\n        }\n\n        return <Component {...this.props} />;\n    }\n}\n\nConfigCustom.propTypes = {\n    socket: PropTypes.object.isRequired,\n    themeType: PropTypes.string,\n    themeName: PropTypes.string,\n    style: PropTypes.object,\n    className: PropTypes.string,\n    data: PropTypes.object.isRequired,\n    schema: PropTypes.object,\n    onError: PropTypes.func,\n    onChange: PropTypes.func,\n};\n\nexport default ConfigCustom;"],"mappings":"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"}

package/Components/Loaders/PT.js

@@ -28,13 +28,13 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 /**
- * @typedef {object} LoaderProps
+ * @typedef {object} LoaderPTProps
  * @property {string} [key] The key to identify this component.
  * @property {number} [size] The size in pixels of this loader.
  * @property {string} [themeType] The chosen theme type.
  * @property {string} [theme] The chosen theme.
  *
- * @extends {React.Component<LoaderProps>}
+ * @extends {React.Component<LoaderPTProps>}
  */
 var LoaderPT = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(LoaderPT, _React$Component);
@@ -42,7 +42,7 @@ var LoaderPT = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(LoaderPT);
 
   /**
-   * @param {LoaderProps} props
+   * @param {LoaderPTProps} props
    */
   function LoaderPT(props) {
     var _this;

package/Components/Loaders/PT.js.map

@@ -1 +1 @@
-{"version":3,"file":"PT.js","names":["LoaderPT","props","size","theme","themeType","width","height","React","Component","propTypes","PropTypes","number","string","_export"],"sources":["Loaders/PT.js"],"sourcesContent":["/**\n * Copyright 2021-2022 ioBroker GmbH\n *\n * MIT License\n *\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport './PT.css'\n\n/**\n * @typedef {object} LoaderProps\n * @property {string} [key] The key to identify this component.\n * @property {number} [size] The size in pixels of this loader.\n * @property {string} [themeType] The chosen theme type.\n * @property {string} [theme] The chosen theme.\n *\n * @extends {React.Component<LoaderProps>}\n */\nclass LoaderPT extends React.Component {\n    /**\n     * @param {LoaderProps} props\n     */\n    constructor(props) {\n        super(props);\n        this.size = this.props.size || 200;\n    }\n\n    render() {\n        const theme = this.props.themeType || this.props.theme || 'light';\n        return <div className={'pt-logo-back logo-background-' + theme}>\n            <div className=\"pt-logo-div\" style={{width: this.size, height: this.size}}>\n                <div style={{width: 200, height: 200}}>\n                    <div className=\"pt-loader-blue pt-loader-block\"/>\n                    <div className=\"pt-loader-green pt-loader-block\"/>\n                    <div className=\"pt-loader-red pt-loader-block\"/>\n                </div>\n            </div>\n        </div>;\n    }\n}\n\nLoaderPT.propTypes = {\n    size: PropTypes.number,\n    themeType: PropTypes.string\n};\n\n/** @type {typeof LoaderPT} */\nconst _export = LoaderPT;\nexport default _export;"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA;;AACA;;AACA;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACMA,Q;;;;;EACF;AACJ;AACA;EACI,kBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;IACA,MAAKC,IAAL,GAAY,MAAKD,KAAL,CAAWC,IAAX,IAAmB,GAA/B;IAFe;EAGlB;;;;WAED,kBAAS;MACL,IAAMC,KAAK,GAAG,KAAKF,KAAL,CAAWG,SAAX,IAAwB,KAAKH,KAAL,CAAWE,KAAnC,IAA4C,OAA1D;MACA,oBAAO;QAAK,SAAS,EAAE,kCAAkCA;MAAlD,gBACH;QAAK,SAAS,EAAC,aAAf;QAA6B,KAAK,EAAE;UAACE,KAAK,EAAE,KAAKH,IAAb;UAAmBI,MAAM,EAAE,KAAKJ;QAAhC;MAApC,gBACI;QAAK,KAAK,EAAE;UAACG,KAAK,EAAE,GAAR;UAAaC,MAAM,EAAE;QAArB;MAAZ,gBACI;QAAK,SAAS,EAAC;MAAf,EADJ,eAEI;QAAK,SAAS,EAAC;MAAf,EAFJ,eAGI;QAAK,SAAS,EAAC;MAAf,EAHJ,CADJ,CADG,CAAP;IASH;;;EApBkBC,iBAAA,CAAMC,S;;AAuB7BR,QAAQ,CAACS,SAAT,GAAqB;EACjBP,IAAI,EAAEQ,qBAAA,CAAUC,MADC;EAEjBP,SAAS,EAAEM,qBAAA,CAAUE;AAFJ,CAArB;AAKA;;AACA,IAAMC,OAAO,GAAGb,QAAhB;eACea,O"}
+{"version":3,"file":"PT.js","names":["LoaderPT","props","size","theme","themeType","width","height","React","Component","propTypes","PropTypes","number","string","_export"],"sources":["Loaders/PT.js"],"sourcesContent":["/**\n * Copyright 2021-2022 ioBroker GmbH\n *\n * MIT License\n *\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport './PT.css'\n\n/**\n * @typedef {object} LoaderPTProps\n * @property {string} [key] The key to identify this component.\n * @property {number} [size] The size in pixels of this loader.\n * @property {string} [themeType] The chosen theme type.\n * @property {string} [theme] The chosen theme.\n *\n * @extends {React.Component<LoaderPTProps>}\n */\nclass LoaderPT extends React.Component {\n    /**\n     * @param {LoaderPTProps} props\n     */\n    constructor(props) {\n        super(props);\n        this.size = this.props.size || 200;\n    }\n\n    render() {\n        const theme = this.props.themeType || this.props.theme || 'light';\n        return <div className={'pt-logo-back logo-background-' + theme}>\n            <div className=\"pt-logo-div\" style={{width: this.size, height: this.size}}>\n                <div style={{width: 200, height: 200}}>\n                    <div className=\"pt-loader-blue pt-loader-block\"/>\n                    <div className=\"pt-loader-green pt-loader-block\"/>\n                    <div className=\"pt-loader-red pt-loader-block\"/>\n                </div>\n            </div>\n        </div>;\n    }\n}\n\nLoaderPT.propTypes = {\n    size: PropTypes.number,\n    themeType: PropTypes.string\n};\n\n/** @type {typeof LoaderPT} */\nconst _export = LoaderPT;\nexport default _export;"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA;;AACA;;AACA;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACMA,Q;;;;;EACF;AACJ;AACA;EACI,kBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;IACA,MAAKC,IAAL,GAAY,MAAKD,KAAL,CAAWC,IAAX,IAAmB,GAA/B;IAFe;EAGlB;;;;WAED,kBAAS;MACL,IAAMC,KAAK,GAAG,KAAKF,KAAL,CAAWG,SAAX,IAAwB,KAAKH,KAAL,CAAWE,KAAnC,IAA4C,OAA1D;MACA,oBAAO;QAAK,SAAS,EAAE,kCAAkCA;MAAlD,gBACH;QAAK,SAAS,EAAC,aAAf;QAA6B,KAAK,EAAE;UAACE,KAAK,EAAE,KAAKH,IAAb;UAAmBI,MAAM,EAAE,KAAKJ;QAAhC;MAApC,gBACI;QAAK,KAAK,EAAE;UAACG,KAAK,EAAE,GAAR;UAAaC,MAAM,EAAE;QAArB;MAAZ,gBACI;QAAK,SAAS,EAAC;MAAf,EADJ,eAEI;QAAK,SAAS,EAAC;MAAf,EAFJ,eAGI;QAAK,SAAS,EAAC;MAAf,EAHJ,CADJ,CADG,CAAP;IASH;;;EApBkBC,iBAAA,CAAMC,S;;AAuB7BR,QAAQ,CAACS,SAAT,GAAqB;EACjBP,IAAI,EAAEQ,qBAAA,CAAUC,MADC;EAEjBP,SAAS,EAAEM,qBAAA,CAAUE;AAFJ,CAArB;AAKA;;AACA,IAAMC,OAAO,GAAGb,QAAhB;eACea,O"}

package/Components/UploadImage.js

@@ -29,8 +29,6 @@ var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
 
 var _reactCropper = require("react-cropper");
 
-require("cropperjs/dist/cropper.css");
-
 var _styles = require("@mui/styles");
 
 var _material = require("@mui/material");
@@ -47,6 +45,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+// import 'cropperjs/dist/cropper.css';
+var 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";
+
 var styles = function styles(theme) {
   return {
     dropZone: {
@@ -141,6 +142,14 @@ var UploadImage = /*#__PURE__*/function (_Component) {
       cropHandler: false
     };
     _this.cropperRef = /*#__PURE__*/(0, _react.createRef)();
+
+    if (!window.document.getElementById('cropper-style-json-component')) {
+      var style = window.document.createElement('style');
+      style.setAttribute('id', 'cropper-style-json-component');
+      style.innerHTML = cropperStyles;
+      window.document.head.appendChild(style);
+    }
+
     return _this;
   }
 

package/Components/UploadImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadImage.js","names":["styles","theme","dropZone","width","height","position","dropZoneEmpty","image","objectFit","margin","display","uploadDiv","opacity","marginTop","cursor","outline","uploadDivDragging","background","uploadCenterDiv","border","borderRadius","uploadCenterIcon","paddingTop","uploadCenterText","fontSize","uploadCenterTextAndIcon","textAlign","top","bottom","left","right","flexDirection","alignItems","justifyContent","disabledOpacity","buttonRemoveWrapper","zIndex","buttonCropWrapper","error","UploadImage","props","state","uploadFile","anchorEl","cropHandler","cropperRef","createRef","acceptedFiles","maxSize","t","onChange","file","reader","FileReader","onabort","console","log","onerror","onload","ext","name","split","pop","toLowerCase","includes","size","window","alert","Math","round","base64","btoa","Uint8Array","result","reduce","data","byte","String","fromCharCode","readAsArrayBuffer","disabled","classes","icon","removeIconFunc","accept","crop","setState","errors","length","message","onDrop","getRootProps","getInputProps","clsx","e","stopPropagation","currentTarget","Boolean","imageElement","current","cropper","getCroppedCanvas","toDataURL","Component","defaultProps","el","propTypes","PropTypes","object","number","bool","func","string","withStyles"],"sources":["UploadImage.jsx"],"sourcesContent":["import { Component, createRef } from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport Dropzone from 'react-dropzone';\nimport { Cropper } from 'react-cropper';\nimport 'cropperjs/dist/cropper.css';\n\nimport { withStyles } from '@mui/styles';\nimport { Menu, MenuItem, Tooltip } from '@mui/material';\nimport IconButton from '@mui/material/IconButton';\n\nimport IconClose from '@mui/icons-material/Close';\nimport CropIcon from '@mui/icons-material/Crop';\nimport { FaFileUpload as UploadIcon } from 'react-icons/fa';\n\nconst styles = theme => ({\n    dropZone: {\n        width: '100%',\n        height: 100,\n        position: 'relative',\n    },\n    dropZoneEmpty: {\n\n    },\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    },\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    }\n});\n\nclass UploadImage extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            uploadFile: false,\n            anchorEl: null,\n            cropHandler: false,\n        };\n        this.cropperRef = createRef();\n    }\n\n    onDrop(acceptedFiles) {\n        const { maxSize, t, onChange } = this.props;\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            let ext = 'image/' + file.name.split('.').pop().toLowerCase();\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                return window.alert(t('File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));\n            }\n            const base64 = `data:${ext};base64,${btoa(\n                new Uint8Array(reader.result)\n                    .reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;\n\n            onChange(base64);\n        };\n        reader.readAsArrayBuffer(file);\n    }\n\n    render() {\n        const { disabled, maxSize, classes, icon, t, removeIconFunc, accept, error, crop, onChange } = this.props;\n        const { uploadFile, anchorEl, cropHandler } = this.state;\n        return <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, errors) => {\n                this.setState({ uploadFile: false });\n                if (!acceptedFiles.length) {\n                    window.alert((errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message) || t('Cannot upload'));\n                } else {\n                    return this.onDrop(acceptedFiles);\n                }\n            }}\n        >\n            {({ getRootProps, getInputProps }) => <div\n                className={clsx(\n                    classes.uploadDiv,\n                    uploadFile === 'dragging' && classes.uploadDivDragging,\n                    classes.dropZone,\n                    disabled && classes.disabledOpacity,\n                    !icon && classes.dropZoneEmpty\n                )}\n                 {...getRootProps()}>\n                <input {...getInputProps()} />\n                <div className={clsx(classes.uploadCenterDiv, error && classes.error)}>\n                    {!icon ? <div className={classes.uploadCenterTextAndIcon}>\n                            <UploadIcon className={classes.uploadCenterIcon} />\n                            <div className={classes.uploadCenterText}>{\n                                uploadFile === 'dragging' ? t('Drop file here') :\n                                    t('Place your files here or click here to open the browse dialog')}</div>\n                        </div>\n                        :\n                        removeIconFunc && !cropHandler && <div className={classes.buttonRemoveWrapper}>\n                            <Tooltip title={t('Clear')}>\n                                <IconButton size=\"large\" onClick={e => {\n                                    removeIconFunc && removeIconFunc();\n                                    e.stopPropagation();\n                                }}><IconClose />\n                                </IconButton>\n                            </Tooltip>\n                        </div>\n                    }\n                    {icon && crop && <div className={classes.buttonCropWrapper}>\n                        <Tooltip title={t('Crop')}>\n                            <IconButton size=\"large\" onClick={e => {\n                                if (!cropHandler) {\n                                    this.setState({ cropHandler: true });\n                                } else {\n                                    this.setState({ anchorEl: e.currentTarget });\n                                }\n                                e.stopPropagation();\n                            }}><CropIcon color={cropHandler ? 'primary' : 'inherit'} />\n                            </IconButton>\n                        </Tooltip>\n                        <Menu\n                            id=\"simple-menu\"\n                            anchorEl={anchorEl}\n                            keepMounted\n                            open={Boolean(anchorEl)}\n                            onClose={() => this.setState({ anchorEl: null })}\n                        >\n                            <MenuItem onClick={() => this.setState({ anchorEl: null, cropHandler: false }, () => {\n                                const imageElement = this.cropperRef?.current?.cropper;\n                                onChange(imageElement.getCroppedCanvas().toDataURL());\n                            })}>{t('Save')}</MenuItem>\n                            <MenuItem onClick={() => this.setState({ anchorEl: null, cropHandler: false })}>{t('Close')}</MenuItem>\n                        </Menu>\n                    </div>}\n                    {icon && !cropHandler ? <img src={icon} className={classes.image} alt=\"icon\" /> : null}\n\n                    {icon && crop && cropHandler ? <Cropper\n                        ref={this.cropperRef}\n                        className={classes.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                    /> : null}\n                </div>\n            </div>}\n        </Dropzone>;\n    }\n}\n\nUploadImage.defaultProps = {\n    disabled: false,\n    maxSize: 10 * 1024,\n    icon: null,\n    removeIconFunc: null,\n    accept: 'image/*',\n    error: false,\n    onChange: base64 => console.log(base64),\n    t: el => el,\n    crop: false,\n};\n\nUploadImage.propTypes = {\n    classes: PropTypes.object,\n    maxSize: PropTypes.number,\n    disabled: PropTypes.bool,\n    crop: PropTypes.bool,\n    error: PropTypes.bool,\n    onChange: PropTypes.func,\n    accept: PropTypes.string,\n    t: PropTypes.func,\n};\n\nexport default withStyles(styles)(UploadImage);\n"],"mappings":"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"}
+{"version":3,"file":"UploadImage.js","names":["cropperStyles","styles","theme","dropZone","width","height","position","dropZoneEmpty","image","objectFit","margin","display","uploadDiv","opacity","marginTop","cursor","outline","uploadDivDragging","background","uploadCenterDiv","border","borderRadius","uploadCenterIcon","paddingTop","uploadCenterText","fontSize","uploadCenterTextAndIcon","textAlign","top","bottom","left","right","flexDirection","alignItems","justifyContent","disabledOpacity","buttonRemoveWrapper","zIndex","buttonCropWrapper","error","UploadImage","props","state","uploadFile","anchorEl","cropHandler","cropperRef","createRef","window","document","getElementById","style","createElement","setAttribute","innerHTML","head","appendChild","acceptedFiles","maxSize","t","onChange","file","reader","FileReader","onabort","console","log","onerror","onload","ext","name","split","pop","toLowerCase","includes","size","alert","Math","round","base64","btoa","Uint8Array","result","reduce","data","byte","String","fromCharCode","readAsArrayBuffer","disabled","classes","icon","removeIconFunc","accept","crop","setState","errors","length","message","onDrop","getRootProps","getInputProps","clsx","e","stopPropagation","currentTarget","Boolean","imageElement","current","cropper","getCroppedCanvas","toDataURL","Component","defaultProps","el","propTypes","PropTypes","object","number","bool","func","string","withStyles"],"sources":["UploadImage.jsx"],"sourcesContent":["import { Component, createRef } from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport Dropzone from 'react-dropzone';\nimport { Cropper } from 'react-cropper';\n\nimport { withStyles } from '@mui/styles';\nimport { Menu, MenuItem, Tooltip } from '@mui/material';\nimport IconButton from '@mui/material/IconButton';\n\nimport IconClose from '@mui/icons-material/Close';\nimport CropIcon from '@mui/icons-material/Crop';\nimport { FaFileUpload as UploadIcon } from 'react-icons/fa';\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\n\nconst styles = theme => ({\n    dropZone: {\n        width: '100%',\n        height: 100,\n        position: 'relative',\n    },\n    dropZoneEmpty: {\n\n    },\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    },\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    }\n});\n\nclass UploadImage extends Component {\n    constructor(props) {\n        super(props);\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) {\n        const { maxSize, t, onChange } = this.props;\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            let ext = 'image/' + file.name.split('.').pop().toLowerCase();\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                return window.alert(t('File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));\n            }\n            const base64 = `data:${ext};base64,${btoa(\n                new Uint8Array(reader.result)\n                    .reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;\n\n            onChange(base64);\n        };\n        reader.readAsArrayBuffer(file);\n    }\n\n    render() {\n        const { disabled, maxSize, classes, icon, t, removeIconFunc, accept, error, crop, onChange } = this.props;\n        const { uploadFile, anchorEl, cropHandler } = this.state;\n        return <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, errors) => {\n                this.setState({ uploadFile: false });\n                if (!acceptedFiles.length) {\n                    window.alert((errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message) || t('Cannot upload'));\n                } else {\n                    return this.onDrop(acceptedFiles);\n                }\n            }}\n        >\n            {({ getRootProps, getInputProps }) => <div\n                className={clsx(\n                    classes.uploadDiv,\n                    uploadFile === 'dragging' && classes.uploadDivDragging,\n                    classes.dropZone,\n                    disabled && classes.disabledOpacity,\n                    !icon && classes.dropZoneEmpty\n                )}\n                 {...getRootProps()}>\n                <input {...getInputProps()} />\n                <div className={clsx(classes.uploadCenterDiv, error && classes.error)}>\n                    {!icon ? <div className={classes.uploadCenterTextAndIcon}>\n                            <UploadIcon className={classes.uploadCenterIcon} />\n                            <div className={classes.uploadCenterText}>{\n                                uploadFile === 'dragging' ? t('Drop file here') :\n                                    t('Place your files here or click here to open the browse dialog')}</div>\n                        </div>\n                        :\n                        removeIconFunc && !cropHandler && <div className={classes.buttonRemoveWrapper}>\n                            <Tooltip title={t('Clear')}>\n                                <IconButton size=\"large\" onClick={e => {\n                                    removeIconFunc && removeIconFunc();\n                                    e.stopPropagation();\n                                }}><IconClose />\n                                </IconButton>\n                            </Tooltip>\n                        </div>\n                    }\n                    {icon && crop && <div className={classes.buttonCropWrapper}>\n                        <Tooltip title={t('Crop')}>\n                            <IconButton size=\"large\" onClick={e => {\n                                if (!cropHandler) {\n                                    this.setState({ cropHandler: true });\n                                } else {\n                                    this.setState({ anchorEl: e.currentTarget });\n                                }\n                                e.stopPropagation();\n                            }}><CropIcon color={cropHandler ? 'primary' : 'inherit'} />\n                            </IconButton>\n                        </Tooltip>\n                        <Menu\n                            id=\"simple-menu\"\n                            anchorEl={anchorEl}\n                            keepMounted\n                            open={Boolean(anchorEl)}\n                            onClose={() => this.setState({ anchorEl: null })}\n                        >\n                            <MenuItem onClick={() => this.setState({ anchorEl: null, cropHandler: false }, () => {\n                                const imageElement = this.cropperRef?.current?.cropper;\n                                onChange(imageElement.getCroppedCanvas().toDataURL());\n                            })}>{t('Save')}</MenuItem>\n                            <MenuItem onClick={() => this.setState({ anchorEl: null, cropHandler: false })}>{t('Close')}</MenuItem>\n                        </Menu>\n                    </div>}\n                    {icon && !cropHandler ? <img src={icon} className={classes.image} alt=\"icon\" /> : null}\n\n                    {icon && crop && cropHandler ? <Cropper\n                        ref={this.cropperRef}\n                        className={classes.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                    /> : null}\n                </div>\n            </div>}\n        </Dropzone>;\n    }\n}\n\nUploadImage.defaultProps = {\n    disabled: false,\n    maxSize: 10 * 1024,\n    icon: null,\n    removeIconFunc: null,\n    accept: 'image/*',\n    error: false,\n    onChange: base64 => console.log(base64),\n    t: el => el,\n    crop: false,\n};\n\nUploadImage.propTypes = {\n    classes: PropTypes.object,\n    maxSize: PropTypes.number,\n    disabled: PropTypes.bool,\n    crop: PropTypes.bool,\n    error: PropTypes.bool,\n    onChange: PropTypes.func,\n    accept: PropTypes.string,\n    t: PropTypes.func,\n};\n\nexport default withStyles(styles)(UploadImage);\n"],"mappings":"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"}

package/GenericApp.js

@@ -59,8 +59,6 @@ var _SaveCloseButtons = _interopRequireDefault(require("./Components/SaveCloseBu
 
 var _i18n = _interopRequireDefault(require("./i18n"));
 
-require("./index.css");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -73,6 +71,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+// import './index.css';
+var cssStyle = "\nhtml {\n    height: 100%;\n}\n\nbody {\n    margin: 0;\n    padding: 0;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n\n/* scrollbar */\n::-webkit-scrollbar-track {\n    background-color: #ccc;\n    border-radius: 5px;\n}\n\n::-webkit-scrollbar {\n    width: 5px;\n    height: 5px;\n    background-color: #ccc;\n}\n\n::-webkit-scrollbar-thumb {\n    background-color: #575757;\n    border-radius: 5px;\n}\n\n#root {\n    height: 100%;\n}\n\n.App {\n    height: 100%;\n}\n\n@keyframes glow {\n    from {\n        background-color: initial;\n    }\n    to {\n        background-color: #58c458;\n    }\n}\n";
+
 if (!window.localStorage) {
   window.localStorage = {
     getItem: function getItem() {
@@ -101,7 +102,15 @@ var GenericApp = /*#__PURE__*/function (_Router) {
     var _this;
 
     (0, _classCallCheck2["default"])(this, GenericApp);
-    var ConnectionClass = props.Connection || settings.Connection || _Connection["default"]; // Remove `!Connection.isWeb() && window.adapterName !== 'material'` when iobroker.socket will support native ws
+    var ConnectionClass = props.Connection || settings.Connection || _Connection["default"];
+
+    if (!window.document.getElementById('generic-app-iobroker-component')) {
+      var style = window.document.createElement('style');
+      style.setAttribute('id', 'generic-app-iobroker-component');
+      style.innerHTML = cssStyle;
+      window.document.head.appendChild(style);
+    } // Remove `!Connection.isWeb() && window.adapterName !== 'material'` when iobroker.socket will support native ws
+
 
     if (!ConnectionClass.isWeb() && window.io && window.location.port === '3000') {
       try {