@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
151 lines • 7.96 kB
JavaScript
/**
* Copyright 2018-2025 Denis Haev (bluefox) <dogafox@gmail.com>
*
* MIT License
*
*/
import React, { Component } from 'react';
import { Button, DialogTitle, DialogContent, DialogActions, Dialog } from '@mui/material';
import { Cancel as IconCancel, Check as IconOk } from '@mui/icons-material';
import { I18n } from '../i18n';
import { ObjectBrowser } from '../Components/ObjectBrowser';
export class DialogSelectID extends Component {
dialogName;
filters;
filterFunc;
constructor(props) {
super(props);
this.dialogName = this.props.dialogName || 'default';
this.dialogName = `SelectID.${this.dialogName}`;
const filters = (window._localStorage || window.localStorage).getItem(this.dialogName) || '{}';
try {
this.filters = JSON.parse(filters);
}
catch {
this.filters = {};
}
if (props.filters) {
this.filters = { ...this.filters, ...(props.filters || {}) };
}
let selected = this.props.selected || [];
if (!Array.isArray(selected)) {
selected = [selected];
}
selected = selected.filter(id => id);
if (props.filterFunc) {
if (typeof props.filterFunc === 'string') {
try {
this.filterFunc = new Function('obj', props.filterFunc);
}
catch {
console.error(`Cannot parse filter function: "obj => ${props.filterFunc}"`);
this.filterFunc = undefined;
}
}
else {
this.filterFunc = props.filterFunc;
}
}
this.state = {
selected,
name: '',
selectionBlocked: false,
};
}
handleCancel() {
this.props.onClose();
}
handleOk() {
this.props.onOk(this.props.multiSelect ? this.state.selected : this.state.selected[0] || '', this.state.name);
this.props.onClose();
}
render() {
let title;
if (this.state.name || this.state.selected.length) {
if (this.state.selected.length === 1) {
title = [
React.createElement("span", { key: "selected" },
I18n.t('ra_Selected'),
"\u00A0"),
React.createElement("span", { key: "id", style: { fontWeight: 'bold', fontStyle: 'italic' } }, (this.state.name || this.state.selected[0]) +
(this.state.name ? ` [${this.state.selected[0]}]` : '')),
];
}
else {
title = [
React.createElement("span", { key: "selected" },
I18n.t('ra_Selected'),
"\u00A0"),
React.createElement("span", { key: "id", style: { fontWeight: 'bold', fontStyle: 'italic' } }, I18n.t('%s items', this.state.selected.length.toString())),
];
}
}
else {
title = this.props.title || I18n.t('ra_Please select object ID...');
}
return (React.createElement(Dialog, { onClose: () => { }, maxWidth: false, style: { zIndex: this.props.zIndex || undefined }, sx: {
'& .MuiDialog-paper': {
height: '95%',
p: '4px',
width: '100%',
maxWidth: '100%',
maxHeight: 'calc(100% - 16px)',
},
}, fullWidth: true, open: !0, "aria-labelledby": "ar_dialog_selectid_title" },
React.createElement(DialogTitle, { id: "ar_dialog_selectid_title", style: {
whiteSpace: 'nowrap',
width: 'calc(100% - 72px)',
overflow: 'hidden',
display: 'inline-block',
textOverflow: 'ellipsis',
} }, title),
React.createElement(DialogContent, { style: {
height: '100%',
overflow: 'hidden',
padding: '8px 4px',
} },
React.createElement(ObjectBrowser, { foldersFirst: this.props.foldersFirst, imagePrefix: this.props.imagePrefix || this.props.prefix, dateFormat: this.props.dateFormat, defaultFilters: this.filters, dialogName: this.dialogName, isFloatComma: this.props.isFloatComma, showExpertButton: this.props.showExpertButton !== undefined ? this.props.showExpertButton : true, expertMode: this.props.expertMode,
// style={{ width: '100%', height: '100%' }}
columns: this.props.columns || ['name', 'type', 'role', 'room', 'func', 'val'], types: this.props.types
? Array.isArray(this.props.types)
? this.props.types
: [this.props.types]
: ['state'], root: this.props.root, t: I18n.t, lang: this.props.lang || I18n.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, theme: this.props.theme, customFilter: this.props.customFilter, allowNonObjects: this.props.allowNonObjects, onFilterChanged: (filterConfig) => {
this.filters = filterConfig;
(window._localStorage || window.localStorage).setItem(this.dialogName, JSON.stringify(filterConfig));
}, onSelect: async (_selected, name, isDouble) => {
let selected;
if (!Array.isArray(_selected)) {
selected = [_selected];
}
else {
selected = _selected;
}
if (JSON.stringify(selected) !== JSON.stringify(this.state.selected)) {
let selectionAllowed = true;
if (this.props.onSelectConfirm) {
const objects = {};
for (const id of selected) {
try {
objects[id] = await this.props.socket.getObject(id);
}
catch {
// ignore
}
}
selectionAllowed = await this.props.onSelectConfirm(selected, objects);
}
this.setState({ selected, name, selectionBlocked: !selectionAllowed }, () => isDouble && this.handleOk());
}
else if (isDouble) {
this.handleOk();
}
}, filterFunc: this.filterFunc, title: "", onAllLoaded: () => this.setState({ allLoaded: true }) })),
React.createElement(DialogActions, null,
React.createElement(Button, { id: `ar_dialog_selectid_ok_${this.props.dialogName || ''}`, variant: "contained", onClick: () => this.handleOk(), startIcon: React.createElement(IconOk, null), disabled: !this.state.allLoaded || !this.state.selected.length || this.state.selectionBlocked, color: "primary" }, this.props.ok || I18n.t('ra_Ok')),
React.createElement(Button, { id: `ar_dialog_selectid_cancel_${this.props.dialogName || ''}`, color: "grey", variant: "contained", onClick: () => this.handleCancel(), startIcon: React.createElement(IconCancel, null) }, this.props.cancel || I18n.t('ra_Cancel')))));
}
}
//# sourceMappingURL=SelectID.js.map