@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
305 lines (263 loc) • 12.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
var _Utils = _interopRequireDefault(require("../Components/Utils"));
var _i18n = _interopRequireDefault(require("../i18n"));
var _ObjectBrowser = _interopRequireDefault(require("../Components/ObjectBrowser"));
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 {
headerID: {
fontWeight: 'bold',
fontStyle: 'italic'
},
dialog: {
height: '95%'
},
dialogMobile: {
padding: 4,
width: '100%',
maxWidth: '100%',
maxHeight: 'calc(100% - 16px)',
height: '100%'
},
content: {
height: '100%',
overflow: 'hidden'
},
contentMobile: {
padding: '8px 4px'
},
titleRoot: {
whiteSpace: 'nowrap',
width: 'calc(100% - 72px)',
overflow: 'hidden',
display: 'inline-block',
textOverflow: 'ellipsis'
}
};
};
/**
* @typedef {object} SelectIDProps
* @property {string} [key] The key to identify this component.
* @property {string} [dialogName] The internal name of the dialog; default: "default"
* @property {string} [title] The dialog title; default: Please select object ID... (translated)
* @property {boolean} [multiSelect] Set to true to allow the selection of multiple IDs.
* @property {boolean} [foldersFirst] Show folders before any leaves.
* @property {string} [imagePrefix] Prefix (default: '.')
* @property {boolean} [showExpertButton] Show the expert button?
* @property {import('../Components/types').ObjectBrowserColumn[]} [columns] Columns to display; default: 'name', 'type', 'role', 'room', 'func', 'val'
* @property {import('../Components/types').ObjectBrowserType[]} [types] Object types to show; default: 'state' only
* @property {ioBroker.Languages} [lang] The language.
* @property {import('../Connection').default} socket The socket connection.
* @property {boolean} [notEditable] Can't objects be edited? (default: true)
* @property {string} [themeName] Theme name.
* @property {string} [themeType] Theme type.
* @property {import('../Components/types').ObjectBrowserCustomFilter} [customFilter] Custom filter.
* @property {string | string[]} [selected] The selected IDs.
* @property {string} [ok] The ok button text; default: OK (translated)
* @property {string} [cancel] The cancel button text; default: Cancel (translated)
* @property {() => void} onClose Close handler that is always called when the dialog is closed.
* @property {(selected: string | string[] | undefined, name: string) => void} onOk Handler that is called when the user presses OK.
* @property {{headerID: string; dialog: string; content: string}} [classes] The styling class names.
*
* @extends {React.Component<SelectIDProps>}
*/
var SelectID = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(SelectID, _React$Component);
var _super = _createSuper(SelectID);
/**
* @param {SelectIDProps} props
*/
function SelectID(props) {
var _this;
(0, _classCallCheck2["default"])(this, SelectID);
_this = _super.call(this, props);
_this.dialogName = _this.props.dialogName || 'default';
_this.dialogName = 'SelectID.' + _this.dialogName;
_this.filters = window.localStorage.getItem(_this.dialogName) || '{}';
try {
_this.filters = JSON.parse(_this.filters);
} catch (e) {
_this.filters = {};
}
var selected = _this.props.selected || [];
if ((0, _typeof2["default"])(selected) !== 'object') {
selected = [selected];
}
selected = selected.filter(function (id) {
return id;
});
_this.state = {
selected: selected,
name: '',
isMobile: window.innerWidth < 800
};
return _this;
}
(0, _createClass2["default"])(SelectID, [{
key: "handleCancel",
value: function handleCancel() {
this.props.onClose();
}
}, {
key: "handleOk",
value: function handleOk() {
this.props.onOk(this.props.multiSelect ? this.state.selected : this.state.selected[0] || '', this.state.name);
this.props.onClose();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var title;
if (this.state.name || this.state.selected.length) {
if (this.state.selected.length === 1) {
title = [/*#__PURE__*/_react["default"].createElement("span", {
key: "selected"
}, _i18n["default"].t('ra_Selected'), " "), /*#__PURE__*/_react["default"].createElement("span", {
key: "id",
className: this.props.classes.headerID
}, (this.state.name || this.state.selected) + (this.state.name ? ' [' + this.state.selected + ']' : ''))];
} else {
title = [/*#__PURE__*/_react["default"].createElement("span", {
key: "selected"
}, _i18n["default"].t('ra_Selected'), " "), /*#__PURE__*/_react["default"].createElement("span", {
key: "id",
className: this.props.classes.headerID
}, _i18n["default"].t('%s items', this.state.selected.length))];
}
} else {
title = this.props.title || _i18n["default"].t('ra_Please select object ID...');
}
return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
onClose: function onClose() {},
maxWidth: false,
classes: {
paper: _Utils["default"].clsx(this.props.classes.dialog, this.props.classes.dialogMobile)
},
fullWidth: true,
open: true,
"aria-labelledby": "selectid-dialog-title"
}, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
id: "selectid-dialog-title",
classes: {
root: this.props.classes.titleRoot
}
}, title), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
className: _Utils["default"].clsx(this.props.classes.content, this.props.classes.contentMobile)
}, /*#__PURE__*/_react["default"].createElement(_ObjectBrowser["default"], {
foldersFirst: this.props.foldersFirst,
imagePrefix: this.props.imagePrefix || this.props.prefix // prefix is for back compatibility
,
defaultFilters: this.filters,
dialogName: this.dialogName,
showExpertButton: this.props.showExpertButton !== undefined ? this.props.showExpertButton : true,
style: {
width: '100%',
height: '100%'
},
columns: this.props.columns || ['name', 'type', 'role', 'room', 'func', 'val'],
types: this.props.types || ['state'],
t: _i18n["default"].t,
lang: this.props.lang || _i18n["default"].getLanguage(),
socket: this.props.socket,
selected: this.state.selected,
multiSelect: this.props.multiSelect,
notEditable: this.props.notEditable === undefined ? true : this.props.notEditable,
name: this.state.name,
themeName: this.props.themeName,
themeType: this.props.themeType,
customFilter: this.props.customFilter,
onFilterChanged: function onFilterChanged(filterConfig) {
_this2.filters = filterConfig;
window.localStorage.setItem(_this2.dialogName, JSON.stringify(filterConfig));
},
onSelect: function onSelect(selected, name, isDouble) {
if (JSON.stringify(selected) !== JSON.stringify(_this2.state.selected)) {
_this2.setState({
selected: selected,
name: name
}, function () {
return isDouble && _this2.handleOk();
});
} else if (isDouble) {
_this2.handleOk();
}
},
filterFunc: this.props.filterFunc
})), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
variant: "contained",
onClick: function onClick() {
return _this2.handleOk();
},
startIcon: /*#__PURE__*/_react["default"].createElement(_Check["default"], null),
disabled: !this.state.selected.length,
color: "primary"
}, this.props.ok || _i18n["default"].t('ra_Ok')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
variant: "contained",
onClick: function onClick() {
return _this2.handleCancel();
},
startIcon: /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)
}, this.props.cancel || _i18n["default"].t('ra_Cancel'))));
}
}]);
return SelectID;
}(_react["default"].Component);
SelectID.propTypes = {
dialogName: _propTypes["default"].string,
// where to store settings in localStorage
classes: _propTypes["default"].object,
notEditable: _propTypes["default"].bool,
onClose: _propTypes["default"].func.isRequired,
onOk: _propTypes["default"].func.isRequired,
title: _propTypes["default"].string,
lang: _propTypes["default"].string,
foldersFirst: _propTypes["default"].bool,
isFloatComma: _propTypes["default"].bool,
dateFormat: _propTypes["default"].string,
selected: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),
customFilter: _propTypes["default"].object,
// optional {common: {custom: true}} or {common: {custom: 'sql.0'}}
statesOnly: _propTypes["default"].bool,
socket: _propTypes["default"].object.isRequired,
cancel: _propTypes["default"].string,
imagePrefix: _propTypes["default"].string,
ok: _propTypes["default"].string,
themeName: _propTypes["default"].string,
themeType: _propTypes["default"].string,
showExpertButton: _propTypes["default"].bool,
multiSelect: _propTypes["default"].bool,
types: _propTypes["default"].array,
// optional ['state', 'instance', 'channel']
columns: _propTypes["default"].array,
// optional ['name', 'type', 'role', 'room', 'func', 'val', 'buttons']
filterFunc: _propTypes["default"].func // function to filter out all unneccessary objects. It cannot be used together with "types"
// Example for function: `obj => obj.common && obj.common.type === 'boolean'` to show only boolean states
};
/** @type {typeof SelectID} */
var _export = (0, _withStyles["default"])(styles)(SelectID);
var _default = _export;
exports["default"] = _default;
//# sourceMappingURL=SelectID.js.map