playbook_ui 12.28.0.pre.alpha.PLAY837MapCustomButton868 → 12.28.0.pre.alpha.PLAY863multilevelv2876
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/pb_map/_map.scss +1 -16
- data/app/pb_kits/playbook/pb_map/_map.tsx +26 -9
- data/app/pb_kits/playbook/pb_map/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_map/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +56 -27
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +10 -27
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +4 -0
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +1 -1
- metadata +2 -6
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +0 -47
- data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +0 -18
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +0 -83
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md +0 -1
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.28.0.pre.alpha.
|
4
|
+
version: 12.28.0.pre.alpha.PLAY863multilevelv2876
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-07-
|
12
|
+
date: 2023-07-05 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1402,13 +1402,9 @@ files:
|
|
1402
1402
|
- app/pb_kits/playbook/pb_logistic/_logistic.jsx
|
1403
1403
|
- app/pb_kits/playbook/pb_map/_map.scss
|
1404
1404
|
- app/pb_kits/playbook/pb_map/_map.tsx
|
1405
|
-
- app/pb_kits/playbook/pb_map/_map_controls.tsx
|
1406
|
-
- app/pb_kits/playbook/pb_map/_map_custom_button.tsx
|
1407
1405
|
- app/pb_kits/playbook/pb_map/_pb_map_button_mixin.scss
|
1408
1406
|
- app/pb_kits/playbook/pb_map/docs/_map_default.jsx
|
1409
1407
|
- app/pb_kits/playbook/pb_map/docs/_map_default.md
|
1410
|
-
- app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx
|
1411
|
-
- app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md
|
1412
1408
|
- app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx
|
1413
1409
|
- app/pb_kits/playbook/pb_map/docs/_map_with_plugin.md
|
1414
1410
|
- app/pb_kits/playbook/pb_map/docs/example.yml
|
@@ -1,47 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import Button from "../pb_button/_button";
|
3
|
-
import Icon from "../pb_icon/_icon";
|
4
|
-
import Flex from "../pb_flex/_flex";
|
5
|
-
|
6
|
-
type MapControlTypes = {
|
7
|
-
zoomBtns?: boolean,
|
8
|
-
flyTo?: boolean,
|
9
|
-
zoomInClick?: () => {},
|
10
|
-
zoomOutClick?: () => {},
|
11
|
-
flyToClick?: () => {},
|
12
|
-
children?: React.ReactNode | React.ReactNode[]
|
13
|
-
}
|
14
|
-
|
15
|
-
const MapControls = ({
|
16
|
-
zoomBtns,
|
17
|
-
zoomInClick,
|
18
|
-
zoomOutClick,
|
19
|
-
flyTo,
|
20
|
-
flyToClick,
|
21
|
-
children,
|
22
|
-
}: MapControlTypes) => {
|
23
|
-
return (
|
24
|
-
<Flex className="custom-nav-control" orientation="column">
|
25
|
-
{zoomBtns ? (
|
26
|
-
<>
|
27
|
-
<div className="custom-nav-control-zoom">
|
28
|
-
<Button className="map-zoom-in-button" onClick={zoomInClick}>
|
29
|
-
<Icon icon="plus" />
|
30
|
-
</Button>
|
31
|
-
<Button className="map-zoom-out-button" onClick={zoomOutClick}>
|
32
|
-
<Icon icon="minus" />
|
33
|
-
</Button>
|
34
|
-
</div>
|
35
|
-
{flyTo ? (
|
36
|
-
<Button className="map-flyto-button" onClick={flyToClick}>
|
37
|
-
<Icon icon="eye" />
|
38
|
-
</Button>
|
39
|
-
) : null}
|
40
|
-
</>
|
41
|
-
) : null}
|
42
|
-
{children}
|
43
|
-
</Flex>
|
44
|
-
);
|
45
|
-
};
|
46
|
-
|
47
|
-
export default MapControls;
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import Button from "../pb_button/_button";
|
3
|
-
import Icon from "../pb_icon/_icon";
|
4
|
-
|
5
|
-
type MapCustomButtonTypes = {
|
6
|
-
onClick?: () => {};
|
7
|
-
icon?: string;
|
8
|
-
};
|
9
|
-
|
10
|
-
const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
|
11
|
-
return (
|
12
|
-
<Button className="pb_map-custom-button" onClick={onClick}>
|
13
|
-
<Icon icon={icon} />
|
14
|
-
</Button>
|
15
|
-
);
|
16
|
-
};
|
17
|
-
|
18
|
-
export default MapCustomButton;
|
@@ -1,83 +0,0 @@
|
|
1
|
-
import React, { useRef, useEffect, useState } from 'react'
|
2
|
-
import { Map, mapTheme, MapCustomButton } from '../..'
|
3
|
-
import maplibregl from 'maplibre-gl'
|
4
|
-
|
5
|
-
const MapWithCustomButton = (props) => {
|
6
|
-
|
7
|
-
//set Map instance to access from outside useEffect
|
8
|
-
const [mapInstance, setMapInstance] = useState(null)
|
9
|
-
const mapContainerRef = useRef(null)
|
10
|
-
|
11
|
-
//Set default position
|
12
|
-
const defaultPosition = [-75.379143, 39.831200]
|
13
|
-
|
14
|
-
// linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
|
15
|
-
const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
|
16
|
-
const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
|
17
|
-
const handleFlyTo = (map) => {map.flyTo({
|
18
|
-
center: defaultPosition,
|
19
|
-
... mapTheme.flyToConfig
|
20
|
-
});}
|
21
|
-
|
22
|
-
//This function is called by the useEffect when map instance first loads
|
23
|
-
const loadMap = ( { target: map }) => {
|
24
|
-
//set marker/pin
|
25
|
-
new maplibregl.Marker({
|
26
|
-
color: mapTheme.marker,
|
27
|
-
}).setLngLat(defaultPosition)
|
28
|
-
.setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
|
29
|
-
.addTo(map);
|
30
|
-
|
31
|
-
// disable map zoom when using scroll
|
32
|
-
map.scrollZoom.disable();
|
33
|
-
|
34
|
-
//add attributioncontrols
|
35
|
-
map.addControl(new maplibregl.AttributionControl({
|
36
|
-
compact: true
|
37
|
-
}));
|
38
|
-
|
39
|
-
//set map instance
|
40
|
-
setMapInstance(map)
|
41
|
-
}
|
42
|
-
|
43
|
-
useEffect(() => {
|
44
|
-
new maplibregl.Map({
|
45
|
-
container: mapContainerRef.current,
|
46
|
-
center: defaultPosition,
|
47
|
-
...mapTheme.mapConfig
|
48
|
-
}).on('load', loadMap)
|
49
|
-
|
50
|
-
}, [])
|
51
|
-
|
52
|
-
return (
|
53
|
-
<Map
|
54
|
-
{...props}
|
55
|
-
>
|
56
|
-
<Map.Controls flyTo
|
57
|
-
flyToClick={()=> {handleFlyTo(mapInstance)}}
|
58
|
-
zoomBtns
|
59
|
-
zoomInClick={() => {handleZoomIn(mapInstance)}}
|
60
|
-
zoomOutClick={()=> {handleZoomOut(mapInstance)}}
|
61
|
-
>
|
62
|
-
<MapCustomButton icon="home"
|
63
|
-
onClick={() => alert("button clicked!")}
|
64
|
-
/>
|
65
|
-
<MapCustomButton icon="search"
|
66
|
-
onClick={() => alert("button clicked!")}
|
67
|
-
/>
|
68
|
-
</Map.Controls>
|
69
|
-
<div
|
70
|
-
ref={mapContainerRef}
|
71
|
-
style={{
|
72
|
-
position: 'absolute',
|
73
|
-
left: 0,
|
74
|
-
right: 0,
|
75
|
-
top: 0,
|
76
|
-
bottom: 0,
|
77
|
-
}}
|
78
|
-
/>
|
79
|
-
</Map>
|
80
|
-
)
|
81
|
-
}
|
82
|
-
|
83
|
-
export default MapWithCustomButton
|
@@ -1 +0,0 @@
|
|
1
|
-
If you want to add custom buttons to the Map, you can use the `MapCustomButton` component nested inside Map.Controls as shown in the code snippet below. Note that when Map.Controls is used in this way, the props for the rest of the buttons must also be passed to Map.Controls instead of the Map itself.
|