@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
330 lines (273 loc) • 13.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
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 = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
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 _Button = _interopRequireDefault(require("@material-ui/core/Button"));
var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
var _Icon = _interopRequireDefault(require("./Icon"));
var _Utils = _interopRequireDefault(require("./Utils"));
var _list = _interopRequireDefault(require("../assets/devices/list.json"));
var _list2 = _interopRequireDefault(require("../assets/rooms/list.json"));
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 || _typeof3(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 IconSelector = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(IconSelector, _Component);
var _super = _createSuper(IconSelector);
function IconSelector(props) {
var _this;
(0, _classCallCheck2["default"])(this, IconSelector);
_this = _super.call(this, props);
_this.state = {
opened: false,
names: [],
filter: '',
icons: props.icons || null
};
return _this;
}
(0, _createClass2["default"])(IconSelector, [{
key: "loadAllIcons",
value: function loadAllIcons() {
var _this2 = this;
if (this.state.loading || this.state.icons) {
return;
}
this.setState({
loading: true
}, function () {
var icons = [];
var names = [];
if (!_this2.props.icons) {
var templates = _this2.props.onlyRooms || !_this2.props.onlyRooms && !_this2.props.onlyDevices ? _list2["default"] : null;
var promises = [];
if (templates) {
templates.forEach(function (item) {
if (item.name && (0, _typeof2["default"])(item.name) === 'object') {
item.name = item.name[_this2.props.lang] || item.name.en || item._id;
}
item.name = item.name || item._id;
});
templates = templates.filter(function (item, i) {
return !templates.find(function (_item, _i) {
return i !== _i && _item.icon === item.icon && _item.name === item.name;
});
});
templates.forEach(function (template, i) {
var image;
try {
image = require("../assets/rooms/".concat(template.icon));
} catch (e) {
return Promise.resolve(null);
}
names[i] = template.name;
promises.push(_Utils["default"].getSvg(image).then(function (icon) {
return icons[i] = icon;
}));
});
}
templates = _this2.props.onlyDevices || !_this2.props.onlyRooms && !_this2.props.onlyDevices ? _list["default"] : null;
if (templates) {
var offset = promises.length;
templates && templates.forEach(function (item) {
if (item.name && (0, _typeof2["default"])(item.name) === 'object') {
item.name = item.name[_this2.props.lang] || item.name.en || item._id;
}
item.name = item.name || item._id;
});
templates = templates.filter(function (item, i) {
return !templates.find(function (_item, _i) {
return i !== _i && _item.icon === item.icon && _item.name === item.name;
});
});
templates.forEach(function (template, i) {
var image;
try {
image = require("../assets/devices/".concat(template.icon));
} catch (e) {
return Promise.resolve(null);
}
names[i + offset] = template.name;
promises.push(_Utils["default"].getSvg(image).then(function (icon) {
return icons[i + offset] = icon;
}));
});
}
Promise.all(promises).then(function () {
return _this2.setState({
icons: icons,
loading: false,
names: names,
isAnyName: names.find(function (i) {
return i;
})
});
});
} else {
var _promises = _this2.props.icons.map(function (item, i) {
var href;
if ((0, _typeof2["default"])(item) === 'object') {
href = item.icon || item.src || item.href;
names[i] = (0, _typeof2["default"])(item.name) === 'object' ? item.name[_this2.props.lang] || item.name.en || item._id : item.name;
if (!names[i]) {
var parts = href.split('.');
parts.pop();
names[i] = parts[parts.length - 1];
}
} else {
href = item;
}
if (href) {
if (href.startsWith('data:')) {
icons[i] = href;
return Promise.resolve();
} else {
return _Utils["default"].getSvg(href).then(function (icon) {
return icons[i] = icon;
});
}
} else {
return Promise.resolve();
}
});
Promise.all(_promises).then(function () {
return _this2.setState({
icons: icons,
loading: false,
names: names,
isAnyName: names.find(function (i) {
return i;
})
});
});
}
});
}
}, {
key: "render",
value: function render() {
var _this3 = this;
if (this.state.loading) {
return /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null);
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
variant: "outlined",
title: this.props.t('ra_Select predefined icon'),
onClick: function onClick() {
return _this3.setState({
opened: true
}, function () {
return _this3.loadAllIcons();
});
},
style: {
minWidth: 40,
marginRight: 8
}
}, "..."), this.state.opened ? /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
onClose: function onClose() {
return _this3.setState({
opened: false
});
},
open: true
}, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, this.props.t('ra_Select predefined icon'), this.state.isAnyName ? /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
margin: "dense",
style: {
marginLeft: 20
},
value: this.state.filter,
onChange: function onChange(e) {
return _this3.setState({
filter: e.target.value.toLowerCase()
});
},
placeholder: this.props.t('ra_Filter'),
InputProps: {
endAdornment: this.state.filter ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
size: "small",
onClick: function onClick() {
return _this3.setState({
filter: ''
});
}
}, /*#__PURE__*/_react["default"].createElement(_Clear["default"], null)) : undefined
}
}) : null), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: '100%',
textAlign: 'center'
}
}, this.state.icons && this.state.icons.map(function (icon, i) {
if (!_this3.state.filter || _this3.state.names[i] && _this3.state.names[i].toLowerCase().includes(_this3.state.filter)) {
return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
title: _this3.state.names[i] || '',
key: i
}, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
onClick: function onClick() {
return _this3.setState({
opened: false
}, function () {
return (_this3.props.onSelect || _this3.props.onChange)(icon);
});
}
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
src: icon,
alt: i,
style: {
width: 32,
height: 32,
borderRadius: 5
}
})));
} else {
return null;
}
}))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
variant: "contained",
onClick: function onClick() {
return _this3.setState({
opened: false
});
},
startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
}, this.props.t('ra_Close')))) : null);
}
}]);
return IconSelector;
}(_react.Component);
IconSelector.propTypes = {
icons: _propTypes["default"].array,
onlyRooms: _propTypes["default"].bool,
onlyDevices: _propTypes["default"].bool,
onSelect: _propTypes["default"].func,
// one of onSelect or onChange are required
onChange: _propTypes["default"].func,
t: _propTypes["default"].func.isRequired,
lang: _propTypes["default"].string.isRequired
};
/** @type {typeof IconSelector} */
var _default = IconSelector;
exports["default"] = _default;
//# sourceMappingURL=IconSelector.js.map