@iobroker/adapter-react-v5 0.0.2

package/Components/IconSelector.js

@@ -0,0 +1,337 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _Utils = _interopRequireDefault(require("./Utils"));
+
+var _list = _interopRequireDefault(require("../assets/devices/list.json"));
+
+var _list2 = _interopRequireDefault(require("../assets/rooms/list.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var IconSelector = /*#__PURE__*/function (_Component) {
+  _inherits(IconSelector, _Component);
+
+  var _super = _createSuper(IconSelector);
+
+  function IconSelector(props) {
+    var _this;
+
+    _classCallCheck(this, IconSelector);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      opened: false,
+      names: [],
+      filter: '',
+      icons: props.icons || null
+    };
+    return _this;
+  }
+
+  _createClass(IconSelector, [{
+    key: "loadAllIcons",
+    value: function loadAllIcons() {
+      var _this2 = this;
+
+      if (this.state.loading || this.state.icons) {
+        return;
+      }
+
+      this.setState({
+        loading: true
+      }, function () {
+        var icons = [];
+        var names = [];
+
+        if (!_this2.props.icons) {
+          var templates = _this2.props.onlyRooms || !_this2.props.onlyRooms && !_this2.props.onlyDevices ? _list2["default"] : null;
+          var promises = [];
+
+          if (templates) {
+            templates.forEach(function (item) {
+              if (item.name && _typeof(item.name) === 'object') {
+                item.name = item.name[_this2.props.lang] || item.name.en || item._id;
+              }
+
+              item.name = item.name || item._id;
+            });
+            templates = templates.filter(function (item, i) {
+              return !templates.find(function (_item, _i) {
+                return i !== _i && _item.icon === item.icon && _item.name === item.name;
+              });
+            });
+            templates.forEach(function (template, i) {
+              var image;
+
+              try {
+                image = require("../assets/rooms/".concat(template.icon));
+              } catch (e) {
+                return Promise.resolve(null);
+              }
+
+              names[i] = template.name;
+              promises.push(_Utils["default"].getSvg(image["default"]).then(function (icon) {
+                return icons[i] = icon;
+              }));
+            });
+          }
+
+          templates = _this2.props.onlyDevices || !_this2.props.onlyRooms && !_this2.props.onlyDevices ? _list["default"] : null;
+
+          if (templates) {
+            var offset = promises.length;
+            templates && templates.forEach(function (item) {
+              if (item.name && _typeof(item.name) === 'object') {
+                item.name = item.name[_this2.props.lang] || item.name.en || item._id;
+              }
+
+              item.name = item.name || item._id;
+            });
+            templates = templates.filter(function (item, i) {
+              return !templates.find(function (_item, _i) {
+                return i !== _i && _item.icon === item.icon && _item.name === item.name;
+              });
+            });
+            templates.forEach(function (template, i) {
+              var image;
+
+              try {
+                image = require("../assets/devices/".concat(template.icon));
+              } catch (e) {
+                return Promise.resolve(null);
+              }
+
+              names[i + offset] = template.name;
+              promises.push(_Utils["default"].getSvg(image["default"]).then(function (icon) {
+                return icons[i + offset] = icon;
+              }));
+            });
+          }
+
+          Promise.all(promises).then(function () {
+            return _this2.setState({
+              icons: icons,
+              loading: false,
+              names: names,
+              isAnyName: names.find(function (i) {
+                return i;
+              })
+            });
+          });
+        } else {
+          var _promises = _this2.props.icons.map(function (item, i) {
+            var href;
+
+            if (_typeof(item) === 'object') {
+              href = item.icon || item.src || item.href;
+              names[i] = _typeof(item.name) === 'object' ? item.name[_this2.props.lang] || item.name.en || item._id : item.name;
+
+              if (!names[i]) {
+                var parts = href.split('.');
+                parts.pop();
+                names[i] = parts[parts.length - 1];
+              }
+            } else {
+              href = item;
+            }
+
+            if (href) {
+              if (href.startsWith('data:')) {
+                icons[i] = href;
+                return Promise.resolve();
+              } else {
+                return _Utils["default"].getSvg(href).then(function (icon) {
+                  return icons[i] = icon;
+                });
+              }
+            } else {
+              return Promise.resolve();
+            }
+          });
+
+          Promise.all(_promises).then(function () {
+            return _this2.setState({
+              icons: icons,
+              loading: false,
+              names: names,
+              isAnyName: names.find(function (i) {
+                return i;
+              })
+            });
+          });
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      if (this.state.loading) {
+        return /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null);
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        color: "grey",
+        variant: "outlined",
+        title: this.props.t('ra_Select predefined icon'),
+        onClick: function onClick() {
+          return _this3.setState({
+            opened: true
+          }, function () {
+            return _this3.loadAllIcons();
+          });
+        },
+        style: {
+          minWidth: 40,
+          marginRight: 8
+        }
+      }, "..."), this.state.opened ? /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+        onClose: function onClose() {
+          return _this3.setState({
+            opened: false
+          });
+        },
+        open: true
+      }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, this.props.t('ra_Select predefined icon'), this.state.isAnyName ? /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        variant: "standard",
+        margin: "dense",
+        style: {
+          marginLeft: 20
+        },
+        value: this.state.filter,
+        onChange: function onChange(e) {
+          return _this3.setState({
+            filter: e.target.value.toLowerCase()
+          });
+        },
+        placeholder: this.props.t('Filter'),
+        InputProps: {
+          endAdornment: this.state.filter ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+            size: "small",
+            onClick: function onClick() {
+              return _this3.setState({
+                filter: ''
+              });
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], null)) : undefined
+        }
+      }) : null), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: '100%',
+          textAlign: 'center'
+        }
+      }, this.state.icons && this.state.icons.map(function (icon, i) {
+        if (!_this3.state.filter || _this3.state.names[i] && _this3.state.names[i].toLowerCase().includes(_this3.state.filter)) {
+          return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            title: _this3.state.names[i] || '',
+            key: i
+          }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+            onClick: function onClick() {
+              return _this3.setState({
+                opened: false
+              }, function () {
+                return _this3.props.onSelect(icon);
+              });
+            },
+            size: "large"
+          }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+            src: icon,
+            alt: i,
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: 5
+            }
+          })));
+        } else {
+          return null;
+        }
+      }))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        color: "grey",
+        variant: "contained",
+        onClick: function onClick() {
+          return _this3.setState({
+            opened: false
+          });
+        },
+        startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
+      }, this.props.t('Close')))) : null);
+    }
+  }]);
+
+  return IconSelector;
+}(_react.Component);
+
+IconSelector.propTypes = {
+  icons: _propTypes["default"].array,
+  onlyRooms: _propTypes["default"].bool,
+  onlyDevices: _propTypes["default"].bool,
+  onSelect: _propTypes["default"].func.isRequired,
+  t: _propTypes["default"].func.isRequired,
+  lang: _propTypes["default"].string.isRequired
+};
+/** @type {typeof IconSelector} */
+
+var _default = IconSelector;
+exports["default"] = _default;
+//# sourceMappingURL=IconSelector.js.map

package/Components/IconSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["IconSelector.js"],"names":["IconSelector","props","state","opened","names","filter","icons","loading","setState","templates","onlyRooms","onlyDevices","rooms","promises","forEach","item","name","lang","en","_id","i","find","_item","_i","icon","template","image","require","e","Promise","resolve","push","Utils","getSvg","then","devices","offset","length","all","isAnyName","map","href","src","parts","split","pop","startsWith","t","loadAllIcons","minWidth","marginRight","marginLeft","target","value","toLowerCase","endAdornment","undefined","width","textAlign","includes","onSelect","height","borderRadius","Component","propTypes","PropTypes","array","bool","func","isRequired","string"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport ClearIcon from '@mui/icons-material/Clear';\n\nimport Icon from './Icon';\nimport Utils from './Utils';\n\nimport devices from '../assets/devices/list.json';\nimport rooms from '../assets/rooms/list.json';\n\nclass IconSelector extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            opened: false,\n            names: [],\n            filter: '',\n            icons: props.icons || null,\n        };\n    }\n\n    loadAllIcons() {\n        if (this.state.loading || this.state.icons) {\n            return;\n        }\n        this.setState({loading: true}, () => {\n            const icons = [];\n            const names = [];\n\n            if (!this.props.icons) {\n                let templates = this.props.onlyRooms || (!this.props.onlyRooms && !this.props.onlyDevices) ? rooms : null;\n\n                const promises = [];\n                if (templates) {\n                    templates.forEach(item => {\n                        if (item.name && typeof item.name === 'object') {\n                            item.name = item.name[this.props.lang] || item.name.en || item._id;\n                        }\n                        item.name = item.name || item._id;\n                    });\n\n                    templates = templates.filter((item, i) => !templates.find((_item, _i) => i !== _i && _item.icon === item.icon && _item.name === item.name));\n\n                    templates.forEach((template, i) => {\n                        let image;\n                        try {\n                            image = require(`../assets/rooms/${template.icon}`);\n                        } catch (e) {\n                            return Promise.resolve(null);\n                        }\n\n                        names[i] = template.name;\n\n                        promises.push(Utils.getSvg(image.default)\n                            .then(icon =>\n                                icons[i] = icon));\n                    });\n                }\n\n                templates = this.props.onlyDevices || (!this.props.onlyRooms && !this.props.onlyDevices) ? devices : null;\n                if (templates) {\n                    const offset = promises.length;\n                    templates && templates.forEach(item => {\n                        if (item.name && typeof item.name === 'object') {\n                            item.name = item.name[this.props.lang] || item.name.en || item._id;\n                        }\n                        item.name = item.name || item._id;\n                    });\n\n                    templates = templates.filter((item, i) => !templates.find((_item, _i) => i !== _i && _item.icon === item.icon && _item.name === item.name));\n\n                    templates.forEach((template, i) => {\n                        let image;\n                        try {\n                            image = require(`../assets/devices/${template.icon}`);\n                        } catch (e) {\n                            return Promise.resolve(null);\n                        }\n\n                        names[i + offset] = template.name;\n\n                        promises.push(Utils.getSvg(image.default)\n                            .then(icon =>\n                                icons[i + offset] = icon));\n                    });\n                }\n                Promise.all(promises)\n                    .then(() =>\n                        this.setState({icons, loading: false, names, isAnyName: names.find(i => i)}));\n            } else {\n                const promises = this.props.icons.map((item, i) => {\n                    let href;\n                    if (typeof item === 'object') {\n                        href = item.icon || item.src || item.href;\n                        names[i] = typeof item.name === 'object' ? item.name[this.props.lang] || item.name.en || item._id : item.name;\n                        if (!names[i]) {\n                            const parts = href.split('.');\n                            parts.pop();\n                            names[i] = parts[parts.length - 1];\n                        }\n                    } else {\n                        href = item;\n                    }\n\n                    if (href) {\n                        if (href.startsWith('data:')) {\n                            icons[i] = href;\n                            return Promise.resolve();\n                        } else {\n                            return Utils.getSvg(href)\n                                .then(icon =>\n                                    icons[i] = icon);\n                        }\n                    } else {\n                        return Promise.resolve();\n                    }\n                });\n\n                Promise.all(promises)\n                    .then(() =>\n                        this.setState({icons, loading: false, names, isAnyName: names.find(i => i)}));\n            }\n        });\n    }\n\n    render() {\n        if (this.state.loading) {\n            return <CircularProgress />;\n        }\n\n        return <>\n            <Button\n                color=\"grey\" \n                variant=\"outlined\"\n                title={this.props.t('ra_Select predefined icon')}\n                onClick={() => this.setState({opened: true}, () => this.loadAllIcons())} style={{minWidth: 40, marginRight: 8}}\n            >...</Button>\n            {this.state.opened ? <Dialog onClose={() => this.setState({opened: false})} open={true}>\n                <DialogTitle>{this.props.t('ra_Select predefined icon')}\n                        {this.state.isAnyName ? <TextField\n                            variant=\"standard\" \n                            margin=\"dense\"\n                            style={{marginLeft: 20}}\n                            value={this.state.filter}\n                            onChange={e => this.setState({filter: e.target.value.toLowerCase()})}\n                            placeholder={this.props.t('Filter')}\n                            InputProps={{\n                                endAdornment: this.state.filter\n                                    ?\n                                    <IconButton\n                                        size=\"small\"\n                                        onClick={() => this.setState({filter: ''})}>\n                                        <ClearIcon />\n                                    </IconButton>\n                                    :\n                                    undefined,\n                            }}\n                        /> : null}\n                </DialogTitle>\n                <DialogContent>\n                    <div style={{width: '100%', textAlign: 'center'}}>\n                        {this.state.icons && this.state.icons.map((icon, i) => {\n                            if (!this.state.filter || (this.state.names[i] && this.state.names[i].toLowerCase().includes(this.state.filter))) {\n                                return (\n                                    <Tooltip title={this.state.names[i] || ''} key={i}><IconButton\n                                        onClick={() =>\n                                            this.setState({opened: false}, () =>\n                                                this.props.onSelect(icon))}\n                                        size=\"large\">\n                                        <Icon src={icon} alt={i} style={{width: 32, height: 32, borderRadius: 5}}/>\n                                    </IconButton></Tooltip>\n                                );\n                            } else {\n                                return null;\n                            }\n                        })}\n                    </div>\n                </DialogContent>\n                <DialogActions>\n                    <Button\n                        color=\"grey\" \n                        variant=\"contained\"\n                        onClick={() => this.setState({opened: false})}\n                        startIcon={<CloseIcon />}\n                    >\n                        {this.props.t('Close')}\n                    </Button>\n                </DialogActions>\n            </Dialog> : null}\n        </>;\n    }\n}\n\nIconSelector.propTypes = {\n    icons: PropTypes.array,\n    onlyRooms: PropTypes.bool,\n    onlyDevices: PropTypes.bool,\n    onSelect: PropTypes.func.isRequired,\n    t: PropTypes.func.isRequired,\n    lang: PropTypes.string.isRequired,\n};\n\n/** @type {typeof IconSelector} */\nexport default IconSelector;"],"file":"IconSelector.js"}

package/Components/Image.js

@@ -0,0 +1,215 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _no_icon = _interopRequireDefault(require("../assets/no_icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function getElementFromSource(src) {
+  var svgContainer = document.createElement('div');
+  svgContainer.innerHTML = src;
+  var svg = svgContainer.firstElementChild;
+
+  if (svg.remove) {
+    svg.remove();
+  } else {
+    svgContainer.removeChild(svg);
+  }
+
+  svgContainer.remove();
+  return svg;
+}
+
+function serializeAttrs(map) {
+  var ret = {};
+
+  for (var prop, i = 0; i < map.length; i++) {
+    var key = map[i].name;
+
+    if (key === 'class') {
+      prop = 'className';
+    } else if (!key.startsWith('data-')) {
+      prop = key.replace(/[-|:]([a-z])/g, function (g) {
+        return g[1].toUpperCase();
+      });
+    } else {
+      prop = key;
+    }
+
+    ret[prop] = map[i].value;
+  }
+
+  return ret;
+}
+/**
+ * @typedef {object} ImageProps
+ * @property {string} [key] The key to identify this component.
+ * @property {string} [color] The color.
+ * @property {string} [src] The source of the image.
+ * @property {string} [imagePrefix] The image prefix (default: './files/')
+ * @property {string} [className] The CSS class name.
+ * @property {boolean} [showError] Show image errors (or just show no image)?
+ *
+ * @extends {React.Component<ImageProps>}
+ */
+
+
+var Image = /*#__PURE__*/function (_React$Component) {
+  _inherits(Image, _React$Component);
+
+  var _super = _createSuper(Image);
+
+  function Image(props) {
+    var _this;
+
+    _classCallCheck(this, Image);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      svg: !!(_this.props.src && _this.props.src.startsWith('data:')),
+      created: true,
+      color: _this.props.color || '',
+      src: _this.props.src || '',
+      imgError: false,
+      showError: _this.props.showError
+    };
+    _this.svg = _this.state.svg ? _this.getSvgFromData(_this.state.src) : null;
+    return _this;
+  }
+
+  _createClass(Image, [{
+    key: "getSvgFromData",
+    value: function getSvgFromData(src) {
+      var len = 'data:image/svg+xml;base64,';
+
+      if (!src.startsWith(len)) {
+        return null;
+      }
+
+      src = src.substring(len.length);
+
+      try {
+        src = atob(src);
+        var svg = getElementFromSource(src);
+        var inner = svg.innerHTML;
+        var svgProps = serializeAttrs(svg.attributes || []);
+        svg.remove();
+        return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+          className: this.props.className,
+          style: this.state.color ? {
+            color: this.state.color
+          } : {}
+        }, svgProps, {
+          dangerouslySetInnerHTML: {
+            __html: inner
+          }
+        }));
+      } catch (e) {}
+
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      if (this.state.svg) {
+        if (!this.state.created) {
+          setTimeout(function () {
+            _this2.svg = _this2.getSvgFromData(_this2.state.src);
+
+            _this2.setState({
+              created: true
+            });
+          }, 50);
+        }
+
+        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: ''
+            });
+          }
+        });
+      } else {
+        return null;
+      }
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      var newState = {};
+      var changed = false;
+
+      if (props && state && props.src !== state.src) {
+        newState.src = props.src;
+        newState.svg = props.src && props.src.startsWith('data:');
+        newState.created = false;
+        changed = true;
+      }
+
+      if (props && state && props.color !== state.color) {
+        newState.color = props.color;
+        changed = true;
+      }
+
+      if (props && state && props.showError !== state.showError) {
+        newState.showError = props.showError;
+        changed = true;
+      }
+
+      return changed ? newState : null;
+    }
+  }]);
+
+  return Image;
+}(_react["default"].Component);
+
+Image.propTypes = {
+  color: _propTypes["default"].string,
+  src: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  imagePrefix: _propTypes["default"].string
+};
+var _default = Image;
+exports["default"] = _default;
+//# sourceMappingURL=Image.js.map

package/Components/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"mappings":"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","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            changed = true;\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,\n    className: PropTypes.string,\n    imagePrefix: PropTypes.string,\n};\n\nexport default Image;"],"file":"Image.js"}