@iobroker/adapter-react-v5 0.0.2

package/Components/Icon.js

@@ -0,0 +1,234 @@
+"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;
+exports.getSelectIdIcon = getSelectIdIcon;
+exports.getSystemIcon = getSystemIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactInlinesvg = _interopRequireDefault(require("react-inlinesvg"));
+
+var _SettingsApplications = _interopRequireDefault(require("@mui/icons-material/SettingsApplications"));
+
+var _Photo = _interopRequireDefault(require("@mui/icons-material/Photo"));
+
+var _SupervisedUserCircle = _interopRequireDefault(require("@mui/icons-material/SupervisedUserCircle"));
+
+var _PersonOutlined = _interopRequireDefault(require("@mui/icons-material/PersonOutlined"));
+
+var _Router = _interopRequireDefault(require("@mui/icons-material/Router"));
+
+var _Wifi = _interopRequireDefault(require("@mui/icons-material/Wifi"));
+
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+
+var _Description = _interopRequireDefault(require("@mui/icons-material/Description"));
+
+var _IconAlias = _interopRequireDefault(require("../icons/IconAlias"));
+
+var _Utils = _interopRequireDefault(require("./Utils"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
+
+function getSystemIcon(obj) {
+  var icon;
+  var id = obj === null || obj === void 0 ? void 0 : obj._id;
+
+  if (!id) {
+    return null;
+  } // system or design have special icons
+
+
+  if (id.startsWith('_design/') || id === 'system') {
+    icon = /*#__PURE__*/_react["default"].createElement(_SettingsApplications["default"], {
+      className: "iconOwn"
+    });
+  } else if (id === '0_userdata' || id === '0_userdata.0') {
+    icon = /*#__PURE__*/_react["default"].createElement(_Photo["default"], {
+      className: "iconOwn"
+    });
+  } else if (id === 'alias' || id === 'alias.0') {
+    icon = /*#__PURE__*/_react["default"].createElement(_IconAlias["default"], {
+      className: "iconOwn"
+    });
+  } else if (id === 'system.adapter') {
+    icon = /*#__PURE__*/_react["default"].createElement(_SettingsApplications["default"], {
+      className: "iconOwn"
+    });
+  } else if (id === 'system.group') {
+    icon = /*#__PURE__*/_react["default"].createElement(_SupervisedUserCircle["default"], {
+      className: "iconOwn"
+    });
+  } else if (id === 'system.user') {
+    icon = /*#__PURE__*/_react["default"].createElement(_PersonOutlined["default"], {
+      className: "iconOwn"
+    });
+  } else if (id === 'system.host') {
+    icon = /*#__PURE__*/_react["default"].createElement(_Router["default"], {
+      className: "iconOwn"
+    });
+  } else if (id.endsWith('.connection') || id.endsWith('.connected')) {
+    icon = /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+      className: "iconOwn"
+    });
+  } else if (id.endsWith('.info')) {
+    icon = /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+      className: "iconOwn"
+    });
+  } else if ((obj === null || obj === void 0 ? void 0 : obj.type) === 'meta') {
+    icon = /*#__PURE__*/_react["default"].createElement(_Description["default"], {
+      className: "iconOwn"
+    });
+  }
+
+  return icon || null;
+}
+
+function getSelectIdIcon(obj, imagePrefix) {
+  imagePrefix = imagePrefix || '.'; //http://localhost:8081';
+
+  var src = '';
+  var common = obj === null || obj === void 0 ? void 0 : obj.common;
+
+  if (common) {
+    var cIcon = common.icon;
+
+    if (cIcon) {
+      if (!cIcon.startsWith('data:image/')) {
+        if (cIcon.includes('.')) {
+          var instance;
+
+          if (obj.type === 'instance' || obj.type === 'adapter') {
+            src = imagePrefix + '/adapter/' + common.name + '/' + cIcon;
+          } else if (obj._id && obj._id.startsWith('system.adapter.')) {
+            instance = obj._id.split('.', 3);
+
+            if (cIcon[0] === '/') {
+              instance[2] += cIcon;
+            } else {
+              instance[2] += '/' + cIcon;
+            }
+
+            src = imagePrefix + '/adapter/' + instance[2];
+          } else {
+            instance = obj._id.split('.', 2);
+
+            if (cIcon[0] === '/') {
+              instance[0] += cIcon;
+            } else {
+              instance[0] += '/' + cIcon;
+            }
+
+            src = imagePrefix + '/adapter/' + instance[0];
+          }
+        } else {
+          return null;
+        }
+      } else {
+        // base 64 image
+        src = cIcon;
+      }
+    }
+  }
+
+  return src || null;
+}
+
+var Icon = /*#__PURE__*/function (_React$Component) {
+  _inherits(Icon, _React$Component);
+
+  var _super = _createSuper(Icon);
+
+  function Icon() {
+    _classCallCheck(this, Icon);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Icon, [{
+    key: "render",
+    value: function render() {
+      if (this.props.src) {
+        if (typeof this.props.src === 'string') {
+          if (this.props.src.length < 3) {
+            return /*#__PURE__*/_react["default"].createElement("span", {
+              title: this.props.title || undefined,
+              style: Object.assign({
+                height: 27,
+                marginTop: -8
+              }, this.props.styleUTF8 || this.props.style),
+              className: _Utils["default"].clsx(this.props.className, 'iconOwn')
+            }, this.props.src); // utf-8 char
+          } else {
+            if (this.props.src.startsWith('data:image/svg')) {
+              var _this$props$style, _this$props$style2, _this$props$style3;
+
+              return /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
+                title: this.props.title || undefined,
+                src: this.props.src,
+                className: _Utils["default"].clsx(this.props.className, 'iconOwn'),
+                width: ((_this$props$style = this.props.style) === null || _this$props$style === void 0 ? void 0 : _this$props$style.width) || 28,
+                height: ((_this$props$style2 = this.props.style) === null || _this$props$style2 === void 0 ? void 0 : _this$props$style2.height) || ((_this$props$style3 = this.props.style) === null || _this$props$style3 === void 0 ? void 0 : _this$props$style3.width) || 28,
+                style: this.props.style || {}
+              });
+            } else {
+              return /*#__PURE__*/_react["default"].createElement("img", {
+                title: this.props.title || undefined,
+                style: this.props.style || {},
+                className: _Utils["default"].clsx(this.props.className, 'iconOwn'),
+                src: this.props.src,
+                alt: ""
+              });
+            }
+          }
+        } else {
+          return this.props.src;
+        }
+      } else {
+        return null;
+      }
+    }
+  }]);
+
+  return Icon;
+}(_react["default"].Component);
+
+Icon.propTypes = {
+  color: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  src: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  className: _propTypes["default"].string,
+  imagePrefix: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  styleUTF8: _propTypes["default"].object
+};
+var _default = Icon;
+exports["default"] = _default;
+//# sourceMappingURL=Icon.js.map

package/Components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Icon.js"],"names":["getSystemIcon","obj","icon","id","_id","startsWith","endsWith","type","getSelectIdIcon","imagePrefix","src","common","cIcon","includes","instance","name","split","Icon","props","length","title","undefined","Object","assign","height","marginTop","styleUTF8","style","Utils","clsx","className","width","React","Component","propTypes","color","PropTypes","string","oneOfType","object"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport SVG from 'react-inlinesvg';\n\nimport IconSystem from '@mui/icons-material/SettingsApplications';\nimport IconPhoto from '@mui/icons-material/Photo';\nimport IconGroup from '@mui/icons-material/SupervisedUserCircle';\nimport IconUser from '@mui/icons-material/PersonOutlined';\nimport IconHost from '@mui/icons-material/Router';\nimport IconConnection from '@mui/icons-material/Wifi';\nimport IconInfo from '@mui/icons-material/Info';\nimport IconMeta from '@mui/icons-material/Description';\nimport IconAlias from '../icons/IconAlias';\n\nimport Utils from './Utils';\n\nexport function getSystemIcon(obj) {\n    let icon;\n    const id = obj?._id;\n\n    if (!id) {\n        return null;\n    }\n\n    // system or design have special icons\n    if (id.startsWith('_design/') || (id === 'system')) {\n        icon = <IconSystem className=\"iconOwn\" />;\n    } else if (id === '0_userdata' || id === '0_userdata.0') {\n        icon = <IconPhoto className=\"iconOwn\" />;\n    } else if (id === 'alias' || id === 'alias.0') {\n        icon = <IconAlias className=\"iconOwn\" />;\n    } else if (id === 'system.adapter') {\n        icon = <IconSystem className=\"iconOwn\" />;\n    } else if (id === 'system.group') {\n        icon = <IconGroup className=\"iconOwn\" />;\n    } else if (id === 'system.user') {\n        icon = <IconUser className=\"iconOwn\" />;\n    } else if (id === 'system.host') {\n        icon = <IconHost className=\"iconOwn\" />;\n    } else if (id.endsWith('.connection') || id.endsWith('.connected')) {\n        icon = <IconConnection className=\"iconOwn\" />;\n    } else if (id.endsWith('.info')) {\n        icon = <IconInfo className=\"iconOwn\" />;\n    } else if (obj?.type === 'meta') {\n        icon = <IconMeta className=\"iconOwn\" />;\n    }\n\n    return icon || null;\n}\n\nexport function getSelectIdIcon(obj, imagePrefix) {\n    imagePrefix = imagePrefix || '.';//http://localhost:8081';\n    let src = '';\n    const common = obj?.common;\n\n    if (common) {\n        const cIcon = common.icon;\n        if (cIcon) {\n            if (!cIcon.startsWith('data:image/')) {\n                if (cIcon.includes('.')) {\n                    let instance;\n                    if (obj.type === 'instance' || obj.type === 'adapter') {\n                        src = imagePrefix + '/adapter/' + common.name + '/' + cIcon;\n                    } else if (obj._id && obj._id.startsWith('system.adapter.')) {\n                        instance = obj._id.split('.', 3);\n                        if (cIcon[0] === '/') {\n                            instance[2] += cIcon;\n                        } else {\n                            instance[2] += '/' + cIcon;\n                        }\n                        src = imagePrefix + '/adapter/' + instance[2];\n                    } else {\n                        instance = obj._id.split('.', 2);\n                        if (cIcon[0] === '/') {\n                            instance[0] += cIcon;\n                        } else {\n                            instance[0] += '/' + cIcon;\n                        }\n                        src = imagePrefix + '/adapter/' + instance[0];\n                    }\n                } else {\n                    return null;\n                }\n            } else {\n                // base 64 image\n                src = cIcon;\n            }\n        }\n    }\n\n    return src || null;\n}\n\nclass Icon extends React.Component {\n    render() {\n        if (this.props.src) {\n            if (typeof this.props.src === 'string') {\n                if (this.props.src.length < 3) {\n                    return <span title={this.props.title || undefined} style={Object.assign({height: 27, marginTop: -8}, this.props.styleUTF8 || this.props.style)} className={ Utils.clsx(this.props.className, 'iconOwn') }>{this.props.src}</span>; // utf-8 char\n                } else {\n                    if (this.props.src.startsWith('data:image/svg')) {\n                        return <SVG title={this.props.title || undefined} src={this.props.src} className={ Utils.clsx(this.props.className, 'iconOwn') } width={this.props.style?.width || 28} height={this.props.style?.height || this.props.style?.width || 28} style={this.props.style || {}}/>;\n                    } else {\n                        return <img title={this.props.title || undefined} style={this.props.style || {}} className={ Utils.clsx(this.props.className, 'iconOwn') } src={ this.props.src } alt=\"\" />;\n                    }\n                }\n            } else {\n                return this.props.src;\n            }\n        } else {\n            return null;\n        }\n    }\n}\n\nIcon.propTypes = {\n    color: PropTypes.string,\n    title: PropTypes.string,\n    src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    className: PropTypes.string,\n    imagePrefix: PropTypes.string,\n    style: PropTypes.object,\n    styleUTF8: PropTypes.object,\n};\n\nexport default Icon;"],"file":"Icon.js"}

package/Components/IconPicker.js

@@ -0,0 +1,188 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDropzone = require("react-dropzone");
+
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
+
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
+
+var _IconSelector = _interopRequireDefault(require("./IconSelector"));
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _i18n = _interopRequireDefault(require("../i18n"));
+
+var _Utils = _interopRequireDefault(require("./Utils"));
+
+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 _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); }
+
+/**
+ * @typedef {object} IconPickerProps
+ * @property {string} [value] The value.
+ * @property {string} [label] The label.
+ * @property {boolean} [disabled] Set to true to disable the icon picker.
+ * @property {(icon: string) => void} onChange The icon change callback.
+ * @property {import('../Connection').default} socket The socket connection.
+ * @property {string} [imagePrefix] The image prefix (default: './files/')
+ * @property {React.CSSProperties} [style] Additional styling for this component.
+ * @property {string} [className] The CSS class name.
+ *
+ * @extends {React.Component<IconPickerProps>}
+ */
+var IconPicker = function IconPicker(props) {
+  var _props$customClasses, _props$customClasses2;
+
+  var IconCustom = props.icon;
+  var useStyles = (0, _makeStyles["default"])(function (theme) {
+    return {
+      formContainer: {
+        display: 'flex',
+        justifyContent: 'left',
+        alignItems: 'center'
+      },
+      formControl: {
+        display: 'flex',
+        padding: 24,
+        flexGrow: 1000
+      },
+      divContainer: {
+        width: 32 + 24,
+        height: 32,
+        whiteSpace: 'nowrap',
+        lineHeight: '32px',
+        marginRight: 8
+      },
+      dragField: {
+        textAlign: 'center',
+        display: 'table',
+        minHeight: 90,
+        width: 'calc(100% - 60px)',
+        border: '2px dashed #777',
+        borderRadius: 10,
+        padding: 4
+      },
+      formIcon: {
+        margin: 10,
+        opacity: 0.6
+      },
+      text: {
+        display: 'table-cell',
+        verticalAlign: 'middle'
+      }
+    };
+  });
+  var classes = useStyles();
+  var onDrop = (0, _react.useCallback)(function (acceptedFiles) {
+    var reader = new FileReader();
+    reader.addEventListener('load', function () {
+      return props.onChange(reader.result);
+    }, false);
+
+    if (acceptedFiles[0]) {
+      reader.readAsDataURL(acceptedFiles[0]);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  var _useDropzone = (0, _reactDropzone.useDropzone)({
+    onDrop: onDrop
+  }),
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps,
+      isDragActive = _useDropzone.isDragActive;
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.formContainer
+  }, IconCustom ? /*#__PURE__*/_react["default"].createElement(IconCustom, {
+    className: classes.formIcon
+  }) : null, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+    variant: "standard",
+    className: classes.formControl,
+    style: {
+      padding: 3
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
+    shrink: true,
+    classes: {
+      root: (_props$customClasses = props.customClasses) === null || _props$customClasses === void 0 ? void 0 : _props$customClasses.label
+    }
+  }, props.label), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.formContainer
+  }, props.value ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.divContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    alt: "",
+    className: _Utils["default"].clsx(props.previewClassName, (_props$customClasses2 = props.customClasses) === null || _props$customClasses2 === void 0 ? void 0 : _props$customClasses2.icon),
+    src: props.value
+  }), !props.disabled && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    style: {
+      verticalAlign: 'top'
+    },
+    title: _i18n["default"].t('ra_Clear icon'),
+    size: "small",
+    onClick: function onClick() {
+      return props.onChange('');
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], null))) : !props.disabled && /*#__PURE__*/_react["default"].createElement(_IconSelector["default"], {
+    icons: props.icons,
+    onlyRooms: props.onlyRooms,
+    onlyDevices: props.onlyDevices,
+    onSelect: function onSelect(base64) {
+      return props.onChange(base64);
+    },
+    t: _i18n["default"].t,
+    lang: _i18n["default"].getLanguage()
+  }), !props.disabled && /*#__PURE__*/_react["default"].createElement("div", _extends({}, getRootProps(), {
+    className: classes.dragField,
+    style: isDragActive ? {
+      backgroundColor: 'rgba(0, 255, 0, 0.1)'
+    } : {
+      cursor: 'pointer'
+    }
+  }), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), isDragActive ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: classes.text
+  }, _i18n["default"].t('ra_Drop the files here...')) : /*#__PURE__*/_react["default"].createElement("span", {
+    className: classes.text
+  }, _i18n["default"].t("ra_Drag 'n' drop some files here, or click to select files"))))));
+};
+
+IconPicker.propTypes = {
+  previewClassName: _propTypes["default"].string,
+  icon: _propTypes["default"].object,
+  customClasses: _propTypes["default"].object,
+  label: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  value: _propTypes["default"].any,
+  disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  icons: _propTypes["default"].array,
+  onlyRooms: _propTypes["default"].bool,
+  onlyDevices: _propTypes["default"].bool
+};
+/** @type {typeof IconPicker} */
+
+var _default = IconPicker;
+exports["default"] = _default;
+//# sourceMappingURL=IconPicker.js.map

package/Components/IconPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["IconPicker.js"],"names":["IconPicker","props","IconCustom","icon","useStyles","theme","formContainer","display","justifyContent","alignItems","formControl","padding","flexGrow","divContainer","width","height","whiteSpace","lineHeight","marginRight","dragField","textAlign","minHeight","border","borderRadius","formIcon","margin","opacity","text","verticalAlign","classes","onDrop","acceptedFiles","reader","FileReader","addEventListener","onChange","result","readAsDataURL","getRootProps","getInputProps","isDragActive","root","customClasses","label","value","Utils","clsx","previewClassName","disabled","I18n","t","icons","onlyRooms","onlyDevices","base64","getLanguage","backgroundColor","cursor","propTypes","PropTypes","string","object","name","any","bool","func","array"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIA,UAAU,GAAG,SAAbA,UAAa,CAAUC,KAAV,EAAiB;AAAA;;AAC9B,MAAIC,UAAU,GAAGD,KAAK,CAACE,IAAvB;AAEA,MAAMC,SAAS,GAAG,4BAAW,UAAAC,KAAK;AAAA,WAAK;AACnCC,MAAAA,aAAa,EAAG;AACZC,QAAAA,OAAO,EAAE,MADG;AAEZC,QAAAA,cAAc,EAAE,MAFJ;AAGZC,QAAAA,UAAU,EAAE;AAHA,OADmB;AAMnCC,MAAAA,WAAW,EAAG;AACVH,QAAAA,OAAO,EAAE,MADC;AAEVI,QAAAA,OAAO,EAAE,EAFC;AAGVC,QAAAA,QAAQ,EAAE;AAHA,OANqB;AAWnCC,MAAAA,YAAY,EAAE;AACVC,QAAAA,KAAK,EAAE,KAAK,EADF;AAEVC,QAAAA,MAAM,EAAE,EAFE;AAGVC,QAAAA,UAAU,EAAE,QAHF;AAIVC,QAAAA,UAAU,EAAE,MAJF;AAKVC,QAAAA,WAAW,EAAE;AALH,OAXqB;AAkBnCC,MAAAA,SAAS,EAAE;AACPC,QAAAA,SAAS,EAAE,QADJ;AAEPb,QAAAA,OAAO,EAAE,OAFF;AAGPc,QAAAA,SAAS,EAAE,EAHJ;AAIPP,QAAAA,KAAK,EAAE,mBAJA;AAKPQ,QAAAA,MAAM,EAAE,iBALD;AAMPC,QAAAA,YAAY,EAAE,EANP;AAOPZ,QAAAA,OAAO,EAAE;AAPF,OAlBwB;AA2BnCa,MAAAA,QAAQ,EAAG;AACPC,QAAAA,MAAM,EAAE,EADD;AAEPC,QAAAA,OAAO,EAAE;AAFF,OA3BwB;AA+BnCC,MAAAA,IAAI,EAAE;AACFpB,QAAAA,OAAO,EAAE,YADP;AAEFqB,QAAAA,aAAa,EAAE;AAFb;AA/B6B,KAAL;AAAA,GAAhB,CAAlB;AAqCA,MAAMC,OAAO,GAAGzB,SAAS,EAAzB;AAEA,MAAM0B,MAAM,GAAG,wBAAY,UAAAC,aAAa,EAAI;AACxC,QAAMC,MAAM,GAAG,IAAIC,UAAJ,EAAf;AAEAD,IAAAA,MAAM,CAACE,gBAAP,CAAwB,MAAxB,EAAgC;AAAA,aAC5BjC,KAAK,CAACkC,QAAN,CAAeH,MAAM,CAACI,MAAtB,CAD4B;AAAA,KAAhC,EACmC,KADnC;;AAGA,QAAIL,aAAa,CAAC,CAAD,CAAjB,EAAsB;AAClBC,MAAAA,MAAM,CAACK,aAAP,CAAqBN,aAAa,CAAC,CAAD,CAAlC;AACH;AACJ,GATc,EASZ,EATY,CAAf,CA1C8B,CAmDtB;;AAER,qBAAoD,gCAAY;AAACD,IAAAA,MAAM,EAANA;AAAD,GAAZ,CAApD;AAAA,MAAOQ,YAAP,gBAAOA,YAAP;AAAA,MAAqBC,aAArB,gBAAqBA,aAArB;AAAA,MAAoCC,YAApC,gBAAoCA,YAApC;;AAEA,sBAAO;AAAK,IAAA,SAAS,EAAEX,OAAO,CAACvB;AAAxB,KACFJ,UAAU,gBAAG,gCAAC,UAAD;AAAY,IAAA,SAAS,EAAG2B,OAAO,CAACL;AAAhC,IAAH,GAAkD,IAD1D,eAEH,gCAAC,uBAAD;AAAa,IAAA,OAAO,EAAC,UAArB;AAAgC,IAAA,SAAS,EAAEK,OAAO,CAACnB,WAAnD;AAAgE,IAAA,KAAK,EAAE;AAACC,MAAAA,OAAO,EAAE;AAAV;AAAvE,kBACI,gCAAC,sBAAD;AAAY,IAAA,MAAM,MAAlB;AAAmB,IAAA,OAAO,EAAE;AAAC8B,MAAAA,IAAI,0BAAExC,KAAK,CAACyC,aAAR,yDAAE,qBAAqBC;AAA5B;AAA5B,KACM1C,KAAK,CAAC0C,KADZ,CADJ,eAII;AAAK,IAAA,SAAS,EAAGd,OAAO,CAACvB;AAAzB,KACKL,KAAK,CAAC2C,KAAN,gBACG;AAAK,IAAA,SAAS,EAAGf,OAAO,CAAChB;AAAzB,kBACI,gCAAC,gBAAD;AAAM,IAAA,GAAG,EAAC,EAAV;AAAa,IAAA,SAAS,EAAEgC,kBAAMC,IAAN,CAAW7C,KAAK,CAAC8C,gBAAjB,2BAAmC9C,KAAK,CAACyC,aAAzC,0DAAmC,sBAAqBvC,IAAxD,CAAxB;AAAuF,IAAA,GAAG,EAAEF,KAAK,CAAC2C;AAAlG,IADJ,EAEK,CAAC3C,KAAK,CAAC+C,QAAP,iBAAmB,gCAAC,sBAAD;AAChB,IAAA,KAAK,EAAE;AAACpB,MAAAA,aAAa,EAAE;AAAhB,KADS;AAEhB,IAAA,KAAK,EAAEqB,iBAAKC,CAAL,CAAO,eAAP,CAFS;AAGhB,IAAA,IAAI,EAAC,OAHW;AAIhB,IAAA,OAAO,EAAE;AAAA,aAAMjD,KAAK,CAACkC,QAAN,CAAe,EAAf,CAAN;AAAA;AAJO,kBAMhB,gCAAC,iBAAD,OANgB,CAFxB,CADH,GAaI,CAAClC,KAAK,CAAC+C,QAAP,iBAAmB,gCAAC,wBAAD;AAChB,IAAA,KAAK,EAAE/C,KAAK,CAACkD,KADG;AAEhB,IAAA,SAAS,EAAElD,KAAK,CAACmD,SAFD;AAGhB,IAAA,WAAW,EAAEnD,KAAK,CAACoD,WAHH;AAIhB,IAAA,QAAQ,EAAE,kBAAAC,MAAM;AAAA,aAAIrD,KAAK,CAACkC,QAAN,CAAemB,MAAf,CAAJ;AAAA,KAJA;AAKhB,IAAA,CAAC,EAAEL,iBAAKC,CALQ;AAMhB,IAAA,IAAI,EAAED,iBAAKM,WAAL;AANU,IAd5B,EAwBK,CAACtD,KAAK,CAAC+C,QAAP,iBAAmB,oDACZV,YAAY,EADA;AAEhB,IAAA,SAAS,EAAET,OAAO,CAACV,SAFH;AAGhB,IAAA,KAAK,EAAEqB,YAAY,GAAG;AAACgB,MAAAA,eAAe,EAAE;AAAlB,KAAH,GAA+C;AAACC,MAAAA,MAAM,EAAE;AAAT;AAHlD,mBAKhB,yCAAWlB,aAAa,EAAxB,CALgB,EAOZC,YAAY,gBACR;AAAM,IAAA,SAAS,EAAEX,OAAO,CAACF;AAAzB,KAAgCsB,iBAAKC,CAAL,CAAO,2BAAP,CAAhC,CADQ,gBAER;AAAM,IAAA,SAAS,EAAErB,OAAO,CAACF;AAAzB,KAAgCsB,iBAAKC,CAAL,8DAAhC,CATQ,CAxBxB,CAJJ,CAFG,CAAP;AA6CH,CApGD;;AAsGAlD,UAAU,CAAC0D,SAAX,GAAuB;AACnBX,EAAAA,gBAAgB,EAAEY,sBAAUC,MADT;AAEnBzD,EAAAA,IAAI,EAAEwD,sBAAUE,MAFG;AAGnBnB,EAAAA,aAAa,EAAEiB,sBAAUE,MAHN;AAInBlB,EAAAA,KAAK,EAAEgB,sBAAUC,MAJE;AAKnBE,EAAAA,IAAI,EAAEH,sBAAUC,MALG;AAMnBhB,EAAAA,KAAK,EAAEe,sBAAUI,GANE;AAOnBf,EAAAA,QAAQ,EAAEW,sBAAUK,IAPD;AAQnB7B,EAAAA,QAAQ,EAAEwB,sBAAUM,IARD;AAUnBd,EAAAA,KAAK,EAAEQ,sBAAUO,KAVE;AAWnBd,EAAAA,SAAS,EAAEO,sBAAUK,IAXF;AAYnBX,EAAAA,WAAW,EAAEM,sBAAUK;AAZJ,CAAvB;AAeA;;eACehE,U","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {useDropzone} from 'react-dropzone';\nimport makeStyles from '@mui/styles/makeStyles';\n\nimport InputLabel from '@mui/material/InputLabel';\nimport FormControl from '@mui/material/FormControl';\nimport IconButton from '@mui/material/IconButton';\nimport ClearIcon from '@mui/icons-material/Clear';\n\nimport IconSelector from './IconSelector';\nimport Icon from './Icon';\nimport I18n from '../i18n';\nimport Utils from './Utils';\n\n/**\n * @typedef {object} IconPickerProps\n * @property {string} [value] The value.\n * @property {string} [label] The label.\n * @property {boolean} [disabled] Set to true to disable the icon picker.\n * @property {(icon: string) => void} onChange The icon change callback.\n * @property {import('../Connection').default} socket The socket connection.\n * @property {string} [imagePrefix] The image prefix (default: './files/')\n * @property {React.CSSProperties} [style] Additional styling for this component.\n * @property {string} [className] The CSS class name.\n *\n * @extends {React.Component<IconPickerProps>}\n */\nlet IconPicker = function (props) {\n    let IconCustom = props.icon;\n\n    const useStyles = makeStyles(theme => ({\n        formContainer : {\n            display: 'flex',\n            justifyContent: 'left',\n            alignItems: 'center'\n        },\n        formControl : {\n            display: 'flex',\n            padding: 24,\n            flexGrow: 1000\n        },\n        divContainer: {\n            width: 32 + 24,\n            height: 32,\n            whiteSpace: 'nowrap',\n            lineHeight: '32px',\n            marginRight: 8\n        },\n        dragField: {\n            textAlign: 'center',\n            display: 'table',\n            minHeight: 90,\n            width: 'calc(100% - 60px)',\n            border: '2px dashed #777',\n            borderRadius: 10,\n            padding: 4,\n        },\n        formIcon : {\n            margin: 10,\n            opacity: 0.6\n        },\n        text: {\n            display: 'table-cell',\n            verticalAlign: 'middle',\n        }\n    }));\n\n    const classes = useStyles();\n\n    const onDrop = useCallback(acceptedFiles => {\n        const reader = new FileReader();\n\n        reader.addEventListener('load', () =>\n            props.onChange(reader.result), false);\n\n        if (acceptedFiles[0]) {\n            reader.readAsDataURL(acceptedFiles[0]);\n        }\n    }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n    const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});\n\n    return <div className={classes.formContainer}>\n        {IconCustom ? <IconCustom className={ classes.formIcon }/> : null}\n        <FormControl variant=\"standard\" className={classes.formControl} style={{padding: 3}}>\n            <InputLabel shrink classes={{root: props.customClasses?.label}}>\n                { props.label }\n            </InputLabel>\n            <div className={ classes.formContainer }>\n                {props.value ?\n                    <div className={ classes.divContainer }>\n                        <Icon alt=\"\" className={Utils.clsx(props.previewClassName, props.customClasses?.icon)} src={props.value}/>\n                        {!props.disabled && <IconButton\n                            style={{verticalAlign: 'top'}}\n                            title={I18n.t('ra_Clear icon')}\n                            size=\"small\"\n                            onClick={() => props.onChange('')}\n                        >\n                            <ClearIcon/>\n                        </IconButton>}\n                    </div>\n                    :\n                    (!props.disabled && <IconSelector\n                        icons={props.icons}\n                        onlyRooms={props.onlyRooms}\n                        onlyDevices={props.onlyDevices}\n                        onSelect={base64 => props.onChange(base64)}\n                        t={I18n.t}\n                        lang={I18n.getLanguage()}\n                    />)\n                }\n\n                {!props.disabled && <div\n                    {...getRootProps()}\n                    className={classes.dragField}\n                    style={isDragActive ? {backgroundColor: 'rgba(0, 255, 0, 0.1)'} : {cursor: 'pointer'}}\n                >\n                    <input {...getInputProps()} />\n                    {\n                        isDragActive ?\n                            <span className={classes.text}>{I18n.t('ra_Drop the files here...')}</span> :\n                            <span className={classes.text}>{I18n.t(`ra_Drag 'n' drop some files here, or click to select files`)}</span>\n                    }\n                </div>}\n            </div>\n        </FormControl>\n    </div>;\n};\n\nIconPicker.propTypes = {\n    previewClassName: PropTypes.string,\n    icon: PropTypes.object,\n    customClasses: PropTypes.object,\n    label: PropTypes.string,\n    name: PropTypes.string,\n    value: PropTypes.any,\n    disabled: PropTypes.bool,\n    onChange: PropTypes.func,\n\n    icons: PropTypes.array,\n    onlyRooms: PropTypes.bool,\n    onlyDevices: PropTypes.bool,\n};\n\n/** @type {typeof IconPicker} */\nexport default IconPicker;"],"file":"IconPicker.js"}