Panels can now only be resized to 70% of full available height

barklund · barklund · commit b03fc39208eb · 2020-01-24T11:06:44.000-05:00
Note that this does not reset on resize. useResizeObserver should be used once merged in to the same branch as this code.
diff --git a/assets/src/edit-story/components/inspector/context.js b/assets/src/edit-story/components/inspector/context.js
@@ -3,4 +3,4 @@
  */
 import { createContext } from '@wordpress/element';
 
-export default createContext( { tabs: {} } );
+export default createContext( { state: {}, actions: {}, tabs: {} } );
diff --git a/assets/src/edit-story/components/inspector/inspectorLayout.js b/assets/src/edit-story/components/inspector/inspectorLayout.js
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 /**
  * Internal dependencies
  */
+import useInspector from './useInspector';
 import InspectorTabs from './inspectorTabs';
 import InspectorContent from './inspectorContent';
 
@@ -32,12 +33,13 @@ const InspectorBackground = styled.div`
 `;
 
 function InspectorLayout() {
+	const { actions: { setInspectorContentNode } } = useInspector();
 	return (
 		<Layout>
 			<TabsArea>
 				<InspectorTabs />
 			</TabsArea>
-			<InspectorBackground>
+			<InspectorBackground ref={ setInspectorContentNode }>
 				<InspectorContent />
 			</InspectorBackground>
 		</Layout>
diff --git a/assets/src/edit-story/components/inspector/inspectorProvider.js b/assets/src/edit-story/components/inspector/inspectorProvider.js
@@ -23,10 +23,16 @@ function InspectorProvider( { children } ) {
 	const [ tab, setTab ] = useState( DESIGN );
 	const [ users, setUsers ] = useState( [] );
 	const [ statuses, setStatuses ] = useState( [] );
+	const [ inspectorContentHeight, setInspectorContentHeight ] = useState( null );
 
 	const [ isUsersLoading, setIsUsersLoading ] = useState( false );
 	const [ isStatusesLoading, setIsStatusesLoading ] = useState( false );
 
+	// TODO Implement `useResizeObserver` once either branch is merged
+	const setInspectorContentNode = useCallback( ( node ) => {
+		setInspectorContentHeight( node.clientHeight );
+	}, [] );
+
 	const loadStatuses = useCallback( () => {
 		if ( ! isStatusesLoading && statuses.length === 0 ) {
 			setIsStatusesLoading( true );
@@ -69,11 +75,13 @@ function InspectorProvider( { children } ) {
 			tab,
 			users,
 			statuses,
+			inspectorContentHeight,
 		},
 		actions: {
 			setTab,
 			loadStatuses,
 			loadUsers,
+			setInspectorContentNode,
 		},
 		data: {
 			tabs: {
diff --git a/assets/src/edit-story/panels/panel/title.js b/assets/src/edit-story/panels/panel/title.js
@@ -12,6 +12,7 @@ import { useContext, useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import useInspector from '../../components/inspector/useInspector';
 import panelContext from './context';
 import DragHandle from './handle';
 import Arrow from './arrow.svg';
@@ -58,10 +59,14 @@ function Title( { children, isPrimary, isResizable } ) {
 		state: { isCollapsed },
 		actions: { collapse, expand, setHeight },
 	} = useContext( panelContext );
+	const { state: { inspectorContentHeight } } = useInspector();
+
+	// Max panel height is set to 70% of full available height.
+	const maxHeight = Math.round( inspectorContentHeight * 0.7 );
 
 	const handleHeightChange = useCallback(
-		( deltaHeight ) => setHeight( ( height ) => height + deltaHeight ),
-		[ setHeight ],
+		( deltaHeight ) => setHeight( ( height ) => Math.max( 0, Math.min( maxHeight, height + deltaHeight ) ) ),
+		[ setHeight, maxHeight ],
 	);
 
 	return (
