Refactored all state for child spaces to be held at parent space

Author: aeagle

demo/src/App.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import './App.scss';
 import ReactGA from 'react-ga';
-import { Test } from './Test';
-//import { UI } from './ui-demo/UI';
+// import { Test } from './Test';
+import { UI } from './ui-demo/UI';
 
 ReactGA.initialize("UA-144490437-1");
 ReactGA.pageview(window.location.pathname + window.location.search);
 
 const App: React.FC = () => {
-  return <Test />
+  return <UI />
 }
 
 export default App;

demo/src/Test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import * as Space from "react-spaces";
 import './Test.scss';
+import { Info } from "react-spaces";
 
 const COLLAPSED_SIZE = 20;
 const MINIMUM_SIZE = 200;
@@ -27,19 +28,25 @@ export const Test : React.FC = () => {
                 onResizeStart={onResizeStart}
                 onResizeEnd={onResizeEnd}
                 order={1}>
-                    Hello
+                <Space.Info>
+                    {(info) => <span>Hello<br />{info.width} x {info.height}</span>}
+                </Space.Info>
             </Space.LeftResizable>
 
-            <Space.Left
+            <Space.LeftResizable
                 style={{ backgroundColor: 'navy', color: 'white', padding: 10 }}
                 size={200}
                 order={2}>
-                    Something
-            </Space.Left>
+                <Space.Info>
+                    {(info) => <span>Something<br />{info.width} x {info.height}</span>}
+                </Space.Info>
+            </Space.LeftResizable>
 
             <Space.Fill 
                 style={{ backgroundColor: 'red', padding: 10 }}>
-                    World
+                <Space.Info>
+                    {(info) => <span>World<br />{info.width} x {info.height}</span>}
+                </Space.Info>
             </Space.Fill>
 
         </Space.ViewPort>

demo/src/ui-demo/UI.tsx

@@ -125,7 +125,7 @@ const DemoSelection = (props: {
 
 const Main = (props: { selectedDemo: string, showSpaces: boolean }) => {
 	return (
-		<Space.Fill debug={props.showSpaces}>
+		<Space.Fill>
 			{ props.selectedDemo === "resizable" ? <Resizable /> : null }
 			{ props.selectedDemo === "scrollable" ? <ScrollableDemo /> : null }
 			{ props.selectedDemo === "layers" ? <LayersDemo /> : null }

demo/src/ui-demo/Windows.tsx

@@ -58,7 +58,7 @@ const WindowInner : React.FC<{ onClick?: () => void }> = (props) => {
 
     return (
         <>
-            <Space.Top className="title-bar" onMouseDown={e => { props.onClick && props.onClick(); parentSpace.startDrag(e); }} size={40}>
+            <Space.Top className="title-bar" onMouseDown={e => { props.onClick && props.onClick(); parentSpace.startDrag(); }} size={40}>
                 {Description(`Window title`)}
             </Space.Top>
             <Space.Fill className="content" centerContent={Space.CenterType.HorizontalVertical}>

react-spaces/src/Fixed.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import './Styles.css';
 import * as PropTypes from "prop-types";
 import { SpaceInternal } from './Space';
+import { SpaceContext } from './Globals/Contexts';
+import { ISpace } from './Globals/Types';
+import { createSpaceContext } from './Globals/ISpaceContext';
 
 interface IProps {
 	className?: string,
@@ -11,6 +14,8 @@ interface IProps {
 }
 
 export const Fixed : React.FC<IProps> = (props) => {
+	const [ children, setChildren ] = React.useState<ISpace[]>([]);
+
 	const style = {
 		...props.style,
 		...{ 
@@ -23,9 +28,11 @@ export const Fixed : React.FC<IProps> = (props) => {
 	<div 
 		className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}`}
 		style={style}>
-		<SpaceInternal topMost={true}>
-			{props.children}
-		</SpaceInternal>
+		<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
+			<SpaceInternal topMost={true}>
+				{props.children}
+			</SpaceInternal>
+		</SpaceContext.Provider>
 	</div>
 	)
 }

react-spaces/src/Globals/Contexts.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ISpaceContext, ISpaceInfo } from './Types';
+import { ISpaceInfo } from './Types';
+import { ISpaceContext } from './ISpaceContext';
 
 export const SpaceContext = React.createContext<ISpaceContext | null>(null);
 export const SpaceLayerContext = React.createContext<number | null>(null);