@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
262 lines (212 loc) • 11.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
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 = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@material-ui/core/styles");
var _core = require("@material-ui/core");
var _Icon = _interopRequireDefault(require("./Icon"));
var _Utils = _interopRequireDefault(require("./Utils"));
var _i18n = _interopRequireDefault(require("../i18n"));
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 styles = function styles(theme) {
return {
different: {
opacity: 0.5
},
icon: {
width: 16,
height: 16,
marginRight: 8
}
};
};
var SelectWithIcon = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(SelectWithIcon, _Component);
var _super = _createSuper(SelectWithIcon);
function SelectWithIcon(props) {
var _this;
(0, _classCallCheck2["default"])(this, SelectWithIcon);
_this = _super.call(this, props);
if (_this.props.different) {
_this.wordDifferent = _this.props.t(_this.props.different);
}
var list;
if (Array.isArray(_this.props.list || _this.props.options)) {
list = _this.props.list.map(function (obj) {
var _obj$common, _obj$common2;
return {
name: _Utils["default"].getObjectNameFromObj(obj, _this.props.lang).replace('system.group.', '').replace('system.user.', '').replace('enum.rooms.', '').replace('enum.functions.', ''),
value: obj._id,
icon: (_obj$common = obj.common) === null || _obj$common === void 0 ? void 0 : _obj$common.icon,
color: (_obj$common2 = obj.common) === null || _obj$common2 === void 0 ? void 0 : _obj$common2.color
};
});
} else {
list = Object.values(_this.props.list || _this.props.options).map(function (obj) {
var _obj$common3, _obj$common4;
return {
name: _Utils["default"].getObjectNameFromObj(obj, _this.props.lang).replace('system.group.', '').replace('system.user.', '').replace('enum.rooms.', '').replace('enum.functions.', ''),
value: obj._id,
icon: (_obj$common3 = obj.common) === null || _obj$common3 === void 0 ? void 0 : _obj$common3.icon,
color: (_obj$common4 = obj.common) === null || _obj$common4 === void 0 ? void 0 : _obj$common4.color
};
});
}
if (_this.props.different && _this.props.value === _this.props.different) {
list.unshift({
value: _this.props.different,
name: _this.wordDifferent
});
}
if (_this.props.allowNone) {
list.unshift({
value: '',
name: _i18n["default"].t('ra_none')
});
}
_this.state = {
list: list
};
return _this;
}
(0, _createClass2["default"])(SelectWithIcon, [{
key: "render",
value: function render() {
var _this2 = this;
if (this.props.allowNone && !this.state.list.find(function (obj) {
return obj.value === '';
})) {
this.timeout = this.timeout || setTimeout(function () {
_this2.timeout = null;
var list = JSON.parse(JSON.stringify(_this2.state.list));
list.unshift({
value: '',
name: _i18n["default"].t('ra_none')
});
_this2.setState({
list: list
});
}, 100);
} else if (!this.props.allowNone && this.state.list.find(function (obj) {
return obj.value === '';
})) {
this.timeout = this.timeout || setTimeout(function () {
_this2.timeout = null;
var list = JSON.parse(JSON.stringify(_this2.state.list));
var i = _this2.state.list.findIndex(function (obj) {
return obj.value === '';
});
list.splice(i, 1);
_this2.setState({
list: list
});
}, 100);
}
var item = this.state.list.find(function (it) {
return it.value === _this2.props.value || _this2.props.removePrefix && it.value.replace(_this2.props.removePrefix, '') === _this2.props.value;
});
var style = this.props.value === this.props.different ? {} : {
color: (item === null || item === void 0 ? void 0 : item.color) || undefined,
backgroundColor: _Utils["default"].getInvertedColor(item === null || item === void 0 ? void 0 : item.color, this.props.themeType)
};
if (this.props.dense && this.props.style) {
Object.assign(style, this.props.style);
}
var select = /*#__PURE__*/_react["default"].createElement(_core.Select, {
disabled: this.props.disabled,
value: this.props.value,
inputProps: this.props.inputProps,
renderValue: function renderValue(value) {
return /*#__PURE__*/_react["default"].createElement("span", null, item !== null && item !== void 0 && item.icon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
src: item === null || item === void 0 ? void 0 : item.icon,
className: _this2.props.classes.icon
}) : null, item === null || item === void 0 ? void 0 : item.name);
},
classes: {
root: _Utils["default"].clsx(this.props.value === this.props.different ? this.props.classes.different : '', this.props.dense ? this.props.className : '')
},
style: style,
onChange: function onChange(el) {
if (_this2.props.different && el.target.value !== _this2.props.different) {
var pos = null;
for (var i = 0; i < _this2.state.list.length; i++) {
if (_this2.state.list[i].value === _this2.props.different) {
pos = i;
break;
}
}
if (pos !== null) {
var list = _Utils["default"].clone(_this2.state.list);
list.splice(pos, 1);
return _this2.setState({
list: list
}, function () {
return _this2.props.onChange(el.target.value);
});
}
}
_this2.props.onChange(_this2.props.removePrefix ? el.target.value.replace(_this2.props.removePrefix, '') : el.target.value);
}
}, this.state.list.map(function (el) {
return /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
className: _this2.props.different && el.value === _this2.props.different ? _this2.props.classes.different : '',
style: _this2.props.different && el.value === _this2.props.different ? {} : {
color: el.color || undefined,
backgroundColor: _Utils["default"].getInvertedColor(el.color, _this2.props.themeType)
},
key: el.value,
value: el.value
}, el.icon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
src: el.icon,
className: _this2.props.classes.icon
}) : null, el.name);
}));
if (this.props.dense) {
return select;
} else {
return /*#__PURE__*/_react["default"].createElement(_core.FormControl, {
fullWidth: !!this.props.fullWidth,
style: this.props.style,
className: this.props.className
}, /*#__PURE__*/_react["default"].createElement(_core.InputLabel, null, this.props.label), select);
}
}
}]);
return SelectWithIcon;
}(_react.Component);
SelectWithIcon.propTypes = {
t: _propTypes["default"].func.isRequired,
lang: _propTypes["default"].string.isRequired,
themeType: _propTypes["default"].string,
value: _propTypes["default"].string,
onChange: _propTypes["default"].func.isRequired,
disabled: _propTypes["default"].bool,
list: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]),
// one of "list"(Array) or "options"(object) is required
options: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]),
// one of "list"(Array) or "options"(object) is required
different: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),
label: _propTypes["default"].string,
fullWidth: _propTypes["default"].bool,
className: _propTypes["default"].string,
style: _propTypes["default"].object,
removePrefix: _propTypes["default"].string,
allowNone: _propTypes["default"].bool,
inputProps: _propTypes["default"].object
};
var _default = (0, _styles.withStyles)(styles)(SelectWithIcon);
exports["default"] = _default;
//# sourceMappingURL=SelectWithIcon.js.map