Added resizable/scrollable demo

Author: aeagle

demo/src/ui-demo/ResizableScrollable.scss

@@ -0,0 +1,8 @@
+.scrollable-resizable {
+	.left-pane {
+		.spaces-resize-handle {
+			background-color: red;
+			opacity: 0.5;
+		}
+	}
+}

demo/src/ui-demo/ResizableScrollable.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as Space from 'react-spaces';
+import './ResizableScrollable.scss';
+
+class TestComponent extends React.Component<{}> {
+    constructor(props: {}) {
+        super(props);
+        console.log("created");
+    }
+
+    public render() {
+        console.log("rendered");
+        return (
+            <>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, quo. Repudiandae hic 
+                placeat id beatae sint. Veritatis odio facere excepturi ducimus dicta ab ullam qui 
+                illo labore voluptate, vel provident sed quod perspiciatis odit expedita rem 
+                raesentium vitae libero laudantium corporis nulla quam ad? Illo, eos quas quaerat 
+                nde ducimus quos consequatur blanditiis odit excepturi dolorum repellendus animi 
+                reprehenderit esse facere et maiores cumque! Eaque ratione, nostrum cum cumque, 
+                doloremque ab voluptates reiciendis amet obcaecati aut dolores nobis cupiditate, ullam 
+                nesciunt nisi explicabo nihil repellendus quidem eos expedita. Eligendi facilis ducimus 
+                distinctio voluptatum quas officiis accusantium consequuntur necessitatibus culpa cumque.
+            </>
+        )
+    }
+}
+
+export const ResizableScrollable = () => {
+    const [ resizable, setResizable ] = React.useState(false);
+
+	return (
+		<Space.Fill className="scrollable-resizable">
+            <Space.Custom resizable={resizable} className="left-pane" anchorSize={200} anchor={Space.AnchorType.Left} style={{ fontSize: 30 }}>
+                <Space.Fill scrollable={true}>
+                    <button onClick={() => setResizable(!resizable)}>Change resizable</button>
+                    <TestComponent />
+                </Space.Fill>
+            </Space.Custom>
+            <Space.Fill style={{ fontSize: 30 }}>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, quo. Repudiandae hic 
+                placeat id beatae sint. Veritatis odio facere excepturi ducimus dicta ab ullam qui 
+                illo labore voluptate, vel provident sed quod perspiciatis odit expedita rem 
+                raesentium vitae libero laudantium corporis nulla quam ad? Illo, eos quas quaerat 
+                nde ducimus quos consequatur blanditiis odit excepturi dolorum repellendus animi 
+                reprehenderit esse facere et maiores cumque! Eaque ratione, nostrum cum cumque, 
+                doloremque ab voluptates reiciendis amet obcaecati aut dolores nobis cupiditate, ullam 
+                nesciunt nisi explicabo nihil repellendus quidem eos expedita. Eligendi facilis ducimus 
+                distinctio voluptatum quas officiis accusantium consequuntur necessitatibus culpa cumque.
+            </Space.Fill>
+		</Space.Fill>
+	)
+}

demo/src/ui-demo/UI.tsx

@@ -4,6 +4,7 @@ import 'antd/dist/antd.css';
 import './UI.scss';
 import { CodeEditor } from './CodeEditor';
 import { Resizable } from './Resizable';
+import { ResizableScrollable } from './ResizableScrollable';
 import { ScrollableDemo } from './Scrollable';
 import { LayersDemo } from './Layers';
 import { WindowsDemo } from './Windows';
@@ -49,6 +50,14 @@ const DemoSelection = (props: {
 								</span>
 							</a>
 						</li>
+						<li className={props.selectedDemo === "resizablescrollable" ? "active" : undefined}>
+							<a onClick={() => props.setSelectedDemo("resizablescrollable")}>
+								Resizable / Scrollable
+								<span>
+									Resizable and scrollable spaces
+								</span>
+							</a>
+						</li>
 						<li className={props.selectedDemo === "scrollable" ? "active" : undefined}>
 							<a onClick={() => props.setSelectedDemo("scrollable")}>
 								Sidebar / header layout
@@ -127,6 +136,7 @@ const Main = (props: { selectedDemo: string, showSpaces: boolean }) => {
 	return (
 		<Space.Fill>
 			{ props.selectedDemo === "resizable" ? <Resizable /> : null }
+			{ props.selectedDemo === "resizablescrollable" ? <ResizableScrollable /> : null }
 			{ props.selectedDemo === "scrollable" ? <ScrollableDemo /> : null }
 			{ props.selectedDemo === "layers" ? <LayersDemo /> : null }
 			{ props.selectedDemo === "windows" ? <WindowsDemo /> : null }