Merge pull request #40 from aeagle/fix/29-adjusted-size-after-props-update

Fix/29 adjusted size after props update

Author: aeagle

react-spaces/src/Globals/Hooks.ts

@@ -13,6 +13,9 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 
 	const setState = (stateDelta: Partial<IState>) => changeState(prev => ({...prev, ...stateDelta}));
 
+	const parentContext = React.useContext(SpaceContext);
+	const currentZIndex = props.zIndex || React.useContext(SpaceLayerContext) || 0;
+
 	// Deal with property changes to size / anchoring 
 	React.useEffect(() => {
 		setState({
@@ -24,7 +27,11 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 			width: isHorizontalSpace(props) ? props.anchorSize || 0 : props.width,
 			height: isVerticalSpace(props) ? props.anchorSize || 0 : props.height,
 			debug: props.debug !== undefined ? props.debug : false,
+			adjustedSize: 0
 		})
+		if (parentContext) {
+			parentContext.updateSpaceTakerAdjustedSize(state.id, 0);
+		}
 	}, [ props.zIndex, props.left, props.top, props.bottom, props.right, props.width, props.height, props.anchor, props.anchorSize, props.debug ]);
 
 	// Setup / cleanup
@@ -57,9 +64,6 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 		}
 	})
 
-	const parentContext = React.useContext(SpaceContext);
-	const currentZIndex = props.zIndex || React.useContext(SpaceLayerContext) || 0;
-
 	const outerStyle = {
 		left: (state.left !== undefined ? `calc(${getSizeString(state.left || 0)}${state.adjustedLeft ? ` + ${state.adjustedLeft}px` : ``})` : undefined),
 		top: (state.top !== undefined ? `calc(${getSizeString(state.top || 0)}${state.adjustedTop ? ` + ${state.adjustedTop}px` : ``})` : undefined),
@@ -72,7 +76,6 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 
 	if (parentContext) {
 		onRemove.current = () => {
-			console.log(`Removing ${state.id}`);
 			parentContext.removeSpaceTaker(state.id);
 		}
 

react-spaces/src/Globals/Utils.tsx

@@ -98,8 +98,9 @@ export const applyResize = (props: AllProps, state: IState, setState: (stateDelt
 
 		return {
 			resizeHandle:
-				<Resizable 
-					type={resizeType} 
+				<Resizable
+					type={resizeType}
+					adjustedSize={state.adjustedSize} 
 					width={resizeHandleWidth}
 					height={resizeHandleHeight}
 					minimumAdjust={ (props.minimumSize || 20) - (state.parsedSize || 0) }

react-spaces/src/Resizable.tsx

@@ -6,6 +6,7 @@ import * as PropTypes from 'prop-types';
 
 interface IProps {
 	type: ResizeType,
+	adjustedSize: number,
 	width?: number,
 	height?: number,
 	minimumAdjust: number,
@@ -14,8 +15,6 @@ interface IProps {
 }
 
 export const Resizable : React.FC<IProps> = (props) => {
-	const [ adjustedSize, setAdjustedSize ] = React.useState(0);
-
 	const resize = (originalX: number, originalY: number, x: number, y: number) => {
 		const adjustmentX = 
 		Math.min(
@@ -29,15 +28,14 @@ export const Resizable : React.FC<IProps> = (props) => {
 			);
 		const adjustment = props.type === ResizeType.Left || props.type === ResizeType.Right ?  adjustmentX : adjustmentY;
 
-		if (adjustment !== adjustedSize) {
-			setAdjustedSize(adjustment);
+		if (adjustment !== props.adjustedSize) {
 			props.onResize(adjustment);
 		}
 	}
 
 	const startTouchResize = (e: React.TouchEvent<HTMLDivElement>) => {
-		const originalTouchX = props.type === ResizeType.Left ? e.touches[0].pageX + adjustedSize : e.touches[0].pageX - adjustedSize;
-		const originalTouchY = props.type === ResizeType.Top ? e.touches[0].pageY + adjustedSize : e.touches[0].pageY - adjustedSize;
+		const originalTouchX = props.type === ResizeType.Left ? e.touches[0].pageX + props.adjustedSize : e.touches[0].pageX - props.adjustedSize;
+		const originalTouchY = props.type === ResizeType.Top ? e.touches[0].pageY + props.adjustedSize : e.touches[0].pageY - props.adjustedSize;
 
 		const touchResize = (e: TouchEvent) => resize(originalTouchX, originalTouchY, e.touches[0].pageX, e.touches[0].pageY);
 		const debouncedTouchResize = debounce<typeof touchResize>(touchResize, 10);
@@ -49,8 +47,8 @@ export const Resizable : React.FC<IProps> = (props) => {
 	}
 
 	const startResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-		const originalMouseX = props.type === ResizeType.Left ? e.pageX + adjustedSize : e.pageX - adjustedSize;
-		const originalMouseY = props.type === ResizeType.Top ? e.pageY + adjustedSize : e.pageY - adjustedSize;
+		const originalMouseX = props.type === ResizeType.Left ? e.pageX + props.adjustedSize : e.pageX - props.adjustedSize;
+		const originalMouseY = props.type === ResizeType.Top ? e.pageY + props.adjustedSize : e.pageY - props.adjustedSize;
 
 		const mouseResize = (e: MouseEvent) => resize(originalMouseX, originalMouseY, e.pageX, e.pageY);
 		const debouncedMouseResize = debounce<typeof mouseResize>(mouseResize, 10);