@rio-cloud/uikit-mcp 1.1.7 → 1.1.9
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 +24 -18
- package/dist/doc-metadata.json +125 -295
- package/dist/docs/components/accentBar.md +16 -69
- package/dist/docs/components/activity.md +7 -44
- package/dist/docs/components/animatedNumber.md +3 -11
- package/dist/docs/components/animatedTextReveal.md +6 -34
- package/dist/docs/components/animations.md +21 -54
- package/dist/docs/components/appHeader.md +11 -30
- package/dist/docs/components/appLayout.md +40 -193
- package/dist/docs/components/appNavigationBar.md +1 -24
- package/dist/docs/components/areaCharts.md +7 -22
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -9
- package/dist/docs/components/assetTree.md +241 -280
- package/dist/docs/components/autosuggests.md +3 -102
- package/dist/docs/components/avatar.md +1 -16
- package/dist/docs/components/banner.md +4 -37
- package/dist/docs/components/barCharts.md +20 -75
- package/dist/docs/components/barList.md +10 -78
- package/dist/docs/components/basicMap.md +1 -67
- package/dist/docs/components/bottomSheet.md +2 -28
- package/dist/docs/components/button.md +12 -65
- package/dist/docs/components/buttonToolbar.md +5 -19
- package/dist/docs/components/calendarStripe.md +50 -100
- package/dist/docs/components/card.md +1 -9
- package/dist/docs/components/carousel.md +1 -14
- package/dist/docs/components/chartColors.md +1 -156
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +2 -81
- package/dist/docs/components/checkbox.md +11 -72
- package/dist/docs/components/circularProgress.md +8 -49
- package/dist/docs/components/clearableInput.md +3 -62
- package/dist/docs/components/collapse.md +2 -15
- package/dist/docs/components/composedCharts.md +16 -26
- package/dist/docs/components/contentLoader.md +7 -25
- package/dist/docs/components/dataTabs.md +16 -104
- package/dist/docs/components/datepickers.md +710 -962
- package/dist/docs/components/dialogs.md +5 -67
- package/dist/docs/components/divider.md +1 -33
- package/dist/docs/components/dropdowns.md +3424 -5567
- package/dist/docs/components/editableContent.md +4 -82
- package/dist/docs/components/expander.md +15 -88
- package/dist/docs/components/fade.md +4 -61
- package/dist/docs/components/fadeExpander.md +1 -7
- package/dist/docs/components/fadeUp.md +2 -76
- package/dist/docs/components/feedback.md +9 -68
- package/dist/docs/components/filePickers.md +4 -18
- package/dist/docs/components/formLabel.md +7 -27
- package/dist/docs/components/groupedItemList.md +2 -158
- package/dist/docs/components/iconList.md +7 -64
- package/dist/docs/components/imagePreloader.md +1 -9
- package/dist/docs/components/labeledElement.md +3 -18
- package/dist/docs/components/licensePlate.md +1 -43
- package/dist/docs/components/lineCharts.md +8 -39
- package/dist/docs/components/listMenu.md +2 -34
- package/dist/docs/components/loadMore.md +5 -24
- package/dist/docs/components/mainNavigation.md +1 -9
- package/dist/docs/components/mapCircle.md +1 -23
- package/dist/docs/components/mapCluster.md +2 -54
- package/dist/docs/components/mapContext.md +1 -23
- package/dist/docs/components/mapDraggableMarker.md +2 -28
- package/dist/docs/components/mapGettingStarted.md +2 -2
- package/dist/docs/components/mapInfoBubble.md +1 -27
- package/dist/docs/components/mapLayerGroup.md +1 -23
- package/dist/docs/components/mapMarker.md +1 -99
- package/dist/docs/components/mapPolygon.md +2 -116
- package/dist/docs/components/mapRoute.md +6 -1465
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +11 -128
- package/dist/docs/components/mapUtils.md +10 -113
- package/dist/docs/components/multiselects.md +14 -163
- package/dist/docs/components/noData.md +8 -22
- package/dist/docs/components/notifications.md +3 -19
- package/dist/docs/components/numbercontrol.md +3 -47
- package/dist/docs/components/onboarding.md +3 -15
- package/dist/docs/components/page.md +1 -33
- package/dist/docs/components/pager.md +1 -17
- package/dist/docs/components/pieCharts.md +40 -71
- package/dist/docs/components/popover.md +1 -12
- package/dist/docs/components/position.md +2 -6
- package/dist/docs/components/radialBarCharts.md +32 -116
- package/dist/docs/components/radioCardGroup.md +6 -48
- package/dist/docs/components/radiobutton.md +6 -75
- package/dist/docs/components/releaseNotes.md +3 -21
- package/dist/docs/components/resizer.md +1 -7
- package/dist/docs/components/responsiveColumnStripe.md +9 -49
- package/dist/docs/components/responsiveVideo.md +1 -7
- package/dist/docs/components/rioglyph.md +1 -17
- package/dist/docs/components/rules.md +7 -70
- package/dist/docs/components/saveableInput.md +267 -401
- package/dist/docs/components/selects.md +27 -1164
- package/dist/docs/components/sidebar.md +6 -17
- package/dist/docs/components/sliders.md +1 -27
- package/dist/docs/components/smoothScrollbars.md +1 -73
- package/dist/docs/components/spinners.md +6 -51
- package/dist/docs/components/states.md +6 -92
- package/dist/docs/components/statsWidgets.md +1 -76
- package/dist/docs/components/statusBar.md +1 -57
- package/dist/docs/components/stepButton.md +2 -7
- package/dist/docs/components/steppedProgressBars.md +5 -62
- package/dist/docs/components/subNavigation.md +1 -31
- package/dist/docs/components/supportMarker.md +2 -14
- package/dist/docs/components/svgImage.md +1 -5
- package/dist/docs/components/switch.md +2 -33
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +1 -41
- package/dist/docs/components/tags.md +1 -138
- package/dist/docs/components/teaser.md +2 -122
- package/dist/docs/components/textTruncateMiddle.md +2 -9
- package/dist/docs/components/timeline.md +1 -99
- package/dist/docs/components/timepicker.md +4 -79
- package/dist/docs/components/toggleButton.md +2 -15
- package/dist/docs/components/tooltip.md +9 -30
- package/dist/docs/components/tracker.md +2 -19
- package/dist/docs/components/virtualList.md +61 -130
- package/dist/docs/foundations.md +749 -4069
- package/dist/docs/start/changelog.md +5 -1
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +149 -483
- package/dist/docs/start/guidelines/custom-css.md +1 -1
- package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
- package/dist/docs/start/guidelines/formatting.md +1 -1
- package/dist/docs/start/guidelines/iframe.md +4 -16
- package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
- package/dist/docs/start/guidelines/print-css.md +1 -1
- package/dist/docs/start/guidelines/spinner.md +13 -67
- package/dist/docs/start/guidelines/state-in-url.md +1 -1
- package/dist/docs/start/guidelines/supported-browsers.md +1 -1
- package/dist/docs/start/guidelines/writing.md +1 -1
- package/dist/docs/start/howto.md +11 -11
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/utilities/classNames.md +3 -18
- package/dist/docs/utilities/deviceUtils.md +7 -13
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +2 -12
- package/dist/docs/utilities/routeUtils.md +25 -343
- package/dist/docs/utilities/useAfterMount.md +1 -6
- package/dist/docs/utilities/useAutoAnimate.md +2 -15
- package/dist/docs/utilities/useAverage.md +1 -6
- package/dist/docs/utilities/useClickOutside.md +1 -5
- package/dist/docs/utilities/useClipboard.md +2 -6
- package/dist/docs/utilities/useCookies.md +2 -10
- package/dist/docs/utilities/useCount.md +7 -16
- package/dist/docs/utilities/useDarkMode.md +2 -6
- package/dist/docs/utilities/useDebugInfo.md +6 -20
- package/dist/docs/utilities/useEffectOnce.md +1 -6
- package/dist/docs/utilities/useElapsedTime.md +2 -6
- package/dist/docs/utilities/useElementSize.md +1 -7
- package/dist/docs/utilities/useEsc.md +1 -5
- package/dist/docs/utilities/useEvent.md +1 -5
- package/dist/docs/utilities/useFocusTrap.md +1 -5
- package/dist/docs/utilities/useFullscreen.md +2 -15
- package/dist/docs/utilities/useHover.md +1 -5
- package/dist/docs/utilities/useIncomingPostMessages.md +2 -18
- package/dist/docs/utilities/useInterval.md +2 -8
- package/dist/docs/utilities/useIsFocusWithin.md +1 -10
- package/dist/docs/utilities/useKey.md +1 -15
- package/dist/docs/utilities/useLocalStorage.md +2 -11
- package/dist/docs/utilities/useLocationSuggestions.md +1 -5
- package/dist/docs/utilities/useMax.md +1 -5
- package/dist/docs/utilities/useMin.md +1 -5
- package/dist/docs/utilities/useMutationObserver.md +3 -11
- package/dist/docs/utilities/useOnScreen.md +1 -8
- package/dist/docs/utilities/useOnlineStatus.md +1 -5
- package/dist/docs/utilities/usePostMessage.md +3 -9
- package/dist/docs/utilities/usePostMessageSender.md +3 -13
- package/dist/docs/utilities/usePrevious.md +1 -5
- package/dist/docs/utilities/useResizeObserver.md +3 -11
- package/dist/docs/utilities/useRioCookieConsent.md +1 -5
- package/dist/docs/utilities/useScrollPosition.md +3 -59
- package/dist/docs/utilities/useSearch.md +2 -16
- package/dist/docs/utilities/useSearchHighlight.md +13 -78
- package/dist/docs/utilities/useSorting.md +18 -43
- package/dist/docs/utilities/useStateWithValidation.md +1 -5
- package/dist/docs/utilities/useSum.md +1 -9
- package/dist/docs/utilities/useTableExport.md +42 -59
- package/dist/docs/utilities/useTableSelection.md +74 -119
- package/dist/docs/utilities/useTimeout.md +2 -6
- package/dist/docs/utilities/useToggle.md +4 -14
- package/dist/docs/utilities/useUrlState.md +2 -27
- package/dist/docs/utilities/useWindowResize.md +1 -5
- package/dist/index.mjs +46 -16
- package/dist/version.json +2 -2
- package/package.json +15 -9
- package/dist/docs/templates/common-table.md +0 -1112
- package/dist/docs/templates/detail-views.md +0 -942
- package/dist/docs/templates/expandable-details.md +0 -228
- package/dist/docs/templates/feature-cards.md +0 -549
- package/dist/docs/templates/form-summary.md +0 -199
- package/dist/docs/templates/form-toggle.md +0 -367
- package/dist/docs/templates/list-blocks.md +0 -1021
- package/dist/docs/templates/loading-progress.md +0 -109
- package/dist/docs/templates/options-panel.md +0 -152
- package/dist/docs/templates/panel-variants.md +0 -164
- package/dist/docs/templates/progress-cards.md +0 -607
- package/dist/docs/templates/progress-success.md +0 -142
- package/dist/docs/templates/settings-form.md +0 -434
- package/dist/docs/templates/stats-blocks.md +0 -1381
- package/dist/docs/templates/table-panel.md +0 -184
- package/dist/docs/templates/table-row-animation.md +0 -317
- package/dist/docs/templates/usage-cards.md +0 -227
|
@@ -3,75 +3,23 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/mapSettings
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:18.281Z
|
|
7
7
|
|
|
8
8
|
## Map settings
|
|
9
9
|
|
|
10
10
|
### Example: Example 1
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
20 km
|
|
15
|
-
|
|
16
|
-
Choose view
|
|
17
|
-
Map view
|
|
18
|
-
Satellite
|
|
19
|
-
|
|
20
|
-
Traffic conditions
|
|
21
|
-
Show traffic incidents
|
|
22
|
-
|
|
23
|
-
Map TypeDayDay
|
|
24
|
-
Fleet style
|
|
25
|
-
Satellite
|
|
26
|
-
Terrain
|
|
27
|
-
Night
|
|
28
|
-
|
|
29
|
-
Map LayerPlease select...Incidents
|
|
30
|
-
Traffic
|
|
31
|
-
Road restrictions
|
|
32
|
-
|
|
33
|
-
LanguageEnglishEnglish
|
|
34
|
-
German
|
|
35
|
-
Polish
|
|
36
|
-
|
|
37
|
-
Zoom
|
|
38
|
-
|
|
39
|
-
Min zoom
|
|
40
|
-
|
|
41
|
-
Max zoom
|
|
42
|
-
|
|
43
|
-
Map centerReset position
|
|
44
|
-
|
|
45
|
-
ClusterShow cluster
|
|
46
|
-
RenderingWebGL vector tiles
|
|
47
|
-
Use device pixel ratio
|
|
48
|
-
|
|
49
|
-
Map centerN48° 30.000′ E12° 6.000′
|
|
50
|
-
|
|
51
|
-
#### Summary
|
|
52
|
-
|
|
53
|
-
Terms of use© 1987–2026 HERE
|
|
54
|
-
|
|
55
|
-
20 km
|
|
56
|
-
|
|
57
|
-
Choose view
|
|
58
|
-
Map view
|
|
59
|
-
Satellite
|
|
60
|
-
|
|
61
|
-
Traffic conditions
|
|
62
|
-
Show traffic incidents
|
|
63
|
-
|
|
64
|
-
Map TypeDayDay
|
|
12
|
+
Map Type Day Day
|
|
65
13
|
Fleet style
|
|
66
14
|
Satellite
|
|
67
15
|
Terrain
|
|
68
16
|
Night
|
|
69
17
|
|
|
70
|
-
Map
|
|
18
|
+
Map Layer Please select... Incidents
|
|
71
19
|
Traffic
|
|
72
20
|
Road restrictions
|
|
73
21
|
|
|
74
|
-
|
|
22
|
+
Language English English
|
|
75
23
|
German
|
|
76
24
|
Polish
|
|
77
25
|
|
|
@@ -81,13 +29,13 @@ Min zoom
|
|
|
81
29
|
|
|
82
30
|
Max zoom
|
|
83
31
|
|
|
84
|
-
Map
|
|
32
|
+
Map center Reset position
|
|
85
33
|
|
|
86
|
-
|
|
87
|
-
|
|
34
|
+
Cluster Show cluster
|
|
35
|
+
Rendering WebGL vector tiles
|
|
88
36
|
Use device pixel ratio
|
|
89
37
|
|
|
90
|
-
Map
|
|
38
|
+
Map center N48° 30.000′ E12° 6.000′
|
|
91
39
|
|
|
92
40
|
#### React (tsx)
|
|
93
41
|
|
|
@@ -797,74 +745,9 @@ export default FullSettingsExample;
|
|
|
797
745
|
|
|
798
746
|
No settings
|
|
799
747
|
|
|
800
|
-
Terms of use© 1987–2026 HERE
|
|
801
|
-
|
|
802
|
-
10 km
|
|
803
|
-
|
|
804
|
-
Choose view
|
|
805
|
-
Map view
|
|
806
|
-
Satellite
|
|
807
|
-
|
|
808
|
-
Traffic conditions
|
|
809
|
-
Show traffic incidents
|
|
810
|
-
|
|
811
|
-
Without cluster settings
|
|
812
|
-
|
|
813
|
-
Terms of use© 1987–2026 HERE
|
|
814
|
-
|
|
815
|
-
10 km
|
|
816
|
-
|
|
817
|
-
Choose view
|
|
818
|
-
Map view
|
|
819
|
-
Satellite
|
|
820
|
-
Terrain
|
|
821
|
-
|
|
822
|
-
Show traffic incidents
|
|
823
|
-
|
|
824
|
-
Without cluster and custom map layer settings
|
|
825
|
-
|
|
826
|
-
Terms of use© 1987–2026 HERE
|
|
827
|
-
|
|
828
|
-
10 km
|
|
829
|
-
|
|
830
|
-
Choose view
|
|
831
|
-
Map view
|
|
832
|
-
Satellite
|
|
833
|
-
Terrain
|
|
834
|
-
|
|
835
|
-
Show traffic incidents
|
|
836
|
-
|
|
837
|
-
Static map without interaction
|
|
838
|
-
|
|
839
|
-
Terms of use© 1987–2026 HERE
|
|
840
|
-
|
|
841
|
-
10 km
|
|
842
|
-
|
|
843
|
-
Choose view
|
|
844
|
-
Map view
|
|
845
|
-
Satellite
|
|
846
|
-
Terrain
|
|
847
|
-
|
|
848
|
-
Show traffic incidents
|
|
849
|
-
|
|
850
|
-
#### Summary
|
|
851
|
-
|
|
852
|
-
No settings
|
|
853
|
-
|
|
854
|
-
Terms of use© 1987–2026 HERE
|
|
855
|
-
|
|
856
|
-
10 km
|
|
857
|
-
|
|
858
|
-
Choose view
|
|
859
|
-
Map view
|
|
860
|
-
Satellite
|
|
861
|
-
|
|
862
|
-
Traffic conditions
|
|
863
|
-
Show traffic incidents
|
|
864
|
-
|
|
865
748
|
Without cluster settings
|
|
866
749
|
|
|
867
|
-
Terms of use© 1987–2026 HERE
|
|
750
|
+
Terms of use © 1987–2026 HERE
|
|
868
751
|
|
|
869
752
|
10 km
|
|
870
753
|
|
|
@@ -877,7 +760,7 @@ Show traffic incidents
|
|
|
877
760
|
|
|
878
761
|
Without cluster and custom map layer settings
|
|
879
762
|
|
|
880
|
-
Terms of use© 1987–2026 HERE
|
|
763
|
+
Terms of use © 1987–2026 HERE
|
|
881
764
|
|
|
882
765
|
10 km
|
|
883
766
|
|
|
@@ -890,7 +773,7 @@ Show traffic incidents
|
|
|
890
773
|
|
|
891
774
|
Static map without interaction
|
|
892
775
|
|
|
893
|
-
Terms of use© 1987–2026 HERE
|
|
776
|
+
Terms of use © 1987–2026 HERE
|
|
894
777
|
|
|
895
778
|
10 km
|
|
896
779
|
|
|
@@ -3,128 +3,25 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/mapUtils
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:21.359Z
|
|
7
7
|
|
|
8
8
|
## Map utils
|
|
9
9
|
|
|
10
10
|
### Example: Example 1
|
|
11
11
|
|
|
12
|
-
import { useRef, useState } from 'react';
|
|
13
|
-
|
|
12
|
+
import { useRef , useState } from 'react' ; import { isEqual } from 'es-toolkit/compat' ; import Map from '@rio-cloud/rio-uikit/Map' ; import EventUtils from '@rio-cloud/rio-uikit/EventUtils' ; import type { MapApi , MapEvent , Position } from '@rio-cloud/rio-uikit/mapTypes' ; import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials' ; export default ( ) => { const [ zoom , setZoom ] = useState ( 10 ) ; const [ center , setCenter ] = useState < Position > ( { lat : 48.5 , lng : 12.1 } );
|
|
13
|
+
const mapApiRef = useRef < MapApi > ();
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
|
|
17
|
-
import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
|
|
18
|
-
import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
|
|
15
|
+
const eventListenerMap = { [ EventUtils . MAP_VIEW_CHANGE_END ] : ( event : MapEvent ) => { // Access the Map ViewModel to retrieve its' LookAtData // The View model contains all relevant map data like zoom, position or bounding box. // Note: Working with the ViewModel directly requires to round zoom values or to exclude // other props from position object. Better, use map utils instead. const target = event . currentTarget as H . Map ; const lookAtData = target . getViewModel ( ) . getLookAtData ( ) ;
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
const [zoom, setZoom] = useState(10);
|
|
22
|
-
const [center, setCenter] = useState<Position>({ lat: 48.5, lng: 12.1 });
|
|
23
|
-
const mapApiRef = useRef<MapApi>();
|
|
17
|
+
console . log ( { lookAtData } ) ; // Accessing map utils to retrieve map position, zoom and bounding box. // This way, you don't have to deal with here map internals or round zoom values etc. const api = mapApiRef . current ; const mapCenter = api ?. utils ?. getCenter ( ) ; const mapZoom = api ?. utils ?. getZoom ( ) ; const mapBoundingBox = api ?. utils ?. getBounds ( ) ;
|
|
24
18
|
|
|
25
|
-
const
|
|
26
|
-
[EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
|
|
27
|
-
// Access the Map ViewModel to retrieve its' LookAtData
|
|
28
|
-
// The View model contains all relevant map data like zoom, position or bounding box.
|
|
29
|
-
// Note: Working with the ViewModel directly requires to round zoom values or to exclude
|
|
30
|
-
// other props from position object. Better, use map utils instead.
|
|
31
|
-
const target = event.currentTarget as H.Map;
|
|
32
|
-
const lookAtData = target.getViewModel().getLookAtData();
|
|
33
|
-
|
|
34
|
-
console.log({ lookAtData });
|
|
35
|
-
|
|
36
|
-
// Accessing map utils to retrieve map position, zoom and bounding box.
|
|
37
|
-
// This way, you don't have to deal with here map internals or round zoom values etc.
|
|
38
|
-
const api = mapApiRef.current;
|
|
39
|
-
const mapCenter = api?.utils?.getCenter();
|
|
40
|
-
const mapZoom = api?.utils?.getZoom();
|
|
41
|
-
const mapBoundingBox = api?.utils?.getBounds();
|
|
42
|
-
|
|
43
|
-
console.log({ mapCenter, mapZoom, mapBoundingBox });
|
|
44
|
-
|
|
45
|
-
// Check for changed values to update local state or to perform other actions
|
|
46
|
-
const isEqualZoom = isEqual(zoom, mapZoom);
|
|
47
|
-
const isEqualPosition = isEqual(center.lat, mapCenter?.lat) && isEqual(center.lng, mapCenter?.lng);
|
|
48
|
-
|
|
49
|
-
if (!(isEqualPosition && isEqualZoom)) {
|
|
50
|
-
// ... perform some actions
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
return (
|
|
56
|
-
<Map
|
|
57
|
-
eventListenerMap={eventListenerMap}
|
|
58
|
-
credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
|
|
59
|
-
// ... other map properties
|
|
60
|
-
>
|
|
61
|
-
{api => {
|
|
62
|
-
mapApiRef.current = api;
|
|
63
|
-
|
|
64
|
-
// if needed, render cluster or marker layer here or return null
|
|
65
|
-
return null;
|
|
66
|
-
}}
|
|
67
|
-
</Map>
|
|
68
|
-
);
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
#### Summary
|
|
72
|
-
|
|
73
|
-
import { useRef, useState } from 'react';
|
|
74
|
-
import { isEqual } from 'es-toolkit/compat';
|
|
75
|
-
|
|
76
|
-
import Map from '@rio-cloud/rio-uikit/Map';
|
|
77
|
-
import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
|
|
78
|
-
import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
|
|
79
|
-
import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
|
|
80
|
-
|
|
81
|
-
export default () => {
|
|
82
|
-
const [zoom, setZoom] = useState(10);
|
|
83
|
-
const [center, setCenter] = useState<Position>({ lat: 48.5, lng: 12.1 });
|
|
84
|
-
const mapApiRef = useRef<MapApi>();
|
|
85
|
-
|
|
86
|
-
const eventListenerMap = {
|
|
87
|
-
[EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
|
|
88
|
-
// Access the Map ViewModel to retrieve its' LookAtData
|
|
89
|
-
// The View model contains all relevant map data like zoom, position or bounding box.
|
|
90
|
-
// Note: Working with the ViewModel directly requires to round zoom values or to exclude
|
|
91
|
-
// other props from position object. Better, use map utils instead.
|
|
92
|
-
const target = event.currentTarget as H.Map;
|
|
93
|
-
const lookAtData = target.getViewModel().getLookAtData();
|
|
94
|
-
|
|
95
|
-
console.log({ lookAtData });
|
|
96
|
-
|
|
97
|
-
// Accessing map utils to retrieve map position, zoom and bounding box.
|
|
98
|
-
// This way, you don't have to deal with here map internals or round zoom values etc.
|
|
99
|
-
const api = mapApiRef.current;
|
|
100
|
-
const mapCenter = api?.utils?.getCenter();
|
|
101
|
-
const mapZoom = api?.utils?.getZoom();
|
|
102
|
-
const mapBoundingBox = api?.utils?.getBounds();
|
|
103
|
-
|
|
104
|
-
console.log({ mapCenter, mapZoom, mapBoundingBox });
|
|
105
|
-
|
|
106
|
-
// Check for changed values to update local state or to perform other actions
|
|
107
|
-
const isEqualZoom = isEqual(zoom, mapZoom);
|
|
108
|
-
const isEqualPosition = isEqual(center.lat, mapCenter?.lat) && isEqual(center.lng, mapCenter?.lng);
|
|
109
|
-
|
|
110
|
-
if (!(isEqualPosition && isEqualZoom)) {
|
|
111
|
-
// ... perform some actions
|
|
112
|
-
}
|
|
113
|
-
},
|
|
114
|
-
};
|
|
19
|
+
console . log ( { mapCenter , mapZoom , mapBoundingBox } ) ; // Check for changed values to update local state or to perform other actions const isEqualZoom = isEqual ( zoom , mapZoom ) ; const isEqualPosition = isEqual ( center . lat , mapCenter ?. lat ) && isEqual ( center . lng , mapCenter ?. lng ) ; if ( ! ( isEqualPosition && isEqualZoom ) ) { // ... perform some actions } } , } ;
|
|
115
20
|
|
|
116
21
|
return (
|
|
117
|
-
<Map
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
>
|
|
122
|
-
{api => {
|
|
123
|
-
mapApiRef.current = api;
|
|
124
|
-
|
|
125
|
-
// if needed, render cluster or marker layer here or return null
|
|
126
|
-
return null;
|
|
127
|
-
}}
|
|
128
|
-
</Map>
|
|
22
|
+
< Map eventListenerMap = { eventListenerMap } credentials = { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } // ... other map properties >
|
|
23
|
+
{ api => {
|
|
24
|
+
mapApiRef . current = api ; // if needed, render cluster or marker layer here or return null return null ; } }
|
|
25
|
+
</ Map >
|
|
129
26
|
);
|
|
130
27
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Selection
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/multiselects
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:28.134Z
|
|
7
7
|
|
|
8
8
|
The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.
|
|
9
9
|
|
|
@@ -19,7 +19,7 @@ This component supports items with icons and labels.
|
|
|
19
19
|
|
|
20
20
|
### Example: Example 1
|
|
21
21
|
|
|
22
|
-
Default
|
|
22
|
+
Default Multiselect Option 1 Option 4 Option 1
|
|
23
23
|
Option 2
|
|
24
24
|
Option 3
|
|
25
25
|
Option 4
|
|
@@ -27,9 +27,7 @@ Option 5
|
|
|
27
27
|
Option 6
|
|
28
28
|
Group Header
|
|
29
29
|
Option 8
|
|
30
|
-
Option 9
|
|
31
|
-
|
|
32
|
-
DisabledOption 1Option 4Option 1
|
|
30
|
+
Option 9 Disabled Option 1 Option 4 Option 1
|
|
33
31
|
Option 2
|
|
34
32
|
Option 3
|
|
35
33
|
Option 4
|
|
@@ -39,7 +37,7 @@ Group Header
|
|
|
39
37
|
Option 8
|
|
40
38
|
Option 9
|
|
41
39
|
|
|
42
|
-
with external error
|
|
40
|
+
with external error feedback Option 1 Option 4 Option 1
|
|
43
41
|
Option 2
|
|
44
42
|
Option 3
|
|
45
43
|
Option 4
|
|
@@ -47,57 +45,10 @@ Option 5
|
|
|
47
45
|
Option 6
|
|
48
46
|
Group Header
|
|
49
47
|
Option 8
|
|
50
|
-
Option 9
|
|
48
|
+
Option 9 This is an error message
|
|
51
49
|
|
|
52
|
-
This is an error message
|
|
53
50
|
with built-in error feedback
|
|
54
|
-
Option
|
|
55
|
-
|
|
56
|
-
Option 1
|
|
57
|
-
Option 2
|
|
58
|
-
Option 3
|
|
59
|
-
Option 4
|
|
60
|
-
Option 5
|
|
61
|
-
Option 6
|
|
62
|
-
Group Header
|
|
63
|
-
Option 8
|
|
64
|
-
Option 9
|
|
65
|
-
|
|
66
|
-
#### Summary
|
|
67
|
-
|
|
68
|
-
Default MultiselectOption 1Option 4Option 1
|
|
69
|
-
Option 2
|
|
70
|
-
Option 3
|
|
71
|
-
Option 4
|
|
72
|
-
Option 5
|
|
73
|
-
Option 6
|
|
74
|
-
Group Header
|
|
75
|
-
Option 8
|
|
76
|
-
Option 9
|
|
77
|
-
|
|
78
|
-
DisabledOption 1Option 4Option 1
|
|
79
|
-
Option 2
|
|
80
|
-
Option 3
|
|
81
|
-
Option 4
|
|
82
|
-
Option 5
|
|
83
|
-
Option 6
|
|
84
|
-
Group Header
|
|
85
|
-
Option 8
|
|
86
|
-
Option 9
|
|
87
|
-
|
|
88
|
-
with external error feedbackOption 1Option 4Option 1
|
|
89
|
-
Option 2
|
|
90
|
-
Option 3
|
|
91
|
-
Option 4
|
|
92
|
-
Option 5
|
|
93
|
-
Option 6
|
|
94
|
-
Group Header
|
|
95
|
-
Option 8
|
|
96
|
-
Option 9
|
|
97
|
-
|
|
98
|
-
This is an error message
|
|
99
|
-
with built-in error feedback
|
|
100
|
-
Option 1Option 4This is an error message
|
|
51
|
+
Option 1 Option 4 This is an error message
|
|
101
52
|
|
|
102
53
|
Option 1
|
|
103
54
|
Option 2
|
|
@@ -568,15 +519,6 @@ Truck
|
|
|
568
519
|
Van
|
|
569
520
|
Bus
|
|
570
521
|
|
|
571
|
-
#### Summary
|
|
572
|
-
|
|
573
|
-
With label component
|
|
574
|
-
Please select vehicles
|
|
575
|
-
|
|
576
|
-
Truck
|
|
577
|
-
Van
|
|
578
|
-
Bus
|
|
579
|
-
|
|
580
522
|
#### React (tsx)
|
|
581
523
|
|
|
582
524
|
```tsx
|
|
@@ -737,23 +679,7 @@ export default () => (
|
|
|
737
679
|
### Example: Example 3
|
|
738
680
|
|
|
739
681
|
Multiline with wrapping items
|
|
740
|
-
Option
|
|
741
|
-
|
|
742
|
-
Option 1
|
|
743
|
-
Option 2
|
|
744
|
-
Option 3
|
|
745
|
-
Option 4
|
|
746
|
-
Option 5
|
|
747
|
-
Option 6
|
|
748
|
-
Group Header
|
|
749
|
-
Option 8
|
|
750
|
-
Option 9
|
|
751
|
-
Option 10
|
|
752
|
-
|
|
753
|
-
#### Summary
|
|
754
|
-
|
|
755
|
-
Multiline with wrapping items
|
|
756
|
-
Option 1Option 2Option 3Option 4Option 5Option 6Option 8
|
|
682
|
+
Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 8
|
|
757
683
|
|
|
758
684
|
Option 1
|
|
759
685
|
Option 2
|
|
@@ -977,21 +903,9 @@ export default () => (
|
|
|
977
903
|
|
|
978
904
|
### Example: Example 4
|
|
979
905
|
|
|
980
|
-
With selected item
|
|
906
|
+
With selected item counter Please select Option 1
|
|
981
907
|
Option 2
|
|
982
|
-
Option 3
|
|
983
|
-
|
|
984
|
-
With selected item counter render function - Note: "counterMessage" should be favoredPlease selectOption 1
|
|
985
|
-
Option 2
|
|
986
|
-
Option 3
|
|
987
|
-
|
|
988
|
-
#### Summary
|
|
989
|
-
|
|
990
|
-
With selected item counterPlease selectOption 1
|
|
991
|
-
Option 2
|
|
992
|
-
Option 3
|
|
993
|
-
|
|
994
|
-
With selected item counter render function - Note: "counterMessage" should be favoredPlease selectOption 1
|
|
908
|
+
Option 3 With selected item counter render function - Note: "counterMessage" should be favored Please select Option 1
|
|
995
909
|
Option 2
|
|
996
910
|
Option 3
|
|
997
911
|
|
|
@@ -1140,7 +1054,7 @@ export default () => (
|
|
|
1140
1054
|
|
|
1141
1055
|
### Example: Example 5
|
|
1142
1056
|
|
|
1143
|
-
Inline:Please select
|
|
1057
|
+
Inline: Please select vehicles Option 1
|
|
1144
1058
|
Option 2
|
|
1145
1059
|
Option 3
|
|
1146
1060
|
Option 4
|
|
@@ -1151,7 +1065,7 @@ Option 8
|
|
|
1151
1065
|
Option 9
|
|
1152
1066
|
Option 10
|
|
1153
1067
|
|
|
1154
|
-
Please select
|
|
1068
|
+
Please select vehicles Option 1
|
|
1155
1069
|
Option 2
|
|
1156
1070
|
Option 3
|
|
1157
1071
|
Option 4
|
|
@@ -1173,53 +1087,7 @@ Option 8
|
|
|
1173
1087
|
Option 9
|
|
1174
1088
|
Option 10
|
|
1175
1089
|
|
|
1176
|
-
Full width:Option 1
|
|
1177
|
-
Option 2
|
|
1178
|
-
Option 3
|
|
1179
|
-
Option 4
|
|
1180
|
-
Option 5
|
|
1181
|
-
Option 6
|
|
1182
|
-
Option 7
|
|
1183
|
-
Option 8
|
|
1184
|
-
Option 9
|
|
1185
|
-
Option 10
|
|
1186
|
-
|
|
1187
|
-
#### Summary
|
|
1188
|
-
|
|
1189
|
-
Inline:Please select vehiclesOption 1
|
|
1190
|
-
Option 2
|
|
1191
|
-
Option 3
|
|
1192
|
-
Option 4
|
|
1193
|
-
Option 5
|
|
1194
|
-
Option 6
|
|
1195
|
-
Option 7
|
|
1196
|
-
Option 8
|
|
1197
|
-
Option 9
|
|
1198
|
-
Option 10
|
|
1199
|
-
|
|
1200
|
-
Please select vehiclesOption 1
|
|
1201
|
-
Option 2
|
|
1202
|
-
Option 3
|
|
1203
|
-
Option 4
|
|
1204
|
-
Option 5
|
|
1205
|
-
Option 6
|
|
1206
|
-
Option 7
|
|
1207
|
-
Option 8
|
|
1208
|
-
Option 9
|
|
1209
|
-
Option 10
|
|
1210
|
-
|
|
1211
|
-
Option 1
|
|
1212
|
-
Option 2
|
|
1213
|
-
Option 3
|
|
1214
|
-
Option 4
|
|
1215
|
-
Option 5
|
|
1216
|
-
Option 6
|
|
1217
|
-
Option 7
|
|
1218
|
-
Option 8
|
|
1219
|
-
Option 9
|
|
1220
|
-
Option 10
|
|
1221
|
-
|
|
1222
|
-
Full width:Option 1
|
|
1090
|
+
Full width: Option 1
|
|
1223
1091
|
Option 2
|
|
1224
1092
|
Option 3
|
|
1225
1093
|
Option 4
|
|
@@ -1632,29 +1500,12 @@ export default () => (
|
|
|
1632
1500
|
|
|
1633
1501
|
### Example: Example 6
|
|
1634
1502
|
|
|
1635
|
-
Please
|
|
1636
|
-
Option 2
|
|
1637
|
-
Option 3
|
|
1638
|
-
Option 4
|
|
1639
|
-
|
|
1640
|
-
Please selectOption 1
|
|
1641
|
-
Option 2
|
|
1642
|
-
Option 3
|
|
1643
|
-
Option 4
|
|
1644
|
-
|
|
1645
|
-
Option 1
|
|
1646
|
-
Option 2
|
|
1647
|
-
Option 3
|
|
1648
|
-
Option 4
|
|
1649
|
-
|
|
1650
|
-
#### Summary
|
|
1651
|
-
|
|
1652
|
-
Please selectOption 1
|
|
1503
|
+
Please select Option 1
|
|
1653
1504
|
Option 2
|
|
1654
1505
|
Option 3
|
|
1655
1506
|
Option 4
|
|
1656
1507
|
|
|
1657
|
-
Please
|
|
1508
|
+
Please select Option 1
|
|
1658
1509
|
Option 2
|
|
1659
1510
|
Option 3
|
|
1660
1511
|
Option 4
|
|
@@ -3,23 +3,16 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/noData
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:45.853Z
|
|
7
7
|
|
|
8
8
|
## NoData
|
|
9
9
|
|
|
10
10
|
### Example: Example 1
|
|
11
11
|
|
|
12
|
-
Simple NoData
|
|
13
|
-
Simple NoData element with lager
|
|
14
|
-
NoData with
|
|
15
|
-
NoData with tooltip
|
|
16
|
-
|
|
17
|
-
#### Summary
|
|
18
|
-
|
|
19
|
-
Simple NoData elementNo data
|
|
20
|
-
Simple NoData element with lager textNo data
|
|
21
|
-
NoData with tooltipNo data
|
|
22
|
-
NoData with tooltip rightNo data
|
|
12
|
+
Simple NoData element No data
|
|
13
|
+
Simple NoData element with lager text No data
|
|
14
|
+
NoData with tooltip No data
|
|
15
|
+
NoData with tooltip right No data
|
|
23
16
|
|
|
24
17
|
#### React (tsx)
|
|
25
18
|
|
|
@@ -95,17 +88,10 @@ export default () => (
|
|
|
95
88
|
|
|
96
89
|
### Example: Example 2
|
|
97
90
|
|
|
98
|
-
NoData in
|
|
99
|
-
|
|
100
|
-
LoremNo dataNo data
|
|
101
|
-
IpsumNo dataNo data
|
|
102
|
-
|
|
103
|
-
#### Summary
|
|
104
|
-
|
|
105
|
-
NoData in tablesColumn 1Column 2Column 3
|
|
91
|
+
NoData in tables Column 1 Column 2 Column 3
|
|
106
92
|
|
|
107
|
-
|
|
108
|
-
|
|
93
|
+
Lorem No data No data
|
|
94
|
+
Ipsum No data No data
|
|
109
95
|
|
|
110
96
|
#### React (tsx)
|
|
111
97
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/notifications
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:01.595Z
|
|
7
7
|
|
|
8
8
|
Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.
|
|
9
9
|
|
|
@@ -17,22 +17,10 @@ Please check out the notifications guidelines here.
|
|
|
17
17
|
|
|
18
18
|
Notifications
|
|
19
19
|
Default notification
|
|
20
|
-
Info
|
|
20
|
+
Info notification Success notification Warning notification Error notification
|
|
21
21
|
|
|
22
22
|
Notifications with options
|
|
23
|
-
|
|
24
|
-
Note
|
|
25
|
-
|
|
26
|
-
Use notifications with a progress bar only when the user should interact with the notification for example when adding a link or a button.
|
|
27
|
-
|
|
28
|
-
#### Summary
|
|
29
|
-
|
|
30
|
-
Notifications
|
|
31
|
-
Default notification
|
|
32
|
-
Info notificationSuccess notificationWarning notificationError notification
|
|
33
|
-
|
|
34
|
-
Notifications with options
|
|
35
|
-
InfoSuccessWarningError
|
|
23
|
+
Info Success Warning Error
|
|
36
24
|
Note
|
|
37
25
|
|
|
38
26
|
Use notifications with a progress bar only when the user should interact with the notification for example when adding a link or a button.
|
|
@@ -230,10 +218,6 @@ export default () => (
|
|
|
230
218
|
|
|
231
219
|
Copy to clipboard notification example
|
|
232
220
|
|
|
233
|
-
#### Summary
|
|
234
|
-
|
|
235
|
-
Copy to clipboard notification example
|
|
236
|
-
|
|
237
221
|
#### React (tsx)
|
|
238
222
|
|
|
239
223
|
```tsx
|