Merge pull request #14 from aeagle/patch/_6-resize-handle-fix-in-scrollable

Patch/ 6 resize handle fix in scrollable

Author: aeagle

demo/src/docs/VersionHistory.tsx

@@ -5,6 +5,12 @@ export const VersionHistory = () => {
 		<>
 			<h2 id="changes">Version history</h2>
 
+			<div>
+				<h3>0.1.7</h3> 
+				<ul>
+					<li>Fixed positioning of resize handles within scrollable divs</li>
+				</ul>
+			</div>
 			<div>
 				<h3>0.1.6</h3> 
 				<ul>

react-spaces/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spaces",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "main": "dist/index.js",
   "author": {
     "name": "Allan Eagle"

react-spaces/src/components/Space.scss

@@ -3,13 +3,24 @@
 	overflow: hidden;
 	z-index: 1;
 
-	&:after {
-		content: "";
-		display: table;
-		clear: both;
+	.spaces-space-inner {
+		z-index: 2;
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+
+		&:after {
+			content: "";
+			display: table;
+			clear: both;
+		}
 	}
 
 	&.scrollable {
-		overflow: auto;
+		.spaces-space-inner {
+			overflow: auto;
+		}
 	}
 }

react-spaces/src/components/Space.tsx

@@ -226,6 +226,7 @@ class Space extends React.Component<AllProps, IState> {
 						const currentContext = this.getContext(parentContext);
 
 						let spaceRender = this.props.children;
+						let resizeRender = null;
 
 						if (parentContext && this.props.anchor && this.props.resizable) {
 							let resizeType : ResizeType = ResizeType.Left;
@@ -245,36 +246,34 @@ class Space extends React.Component<AllProps, IState> {
 									break;
 							}
 
-							spaceRender = 
-								<>
-									<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); 
-												}); 
-										}} />
-									{spaceRender}
-								</>;
+							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); 
+											}); 
+									}} />;
 						}
 
 						return (
 						<div 
 							id={id}
 							ref={this.divElementRef}
 							className={`spaces-space${this.props.anchor || ''}${this.props.scrollable ? ' scrollable' : ''}${className ? ` ${className}` : ``}`}
-							style={{ ...style, ...this.props.style }}>
-		
-							<SpaceContext.Provider value={currentContext}>
-								<SpaceInfoContext.Provider value={{ width: Math.floor(this.state.currentWidth), height: Math.floor(this.state.currentHeight) }}>
-								{ spaceRender }
-								</SpaceInfoContext.Provider>
-							</SpaceContext.Provider>
-		
+							style={style}>
+							{ resizeRender }
+							<div className="spaces-space-inner" style={this.props.style}>
+								<SpaceContext.Provider value={currentContext}>
+									<SpaceInfoContext.Provider value={{ width: Math.floor(this.state.currentWidth), height: Math.floor(this.state.currentHeight) }}>
+									{ spaceRender }
+									</SpaceInfoContext.Provider>
+								</SpaceContext.Provider>
+							</div>
 						</div>
 						)
 					}