@iobroker/adapter-react-v5 3.1.5 → 3.1.8

package/Components/JsonConfigComponent/ConfigFileSelector.js

@@ -0,0 +1,747 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+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 = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@mui/styles");
+
+var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
+
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
+var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
+
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+
+var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
+
+var _UploadFile = _interopRequireDefault(require("@mui/icons-material/UploadFile"));
+
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+
+var _PlayArrow = _interopRequireDefault(require("@mui/icons-material/PlayArrow"));
+
+var _MusicNote = _interopRequireDefault(require("@mui/icons-material/MusicNote"));
+
+var _Videocam = _interopRequireDefault(require("@mui/icons-material/Videocam"));
+
+var _Article = _interopRequireDefault(require("@mui/icons-material/Article"));
+
+var _Code = _interopRequireDefault(require("@mui/icons-material/Code"));
+
+var _fa = require("react-icons/fa");
+
+var _Utils = _interopRequireDefault(require("../../Components/Utils"));
+
+var _i18n = _interopRequireDefault(require("../../i18n"));
+
+var _Confirm = _interopRequireDefault(require("../../Dialogs/Confirm"));
+
+var _ConfigGeneric2 = _interopRequireDefault(require("./ConfigGeneric"));
+
+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 {
+    fullWidth: {
+      width: '100%'
+    },
+    fullWidthOneButton: {
+      width: 'calc(100% - 42px)'
+    },
+    fullWidthTwoButtons: {
+      width: 'calc(100% - 84px)'
+    },
+    fullWidthThreeButtons: {
+      width: 'calc(100% - 126x)'
+    },
+    dropZone: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute'
+    },
+    dropZoneEmpty: {},
+    image: {
+      objectFit: 'contain',
+      margin: 'auto',
+      display: 'flex',
+      width: '100%',
+      height: '100%'
+    },
+    uploadDiv: {
+      position: 'relative',
+      width: '100%'
+    },
+    uploadDivDragging: {
+      opacity: 1,
+      background: 'rgba(128,255,128,0.1)'
+    },
+    uploadCenterDiv: {
+      margin: 5,
+      border: '3px dashed grey',
+      borderRadius: 5,
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      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'
+    },
+    error: {
+      border: '2px solid red'
+    },
+    deleteButton: {},
+    selectedImage: {
+      height: 40,
+      width: 40,
+      display: 'inline-block',
+      marginRight: 8
+    }
+  };
+};
+
+var IMAGE_EXT = ['jpg', 'jpeg', 'svg', 'png', 'webp'];
+var AUDIO_EXT = ['mp3', 'ogg', 'wav', 'aac'];
+var VIDEO_EXT = ['avi', 'mp4', 'mov'];
+var DOC_EXT = ['txt', 'log', 'html', 'htm'];
+var JS_EXT = ['json', 'js', 'ts'];
+
+var ConfigFileSelector = /*#__PURE__*/function (_ConfigGeneric) {
+  (0, _inherits2["default"])(ConfigFileSelector, _ConfigGeneric);
+
+  var _super = _createSuper(ConfigFileSelector);
+
+  function ConfigFileSelector(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ConfigFileSelector);
+    _this = _super.call(this, props);
+    _this.dropzoneRef = /*#__PURE__*/_react["default"].createRef();
+    _this.imagePrefix = _this.props.imagePrefix === undefined ? '../../files' : _this.props.imagePrefix;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ConfigFileSelector, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      (0, _get2["default"])((0, _getPrototypeOf2["default"])(ConfigFileSelector.prototype), "componentDidMount", this).call(this);
+      this.objectID = (this.props.schema.objectID || '0_userdata.0').replace('%INSTANCE%', this.props.instance);
+      this.path = this.props.schema.upload;
+
+      if (this.path) {
+        if (this.path === '/') {
+          this.path = '';
+        } else {
+          if (!this.path.endsWith('/')) {
+            this.path = this.path + '/';
+          }
+        }
+      } // read files
+
+
+      this.updateFiles().then(function () {
+        var value = _ConfigGeneric2["default"].getValue(_this2.props.data, _this2.props.attr);
+
+        _this2.setState({
+          value: value
+        });
+
+        _this2.checkImage();
+      });
+    }
+  }, {
+    key: "updateFiles",
+    value: function updateFiles() {
+      var _this3 = this;
+
+      return this.readFiles(this.props.schema.pattern).then(function (files) {
+        return _this3.setState({
+          files: files
+        });
+      });
+    }
+  }, {
+    key: "readFolder",
+    value: function () {
+      var _readFolder = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(folderName, files, filter) {
+        var dirFiles, f, file, ok, regExp;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return this.props.socket.readDir(this.objectID, folderName.replace(/^\//, '') || null);
+
+              case 3:
+                dirFiles = _context.sent;
+                f = 0;
+
+              case 5:
+                if (!(f < dirFiles.length)) {
+                  _context.next = 18;
+                  break;
+                }
+
+                file = dirFiles[f];
+
+                if (!file.isDir) {
+                  _context.next = 12;
+                  break;
+                }
+
+                _context.next = 10;
+                return this.readFolder("".concat(folderName + file.file, "/"), files, filter);
+
+              case 10:
+                _context.next = 15;
+                break;
+
+              case 12:
+                ok = false;
+
+                if (filter === '*.*' && file.file.includes('.')) {
+                  ok = true;
+                } else if (!filter || filter === '*') {
+                  ok = true;
+                } else if (filter === '.*' && file.file.startsWith('.')) {
+                  ok = true;
+                } else {
+                  regExp = new RegExp('^' + filter.replace(/\./g, '\\.').replace(/\*/g, '.*') + '$');
+                  ok = regExp.test(file.file);
+                }
+
+                ok && files.push({
+                  name: folderName + file.file,
+                  size: file.stats ? _Utils["default"].formatBytes(file.stats.size) : '--'
+                });
+
+              case 15:
+                f++;
+                _context.next = 5;
+                break;
+
+              case 18:
+                _context.next = 23;
+                break;
+
+              case 20:
+                _context.prev = 20;
+                _context.t0 = _context["catch"](0);
+                console.error("Cannot read \"".concat(folderName, "\": ").concat(_context.t0));
+
+              case 23:
+                return _context.abrupt("return", files);
+
+              case 24:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this, [[0, 20]]);
+      }));
+
+      function readFolder(_x, _x2, _x3) {
+        return _readFolder.apply(this, arguments);
+      }
+
+      return readFolder;
+    }()
+  }, {
+    key: "readFiles",
+    value: function () {
+      var _readFiles = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(pattern) {
+        var files, filter, pos, _pos, folder;
+
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                files = [];
+                pattern = pattern || this.props.schema.pattern;
+
+                if (!pattern) {
+                  pattern = '**/*.*';
+                }
+
+                pos = pattern.lastIndexOf('/');
+
+                if (pos === -1) {
+                  filter = pattern;
+                } else {
+                  filter = pattern.substring(pos + 1);
+                }
+
+                if (!pattern.startsWith('**')) {
+                  _context2.next = 10;
+                  break;
+                }
+
+                _context2.next = 8;
+                return this.readFolder('/', files, filter);
+
+              case 8:
+                _context2.next = 19;
+                break;
+
+              case 10:
+                _pos = pattern.lastIndexOf('/');
+
+                if (!(_pos === -1)) {
+                  _context2.next = 16;
+                  break;
+                }
+
+                _context2.next = 14;
+                return this.readFolder('/', files, filter);
+
+              case 14:
+                _context2.next = 19;
+                break;
+
+              case 16:
+                folder = pattern.substring(0, _pos + 1);
+                _context2.next = 19;
+                return this.readFolder(folder, files, filter);
+
+              case 19:
+                return _context2.abrupt("return", files);
+
+              case 20:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function readFiles(_x4) {
+        return _readFiles.apply(this, arguments);
+      }
+
+      return readFiles;
+    }()
+  }, {
+    key: "onDrop",
+    value: function onDrop(acceptedFiles) {
+      var _this4 = this;
+
+      var file = acceptedFiles[0];
+      var reader = new FileReader();
+      var maxSize = this.props.schema.maxSize || 2 * 1024 * 1024;
+
+      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(_i18n["default"].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);
+        }, '')));
+
+        _this4.props.socket.writeFile64(_this4.objectID, _this4.path + file.name, base64).then(function () {
+          return _this4.updateFiles();
+        })["catch"](function (e) {
+          return window.alert('Cannot upload file: ' + e);
+        });
+      };
+
+      reader.readAsArrayBuffer(file);
+    }
+  }, {
+    key: "loadFile",
+    value: function loadFile() {
+      return this.props.socket.readFile(this.objectID, this.state.value, true);
+    }
+  }, {
+    key: "renderDeleteDialog",
+    value: function renderDeleteDialog() {
+      var _this5 = this;
+
+      if (!this.state.deleteFile) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_Confirm["default"], {
+        title: _i18n["default"].t('ra_Are you sure?'),
+        text: _i18n["default"].t('ra_File will be deleted'),
+        ok: _i18n["default"].t('ra_Delete'),
+        cancel: _i18n["default"].t('ra_Cancel'),
+        onClose: function onClose(isOk) {
+          var deleteFile = _this5.state.deleteFile;
+
+          _this5.setState({
+            deleteFile: false
+          }, function () {
+            if (isOk) {
+              _this5.props.socket.deleteFile(_this5.objectID, deleteFile).then(function () {
+                return _this5.updateFiles();
+              })["catch"](function (e) {
+                return window.alert('Cannot delete file: ' + e);
+              });
+            }
+          });
+        }
+      });
+    }
+  }, {
+    key: "play",
+    value: function play() {
+      this.loadFile().then(function (data) {
+        if (typeof AudioContext !== 'undefined') {
+          var context = new AudioContext();
+          var buf = ConfigFileSelector.base64ToArrayBuffer(data.file);
+          context.decodeAudioData(buf, function (buffer) {
+            var source = context.createBufferSource(); // creates a sound source
+
+            source.buffer = buffer; // tell the source which sound to play
+
+            source.connect(context.destination); // connect the source to the context's destination (the speakers)
+
+            source.start(0);
+          }, function (err) {
+            return window.alert('Cannot play: ' + err);
+          });
+        }
+      });
+    }
+  }, {
+    key: "getIcon",
+    value: function getIcon(item) {
+      if (!item || !item.extension) {
+        return null;
+      }
+
+      if (IMAGE_EXT.includes(item.extension)) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: this.props.classes.selectedImage,
+          style: {
+            backgroundImage: 'url(' + this.imagePrefix + '/' + this.objectID + '/' + item.value + ')',
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat'
+          }
+        });
+      } else if (AUDIO_EXT.includes(item.extension)) {
+        return /*#__PURE__*/_react["default"].createElement(_MusicNote["default"], null);
+      } else if (DOC_EXT.includes(item.extension)) {
+        return /*#__PURE__*/_react["default"].createElement(_Article["default"], null);
+      } else if (VIDEO_EXT.includes(item.extension)) {
+        return /*#__PURE__*/_react["default"].createElement(_Videocam["default"], null);
+      } else if (JS_EXT.includes(item.extension)) {
+        return /*#__PURE__*/_react["default"].createElement(_Code["default"], null);
+      }
+
+      return null;
+    }
+  }, {
+    key: "renderItem",
+    value: function renderItem(error, disabled, defaultValue) {
+      var _this6 = this;
+
+      if (!this.state.files) {
+        return null;
+      }
+
+      var folders = [];
+
+      if (!this.props.schema.withFolder) {
+        this.state.files.forEach(function (file) {
+          var pos = file.name.lastIndexOf('/');
+
+          if (pos === -1) {
+            if (!folders.includes('/')) {
+              folders.push('/');
+            }
+          } else {
+            var folder = file.name.substring(0, pos + 1);
+
+            if (!folders.includes(folder)) {
+              folders.push(folder);
+            }
+          }
+        });
+      }
+
+      var selectOptions = this.state.files.map(function (file) {
+        return {
+          value: file.name,
+          label: !_this6.props.schema.withFolder && folders.length === 1 ? "".concat(file.name.substring(folders[0].length)) : "".concat(file.name) + (_this6.props.schema.noSize ? '' : "(".concat(file.size, ")")),
+          extension: file.name.toLowerCase().split('.').pop()
+        };
+      });
+
+      if (!this.props.schema.noNone) {
+        selectOptions.unshift({
+          label: _i18n["default"].t('ra_none'),
+          value: ''
+        });
+      } // eslint-disable-next-line
+
+
+      var item = selectOptions.find(function (item) {
+        return item.value === _this6.state.value;
+      });
+      var buttons = 0;
+
+      if (this.props.schema.upload) {
+        buttons++;
+      }
+
+      if (this.props.schema.refresh) {
+        buttons++;
+      }
+
+      var play = this.state.value && (this.state.value.endsWith('.mp3') || this.state.value.endsWith('.ogg') || this.state.value.endsWith('.wav')); // show play button
+
+      if (play) {
+        buttons++;
+      }
+
+      var element = /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.fullWidth
+      }, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+        variant: "standard",
+        style: {
+          width: "calc(100% - ".concat(buttons * 42, "px)")
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], null, this.getText(this.props.schema.label)), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        variant: "standard",
+        error: !!error,
+        disabled: !!disabled,
+        value: this.state.value || '_',
+        renderValue: function renderValue(val) {
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _this6.getIcon(item), /*#__PURE__*/_react["default"].createElement("span", null, (item === null || item === void 0 ? void 0 : item.label) || ''));
+        },
+        onChange: function onChange(e) {
+          _this6.setState({
+            value: e.target.value === '_' ? '' : e.target.value
+          }, function () {
+            return _this6.onChange(_this6.props.attr, _this6.state.value);
+          });
+        }
+      }, selectOptions.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: item.value,
+          value: item.value
+        }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], null, _this6.getIcon(item)), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, item.label), _this6.props.schema["delete"] && item.value ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+          className: _this6.props.classes.deleteButton,
+          size: "small",
+          onClick: function onClick() {
+            return _this6.setState({
+              deleteFile: item.value
+            });
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)) : null);
+      })), this.props.schema.help ? /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)) : null), this.props.schema.refresh && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        onClick: function onClick() {
+          return _this6.updateFiles();
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Refresh["default"], null)), this.props.schema.upload && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        onClick: function onClick() {
+          var _this6$dropzoneRef$cu;
+
+          return (_this6$dropzoneRef$cu = _this6.dropzoneRef.current) === null || _this6$dropzoneRef$cu === void 0 ? void 0 : _this6$dropzoneRef$cu.open();
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_UploadFile["default"], null)), play && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        style: {
+          color: '#00FF00'
+        },
+        onClick: function onClick() {
+          return _this6.play();
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_PlayArrow["default"], null)));
+
+      if (!this.props.schema.upload) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, element, this.renderDeleteDialog());
+      } else {
+        var accept = {
+          '*/*': []
+        };
+
+        if (this.props.schema.pattern) {
+          var last = this.props.schema.pattern.split('/').pop().toLowerCase().replace(/.*\./, '');
+
+          if (last === 'png' || last === 'jpg' || last === 'svg') {
+            accept = {
+              'image/*': ['.png', '.jpg', '.svg']
+            };
+          } else if (last === 'mp3' || last === 'ogg' || last === 'wav') {
+            accept = {
+              'audio/*': ['.mp3', '.ogg', '.wav', '.mp4']
+            };
+          } else if (last === 'ics') {
+            accept = {
+              'text/calendar': ['.mp3', '.ogg', '.wav', '.mp4']
+            };
+          } else if (last === 'txt') {
+            accept = {
+              'text/plain': ['.txt']
+            };
+          } else if (last === 'pem') {
+            accept = {
+              'text/plain': ['.pem']
+            };
+          } else if (last === 'pem') {
+            accept = {
+              '*/*': ['.' + last]
+            };
+          }
+        }
+
+        return /*#__PURE__*/_react["default"].createElement(_reactDropzone["default"], {
+          ref: this.dropzoneRef,
+          multiple: false,
+          accept: accept,
+          noKeyboard: true,
+          noClick: true,
+          maxSize: this.props.schema.maxSize || 2 * 1024 * 1024,
+          onDragEnter: function onDragEnter() {
+            _this6.setState({
+              uploadFile: 'dragging'
+            });
+          },
+          onDragLeave: function onDragLeave() {
+            return _this6.setState({
+              uploadFile: true
+            });
+          },
+          onDrop: function onDrop(acceptedFiles, errors) {
+            _this6.setState({
+              uploadFile: false
+            });
+
+            if (!acceptedFiles.length) {
+              window.alert(errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message || _i18n["default"].t('Cannot upload'));
+            } else {
+              return _this6.onDrop(acceptedFiles);
+            }
+          }
+        }, function (_ref) {
+          var getRootProps = _ref.getRootProps,
+              getInputProps = _ref.getInputProps;
+          return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+            className: _Utils["default"].clsx(_this6.props.classes.uploadDiv, _this6.state.uploadFile === 'dragging' && _this6.props.classes.uploadDivDragging, disabled && _this6.props.classes.disabledOpacity)
+          }, getRootProps()), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), _this6.state.uploadFile === 'dragging' ? /*#__PURE__*/_react["default"].createElement("div", {
+            className: _Utils["default"].clsx(_this6.props.classes.uploadCenterDiv, _this6.state.uploadError && _this6.props.classes.error)
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: _this6.props.classes.uploadCenterTextAndIcon
+          }, /*#__PURE__*/_react["default"].createElement(_fa.FaFileUpload, {
+            className: _this6.props.classes.uploadCenterIcon
+          }), /*#__PURE__*/_react["default"].createElement("div", {
+            className: _this6.props.classes.uploadCenterText
+          }, _this6.state.uploadFile === 'dragging' ? _i18n["default"].t('Drop file here') : _i18n["default"].t('Place your files here or click here to open the browse dialog')))) : null, element, _this6.renderDeleteDialog());
+        });
+      }
+    }
+  }], [{
+    key: "base64ToArrayBuffer",
+    value: function base64ToArrayBuffer(base64) {
+      var binary_string = window.atob(base64);
+      var len = binary_string.length;
+      var bytes = new Uint8Array(len);
+
+      for (var i = 0; i < len; i++) {
+        bytes[i] = binary_string.charCodeAt(i);
+      }
+
+      return bytes.buffer;
+    }
+  }]);
+  return ConfigFileSelector;
+}(_ConfigGeneric2["default"]);
+
+ConfigFileSelector.propTypes = {
+  socket: _propTypes["default"].object.isRequired,
+  themeType: _propTypes["default"].string,
+  themeName: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  data: _propTypes["default"].object.isRequired,
+  schema: _propTypes["default"].object,
+  onError: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  imagePrefix: _propTypes["default"].func
+};
+
+var _default = (0, _styles.withStyles)(styles)(ConfigFileSelector);
+
+exports["default"] = _default;
+//# sourceMappingURL=ConfigFileSelector.js.map