iobroker.vis-2
Version:
Next generation graphical user interface for ioBroker.
449 lines (448 loc) • 12.9 kB
JavaScript
import { j as jsxRuntimeExports, __tla as __tla_0 } from "./jsx-runtime-DgDbgMDY.js";
import { a as React, c as __mf_31, __tla as __tla_1 } from "./iobroker_vis__loadShare__react__loadShare__.js-Bo2lxMHB.js";
import { g as getWidgetTypes, f as DndProvider, H as HTML5Backend, e as useDrop, b as useDrag, __tla as __tla_2 } from "./visWidgetsCatalog-D4OT0wlf.js";
import { N as __mf_71, f as __mf_72, __tla as __tla_3 } from "./iobroker_vis__loadShare___mf_0_mui_mf_1_material__loadShare__.js-y8HJH6Vp.js";
import { _ as __mf_2, g as __mf_70, __tla as __tla_4 } from "./iobroker_vis__loadShare___mf_0_iobroker_mf_1_adapter_mf_2_react_mf_2_v5__loadShare__.js-CyaIGDzt.js";
import { __tla as __tla_5 } from "./iobroker_vis__loadShare__react__loadShare__.js_commonjs-proxy-RR2_-oCU.js";
import { __tla as __tla_6 } from "./index-Cs8MllMO.js";
import { __tla as __tla_7 } from "./visRxWidget-CsJe4ZeY.js";
import "./preload-helper-D5QYaGzd.js";
import { __tla as __tla_8 } from "./iobroker_vis__loadShare___mf_0_mui_mf_1_icons_mf_2_material__loadShare__.js-L78p1KXL.js";
import { __tla as __tla_9 } from "./InsertDriveFile-B8DoT0SQ.js";
import { __tla as __tla_10 } from "./createSvgIcon-DDwAmV8Q.js";
import { __tla as __tla_11 } from "./iobroker_vis__loadShare__prop_mf_2_types__loadShare__.js-OoAqYupB.js";
import { __tla as __tla_12 } from "./clsx-XqGtd7JN.js";
import { __tla as __tla_13 } from "./iobroker_vis__loadShare___mf_0_mui_mf_1_system__loadShare__.js-Dt1au33l.js";
import { __tla as __tla_14 } from "./createStyled-BvULSPVR.js";
import { __tla as __tla_15 } from "./Dialog-DElqR5zv.js";
import { __tla as __tla_16 } from "./useMediaQuery-D88JRmB1.js";
import "./assertThisInitialized-DFQXnDE3.js";
import { __tla as __tla_17 } from "./iobroker_vis__loadShare__react_mf_2_dom__loadShare__.js-1rEIXFyN.js";
import "./hoist-non-react-statics.cjs-1ABLww7O.js";
let VisOrderMenu;
let __tla = Promise.all([
(() => {
try {
return __tla_0;
} catch {
}
})(),
(() => {
try {
return __tla_1;
} catch {
}
})(),
(() => {
try {
return __tla_2;
} catch {
}
})(),
(() => {
try {
return __tla_3;
} catch {
}
})(),
(() => {
try {
return __tla_4;
} catch {
}
})(),
(() => {
try {
return __tla_5;
} catch {
}
})(),
(() => {
try {
return __tla_6;
} catch {
}
})(),
(() => {
try {
return __tla_7;
} catch {
}
})(),
(() => {
try {
return __tla_8;
} catch {
}
})(),
(() => {
try {
return __tla_9;
} catch {
}
})(),
(() => {
try {
return __tla_10;
} catch {
}
})(),
(() => {
try {
return __tla_11;
} catch {
}
})(),
(() => {
try {
return __tla_12;
} catch {
}
})(),
(() => {
try {
return __tla_13;
} catch {
}
})(),
(() => {
try {
return __tla_14;
} catch {
}
})(),
(() => {
try {
return __tla_15;
} catch {
}
})(),
(() => {
try {
return __tla_16;
} catch {
}
})(),
(() => {
try {
return __tla_17;
} catch {
}
})()
]).then(async () => {
const styles = {
widgetIcon: {
overflow: "hidden",
width: 40,
height: 40,
display: "inline-block",
marginRight: 4
},
icon: {
width: "100%",
height: "100%",
objectFit: "contain"
},
widgetName: {
verticalAlign: "top",
display: "inline-block"
},
widgetImage: {
display: "block",
width: 30,
height: 30,
transformOrigin: "0 0"
},
widgetType: {
verticalAlign: "top",
display: "inline-block",
fontSize: 12,
fontStyle: "italic",
marginLeft: 8
},
widgetNameText: {
lineHeight: "20px"
},
coloredWidgetSet: {
padding: "0 3px",
borderRadius: 3
}
};
const WIDGET_ICON_HEIGHT = 34;
const IMAGE_TYPES = [
".png",
".jpg",
".svg",
".gif",
".apng",
".avif",
".webp"
];
const Widget = ({ id, children, index, moveCard, onDropped, selected }) => {
const ref = __mf_31(null);
const [{ handlerId }, drop] = useDrop({
accept: "widget",
collect(monitor) {
return {
handlerId: monitor.getHandlerId()
};
},
drop() {
onDropped();
},
hover(item, monitor) {
var _a;
if (!ref.current) {
return;
}
const dragIndex = item.index;
const hoverIndex = index;
if (dragIndex === hoverIndex) {
return;
}
const hoverBoundingRect = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect();
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
const clientOffset = monitor.getClientOffset();
const hoverClientY = ((clientOffset == null ? void 0 : clientOffset.y) || 0) - hoverBoundingRect.top;
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return;
}
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return;
}
moveCard(dragIndex, hoverIndex);
item.index = hoverIndex;
}
});
const [{ isDragging }, drag] = useDrag({
type: "widget",
item: () => ({
id,
index
}),
collect: (monitor) => ({
isDragging: monitor.isDragging()
})
});
const opacity = isDragging ? 0 : 1;
drag(drop(ref));
return jsxRuntimeExports.jsx(__mf_72, {
ref,
selected,
style: {
opacity
},
"data-handler-id": handlerId,
onClick: () => onDropped(index),
children
});
};
VisOrderMenu = class extends React.Component {
imageRef;
widgetTypes;
constructor(props) {
super(props);
this.widgetTypes = getWidgetTypes();
this.imageRef = [];
for (let i = 0; i < this.props.order.length; i++) {
this.imageRef.push(React.createRef());
}
this.state = {
order: [
...this.props.order
]
};
}
componentDidUpdate() {
var _a;
for (let i = 0; i < this.state.order.length; i++) {
if ((_a = this.imageRef[i].current) == null ? void 0 : _a.children[0]) {
const height = this.imageRef[i].current.children[0].clientHeight;
if (height > WIDGET_ICON_HEIGHT) {
this.imageRef[i].current.style.transform = `scale(${WIDGET_ICON_HEIGHT / height})`;
}
}
}
}
moveCard = (dragIndex, hoverIndex) => {
const order = [
...this.state.order
];
const dragCard = order[dragIndex];
order.splice(dragIndex, 1);
order.splice(hoverIndex, 0, dragCard);
this.setState({
order
});
};
getWidgetDiv(id, index) {
var _a;
const widget = this.props.views[this.props.view].widgets[id];
const tpl = widget.tpl;
const _widgetType = this.widgetTypes.find((foundWidgetType) => foundWidgetType.name === tpl);
let widgetLabel = (_widgetType == null ? void 0 : _widgetType.title) || "";
let widgetColor = _widgetType == null ? void 0 : _widgetType.setColor;
if (_widgetType == null ? void 0 : _widgetType.label) {
widgetLabel = __mf_2.t(_widgetType.label);
}
widgetLabel = widgetLabel.split("<br")[0];
widgetLabel = widgetLabel.split("<span")[0];
widgetLabel = widgetLabel.split("<div")[0];
let setLabel = _widgetType == null ? void 0 : _widgetType.set;
if (_widgetType == null ? void 0 : _widgetType.setLabel) {
setLabel = __mf_2.t(_widgetType.setLabel);
} else if (setLabel) {
const widgetWithSetLabel = this.widgetTypes.find((w) => w.set === setLabel && w.setLabel);
if (widgetWithSetLabel) {
widgetColor = widgetWithSetLabel.setColor;
if (widgetWithSetLabel.setLabel) {
setLabel = __mf_2.t(widgetWithSetLabel.setLabel);
}
}
}
let widgetIcon = (_widgetType == null ? void 0 : _widgetType.preview) || "";
if (widgetIcon.startsWith("<img")) {
const prev = widgetIcon.match(/src="([^"]+)"/);
if (prev && prev[1]) {
widgetIcon = prev[1];
}
}
let img;
if ((_a = _widgetType == null ? void 0 : _widgetType.preview) == null ? void 0 : _a.startsWith("<img")) {
const m = (_widgetType == null ? void 0 : _widgetType.preview.match(/src="([^"]+)"/)) || (_widgetType == null ? void 0 : _widgetType.preview.match(/src='([^']+)'/));
if (m) {
img = jsxRuntimeExports.jsx("img", {
src: m[1],
style: styles.icon,
alt: id
});
}
} else if (_widgetType == null ? void 0 : _widgetType.preview) {
const preview = _widgetType.preview.toLowerCase();
if (IMAGE_TYPES.find((ext) => preview.endsWith(ext))) {
img = jsxRuntimeExports.jsx("img", {
src: _widgetType == null ? void 0 : _widgetType.preview,
style: styles.icon,
alt: id
});
}
}
if (!img && (_widgetType == null ? void 0 : _widgetType.preview)) {
img = jsxRuntimeExports.jsx("span", {
style: styles.widgetImage,
ref: this.imageRef[index],
dangerouslySetInnerHTML: {
__html: _widgetType.preview
}
});
}
let widgetBackColor;
if (widgetColor) {
widgetBackColor = __mf_70.getInvertedColor(widgetColor, this.props.themeType, false);
if (widgetBackColor === "#DDD") {
widgetBackColor = "#FFF";
} else if (widgetBackColor === "#111") {
widgetBackColor = "#000";
}
}
if (tpl === "_tplGroup") {
widgetLabel = __mf_2.t("group");
}
if (widget.marketplace) {
setLabel = `${widget.marketplace.name}`;
widgetLabel = `${__mf_2.t("version")} ${widget.marketplace.version}`;
}
return jsxRuntimeExports.jsx(Widget, {
id,
index,
selected: this.props.wid === id,
moveCard: this.moveCard,
onDropped: (i) => this.onMove(i),
children: jsxRuntimeExports.jsxs("div", {
style: {
display: "flex",
flexWrap: "wrap"
},
children: [
widgetIcon ? jsxRuntimeExports.jsx("div", {
style: styles.widgetIcon,
children: img
}) : null,
jsxRuntimeExports.jsx("div", {
style: styles.widgetName,
children: id
}),
jsxRuntimeExports.jsxs("div", {
style: styles.widgetType,
children: [
jsxRuntimeExports.jsx("div", {
style: {
...styles.widgetNameText,
...widgetBackColor ? styles.coloredWidgetSet : void 0,
fontWeight: "bold",
color: widgetColor,
backgroundColor: widgetBackColor
},
children: setLabel
}),
jsxRuntimeExports.jsx("div", {
style: styles.widgetNameText,
children: widgetLabel
})
]
})
]
})
}, id);
}
onMove(index) {
if (index !== void 0) {
const order = [
...this.state.order
];
const w = order[index];
order[index] = this.props.wid;
order[this.state.order.indexOf(this.props.wid)] = w;
this.setState({
order
}, () => {
if (JSON.stringify(this.state.order) !== JSON.stringify(this.props.order)) {
this.props.onClose(this.state.order);
}
});
return;
}
if (JSON.stringify(this.state.order) !== JSON.stringify(this.props.order)) {
this.props.onClose(this.state.order);
}
}
render() {
return jsxRuntimeExports.jsxs(__mf_71, {
anchorEl: this.props.anchorEl,
open: true,
onClose: () => this.props.onClose(),
children: [
jsxRuntimeExports.jsx("div", {
style: {
padding: 21,
fontWeight: "normal",
width: 250,
fontSize: 12,
fontStyle: "italic",
textAlign: "center"
},
children: __mf_2.t("order_help")
}),
jsxRuntimeExports.jsx(DndProvider, {
backend: HTML5Backend,
children: this.state.order.map((id, i) => this.getWidgetDiv(id, i))
})
]
});
}
};
});
export {
__tla,
VisOrderMenu as default
};