Added basic touch resize functionality

Author: aeagle

demo/src/ui-demo/Resizable.tsx

@@ -52,12 +52,12 @@ const AnchoredExample : React.FC<{ spaceSize: number,resizingSpaces: boolean, se
 
 	return (
 		<>
-			<Space.LeftResizable size={`${props.spaceSize}%`} trackSize={trackSize} className={props.children ? "blue" : "gray"}>
+			<Space.LeftResizable size={`${props.spaceSize}%`} handleSize={30} trackSize={trackSize} className={props.children ? "blue" : "gray"}>
 				{Description("Left")}
 			</Space.LeftResizable>
 
 			<Space.Fill>
-			<Space.TopResizable size={`${props.spaceSize}%`} trackSize={trackSize} className={props.children ? "red" : "blue"}>
+			<Space.TopResizable size={`${props.spaceSize}%`} handleSize={30} trackSize={trackSize} className={props.children ? "red" : "blue"}>
 				{Description("Top")}
 			</Space.TopResizable>
 			<Space.Fill trackSize={trackSize} className="white">
@@ -74,12 +74,12 @@ const AnchoredExample : React.FC<{ spaceSize: number,resizingSpaces: boolean, se
 					</Space.Centered>
 				}
 			</Space.Fill>
-			<Space.BottomResizable size={`${props.spaceSize}%`} trackSize={trackSize} className={props.children ? "red" : "blue"}>
+			<Space.BottomResizable size={`${props.spaceSize}%`} handleSize={30} trackSize={trackSize} className={props.children ? "red" : "blue"}>
 				{Description("Bottom")}
 			</Space.BottomResizable>
 			</Space.Fill>
 
-			<Space.RightResizable size={`${props.spaceSize}%`} trackSize={trackSize} className={props.children ? "blue" : "gray"}>
+			<Space.RightResizable size={`${props.spaceSize}%`} handleSize={30} trackSize={trackSize} className={props.children ? "blue" : "gray"}>
 			{Description("Right")}
 			</Space.RightResizable>
 		</>

demo/src/ui-demo/Scrollable.tsx

@@ -23,7 +23,7 @@ export const ScrollableDemo = () => {
 			Header
 		</Space.Top>
 		<Space.Fill>
-			<Space.LeftResizable as="aside" size="20%">
+			<Space.LeftResizable as="aside" size="20%" handleSize={30}>
 				<Menu defaultSelectedKeys={[ selectedKey ]} onSelect={e => setSelectedKey(e.key)}>
 					<Menu.Item key="1">Menu item 1</Menu.Item>
 					<Menu.Item key="2">Menu item 2</Menu.Item>

demo/src/ui-demo/UI.tsx

@@ -37,7 +37,7 @@ const DemoSelection = (props: {
 
 	return (
 		props.sidebarVisible ?
-			<Space.LeftResizable className="ui-list" size={300} minimumSize={150} style={{ backgroundColor: '#193549' }}>
+			<Space.LeftResizable className="ui-list" size={300} minimumSize={150} style={{ backgroundColor: '#193549' }} handleSize={30}>
 				<Space.Fill scrollable={true}>
 					<ul>
 						<li className={props.selectedDemo === "resizable" ? "active" : undefined}>

react-spaces/src/Globals/Utils.tsx

@@ -114,4 +114,15 @@ export const applyResize = (props: AllProps, state: IState, setState: (stateDelt
 	}
 
 	return { resizeHandle: null, resizeType: null };
+}
+
+export const debounce = <F extends ((...args: any) => any)>(func: F, waitFor: number) => {
+    let timeout: number = 0
+
+    const debounced = (...args: any) => {
+        window.clearTimeout(timeout)
+        timeout = window.setTimeout(() => func(...args), waitFor)
+    }
+    
+    return debounced as (...args: Parameters<F>) => ReturnType<F>
 }

react-spaces/src/Resizable.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import './Styles.css';
+import { debounce } from './Globals/Utils';
 
 export enum ResizeType {
 	Left = "resize-left",
@@ -20,40 +21,56 @@ 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(
+			Math.max(props.type === ResizeType.Left ? originalX - x : x - originalX, props.minimumAdjust),
+			props.maximumAdjust || 999999
+		);
+		const adjustmentY = 
+			Math.min(
+				Math.max(props.type === ResizeType.Top ? originalY - y : y - originalY, props.minimumAdjust),
+				props.maximumAdjust || 999999
+			);
+		const adjustment = props.type === ResizeType.Left || props.type === ResizeType.Right ?  adjustmentX : adjustmentY;
+
+		if (adjustment !== adjustedSize) {
+			setAdjustedSize(adjustment);
+			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 touchResize = (e: TouchEvent) => resize(originalTouchX, originalTouchY, e.touches[0].pageX, e.touches[0].pageY);
+		const debouncedTouchResize = debounce<typeof touchResize>(touchResize, 10);
+		const withPreventDefault = (e: TouchEvent) => { e.preventDefault(); e.stopImmediatePropagation(); debouncedTouchResize(e); };
+		window.addEventListener('touchmove', withPreventDefault);
+		window.addEventListener('touchend', () => window.removeEventListener('touchmove', withPreventDefault));
+		e.preventDefault();
+		e.stopPropagation();
+	}
+
 	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 resize = (e: MouseEvent) => {
-			const adjustmentX = 
-				Math.min(
-					Math.max(props.type === ResizeType.Left ? originalMouseX - e.pageX : e.pageX - originalMouseX, props.minimumAdjust),
-					props.maximumAdjust || 999999
-				);
-			const adjustmentY = 
-				Math.min(
-					Math.max(props.type === ResizeType.Top ? originalMouseY - e.pageY : e.pageY - originalMouseY, props.minimumAdjust),
-					props.maximumAdjust || 999999
-				);
-			const adjustment = props.type === ResizeType.Left || props.type === ResizeType.Right ?  adjustmentX : adjustmentY;
-	
-			if (adjustment !== adjustedSize) {
-				setAdjustedSize(adjustment);
-				props.onResize(adjustment);
-			}
-		}
-
-		const stopResize = () => window.removeEventListener('mousemove', resize);
-		
+		const mouseResize = (e: MouseEvent) => resize(originalMouseX, originalMouseY, e.pageX, e.pageY);
+		const debouncedMouseResize = debounce<typeof mouseResize>(mouseResize, 10);
+		const withPreventDefault = (e: MouseEvent) => { e.preventDefault(); e.stopImmediatePropagation(); debouncedMouseResize(e); };
+		window.addEventListener('mousemove', withPreventDefault);
+		window.addEventListener('mouseup', () => window.removeEventListener('mousemove', withPreventDefault));
 		e.preventDefault();
-		window.addEventListener('mousemove', resize);
-		window.addEventListener('mouseup', stopResize);
+		e.stopPropagation();
 	}
 
 	return (
 		<div 
 			style={{ width: props.width, height: props.height }}
 			className={`spaces-resize-handle ${props.type}`} 
-			onMouseDown={startResize} />
+			onMouseDown={startResize}
+			onTouchStart={startTouchResize} />
 	)
 }