@parkassist/pa-ui-library
Version:
INX Platform elements
77 lines • 2 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { CircleMarker } from 'react-leaflet';
import Palette from '../../../constants/Palette';
import { getBayPosition, getBayRadius } from '../utils/bayUtils';
import Pin from './Pin';
function calculateBayColor(bay) {
if (bay.isOutOfService) {
return Palette.BLACK;
}
if (bay.isReserved) {
return Palette.BAY_RESERVED;
}
if (bay.isOccupied) {
return Palette.BAY_OCCUPIED;
}
return Palette.BAY_FREE;
}
;
;
function Bay({
bay,
showPin,
hoverable,
selected = false,
overstay,
zoom = 0,
renderTooltip = () => null,
onClick = () => {},
onHover = () => {},
onMouseLeave = () => null,
forcedColor,
strokeOnSelected
}) {
const radius = getBayRadius(bay.mapPosition.w, zoom);
const position = getBayPosition(bay.mapPosition);
const handleClick = bay => {
if (!onClick) return;
onClick(bay);
};
const handleHover = bay => {
if (!onHover) return;
onHover(bay);
};
const eventHandlers = {
click: () => handleClick(bay),
mouseover: () => handleHover(bay),
mouseout: () => onMouseLeave(bay)
};
let extraStrokeStyle = {};
if (selected && strokeOnSelected) {
extraStrokeStyle = {
stroke: true,
color: Palette.BLACK,
strokeWidth: 3
};
}
return _jsxs(_Fragment, {
children: [selected && showPin && _jsx(Pin, {
position: {
y: position.lat,
x: position.lng
}
}), _jsx(CircleMarker, {
eventHandlers: eventHandlers,
center: [position.lat, position.lng],
pathOptions: Object.assign({
fillOpacity: 1,
stroke: Boolean(selected),
fillColor: forcedColor || calculateBayColor(bay),
color: Palette.INFO_BLUE
}, extraStrokeStyle),
radius: Math.max(radius, 2),
children: hoverable && (renderTooltip === null || renderTooltip === void 0 ? void 0 : renderTooltip(bay, overstay))
})]
});
}
export default Bay;