Refactored space component into functional component using hooks

Author: aeagle

demo/config/webpack.config.js

@@ -272,6 +272,7 @@ module.exports = function(webpackEnv) {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
+        react: path.resolve( '__dirname', '..',  'node_modules', 'react')
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding

demo/package-lock.json

@@ -53,10 +53,10 @@
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.6.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.8.6",
+    "react": "16.8.6",
     "react-app-polyfill": "^1.0.1",
     "react-dev-utils": "^9.0.1",
-    "react-dom": "^16.8.6",
+    "react-dom": "16.8.6",
     "react-ga": "^2.6.0",
     "react-monaco-editor": "^0.28.0",
     "react-spaces": "file:../react-spaces",

demo/package.json

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import './App.scss';
 import ReactGA from 'react-ga';
 import { Docs } from './docs/Docs';
+import { Test } from './Test';
 
 ReactGA.initialize("UA-144490437-1");
 ReactGA.pageview(window.location.pathname + window.location.search);
@@ -12,6 +13,10 @@ const App: React.FC = () => {
     const UI = React.lazy(() => import('./ui-demo/UI').then(({ UI }) => ({ default: UI })));
     return <Suspense fallback={<Loading />}><UI /></Suspense>
   }
+  else if (window.location.hash === "#test")
+  {
+    return <Test />
+  }
 
   return <Docs />
 }

demo/src/App.tsx

@@ -4,35 +4,33 @@ import { Button, Icon } from 'antd';
 export const Intro = () => {
 	return (
 		<>
-  			<p id="intro" style={{ fontWeight: 400, paddingTop: 30, paddingBottom: 0, fontSize: 28, color: '#777' }}>
+  		<p id="intro" style={{ fontWeight: 400, paddingTop: 30, paddingBottom: 0, fontSize: 28, color: '#777' }}>
               React Spaces allow you to divide a page or container into nestable, anchored, scrollable and resizable spaces.
-            </p>
+      </p>
 
 			<div className="mobile" style={{ marginBottom: 15 }}>
               <Button type="primary" onClick={() => window.location.href = 'https://github.com/aeagle/react-spaces'}><Icon type="github" /> View on GitHub</Button>
             &nbsp; &nbsp;
 				<img style={{ position: 'relative', top: -2 }} alt="NPM version" src="https://img.shields.io/npm/v/react-spaces.svg" />
 			</div>
 
-            <p>
-              <h2>Features</h2>
+      <h2>Features</h2>
 
-              <ul>
-                <li>
-                  No styling to achieve simple or complex layouts.
-                </li>
-                <li>
-                  Spaces know how to behave in relation to each other and resize accordingly.
-                </li>
-                <li>
-                  Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
-                </li>
-              </ul>
-            </p>
+      <ul>
+        <li>
+          No styling to achieve simple or complex layouts.
+        </li>
+        <li>
+          Spaces know how to behave in relation to each other and resize accordingly.
+        </li>
+        <li>
+          Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
+        </li>
+      </ul>
 
-            <p>
-              <img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
-            </p>
+      <p>
+        <img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
+      </p>
 		</>
 	)
 }

demo/src/Test.tsx

@@ -5,7 +5,7 @@ export const Try: React.FC = () => {
 		<>
 			<h2 id="try">Try for yourself</h2>
 
-			<iframe src="https://codesandbox.io/embed/react-shapes-ml4kl?fontsize=14" title="react-shapes" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style={{ width:'100%', maxWidth: 1000, height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+			{/* <iframe src="https://codesandbox.io/embed/react-shapes-ml4kl?fontsize=14" title="react-shapes" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style={{ width:'100%', maxWidth: 1000, height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe> */}
 		</>
 	)
 }

demo/src/docs/Intro.tsx

@@ -19,8 +19,8 @@ export const VersionHistory = () => {
 				<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
+						<a href="https://www.reddit.com/user/MahNonAnon/" rel="noopener noreferrer" target="_blank">u/MahNonAnon</a> and{" "}
+						<a href="https://www.reddit.com/user/trevoreyre/" rel="noopener noreferrer" target="_blank">u/trevoreyre</a> on Reddit
 						for suggestion of this).
 					</li>
 					<li>

demo/src/docs/Try.tsx

@@ -22,6 +22,14 @@
 		.spaces-resize-handle {
 			background-color: #333 !important;
 		}
+
+		button {
+			margin-right: 10px;
+			border: none;
+			background-color: #555;
+			color: white;
+			padding: 5px 15px;
+		}
 	}
 
 	.side-bar-container {

demo/src/docs/VersionHistory.tsx

@@ -28,18 +28,21 @@ const Header = () => {
 }
 
 const Main = () => {
+	const [ sidebarVisible, setSidebarVisible ] = React.useState(true);
+	const [ sidebarWide, setSidebarWide ] = React.useState(false);
+
 	return (
 		<Space.Fill style={{ backgroundColor: '#1E1E1E' }}>
 			<Space.Fill>
 				<IconPane />
-				<SideBar />
-				<Editor />
+				<SideBar wide={sidebarWide} visible={sidebarVisible} />
+				<Editor toggleSize={() => setSidebarWide(!sidebarWide)} toggleVisibility={() => setSidebarVisible(!sidebarVisible)} />
 			</Space.Fill>
 		</Space.Fill>
 	)
 }
 
-const Editor = () => {
+const Editor : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
 	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 = {
@@ -61,7 +64,7 @@ const Editor = () => {
 						theme="vs-dark" />
 				</Space.Fill>
 			</Space.Fill>
-			<BottomPane />
+			<BottomPane toggleSize={props.toggleSize} toggleVisibility={props.toggleVisibility} />
 		</Space.Fill>
 	)
 }
@@ -73,9 +76,10 @@ const IconPane = () => {
 	)
 }
 
-const SideBar = () => {
+const SideBar : React.FC<{ wide: boolean, visible: boolean }> = (props) => {
 	return (
-		<Space.LeftResizable order={2} className="side-bar" size={300} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
+		props.visible ?
+		<Space.LeftResizable order={2} className="side-bar" size={props.wide ? 500 : 300} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
 			<SideBarPane order={1} title="Open editors" height={200}>
 
 			</SideBarPane>
@@ -85,7 +89,8 @@ const SideBar = () => {
 			<SideBarPane fill={true} title="Outline">
 
 			</SideBarPane>
-		</Space.LeftResizable>
+		</Space.LeftResizable> :
+		null
 	)
 }
 
@@ -117,9 +122,11 @@ const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
 	)
 }
 
-const BottomPane = () => {
+const BottomPane : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
 	return (
-		<Space.BottomResizable className="bottom-pane" size="25%" handleSize={2}>
+		<Space.BottomResizable className="bottom-pane" size="25%" handleSize={2} centerContent={Space.CenterType.HorizontalVertical}>
+			<button onClick={props.toggleVisibility}>Toggle sidebar visibility</button>
+			<button onClick={props.toggleSize}>Toggle sidebar size</button>
 		</Space.BottomResizable>
 	)
 }