Merge pull request #22 from aeagle/feature/react-hooks

Feature/react hooks

Author: aeagle

demo/.env.analyse

@@ -0,0 +1 @@
+ANALYSE_BUNDLE=true

demo/config/webpack.config.js

@@ -27,6 +27,8 @@ const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpack
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const postcssNormalize = require('postcss-normalize');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -272,6 +274,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('./node_modules/react')
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
@@ -475,6 +478,8 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new DuplicatePackageCheckerPlugin(),
+      process.env.ANALYSE_BUNDLE === 'true' && new BundleAnalyzerPlugin(),
       new MonacoWebpackPlugin({
         // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
         languages: ['typescript']

demo/package-lock.json

@@ -24,6 +24,7 @@
     "css-loader": "2.1.1",
     "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
+    "env-cmd": "^9.0.3",
     "eslint": "^5.16.0",
     "eslint-config-react-app": "^4.0.1",
     "eslint-loader": "2.1.2",
@@ -53,7 +54,7 @@
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.6.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.8.6",
+    "react": "^16.9.0",
     "react-app-polyfill": "^1.0.1",
     "react-dev-utils": "^9.0.1",
     "react-dom": "^16.8.6",
@@ -70,14 +71,17 @@
     "typescript": "^3.5.3",
     "url-loader": "1.1.2",
     "webpack": "4.29.6",
+    "webpack-bundle-analyser": "^1.4.0",
+    "webpack-bundle-analyzer": "^3.4.1",
     "webpack-dev-server": "3.2.1",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "4.2.0"
   },
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js"
+    "test": "node scripts/test.js",
+    "analyse": "env-cmd -f .env.analyse node scripts/build.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -144,5 +148,8 @@
     "presets": [
       "react-app"
     ]
+  },
+  "devDependencies": {
+    "duplicate-package-checker-webpack-plugin": "^3.0.0"
   }
 }

demo/package.json

@@ -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/docs/Intro.tsx

@@ -6,6 +6,16 @@ export const KnownIssues = () => {
 			<h2 id="issues">Known issues / limitations</h2>
 
 			<ul>
+				<li>
+					The components in <strong>v0.1.13</strong> have been changed to use React Hooks. This can cause problems if there are
+					multiple versions of React loaded. If you are using webpack you can add to your webpack config:
+					
+					<pre style={{ marginTop: 15 }}>
+						{`alias: { 'react': path.resolve('./node_modules/react') }`}
+					</pre> 
+
+					This will ensure that all references to React resolve to the same version.
+				</li>
 				<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>

demo/src/docs/KnownIssues.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/Try.tsx

@@ -5,6 +5,17 @@ export const VersionHistory = () => {
 		<>
 			<h2 id="changes">Version history</h2>
 
+			<div>
+				<h3>0.1.13</h3> 
+				<ul>
+					<li>
+						Refactored spaces as functional component using hooks.
+					</li>
+					<li>
+						Fixed className type on &lt;ViewPort /&gt; component.
+					</li>
+				</ul>
+			</div>
 			<div>
 				<h3>0.1.11 - 0.1.12</h3> 
 				<ul>
@@ -19,8 +30,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/VersionHistory.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/ui-demo/UI.scss

@@ -7,12 +7,10 @@ import { CenterType } from 'react-spaces';
 
 export const UI = () => {
 	return (
-		<div className="ui-demo">
-			<Space.ViewPort>
+			<Space.ViewPort className="ui-demo">
 				<Header />
 				<Main />
 			</Space.ViewPort>
-		</div>
 	)
 }
 
@@ -28,18 +26,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 +62,7 @@ const Editor = () => {
 						theme="vs-dark" />
 				</Space.Fill>
 			</Space.Fill>
-			<BottomPane />
+			<BottomPane toggleSize={props.toggleSize} toggleVisibility={props.toggleVisibility} />
 		</Space.Fill>
 	)
 }
@@ -73,9 +74,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 +87,8 @@ const SideBar = () => {
 			<SideBarPane fill={true} title="Outline">
 
 			</SideBarPane>
-		</Space.LeftResizable>
+		</Space.LeftResizable> :
+		null
 	)
 }
 
@@ -117,9 +120,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>
 	)
 }