Merge branch 'master' of https://github.com/aeagle/react-spaces

Author: aeagle

README.md

@@ -4,19 +4,21 @@
 
 React Spaces allow you to divide a page or container HTML element into spaces. These spaces know how to behave in relation to each other and can also be divided into further nested spaces.
 
+<img src="http://www.allaneagle.com/react-spaces/react-spaces-demo.gif" width="100%" />
+
 ### Top level spaces
 
 Used at the top level of all other spaces.
 
-**<ViewPort />**
+**\<ViewPort \/>**
 
 This space will take over the full viewport of the browser window. Resizing the browser window will automatically adjust the size of this space and all the nested spaces.
 
 **\<Fixed /\>** 
 
 This space can be given a height and optionally a width (by default it will size to 100% of it's container). All nested spaces will be contained within this fixed size space.
 
-### Inner spaces
+### Anchored spaces
 
 These can be used within the top-level spaces **\<ViewPort /\>** and **\<Fixed /\>** or nested within other spaces.
 
@@ -28,6 +30,8 @@ A space anchored to the left or right of the parent container/space. A size can
 
 A space anchored to the top or bottom of the parent container/space. A size can be specified in pixels or as a percentage to determine its height.
 
+### Other
+
 **\<Fill /\>** 
 
 A space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side.

react-spaces/src/components/Space.tsx

@@ -168,32 +168,24 @@ class Space extends React.Component<AllProps, IState> {
 											{
 												if (t.anchorType === AnchorType.Top) {
 													adjustedTop.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
-													//style.top! += t.size + t.adjustedSize;
 												} else if (t.anchorType === AnchorType.Left) {
 													adjustedLeft.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
-													//style.left! += t.size + t.adjustedSize;
 												} else if (t.anchorType === AnchorType.Bottom) {
 													adjustedBottom.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
-													//style.bottom! += t.size + t.adjustedSize;
 												} else if (t.anchorType === AnchorType.Right) {
 													adjustedRight.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
-													//style.right! += t.size + t.adjustedSize;
 												}
 											}
 											else
 											{
 												if (t.anchorType === AnchorType.Top && style.top !== undefined) {
 													adjustedTop.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
-													//style.top += t.size + t.adjustedSize;
 												} else if (t.anchorType === AnchorType.Left && style.left !== undefined) {
 													adjustedLeft.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
-													//style.left += t.size + t.adjustedSize;
 												} else if (t.anchorType === AnchorType.Bottom && style.bottom !== undefined) {
 													adjustedBottom.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
-													//style.bottom += t.size + t.adjustedSize;
 												} else if (t.anchorType === AnchorType.Right && style.right !== undefined) {
 													adjustedRight.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
-													//style.right += t.size + t.adjustedSize;
 												}
 											}
 										} else {
@@ -348,4 +340,4 @@ export const Info : React.FC<{ children: (info: ISpaceInfo) => React.ReactNode }
 			info => props.children(info!)
 		}
 	</SpaceInfoContext.Consumer>
-)
+)