@expofp/ui 3.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -0
- package/dist/Alert/Alert.d.ts +20 -0
- package/dist/Alert/Alert.js +23 -0
- package/dist/Alert/index.d.ts +3 -0
- package/dist/Alert/index.js +1 -0
- package/dist/Autocomplete/Autocomplete.d.ts +21 -0
- package/dist/Autocomplete/Autocomplete.js +183 -0
- package/dist/Autocomplete/index.d.ts +3 -0
- package/dist/Autocomplete/index.js +1 -0
- package/dist/Badge/Badge.d.ts +14 -0
- package/dist/Badge/Badge.js +15 -0
- package/dist/Badge/index.d.ts +3 -0
- package/dist/Badge/index.js +1 -0
- package/dist/Button/Button.d.ts +30 -0
- package/dist/Button/Button.js +41 -0
- package/dist/Button/index.d.ts +3 -0
- package/dist/Button/index.js +1 -0
- package/dist/Checkbox/Checkbox.d.ts +19 -0
- package/dist/Checkbox/Checkbox.js +19 -0
- package/dist/Checkbox/index.d.ts +3 -0
- package/dist/Checkbox/index.js +1 -0
- package/dist/CheckboxButton/CheckboxButton.d.ts +12 -0
- package/dist/CheckboxButton/CheckboxButton.js +19 -0
- package/dist/CheckboxButton/index.d.ts +3 -0
- package/dist/CheckboxButton/index.js +1 -0
- package/dist/DownloadList/DownloadList.d.ts +15 -0
- package/dist/DownloadList/DownloadList.js +9 -0
- package/dist/DownloadList/index.d.ts +3 -0
- package/dist/DownloadList/index.js +2 -0
- package/dist/Draggable/Draggable.d.ts +9 -0
- package/dist/Draggable/Draggable.js +92 -0
- package/dist/Draggable/index.d.ts +3 -0
- package/dist/Draggable/index.js +2 -0
- package/dist/EntityItem/EntityItem.d.ts +46 -0
- package/dist/EntityItem/EntityItem.js +29 -0
- package/dist/EntityItem/index.d.ts +3 -0
- package/dist/EntityItem/index.js +1 -0
- package/dist/EventBadge/EventBadge.d.ts +13 -0
- package/dist/EventBadge/EventBadge.js +10 -0
- package/dist/EventBadge/index.d.ts +3 -0
- package/dist/EventBadge/index.js +1 -0
- package/dist/HeatmapLegend/HeatmapLegend.d.ts +15 -0
- package/dist/HeatmapLegend/HeatmapLegend.js +11 -0
- package/dist/HeatmapLegend/index.d.ts +3 -0
- package/dist/HeatmapLegend/index.js +2 -0
- package/dist/HighlightText/HighlightText.d.ts +7 -0
- package/dist/HighlightText/HighlightText.js +14 -0
- package/dist/HighlightText/index.d.ts +2 -0
- package/dist/HighlightText/index.js +1 -0
- package/dist/LevelBadge/LevelBadge.d.ts +9 -0
- package/dist/LevelBadge/LevelBadge.js +10 -0
- package/dist/LevelBadge/index.d.ts +3 -0
- package/dist/LevelBadge/index.js +2 -0
- package/dist/LevelSelector/LevelSelector.d.ts +19 -0
- package/dist/LevelSelector/LevelSelector.js +91 -0
- package/dist/LevelSelector/index.d.ts +3 -0
- package/dist/LevelSelector/index.js +2 -0
- package/dist/MapControls/MapControls.d.ts +33 -0
- package/dist/MapControls/MapControls.js +38 -0
- package/dist/MapControls/index.d.ts +3 -0
- package/dist/MapControls/index.js +2 -0
- package/dist/MobileToggleButton/MobileToggleButton.d.ts +12 -0
- package/dist/MobileToggleButton/MobileToggleButton.js +8 -0
- package/dist/MobileToggleButton/index.d.ts +3 -0
- package/dist/MobileToggleButton/index.js +1 -0
- package/dist/Modal/Modal.d.ts +34 -0
- package/dist/Modal/Modal.js +98 -0
- package/dist/Modal/index.d.ts +3 -0
- package/dist/Modal/index.js +1 -0
- package/dist/MultiSelectGroups/MultiSelectGroups.d.ts +37 -0
- package/dist/MultiSelectGroups/MultiSelectGroups.js +80 -0
- package/dist/MultiSelectGroups/index.d.ts +3 -0
- package/dist/MultiSelectGroups/index.js +1 -0
- package/dist/OverlayGrip/OverlayGrip.d.ts +11 -0
- package/dist/OverlayGrip/OverlayGrip.js +8 -0
- package/dist/OverlayGrip/index.d.ts +3 -0
- package/dist/OverlayGrip/index.js +2 -0
- package/dist/PermissionNotice/PermissionNotice.d.ts +16 -0
- package/dist/PermissionNotice/PermissionNotice.js +11 -0
- package/dist/PermissionNotice/index.d.ts +3 -0
- package/dist/PermissionNotice/index.js +2 -0
- package/dist/Radio/Radio.d.ts +15 -0
- package/dist/Radio/Radio.js +13 -0
- package/dist/Radio/index.d.ts +3 -0
- package/dist/Radio/index.js +1 -0
- package/dist/RebookingNotes/RebookingNotes.d.ts +11 -0
- package/dist/RebookingNotes/RebookingNotes.js +18 -0
- package/dist/RebookingNotes/index.d.ts +3 -0
- package/dist/RebookingNotes/index.js +1 -0
- package/dist/RebookingRadioGroup/RebookingRadioGroup.d.ts +17 -0
- package/dist/RebookingRadioGroup/RebookingRadioGroup.js +13 -0
- package/dist/RebookingRadioGroup/index.d.ts +3 -0
- package/dist/RebookingRadioGroup/index.js +1 -0
- package/dist/ScrollableRow/ScrollableRow.d.ts +21 -0
- package/dist/ScrollableRow/ScrollableRow.js +155 -0
- package/dist/ScrollableRow/index.d.ts +3 -0
- package/dist/ScrollableRow/index.js +2 -0
- package/dist/Share/Share.d.ts +22 -0
- package/dist/Share/Share.js +24 -0
- package/dist/Share/index.d.ts +3 -0
- package/dist/Share/index.js +1 -0
- package/dist/ShowMoreButton/ShowMoreButton.d.ts +11 -0
- package/dist/ShowMoreButton/ShowMoreButton.js +7 -0
- package/dist/ShowMoreButton/index.d.ts +3 -0
- package/dist/ShowMoreButton/index.js +1 -0
- package/dist/SidebarActions/SidebarActions.d.ts +26 -0
- package/dist/SidebarActions/SidebarActions.js +32 -0
- package/dist/SidebarActions/index.d.ts +3 -0
- package/dist/SidebarActions/index.js +2 -0
- package/dist/SimpleRow/SimpleRow.d.ts +15 -0
- package/dist/SimpleRow/SimpleRow.js +11 -0
- package/dist/SimpleRow/index.d.ts +3 -0
- package/dist/SimpleRow/index.js +2 -0
- package/dist/Spinner/Spinner.d.ts +9 -0
- package/dist/Spinner/Spinner.js +8 -0
- package/dist/Spinner/index.d.ts +3 -0
- package/dist/Spinner/index.js +1 -0
- package/dist/ToggleButton/ToggleButton.d.ts +17 -0
- package/dist/ToggleButton/ToggleButton.js +8 -0
- package/dist/ToggleButton/index.d.ts +3 -0
- package/dist/ToggleButton/index.js +1 -0
- package/dist/ToggleSwitch/ToggleSwitch.d.ts +12 -0
- package/dist/ToggleSwitch/ToggleSwitch.js +10 -0
- package/dist/ToggleSwitch/index.d.ts +3 -0
- package/dist/ToggleSwitch/index.js +1 -0
- package/dist/TouchHand/TouchHand.d.ts +5 -0
- package/dist/TouchHand/TouchHand.js +7 -0
- package/dist/TouchHand/index.d.ts +2 -0
- package/dist/TouchHand/index.js +1 -0
- package/dist/WayfindingFloorSelector/WayfindingFloorSelector.d.ts +24 -0
- package/dist/WayfindingFloorSelector/WayfindingFloorSelector.js +27 -0
- package/dist/WayfindingFloorSelector/index.d.ts +3 -0
- package/dist/WayfindingFloorSelector/index.js +1 -0
- package/dist/components/Alert/Alert.d.ts +20 -0
- package/dist/components/Alert/Alert.js +23 -0
- package/dist/components/Alert/index.d.ts +3 -0
- package/dist/components/Alert/index.js +1 -0
- package/dist/components/Autocomplete/Autocomplete.d.ts +21 -0
- package/dist/components/Autocomplete/Autocomplete.js +183 -0
- package/dist/components/Autocomplete/index.d.ts +3 -0
- package/dist/components/Autocomplete/index.js +1 -0
- package/dist/components/Badge/Badge.d.ts +14 -0
- package/dist/components/Badge/Badge.js +15 -0
- package/dist/components/Badge/index.d.ts +3 -0
- package/dist/components/Badge/index.js +1 -0
- package/dist/components/Button/Button.d.ts +30 -0
- package/dist/components/Button/Button.js +41 -0
- package/dist/components/Button/index.d.ts +3 -0
- package/dist/components/Button/index.js +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +19 -0
- package/dist/components/Checkbox/Checkbox.js +19 -0
- package/dist/components/Checkbox/index.d.ts +3 -0
- package/dist/components/Checkbox/index.js +1 -0
- package/dist/components/CheckboxButton/CheckboxButton.d.ts +12 -0
- package/dist/components/CheckboxButton/CheckboxButton.js +19 -0
- package/dist/components/CheckboxButton/index.d.ts +3 -0
- package/dist/components/CheckboxButton/index.js +1 -0
- package/dist/components/DownloadList/DownloadList.d.ts +15 -0
- package/dist/components/DownloadList/DownloadList.js +9 -0
- package/dist/components/DownloadList/index.d.ts +3 -0
- package/dist/components/DownloadList/index.js +2 -0
- package/dist/components/Draggable/Draggable.d.ts +9 -0
- package/dist/components/Draggable/Draggable.js +92 -0
- package/dist/components/Draggable/index.d.ts +3 -0
- package/dist/components/Draggable/index.js +2 -0
- package/dist/components/EntityItem/EntityItem.d.ts +46 -0
- package/dist/components/EntityItem/EntityItem.js +29 -0
- package/dist/components/EntityItem/index.d.ts +3 -0
- package/dist/components/EntityItem/index.js +1 -0
- package/dist/components/EventBadge/EventBadge.d.ts +13 -0
- package/dist/components/EventBadge/EventBadge.js +10 -0
- package/dist/components/EventBadge/index.d.ts +3 -0
- package/dist/components/EventBadge/index.js +1 -0
- package/dist/components/Gallery/Gallery.d.ts +25 -0
- package/dist/components/Gallery/Gallery.js +25 -0
- package/dist/components/Gallery/GalleryBadges/GalleryBadges.d.ts +8 -0
- package/dist/components/Gallery/GalleryBadges/GalleryBadges.js +5 -0
- package/dist/components/Gallery/GalleryControls/GalleryControls.d.ts +11 -0
- package/dist/components/Gallery/GalleryControls/GalleryControls.js +5 -0
- package/dist/components/Gallery/GalleryImg/GalleryImg.d.ts +13 -0
- package/dist/components/Gallery/GalleryImg/GalleryImg.js +37 -0
- package/dist/components/Gallery/GalleryItem/GalleryItem.d.ts +14 -0
- package/dist/components/Gallery/GalleryItem/GalleryItem.js +6 -0
- package/dist/components/Gallery/GalleryModal/GalleryModal.d.ts +18 -0
- package/dist/components/Gallery/GalleryModal/GalleryModal.js +88 -0
- package/dist/components/Gallery/GalleryPreLoader.d.ts +7 -0
- package/dist/components/Gallery/GalleryPreLoader.js +29 -0
- package/dist/components/Gallery/TransformImg/TransformImg.d.ts +10 -0
- package/dist/components/Gallery/TransformImg/TransformImg.js +15 -0
- package/dist/components/Gallery/index.d.ts +3 -0
- package/dist/components/Gallery/index.js +1 -0
- package/dist/components/HeatmapLegend/HeatmapLegend.d.ts +15 -0
- package/dist/components/HeatmapLegend/HeatmapLegend.js +11 -0
- package/dist/components/HeatmapLegend/index.d.ts +3 -0
- package/dist/components/HeatmapLegend/index.js +2 -0
- package/dist/components/HighlightText/HighlightText.d.ts +7 -0
- package/dist/components/HighlightText/HighlightText.js +14 -0
- package/dist/components/HighlightText/index.d.ts +2 -0
- package/dist/components/HighlightText/index.js +1 -0
- package/dist/components/LevelBadge/LevelBadge.d.ts +9 -0
- package/dist/components/LevelBadge/LevelBadge.js +10 -0
- package/dist/components/LevelBadge/index.d.ts +3 -0
- package/dist/components/LevelBadge/index.js +2 -0
- package/dist/components/LevelSelector/LevelSelector.d.ts +19 -0
- package/dist/components/LevelSelector/LevelSelector.js +91 -0
- package/dist/components/LevelSelector/index.d.ts +3 -0
- package/dist/components/LevelSelector/index.js +2 -0
- package/dist/components/MapControls/MapControls.d.ts +33 -0
- package/dist/components/MapControls/MapControls.js +38 -0
- package/dist/components/MapControls/index.d.ts +3 -0
- package/dist/components/MapControls/index.js +2 -0
- package/dist/components/MobileToggleButton/MobileToggleButton.d.ts +12 -0
- package/dist/components/MobileToggleButton/MobileToggleButton.js +8 -0
- package/dist/components/MobileToggleButton/index.d.ts +3 -0
- package/dist/components/MobileToggleButton/index.js +1 -0
- package/dist/components/Modal/Modal.d.ts +34 -0
- package/dist/components/Modal/Modal.js +98 -0
- package/dist/components/Modal/index.d.ts +3 -0
- package/dist/components/Modal/index.js +1 -0
- package/dist/components/MultiSelectGroups/MultiSelectGroups.d.ts +37 -0
- package/dist/components/MultiSelectGroups/MultiSelectGroups.js +80 -0
- package/dist/components/MultiSelectGroups/index.d.ts +3 -0
- package/dist/components/MultiSelectGroups/index.js +1 -0
- package/dist/components/Overlay/Overlay.d.ts +29 -0
- package/dist/components/Overlay/Overlay.js +251 -0
- package/dist/components/Overlay/OverlayScrollContext.d.ts +7 -0
- package/dist/components/Overlay/OverlayScrollContext.js +7 -0
- package/dist/components/Overlay/index.d.ts +4 -0
- package/dist/components/Overlay/index.js +2 -0
- package/dist/components/OverlayGrip/OverlayGrip.d.ts +11 -0
- package/dist/components/OverlayGrip/OverlayGrip.js +8 -0
- package/dist/components/OverlayGrip/index.d.ts +3 -0
- package/dist/components/OverlayGrip/index.js +2 -0
- package/dist/components/PermissionNotice/PermissionNotice.d.ts +16 -0
- package/dist/components/PermissionNotice/PermissionNotice.js +11 -0
- package/dist/components/PermissionNotice/index.d.ts +3 -0
- package/dist/components/PermissionNotice/index.js +2 -0
- package/dist/components/Radio/Radio.d.ts +15 -0
- package/dist/components/Radio/Radio.js +13 -0
- package/dist/components/Radio/index.d.ts +3 -0
- package/dist/components/Radio/index.js +1 -0
- package/dist/components/RebookingNotes/RebookingNotes.d.ts +11 -0
- package/dist/components/RebookingNotes/RebookingNotes.js +18 -0
- package/dist/components/RebookingNotes/index.d.ts +3 -0
- package/dist/components/RebookingNotes/index.js +1 -0
- package/dist/components/RebookingRadioGroup/RebookingRadioGroup.d.ts +17 -0
- package/dist/components/RebookingRadioGroup/RebookingRadioGroup.js +13 -0
- package/dist/components/RebookingRadioGroup/index.d.ts +3 -0
- package/dist/components/RebookingRadioGroup/index.js +1 -0
- package/dist/components/ScrollableRow/ScrollableRow.d.ts +21 -0
- package/dist/components/ScrollableRow/ScrollableRow.js +155 -0
- package/dist/components/ScrollableRow/index.d.ts +3 -0
- package/dist/components/ScrollableRow/index.js +2 -0
- package/dist/components/Share/Share.d.ts +22 -0
- package/dist/components/Share/Share.js +24 -0
- package/dist/components/Share/index.d.ts +3 -0
- package/dist/components/Share/index.js +1 -0
- package/dist/components/ShowMoreButton/ShowMoreButton.d.ts +11 -0
- package/dist/components/ShowMoreButton/ShowMoreButton.js +7 -0
- package/dist/components/ShowMoreButton/index.d.ts +3 -0
- package/dist/components/ShowMoreButton/index.js +1 -0
- package/dist/components/SidebarActions/SidebarActions.d.ts +26 -0
- package/dist/components/SidebarActions/SidebarActions.js +32 -0
- package/dist/components/SidebarActions/index.d.ts +3 -0
- package/dist/components/SidebarActions/index.js +2 -0
- package/dist/components/SimpleRow/SimpleRow.d.ts +15 -0
- package/dist/components/SimpleRow/SimpleRow.js +11 -0
- package/dist/components/SimpleRow/index.d.ts +3 -0
- package/dist/components/SimpleRow/index.js +2 -0
- package/dist/components/Spinner/Spinner.d.ts +9 -0
- package/dist/components/Spinner/Spinner.js +8 -0
- package/dist/components/Spinner/index.d.ts +3 -0
- package/dist/components/Spinner/index.js +1 -0
- package/dist/components/ToggleButton/ToggleButton.d.ts +17 -0
- package/dist/components/ToggleButton/ToggleButton.js +8 -0
- package/dist/components/ToggleButton/index.d.ts +3 -0
- package/dist/components/ToggleButton/index.js +1 -0
- package/dist/components/ToggleSwitch/ToggleSwitch.d.ts +12 -0
- package/dist/components/ToggleSwitch/ToggleSwitch.js +10 -0
- package/dist/components/ToggleSwitch/index.d.ts +3 -0
- package/dist/components/ToggleSwitch/index.js +1 -0
- package/dist/components/TouchHand/TouchHand.d.ts +5 -0
- package/dist/components/TouchHand/TouchHand.js +7 -0
- package/dist/components/TouchHand/index.d.ts +2 -0
- package/dist/components/TouchHand/index.js +1 -0
- package/dist/components/WayfindingFloorSelector/WayfindingFloorSelector.d.ts +24 -0
- package/dist/components/WayfindingFloorSelector/WayfindingFloorSelector.js +27 -0
- package/dist/components/WayfindingFloorSelector/index.d.ts +3 -0
- package/dist/components/WayfindingFloorSelector/index.js +1 -0
- package/dist/index.d.ts +65 -0
- package/dist/index.js +69 -0
- package/dist/shared/debounce.d.ts +2 -0
- package/dist/shared/debounce.js +9 -0
- package/dist/shared/hooks/useDragGesture.d.ts +19 -0
- package/dist/shared/hooks/useDragGesture.js +45 -0
- package/dist/shared/hooks/useOnClickOutside.d.ts +14 -0
- package/dist/shared/hooks/useOnClickOutside.js +43 -0
- package/dist/shared/hooks/useOnEscape.d.ts +14 -0
- package/dist/shared/hooks/useOnEscape.js +31 -0
- package/dist/shared/hooks/useWindowSize.d.ts +5 -0
- package/dist/shared/hooks/useWindowSize.js +40 -0
- package/dist/shared/interactive.d.ts +2 -0
- package/dist/shared/interactive.js +4 -0
- package/package.json +70 -0
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/* eslint-disable @eslint-react/exhaustive-deps */
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { isInteractiveTarget } from '../shared/interactive';
|
|
5
|
+
const Draggable = ({ children, className, style }) => {
|
|
6
|
+
const [position, setPosition] = useState({ x: 0, y: 0 });
|
|
7
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
8
|
+
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
|
|
9
|
+
const draggableRef = useRef(null);
|
|
10
|
+
const handleMouseDown = (e) => {
|
|
11
|
+
if (isInteractiveTarget(e.target)) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
setIsDragging(true);
|
|
15
|
+
setDragStart({
|
|
16
|
+
x: e.clientX - position.x,
|
|
17
|
+
y: e.clientY - position.y,
|
|
18
|
+
});
|
|
19
|
+
e.preventDefault();
|
|
20
|
+
};
|
|
21
|
+
const handleMouseMove = (e) => {
|
|
22
|
+
if (!isDragging)
|
|
23
|
+
return;
|
|
24
|
+
const newX = e.clientX - dragStart.x;
|
|
25
|
+
const newY = e.clientY - dragStart.y;
|
|
26
|
+
setPosition({ x: newX, y: newY });
|
|
27
|
+
};
|
|
28
|
+
const handleMouseUp = () => {
|
|
29
|
+
endDrag();
|
|
30
|
+
};
|
|
31
|
+
const handleTouchStart = (e) => {
|
|
32
|
+
if (isInteractiveTarget(e.target)) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const touch = e.touches[0];
|
|
36
|
+
setIsDragging(true);
|
|
37
|
+
setDragStart({
|
|
38
|
+
x: touch.clientX - position.x,
|
|
39
|
+
y: touch.clientY - position.y,
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
const handleTouchMove = (e) => {
|
|
43
|
+
if (!isDragging)
|
|
44
|
+
return;
|
|
45
|
+
const touch = e.touches[0];
|
|
46
|
+
const newX = touch.clientX - dragStart.x;
|
|
47
|
+
const newY = touch.clientY - dragStart.y;
|
|
48
|
+
setPosition({ x: newX, y: newY });
|
|
49
|
+
};
|
|
50
|
+
const handleTouchEnd = () => {
|
|
51
|
+
endDrag();
|
|
52
|
+
};
|
|
53
|
+
const endDrag = () => {
|
|
54
|
+
if (!draggableRef.current)
|
|
55
|
+
return;
|
|
56
|
+
const rect = draggableRef.current.getBoundingClientRect();
|
|
57
|
+
const viewportWidth = window.innerWidth;
|
|
58
|
+
const viewportHeight = window.innerHeight;
|
|
59
|
+
const limitWidth = rect.width / 4;
|
|
60
|
+
const limitHeight = rect.height / 4;
|
|
61
|
+
const hiddenLeft = Math.max(0, 0 - rect.left);
|
|
62
|
+
const hiddenRight = Math.max(0, rect.right - viewportWidth);
|
|
63
|
+
const hiddenTop = Math.max(0, 0 - rect.top);
|
|
64
|
+
const hiddenBottom = Math.max(0, rect.bottom - viewportHeight);
|
|
65
|
+
const isPartiallyOutX = hiddenLeft > limitWidth || hiddenRight > limitWidth;
|
|
66
|
+
const isPartiallyOutY = hiddenTop > limitHeight || hiddenBottom > limitHeight;
|
|
67
|
+
if (isPartiallyOutX || isPartiallyOutY) {
|
|
68
|
+
setPosition({ x: 0, y: 0 });
|
|
69
|
+
}
|
|
70
|
+
setIsDragging(false);
|
|
71
|
+
};
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
if (!isDragging)
|
|
74
|
+
return;
|
|
75
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
76
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
77
|
+
document.addEventListener('touchmove', handleTouchMove, { passive: false });
|
|
78
|
+
document.addEventListener('touchend', handleTouchEnd);
|
|
79
|
+
return () => {
|
|
80
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
81
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
82
|
+
document.removeEventListener('touchmove', handleTouchMove);
|
|
83
|
+
document.removeEventListener('touchend', handleTouchEnd);
|
|
84
|
+
};
|
|
85
|
+
}, [isDragging, dragStart]);
|
|
86
|
+
return (_jsx("div", { ref: draggableRef, className: className, style: {
|
|
87
|
+
...style,
|
|
88
|
+
transform: `translate(${position.x}px, ${position.y}px)`,
|
|
89
|
+
cursor: isDragging ? 'grabbing' : 'grab',
|
|
90
|
+
}, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: children }));
|
|
91
|
+
};
|
|
92
|
+
export default Draggable;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import './EntityItem.scss';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export type EntityItemAdditionalInfo = {
|
|
4
|
+
type: 'location';
|
|
5
|
+
locationName?: string;
|
|
6
|
+
hall?: string;
|
|
7
|
+
level?: string;
|
|
8
|
+
showLevelLabel?: boolean;
|
|
9
|
+
} | {
|
|
10
|
+
type: 'text';
|
|
11
|
+
text: string;
|
|
12
|
+
};
|
|
13
|
+
export interface EntityItemProps {
|
|
14
|
+
id: string;
|
|
15
|
+
title: string;
|
|
16
|
+
subtitle?: string;
|
|
17
|
+
image?: string;
|
|
18
|
+
icon?: string;
|
|
19
|
+
typeColor?: string;
|
|
20
|
+
iconClassName?: string;
|
|
21
|
+
variant?: 'default' | 'person';
|
|
22
|
+
titleBadge?: string | number;
|
|
23
|
+
datetime?: {
|
|
24
|
+
date?: string;
|
|
25
|
+
time?: string;
|
|
26
|
+
};
|
|
27
|
+
subtitleLabel?: string;
|
|
28
|
+
additionalInfo?: EntityItemAdditionalInfo[];
|
|
29
|
+
bookmarked?: boolean;
|
|
30
|
+
featured?: boolean;
|
|
31
|
+
visited?: boolean;
|
|
32
|
+
current?: boolean;
|
|
33
|
+
heatmapColor?: string;
|
|
34
|
+
accentBorderColor?: string;
|
|
35
|
+
hideUserState?: boolean;
|
|
36
|
+
compactDetails?: boolean;
|
|
37
|
+
secondaryText?: string;
|
|
38
|
+
highlight?: string;
|
|
39
|
+
featuredLabel: string;
|
|
40
|
+
hallLabel: string;
|
|
41
|
+
levelLabel: string;
|
|
42
|
+
onClick?: (id: string) => void;
|
|
43
|
+
}
|
|
44
|
+
declare const EntityItem: ({ id, title, subtitle, image, icon, typeColor, iconClassName, variant, titleBadge, datetime, subtitleLabel, additionalInfo, bookmarked, featured, visited, current, heatmapColor, accentBorderColor, hideUserState, compactDetails, secondaryText, highlight, featuredLabel, hallLabel, levelLabel, onClick, }: EntityItemProps) => React.JSX.Element;
|
|
45
|
+
export default EntityItem;
|
|
46
|
+
//# sourceMappingURL=EntityItem.d.ts.map
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import './EntityItem.scss';
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
import HighlightText from '../HighlightText';
|
|
5
|
+
const EntityItem = ({ id, title, subtitle, image, icon, typeColor, iconClassName, variant = 'default', titleBadge, datetime, subtitleLabel, additionalInfo = [], bookmarked = false, featured = false, visited, current = false, heatmapColor, accentBorderColor, hideUserState = false, compactDetails, secondaryText, highlight, featuredLabel, hallLabel, levelLabel, onClick, }) => {
|
|
6
|
+
const hasDatetime = !!(datetime?.date || datetime?.time);
|
|
7
|
+
const hasSubtitleRow = hasDatetime || !!subtitleLabel || !!subtitle;
|
|
8
|
+
return (_jsx("div", { role: "button", className: cn('efp-entity-item', {
|
|
9
|
+
'is-featured': featured,
|
|
10
|
+
'is-visited': visited,
|
|
11
|
+
'is-current': current,
|
|
12
|
+
'has-heatmap': !!heatmapColor,
|
|
13
|
+
'has-accent': !!accentBorderColor,
|
|
14
|
+
'is-person': variant === 'person',
|
|
15
|
+
}), "aria-label": title, tabIndex: 0, "aria-current": current ? 'true' : undefined, onClick: () => onClick?.(id), onKeyDown: (e) => {
|
|
16
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
17
|
+
e.preventDefault();
|
|
18
|
+
onClick?.(id);
|
|
19
|
+
}
|
|
20
|
+
}, style: {
|
|
21
|
+
...(typeColor ? { '--item-type-color': typeColor } : {}),
|
|
22
|
+
...(heatmapColor && { '--heatmap-color': heatmapColor }),
|
|
23
|
+
...(accentBorderColor &&
|
|
24
|
+
{ '--accent-border-color': accentBorderColor }),
|
|
25
|
+
}, children: _jsxs("div", { className: "efp-entity-item__body", children: [_jsxs("div", { className: "efp-entity-item__left", children: [_jsx("div", { className: "efp-entity-item__icon", children: icon ? (_jsx("img", { src: icon, alt: title })) : iconClassName ? (_jsx("i", { className: iconClassName, "aria-hidden": "true" })) : null }), !hideUserState && (_jsxs(_Fragment, { children: [visited && (_jsx("div", { className: "efp-entity-item__visited", children: _jsx("i", { className: "icon-checkmark" }) })), bookmarked && (_jsx("i", { className: cn('efp-entity-item__bookmarked', 'icon-bookmark-solid') }))] }))] }), _jsxs("div", { className: "efp-entity-item__right", children: [_jsxs("div", { className: cn('efp-entity-item__content', { 'with-image': image }), children: [_jsxs("div", { className: "efp-entity-item__header", children: [_jsxs("div", { className: "efp-entity-item__title", children: [_jsx(HighlightText, { text: title, highlight: highlight }), secondaryText && (_jsx("div", { className: "efp-entity-item__description", children: _jsx(HighlightText, { text: secondaryText, highlight: highlight }) })), titleBadge !== undefined && _jsx("span", { children: titleBadge })] }), featured && _jsx("div", { className: "efp-entity-item__featured", children: featuredLabel })] }), hasSubtitleRow && (_jsxs("div", { className: "efp-entity-item__subtitle", children: [hasDatetime && (_jsxs("div", { className: "efp-entity-item__datetime", children: [datetime?.date && _jsx("strong", { children: datetime.date }), datetime?.time && _jsx("span", { children: datetime.time })] })), subtitleLabel && _jsx("span", { children: subtitleLabel }), subtitle && _jsx("div", { children: subtitle })] })), !!additionalInfo.length && (_jsx("ul", { className: cn('efp-entity-item__details', {
|
|
26
|
+
'compact-details': compactDetails,
|
|
27
|
+
}), children: additionalInfo.map((info, idx) => (_jsxs("li", { className: "efp-entity-item__details-item", children: [info.type === 'location' && (_jsxs(_Fragment, { children: [info.locationName && (_jsx("div", { className: "efp-entity-item__details-item-booth", children: _jsx(HighlightText, { text: info.locationName, highlight: highlight }) })), info.hall && (_jsxs("div", { children: [hallLabel, "\u00A0", _jsx("span", { children: info.hall })] })), info.level && (_jsxs("div", { children: [info.showLevelLabel && _jsxs("span", { children: [levelLabel, "\u00A0"] }), _jsx("span", { children: info.level })] }))] })), info.type === 'text' && _jsx("span", { children: info.text })] }, idx))) }))] }), image && (_jsx("div", { className: "efp-entity-item__image", children: _jsx("img", { src: image, alt: title }) }))] })] }) }));
|
|
28
|
+
};
|
|
29
|
+
export default EntityItem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './EntityItem';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import './EventBadge.scss';
|
|
2
|
+
export type EventBadgeStatus = 'live' | 'upcoming' | 'starting-soon' | 'past' | 'none';
|
|
3
|
+
export interface EventBadgeProps {
|
|
4
|
+
status: EventBadgeStatus;
|
|
5
|
+
statusLabel?: string;
|
|
6
|
+
showFullBadge?: boolean;
|
|
7
|
+
fullLabel: string;
|
|
8
|
+
isUrgent?: boolean;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const EventBadge: ({ status, statusLabel, showFullBadge, fullLabel, isUrgent, className, }: EventBadgeProps) => import("react").JSX.Element | null;
|
|
12
|
+
export default EventBadge;
|
|
13
|
+
//# sourceMappingURL=EventBadge.d.ts.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import './EventBadge.scss';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
const EventBadge = ({ status, statusLabel, showFullBadge = false, fullLabel, isUrgent = false, className = '', }) => {
|
|
5
|
+
const mainBadge = status !== 'none' ? (_jsx("div", { className: classNames('efp-event-badge', `efp-event-badge--${status}`, { 'is-urgent': isUrgent }, className), children: statusLabel })) : null;
|
|
6
|
+
if (!mainBadge && !showFullBadge)
|
|
7
|
+
return null;
|
|
8
|
+
return (_jsxs(_Fragment, { children: [mainBadge, showFullBadge && (_jsx("div", { className: classNames('efp-event-badge', 'efp-event-badge--full', className), children: fullLabel }))] }));
|
|
9
|
+
};
|
|
10
|
+
export default EventBadge;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './EventBadge';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import './HeatmapLegend.scss';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface HeatmapLegendTick {
|
|
4
|
+
value: number;
|
|
5
|
+
color: string;
|
|
6
|
+
}
|
|
7
|
+
export interface HeatmapLegendProps {
|
|
8
|
+
ticks: HeatmapLegendTick[];
|
|
9
|
+
ariaLabel: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
}
|
|
13
|
+
declare const HeatmapLegend: ({ ticks, ariaLabel, className, style }: HeatmapLegendProps) => React.JSX.Element | null;
|
|
14
|
+
export default HeatmapLegend;
|
|
15
|
+
//# sourceMappingURL=HeatmapLegend.d.ts.map
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import './HeatmapLegend.scss';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
const HeatmapLegend = ({ ticks, ariaLabel, className, style }) => {
|
|
5
|
+
if (ticks.length === 0)
|
|
6
|
+
return null;
|
|
7
|
+
const colors = ticks.map((tick) => tick.color);
|
|
8
|
+
const background = colors.length === 1 ? colors[0] : `linear-gradient(to right, ${colors.join(', ')})`;
|
|
9
|
+
return (_jsxs("div", { className: classNames('efp-heatmap-legend', className), style: style, role: "img", "aria-label": ariaLabel, children: [_jsx("div", { className: "efp-heatmap-legend__colors", style: { background }, "aria-hidden": "true" }), _jsx("div", { className: "efp-heatmap-legend__values", children: ticks.map(({ value }, index) => (_jsx("span", { "aria-hidden": "true", children: value }, index))) })] }));
|
|
10
|
+
};
|
|
11
|
+
export default HeatmapLegend;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const HIGHLIGHT_COLOR = '#FFFF99';
|
|
3
|
+
const HighlightText = ({ text, highlight }) => {
|
|
4
|
+
if (!highlight || !text) {
|
|
5
|
+
return _jsx(_Fragment, { children: text });
|
|
6
|
+
}
|
|
7
|
+
const startIndex = text.toLowerCase().indexOf(highlight.toLowerCase());
|
|
8
|
+
if (startIndex === -1) {
|
|
9
|
+
return _jsx(_Fragment, { children: text });
|
|
10
|
+
}
|
|
11
|
+
const endIndex = startIndex + highlight.length;
|
|
12
|
+
return (_jsxs(_Fragment, { children: [text.slice(0, startIndex), _jsx("mark", { style: { background: `linear-gradient(to top, ${HIGHLIGHT_COLOR}, transparent)` }, children: text.slice(startIndex, endIndex) }), text.slice(endIndex)] }));
|
|
13
|
+
};
|
|
14
|
+
export default HighlightText;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './HighlightText';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './LevelBadge.scss';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface LevelBadgeProps {
|
|
4
|
+
level: string;
|
|
5
|
+
levelLabel: string;
|
|
6
|
+
}
|
|
7
|
+
declare const LevelBadge: ({ level, levelLabel }: LevelBadgeProps) => React.JSX.Element | null;
|
|
8
|
+
export default LevelBadge;
|
|
9
|
+
//# sourceMappingURL=LevelBadge.d.ts.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
// @ts-nocheck
|
|
3
|
+
import './LevelBadge.scss';
|
|
4
|
+
const isNumeric = (input) => /^\d+$/.test(input);
|
|
5
|
+
const LevelBadge = ({ level, levelLabel }) => {
|
|
6
|
+
if (!level)
|
|
7
|
+
return null;
|
|
8
|
+
return (_jsx("div", { className: "efp-level-badge", children: _jsx("span", { children: isNumeric(level) ? `${levelLabel} ${level}` : level }) }));
|
|
9
|
+
};
|
|
10
|
+
export default LevelBadge;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import './LevelSelector.scss';
|
|
2
|
+
export interface LevelSelectorFloor {
|
|
3
|
+
/** Stable identifier for the floor (used as React key and passed to `onSelect`). */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Display name shown to the user (already resolved to short/full by the caller). */
|
|
6
|
+
label: string;
|
|
7
|
+
active: boolean;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface LevelSelectorProps {
|
|
11
|
+
floors: LevelSelectorFloor[];
|
|
12
|
+
layout: 'compact-list' | 'dropdown';
|
|
13
|
+
onSelect: (id: string) => void;
|
|
14
|
+
floorSelectionLabel: string;
|
|
15
|
+
currentFloorLabel: string;
|
|
16
|
+
floorLabel: string;
|
|
17
|
+
}
|
|
18
|
+
export default function LevelSelector({ floors, layout, onSelect, floorSelectionLabel, currentFloorLabel, floorLabel, }: LevelSelectorProps): import("react").JSX.Element | null;
|
|
19
|
+
//# sourceMappingURL=LevelSelector.d.ts.map
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import './LevelSelector.scss';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
5
|
+
import useOnClickOutside from '../shared/hooks/useOnClickOutside';
|
|
6
|
+
import useOnEscape from '../shared/hooks/useOnEscape';
|
|
7
|
+
export default function LevelSelector({ floors, layout, onSelect, floorSelectionLabel, currentFloorLabel, floorLabel, }) {
|
|
8
|
+
const dropdownRef = useRef(null);
|
|
9
|
+
const triggerRef = useRef(null);
|
|
10
|
+
const itemRefs = useRef(new Map());
|
|
11
|
+
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
12
|
+
const [menuPosition, setMenuPosition] = useState('down');
|
|
13
|
+
const closeAndRefocus = useCallback(() => {
|
|
14
|
+
setIsDropdownOpen(false);
|
|
15
|
+
triggerRef.current?.focus();
|
|
16
|
+
}, []);
|
|
17
|
+
useOnClickOutside([dropdownRef, triggerRef], () => setIsDropdownOpen(false), isDropdownOpen);
|
|
18
|
+
useOnEscape(closeAndRefocus, isDropdownOpen);
|
|
19
|
+
useLayoutEffect(() => {
|
|
20
|
+
if (isDropdownOpen && triggerRef.current) {
|
|
21
|
+
const buttonRect = triggerRef.current.getBoundingClientRect();
|
|
22
|
+
const windowHeight = window.innerHeight;
|
|
23
|
+
const spaceBelow = windowHeight - buttonRect.bottom;
|
|
24
|
+
const minSpaceRequired = 200;
|
|
25
|
+
setMenuPosition(spaceBelow < minSpaceRequired ? 'up' : 'down');
|
|
26
|
+
}
|
|
27
|
+
}, [isDropdownOpen]);
|
|
28
|
+
const handleFloorSelect = useCallback((floor) => {
|
|
29
|
+
if (floor.disabled)
|
|
30
|
+
return;
|
|
31
|
+
onSelect(floor.id);
|
|
32
|
+
setIsDropdownOpen(false);
|
|
33
|
+
triggerRef.current?.focus();
|
|
34
|
+
}, [onSelect]);
|
|
35
|
+
const focusAdjacentFloor = useCallback((e, floor) => {
|
|
36
|
+
if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
|
|
37
|
+
return;
|
|
38
|
+
e.preventDefault();
|
|
39
|
+
const currentIndex = floors.findIndex((f) => f.id === floor.id);
|
|
40
|
+
const direction = e.key === 'ArrowDown' ? 1 : -1;
|
|
41
|
+
let nextIndex = currentIndex + direction;
|
|
42
|
+
while (nextIndex >= 0 && nextIndex < floors.length) {
|
|
43
|
+
if (!floors[nextIndex].disabled) {
|
|
44
|
+
itemRefs.current.get(floors[nextIndex].id)?.focus();
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
nextIndex += direction;
|
|
48
|
+
}
|
|
49
|
+
}, [floors]);
|
|
50
|
+
const handleDropdownItemKeyDown = useCallback((e, floor) => {
|
|
51
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
52
|
+
if (floor.disabled)
|
|
53
|
+
return;
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
handleFloorSelect(floor);
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
focusAdjacentFloor(e, floor);
|
|
59
|
+
}, [focusAdjacentFloor, handleFloorSelect]);
|
|
60
|
+
if (floors.length === 0)
|
|
61
|
+
return null;
|
|
62
|
+
const activeFloor = floors.find((floor) => floor.active);
|
|
63
|
+
if (layout === 'compact-list') {
|
|
64
|
+
// Roving tabindex: only the active floor (or the first enabled one as a
|
|
65
|
+
// fallback) is a tab stop; arrows move focus, Enter/Space select.
|
|
66
|
+
const tabbableFloor = activeFloor && !activeFloor.disabled ? activeFloor : floors.find((floor) => !floor.disabled);
|
|
67
|
+
return (_jsx("div", { className: classNames('efp-level-selector', 'efp-level-selector--compact-list'), role: "radiogroup", "aria-label": floorSelectionLabel, children: floors.map((floor) => (_jsx("button", { ref: (el) => {
|
|
68
|
+
if (el)
|
|
69
|
+
itemRefs.current.set(floor.id, el);
|
|
70
|
+
else
|
|
71
|
+
itemRefs.current.delete(floor.id);
|
|
72
|
+
}, type: "button", className: classNames('efp-level-selector__item', {
|
|
73
|
+
'efp-level-selector__item--active': floor.active,
|
|
74
|
+
'efp-level-selector__item--disabled': floor.disabled,
|
|
75
|
+
}), role: "radio", title: `${floor.active ? currentFloorLabel : floorLabel} ${floor.label}`, "aria-label": `${floor.active ? currentFloorLabel : floorLabel} ${floor.label}`, "aria-checked": floor.active, "aria-disabled": floor.disabled, tabIndex: floor.id === tabbableFloor?.id ? 0 : -1, onClick: () => handleFloorSelect(floor), onKeyDown: (e) => focusAdjacentFloor(e, floor), children: _jsx("span", { dir: "auto", children: floor.label }) }, floor.id))) }));
|
|
76
|
+
}
|
|
77
|
+
return (_jsxs("div", { className: classNames('efp-level-selector', 'efp-level-selector--dropdown'), children: [_jsxs("button", { ref: triggerRef, type: "button", className: classNames('efp-level-selector__trigger', {
|
|
78
|
+
'efp-level-selector__trigger--open': isDropdownOpen,
|
|
79
|
+
}), onClick: () => setIsDropdownOpen(!isDropdownOpen), "aria-haspopup": "listbox", "aria-expanded": isDropdownOpen, "aria-label": `${currentFloorLabel}: ${activeFloor?.label ?? ''}`, children: [_jsxs("div", { className: "efp-level-selector__trigger-text", children: [_jsx("i", { className: "icon-layers", "aria-hidden": "true" }), _jsx("span", { dir: "auto", children: activeFloor?.label ?? '' })] }), _jsx("div", { className: "efp-level-selector__trigger-chevron", children: _jsx("i", { className: "icon-chevron-down", "aria-hidden": "true" }) })] }), isDropdownOpen && (_jsx("div", { ref: dropdownRef, className: classNames('efp-level-selector__dropdown', 'efp-level-selector__dropdown--full', {
|
|
80
|
+
'efp-level-selector__dropdown--opens-up': menuPosition === 'up',
|
|
81
|
+
'efp-level-selector__dropdown--opens-down': menuPosition === 'down',
|
|
82
|
+
}), role: "listbox", "aria-label": floorSelectionLabel, children: floors.map((floor) => (_jsxs("div", { ref: (el) => {
|
|
83
|
+
if (el)
|
|
84
|
+
itemRefs.current.set(floor.id, el);
|
|
85
|
+
else
|
|
86
|
+
itemRefs.current.delete(floor.id);
|
|
87
|
+
}, className: classNames('efp-level-selector__dropdown-item', {
|
|
88
|
+
'efp-level-selector__dropdown-item--active': floor.active,
|
|
89
|
+
'efp-level-selector__dropdown-item--disabled': floor.disabled,
|
|
90
|
+
}), role: "option", "aria-selected": floor.active, "aria-disabled": floor.disabled, tabIndex: floor.disabled ? -1 : 0, onClick: () => handleFloorSelect(floor), onKeyDown: (e) => handleDropdownItemKeyDown(e, floor), children: [_jsx("span", { className: "efp-level-selector__dropdown-item-icon", children: floor.active && _jsx("i", { className: "icon-checkmark-solid", "aria-hidden": "true" }) }), _jsx("span", { className: "efp-level-selector__dropdown-item-name", dir: "auto", children: floor.label })] }, floor.id))) }))] }));
|
|
91
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import './MapControls.scss';
|
|
2
|
+
import { type CSSProperties } from 'react';
|
|
3
|
+
export interface MapControlLayersItem {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
}
|
|
7
|
+
export interface MapControlsProps {
|
|
8
|
+
className?: string;
|
|
9
|
+
style?: CSSProperties;
|
|
10
|
+
title: string;
|
|
11
|
+
findLocationLabel: string;
|
|
12
|
+
zoomInLabel: string;
|
|
13
|
+
zoomOutLabel: string;
|
|
14
|
+
viewModeLabel: string;
|
|
15
|
+
fitToScreenLabel: string;
|
|
16
|
+
layersLabel: string;
|
|
17
|
+
showModeSwitch: boolean;
|
|
18
|
+
showFindLocation: boolean;
|
|
19
|
+
isMap3d: boolean;
|
|
20
|
+
defaultLayersOpen?: boolean;
|
|
21
|
+
layersList?: MapControlLayersItem[];
|
|
22
|
+
layersActiveItems?: string[];
|
|
23
|
+
layersWidth?: number;
|
|
24
|
+
onViewModeSwitch: () => void;
|
|
25
|
+
onFindLocation: () => void;
|
|
26
|
+
onZoomIn: () => void;
|
|
27
|
+
onZoomOut: () => void;
|
|
28
|
+
onFitToScreen: () => void;
|
|
29
|
+
onChangeLayers: (value: string) => void;
|
|
30
|
+
}
|
|
31
|
+
declare const MapControls: ({ className, style, title, findLocationLabel, zoomInLabel, zoomOutLabel, viewModeLabel, fitToScreenLabel, layersLabel, isMap3d, showModeSwitch, showFindLocation, defaultLayersOpen, layersList, layersActiveItems, layersWidth, onViewModeSwitch, onFindLocation, onZoomIn, onZoomOut, onFitToScreen, onChangeLayers, }: MapControlsProps) => import("react").JSX.Element;
|
|
32
|
+
export default MapControls;
|
|
33
|
+
//# sourceMappingURL=MapControls.d.ts.map
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import './MapControls.scss';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { useId, useLayoutEffect, useRef, useState } from 'react';
|
|
5
|
+
import useOnClickOutside from '../shared/hooks/useOnClickOutside';
|
|
6
|
+
import useOnEscape from '../shared/hooks/useOnEscape';
|
|
7
|
+
const MapControls = ({ className, style, title, findLocationLabel, zoomInLabel, zoomOutLabel, viewModeLabel, fitToScreenLabel, layersLabel, isMap3d, showModeSwitch, showFindLocation, defaultLayersOpen = false, layersList, layersActiveItems = [], layersWidth, onViewModeSwitch, onFindLocation, onZoomIn, onZoomOut, onFitToScreen, onChangeLayers, }) => {
|
|
8
|
+
const refLayersWrapper = useRef(null);
|
|
9
|
+
const refLayersButton = useRef(null);
|
|
10
|
+
const layerIdPrefix = useId();
|
|
11
|
+
const [layersIsOpen, setLayersOpen] = useState(defaultLayersOpen);
|
|
12
|
+
const [menuPosition, setMenuPosition] = useState('down');
|
|
13
|
+
useOnClickOutside(refLayersWrapper, () => setLayersOpen(false), layersIsOpen);
|
|
14
|
+
useOnEscape(() => {
|
|
15
|
+
setLayersOpen(false);
|
|
16
|
+
refLayersButton.current?.focus();
|
|
17
|
+
}, layersIsOpen);
|
|
18
|
+
useLayoutEffect(() => {
|
|
19
|
+
if (layersIsOpen && refLayersWrapper.current) {
|
|
20
|
+
const buttonRect = refLayersWrapper.current.getBoundingClientRect();
|
|
21
|
+
const windowHeight = window.innerHeight;
|
|
22
|
+
const spaceBelow = windowHeight - buttonRect.bottom;
|
|
23
|
+
const minSpaceRequired = 250;
|
|
24
|
+
if (spaceBelow < minSpaceRequired) {
|
|
25
|
+
setMenuPosition('up');
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
setMenuPosition('down');
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}, [layersIsOpen]);
|
|
32
|
+
const handleLayersCheck = (id) => onChangeLayers(id);
|
|
33
|
+
return (_jsxs("div", { className: classNames('efp-map-controls', className), style: style, role: "toolbar", "aria-label": title, children: [showFindLocation && (_jsx("button", { type: "button", className: "efp-map-control", "aria-label": findLocationLabel, title: findLocationLabel, onClick: onFindLocation, children: _jsx("i", { className: "icon-navigation", "aria-hidden": "true" }) })), layersList && (_jsxs("div", { className: "efp-layers-button", ref: refLayersWrapper, children: [_jsx("button", { ref: refLayersButton, type: "button", className: classNames('efp-map-control', { 'efp-map-control--active': layersIsOpen }), "aria-label": layersLabel, title: layersLabel, "aria-haspopup": "true", "aria-expanded": layersIsOpen, onClick: () => setLayersOpen(!layersIsOpen), children: _jsx("i", { className: "icon-layers", "aria-hidden": "true" }) }), layersIsOpen && (_jsx("div", { className: classNames('efp-checked-panel', {
|
|
34
|
+
'efp-checked-panel--opens-up': menuPosition === 'up',
|
|
35
|
+
'efp-checked-panel--opens-down': menuPosition === 'down',
|
|
36
|
+
}), style: { minWidth: layersWidth }, children: _jsx("ul", { className: "efp-checked-panel__list", children: layersList.map((item) => (_jsxs("li", { children: [_jsx("input", { type: "checkbox", className: "efp-checked-panel__checkbox", value: item.id, id: `${layerIdPrefix}-${item.id}`, checked: layersActiveItems.includes(item.id), onChange: () => handleLayersCheck(item.id) }), _jsx("label", { className: "efp-checked-panel__label", htmlFor: `${layerIdPrefix}-${item.id}`, children: _jsx("div", { className: "efp-checked-panel__item-name", children: item.name }) })] }, item.id))) }) }))] })), showModeSwitch && (_jsx("button", { type: "button", className: "efp-map-control", "aria-label": viewModeLabel, title: viewModeLabel, onClick: onViewModeSwitch, children: _jsx("i", { className: isMap3d ? 'icon-two-dim' : 'icon-three-dim', "aria-hidden": "true" }) })), _jsxs("div", { className: "efp-map-control-group", children: [_jsx("button", { type: "button", className: "efp-map-control", "aria-label": zoomInLabel, title: zoomInLabel, onClick: onZoomIn, children: _jsx("i", { className: "icon-plus", "aria-hidden": "true" }) }), _jsx("div", { className: "efp-map-control-divider" }), _jsx("button", { type: "button", className: "efp-map-control", "aria-label": zoomOutLabel, title: zoomOutLabel, onClick: onZoomOut, children: _jsx("i", { className: "icon-minus", "aria-hidden": "true" }) })] }), _jsx("button", { type: "button", className: "efp-map-control", "aria-label": fitToScreenLabel, title: fitToScreenLabel, onClick: onFitToScreen, children: _jsx("i", { className: "icon-maximize", "aria-hidden": "true" }) })] }));
|
|
37
|
+
};
|
|
38
|
+
export default MapControls;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import './MobileToggleButton.scss';
|
|
2
|
+
export type MobileToggleButtonMode = 'list' | 'map';
|
|
3
|
+
export interface MobileToggleButtonProps {
|
|
4
|
+
mode: MobileToggleButtonMode;
|
|
5
|
+
label: string;
|
|
6
|
+
ariaLabel: string;
|
|
7
|
+
withBanner?: boolean;
|
|
8
|
+
onClick: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare function MobileToggleButton({ mode, label, ariaLabel, withBanner, onClick, }: MobileToggleButtonProps): import("react").JSX.Element;
|
|
11
|
+
export default MobileToggleButton;
|
|
12
|
+
//# sourceMappingURL=MobileToggleButton.d.ts.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import './MobileToggleButton.scss';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
function MobileToggleButton({ mode, label, ariaLabel, withBanner, onClick, }) {
|
|
5
|
+
const isListMode = mode === 'list';
|
|
6
|
+
return (_jsxs("button", { className: classNames('efp-mobile-toggle-button', { 'efp-mobile-toggle-button--with-banner': withBanner }, isListMode ? 'efp-mobile-toggle-button--list' : 'efp-mobile-toggle-button--map'), onClick: onClick, type: "button", "aria-label": ariaLabel, children: [_jsx("i", { className: isListMode ? 'icon-list' : 'icon-map', "aria-hidden": "true" }), _jsx("span", { className: "efp-mobile-toggle-button__text", children: label })] }));
|
|
7
|
+
}
|
|
8
|
+
export default MobileToggleButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './MobileToggleButton';
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import './Modal.scss';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { type ButtonVariant } from '../Button';
|
|
4
|
+
export type ModalVariant = 'default' | 'share';
|
|
5
|
+
export interface ModalButton {
|
|
6
|
+
label: string;
|
|
7
|
+
variant?: ButtonVariant;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
withBadge?: boolean;
|
|
10
|
+
onClick: () => void;
|
|
11
|
+
}
|
|
12
|
+
type ModalFooterButton = Omit<ModalButton, 'withBadge'>;
|
|
13
|
+
type ModalLabel = {
|
|
14
|
+
title: string;
|
|
15
|
+
ariaLabel?: string;
|
|
16
|
+
} | {
|
|
17
|
+
title?: undefined;
|
|
18
|
+
ariaLabel: string;
|
|
19
|
+
};
|
|
20
|
+
export type ModalProps = ModalLabel & {
|
|
21
|
+
open: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
variant?: ModalVariant;
|
|
24
|
+
maxWidth?: number;
|
|
25
|
+
children?: React.ReactNode;
|
|
26
|
+
closeLabel: string;
|
|
27
|
+
renderTarget?: HTMLElement | null;
|
|
28
|
+
footerLeft?: ModalFooterButton[];
|
|
29
|
+
footerRight?: ModalButton[];
|
|
30
|
+
onClose: () => void;
|
|
31
|
+
};
|
|
32
|
+
declare const Modal: ({ open, className, variant, title, ariaLabel, maxWidth, children, closeLabel, renderTarget, footerLeft, footerRight, onClose, }: ModalProps) => React.ReactPortal | null;
|
|
33
|
+
export default Modal;
|
|
34
|
+
//# sourceMappingURL=Modal.d.ts.map
|