Refactored resize logic to allow handle size to be specified (default 5px) and also an overlayHandle property to determine if resize handle takes up space or sits over the space content

Author: aeagle

react-spaces/src/components/Resizable.scss

@@ -1,37 +1,32 @@
 .spaces-resize-handle {
 	position: absolute;
 	z-index: 9999;
-	opacity: 0;
 
 	&.resize-left {
 		top: 0;
 		bottom: 0;
 		left: 0;
-		width: 5px;
 		cursor: w-resize;
 	}
 
 	&.resize-right {
 		top: 0;
 		bottom: 0;
 		right: 0;
-		width: 5px;
 		cursor: e-resize;
 	}
 
 	&.resize-top {
 		top: 0;
 		left: 0;
 		right: 0;
-		height: 5px;
 		cursor: n-resize;
 	}
 
 	&.resize-bottom {
 		bottom: 0;
 		left: 0;
 		right: 0;
-		height: 5px;
 		cursor: s-resize;
 	}
 }

react-spaces/src/components/Resizable.tsx

@@ -10,6 +10,8 @@ export enum ResizeType {
 
 interface IProps {
 	type: ResizeType,
+	width?: number,
+	height?: number,
 	minimumAdjust: number,
 	maximumAdjust?: number,
 	onResize: (adjustedSize: number) => void
@@ -36,6 +38,7 @@ export class Resizable extends React.Component<IProps, IState> {
 		return (
 			<div 
 				ref={this.divElementRef}
+				style={{ width: this.props.width, height: this.props.height }}
 				className={`spaces-resize-handle${this.props.type}`} 
 				onMouseDown={this.startResize} />
 		)

react-spaces/src/components/Space.tsx

@@ -28,6 +28,8 @@ interface IAnchoredProps {
 }
 
 interface IResizableProps {
+	handleSize?: number,
+	overlayHandle?: boolean,
 	minimumSize?: number,
 	maximumSize?: number
 }
@@ -223,43 +225,12 @@ class Space extends React.Component<AllProps, IState> {
 							}
 						}
 
-						const { id, className } = this.props;
-
 						const currentContext = this.getContext(parentContext);
+						const handleSize = this.props.handleSize || 5;
+						const overlayHandle = this.props.overlayHandle !== undefined ? this.props.overlayHandle : true;
+						let children = this.props.children;
 
-						let spaceRender = this.props.children;
-						let resizeRender = null;
-
-						if (parentContext && this.props.anchor && this.props.resizable) {
-							let resizeType : ResizeType = ResizeType.Left;
-
-							switch (this.props.anchor) {
-								case AnchorType.Left:
-									resizeType = ResizeType.Right;
-									break;
-								case AnchorType.Right:
-									resizeType = ResizeType.Left;
-									break;
-								case AnchorType.Top:
-									resizeType = ResizeType.Bottom;
-									break;
-								case AnchorType.Bottom:
-									resizeType = ResizeType.Top;
-									break;
-							}
-							
-							resizeRender = 
-								<Resizable 
-									type={resizeType} 
-									minimumAdjust={ -(this.state.parsedSize || 0) + (this.props.minimumSize || 20) }
-									maximumAdjust={ this.props.maximumSize ? (this.props.maximumSize - (this.state.parsedSize || 0)) : undefined}
-									onResize={(adjustedSize) => { 
-										this.setState(
-											{ adjustedSize: adjustedSize },
-											() => {
-												parentContext.updateSpaceTakerAdjustedSize(this.state.id, adjustedSize); 
-											}); 
-									}} />;
+						const [ resizeRender, resizeType ] = this.applyResize(parentContext, handleSize);
 
 						if (this.props.centerContent === CenterType.Vertical) {
 							children = <CenteredVertically>{children}</CenteredVertically>;
@@ -353,6 +324,52 @@ class Space extends React.Component<AllProps, IState> {
 		}
 	}
 
+	private applyResize = (parentContext: ISpaceContext | null, handleSize: number) => {
+		let resizeType : ResizeType = ResizeType.Left;
+		let resizeHandleWidth : number | undefined;
+		let resizeHandleHeight : number | undefined;
+
+		if (parentContext && this.props.anchor && this.props.resizable) {
+			switch (this.props.anchor) {
+				case AnchorType.Left:
+					resizeType = ResizeType.Right;
+					resizeHandleWidth = handleSize;
+					break;
+				case AnchorType.Right:
+					resizeType = ResizeType.Left;
+					resizeHandleWidth = this.props.handleSize || 5;
+					break;
+				case AnchorType.Top:
+					resizeType = ResizeType.Bottom;
+					resizeHandleHeight = this.props.handleSize || 5;
+					break;
+				case AnchorType.Bottom:
+					resizeType = ResizeType.Top;
+					resizeHandleHeight = this.props.handleSize || 5;
+					break;
+			}
+			
+			return [
+				<Resizable 
+					type={resizeType} 
+					width={resizeHandleWidth}
+					height={resizeHandleHeight}
+					minimumAdjust={ -(this.state.parsedSize || 0) + (this.props.minimumSize || 20) }
+					maximumAdjust={ this.props.maximumSize ? (this.props.maximumSize - (this.state.parsedSize || 0)) : undefined }
+					onResize={(adjustedSize) => { 
+						this.setState(
+							{ adjustedSize: adjustedSize },
+							() => {
+								parentContext.updateSpaceTakerAdjustedSize(this.state.id, adjustedSize); 
+							}); 
+					}} />,
+				resizeType
+			]
+		}
+
+		return [ null, null ];
+	}
+
 	private spaceResized : ResizeSensorCallback = (size) => {
 		this.setState({
 			currentWidth: size.width,