playbook_ui 12.28.0.pre.alpha.PLAY837MapCustomButton868 → 12.28.0.pre.alpha.20230613implementbakesupport865

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.28.0"
-  VERSION = "12.28.0.pre.alpha.PLAY837MapCustomButton868"
+  VERSION = "12.28.0.pre.alpha.20230613implementbakesupport865"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.28.0.pre.alpha.PLAY837MapCustomButton868
+  version: 12.28.0.pre.alpha.20230613implementbakesupport865
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-07-04 00:00:00.000000000 Z
+date: 2023-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1402,13 +1402,9 @@ files:
 - app/pb_kits/playbook/pb_logistic/_logistic.jsx
 - app/pb_kits/playbook/pb_map/_map.scss
 - app/pb_kits/playbook/pb_map/_map.tsx
-- app/pb_kits/playbook/pb_map/_map_controls.tsx
-- app/pb_kits/playbook/pb_map/_map_custom_button.tsx
 - app/pb_kits/playbook/pb_map/_pb_map_button_mixin.scss
 - app/pb_kits/playbook/pb_map/docs/_map_default.jsx
 - app/pb_kits/playbook/pb_map/docs/_map_default.md
-- app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx
-- app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md
 - app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx
 - app/pb_kits/playbook/pb_map/docs/_map_with_plugin.md
 - app/pb_kits/playbook/pb_map/docs/example.yml

data/app/pb_kits/playbook/pb_map/_map_controls.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-import Button from "../pb_button/_button";
-import Icon from "../pb_icon/_icon";
-import Flex from "../pb_flex/_flex";
-
-type MapControlTypes = {
-  zoomBtns?: boolean, 
-  flyTo?: boolean, 
-  zoomInClick?: () => {},
-  zoomOutClick?: () => {},
-  flyToClick?: () => {},
-  children?: React.ReactNode | React.ReactNode[]
-}
-
-const MapControls = ({
-  zoomBtns,
-  zoomInClick,
-  zoomOutClick,
-  flyTo,
-  flyToClick,
-  children,
-}: MapControlTypes) => {
-  return (
-    <Flex className="custom-nav-control" orientation="column">
-      {zoomBtns ? (
-        <>
-          <div className="custom-nav-control-zoom">
-            <Button className="map-zoom-in-button" onClick={zoomInClick}>
-              <Icon icon="plus" />
-            </Button>
-            <Button className="map-zoom-out-button" onClick={zoomOutClick}>
-              <Icon icon="minus" />
-            </Button>
-          </div>
-          {flyTo ? (
-            <Button className="map-flyto-button" onClick={flyToClick}>
-              <Icon icon="eye" />
-            </Button>
-          ) : null}
-        </>
-      ) : null}
-      {children}
-    </Flex>
-  );
-};
-
-export default MapControls;

data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import Button from "../pb_button/_button";
-import Icon from "../pb_icon/_icon";
-
-type MapCustomButtonTypes = {
-  onClick?: () => {};
-  icon?: string;
-};
-
-const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
-  return (
-    <Button className="pb_map-custom-button" onClick={onClick}>
-      <Icon icon={icon} />
-    </Button>
-  );
-};
-
-export default MapCustomButton;

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -1,83 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme, MapCustomButton } from '../..'
-import maplibregl from 'maplibre-gl'
-
-const MapWithCustomButton = (props) => {
-
-  //set Map instance to access from outside useEffect
-  const [mapInstance, setMapInstance] = useState(null)
-  const mapContainerRef = useRef(null)
-
-  //Set default position
-  const defaultPosition = [-75.379143, 39.831200]
-
-  // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
-  const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
-  const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
-  const handleFlyTo = (map) => {map.flyTo({
-                                center: defaultPosition,
-                                ... mapTheme.flyToConfig
-                                });}
-
-  //This function is called by the useEffect when map instance first loads
-  const loadMap = ( { target: map }) => {
-        //set marker/pin
-        new maplibregl.Marker({
-          color: mapTheme.marker,
-        }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
-        .addTo(map);
-
-        // disable map zoom when using scroll
-        map.scrollZoom.disable();
-        
-        //add attributioncontrols
-        map.addControl(new maplibregl.AttributionControl({
-          compact: true
-          }));
-
-        //set map instance
-        setMapInstance(map)
-  }
-
-    useEffect(() => {
-         new maplibregl.Map({
-            container: mapContainerRef.current,
-            center: defaultPosition,
-            ...mapTheme.mapConfig
-        }).on('load', loadMap)
-
-    }, [])
-
-return ( 
-  <Map 
-      {...props}
-  >
-    <Map.Controls flyTo
-        flyToClick={()=> {handleFlyTo(mapInstance)}}
-        zoomBtns
-        zoomInClick={() => {handleZoomIn(mapInstance)}}
-        zoomOutClick={()=> {handleZoomOut(mapInstance)}}
-    >
-      <MapCustomButton icon="home" 
-          onClick={() => alert("button clicked!")}
-      />
-      <MapCustomButton icon="search" 
-          onClick={() => alert("button clicked!")}
-      />
-    </Map.Controls>
-       <div
-           ref={mapContainerRef}
-           style={{
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              top: 0, 
-              bottom: 0,
-           }}
-       />
-    </Map>
-)
-}
-
-export default MapWithCustomButton

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md

@@ -1 +0,0 @@
-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.