Merge pull request #13 from aeagle/patch/5-resize-constraints

Patch/5 resize constraints

Author: aeagle

demo/src/docs/Docs.tsx

@@ -4,7 +4,7 @@ import { Button, Icon, Menu } from 'antd';
 import 'antd/dist/antd.css';
 import { GettingStarted } from './GettingStarted';
 import { Types } from './Types';
-import { Anchored } from '../ui-demo/Anchored';
+import { Anchored } from './Anchored';
 import { Resizable } from './Resizable';
 import { Nested } from './Nested';
 import { Scrollable } from './Scrollable';

demo/src/docs/Resizable.tsx

@@ -87,23 +87,31 @@ export const Resizable = () => {
 			  {
 				"const App = () => (\r\n" +
 				"  <Space.Fixed height={400}>\r\n" +
-				"    <Space.LeftResizable size={100} minimumSize={50} maximumSize={150} />\r\n" +
+				"    <Space.LeftResizable size=\"20%\" minimumSize={50} maximumSize={150} />\r\n" +
 				"    <Space.Fill />\r\n" +
-				"    <Space.RightResizable size={100} minimumSize={50} maximumSize={150} />\r\n" +
+				"    <Space.RightResizable size=\"20%\" minimumSize={50} maximumSize={150} />\r\n" +
 				"  </Space.Fixed>\r\n" +
 				")"
 			  }
 			</SyntaxHighlighter>
 
 			<Space.Fixed height={400}>
-			  <Space.LeftResizable trackSize={true} size={100} minimumSize={50} maximumSize={150} style={{ backgroundColor: '#e0eee0' }}>
-				{Description("Left", "L")}
+			  <Space.LeftResizable trackSize={true} size="20%" minimumSize={50} maximumSize={150} style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Left", "L")}
 			  </Space.LeftResizable>
-			  <Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
-				{Description("Fill", "F")}
-			  </Space.Fill>
-			  <Space.RightResizable trackSize={true} size={100} minimumSize={50} maximumSize={150} style={{ backgroundColor: '#e0eee0' }}>
-				{Description("Right", "R")}
+				<Space.Fill>
+					<Space.TopResizable trackSize={true} size="20%" minimumSize={50} maximumSize={150} style={{ backgroundColor: '#e0eeee' }}>
+						{Description("Top", "T")}
+					</Space.TopResizable>
+					<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
+						{Description("Fill", "F")}
+					</Space.Fill>
+					<Space.BottomResizable trackSize={true} size="20%" minimumSize={50} maximumSize={150} style={{ backgroundColor: '#e0eeee' }}>
+						{Description("Bottom", "B")}
+					</Space.BottomResizable>
+				</Space.Fill>
+			  <Space.RightResizable trackSize={true} size="20%" minimumSize={50} maximumSize={150} style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Right", "R")}
 			  </Space.RightResizable>
 			</Space.Fixed>
 

demo/src/docs/VersionHistory.tsx

@@ -5,6 +5,12 @@ export const VersionHistory = () => {
 		<>
 			<h2 id="changes">Version history</h2>
 
+			<div>
+				<h3>0.1.6</h3> 
+				<ul>
+					<li>Fixed resize minimum and maximum constraints</li>
+				</ul>
+			</div>
 			<div>
 				<h3>0.1.5</h3> 
 				<ul>

demo/src/ui-demo/Anchored.tsx

@@ -1,11 +1,11 @@
 {
   "name": "react-spaces",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "dist/index.js",
   "author": {
     "name": "Allan Eagle"
   },
-  "license": "ISC",
+  "license": "MIT",
   "description": "React Layout Components",
   "dependencies": {
     "css-element-queries": "^1.2.1",

react-spaces/package.json

@@ -100,7 +100,10 @@ class Space extends React.Component<AllProps, IState> {
 
 			const currentRect = this.divElementRef.current.getBoundingClientRect();
 			this.setState({
-				parsedSize: !this.state.parsedSize ? currentRect.width : this.state.parsedSize,
+				parsedSize: 
+					!this.state.parsedSize ? 
+						this.isHorizontalSpace() ? currentRect.width : currentRect.height : 
+						this.state.parsedSize,
 				currentWidth: currentRect.width,
 				currentHeight: currentRect.height
 			});
@@ -246,7 +249,7 @@ class Space extends React.Component<AllProps, IState> {
 								<>
 									<Resizable 
 										type={resizeType} 
-										minimumAdjust={ -(this.props.size || 0) + (this.props.minimumSize || 20) }
+										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(