@iobroker/adapter-react-v5 4.9.11 → 4.10.0

package/Components/UploadImage.js

@@ -1,324 +1,531 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-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 = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
-var _reactCropper = require("react-cropper");
-var _styles = require("@mui/styles");
-var _material = require("@mui/material");
-var _iconsMaterial = require("@mui/icons-material");
-var _fa = require("react-icons/fa");
-var _Utils = _interopRequireDefault(require("./Utils"));
-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 __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_dropzone_1 = __importDefault(require("react-dropzone"));
+const react_cropper_1 = require("react-cropper");
+const styles_1 = require("@mui/styles");
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const fa_1 = require("react-icons/fa");
+const Utils_1 = __importDefault(require("./Utils"));
+const i18n_1 = __importDefault(require("../i18n"));
 // import 'cropperjs/dist/cropper.css';
-var cropperStyles = "\n/*!\n * Cropper.js v1.5.12\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2021-06-12T08:00:11.623Z\n */\n\n.cropper-container {\n  direction: ltr;\n  font-size: 0;\n  line-height: 0;\n  position: relative;\n  -ms-touch-action: none;\n  touch-action: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.cropper-container img {\n  display: block;\n  height: 100%;\n  image-orientation: 0deg;\n  max-height: none !important;\n  max-width: none !important;\n  min-height: 0 !important;\n  min-width: 0 !important;\n  width: 100%;\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n  overflow: hidden;\n}\n\n.cropper-drag-box {\n  background-color: #fff;\n  opacity: 0;\n}\n\n.cropper-modal {\n  background-color: #000;\n  opacity: 0.5;\n}\n\n.cropper-view-box {\n  display: block;\n  height: 100%;\n  outline: 1px solid #39f;\n  outline-color: rgba(51, 153, 255, 0.75);\n  overflow: hidden;\n  width: 100%;\n}\n\n.cropper-dashed {\n  border: 0 dashed #eee;\n  display: block;\n  opacity: 0.5;\n  position: absolute;\n}\n\n.cropper-dashed.dashed-h {\n  border-bottom-width: 1px;\n  border-top-width: 1px;\n  height: calc(100% / 3);\n  left: 0;\n  top: calc(100% / 3);\n  width: 100%;\n}\n\n.cropper-dashed.dashed-v {\n  border-left-width: 1px;\n  border-right-width: 1px;\n  height: 100%;\n  left: calc(100% / 3);\n  top: 0;\n  width: calc(100% / 3);\n}\n\n.cropper-center {\n  display: block;\n  height: 0;\n  left: 50%;\n  opacity: 0.75;\n  position: absolute;\n  top: 50%;\n  width: 0;\n}\n\n.cropper-center::before,\n.cropper-center::after {\n  background-color: #eee;\n  content: ' ';\n  display: block;\n  position: absolute;\n}\n\n.cropper-center::before {\n  height: 1px;\n  left: -3px;\n  top: 0;\n  width: 7px;\n}\n\n.cropper-center::after {\n  height: 7px;\n  left: 0;\n  top: -3px;\n  width: 1px;\n}\n\n.cropper-face,\n.cropper-line,\n.cropper-point {\n  display: block;\n  height: 100%;\n  opacity: 0.1;\n  position: absolute;\n  width: 100%;\n}\n\n.cropper-face {\n  background-color: #fff;\n  left: 0;\n  top: 0;\n}\n\n.cropper-line {\n  background-color: #39f;\n}\n\n.cropper-line.line-e {\n  cursor: ew-resize;\n  right: -3px;\n  top: 0;\n  width: 5px;\n}\n\n.cropper-line.line-n {\n  cursor: ns-resize;\n  height: 5px;\n  left: 0;\n  top: -3px;\n}\n\n.cropper-line.line-w {\n  cursor: ew-resize;\n  left: -3px;\n  top: 0;\n  width: 5px;\n}\n\n.cropper-line.line-s {\n  bottom: -3px;\n  cursor: ns-resize;\n  height: 5px;\n  left: 0;\n}\n\n.cropper-point {\n  background-color: #39f;\n  height: 5px;\n  opacity: 0.75;\n  width: 5px;\n}\n\n.cropper-point.point-e {\n  cursor: ew-resize;\n  margin-top: -3px;\n  right: -3px;\n  top: 50%;\n}\n\n.cropper-point.point-n {\n  cursor: ns-resize;\n  left: 50%;\n  margin-left: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-w {\n  cursor: ew-resize;\n  left: -3px;\n  margin-top: -3px;\n  top: 50%;\n}\n\n.cropper-point.point-s {\n  bottom: -3px;\n  cursor: s-resize;\n  left: 50%;\n  margin-left: -3px;\n}\n\n.cropper-point.point-ne {\n  cursor: nesw-resize;\n  right: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-nw {\n  cursor: nwse-resize;\n  left: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-sw {\n  bottom: -3px;\n  cursor: nesw-resize;\n  left: -3px;\n}\n\n.cropper-point.point-se {\n  bottom: -3px;\n  cursor: nwse-resize;\n  height: 20px;\n  opacity: 1;\n  right: -3px;\n  width: 20px;\n}\n\n@media (min-width: 768px) {\n  .cropper-point.point-se {\n    height: 15px;\n    width: 15px;\n  }\n}\n\n@media (min-width: 992px) {\n  .cropper-point.point-se {\n    height: 10px;\n    width: 10px;\n  }\n}\n\n@media (min-width: 1200px) {\n  .cropper-point.point-se {\n    height: 5px;\n    opacity: 0.75;\n    width: 5px;\n  }\n}\n\n.cropper-point.point-se::before {\n  background-color: #39f;\n  bottom: -50%;\n  content: ' ';\n  display: block;\n  height: 200%;\n  opacity: 0;\n  position: absolute;\n  right: -50%;\n  width: 200%;\n}\n\n.cropper-invisible {\n  opacity: 0;\n}\n\n.cropper-bg {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');\n}\n\n.cropper-hide {\n  display: block;\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.cropper-hidden {\n  display: none !important;\n}\n\n.cropper-move {\n  cursor: move;\n}\n\n.cropper-crop {\n  cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n  cursor: not-allowed;\n}\n";
-var styles = function styles() {
-  return {
+const cropperStyles = `
+/*!
+ * Cropper.js v1.5.12
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2021-06-12T08:00:11.623Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}
+`;
+const styles = {
     dropZone: {
-      width: '100%',
-      height: 100,
-      position: 'relative'
+        width: '100%',
+        height: 100,
+        position: 'relative',
     },
     dropZoneEmpty: {},
     image: {
-      objectFit: 'contain',
-      margin: 'auto',
-      display: 'flex',
-      width: '100%',
-      height: '100%'
+        objectFit: 'contain',
+        margin: 'auto',
+        display: 'flex',
+        width: '100%',
+        height: '100%',
     },
     uploadDiv: {
-      position: 'relative',
-      width: '100%',
-      height: 300,
-      opacity: 0.9,
-      marginTop: 30,
-      cursor: 'pointer',
-      outline: 'none'
+        position: 'relative',
+        width: '100%',
+        height: 300,
+        opacity: 0.9,
+        marginTop: 30,
+        cursor: 'pointer',
+        outline: 'none',
     },
     uploadDivDragging: {
-      opacity: 1,
-      background: 'rgba(128,255,128,0.1)'
+        opacity: 1,
+        background: 'rgba(128,255,128,0.1)',
     },
     uploadCenterDiv: {
-      margin: 5,
-      border: '3px dashed grey',
-      borderRadius: 5,
-      width: 'calc(100% - 10px)',
-      height: 'calc(100% - 10px)',
-      position: 'relative',
-      display: 'flex'
+        margin: 5,
+        border: '3px dashed grey',
+        borderRadius: 5,
+        width: 'calc(100% - 10px)',
+        height: 'calc(100% - 10px)',
+        position: 'relative',
+        display: 'flex',
     },
     uploadCenterIcon: {
-      paddingTop: 10,
-      width: 48,
-      height: 48
+        paddingTop: 10,
+        width: 48,
+        height: 48,
     },
     uploadCenterText: {
-      fontSize: 16
+        fontSize: 16,
     },
     uploadCenterTextAndIcon: {
-      textAlign: 'center',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
+        textAlign: 'center',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     disabledOpacity: {
-      opacity: 0.3,
-      cursor: 'default'
+        opacity: 0.3,
+        cursor: 'default',
     },
     buttonRemoveWrapper: {
-      position: 'absolute',
-      zIndex: 222,
-      right: 0
+        position: 'absolute',
+        zIndex: 222,
+        right: 0,
     },
     buttonCropWrapper: {
-      position: 'absolute',
-      zIndex: 222,
-      right: 0,
-      top: 50
+        position: 'absolute',
+        zIndex: 222,
+        right: 0,
+        top: 50,
     },
     error: {
-      border: '2px solid red',
-      boxSizing: 'border-box'
-    }
-  };
+        border: '2px solid red',
+        boxSizing: 'border-box',
+    },
 };
-var UploadImage = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(UploadImage, _Component);
-  function UploadImage(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, UploadImage);
-    _this = _callSuper(this, UploadImage, [props]);
-    _this.state = {
-      uploadFile: false,
-      anchorEl: null,
-      cropHandler: false
-    };
-    _this.cropperRef = /*#__PURE__*/(0, _react.createRef)();
-    if (!window.document.getElementById('cropper-style-json-component')) {
-      var style = window.document.createElement('style');
-      style.setAttribute('id', 'cropper-style-json-component');
-      style.innerHTML = cropperStyles;
-      window.document.head.appendChild(style);
-    }
-    return _this;
-  }
-  (0, _createClass2["default"])(UploadImage, [{
-    key: "onDrop",
-    value: function onDrop(acceptedFiles) {
-      var _this$props = this.props,
-        maxSize = _this$props.maxSize,
-        t = _this$props.t,
-        onChange = _this$props.onChange;
-      var file = acceptedFiles[0];
-      var reader = new FileReader();
-      reader.onabort = function () {
-        return console.log('file reading was aborted');
-      };
-      reader.onerror = function () {
-        return console.log('file reading has failed');
-      };
-      reader.onload = function () {
-        var ext = "image/".concat(file.name.split('.').pop().toLowerCase());
-        if (ext === 'image/jpg') {
-          ext = 'image/jpeg';
-        } else if (ext.includes('svg')) {
-          ext = 'image/svg+xml';
+class UploadImage extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            uploadFile: false,
+            anchorEl: null,
+            cropHandler: false,
+        };
+        this.cropperRef = (0, react_1.createRef)();
+        if (!window.document.getElementById('cropper-style-json-component')) {
+            const style = window.document.createElement('style');
+            style.setAttribute('id', 'cropper-style-json-component');
+            style.innerHTML = cropperStyles;
+            window.document.head.appendChild(style);
         }
-        if (file.size > maxSize) {
-          window.alert(t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));
-        } else {
-          var base64 = "data:".concat(ext, ";base64,").concat(btoa(new Uint8Array(reader.result).reduce(function (data, _byte) {
-            return data + String.fromCharCode(_byte);
-          }, '')));
-          onChange(base64);
-        }
-      };
-      reader.readAsArrayBuffer(file);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        disabled = _this$props2.disabled,
-        maxSize = _this$props2.maxSize,
-        classes = _this$props2.classes,
-        icon = _this$props2.icon,
-        t = _this$props2.t,
-        removeIconFunc = _this$props2.removeIconFunc,
-        accept = _this$props2.accept,
-        error = _this$props2.error,
-        crop = _this$props2.crop,
-        onChange = _this$props2.onChange;
-      var _this$state = this.state,
-        uploadFile = _this$state.uploadFile,
-        anchorEl = _this$state.anchorEl,
-        cropHandler = _this$state.cropHandler;
-      return /*#__PURE__*/React.createElement(_reactDropzone["default"], {
-        disabled: disabled || cropHandler,
-        key: "dropzone",
-        multiple: false,
-        accept: accept,
-        maxSize: maxSize,
-        onDragEnter: function onDragEnter() {
-          return _this2.setState({
-            uploadFile: 'dragging'
-          });
-        },
-        onDragLeave: function onDragLeave() {
-          return _this2.setState({
-            uploadFile: true
-          });
-        },
-        onDrop: function onDrop(acceptedFiles, errors) {
-          _this2.setState({
-            uploadFile: false
-          });
-          if (!acceptedFiles.length) {
-            window.alert(errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message || t('ra_Cannot upload'));
-          } else {
-            _this2.onDrop(acceptedFiles);
-          }
-        }
-      }, function (_ref) {
-        var getRootProps = _ref.getRootProps,
-          getInputProps = _ref.getInputProps;
-        return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-          className: _Utils["default"].clsx(classes.uploadDiv, uploadFile === 'dragging' && classes.uploadDivDragging, classes.dropZone, disabled && classes.disabledOpacity, !icon && classes.dropZoneEmpty)
-        }, getRootProps()), /*#__PURE__*/React.createElement("input", getInputProps()), /*#__PURE__*/React.createElement("div", {
-          className: _Utils["default"].clsx(classes.uploadCenterDiv, error && classes.error)
-        }, !icon ? /*#__PURE__*/React.createElement("div", {
-          className: classes.uploadCenterTextAndIcon
-        }, /*#__PURE__*/React.createElement(_fa.FaFileUpload, {
-          className: classes.uploadCenterIcon
-        }), /*#__PURE__*/React.createElement("div", {
-          className: classes.uploadCenterText
-        }, uploadFile === 'dragging' ? t('ra_Drop file here') : t('ra_Place your files here or click here to open the browse dialog'))) : removeIconFunc && !cropHandler && /*#__PURE__*/React.createElement("div", {
-          className: classes.buttonRemoveWrapper
-        }, /*#__PURE__*/React.createElement(_material.Tooltip, {
-          title: t('ra_Clear')
-        }, /*#__PURE__*/React.createElement(_material.IconButton, {
-          size: "large",
-          onClick: function onClick(e) {
-            removeIconFunc && removeIconFunc();
-            e.stopPropagation();
-          }
-        }, /*#__PURE__*/React.createElement(_iconsMaterial.Close, null)))), icon && crop && /*#__PURE__*/React.createElement("div", {
-          className: classes.buttonCropWrapper
-        }, /*#__PURE__*/React.createElement(_material.Tooltip, {
-          title: t('ra_Crop')
-        }, /*#__PURE__*/React.createElement(_material.IconButton, {
-          size: "large",
-          onClick: function onClick(e) {
-            if (!cropHandler) {
-              _this2.setState({
-                cropHandler: true
-              });
-            } else {
-              _this2.setState({
-                anchorEl: e.currentTarget
-              });
+    onDrop(acceptedFiles) {
+        const onChange = this.props.onChange;
+        const maxSize = this.props.maxSize || 10 * 1024;
+        const file = acceptedFiles[0];
+        const reader = new FileReader();
+        reader.onabort = () => console.log('file reading was aborted');
+        reader.onerror = () => console.log('file reading has failed');
+        reader.onload = () => {
+            var _a, _b;
+            if (!file || !file.name) {
+                return;
             }
-            e.stopPropagation();
-          }
-        }, /*#__PURE__*/React.createElement(_iconsMaterial.Crop, {
-          color: cropHandler ? 'primary' : 'inherit'
-        }))), /*#__PURE__*/React.createElement(_material.Menu, {
-          anchorEl: anchorEl,
-          keepMounted: true,
-          open: Boolean(anchorEl),
-          onClose: function onClose() {
-            return _this2.setState({
-              anchorEl: null
-            });
-          }
-        }, /*#__PURE__*/React.createElement(_material.MenuItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              anchorEl: null,
-              cropHandler: false
-            }, function () {
-              var _this2$cropperRef;
-              var imageElement = (_this2$cropperRef = _this2.cropperRef) === null || _this2$cropperRef === void 0 || (_this2$cropperRef = _this2$cropperRef.current) === null || _this2$cropperRef === void 0 ? void 0 : _this2$cropperRef.cropper;
-              onChange(imageElement.getCroppedCanvas().toDataURL());
-            });
-          }
-        }, t('ra_Save')), /*#__PURE__*/React.createElement(_material.MenuItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              anchorEl: null,
-              cropHandler: false
-            });
-          }
-        }, t('ra_Close')))), icon && !cropHandler ? /*#__PURE__*/React.createElement("img", {
-          src: icon,
-          className: classes.image,
-          alt: "icon"
-        }) : null, icon && crop && cropHandler ? /*#__PURE__*/React.createElement(_reactCropper.Cropper, {
-          ref: _this2.cropperRef,
-          className: classes.image,
-          src: icon,
-          initialAspectRatio: 1,
-          viewMode: 1,
-          guides: false,
-          minCropBoxHeight: 10,
-          minCropBoxWidth: 10,
-          background: false,
-          checkOrientation: false
-        }) : null));
-      });
+            const parts = (_a = file.name) === null || _a === void 0 ? void 0 : _a.split('.');
+            let ext = (parts === null || parts === void 0 ? void 0 : parts.length) ? `image/${(_b = parts.pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase()}` : 'image/jpeg';
+            if (ext === 'image/jpg') {
+                ext = 'image/jpeg';
+            }
+            else if (ext.includes('svg')) {
+                ext = 'image/svg+xml';
+            }
+            if (file.size > maxSize) {
+                window.alert(i18n_1.default.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));
+            }
+            else {
+                const base64 = `data:${ext};base64,${btoa(new Uint8Array(reader.result)
+                    .reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
+                if (onChange) {
+                    onChange(base64);
+                }
+                else {
+                    console.log(base64);
+                }
+            }
+        };
+        reader.readAsArrayBuffer(file);
     }
-  }]);
-  return UploadImage;
-}(_react.Component);
-UploadImage.defaultProps = {
-  disabled: false,
-  maxSize: 10 * 1024,
-  icon: null,
-  removeIconFunc: null,
-  accept: {
-    'image/*': []
-  },
-  error: false,
-  onChange: function onChange(base64) {
-    return console.log(base64);
-  },
-  t: function t(el) {
-    return el;
-  },
-  crop: false
-};
-UploadImage.propTypes = {
-  classes: _propTypes["default"].object,
-  maxSize: _propTypes["default"].number,
-  disabled: _propTypes["default"].bool,
-  crop: _propTypes["default"].bool,
-  error: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  icon: _propTypes["default"].string,
-  removeIconFunc: _propTypes["default"].func,
-  accept: _propTypes["default"].object,
-  t: _propTypes["default"].func
-};
-var _default = exports["default"] = (0, _styles.withStyles)(styles)(UploadImage);
-//# sourceMappingURL=UploadImage.js.map
+    render() {
+        const { disabled, classes, icon, removeIconFunc, error, crop, onChange, } = this.props;
+        const maxSize = this.props.maxSize || 10 * 1024;
+        const accept = this.props.accept || { 'image/*': [] };
+        const { uploadFile, anchorEl, cropHandler } = this.state;
+        return react_1.default.createElement(react_dropzone_1.default, { disabled: !!disabled || cropHandler, key: "dropzone", multiple: false, accept: accept, maxSize: maxSize, onDragEnter: () => this.setState({ uploadFile: 'dragging' }), onDragLeave: () => this.setState({ uploadFile: true }), onDrop: (acceptedFiles, errors) => {
+                this.setState({ uploadFile: false });
+                if (!acceptedFiles.length) {
+                    window.alert((errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message) || i18n_1.default.t('ra_Cannot upload'));
+                }
+                else {
+                    this.onDrop(acceptedFiles);
+                }
+            } }, ({ getRootProps, getInputProps }) => react_1.default.createElement("div", Object.assign({ className: Utils_1.default.clsx(classes.uploadDiv, uploadFile === 'dragging' && classes.uploadDivDragging, classes.dropZone, disabled && classes.disabledOpacity, !icon && classes.dropZoneEmpty) }, getRootProps()),
+            react_1.default.createElement("input", Object.assign({}, getInputProps())),
+            react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.uploadCenterDiv, error && classes.error) },
+                !icon ? react_1.default.createElement("div", { className: classes.uploadCenterTextAndIcon },
+                    react_1.default.createElement(fa_1.FaFileUpload, { className: classes.uploadCenterIcon }),
+                    react_1.default.createElement("div", { className: classes.uploadCenterText }, uploadFile === 'dragging' ? i18n_1.default.t('ra_Drop file here') :
+                        i18n_1.default.t('ra_Place your files here or click here to open the browse dialog')))
+                    :
+                        removeIconFunc && !cropHandler && react_1.default.createElement("div", { className: classes.buttonRemoveWrapper },
+                            react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Clear') },
+                                react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
+                                        removeIconFunc && removeIconFunc();
+                                        e.stopPropagation();
+                                    } },
+                                    react_1.default.createElement(icons_material_1.Close, null)))),
+                icon && crop && react_1.default.createElement("div", { className: classes.buttonCropWrapper },
+                    react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Crop') },
+                        react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
+                                if (!cropHandler) {
+                                    this.setState({ cropHandler: true });
+                                }
+                                else {
+                                    this.setState({ anchorEl: e.currentTarget });
+                                }
+                                e.stopPropagation();
+                            } },
+                            react_1.default.createElement(icons_material_1.Crop, { color: cropHandler ? 'primary' : 'inherit' }))),
+                    react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: () => this.setState({ anchorEl: null }) },
+                        react_1.default.createElement(material_1.MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }, () => {
+                                var _a, _b;
+                                const imageElement = (_b = (_a = this.cropperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.cropper;
+                                if (imageElement) {
+                                    if (onChange) {
+                                        onChange(imageElement.getCroppedCanvas().toDataURL());
+                                    }
+                                    else {
+                                        console.log(imageElement.getCroppedCanvas().toDataURL());
+                                    }
+                                }
+                            }) }, i18n_1.default.t('ra_Save')),
+                        react_1.default.createElement(material_1.MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }) }, i18n_1.default.t('ra_Close')))),
+                icon && !cropHandler ? react_1.default.createElement("img", { src: icon, className: classes.image, alt: "icon" }) : null,
+                icon && crop && cropHandler ? react_1.default.createElement(react_cropper_1.Cropper, { ref: this.cropperRef, className: classes.image, src: icon, initialAspectRatio: 1, viewMode: 1, guides: false, minCropBoxHeight: 10, minCropBoxWidth: 10, background: false, checkOrientation: false }) : null)));
+    }
+}
+exports.default = (0, styles_1.withStyles)(styles)(UploadImage);