Merge pull request #83 from 10up/feature/make-map-resizable-using-resize-handle

Feature/make map resizable using resize handle

Author: jeffpaul

CHANGELOG.md

@@ -3,7 +3,8 @@
 All notable changes to this project will be documented in this file, per [the Keep a Changelog standard](http://keepachangelog.com/), and will adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased] - TBD
-
+### Added
+- Resize Handle to modify the height of the Map inline
 ## [1.0.1] - 2020-08-11
 ### Added
 - Internationalization support via loading translations for the block (props [@dinhtungdu](https://github.com/dinhtungdu), [@helen](https://github.com/helen) via [#69](https://github.com/10up/maps-block-apple/pull/69))

includes/rest-routes.php

@@ -24,8 +24,9 @@ function add_endpoints() {
 		MAPS_BLOCK_APPLE_VERSION_REST_NAMESPACE,
 		'/GetJWT',
 		[
-			'methods'  => 'GET',
-			'callback' => __NAMESPACE__ . '\get_jwt',
+			'methods'             => 'GET',
+			'callback'            => __NAMESPACE__ . '\get_jwt',
+			'permission_callback' => '__return_true',
 		]
 	);
 }

src/components/ResizableMap.js

@@ -0,0 +1,54 @@
+import { ResizableBox } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const RESIZABLE_BOX_ENABLE_OPTION = {
+	top: false,
+	right: false,
+	bottom: true,
+	left: false,
+	topRight: false,
+	bottomRight: false,
+	bottomLeft: false,
+	topLeft: false,
+};
+
+const MAP_MIN_HEIGHT = 100;
+
+export function ResizableMap( {
+	onResizeStart,
+	onResize,
+	onResizeStop,
+	...props
+} ) {
+	const [ isResizing, setIsResizing ] = useState( false );
+
+	return (
+		<ResizableBox
+			style={{
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+			}}
+			className={ `apple-maps-block__resize-container ${isResizing ? 'is-resizing' : ''}` }
+			enable={ RESIZABLE_BOX_ENABLE_OPTION }
+			onResizeStart={ ( _event, _direction, elt ) => {
+				onResizeStart( elt.clientHeight );
+				onResize( elt.clientHeight );
+			} }
+			onResize={ ( _event, _direction, elt ) => {
+				onResize( elt.clientHeight );
+				if ( ! isResizing ) {
+					setIsResizing( true );
+				}
+			} }
+			onResizeStop={ ( _event, _direction, elt ) => {
+				onResizeStop( elt.clientHeight );
+				setIsResizing( false );
+			} }
+			minHeight={ MAP_MIN_HEIGHT }
+			{ ...props }
+		/>
+	);
+}

src/edit.js

@@ -7,13 +7,15 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { BlockControls } from '@wordpress/block-editor';
+import { dispatch } from '@wordpress/data';
 
 import { AppleMapEdit } from './components/AppleMap';
 import EditAuthForm from './components/EditAuthForm';
 import InspectorSettings from './inspector-settings';
 import IsAdmin from './helper';
 import BlockIcon from './block-icon';
 import { debounce } from 'lodash';
+import { ResizableMap } from './components/ResizableMap'
 
 export default function MapsBlockAppleEdit( props ) {
 	const {
@@ -36,6 +38,7 @@ export default function MapsBlockAppleEdit( props ) {
 		},
 		setAttributes,
 		clientId,
+		isSelected,
 	} = props;
 
 	const [ authenticated, setAuthenticated ] = useState( false );
@@ -44,6 +47,8 @@ export default function MapsBlockAppleEdit( props ) {
 	const mapElement = useRef();
 	const map = useRef();
 
+	const { toggleSelection } = dispatch( 'core/block-editor' );
+
 	useEffect( () => {
 		if ( mapkit.authenticated ) {
 			setIsLoading( false );
@@ -215,6 +220,19 @@ export default function MapsBlockAppleEdit( props ) {
 				authenticated={ authenticated }
 				map={ map }
 			/>
+			<ResizableMap
+				onResizeStart={ () => {
+					toggleSelection( false );
+				} }
+				onResize={ (newHeight) => {
+					setAttributes( { height: newHeight } )
+				} }
+				onResizeStop={ ( newHeight ) => {
+					toggleSelection( true );
+					setAttributes( { height: newHeight } );
+				} }
+				showHandle={ isSelected }
+			/>
 			<div
 				ref={ mapElement }
 				className={ className }