@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
140 lines • 6.91 kB
JavaScript
import React from 'react';
import SVG from 'react-inlinesvg';
import { Box } from '@mui/material';
import { SettingsApplications as IconSystem, Photo as IconPhoto, SupervisedUserCircle as IconGroup, PersonOutlined as IconUser, Router as IconHost, Wifi as IconConnection, Info as IconInfo, Description as IconMeta, } from '@mui/icons-material';
import { IconAlias } from '../icons/IconAlias';
/**
* Get icon by object type (state, channel, device, ...).
*
* @param obj Object
*/
export function getSystemIcon(obj) {
let icon;
const id = obj?._id;
if (!id) {
return null;
}
// system or design has special icons
if (id.startsWith('_design/') || id === 'system') {
icon = React.createElement(IconSystem, { className: "iconOwn" });
}
else if (id === '0_userdata' || id === '0_userdata.0') {
icon = React.createElement(IconPhoto, { className: "iconOwn" });
}
else if (id === 'alias' || id === 'alias.0') {
icon = React.createElement(IconAlias, { className: "iconOwn" });
}
else if (id === 'system.adapter') {
icon = React.createElement(IconSystem, { className: "iconOwn" });
}
else if (id === 'system.group') {
icon = React.createElement(IconGroup, { className: "iconOwn" });
}
else if (id === 'system.user') {
icon = React.createElement(IconUser, { className: "iconOwn" });
}
else if (id === 'system.host') {
icon = React.createElement(IconHost, { className: "iconOwn" });
}
else if (id.endsWith('.connection') || id.endsWith('.connected')) {
icon = React.createElement(IconConnection, { className: "iconOwn" });
}
else if (id.endsWith('.info')) {
icon = React.createElement(IconInfo, { className: "iconOwn" });
}
else if (obj?.type === 'meta') {
icon = React.createElement(IconMeta, { className: "iconOwn" });
}
return icon || null;
}
/**
* Get icon from the object.
*
* @param obj Object
* @param imagePrefix Prefix for image
*/
export function getSelectIdIcon(obj, imagePrefix) {
imagePrefix = imagePrefix || '.'; // http://localhost:8081';
let src = '';
const common = obj?.common;
if (common) {
const cIcon = common.icon;
if (cIcon) {
if (!cIcon.startsWith('data:image/')) {
if (cIcon.includes('.')) {
let instance;
if (obj.type === 'instance' || obj.type === 'adapter') {
src = `${imagePrefix}/adapter/${common.name}/${cIcon}`;
}
else if (obj._id?.startsWith('system.adapter.')) {
instance = obj._id.split('.', 3);
if (cIcon[0] === '/') {
instance[2] += cIcon;
}
else {
instance[2] += `/${cIcon}`;
}
src = `${imagePrefix}/adapter/${instance[2]}`;
}
else {
instance = obj._id.split('.', 2);
if (cIcon[0] === '/') {
instance[0] += cIcon;
}
else {
instance[0] += `/${cIcon}`;
}
src = `${imagePrefix}/adapter/${instance[0]}`;
}
}
else {
return null;
}
}
else {
// base 64 image
src = cIcon;
}
}
}
return src || null;
}
const REMOTE_SERVER = window.location.hostname.endsWith('iobroker.in');
const REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
export const Icon = React.forwardRef(function IconComponent(props, ref) {
if (props.src) {
if (typeof props.src === 'string') {
if (props.src.length < 3) {
// utf-8 char
if (props.sx) {
return (React.createElement(Box, { component: "span", sx: props.sx, ref: ref, title: props.title || undefined, style: { height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }, className: props.className ? `iconOwn ${props.className}` : 'iconOwn' }, props.src));
}
return (React.createElement("span", { ref: ref, title: props.title || undefined, style: { height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }, className: props.className ? `iconOwn ${props.className}` : 'iconOwn' }, props.src));
}
if (props.src.startsWith('data:image/svg')) {
return (React.createElement(SVG, { title: props.title || undefined, src: props.src, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', width: props.style?.width || 28, height: props.style?.height || props.style?.width || 28, style: props.style || undefined }));
}
if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {
let src = props.src;
if (src.startsWith('./')) {
src = REMOTE_PREFIX + src.substring(2);
}
else if (!src.startsWith('/')) {
src = REMOTE_PREFIX + src;
}
if (props.sx) {
return (React.createElement(Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || undefined, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: ref, onError: e => props.onError?.(e) }));
}
return (React.createElement("img", { title: props.title || undefined, style: props.style || undefined, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: ref, onError: e => props.onError?.(e) }));
}
if (props.sx) {
return (React.createElement(Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || undefined, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', src: props.src, alt: props.alt || undefined, ref: ref, onError: props.onError }));
}
return (React.createElement("img", { title: props.title || undefined, style: props.style || undefined, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', src: props.src, alt: props.alt || undefined, ref: ref, onError: props.onError }));
}
return props.src;
}
return null;
});
Icon.displayName = 'Icon';
//# sourceMappingURL=Icon.js.map