-
Notifications
You must be signed in to change notification settings - Fork 799
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Mapkit support in the editor (#29252)
* Cherry-pick hook * Cherry-pick * WIP * Markers & info window * WIP useEffect dependency cleanup * - MapRef for resizing - Better zooming for multiple markers * Some cleanup * - Disable zoom control on map when we have more than 1 point * Sane defaults when adding a map * Remove TODO * Add changelog * Merge with location search * Make check for mapRef more compact * Rename createCalloutElement to createCalloutElementCallback * Update style code styling * Remove todo and add linebreak between import & function call * Code style fix * InfoWindow renaming * Remove commented out console.log * Mapkit doesn't have id's for places returned, so create one * Fix resizing doing bad things
- Loading branch information
1 parent
a3f104f
commit 8b79eab
Showing
19 changed files
with
592 additions
and
40 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/plugins/jetpack/changelog/add-map-block-mapkit-editor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: minor | ||
| Type: enhancement | ||
|
|
||
| Editor support for Mapkit in the Map block |
15 changes: 15 additions & 0 deletions
15
projects/plugins/jetpack/extensions/blocks/map/component/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { forwardRef } from '@wordpress/element'; | ||
| import { getMapProvider } from '../utils'; | ||
| import MapboxComponent from './mapbox'; | ||
| import MapkitComponent from './mapkit'; | ||
|
|
||
| const MapComponent = forwardRef( ( props, ref ) => { | ||
| const mapProvider = getMapProvider(); | ||
| if ( mapProvider === 'mapkit' && props.mapStyle !== 'terrain' ) { | ||
| const mapkitProps = { ...props, ref: null }; | ||
| return <MapkitComponent { ...mapkitProps } ref={ ref } />; | ||
| } | ||
| return <MapboxComponent { ...props } ref={ ref } />; | ||
| } ); | ||
|
|
||
| export default MapComponent; |
13 changes: 13 additions & 0 deletions
13
projects/plugins/jetpack/extensions/blocks/map/component/info-window/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { getMapProvider } from '../../utils'; | ||
| import MapboxInfoWindow from './mapbox'; | ||
| import MapkitInfoWindow from './mapkit'; | ||
|
|
||
| const InfoWindow = props => { | ||
| const mapProvider = getMapProvider(); | ||
| if ( mapProvider === 'mapkit' ) { | ||
| return <MapkitInfoWindow { ...props } />; | ||
| } | ||
| return <MapboxInfoWindow { ...props } />; | ||
| }; | ||
|
|
||
| export default InfoWindow; |
2 changes: 1 addition & 1 deletion
2
...xtensions/blocks/map/info-window/index.js → ...locks/map/component/info-window/mapbox.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 83 additions & 0 deletions
83
projects/plugins/jetpack/extensions/blocks/map/component/info-window/mapkit.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { Button, Dashicon, TextareaControl, TextControl } from '@wordpress/components'; | ||
| import { createPortal, Fragment, useEffect, useState } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useMapkit } from '../../mapkit/hooks'; | ||
|
|
||
| const InfoWindow = () => { | ||
| const { activeMarker, setActiveMarker, calloutReference, admin, points, setPoints } = useMapkit(); | ||
| const [ pointsCopy, setPointsCopy ] = useState( points ); | ||
| const [ isDirty, setIsDirty ] = useState( false ); | ||
| const { title, caption } = pointsCopy.find( p => p.id === activeMarker?.id ) || {}; | ||
|
|
||
| const updateActiveMarker = value => { | ||
| const newPoints = points.map( point => { | ||
| if ( point.id === activeMarker.id ) { | ||
| return { ...point, ...value }; | ||
| } | ||
| return point; | ||
| } ); | ||
| setPointsCopy( newPoints ); | ||
| setIsDirty( true ); | ||
| }; | ||
|
|
||
| const deleteActiveMarker = () => { | ||
| const newPoints = points.filter( point => point.id !== activeMarker.id ); | ||
| setPointsCopy( newPoints ); | ||
| setIsDirty( true ); | ||
| // force closing of window | ||
| setActiveMarker( null ); | ||
| }; | ||
|
|
||
| useEffect( () => { | ||
| if ( ! activeMarker && isDirty ) { | ||
| // commit the points when callout is closed, and content is dirty | ||
| setPoints( pointsCopy ); | ||
| } | ||
| }, [ activeMarker, isDirty, pointsCopy, setPoints ] ); | ||
|
|
||
| useEffect( () => { | ||
| setPointsCopy( points ); | ||
| setIsDirty( false ); | ||
| }, [ points ] ); | ||
|
|
||
| if ( ! activeMarker || ! calloutReference ) { | ||
| return null; | ||
| } | ||
|
|
||
| return createPortal( | ||
| <Fragment> | ||
| { admin && ( | ||
| <Fragment> | ||
| <TextControl | ||
| label={ __( 'Marker Title', 'jetpack' ) } | ||
| value={ title } | ||
| onChange={ value => updateActiveMarker( { title: value } ) } | ||
| /> | ||
| <TextareaControl | ||
| className="wp-block-jetpack-map__marker-caption" | ||
| label={ __( 'Marker Caption', 'jetpack' ) } | ||
| value={ caption } | ||
| rows="2" | ||
| tag="textarea" | ||
| onChange={ value => updateActiveMarker( { caption: value } ) } | ||
| /> | ||
| <Button onClick={ deleteActiveMarker } className="wp-block-jetpack-map__delete-btn"> | ||
| <Dashicon icon="trash" size="15" /> { __( 'Delete Marker', 'jetpack' ) } | ||
| </Button> | ||
| </Fragment> | ||
| ) } | ||
|
|
||
| { ! admin && ( | ||
| <Fragment> | ||
| <h3>{ title }</h3> | ||
| <p>{ caption }</p> | ||
| </Fragment> | ||
| ) } | ||
| </Fragment>, | ||
| calloutReference | ||
| ); | ||
| }; | ||
|
|
||
| InfoWindow.defaultProps = {}; | ||
|
|
||
| export default InfoWindow; |
4 changes: 2 additions & 2 deletions
4
...extensions/blocks/map/map-marker/index.js → .../blocks/map/component/map-marker/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
projects/plugins/jetpack/extensions/blocks/map/component/mapkit.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import { Children, forwardRef, memo, useCallback, useRef } from '@wordpress/element'; | ||
| import { get } from 'lodash'; | ||
| import { MapkitProvider } from '../mapkit/context'; | ||
| import { | ||
| useMapkit, | ||
| useMapkitSetup, | ||
| useMapkitInit, | ||
| useMapkitType, | ||
| useMapkitCenter, | ||
| useMapkitOnMapLoad, | ||
| useMapkitOnMapTap, | ||
| useMapkitZoom, | ||
| useMapkitPoints, | ||
| } from '../mapkit/hooks'; | ||
| import { createCalloutElementCallback } from '../mapkit-utils'; | ||
| import InfoWindow from './info-window'; | ||
|
|
||
| const MapkitComponent = forwardRef( ( props, mapRef ) => { | ||
| const { admin, points, onSetPoints } = props; | ||
| const { loaded, mapkit, currentDoc, currentWindow } = useMapkitSetup( mapRef ); | ||
| const { map } = useMapkitInit( mapkit, loaded, mapRef ); | ||
| const addPoint = Children.map( props.children, child => { | ||
| const tagName = get( child, 'props.tagName' ); | ||
| if ( 'AddPoint' === tagName ) { | ||
| return child; | ||
| } | ||
| } ); | ||
|
|
||
| return ( | ||
| <MapkitProvider | ||
| value={ { | ||
| mapkit, | ||
| map, | ||
| loaded, | ||
| currentDoc, | ||
| currentWindow, | ||
| admin, | ||
| points, | ||
| setPoints: onSetPoints, | ||
| } } | ||
| > | ||
| { loaded && mapkit && map ? <MapkitHelpers { ...props } /> : null } | ||
| <div | ||
| style={ { height: props.mapHeight ? `${ props.mapHeight }px` : '400px' } } | ||
| className="wp-block-jetpack-map__gm-container" | ||
| ref={ mapRef } | ||
| /> | ||
| { addPoint } | ||
| <InfoWindow /> | ||
| </MapkitProvider> | ||
| ); | ||
| } ); | ||
|
|
||
| const MapkitHelpers = memo( | ||
| ( { | ||
| mapCenter, | ||
| mapStyle, | ||
| zoom, | ||
| onSetMapCenter, | ||
| onSetZoom, | ||
| points, | ||
| markerColor, | ||
| onMarkerClick, | ||
| onMapLoaded, | ||
| } ) => { | ||
| const { map, mapkit, setActiveMarker, setCalloutReference, currentDoc } = useMapkit(); | ||
|
|
||
| // Save these in a ref to prevent unwanted rerenders | ||
| const onMarkerClickRef = useRef( onMarkerClick ); | ||
|
|
||
| const onSelect = useCallback( | ||
| marker => { | ||
| setActiveMarker( marker ); | ||
| if ( onMarkerClickRef.current ) { | ||
| onMarkerClickRef.current( marker ); | ||
| } | ||
| map.setCenterAnimated( | ||
| new mapkit.Coordinate( marker.coordinates.latitude, marker.coordinates.longitude ) | ||
| ); | ||
| }, | ||
| [ map, mapkit, setActiveMarker, onMarkerClickRef ] | ||
| ); | ||
|
|
||
| useMapkitCenter( mapCenter, onSetMapCenter ); | ||
| useMapkitType( mapStyle ); | ||
| useMapkitZoom( zoom, onSetZoom ); | ||
| useMapkitPoints( | ||
| points, | ||
| markerColor, | ||
| createCalloutElementCallback( currentDoc, setCalloutReference ), | ||
| onSelect | ||
| ); | ||
| useMapkitOnMapLoad( onMapLoaded ); | ||
| useMapkitOnMapTap( () => { | ||
| setActiveMarker( null ); | ||
| // TODO: recenter points | ||
| } ); | ||
| return null; | ||
| } | ||
| ); | ||
|
|
||
| MapkitComponent.defaultProps = { | ||
| points: [], | ||
| mapStyle: 'default', | ||
| zoom: 13, | ||
| onSetZoom: () => {}, | ||
| onSetMapCenter: () => {}, | ||
| onMapLoaded: () => {}, | ||
| onMarkerClick: () => {}, | ||
| onError: () => {}, | ||
| markerColor: 'red', | ||
| mapCenter: {}, | ||
| }; | ||
|
|
||
| export default MapkitComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.