Added resizing state and class name to parent space

Author: aeagle

demo/src/ui-demo/Pinnable.scss

@@ -0,0 +1,6 @@
+.pinnable {
+    .spaces-space {
+        transition-property: width,height,top,left,bottom,right;
+        transition-duration: 0.5s;
+    }
+}

demo/src/ui-demo/Pinnable.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as Space from 'react-spaces';
+import './Pinnable.scss';
 
 export const Pinnable = () => {
     const [leftOpen, setLeftOpen] = React.useState(false);
@@ -9,7 +10,7 @@ export const Pinnable = () => {
 
     return (
       <>
-        <Space.Fill>
+        <Space.Fill className="pinnable">
           <Space.LeftResizable
             order={1}
             size={leftOpen ? "25%" : 50}

react-spaces/src/Fixed.tsx

@@ -15,6 +15,7 @@ interface IProps extends IReactEvents {
 
 export const Fixed : React.FC<IProps> = (props) => {
 	const [ children, setChildren ] = React.useState<ISpace[]>([]);
+	const [ resizing, setResizing ] = React.useState(false);
 
 	const style = {
 		...props.style,
@@ -26,7 +27,7 @@ export const Fixed : React.FC<IProps> = (props) => {
 
 	return (
 	<div 
-		className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}`}
+		className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}${resizing ? ` spaces-resizing` : ``}`}
 		style={style}
 		onClick={props.onClick}
 		onMouseDown={props.onMouseDown}
@@ -37,7 +38,7 @@ export const Fixed : React.FC<IProps> = (props) => {
 		onTouchMove={props.onTouchMove}
 		onTouchEnd={props.onTouchEnd}>
 		<HeadStyles spaces={children} />
-		<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
+		<SpaceContext.Provider value={createSpaceContext(children, setChildren, setResizing)}>
 			{props.children}
 		</SpaceContext.Provider>
 	</div>

react-spaces/src/Globals/ISpaceContext.ts

@@ -4,7 +4,8 @@ import { getSizeString } from './Utils';
 export interface ISpaceContext {
 	level: number,
 	children: ISpace[],
-	updateChildren: (children: ISpace[]) => void
+	updateChildren: (children: ISpace[]) => void,
+	updateResizing: (state: boolean) => void
 }
 
 const recalcSpaces = (spaces: ISpace[]) => {
@@ -115,13 +116,14 @@ export const updateSpace = (context: ISpaceContext, id: string, delta: Partial<I
 export const createSpaceContext = (
 	children: ISpace[],
 	updateChildren: (children: ISpace[]) => void,
-	currentSpace?: ISpace,
+	updateResizing: (state: boolean) => void,
 	parent?: ISpaceContext | null) => {
 
 	const context : ISpaceContext = {
 		level: parent ? parent.level + 1 : 0,
 		children: children,
-		updateChildren: updateChildren
+		updateChildren: updateChildren,
+		updateResizing: updateResizing
 	}
 
 	return context;

react-spaces/src/Globals/Types.ts

@@ -145,6 +145,7 @@ export const allProps = { ...publicProps, ...privateProps, ...resizableProps, ..
 
 export interface IState {
 	id: string,
+	resizing: boolean,
 	children: ISpace[]
 }
 
@@ -167,7 +168,7 @@ export interface ISpace {
 	right?: number | string,
 	bottom?: number | string,
 	width?: number | string,
-	height?: number | string,
+	height?: number | string
 }
 
 export interface ISpaceInfo {

react-spaces/src/Globals/Utils.ts

@@ -20,7 +20,8 @@ function shortuuid() {
 
 export const initialState = (props: AllProps) => ({
 	id: props.id || `s${shortuuid()}`,
-	children: []
+	children: [],
+	resizing: false
 })
 
 export const cssValue = (value: number | string | undefined, adjusted: number) =>

react-spaces/src/Hooks/useSpace.ts

@@ -129,15 +129,16 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 	const currentContext = 
 		createSpaceContext(
 			state.children, 
-			(children) => setState({ children: children }), 
-			space, 
+			(children) => setState({ children: children }),
+			(resizing) => setState({ resizing: resizing }),
 			parentContext
 		);
 
 	return {
 		space,
 		parentContext,
 		currentContext,
-		currentSize: currentSize || { width: 0, height: 0 }
+		currentSize: currentSize || { width: 0, height: 0 },
+		resizing: state.resizing
 	} 
 }

react-spaces/src/Space.tsx

@@ -44,7 +44,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 		space,
 		parentContext,
 		currentContext,
-		currentSize
+		currentSize,
+		resizing
 	} = useSpace(props, divElementRef);
 
 	const handleSize = props.handleSize === undefined ? 5 : props.handleSize;
@@ -105,6 +106,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 				}
 			}
 
+			parentContext.updateResizing(true);
+
 			var rect = divElementRef.current.getBoundingClientRect();
 			var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
 
@@ -124,14 +127,15 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 				lastY = e.touches[0].pageY; 
 				e.preventDefault(); 
 				e.stopImmediatePropagation(); 
-				throttledTouchResize(lastX, lastY); 
+				throttledTouchResize(lastX, lastY);
 			};
 			const removeListener = () => {
 				if (moved) {
 					touchResize(lastX, lastY);
 				}
 				window.removeEventListener('touchmove', withPreventDefault);
 				window.removeEventListener('touchend', removeListener);
+				parentContext.updateResizing(false);
 				onResizeEnd();
 			};
 			window.addEventListener('touchmove', withPreventDefault);
@@ -152,6 +156,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 				}
 			}
 
+			parentContext.updateResizing(true);
+
 			var rect = divElementRef.current.getBoundingClientRect();
 			var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
 
@@ -179,6 +185,7 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 				}
 				window.removeEventListener('mousemove', withPreventDefault);
 				window.removeEventListener('mouseup', removeListener);
+				parentContext.updateResizing(false);
 				onResizeEnd();
 			};
 			window.addEventListener('mousemove', withPreventDefault);
@@ -227,7 +234,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 		[
 			...[
 				"spaces-space",
-				props.scrollable ? (resizeHandle ? "scrollable" : "scrollable-a") : undefined
+				props.scrollable ? (resizeHandle ? "scrollable" : "scrollable-a") : undefined,
+				resizing ? "spaces-resizing" : undefined
 			],
 			...(resizeHandle && props.scrollable ? userClasses.map(c => `${c}-container`) : userClasses)
 		].filter(c => c);

react-spaces/src/Styles.css

@@ -68,8 +68,8 @@
 	box-sizing: border-box;
 }
 
-.spaces-space.resizing .spaces-space {
-	transition: inherit !important;
+.spaces-resizing .spaces-space {
+	transition: none !important;
 }
 
 .spaces-space .spaces-space-inner {

react-spaces/src/ViewPort.tsx

@@ -16,10 +16,11 @@ interface IProps extends IReactEvents {
 
 export const ViewPort : React.FC<IProps> = (props) => {
 	const [ children, setChildren ] = React.useState<ISpace[]>([]);
+	const [ resizing, setResizing ] = React.useState(false);
 
 	return (
 		<div 
-			className={`spaces-fullpage-layout${props.className ? ` ${props.className}` : ``}`}
+			className={`spaces-fullpage-layout${props.className ? ` ${props.className}` : ``}${resizing ? ` spaces-resizing` : ``}`}
 			style={{ 
 				left: props.left || 0, 
 				top: props.top || 0, 
@@ -35,7 +36,7 @@ export const ViewPort : React.FC<IProps> = (props) => {
 			onTouchMove={props.onTouchMove}
 			onTouchEnd={props.onTouchEnd}>
 			<HeadStyles spaces={children} />
-			<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
+			<SpaceContext.Provider value={createSpaceContext(children, setChildren, setResizing)}>
 				{props.children}
 			</SpaceContext.Provider>
 		</div>