@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
83 lines • 3.59 kB
JavaScript
import React, { useEffect } from 'react';
import { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import { Types } from '@iobroker/type-detector';
import { I18n } from '../../i18n';
import { Icon } from '../Icon';
import { DeviceTypeIcon } from './DeviceTypeIcon';
import { extendDeviceTypeTranslation } from './deviceTypeTranslations';
const styles = {
itemChildrenWrapper: {
display: 'flex',
width: '100%',
justifyContent: 'space-between',
},
type: {
marginTop: 10,
},
selectIcon: {
paddingRight: 8,
verticalAlign: 'middle',
width: 20,
height: 20,
},
selectText: {
verticalAlign: 'middle',
},
iconWrapper: {
display: 'flex',
alignItems: 'center',
},
iconStyle: {
width: 16,
height: 16,
margin: '0 3px',
},
emptyIcon: {
width: 16,
height: 16,
margin: '0 3px',
},
};
export function DeviceTypeSelector(props) {
const [typesWords, setTypesWords] = React.useState({});
const [types, setTypes] = React.useState([]);
useEffect(() => {
const _typesWords = {};
Object.keys(Types)
.filter(id => (!props.supportedDevices || props.supportedDevices?.includes(id)) &&
!props.unsupportedDevices?.includes(id))
.forEach(typeId => (_typesWords[typeId] = I18n.t(`type-${Types[typeId]}`)));
// sort types by ABC in the current language
const _types = Object.keys(_typesWords);
_types.sort((a, b) => {
if (_typesWords[a] === _typesWords[b]) {
return 0;
}
return _typesWords[a].localeCompare(_typesWords[b], 'de');
});
extendDeviceTypeTranslation();
setTypes(_types);
setTypesWords(_typesWords);
}, [props.supportedDevices, props.unsupportedDevices]);
if (!types) {
return (React.createElement(Box, { style: {
...styles.type,
...props.style,
}, sx: props.sx }));
}
return (React.createElement(FormControl, { style: {
...styles.type,
...props.style,
}, sx: props.sx, variant: "standard", error: !!props.error },
React.createElement(InputLabel, null, props.label || I18n.t('type-Device type')),
React.createElement(Select, { variant: "standard", disabled: !!props.disabled, value: props.value, onChange: e => props.onChange(e.target.value) }, types.map(typeId => (React.createElement(MenuItem, { key: Types[typeId], value: Types[typeId] },
React.createElement("div", { style: styles.itemChildrenWrapper },
React.createElement("div", null,
React.createElement(DeviceTypeIcon, { type: Types[typeId], style: {
...styles.selectIcon,
color: props.themeType === 'dark' ? '#FFFFFF' : '#000',
} }),
React.createElement("span", { style: styles.selectText }, typesWords[typeId])),
props.showApplications?.TYPE_OPTIONS[typeId] ? (React.createElement("div", { style: styles.iconWrapper }, Object.keys(props.showApplications.TYPE_OPTIONS[typeId]).map(key => props.showApplications.TYPE_OPTIONS[typeId][key] ? (React.createElement(Icon, { key: key, style: styles.iconStyle, src: props.showApplications.ICONS_TYPE[key] })) : (React.createElement("div", { key: key, style: styles.emptyIcon }))))) : null)))))));
}
//# sourceMappingURL=DeviceTypeSelector.js.map