@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
221 lines (181 loc) • 8.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _react = _interopRequireDefault(require("react"));
var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
var _Fab = _interopRequireDefault(require("@material-ui/core/Fab"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _i18n = _interopRequireDefault(require("../i18n"));
var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
var _VerticalAlignTop = _interopRequireDefault(require("@material-ui/icons/VerticalAlignTop"));
var _VerticalAlignBottom = _interopRequireDefault(require("@material-ui/icons/VerticalAlignBottom"));
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 {
buttons: {
marginRight: 5,
marginTop: 5,
"float": 'right'
},
logo: {
padding: 8,
width: 64
}
};
};
/**
* @typedef {object} LogoProps
* @property {any} common Adapter common configuration from io-package.json
* @property {any} native Adapter native data from io-package.json
* @property {number} instance Adapter instance number.
* @property {(contents: any) => void} [onLoad]
* @property {(error: string) => void} [onError]
* @property {{ buttons: string, logo: string }} classes The styling class names.
*
* @extends {React.Component<LogoProps>}
*/
var Logo = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(Logo, _React$Component);
var _super = _createSuper(Logo);
function Logo() {
(0, _classCallCheck2["default"])(this, Logo);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(Logo, [{
key: "handleFileSelect",
value: function handleFileSelect(evt) {
var _this = this;
var f = evt.target.files[0];
if (f) {
var r = new window.FileReader();
r.onload = function (e) {
var contents = e.target.result;
try {
var json = JSON.parse(contents);
if (json["native"] && json.common) {
if (json.common.name !== _this.props.common.name) {
_this.props.onError && _this.props.onError(_i18n["default"].t('ra_otherConfig', json.common.name));
} else {
_this.props.onLoad && _this.props.onLoad(json["native"]);
}
} else {
_this.props.onError && _this.props.onError(_i18n["default"].t('ra_invalidConfig'));
}
} catch (e) {
_this.props.onError && _this.props.onError(e.toString());
}
};
r.readAsText(f);
} else {
alert('Failed to open JSON File');
}
}
}, {
key: "download",
value: function download() {
var result = {
_id: "system.adapter.".concat(this.props.common.name, ".").concat(this.props.instance),
common: JSON.parse(JSON.stringify(this.props.common)),
"native": this.props["native"]
}; // remove unimportant information
if (result.common.news) {
delete result.common.news;
}
if (result.common.titleLang) {
delete result.common.titleLang;
}
if (result.common.desc) {
delete result.common.desc;
} //window.open('data:application/iobroker; content-disposition=attachment; filename=' + result._id + '.json,' + JSON.stringify(result, null, 2));
Logo.generateFile(result._id + '.json', result);
}
}, {
key: "upload",
value: function upload() {
var _this2 = this;
var input = window.document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('id', 'files');
input.setAttribute('opacity', 0);
input.addEventListener('change', function (e) {
return _this2.handleFileSelect(e, function () {});
}, false);
input.click();
}
}, {
key: "render",
value: function render() {
var _this3 = this;
return /*#__PURE__*/_react["default"].createElement("div", {
className: this.props.className,
style: this.props.style
}, this.props.common.icon ? /*#__PURE__*/_react["default"].createElement("img", {
src: this.props.common.icon,
className: this.props.classes.logo,
alt: "logo"
}) : null, this.props.common.readme ? /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
size: "small",
color: "primary",
"aria-label": "Help",
className: this.props.classes.buttons,
onClick: function onClick() {
var win = window.open(_this3.props.common.readme, '_blank');
win.focus();
}
}, /*#__PURE__*/_react["default"].createElement(_Help["default"], null)) : null, /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
size: "small",
color: "primary",
"aria-label": "Load config",
className: this.props.classes.buttons,
title: _i18n["default"].t('ra_Load configuration from file'),
onClick: function onClick() {
return _this3.upload();
}
}, /*#__PURE__*/_react["default"].createElement(_VerticalAlignTop["default"], null)), /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
size: "small",
color: "primary",
"aria-label": "Save config",
className: this.props.classes.buttons,
title: _i18n["default"].t('ra_Save configuration to file'),
onClick: function onClick() {
return _this3.download();
}
}, /*#__PURE__*/_react["default"].createElement(_VerticalAlignBottom["default"], null)));
}
}], [{
key: "generateFile",
value: function generateFile(filename, obj) {
var el = window.document.createElement('a');
el.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(obj, null, 2)));
el.setAttribute('download', filename);
el.style.display = 'none';
window.document.body.appendChild(el);
el.click();
window.document.body.removeChild(el);
}
}]);
return Logo;
}(_react["default"].Component);
Logo.propTypes = {
common: _propTypes["default"].object.isRequired,
className: _propTypes["default"].string,
style: _propTypes["default"].object,
"native": _propTypes["default"].object.isRequired,
instance: _propTypes["default"].number.isRequired,
onError: _propTypes["default"].func.isRequired,
onLoad: _propTypes["default"].func.isRequired
};
/** @type {typeof Logo} */
var _export = (0, _withStyles["default"])(styles)(Logo);
var _default = _export;
exports["default"] = _default;
//# sourceMappingURL=Logo.js.map