@iobroker/adapter-react-v5 3.0.1 → 3.0.2

package/Components/CustomModal.js

@@ -0,0 +1,168 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/styles");
+
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _i18n = _interopRequireDefault(require("../i18n"));
+
+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; }
+
+var styles = function styles(theme) {
+  return {
+    modalWrapper: {
+      position: 'relative',
+      '[class*="MuiPaper-root MuiDialog-paper MuiPaper-elevation24 MuiDialog-paperScrollPaper MuiDialog-paperWidthXl MuiPaper-elevation24 MuiPaper-rounded"]': {
+        backgroundColor: '#f6f6f6'
+      }
+    },
+    modalDialog: {
+      minWidth: 400
+    },
+    overflowHidden: {
+      display: 'flex',
+      overflow: 'hidden'
+    },
+    titleIcon: {
+      marginRight: 5
+    },
+    content: {
+      fontSize: 16
+    }
+  };
+};
+
+var CustomModal = function CustomModal(_ref) {
+  var title = _ref.title,
+      fullWidth = _ref.fullWidth,
+      help = _ref.help,
+      maxWidth = _ref.maxWidth,
+      progress = _ref.progress,
+      icon = _ref.icon,
+      applyDisabled = _ref.applyDisabled,
+      applyButton = _ref.applyButton,
+      classes = _ref.classes,
+      open = _ref.open,
+      onClose = _ref.onClose,
+      children = _ref.children,
+      titleButtonApply = _ref.titleButtonApply,
+      titleButtonClose = _ref.titleButtonClose,
+      onApply = _ref.onApply,
+      textInput = _ref.textInput,
+      defaultValue = _ref.defaultValue,
+      overflowHidden = _ref.overflowHidden;
+
+  var _useState = (0, _react.useState)(defaultValue),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setValue(defaultValue);
+  }, [defaultValue]);
+  var Icon = null;
+
+  if (icon) {
+    Icon = icon;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
+    open: open,
+    maxWidth: maxWidth || 'md',
+    fullWidth: !!fullWidth,
+    disableEscapeKeyDown: false,
+    onClose: onClose,
+    classes: {
+      paper: classes.modalDialog
+      /*paper: classes.background*/
+
+    },
+    className: classes.modalWrapper
+  }, title && /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, null, icon ? /*#__PURE__*/_react["default"].createElement(Icon, {
+    className: classes.titleIcon
+  }) : null, title), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, {
+    className: (0, _clsx["default"])(overflowHidden ? classes.overflowHidden : null, classes.content)
+  }, textInput && /*#__PURE__*/_react["default"].createElement(_material.TextField // className={className}
+  , {
+    autoComplete: "off",
+    fullWidth: true,
+    autoFocus: true,
+    variant: "outlined",
+    size: "medium" // rows={10}
+    ,
+    multiline: true,
+    value: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    } // customValue
+
+  }), children, help ? /*#__PURE__*/_react["default"].createElement("div", null, help) : null), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, applyButton && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    startIcon: /*#__PURE__*/_react["default"].createElement(_Check["default"], null),
+    disabled: progress || applyDisabled && defaultValue === value,
+    onClick: function onClick() {
+      return onApply(textInput ? value : '');
+    },
+    variant: "contained",
+    color: "primary"
+  }, _i18n["default"].t(titleButtonApply)), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    color: "grey",
+    onClick: onClose,
+    disabled: progress,
+    variant: "contained",
+    startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
+  }, _i18n["default"].t(titleButtonClose))));
+};
+
+CustomModal.defaultProps = {
+  open: false,
+  onApply: function onApply() {},
+  onClose: function onClose() {},
+  applyButton: true,
+  applyDisabled: false,
+  titleButtonClose: 'Cancel',
+  titleButtonApply: 'Ok',
+  overflowHidden: false,
+  help: ''
+};
+CustomModal.propTypes = {
+  icon: _propTypes["default"].object,
+  open: _propTypes["default"].bool,
+  onClose: _propTypes["default"].func,
+  children: _propTypes["default"].any,
+  titleButtonClose: _propTypes["default"].string,
+  titleButtonApply: _propTypes["default"].string,
+  onApply: _propTypes["default"].func,
+  fullWidth: _propTypes["default"].bool,
+  maxWidth: _propTypes["default"].string,
+  help: _propTypes["default"].string
+};
+
+var _default = (0, _styles.withStyles)(styles)(CustomModal);
+
+exports["default"] = _default;
+//# sourceMappingURL=CustomModal.js.map

package/Components/CustomModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomModal.js","names":["styles","theme","modalWrapper","position","backgroundColor","modalDialog","minWidth","overflowHidden","display","overflow","titleIcon","marginRight","content","fontSize","CustomModal","title","fullWidth","help","maxWidth","progress","icon","applyDisabled","applyButton","classes","open","onClose","children","titleButtonApply","titleButtonClose","onApply","textInput","defaultValue","useState","value","setValue","useEffect","Icon","paper","clsx","e","target","i18n","t","defaultProps","propTypes","PropTypes","object","bool","func","any","string","withStyles"],"sources":["CustomModal.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nimport Button from '@mui/material/Button';\nimport { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';\nimport { withStyles } from '@mui/styles';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport i18n from '../i18n';\n\nconst styles = theme => ({\n    modalWrapper: {\n        position: 'relative',\n        '[class*=\"MuiPaper-root MuiDialog-paper MuiPaper-elevation24 MuiDialog-paperScrollPaper MuiDialog-paperWidthXl MuiPaper-elevation24 MuiPaper-rounded\"]': {\n            backgroundColor: '#f6f6f6'\n        }\n    },\n    modalDialog: {\n        minWidth: 400\n    },\n    overflowHidden: {\n        display: 'flex',\n        overflow: 'hidden'\n    },\n    titleIcon: {\n        marginRight: 5,\n    },\n    content: {\n        fontSize: 16\n    },\n});\n\nconst CustomModal = ({ title, fullWidth, help, maxWidth, progress, icon, applyDisabled, applyButton, classes, open, onClose, children, titleButtonApply, titleButtonClose, onApply, textInput, defaultValue, overflowHidden }) => {\n    const [value, setValue] = useState(defaultValue);\n    useEffect(() => {\n        setValue(defaultValue);\n    }, [defaultValue]);\n\n    let Icon = null;\n\n    if (icon) {\n        Icon = icon;\n    }\n\n    return <Dialog\n        open={open}\n        maxWidth={maxWidth || 'md'}\n        fullWidth={!!fullWidth}\n        disableEscapeKeyDown={false}\n        onClose={onClose}\n        classes={{ paper: classes.modalDialog, /*paper: classes.background*/ }}\n        className={classes.modalWrapper}\n    >\n        {title && <DialogTitle>{icon ? <Icon className={classes.titleIcon}/> : null}{title}</DialogTitle>}\n        <DialogContent className={clsx(overflowHidden ? classes.overflowHidden : null, classes.content)}>\n            {textInput && <TextField\n                // className={className}\n                autoComplete=\"off\"\n                fullWidth\n                autoFocus\n                variant=\"outlined\"\n                size=\"medium\"\n                // rows={10}\n                multiline\n                value={value}\n                onChange={(e) => setValue(e.target.value)}\n                // customValue\n            />}\n            {children}\n            {help ? <div>{help}</div> : null}\n        </DialogContent>\n        <DialogActions>\n            {applyButton && <Button\n                startIcon={<CheckIcon/>}\n                disabled={progress || (applyDisabled && defaultValue === value)}\n                onClick={() => onApply(textInput ? value : '')}\n                variant=\"contained\"\n                color=\"primary\"\n            >\n                {i18n.t(titleButtonApply)}\n            </Button>}\n            <Button\n                color=\"grey\"\n                onClick={onClose}\n                disabled={progress}\n                variant=\"contained\"\n                startIcon={<CloseIcon/>}\n            >\n                {i18n.t(titleButtonClose)}\n            </Button>\n        </DialogActions>\n    </Dialog>;\n}\n\nCustomModal.defaultProps = {\n    open: false,\n    onApply: () => { },\n    onClose: () => { },\n    applyButton: true,\n    applyDisabled: false,\n    titleButtonClose: 'Cancel',\n    titleButtonApply: 'Ok',\n    overflowHidden: false,\n    help: ''\n};\n\nCustomModal.propTypes = {\n    icon: PropTypes.object,\n    open: PropTypes.bool,\n    onClose: PropTypes.func,\n    children: PropTypes.any,\n    titleButtonClose: PropTypes.string,\n    titleButtonApply: PropTypes.string,\n    onApply: PropTypes.func,\n    fullWidth: PropTypes.bool,\n    maxWidth: PropTypes.string,\n    help: PropTypes.string,\n};\n\nexport default withStyles(styles)(CustomModal);\n"],"mappings":"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"}

package/Components/UploadImage.js

@@ -0,0 +1,357 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = require("react");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
+
+var _reactCropper = require("react-cropper");
+
+require("cropperjs/dist/cropper.css");
+
+var _styles = require("@mui/styles");
+
+var _material = require("@mui/material");
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _Crop = _interopRequireDefault(require("@mui/icons-material/Crop"));
+
+var _fa = require("react-icons/fa");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+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; } }
+
+var styles = function styles(theme) {
+  return {
+    dropZone: {
+      width: '100%',
+      height: 100,
+      position: 'relative'
+    },
+    dropZoneEmpty: {},
+    image: {
+      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'
+    },
+    uploadDivDragging: {
+      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'
+    },
+    uploadCenterIcon: {
+      paddingTop: 10,
+      width: 48,
+      height: 48
+    },
+    uploadCenterText: {
+      fontSize: 16
+    },
+    uploadCenterTextAndIcon: {
+      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'
+    },
+    buttonRemoveWrapper: {
+      position: 'absolute',
+      zIndex: 222,
+      right: 0
+    },
+    buttonCropWrapper: {
+      position: 'absolute',
+      zIndex: 222,
+      right: 0,
+      top: 50
+    },
+    error: {
+      border: '2px solid red'
+    }
+  };
+};
+
+var UploadImage = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(UploadImage, _Component);
+
+  var _super = _createSuper(UploadImage);
+
+  function UploadImage(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, UploadImage);
+    _this = _super.call(this, props);
+    _this.state = {
+      uploadFile: false,
+      anchorEl: null,
+      cropHandler: false
+    };
+    _this.cropperRef = /*#__PURE__*/(0, _react.createRef)();
+    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/' + file.name.split('.').pop().toLowerCase();
+
+        if (ext === 'image/jpg') {
+          ext = 'image/jpeg';
+        } else if (ext.includes('svg')) {
+          ext = 'image/svg+xml';
+        }
+
+        if (file.size > maxSize) {
+          return window.alert(t('File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));
+        }
+
+        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('Cannot upload'));
+          } else {
+            return _this2.onDrop(acceptedFiles);
+          }
+        }
+      }, function (_ref) {
+        var getRootProps = _ref.getRootProps,
+            getInputProps = _ref.getInputProps;
+        return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+          className: (0, _clsx["default"])(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: (0, _clsx["default"])(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('Drop file here') : t('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('Clear')
+        }, /*#__PURE__*/React.createElement(_IconButton["default"], {
+          size: "large",
+          onClick: function onClick(e) {
+            removeIconFunc && removeIconFunc();
+            e.stopPropagation();
+          }
+        }, /*#__PURE__*/React.createElement(_Close["default"], null)))), icon && crop && /*#__PURE__*/React.createElement("div", {
+          className: classes.buttonCropWrapper
+        }, /*#__PURE__*/React.createElement(_material.Tooltip, {
+          title: t('Crop')
+        }, /*#__PURE__*/React.createElement(_IconButton["default"], {
+          size: "large",
+          onClick: function onClick(e) {
+            if (!cropHandler) {
+              _this2.setState({
+                cropHandler: true
+              });
+            } else {
+              _this2.setState({
+                anchorEl: e.currentTarget
+              });
+            }
+
+            e.stopPropagation();
+          }
+        }, /*#__PURE__*/React.createElement(_Crop["default"], {
+          color: cropHandler ? 'primary' : 'inherit'
+        }))), /*#__PURE__*/React.createElement(_material.Menu, {
+          id: "simple-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, _this2$cropperRef$cur;
+
+              var imageElement = (_this2$cropperRef = _this2.cropperRef) === null || _this2$cropperRef === void 0 ? void 0 : (_this2$cropperRef$cur = _this2$cropperRef.current) === null || _this2$cropperRef$cur === void 0 ? void 0 : _this2$cropperRef$cur.cropper;
+              onChange(imageElement.getCroppedCanvas().toDataURL());
+            });
+          }
+        }, t('Save')), /*#__PURE__*/React.createElement(_material.MenuItem, {
+          onClick: function onClick() {
+            return _this2.setState({
+              anchorEl: null,
+              cropHandler: false
+            });
+          }
+        }, t('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));
+      });
+    }
+  }]);
+  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,
+  accept: _propTypes["default"].string,
+  t: _propTypes["default"].func
+};
+
+var _default = (0, _styles.withStyles)(styles)(UploadImage);
+
+exports["default"] = _default;
+//# sourceMappingURL=UploadImage.js.map

package/Components/UploadImage.js.map

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

package/README.md

@@ -641,7 +641,7 @@ If you still have questions, try to find an answer [here](https://mui.com/guides
 -->
 
 ## Changelog
-### 3.0.1 (2022-05-24)
+### 3.0.2 (2022-05-24)
 * (bluefox) Added JsonConfigComponent
 
 ### 2.1.11 (2022-05-24)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "bluefox",
@@ -31,6 +31,8 @@
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.1",
     "@mui/styles": "^5.8.0",
+    "@mui/x-date-pickers": "^5.0.0-alpha.4",
+    "react-cropper": "^2.1.8",
     "@sentry/browser": "^6.19.7",
     "@sentry/integrations": "^6.19.7",
     "@types/iobroker": "^4.0.3",