@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
139 lines • 6.09 kB
JavaScript
import React, { Component } from 'react';
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import { Icon } from './Icon';
import { Utils } from './Utils';
import { I18n } from '../i18n';
const styles = {
different: {
opacity: 0.5,
},
icon: {
width: 16,
height: 16,
marginRight: 8,
},
};
export class SelectWithIcon extends Component {
wordDifferent;
timeout = null;
constructor(props) {
super(props);
if (props.different) {
this.wordDifferent = props.t('ra___different__');
}
let list;
if (Array.isArray(props.list)) {
list = props.list
.filter(obj => obj?._id && obj.common)
.map(obj => ({
name: Utils.getObjectNameFromObj(obj, props.lang)
.replace('system.group.', '')
.replace('system.user.', '')
.replace('enum.rooms.', '')
.replace('enum.functions.', ''),
value: obj._id,
icon: obj.common?.icon,
color: obj.common?.color,
}));
}
else {
list = Object.values(props.list)
.filter(obj => obj?._id && obj.common)
.map(obj => ({
name: Utils.getObjectNameFromObj(obj, props.lang)
.replace('system.group.', '')
.replace('system.user.', '')
.replace('enum.rooms.', '')
.replace('enum.functions.', ''),
value: obj._id,
icon: obj.common?.icon,
color: obj.common?.color,
}));
}
if (props.different && props.value === props.different) {
list.unshift({ value: props.different, name: this.wordDifferent || '' });
}
if (props.allowNone) {
list.unshift({ value: '', name: I18n.t('ra_none') });
}
this.state = {
list,
};
}
render() {
if (this.props.allowNone && !this.state.list.find(obj => obj.value === '')) {
this.timeout =
this.timeout ||
setTimeout(() => {
this.timeout = null;
const list = JSON.parse(JSON.stringify(this.state.list));
list.unshift({ value: '', name: I18n.t('ra_none') });
this.setState({ list });
}, 100);
}
else if (!this.props.allowNone && this.state.list.find(obj => obj.value === '')) {
this.timeout =
this.timeout ||
setTimeout(() => {
this.timeout = null;
const list = JSON.parse(JSON.stringify(this.state.list));
const i = this.state.list.findIndex(obj => obj.value === '');
list.splice(i, 1);
this.setState({ list });
}, 100);
}
const item = this.state.list.find(it => it.value === this.props.value ||
(this.props.removePrefix && it.value.replace(this.props.removePrefix, '') === this.props.value));
const style = this.props.value === this.props.different
? {}
: {
color: item?.color || undefined,
backgroundColor: Utils.getInvertedColor(item?.color || '', this.props.themeType),
};
if (this.props.dense && this.props.style) {
Object.assign(style, this.props.style);
}
const select = (React.createElement(Select, { variant: "standard", disabled: this.props.disabled, value: this.props.value, slotProps: {
input: this.props.inputProps,
}, renderValue: ( /* value */) => (React.createElement("span", null,
item?.icon ? (React.createElement(Icon, { src: item?.icon, style: styles.icon })) : null,
item?.name)), sx: {
'&.MuiSelect-root': this.props.value === this.props.different ? styles.different : {},
}, classes: {
root: this.props.dense ? this.props.className : '',
}, style: style, onChange: el => {
if (this.props.different && el.target.value !== this.props.different) {
let pos = null;
for (let i = 0; i < this.state.list.length; i++) {
if (this.state.list[i].value === this.props.different) {
pos = i;
break;
}
}
if (pos !== null) {
const list = Utils.clone(this.state.list);
list.splice(pos, 1);
this.setState({ list }, () => this.props.onChange(el.target.value));
return;
}
}
this.props.onChange(this.props.removePrefix
? el.target.value.replace(this.props.removePrefix, '')
: el.target.value);
} }, this.state.list.map(el => (React.createElement(MenuItem, { style: this.props.different && el.value === this.props.different
? styles.different
: {
color: el.color || undefined,
backgroundColor: Utils.getInvertedColor(el.color || '', this.props.themeType),
}, key: el.value, value: el.value },
el.icon ? (React.createElement(Icon, { src: el.icon, style: styles.icon })) : null,
el.name)))));
if (this.props.dense) {
return select;
}
return (React.createElement(FormControl, { variant: "standard", fullWidth: !!this.props.fullWidth, style: this.props.style, className: this.props.className },
React.createElement(InputLabel, null, this.props.label),
select));
}
}
//# sourceMappingURL=SelectWithIcon.js.map