@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
214 lines (176 loc) • 7.82 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.EXTENSIONS = 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 _styles = require("@material-ui/core/styles");
var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
var _no_icon = _interopRequireDefault(require("../assets/no_icon.svg"));
var _Utils = _interopRequireDefault(require("./Utils"));
var _fa = require("react-icons/fa");
var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
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 {
dialog: {
height: '100%',
maxHeight: '100%',
maxWidth: '100%'
},
content: {
textAlign: 'center'
},
textarea: {
width: '100%',
height: '100%'
},
img: {
width: 'auto',
height: 'calc(100% - 5px)',
objectFit: 'contain'
}
};
};
var EXTENSIONS = {
images: ['png', 'jpg', 'svg', 'jpeg', 'jpg'],
code: ['js', 'json'],
txt: ['log', 'txt', 'html', 'css', 'xml']
};
/**
* @typedef {object} FileViewerProps
* @property {string} [key] The key to identify this component.
* @property {import('../types').Translator} t Translation function
* @property {ioBroker.Languages} [lang] The selected language.
* @property {boolean} [expertMode] Is expert mode enabled? (default: false)
* @property {() => void} onClose Callback when the viewer is closed.
* @property {string} href The URL to the file to be displayed.
*
* @extends {React.Component<FileViewerProps>}
*/
exports.EXTENSIONS = EXTENSIONS;
var FileViewer = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(FileViewer, _React$Component);
var _super = _createSuper(FileViewer);
/**
* @param {Readonly<FileViewerProps>} props
*/
function FileViewer(props) {
var _this;
(0, _classCallCheck2["default"])(this, FileViewer);
_this = _super.call(this, props);
_this.ext = _Utils["default"].getFileExtension(_this.props.href);
_this.state = {
text: null,
code: null,
copyPossible: EXTENSIONS.code.includes(_this.ext) || EXTENSIONS.txt.includes(_this.ext)
};
if (_this.state.copyPossible) {
fetch(_this.props.href).then(function (response) {
return response.text();
}).then(function (data) {
if (EXTENSIONS.txt.includes(_this.ext)) {
_this.setState({
text: data
});
} else if (EXTENSIONS.code.includes(_this.ext)) {
_this.setState({
code: data
});
}
});
}
return _this;
}
(0, _createClass2["default"])(FileViewer, [{
key: "getContent",
value: function getContent() {
if (EXTENSIONS.images.includes(this.ext)) {
return /*#__PURE__*/_react["default"].createElement("img", {
onError: function onError(e) {
e.target.onerror = null;
e.target.src = _no_icon["default"];
},
className: this.props.classes.img,
src: this.props.href,
alt: this.props.href
});
} else if (this.state.code !== null) {
return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
className: this.props.classes.textarea,
multiline: true,
value: this.state.code,
InputProps: {
readOnly: true
}
});
} else if (this.state.text !== null) {
return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
className: this.props.classes.textarea,
value: this.state.code,
multiline: true,
InputProps: {
readOnly: true
}
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
className: this.props.classes.dialog,
open: !!this.props.href,
onClose: function onClose() {
return _this2.props.onClose();
},
fullWidth: true,
fullScreen: this.props.fullScreen !== undefined ? this.props.fullScreen : true,
"aria-labelledby": "form-dialog-title"
}, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
id: "form-dialog-title"
}, this.props.t('ra_View: %s', this.props.href)), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
className: this.props.classes.content
}, this.getContent()), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, this.state.copyPossible ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
onClick: function onClick(e) {
return _Utils["default"].copyToClipboard(_this2.state.text || _this2.state.code, e);
}
}, /*#__PURE__*/_react["default"].createElement(_fa.FaCopy, null), this.props.t('ra_Copy content')) : null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
onClick: function onClick() {
return _this2.props.onClose();
},
color: "primary"
}, /*#__PURE__*/_react["default"].createElement(_Close["default"], null), this.props.t('ra_Close'))));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps() {}
}]);
return FileViewer;
}(_react["default"].Component);
FileViewer.propTypes = {
t: _propTypes["default"].func,
onClose: _propTypes["default"].func,
href: _propTypes["default"].string.isRequired,
fullScreen: _propTypes["default"].bool
};
/** @type {typeof FileViewer} */
var _export = (0, _withWidth["default"])()((0, _styles.withStyles)(styles)(FileViewer));
var _default = _export;
exports["default"] = _default;
//# sourceMappingURL=FileViewer.js.map