ur-ui-kit-tm
Version:
unlimited robotics ui kit
70 lines (69 loc) • 4.29 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);
};
var _a;
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from "react";
import moment from "moment";
import { LocationIcon, DeleteIcon, EditIcon } from "../../../../assets";
import Tooltip from "../tooltip/tooltip";
import { PlaceCard, PlaceCardFooter, PlaceCardTitle, TooltipActionBox, TooltipContent, } from "./singlePlace.styled";
var stringChanger = (_a = {}, _a["a few seconds ago"] = "just now", _a);
var SinglePlace = function (_a) {
var selected = _a.selected, style = _a.style, _b = _a.onPlaceSelected, onPlaceSelected = _b === void 0 ? function () { } : _b, _c = _a.onPlaceEdited, onPlaceEdited = _c === void 0 ? function () { } : _c, _d = _a.onPlaceDeleted, onPlaceDeleted = _d === void 0 ? function () { } : _d, cardNameStyle = _a.cardNameStyle, cardFooterStyle = _a.cardFooterStyle, place = _a.place;
var isSelected = useMemo(function () { return selected === place.id; }, [selected]);
var _e = useState(false), tooltipOpen = _e[0], setTooltipOpen = _e[1];
var _f = useState(undefined), touchStarted = _f[0], setTouchStarted = _f[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(PlaceCard, __assign({ ref: tooltipRef, style: style, isSelected: isSelected, onTouchStart: function () {
onPlaceSelected(place.id);
setTouchStarted(true);
setTimeout(function () {
setTouchStarted(function (curr) {
curr && setTooltipOpen(true);
return curr;
});
}, 300, touchStarted);
}, onMouseDown: function () {
onPlaceSelected(place.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 && (_jsx(Tooltip, { children: _jsxs(TooltipContent, { children: [_jsxs(TooltipActionBox, __assign({ onClick: function () {
onPlaceEdited(place.id);
setTooltipOpen(false);
} }, { children: [_jsx(EditIcon, {}, void 0), "Edit"] }), void 0), _jsxs(TooltipActionBox, __assign({ className: "del", onClick: function () {
onPlaceDeleted(place.id);
setTooltipOpen(false);
} }, { children: [_jsx(DeleteIcon, {}, void 0), "Delete"] }), void 0)] }, void 0) }, void 0)), _jsx(LocationIcon, {}, void 0), _jsx(PlaceCardTitle, __assign({ style: cardNameStyle }, { children: place === null || place === void 0 ? void 0 : place.name }), void 0), _jsxs(PlaceCardFooter, __assign({ style: cardFooterStyle }, { children: ["Updated: ", _jsx("br", {}, void 0), stringChanger[moment(place === null || place === void 0 ? void 0 : place.updated).fromNow()] || moment(place === null || place === void 0 ? void 0 : place.updated).fromNow()] }), void 0)] }), void 0));
};
export default SinglePlace;