@iobroker/adapter-react-v5 4.2.1 → 4.3.1

package/Components/Image.js

@@ -98,7 +98,9 @@ var Image = /*#__PURE__*/function (_React$Component) {
             __html: inner
           }
         }));
-      } catch (e) {}
+      } catch (e) {
+        // ignore
+      }
       return null;
     }
   }, {
@@ -115,28 +117,27 @@ var Image = /*#__PURE__*/function (_React$Component) {
           }, 50);
         }
         return this.svg;
-      } else if (this.state.src) {
+      }
+      if (this.state.src) {
         if (this.state.imgError || !this.state.src) {
           return /*#__PURE__*/_react["default"].createElement(_IconNoIcon["default"], {
             className: this.props.className
           });
-        } else {
-          return /*#__PURE__*/_react["default"].createElement("img", {
-            className: this.props.className,
-            src: (this.props.imagePrefix || '') + this.state.src,
-            alt: "",
-            onError: function onError() {
-              return _this2.props.showError ? _this2.setState({
-                imgError: true
-              }) : _this2.setState({
-                src: ''
-              });
-            }
-          });
         }
-      } else {
-        return null;
+        return /*#__PURE__*/_react["default"].createElement("img", {
+          className: this.props.className,
+          src: (this.props.imagePrefix || '') + this.state.src,
+          alt: "",
+          onError: function onError() {
+            return _this2.props.showError ? _this2.setState({
+              imgError: true
+            }) : _this2.setState({
+              src: ''
+            });
+          }
+        });
       }
+      return null;
     }
   }], [{
     key: "getDerivedStateFromProps",

package/Components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["_react","_interopRequireDefault","require","_propTypes","_IconNoIcon","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","getElementFromSource","src","svgContainer","document","createElement","innerHTML","svg","firstElementChild","remove","removeChild","serializeAttrs","map","ret","prop","i","length","key","name","startsWith","replace","g","toUpperCase","value","Image","_React$Component","_inherits2","_super","props","_this","_classCallCheck2","state","created","color","imgError","showError","getSvgFromData","_createClass2","len","substring","atob","inner","svgProps","attributes","_extends2","className","style","dangerouslySetInnerHTML","__html","render","_this2","setTimeout","setState","imagePrefix","alt","onError","getDerivedStateFromProps","newState","changed","React","Component","propTypes","PropTypes","string","isRequired","_default","exports"],"sources":["Image.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport IconNoIcon from '../icons/IconNoIcon';\n\nfunction getElementFromSource(src) {\n    const svgContainer = document.createElement('div');\n    svgContainer.innerHTML = src;\n    const svg = svgContainer.firstElementChild;\n    if (svg.remove) {\n        svg.remove();\n    } else {\n        svgContainer.removeChild(svg);\n    }\n\n    svgContainer.remove();\n    return svg;\n}\n\nfunction serializeAttrs(map) {\n    const ret = {};\n    for (let prop, i = 0; i < map.length; i++) {\n        const key = map[i].name;\n        if (key === 'class') {\n            prop = 'className';\n        }\n        else if (!key.startsWith('data-')) {\n            prop = key.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());\n        } else {\n            prop = key;\n        }\n\n        ret[prop] = map[i].value;\n    }\n    return ret;\n}\n\n/**\n * @typedef {object} ImageProps\n * @property {string} [color] The color.\n * @property {string} [src] The source of the image.\n * @property {string} [imagePrefix] The image prefix (default: './files/')\n * @property {string} [className] The CSS class name.\n * @property {boolean} [showError] Show image errors (or just show no image)?\n *\n * @extends {React.Component<ImageProps>}\n */\nclass Image extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            svg: !!(this.props.src && this.props.src.startsWith('data:')),\n            created: true,\n            color: this.props.color || '',\n            src: this.props.src || '',\n            imgError: false,\n            showError: this.props.showError,\n        };\n\n        this.svg = this.state.svg ? this.getSvgFromData(this.state.src) : null;\n    }\n\n    static getDerivedStateFromProps(props, state) {\n        const newState = {};\n        let changed = false;\n\n        if (props && state && props.src !== state.src) {\n            newState.src = props.src;\n            newState.svg = props.src && props.src.startsWith('data:');\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.color !== state.color) {\n            newState.color = props.color;\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.showError !== state.showError) {\n            newState.showError = props.showError;\n            changed = true;\n        }\n\n        return changed ? newState : null;\n    }\n\n    getSvgFromData(src) {\n        const len = 'data:image/svg+xml;base64,';\n        if (!src.startsWith(len)) {\n            return null;\n        }\n        src = src.substring(len.length);\n        try {\n            src = atob(src);\n            const svg = getElementFromSource(src);\n            const inner = svg.innerHTML;\n            const svgProps = serializeAttrs(svg.attributes || []);\n\n            svg.remove();\n\n            return <svg\n                className={this.props.className}\n                style={this.state.color ? {color: this.state.color} : {}}\n                {...svgProps}\n                dangerouslySetInnerHTML={{ __html: inner }}\n            />;\n        } catch (e) {\n\n        }\n        return null;\n    }\n\n    render() {\n        if (this.state.svg) {\n            if (!this.state.created) {\n                setTimeout(() => {\n                    this.svg = this.getSvgFromData(this.state.src);\n                    this.setState({created: true});\n                }, 50);\n            }\n\n            return this.svg;\n        } else if (this.state.src) {\n            if (this.state.imgError || !this.state.src) {\n                return <IconNoIcon className={this.props.className} />;\n            } else {\n                return <img\n                    className={this.props.className}\n                    src={(this.props.imagePrefix || '') + this.state.src}\n                    alt=\"\"\n                    onError={() => this.props.showError ? this.setState({imgError: true}) : this.setState({src: ''})}\n                />;\n            }\n        } else {\n            return null;\n        }\n    }\n}\n\nImage.propTypes = {\n    color: PropTypes.string,\n    src: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    imagePrefix: PropTypes.string,\n};\n\nexport default Image;"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["_react","_interopRequireDefault","require","_propTypes","_IconNoIcon","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","getElementFromSource","src","svgContainer","document","createElement","innerHTML","svg","firstElementChild","remove","removeChild","serializeAttrs","map","ret","prop","i","length","key","name","startsWith","replace","g","toUpperCase","value","Image","_React$Component","_inherits2","_super","props","_this","_classCallCheck2","state","created","color","imgError","showError","getSvgFromData","_createClass2","len","substring","atob","inner","svgProps","attributes","_extends2","className","style","dangerouslySetInnerHTML","__html","render","_this2","setTimeout","setState","imagePrefix","alt","onError","getDerivedStateFromProps","newState","changed","React","Component","propTypes","PropTypes","string","isRequired","_default","exports"],"sources":["Image.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport IconNoIcon from '../icons/IconNoIcon';\n\nfunction getElementFromSource(src) {\n    const svgContainer = document.createElement('div');\n    svgContainer.innerHTML = src;\n    const svg = svgContainer.firstElementChild;\n    if (svg.remove) {\n        svg.remove();\n    } else {\n        svgContainer.removeChild(svg);\n    }\n\n    svgContainer.remove();\n    return svg;\n}\n\nfunction serializeAttrs(map) {\n    const ret = {};\n    for (let prop, i = 0; i < map.length; i++) {\n        const key = map[i].name;\n        if (key === 'class') {\n            prop = 'className';\n        } else if (!key.startsWith('data-')) {\n            prop = key.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());\n        } else {\n            prop = key;\n        }\n\n        ret[prop] = map[i].value;\n    }\n    return ret;\n}\n\n/**\n * @typedef {object} ImageProps\n * @property {string} [color] The color.\n * @property {string} [src] The source of the image.\n * @property {string} [imagePrefix] The image prefix (default: './files/')\n * @property {string} [className] The CSS class name.\n * @property {boolean} [showError] Show image errors (or just show no image)?\n *\n * @extends {React.Component<ImageProps>}\n */\nclass Image extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            svg: !!(this.props.src && this.props.src.startsWith('data:')),\n            created: true,\n            color: this.props.color || '',\n            src: this.props.src || '',\n            imgError: false,\n            showError: this.props.showError,\n        };\n\n        this.svg = this.state.svg ? this.getSvgFromData(this.state.src) : null;\n    }\n\n    static getDerivedStateFromProps(props, state) {\n        const newState = {};\n        let changed = false;\n\n        if (props && state && props.src !== state.src) {\n            newState.src = props.src;\n            newState.svg = props.src && props.src.startsWith('data:');\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.color !== state.color) {\n            newState.color = props.color;\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.showError !== state.showError) {\n            newState.showError = props.showError;\n            changed = true;\n        }\n\n        return changed ? newState : null;\n    }\n\n    getSvgFromData(src) {\n        const len = 'data:image/svg+xml;base64,';\n        if (!src.startsWith(len)) {\n            return null;\n        }\n        src = src.substring(len.length);\n        try {\n            src = atob(src);\n            const svg = getElementFromSource(src);\n            const inner = svg.innerHTML;\n            const svgProps = serializeAttrs(svg.attributes || []);\n\n            svg.remove();\n\n            return <svg\n                className={this.props.className}\n                style={this.state.color ? { color: this.state.color } : {}}\n                {...svgProps}\n                dangerouslySetInnerHTML={{ __html: inner }}\n            />;\n        } catch (e) {\n            // ignore\n        }\n        return null;\n    }\n\n    render() {\n        if (this.state.svg) {\n            if (!this.state.created) {\n                setTimeout(() => {\n                    this.svg = this.getSvgFromData(this.state.src);\n                    this.setState({ created: true });\n                }, 50);\n            }\n\n            return this.svg;\n        }\n        if (this.state.src) {\n            if (this.state.imgError || !this.state.src) {\n                return <IconNoIcon className={this.props.className} />;\n            }\n            return <img\n                className={this.props.className}\n                src={(this.props.imagePrefix || '') + this.state.src}\n                alt=\"\"\n                onError={() => (this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' }))}\n            />;\n        }\n\n        return null;\n    }\n}\n\nImage.propTypes = {\n    color: PropTypes.string,\n    src: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    imagePrefix: PropTypes.string,\n};\n\nexport default Image;\n"],"mappings":"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"}

package/Components/JsonConfigComponent/ConfigTable.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -20,24 +21,21 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/styles");
+var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
 var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
 var _material = require("@mui/material");
-var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
-var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _ArrowUpward = _interopRequireDefault(require("@mui/icons-material/ArrowUpward"));
-var _ArrowDownward = _interopRequireDefault(require("@mui/icons-material/ArrowDownward"));
-var _FilterAlt = _interopRequireDefault(require("@mui/icons-material/FilterAlt"));
-var _FilterAltOff = _interopRequireDefault(require("@mui/icons-material/FilterAltOff"));
-var _ContentCopy = _interopRequireDefault(require("@mui/icons-material/ContentCopy"));
+var _iconsMaterial = require("@mui/icons-material");
 var _i18n = _interopRequireDefault(require("./wrapper/i18n"));
 var _Utils = _interopRequireDefault(require("./wrapper/Components/Utils"));
 var _ConfigGeneric2 = _interopRequireDefault(require("./ConfigGeneric"));
 var _ConfigPanel = _interopRequireDefault(require("./ConfigPanel"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 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; }
 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 MAX_SIZE = 1024 * 1024; // 1MB
+
 var styles = function styles(theme) {
   return {
     fullWidth: {
@@ -104,6 +102,71 @@ var styles = function styles(theme) {
     },
     buttonCell: {
       whiteSpace: 'nowrap'
+    },
+    dropZone: {
+      width: '100%',
+      height: 100,
+      position: 'relative'
+    },
+    dropZoneEmpty: {},
+    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)'
+    },
+    image: {
+      objectFit: 'contain',
+      margin: 'auto',
+      display: 'flex',
+      width: '100%',
+      height: '100%'
+    },
+    uploadCenterDiv: {
+      margin: 5,
+      border: '3px dashed grey',
+      borderRadius: 5,
+      width: 'calc(100% - 10px)',
+      height: 'calc(100% - 10px)',
+      minHeight: 300,
+      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'
+    },
+    buttonRemoveWrapper: {
+      position: 'absolute',
+      zIndex: 222,
+      right: 0
+    },
+    error: {
+      border: '2px solid red',
+      boxSizing: 'border-box'
     }
   };
 };
@@ -432,7 +495,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
           color: "primary",
           disabled: !!doAnyFilterSet && !_this3.props.schema.allowAddByFilter,
           onClick: _this3.onAdd
-        }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)))) : null, headCell.sort && /*#__PURE__*/_react["default"].createElement(_material.TableSortLabel, {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Add, null)))) : null, headCell.sort && /*#__PURE__*/_react["default"].createElement(_material.TableSortLabel, {
           active: true,
           className: _Utils["default"].clsx(orderBy !== headCell.attr && classes.silver),
           direction: orderBy === headCell.attr ? order : 'asc',
@@ -455,7 +518,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
                 _this3.filterRefs[headCell.attr].current.children[0].children[0].value = '';
                 _this3.applyFilter();
               }
-            }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)))
+            }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)))
           },
           fullWidth: true,
           placeholder: _this3.getText(headCell.title)
@@ -481,7 +544,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
               }
             });
           }
-        }, _this3.state.filterOn.includes(headCell.attr) ? /*#__PURE__*/_react["default"].createElement(_FilterAltOff["default"], null) : /*#__PURE__*/_react["default"].createElement(_FilterAlt["default"], null)) : null));
+        }, _this3.state.filterOn.includes(headCell.attr) ? /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FilterAltOff, null) : /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FilterAlt, null)) : null));
       }), !schema.noDelete && /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         style: {
           paddingLeft: 20,
@@ -490,24 +553,138 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
           textAlign: 'right'
         },
         padding: "checkbox"
-      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+      }, schema["import"] ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        style: {
+          marginRight: 10
+        },
+        size: "small",
+        onClick: function onClick() {
+          return _this3.setState({
+            showImportDialog: true
+          });
+        },
+        title: _i18n["default"].t('ra_import data from %s file', 'CSV')
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.UploadFile, null)) : null, schema["export"] ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        style: {
+          marginRight: 10
+        },
+        size: "small",
+        onClick: function onClick() {
+          return _this3.onExport();
+        },
+        title: _i18n["default"].t('ra_Export data to %s file', 'CSV')
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Download, null)) : null, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         disabled: true,
         size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))));
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, null)))));
+    }
+  }, {
+    key: "onExport",
+    value: function onExport() {
+      var schema = this.props.schema;
+      var value = this.state.value;
+      var cols = schema.items.map(function (it) {
+        return it.attr;
+      });
+      var lines = [cols.join(';')];
+      value.forEach(function (row) {
+        var line = [];
+        schema.items.forEach(function (it) {
+          if (row[it.attr].includes(';')) {
+            line.push("\"".concat(row[it.attr], "\""));
+          } else {
+            line.push(row[it.attr]);
+          }
+        });
+        lines.push(line.join(';'));
+      });
+      var el = document.createElement('a');
+      el.setAttribute('href', "data:text/csv;charset=utf-8,".concat(encodeURIComponent(lines.join('\n'))));
+      var now = new Date();
+      el.setAttribute('download', "".concat(now.getFullYear(), "_").concat((now.getMonth() + 1).toString().padStart(2, '0'), "_").concat(now.getDate().toString().padStart(2, '0'), "_").concat(this.props.adapterName, ".").concat(this.props.instance, "_").concat(this.props.attr, ".csv"));
+      el.style.display = 'none';
+      document.body.appendChild(el);
+      el.click();
+      document.body.removeChild(el);
+    }
+  }, {
+    key: "onImport",
+    value: function onImport(text) {
+      var _this4 = this;
+      var lines = text.split('\n').map(function (line) {
+        return line.replace('\r', '').trim();
+      });
+      // the first line is header
+      var schema = this.props.schema;
+      var header = lines.shift().split(';').filter(function (it) {
+        return it && schema.items.find(function (it2) {
+          return it2.attr === it;
+        });
+      });
+      var values = [];
+      lines.forEach(function (line) {
+        var parts = line.split(';');
+        var obj = {};
+        var _loop = function _loop(_p) {
+          var value = parts[_p];
+          if (value.startsWith('"')) {
+            value = value.substring(1);
+            while (_p < parts.length && !value.endsWith('"')) {
+              value += ";".concat(parts[++_p]);
+            }
+            value = value.substring(0, value.length - 1);
+          }
+          if (parts[_p] === 'true') {
+            parts[_p] = true;
+          } else if (parts[_p] === 'false') {
+            parts[_p] = false;
+          } else if (window.isFinite(parts[_p])) {
+            var attr = _this4.props.schema.items.find(function (it) {
+              return it.attr === header[_p];
+            });
+            if (attr && attr.type === 'number') {
+              // if a type of attribute is a "number"
+              parts[_p] = parseFloat(parts[_p]);
+            }
+          }
+          obj[header[_p]] = parts[_p];
+          p = _p;
+        };
+        for (var p = 0; p < parts.length; p++) {
+          _loop(p);
+        }
+        values.push(obj);
+      });
+      if (values.length) {
+        var _this$state$value;
+        if ((_this$state$value = this.state.value) !== null && _this$state$value !== void 0 && _this$state$value.length) {
+          this.setState({
+            showTypeOfImportDialog: values,
+            showImportDialog: false
+          });
+        } else {
+          this.setState({
+            value: values,
+            showImportDialog: false
+          });
+        }
+      } else {
+        window.alert('ra_No data found in file');
+      }
     }
   }, {
     key: "isAnyFilterSet",
     value: function isAnyFilterSet() {
-      var _this4 = this;
+      var _this5 = this;
       return Object.keys(this.filterRefs).find(function (attr) {
-        var _this4$filterRefs$att;
-        return (_this4$filterRefs$att = _this4.filterRefs[attr].current) === null || _this4$filterRefs$att === void 0 ? void 0 : _this4$filterRefs$att.children[0].children[0].value;
+        var _this5$filterRefs$att;
+        return (_this5$filterRefs$att = _this5.filterRefs[attr].current) === null || _this5$filterRefs$att === void 0 ? void 0 : _this5$filterRefs$att.children[0].children[0].value;
       });
     }
   }, {
     key: "onMoveUp",
     value: function onMoveUp(idx) {
-      var _this5 = this;
+      var _this6 = this;
       var newValue = JSON.parse(JSON.stringify(this.state.value));
       var item = newValue[idx];
       newValue.splice(idx, 1);
@@ -516,15 +693,15 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         value: newValue,
         iteration: this.state.iteration + 10000
       }, function () {
-        return _this5.applyFilter(false, null, function () {
-          return _this5.onChangeWrapper(newValue);
+        return _this6.applyFilter(false, null, function () {
+          return _this6.onChangeWrapper(newValue);
         });
       });
     }
   }, {
     key: "onMoveDown",
     value: function onMoveDown(idx) {
-      var _this6 = this;
+      var _this7 = this;
       var newValue = JSON.parse(JSON.stringify(this.state.value));
       var item = newValue[idx];
       newValue.splice(idx, 1);
@@ -533,15 +710,157 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         value: newValue,
         iteration: this.state.iteration + 10000
       }, function () {
-        return _this6.applyFilter(false, null, function () {
-          return _this6.onChangeWrapper(newValue);
+        return _this7.applyFilter(false, null, function () {
+          return _this7.onChangeWrapper(newValue);
         });
       });
     }
+  }, {
+    key: "onDrop",
+    value: function onDrop(acceptedFiles) {
+      var _this8 = this;
+      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 () {
+        if (file.size > MAX_SIZE) {
+          return window.alert(_i18n["default"].t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(MAX_SIZE / 1024)));
+        }
+        var text = new Uint8Array(reader.result).reduce(function (data, _byte) {
+          return data + String.fromCharCode(_byte);
+        }, '');
+        _this8.onImport(text);
+      };
+      reader.readAsArrayBuffer(file);
+    }
+  }, {
+    key: "showTypeOfImportDialog",
+    value: function showTypeOfImportDialog() {
+      var _this9 = this;
+      if (!this.state.showTypeOfImportDialog) {
+        return null;
+      }
+      return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
+        open: !0,
+        onClose: function onClose() {
+          return _this9.setState({
+            showTypeOfImportDialog: false
+          });
+        },
+        maxWidth: "md"
+      }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, null, _i18n["default"].t('ra_Append or replace?')), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, null, _i18n["default"].t('ra_Append %s entries or replace existing?', this.state.showTypeOfImportDialog.length)), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
+        variant: "contained",
+        color: "primary",
+        autoFocus: true,
+        onClick: function onClick() {
+          var value = JSON.parse(JSON.stringify(_this9.state.value));
+          _this9.state.showTypeOfImportDialog.forEach(function (obj) {
+            return value.push(obj);
+          });
+          _this9.setState({
+            value: value,
+            iteration: _this9.state.iteration + 10000,
+            showTypeOfImportDialog: false
+          }, function () {
+            return _this9.applyFilter(false, null, function () {
+              return _this9.onChangeWrapper(value);
+            });
+          });
+        }
+      }, _i18n["default"].t('ra_Append')), /*#__PURE__*/_react["default"].createElement(_material.Button, {
+        variant: "contained",
+        color: "secondary",
+        autoFocus: true,
+        onClick: function onClick() {
+          var value = _this9.state.showTypeOfImportDialog;
+          _this9.setState({
+            value: value,
+            iteration: _this9.state.iteration + 10000,
+            showTypeOfImportDialog: false
+          }, function () {
+            return _this9.applyFilter(false, null, function () {
+              return _this9.onChangeWrapper(value);
+            });
+          });
+        }
+      }, _i18n["default"].t('ra_Replace'))));
+    }
+  }, {
+    key: "showImportDialog",
+    value: function showImportDialog() {
+      var _this10 = this;
+      if (!this.state.showImportDialog) {
+        return null;
+      }
+      return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
+        open: !0,
+        onClose: function onClose() {
+          return _this10.setState({
+            showImportDialog: false
+          });
+        },
+        maxWidth: "md",
+        fullWidth: true
+      }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, null, _i18n["default"].t('ra_Import from %s', 'CSV')), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_reactDropzone["default"], {
+        multiple: false,
+        accept: {
+          'text/csv': ['.csv']
+        },
+        maxSize: MAX_SIZE,
+        onDragEnter: function onDragEnter() {
+          return _this10.setState({
+            uploadFile: 'dragging'
+          });
+        },
+        onDragLeave: function onDragLeave() {
+          return _this10.setState({
+            uploadFile: true
+          });
+        },
+        onDrop: function onDrop(acceptedFiles, errors) {
+          _this10.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('ra_Cannot upload'));
+          } else {
+            return _this10.onDrop(acceptedFiles);
+          }
+        }
+      }, function (_ref) {
+        var getRootProps = _ref.getRootProps,
+          getInputProps = _ref.getInputProps;
+        return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+          className: _Utils["default"].clsx(_this10.props.classes.uploadDiv, _this10.state.uploadFile === 'dragging' && _this10.props.classes.uploadDivDragging, _this10.props.classes.dropZone, !_this10.state.icon && _this10.props.classes.dropZoneEmpty)
+        }, getRootProps()), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), /*#__PURE__*/_react["default"].createElement("div", {
+          className: _Utils["default"].clsx(_this10.props.classes.uploadCenterDiv)
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: _this10.props.classes.uploadCenterTextAndIcon
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.UploadFile, {
+          className: _this10.props.classes.uploadCenterIcon
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: _this10.props.classes.uploadCenterText
+        }, _this10.state.uploadFile === 'dragging' ? _i18n["default"].t('ra_Drop file here') : _i18n["default"].t('ra_Place your files here or click here to open the browse dialog')))));
+      })), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
+        variant: "contained",
+        onClick: function onClick() {
+          return _this10.setState({
+            showImportDialog: false
+          });
+        },
+        color: "primary",
+        startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
+      }, _i18n["default"].t('Cancel'))));
+    }
   }, {
     key: "renderItem",
     value: function renderItem(error, disabled, defaultValue) {
-      var _this7 = this;
+      var _this11 = this;
       var _this$props2 = this.props,
         classes = _this$props2.classes,
         schema = _this$props2.schema;
@@ -557,7 +876,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
       var doAnyFilterSet = this.isAnyFilterSet();
       return /*#__PURE__*/_react["default"].createElement(_material.Paper, {
         className: classes.paper
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      }, this.showImportDialog(), this.showTypeOfImportDialog(), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.addIcon
       }, schema.label ? /*#__PURE__*/_react["default"].createElement(_material.Toolbar, {
         variant: "dense",
@@ -578,39 +897,39 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
           return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
             key: "".concat(headCell.attr, "_").concat(idx),
             align: "left"
-          }, _this7.itemTable(headCell.attr, value[idx], idx));
+          }, _this11.itemTable(headCell.attr, value[idx], idx));
         }), !schema.noDelete && /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
           align: "left",
           className: classes.buttonCell
-        }, !doAnyFilterSet && !_this7.state.orderBy ? i ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        }, !doAnyFilterSet && !_this11.state.orderBy ? i ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
           title: _i18n["default"].t('ra_Move up')
         }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
           onClick: function onClick() {
-            return _this7.onMoveUp(idx);
+            return _this11.onMoveUp(idx);
           }
-        }, /*#__PURE__*/_react["default"].createElement(_ArrowUpward["default"], null))) : /*#__PURE__*/_react["default"].createElement("div", {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ArrowUpward, null))) : /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.buttonEmpty
-        }) : null, !doAnyFilterSet && !_this7.state.orderBy ? i < visibleValue.length - 1 ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        }) : null, !doAnyFilterSet && !_this11.state.orderBy ? i < visibleValue.length - 1 ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
           title: _i18n["default"].t('ra_Move down')
         }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
           onClick: function onClick() {
-            return _this7.onMoveDown(idx);
+            return _this11.onMoveDown(idx);
           }
-        }, /*#__PURE__*/_react["default"].createElement(_ArrowDownward["default"], null))) : /*#__PURE__*/_react["default"].createElement("div", {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ArrowDownward, null))) : /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.buttonEmpty
         }) : null, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
           title: _i18n["default"].t('ra_Delete current row')
         }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
-          onClick: _this7.onDelete(idx)
-        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))), _this7.props.schema.clone ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+          onClick: _this11.onDelete(idx)
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, null))), _this11.props.schema.clone ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
           title: _i18n["default"].t('ra_Clone current row')
         }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
-          onClick: _this7.onClone(idx)
-        }, /*#__PURE__*/_react["default"].createElement(_ContentCopy["default"], null))) : null));
+          onClick: _this11.onClone(idx)
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ContentCopy, null))) : null));
       }), !schema.noDelete && visibleValue.length >= (schema.showSecondAddAt || 5) ? /*#__PURE__*/_react["default"].createElement(_material.TableRow, null, /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         colSpan: schema.items.length + 1
       }, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
@@ -620,7 +939,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         color: "primary",
         disabled: !!doAnyFilterSet && !this.props.schema.allowAddByFilter,
         onClick: this.onAdd
-      }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)))))) : null)), !visibleValue.length && value.length ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Add, null)))))) : null)), !visibleValue.length && value.length ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.filteredOut
       }, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
         className: classes.title,
@@ -630,9 +949,9 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
       }, _i18n["default"].t('ra_All items are filtered out'), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         size: "small",
         onClick: function onClick() {
-          return _this7.applyFilter(true);
+          return _this11.applyFilter(true);
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)))) : null), schema.help ? /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)) : null);
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)))) : null), schema.help ? /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)) : null);
     }
   }], [{
     key: "descendingComparator",