@iobroker/adapter-react-v5 4.9.11 → 4.10.0

package/Components/Icon.js

@@ -1,173 +1,116 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-exports.getSelectIdIcon = getSelectIdIcon;
-exports.getSystemIcon = getSystemIcon;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactInlinesvg = _interopRequireDefault(require("react-inlinesvg"));
-var _iconsMaterial = require("@mui/icons-material");
-var _IconAlias = _interopRequireDefault(require("../icons/IconAlias"));
-var _Utils = _interopRequireDefault(require("./Utils"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectIdIcon = exports.getSystemIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
+const icons_material_1 = require("@mui/icons-material");
+const IconAlias_1 = __importDefault(require("../icons/IconAlias"));
+const Utils_1 = __importDefault(require("./Utils"));
 function getSystemIcon(obj) {
-  var icon;
-  var id = obj === null || obj === void 0 ? void 0 : obj._id;
-  if (!id) {
-    return null;
-  }
-
-  // system or design has special icons
-  if (id.startsWith('_design/') || id === 'system') {
-    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.SettingsApplications, {
-      className: "iconOwn"
-    });
-  } else if (id === '0_userdata' || id === '0_userdata.0') {
-    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Photo, {
-      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(_iconsMaterial.SettingsApplications, {
-      className: "iconOwn"
-    });
-  } else if (id === 'system.group') {
-    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.SupervisedUserCircle, {
-      className: "iconOwn"
-    });
-  } else if (id === 'system.user') {
-    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.PersonOutlined, {
-      className: "iconOwn"
-    });
-  } else if (id === 'system.host') {
-    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Router, {
-      className: "iconOwn"
-    });
-  } else if (id.endsWith('.connection') || id.endsWith('.connected')) {
-    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Wifi, {
-      className: "iconOwn"
-    });
-  } else if (id.endsWith('.info')) {
-    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Info, {
-      className: "iconOwn"
-    });
-  } else if ((obj === null || obj === void 0 ? void 0 : obj.type) === 'meta') {
-    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Description, {
-      className: "iconOwn"
-    });
-  }
-  return icon || null;
+    let icon;
+    const id = obj === null || obj === void 0 ? void 0 : obj._id;
+    if (!id) {
+        return null;
+    }
+    // system or design has special icons
+    if (id.startsWith('_design/') || (id === 'system')) {
+        icon = react_1.default.createElement(icons_material_1.SettingsApplications, { className: "iconOwn" });
+    }
+    else if (id === '0_userdata' || id === '0_userdata.0') {
+        icon = react_1.default.createElement(icons_material_1.Photo, { className: "iconOwn" });
+    }
+    else if (id === 'alias' || id === 'alias.0') {
+        icon = react_1.default.createElement(IconAlias_1.default, { className: "iconOwn" });
+    }
+    else if (id === 'system.adapter') {
+        icon = react_1.default.createElement(icons_material_1.SettingsApplications, { className: "iconOwn" });
+    }
+    else if (id === 'system.group') {
+        icon = react_1.default.createElement(icons_material_1.SupervisedUserCircle, { className: "iconOwn" });
+    }
+    else if (id === 'system.user') {
+        icon = react_1.default.createElement(icons_material_1.PersonOutlined, { className: "iconOwn" });
+    }
+    else if (id === 'system.host') {
+        icon = react_1.default.createElement(icons_material_1.Router, { className: "iconOwn" });
+    }
+    else if (id.endsWith('.connection') || id.endsWith('.connected')) {
+        icon = react_1.default.createElement(icons_material_1.Wifi, { className: "iconOwn" });
+    }
+    else if (id.endsWith('.info')) {
+        icon = react_1.default.createElement(icons_material_1.Info, { className: "iconOwn" });
+    }
+    else if ((obj === null || obj === void 0 ? void 0 : obj.type) === 'meta') {
+        icon = react_1.default.createElement(icons_material_1.Description, { className: "iconOwn" });
+    }
+    return icon || null;
 }
+exports.getSystemIcon = getSystemIcon;
 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 = "".concat(imagePrefix, "/adapter/").concat(common.name, "/").concat(cIcon);
-          } else if (obj._id && obj._id.startsWith('system.adapter.')) {
-            instance = obj._id.split('.', 3);
-            if (cIcon[0] === '/') {
-              instance[2] += cIcon;
-            } else {
-              instance[2] += "/".concat(cIcon);
+    imagePrefix = imagePrefix || '.'; // http://localhost:8081';
+    let src = '';
+    const common = obj === null || obj === void 0 ? void 0 : obj.common;
+    if (common) {
+        const cIcon = common.icon;
+        if (cIcon) {
+            if (!cIcon.startsWith('data:image/')) {
+                if (cIcon.includes('.')) {
+                    let 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;
+                }
             }
-            src = "".concat(imagePrefix, "/adapter/").concat(instance[2]);
-          } else {
-            instance = obj._id.split('.', 2);
-            if (cIcon[0] === '/') {
-              instance[0] += cIcon;
-            } else {
-              instance[0] += "/".concat(cIcon);
+            else {
+                // base 64 image
+                src = cIcon;
             }
-            src = "".concat(imagePrefix, "/adapter/").concat(instance[0]);
-          }
-        } else {
-          return null;
         }
-      } else {
-        // base 64 image
-        src = cIcon;
-      }
     }
-  }
-  return src || null;
+    return src || null;
 }
-var Icon = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Icon, _React$Component);
-  function Icon() {
-    (0, _classCallCheck2["default"])(this, Icon);
-    return _callSuper(this, Icon, arguments);
-  }
-  (0, _createClass2["default"])(Icon, [{
-    key: "render",
-    value: function render() {
-      if (this.props.src) {
-        if (typeof this.props.src === 'string') {
-          if (this.props.src.length < 3) {
-            // utf-8 char
-            return /*#__PURE__*/_react["default"].createElement("span", {
-              title: this.props.title || undefined,
-              style: _objectSpread({
-                height: 27,
-                marginTop: -8
-              }, this.props.styleUTF8 || this.props.style),
-              className: _Utils["default"].clsx(this.props.className, 'iconOwn')
-            }, this.props.src);
-          }
-          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 || {}
-            });
-          }
-          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: ""
-          });
+exports.getSelectIdIcon = getSelectIdIcon;
+const Icon = (props) => {
+    var _a, _b, _c;
+    if (props.src) {
+        if (typeof props.src === 'string') {
+            if (props.src.length < 3) {
+                // utf-8 char
+                return react_1.default.createElement("span", { title: props.title || undefined, style: Object.assign({ height: 27, marginTop: -8 }, (props.styleUTF8 || props.style)), className: Utils_1.default.clsx(props.className, 'iconOwn') }, props.src);
+            }
+            if (props.src.startsWith('data:image/svg')) {
+                return react_1.default.createElement(react_inlinesvg_1.default, { title: props.title || undefined, src: props.src, className: Utils_1.default.clsx(props.className, 'iconOwn'), width: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.width) || 28, height: ((_b = props.style) === null || _b === void 0 ? void 0 : _b.height) || ((_c = props.style) === null || _c === void 0 ? void 0 : _c.width) || 28, style: props.style || {} });
+            }
+            return react_1.default.createElement("img", { title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: props.src, alt: "" });
         }
-        return this.props.src;
-      }
-      return null;
+        return props.src;
     }
-  }]);
-  return Icon;
-}(_react["default"].Component);
-Icon.propTypes = {
-  title: _propTypes["default"].string,
-  src: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired,
-  className: _propTypes["default"].string,
-  style: _propTypes["default"].object,
-  styleUTF8: _propTypes["default"].object
+    return null;
 };
-var _default = exports["default"] = Icon;
-//# sourceMappingURL=Icon.js.map
+exports.default = Icon;

package/Components/IconPicker.d.ts

@@ -1,65 +1,20 @@
-export default IconPicker;
-export type IconPickerProps = {
-    /**
-     * The value.
-     */
-    value?: string;
-    /**
-     * The label.
-     */
+import React from 'react';
+interface IconPickerProps {
+    previewClassName?: string;
+    /** Custom icon element. */
+    icon?: React.ComponentType<any>;
+    customClasses?: Record<string, string>;
+    /** The label. */
     label?: string;
-    /**
-     * Set to true to disable the icon picker.
-     */
+    /** The value. */
+    value?: any;
+    /** Set to true to disable the icon picker. */
     disabled?: boolean;
-    /**
-     * The icon change callback.
-     */
+    /** The icon change callback. */
     onChange: (icon: string) => void;
-    /**
-     * The socket connection.
-     */
-    socket: import('../Connection').default;
-    /**
-     * The image prefix (default: './files/')
-     */
-    imagePrefix?: string;
-    /**
-     * Additional styling for this component.
-     */
-    style?: React.CSSProperties;
-    /**
-     * The CSS class name.
-     */
-    className?: string;
-};
-/**
- * @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>}
- */
-declare function IconPicker(props: any): React.JSX.Element;
-declare namespace IconPicker {
-    namespace propTypes {
-        let previewClassName: PropTypes.Requireable<string>;
-        let icon: PropTypes.Requireable<object>;
-        let customClasses: PropTypes.Requireable<object>;
-        let label: PropTypes.Requireable<string>;
-        let value: PropTypes.Requireable<any>;
-        let disabled: PropTypes.Requireable<boolean>;
-        let onChange: PropTypes.Validator<(...args: any[]) => any>;
-        let icons: PropTypes.Requireable<any[]>;
-        let onlyRooms: PropTypes.Requireable<boolean>;
-        let onlyDevices: PropTypes.Requireable<boolean>;
-    }
+    icons: any[];
+    onlyRooms: boolean;
+    onlyDevices: boolean;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+declare const IconPicker: (props: IconPickerProps) => React.JSX.Element;
+export default IconPicker;

package/Components/IconPicker.js

@@ -1,162 +1,104 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDropzone = require("react-dropzone");
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
-var _material = require("@mui/material");
-var _iconsMaterial = require("@mui/icons-material");
-var _IconSelector = _interopRequireDefault(require("./IconSelector"));
-var _Icon = _interopRequireDefault(require("./Icon"));
-var _i18n = _interopRequireDefault(require("../i18n"));
-var _Utils = _interopRequireDefault(require("./Utils"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-/**
- * @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 () {
-    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(_material.FormControl, {
-    variant: "standard",
-    className: classes.formControl,
-    style: {
-      padding: 3
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_material.InputLabel, {
-    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(_material.IconButton, {
-    style: {
-      verticalAlign: 'top'
-    },
-    title: _i18n["default"].t('ra_Clear icon'),
-    size: "small",
-    onClick: function onClick() {
-      return props.onChange('');
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-  }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Clear, 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", (0, _extends2["default"])({}, 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'))))));
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-IconPicker.propTypes = {
-  previewClassName: _propTypes["default"].string,
-  icon: _propTypes["default"].object,
-  customClasses: _propTypes["default"].object,
-  label: _propTypes["default"].string,
-  value: _propTypes["default"].any,
-  disabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func.isRequired,
-  icons: _propTypes["default"].array,
-  onlyRooms: _propTypes["default"].bool,
-  onlyDevices: _propTypes["default"].bool
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_dropzone_1 = require("react-dropzone");
+const styles_1 = require("@mui/styles");
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const IconSelector_1 = __importDefault(require("./IconSelector"));
+const Icon_1 = __importDefault(require("./Icon"));
+const i18n_1 = __importDefault(require("../i18n"));
+const Utils_1 = __importDefault(require("./Utils"));
+const IconPicker = (props) => {
+    var _a, _b;
+    const IconCustom = props.icon;
+    const useStyles = (0, styles_1.makeStyles)(() => ({
+        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',
+        },
+    }));
+    const classes = useStyles();
+    const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
+        const reader = new FileReader();
+        reader.addEventListener('load', () => props.onChange(reader.result), false);
+        if (acceptedFiles[0]) {
+            reader.readAsDataURL(acceptedFiles[0]);
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const { getRootProps, getInputProps, isDragActive } = (0, react_dropzone_1.useDropzone)({ onDrop });
+    return react_1.default.createElement("div", { className: classes.formContainer },
+        IconCustom ? react_1.default.createElement(IconCustom, { className: classes.formIcon }) : null,
+        react_1.default.createElement(material_1.FormControl, { variant: "standard", className: classes.formControl, style: { padding: 3 } },
+            react_1.default.createElement(material_1.InputLabel, { shrink: true, classes: { root: (_a = props.customClasses) === null || _a === void 0 ? void 0 : _a.label } }, props.label),
+            react_1.default.createElement("div", { className: classes.formContainer },
+                props.value ?
+                    react_1.default.createElement("div", { className: classes.divContainer },
+                        react_1.default.createElement(Icon_1.default, { className: Utils_1.default.clsx(props.previewClassName, (_b = props.customClasses) === null || _b === void 0 ? void 0 : _b.icon), src: props.value }),
+                        !props.disabled && react_1.default.createElement(material_1.IconButton, { style: { verticalAlign: 'top' }, title: i18n_1.default.t('ra_Clear icon'), size: "small", onClick: () => props.onChange('') },
+                            react_1.default.createElement(icons_material_1.Clear, null)))
+                    :
+                        (!props.disabled && react_1.default.createElement(IconSelector_1.default, { icons: props.icons, onlyRooms: props.onlyRooms, onlyDevices: props.onlyDevices, onSelect: (base64) => props.onChange(base64), t: i18n_1.default.t, lang: i18n_1.default.getLanguage() })),
+                !props.disabled && react_1.default.createElement("div", Object.assign({}, getRootProps(), { className: classes.dragField, style: isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' } }),
+                    react_1.default.createElement("input", Object.assign({}, getInputProps())),
+                    isDragActive ?
+                        react_1.default.createElement("span", { className: classes.text }, i18n_1.default.t('ra_Drop the files here...')) :
+                        react_1.default.createElement("span", { className: classes.text }, i18n_1.default.t('ra_Drag \'n\' drop some files here, or click to select files'))))));
 };
-
-/** @type {typeof IconPicker} */
-var _default = exports["default"] = IconPicker;
-//# sourceMappingURL=IconPicker.js.map
+exports.default = IconPicker;