Merge pull request #18 from aeagle/v0.1.10

V0.1.10

demo/src/App.scss

@@ -1,4 +1,4 @@
-body {
+body, li, p, table, pre {
 	font-size: 18px;
 }
 
@@ -55,6 +55,45 @@ pre {
 	}
 }
 
+.docs-main-container {
+	h3 {
+		font-weight: 400;
+		font-size: 20px;
+		color: #193549;
+		margin-top: 20px;
+		margin-bottom: 20px;
+	}
+
+	table {
+		width: 100%;
+		margin-bottom: 20px;
+
+		tr {
+			td, th {
+				border-bottom: 1px solid #eee;
+				padding: 5px 10px
+			}
+
+			th {
+				strong {
+					font-weight: 400;
+				}
+			}
+
+			th:first-child, td:first-child {
+				width: 25%;
+			}
+		}
+
+		tbody {
+			strong {
+				font-weight: 500;
+				color: maroon;
+			}
+		}
+	}
+}
+
 .mobileDesc, .mobile {
 	display: none;
 }

demo/src/docs/Docs.tsx

@@ -13,6 +13,7 @@ import { SizingInfo } from './SizingInfo';
 import { VersionHistory } from './VersionHistory';
 import { Intro } from './Intro';
 import { Try } from './Try';
+import { KnownIssues } from './KnownIssues';
 
 export const Docs = () => {
 	return (
@@ -35,6 +36,7 @@ export const Docs = () => {
               <Menu.Item><a href="#stacked">Stacked</a></Menu.Item>
               <Menu.Item><a href="#sizeinfo">Sizing information</a></Menu.Item>
               <Menu.Item><a href="#try">Try</a></Menu.Item>
+              <Menu.Item><a href="#issues">Known issues</a></Menu.Item>
               <Menu.Item><a href="#changes">Version history</a></Menu.Item>
             </Menu>
 
@@ -62,6 +64,7 @@ export const Docs = () => {
             <Stacked />
             <SizingInfo />
             <Try />
+            <KnownIssues />
             <VersionHistory />
 
           </Space.Fill>
@@ -74,9 +77,9 @@ export const Docs = () => {
 export const Description = (desc: string, mobileDesc: string) => (
 	<Space.Centered>
 	  <span className="description">
-		<strong className="desc">{desc}</strong>
-		<strong className="mobileDesc">{mobileDesc}</strong>
-		<Space.Info>{info => <div>{info.width.toFixed()} x {info.height.toFixed()}</div> }</Space.Info>
+      <strong className="desc">{desc}</strong>
+      <strong className="mobileDesc">{mobileDesc}</strong><br />
+      <Space.Info>{info => <span>{info.width.toFixed()} x {info.height.toFixed()}</span> }</Space.Info>
 	  </span>
 	</Space.Centered>
 )

demo/src/docs/Intro.tsx

@@ -31,7 +31,7 @@ export const Intro = () => {
             </p>
 
             <p>
-              <img src="/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
+              <img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
             </p>
 		</>
 	)

demo/src/docs/KnownIssues.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export const KnownIssues = () => {
+	return (
+		<>
+			<h2 id="issues">Known issues / limitations</h2>
+
+			<ul>
+				<li>
+					Rendering an anchored horizontal space and an anchored vertical space within the same parent space will cause a gap
+					to appear in the corner where the two anchored spaces meet. You can workaround this by using nested <strong>&lt;Fill /&gt;</strong>
+					spaces to seperate the horizontally and vertically anchored spaces.
+				</li>
+				<li>
+					There isn't currently any consideration for using spaces in a responsive manner. You can however give spaces class names and
+					target them with media queries like you would with any other DOM element.
+				</li>
+			</ul>
+
+		</>
+	)
+}

demo/src/docs/Resizable.tsx

@@ -117,6 +117,40 @@ export const Resizable = () => {
 
 		  </Tabs.TabPane>
 		</Tabs>	
+
+		<h3>Extra properties</h3>
+
+		<table>
+			<thead>
+				<tr>
+					<th>Property</th>
+					<th>Description</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>minimumSize</strong></td>
+					<td>
+			  			Optionally sets the minimum size the space can be resized to in pixels. 
+					</td>
+				</tr>
+				<tr>
+					<td><strong>maximumSize</strong></td>
+					<td>
+			  			Optionally sets the mazimum size the space can be resized to in pixels. 
+					</td>
+				</tr>
+				<tr>
+					<td><strong>overlayHandle</strong></td>
+					<td>
+			  			By default, the resize handle is overlayed on top of the spaces content. This might cause issues if a clickable element
+						sits underneath the resize handle. You can optionally set this to <strong>false</strong> to make the resize handle sit
+						next to the space content.
+					</td>
+				</tr>
+			</tbody>
+		</table>
+
 		</>	
 	)
 }

demo/src/docs/Types.tsx

@@ -65,6 +65,48 @@ export const Types = () => {
 				</ul>
 			</Tabs.TabPane>
 			</Tabs>
+
+		<h3>Properties</h3>
+
+		<table>
+			<thead>
+				<tr>
+					<th>Property</th>
+					<th>Description</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>as</strong></td>
+					<td>
+						By default React Spaces will render a div to the DOM. You can override the element rendered by setting this property
+						with the element name, i.e. <strong>as="article"</strong> or <strong>as="aside"</strong>.
+					</td>
+				</tr>
+				<tr>
+					<td><strong>centerContent</strong></td>
+					<td>
+						Instead of using the <strong>&lt;Centered /&gt;</strong> or <strong>&lt;CenteredVertically /&gt;</strong> components inside space
+						you can specify the centering type here. Possible values are <strong>"Vertical"</strong> or <strong>"HorizontalVertical"</strong>.
+					</td>
+				</tr>
+				<tr>
+					<td><strong>scrollable</strong></td>
+					<td>
+						Makes the space scrollable. By default content that overflows the space will be hidden. This will allow the space to add a scroll bar if
+						the content overflows.
+					</td>
+				</tr>
+				<tr>
+					<td><strong>trackSize</strong></td>
+					<td>
+						Tells the space to report it's size when it changes size to the <strong>&lt;Info /&gt;</strong> component. With this turned off
+						the space will only report the initial size.
+					</td>
+				</tr>
+			</tbody>
+		</table>
+
 		</>
 	)
 }

demo/src/docs/VersionHistory.tsx

@@ -5,6 +5,41 @@ export const VersionHistory = () => {
 		<>
 			<h2 id="changes">Version history</h2>
 
+			<div>
+				<h3>0.1.10</h3> 
+				<ul>
+					<li>
+						Added 'as' property to allow rendered DOM element to be specified (thanks to{" "}
+						<a href="https://www.reddit.com/user/MahNonAnon/" target="_blank">u/MahNonAnon</a> and{" "}
+						<a href="https://www.reddit.com/user/trevoreyre/" target="_blank">u/trevoreyre</a> on Reddit
+						for suggestion of this).
+					</li>
+					<li>
+						Added 'centerContent' property as short-hand for centering space content instead of having
+						to introduce the extra &lt;Centered /&gt; or &lt;CenteredVertically /&gt; components.
+					</li>
+					<li>
+						Allow resize handle width to be specified and also it's placement within space controlled
+						with the 'overlayHandle' property.
+					</li>
+					<li>
+						Fixed issue with dynamically added/removed anchored spaces where an anchored space would
+						see itself as a space taking space.
+					</li>
+				</ul>
+			</div>
+			<div>
+				<h3>0.1.9</h3> 
+				<ul>
+					<li>Added repository field to package.json</li>
+				</ul>
+			</div>
+			<div>
+				<h3>0.1.8</h3> 
+				<ul>
+					<li>Removed clear fix from space</li>
+				</ul>
+			</div>
 			<div>
 				<h3>0.1.7</h3> 
 				<ul>

demo/src/ui-demo/UI.scss

@@ -20,8 +20,12 @@
 
 	.bottom-pane-container {
 		.spaces-resize-handle {
-			opacity: 1 !important;
-			height: 2px !important;
+			background-color: #333 !important;
+		}
+	}
+
+	.side-bar-container {
+		.resize-right {
 			background-color: #333 !important;
 		}
 	}

demo/src/ui-demo/UI.tsx

@@ -3,6 +3,7 @@ import * as Space from 'react-spaces';
 import 'antd/dist/antd.css';
 import './UI.scss';
 import MonacoEditor from 'react-monaco-editor';
+import { CenterType } from 'react-spaces';
 
 export const UI = () => {
 	return (
@@ -15,20 +16,18 @@ export const UI = () => {
 	)
 }
 
-const Header: React.FC = (props) => {
+const Header = () => {
 	return (
-		<Space.Top className="title-bar" size={30} style={{ backgroundColor: '#333', color: '#c5c5c5' }}>
-			<Space.Centered>
-				<Space.Left className="menu-bar">
+		<Space.Top className="title-bar" centerContent={CenterType.HorizontalVertical} size={30} style={{ backgroundColor: '#333', color: '#c5c5c5' }}>
+			<Space.Left className="menu-bar">
 
-				</Space.Left>
-				UI Demo - Example UI interface
-			</Space.Centered>
+			</Space.Left>
+			UI Demo - Example UI interface
 		</Space.Top>
 	)
 }
 
-const Main: React.FC = (props) => {
+const Main = () => {
 	return (
 		<Space.Fill style={{ backgroundColor: '#1E1E1E' }}>
 			<Space.Fill>
@@ -40,7 +39,7 @@ const Main: React.FC = (props) => {
 	)
 }
 
-const Editor: React.FC = (props) => {
+const Editor = () => {
 	const [ code, setCode ] = React.useState('import * as React from \'react\';\r\nimport * as Space from \'react-spaces\';\r\n\r\nexport const App = () => {\r\n    <Space.ViewPort>\r\n        <Space.Top size={30}>\r\n            Hello!\r\n        </Space.Top>\r\n        <Space.Fill>\r\n            World!\r\n        </Space.Fill>\r\n    </Space.ViewPort>\r\n}');
 
     const options = {
@@ -52,7 +51,6 @@ const Editor: React.FC = (props) => {
 		<Space.Fill>
 			<Space.Fill>
 				<Space.Top className="editor-tabs" size={40}>
-
 				</Space.Top>
 				<Space.Fill className="editor-main">
 					<MonacoEditor
@@ -68,17 +66,16 @@ const Editor: React.FC = (props) => {
 	)
 }
 
-const IconPane: React.FC = (props) => {
+const IconPane = () => {
 	return (
 		<Space.Left order={1} className="side-bar-icons" size={50} style={{ backgroundColor: '#333' }}>
-
 		</Space.Left>
 	)
 }
 
-const SideBar: React.FC = (props) => {
+const SideBar = () => {
 	return (
-		<Space.LeftResizable order={2} className="side-bar" size={300} style={{ backgroundColor: '#252526' }}>
+		<Space.LeftResizable order={2} className="side-bar" size={300} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
 			<SideBarPane order={1} title="Open editors" height={200}>
 
 			</SideBarPane>
@@ -120,9 +117,9 @@ const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
 	)
 }
 
-const BottomPane: React.FC = (props) => {
+const BottomPane = () => {
 	return (
-		<Space.BottomResizable className="bottom-pane" size="25%">
+		<Space.BottomResizable className="bottom-pane" size="25%" handleSize={2}>
 		</Space.BottomResizable>
 	)
 }

react-spaces/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spaces",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "main": "dist/index.js",
   "repository": "github:aeagle/react-spaces",
   "author": {

react-spaces/src/components/Globals.ts

@@ -3,4 +3,10 @@ export enum AnchorType {
 	Right = " anchor-right",
 	Top = " anchor-top",
 	Bottom = " anchor-bottom"
+}
+
+export enum CenterType {
+	None,
+	Vertical,
+	HorizontalVertical
 }