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.
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.28.0"
5
- VERSION = "12.28.0.pre.alpha.PLAY837MapCustomButton868"
5
+ VERSION = "12.28.0.pre.alpha.PLAY863multilevelv2876"
6
6
  end
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.PLAY837MapCustomButton868
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-04 00:00:00.000000000 Z
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.