ur-ui-kit-tm
Version:
unlimited robotics ui kit
65 lines (64 loc) • 3.31 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from "react";
import Tooltip from "../tooltip/tooltip";
import { RoomRect } from "./room.styled";
import RoomPinIcon from "../../../../assets/RoomPinIcon";
import { NavigationIcon } from "../../../../assets";
var SinglePlace = function (_a) {
var hideMap = _a.hideMap, coordinates = _a.coordinates, selected = _a.selected, onAreaSelected = _a.onAreaSelected, room = _a.room, onNavigate = _a.onNavigate;
var isSelected = useMemo(function () { return selected === room.id; }, [selected]);
var _b = useState(false), tooltipOpen = _b[0], setTooltipOpen = _b[1];
var _c = useState(undefined), touchStarted = _c[0], setTouchStarted = _c[1];
var tooltipRef = useRef(null);
var handleClickOutside = function (event) {
if (tooltipRef.current && !tooltipRef.current.contains(event.target)) {
setTooltipOpen(false);
}
};
useEffect(function () {
document.addEventListener("touchstart", handleClickOutside, false);
document.addEventListener("mousedown", handleClickOutside, false);
return function () {
document.removeEventListener("touchstart", handleClickOutside, false);
document.removeEventListener("mousedown", handleClickOutside, false);
};
}, []);
return (_jsxs(RoomRect, __assign({ ref: tooltipRef }, room, { hideMap: hideMap, coordinates: coordinates, isSelected: isSelected, onTouchStart: function () {
onAreaSelected(room.id);
setTouchStarted(true);
setTimeout(function () {
setTouchStarted(function (curr) {
curr && setTooltipOpen(true);
return curr;
});
}, 300, touchStarted);
}, onMouseDown: function () {
onAreaSelected(room.id);
setTouchStarted(true);
setTimeout(function () {
setTouchStarted(function (curr) {
curr && setTooltipOpen(true);
return curr;
});
}, 300, touchStarted);
}, onTouchEnd: function () {
setTouchStarted(false);
}, onMouseUp: function () {
setTouchStarted(false);
} }, { children: [tooltipOpen && (_jsxs(Tooltip, __assign({ closeTooltip: function () {
onNavigate();
setTooltipOpen(false);
} }, { children: [_jsx(NavigationIcon, { style: { marginBottom: "0.6rem" } }, void 0), "Navigate to ", room.name] }), void 0)), _jsx(RoomPinIcon, { className: "scalable", width: "min(max(2vw, 16px), 20px)", height: "" }, void 0), _jsx("span", __assign({ className: "scalable" }, { children: room.name }), void 0)] }), void 0));
};
export default SinglePlace;