@iobroker/gui-components 8.0.1

package/build/Components/UploadImage.js

@@ -0,0 +1,516 @@
+import React, { Component, createRef } from 'react';
+import Dropzone from 'react-dropzone';
+import { Cropper } from 'react-cropper';
+import { Menu, MenuItem, Tooltip, IconButton } from '@mui/material';
+import { Close as IconClose, Crop as CropIcon, UploadFileOutlined as UploadIcon } from '@mui/icons-material';
+import { I18n } from '../i18n';
+import { Icon } from './Icon';
+// import 'cropperjs/dist/cropper.css';
+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',
+    },
+    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',
+        boxSizing: 'border-box',
+    },
+};
+export class UploadImage extends Component {
+    cropperRef;
+    constructor(props) {
+        super(props);
+        this.state = {
+            uploadFile: false,
+            anchorEl: null,
+            cropHandler: false,
+        };
+        this.cropperRef = 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);
+        }
+    }
+    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 = () => {
+            if (!file || !file.name) {
+                return;
+            }
+            const parts = file.name?.split('.');
+            let ext = parts?.length ? `image/${parts.pop()?.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.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);
+    }
+    render() {
+        const { disabled, icon, removeIconFunc, error, crop, onChange } = this.props;
+        const maxSize = this.props.maxSize || 10 * 1024;
+        let accept = this.props.accept || { 'image/*': [] };
+        const { uploadFile, anchorEl, cropHandler } = this.state;
+        // covert '"image/png"' to { 'image/*': [] }
+        if (typeof accept === 'string') {
+            accept = { [accept]: [] };
+        }
+        else if (Array.isArray(accept)) {
+            const result = {};
+            accept.forEach(item => {
+                result[item] = [];
+            });
+            accept = result;
+        }
+        return (React.createElement(Dropzone, { 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?.[0]?.errors?.[0]?.message || I18n.t('ra_Cannot upload'));
+                }
+                else {
+                    this.onDrop(acceptedFiles);
+                }
+            } }, ({ getRootProps, getInputProps }) => (React.createElement("div", { style: {
+                ...styles.uploadDiv,
+                ...(uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),
+                ...styles.dropZone,
+                ...(disabled ? styles.disabledOpacity : undefined),
+                ...(!icon ? styles.dropZoneEmpty : undefined),
+            }, ...getRootProps() },
+            React.createElement("input", { ...getInputProps() }),
+            React.createElement("div", { style: { ...styles.uploadCenterDiv, ...(error ? styles.error : undefined) } },
+                !icon ? (React.createElement("div", { style: styles.uploadCenterTextAndIcon },
+                    React.createElement(UploadIcon, { style: styles.uploadCenterIcon }),
+                    React.createElement("div", { style: styles.uploadCenterText }, uploadFile === 'dragging'
+                        ? I18n.t('ra_Drop file here')
+                        : I18n.t('ra_Place your files here or click here to open the browse dialog')))) : (removeIconFunc &&
+                    !cropHandler && (React.createElement("div", { style: styles.buttonRemoveWrapper },
+                    React.createElement(Tooltip, { title: I18n.t('ra_Clear'), slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
+                        React.createElement(IconButton, { size: "large", onClick: e => {
+                                removeIconFunc && removeIconFunc();
+                                e.stopPropagation();
+                            } },
+                            React.createElement(IconClose, null)))))),
+                icon && crop && (React.createElement("div", { style: styles.buttonCropWrapper },
+                    React.createElement(Tooltip, { title: I18n.t('ra_Crop'), slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
+                        React.createElement(IconButton, { size: "large", onClick: e => {
+                                if (!cropHandler) {
+                                    this.setState({ cropHandler: true });
+                                }
+                                else {
+                                    this.setState({ anchorEl: e.currentTarget });
+                                }
+                                e.stopPropagation();
+                            } },
+                            React.createElement(CropIcon, { color: cropHandler ? 'primary' : 'inherit' }))),
+                    React.createElement(Menu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: () => this.setState({ anchorEl: null }) },
+                        React.createElement(MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }, () => {
+                                const imageElement = this.cropperRef?.current?.cropper;
+                                if (imageElement) {
+                                    if (onChange) {
+                                        onChange(imageElement.getCroppedCanvas().toDataURL());
+                                    }
+                                    else {
+                                        console.log(imageElement.getCroppedCanvas().toDataURL());
+                                    }
+                                }
+                            }) }, I18n.t('ra_Save')),
+                        React.createElement(MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }) }, I18n.t('ra_Close'))))),
+                icon && !cropHandler ? (React.createElement(Icon, { src: icon, style: styles.image, alt: "icon" })) : null,
+                icon && crop && cropHandler ? (React.createElement(Cropper, { ref: this.cropperRef, style: styles.image, src: icon, initialAspectRatio: 1, viewMode: 1, guides: false, minCropBoxHeight: 10, minCropBoxWidth: 10, background: false, checkOrientation: false })) : null)))));
+    }
+}
+//# sourceMappingURL=UploadImage.js.map

package/build/Components/UploadImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadImage.js","sourceRoot":"./src/","sources":["Components/UploadImage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component, createRef, type JSX } from 'react';\r\nimport Dropzone, { type FileRejection } from 'react-dropzone';\r\nimport { Cropper, type ReactCropperElement } from 'react-cropper';\r\n\r\nimport { Menu, MenuItem, Tooltip, IconButton } from '@mui/material';\r\n\r\nimport { Close as IconClose, Crop as CropIcon, UploadFileOutlined as UploadIcon } from '@mui/icons-material';\r\n\r\nimport { I18n } from '../i18n';\r\nimport { Icon } from './Icon';\r\n\r\n// import 'cropperjs/dist/cropper.css';\r\nconst cropperStyles = `\r\n/*!\r\n * Cropper.js v1.5.12\r\n * https://fengyuanchen.github.io/cropperjs\r\n *\r\n * Copyright 2015-present Chen Fengyuan\r\n * Released under the MIT license\r\n *\r\n * Date: 2021-06-12T08:00:11.623Z\r\n */\r\n\r\n.cropper-container {\r\n  direction: ltr;\r\n  font-size: 0;\r\n  line-height: 0;\r\n  position: relative;\r\n  -ms-touch-action: none;\r\n  touch-action: none;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.cropper-container img {\r\n  display: block;\r\n  height: 100%;\r\n  image-orientation: 0deg;\r\n  max-height: none !important;\r\n  max-width: none !important;\r\n  min-height: 0 !important;\r\n  min-width: 0 !important;\r\n  width: 100%;\r\n}\r\n\r\n.cropper-wrap-box,\r\n.cropper-canvas,\r\n.cropper-drag-box,\r\n.cropper-crop-box,\r\n.cropper-modal {\r\n  bottom: 0;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n\r\n.cropper-wrap-box,\r\n.cropper-canvas {\r\n  overflow: hidden;\r\n}\r\n\r\n.cropper-drag-box {\r\n  background-color: #fff;\r\n  opacity: 0;\r\n}\r\n\r\n.cropper-modal {\r\n  background-color: #000;\r\n  opacity: 0.5;\r\n}\r\n\r\n.cropper-view-box {\r\n  display: block;\r\n  height: 100%;\r\n  outline: 1px solid #39f;\r\n  outline-color: rgba(51, 153, 255, 0.75);\r\n  overflow: hidden;\r\n  width: 100%;\r\n}\r\n\r\n.cropper-dashed {\r\n  border: 0 dashed #eee;\r\n  display: block;\r\n  opacity: 0.5;\r\n  position: absolute;\r\n}\r\n\r\n.cropper-dashed.dashed-h {\r\n  border-bottom-width: 1px;\r\n  border-top-width: 1px;\r\n  height: calc(100% / 3);\r\n  left: 0;\r\n  top: calc(100% / 3);\r\n  width: 100%;\r\n}\r\n\r\n.cropper-dashed.dashed-v {\r\n  border-left-width: 1px;\r\n  border-right-width: 1px;\r\n  height: 100%;\r\n  left: calc(100% / 3);\r\n  top: 0;\r\n  width: calc(100% / 3);\r\n}\r\n\r\n.cropper-center {\r\n  display: block;\r\n  height: 0;\r\n  left: 50%;\r\n  opacity: 0.75;\r\n  position: absolute;\r\n  top: 50%;\r\n  width: 0;\r\n}\r\n\r\n.cropper-center::before,\r\n.cropper-center::after {\r\n  background-color: #eee;\r\n  content: ' ';\r\n  display: block;\r\n  position: absolute;\r\n}\r\n\r\n.cropper-center::before {\r\n  height: 1px;\r\n  left: -3px;\r\n  top: 0;\r\n  width: 7px;\r\n}\r\n\r\n.cropper-center::after {\r\n  height: 7px;\r\n  left: 0;\r\n  top: -3px;\r\n  width: 1px;\r\n}\r\n\r\n.cropper-face,\r\n.cropper-line,\r\n.cropper-point {\r\n  display: block;\r\n  height: 100%;\r\n  opacity: 0.1;\r\n  position: absolute;\r\n  width: 100%;\r\n}\r\n\r\n.cropper-face {\r\n  background-color: #fff;\r\n  left: 0;\r\n  top: 0;\r\n}\r\n\r\n.cropper-line {\r\n  background-color: #39f;\r\n}\r\n\r\n.cropper-line.line-e {\r\n  cursor: ew-resize;\r\n  right: -3px;\r\n  top: 0;\r\n  width: 5px;\r\n}\r\n\r\n.cropper-line.line-n {\r\n  cursor: ns-resize;\r\n  height: 5px;\r\n  left: 0;\r\n  top: -3px;\r\n}\r\n\r\n.cropper-line.line-w {\r\n  cursor: ew-resize;\r\n  left: -3px;\r\n  top: 0;\r\n  width: 5px;\r\n}\r\n\r\n.cropper-line.line-s {\r\n  bottom: -3px;\r\n  cursor: ns-resize;\r\n  height: 5px;\r\n  left: 0;\r\n}\r\n\r\n.cropper-point {\r\n  background-color: #39f;\r\n  height: 5px;\r\n  opacity: 0.75;\r\n  width: 5px;\r\n}\r\n\r\n.cropper-point.point-e {\r\n  cursor: ew-resize;\r\n  margin-top: -3px;\r\n  right: -3px;\r\n  top: 50%;\r\n}\r\n\r\n.cropper-point.point-n {\r\n  cursor: ns-resize;\r\n  left: 50%;\r\n  margin-left: -3px;\r\n  top: -3px;\r\n}\r\n\r\n.cropper-point.point-w {\r\n  cursor: ew-resize;\r\n  left: -3px;\r\n  margin-top: -3px;\r\n  top: 50%;\r\n}\r\n\r\n.cropper-point.point-s {\r\n  bottom: -3px;\r\n  cursor: s-resize;\r\n  left: 50%;\r\n  margin-left: -3px;\r\n}\r\n\r\n.cropper-point.point-ne {\r\n  cursor: nesw-resize;\r\n  right: -3px;\r\n  top: -3px;\r\n}\r\n\r\n.cropper-point.point-nw {\r\n  cursor: nwse-resize;\r\n  left: -3px;\r\n  top: -3px;\r\n}\r\n\r\n.cropper-point.point-sw {\r\n  bottom: -3px;\r\n  cursor: nesw-resize;\r\n  left: -3px;\r\n}\r\n\r\n.cropper-point.point-se {\r\n  bottom: -3px;\r\n  cursor: nwse-resize;\r\n  height: 20px;\r\n  opacity: 1;\r\n  right: -3px;\r\n  width: 20px;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .cropper-point.point-se {\r\n    height: 15px;\r\n    width: 15px;\r\n  }\r\n}\r\n\r\n@media (min-width: 992px) {\r\n  .cropper-point.point-se {\r\n    height: 10px;\r\n    width: 10px;\r\n  }\r\n}\r\n\r\n@media (min-width: 1200px) {\r\n  .cropper-point.point-se {\r\n    height: 5px;\r\n    opacity: 0.75;\r\n    width: 5px;\r\n  }\r\n}\r\n\r\n.cropper-point.point-se::before {\r\n  background-color: #39f;\r\n  bottom: -50%;\r\n  content: ' ';\r\n  display: block;\r\n  height: 200%;\r\n  opacity: 0;\r\n  position: absolute;\r\n  right: -50%;\r\n  width: 200%;\r\n}\r\n\r\n.cropper-invisible {\r\n  opacity: 0;\r\n}\r\n\r\n.cropper-bg {\r\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');\r\n}\r\n\r\n.cropper-hide {\r\n  display: block;\r\n  height: 0;\r\n  position: absolute;\r\n  width: 0;\r\n}\r\n\r\n.cropper-hidden {\r\n  display: none !important;\r\n}\r\n\r\n.cropper-move {\r\n  cursor: move;\r\n}\r\n\r\n.cropper-crop {\r\n  cursor: crosshair;\r\n}\r\n\r\n.cropper-disabled .cropper-drag-box,\r\n.cropper-disabled .cropper-face,\r\n.cropper-disabled .cropper-line,\r\n.cropper-disabled .cropper-point {\r\n  cursor: not-allowed;\r\n}\r\n`;\r\n\r\nconst styles: Record<string, React.CSSProperties> = {\r\n    dropZone: {\r\n        width: '100%',\r\n        height: 100,\r\n        position: 'relative',\r\n    },\r\n    dropZoneEmpty: {},\r\n    image: {\r\n        objectFit: 'contain',\r\n        margin: 'auto',\r\n        display: 'flex',\r\n        width: '100%',\r\n        height: '100%',\r\n    },\r\n\r\n    uploadDiv: {\r\n        position: 'relative',\r\n        width: '100%',\r\n        height: 300,\r\n        opacity: 0.9,\r\n        marginTop: 30,\r\n        cursor: 'pointer',\r\n        outline: 'none',\r\n    },\r\n    uploadDivDragging: {\r\n        opacity: 1,\r\n        background: 'rgba(128,255,128,0.1)',\r\n    },\r\n\r\n    uploadCenterDiv: {\r\n        margin: 5,\r\n        border: '3px dashed grey',\r\n        borderRadius: 5,\r\n        width: 'calc(100% - 10px)',\r\n        height: 'calc(100% - 10px)',\r\n        position: 'relative',\r\n        display: 'flex',\r\n    },\r\n    uploadCenterIcon: {\r\n        paddingTop: 10,\r\n        width: 48,\r\n        height: 48,\r\n    },\r\n    uploadCenterText: {\r\n        fontSize: 16,\r\n    },\r\n    uploadCenterTextAndIcon: {\r\n        textAlign: 'center',\r\n        position: 'absolute',\r\n        top: 0,\r\n        bottom: 0,\r\n        left: 0,\r\n        right: 0,\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n    },\r\n    disabledOpacity: {\r\n        opacity: 0.3,\r\n        cursor: 'default',\r\n    },\r\n    buttonRemoveWrapper: {\r\n        position: 'absolute',\r\n        zIndex: 222,\r\n        right: 0,\r\n    },\r\n    buttonCropWrapper: {\r\n        position: 'absolute',\r\n        zIndex: 222,\r\n        right: 0,\r\n        top: 50,\r\n    },\r\n    error: {\r\n        border: '2px solid red',\r\n        boxSizing: 'border-box',\r\n    },\r\n};\r\n\r\ninterface UploadImageProps {\r\n    maxSize?: number;\r\n    disabled?: boolean;\r\n    crop?: boolean;\r\n    error?: boolean;\r\n    onChange: (base64: string) => void | undefined;\r\n    icon: string | null;\r\n    removeIconFunc: () => void | null;\r\n    accept?: Record<string, string[]>;\r\n}\r\n\r\ninterface UploadImageState {\r\n    uploadFile: boolean | 'dragging';\r\n    anchorEl: HTMLElement | null;\r\n    cropHandler: boolean;\r\n}\r\n\r\nexport class UploadImage extends Component<UploadImageProps, UploadImageState> {\r\n    private readonly cropperRef: React.RefObject<ReactCropperElement>;\r\n\r\n    constructor(props: UploadImageProps) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            uploadFile: false,\r\n            anchorEl: null,\r\n            cropHandler: false,\r\n        };\r\n        this.cropperRef = createRef();\r\n\r\n        if (!window.document.getElementById('cropper-style-json-component')) {\r\n            const style = window.document.createElement('style');\r\n            style.setAttribute('id', 'cropper-style-json-component');\r\n            style.innerHTML = cropperStyles;\r\n            window.document.head.appendChild(style);\r\n        }\r\n    }\r\n\r\n    onDrop(acceptedFiles: File[]): void {\r\n        const onChange = this.props.onChange;\r\n        const maxSize = this.props.maxSize || 10 * 1024;\r\n\r\n        const file = acceptedFiles[0];\r\n        const reader = new FileReader();\r\n\r\n        reader.onabort = () => console.log('file reading was aborted');\r\n        reader.onerror = () => console.log('file reading has failed');\r\n        reader.onload = () => {\r\n            if (!file || !file.name) {\r\n                return;\r\n            }\r\n            const parts = file.name?.split('.');\r\n            let ext = parts?.length ? `image/${parts.pop()?.toLowerCase()}` : 'image/jpeg';\r\n            if (ext === 'image/jpg') {\r\n                ext = 'image/jpeg';\r\n            } else if (ext.includes('svg')) {\r\n                ext = 'image/svg+xml';\r\n            }\r\n            if (file.size > maxSize) {\r\n                window.alert(I18n.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));\r\n            } else {\r\n                const base64 = `data:${ext};base64,${btoa(\r\n                    new Uint8Array(reader.result as ArrayBufferLike).reduce(\r\n                        (data, byte) => data + String.fromCharCode(byte),\r\n                        '',\r\n                    ),\r\n                )}`;\r\n\r\n                if (onChange) {\r\n                    onChange(base64);\r\n                } else {\r\n                    console.log(base64);\r\n                }\r\n            }\r\n        };\r\n        reader.readAsArrayBuffer(file);\r\n    }\r\n\r\n    render(): JSX.Element {\r\n        const { disabled, icon, removeIconFunc, error, crop, onChange } = this.props;\r\n        const maxSize = this.props.maxSize || 10 * 1024;\r\n        let accept = this.props.accept || { 'image/*': [] };\r\n        const { uploadFile, anchorEl, cropHandler } = this.state;\r\n\r\n        // covert '\"image/png\"' to { 'image/*': [] }\r\n        if (typeof accept === 'string') {\r\n            accept = { [accept]: [] };\r\n        } else if (Array.isArray(accept)) {\r\n            const result: Record<string, string[]> = {};\r\n            accept.forEach(item => {\r\n                result[item] = [];\r\n            });\r\n            accept = result;\r\n        }\r\n\r\n        return (\r\n            <Dropzone\r\n                disabled={!!disabled || cropHandler}\r\n                key=\"dropzone\"\r\n                multiple={false}\r\n                accept={accept}\r\n                maxSize={maxSize}\r\n                onDragEnter={() => this.setState({ uploadFile: 'dragging' })}\r\n                onDragLeave={() => this.setState({ uploadFile: true })}\r\n                onDrop={(acceptedFiles: File[], errors: FileRejection[]) => {\r\n                    this.setState({ uploadFile: false });\r\n                    if (!acceptedFiles.length) {\r\n                        window.alert(errors?.[0]?.errors?.[0]?.message || I18n.t('ra_Cannot upload'));\r\n                    } else {\r\n                        this.onDrop(acceptedFiles);\r\n                    }\r\n                }}\r\n            >\r\n                {({ getRootProps, getInputProps }) => (\r\n                    <div\r\n                        style={{\r\n                            ...styles.uploadDiv,\r\n                            ...(uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),\r\n                            ...styles.dropZone,\r\n                            ...(disabled ? styles.disabledOpacity : undefined),\r\n                            ...(!icon ? styles.dropZoneEmpty : undefined),\r\n                        }}\r\n                        {...getRootProps()}\r\n                    >\r\n                        <input {...getInputProps()} />\r\n                        <div style={{ ...styles.uploadCenterDiv, ...(error ? styles.error : undefined) }}>\r\n                            {!icon ? (\r\n                                <div style={styles.uploadCenterTextAndIcon}>\r\n                                    <UploadIcon style={styles.uploadCenterIcon} />\r\n                                    <div style={styles.uploadCenterText}>\r\n                                        {uploadFile === 'dragging'\r\n                                            ? I18n.t('ra_Drop file here')\r\n                                            : I18n.t(\r\n                                                  'ra_Place your files here or click here to open the browse dialog',\r\n                                              )}\r\n                                    </div>\r\n                                </div>\r\n                            ) : (\r\n                                removeIconFunc &&\r\n                                !cropHandler && (\r\n                                    <div style={styles.buttonRemoveWrapper}>\r\n                                        <Tooltip\r\n                                            title={I18n.t('ra_Clear')}\r\n                                            slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\r\n                                        >\r\n                                            <IconButton\r\n                                                size=\"large\"\r\n                                                onClick={e => {\r\n                                                    removeIconFunc && removeIconFunc();\r\n                                                    e.stopPropagation();\r\n                                                }}\r\n                                            >\r\n                                                <IconClose />\r\n                                            </IconButton>\r\n                                        </Tooltip>\r\n                                    </div>\r\n                                )\r\n                            )}\r\n                            {icon && crop && (\r\n                                <div style={styles.buttonCropWrapper}>\r\n                                    <Tooltip\r\n                                        title={I18n.t('ra_Crop')}\r\n                                        slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\r\n                                    >\r\n                                        <IconButton\r\n                                            size=\"large\"\r\n                                            onClick={e => {\r\n                                                if (!cropHandler) {\r\n                                                    this.setState({ cropHandler: true });\r\n                                                } else {\r\n                                                    this.setState({ anchorEl: e.currentTarget });\r\n                                                }\r\n                                                e.stopPropagation();\r\n                                            }}\r\n                                        >\r\n                                            <CropIcon color={cropHandler ? 'primary' : 'inherit'} />\r\n                                        </IconButton>\r\n                                    </Tooltip>\r\n                                    <Menu\r\n                                        anchorEl={anchorEl}\r\n                                        keepMounted\r\n                                        open={Boolean(anchorEl)}\r\n                                        onClose={() => this.setState({ anchorEl: null })}\r\n                                    >\r\n                                        <MenuItem\r\n                                            onClick={() =>\r\n                                                this.setState({ anchorEl: null, cropHandler: false }, () => {\r\n                                                    const imageElement = this.cropperRef?.current?.cropper;\r\n                                                    if (imageElement) {\r\n                                                        if (onChange) {\r\n                                                            onChange(imageElement.getCroppedCanvas().toDataURL());\r\n                                                        } else {\r\n                                                            console.log(imageElement.getCroppedCanvas().toDataURL());\r\n                                                        }\r\n                                                    }\r\n                                                })\r\n                                            }\r\n                                        >\r\n                                            {I18n.t('ra_Save')}\r\n                                        </MenuItem>\r\n                                        <MenuItem onClick={() => this.setState({ anchorEl: null, cropHandler: false })}>\r\n                                            {I18n.t('ra_Close')}\r\n                                        </MenuItem>\r\n                                    </Menu>\r\n                                </div>\r\n                            )}\r\n                            {icon && !cropHandler ? (\r\n                                <Icon\r\n                                    src={icon}\r\n                                    style={styles.image}\r\n                                    alt=\"icon\"\r\n                                />\r\n                            ) : null}\r\n\r\n                            {icon && crop && cropHandler ? (\r\n                                <Cropper\r\n                                    ref={this.cropperRef}\r\n                                    style={styles.image}\r\n                                    src={icon}\r\n                                    initialAspectRatio={1}\r\n                                    viewMode={1}\r\n                                    guides={false}\r\n                                    minCropBoxHeight={10}\r\n                                    minCropBoxWidth={10}\r\n                                    background={false}\r\n                                    checkOrientation={false}\r\n                                />\r\n                            ) : null}\r\n                        </div>\r\n                    </div>\r\n                )}\r\n            </Dropzone>\r\n        );\r\n    }\r\n}\r\n"]}