Refactored and and allowed ID props to override unique space id

Author: aeagle

demo/src/ui-demo/Layers.tsx

@@ -6,7 +6,7 @@ export const LayersDemo = () => {
 	const [ fixedSideBarHovered, setFixedSideBarHovered ] = React.useState(false);
 	const [ floatingSideBarHovered, setFloatingSideBarHovered ] = React.useState(false);
 	const [ showLayer1, setShowLayer1 ] = React.useState(true);
-	const [ showLayer2, setShowLayer2 ] = React.useState(true);
+	const [ showLayer2, setShowLayer2 ] = React.useState(false);
 
 	return (
 		<Space.Fill className="layers-demo">
@@ -20,14 +20,15 @@ export const LayersDemo = () => {
 					<Space.Layer zIndex={0}>
 
 						<Space.Left
+							id="layer_1_left"
 							size={fixedSideBarHovered ? "75%" : "60%" } 
 							onMouseEnter={() => setFixedSideBarHovered(true)} 
 							onMouseLeave={() => setFixedSideBarHovered(false)} 
 							as="nav">
 							{Description("Left fixed (zIndex = 0)")}
 						</Space.Left>
 
-						<Space.Fill as="main">
+						<Space.Fill as="main" id="layer_1_main">
 							{Description("Fill space not affected by floated left space in different layer but is affected by left space in same layer (zIndex = 0)")}
 						</Space.Fill>
 
@@ -38,6 +39,7 @@ export const LayersDemo = () => {
 					<Space.Layer zIndex={1}>
 
 						<Space.Left 
+							id="layer_2_left"
 							order={1}
 							size={floatingSideBarHovered ? "30%" : "15%" } 
 							onMouseEnter={() => setFloatingSideBarHovered(true)} 
@@ -46,6 +48,7 @@ export const LayersDemo = () => {
 							{Description("Left floated (zIndex = 1)")}
 						</Space.Left>
 						<Space.Left 
+							id="layer_2_left1"
 							order={2}
 							size="15%" 
 							as="section">

demo/src/ui-demo/Windows.tsx

@@ -47,18 +47,18 @@ const Window : React.FC<IWindowProps> = (props) => {
             width={"50%"} 
             height={"50%"}>
 
-            <WindowInner />
+            <WindowInner onClick={() => props.onClick && props.onClick(props.window)} />
 
         </Space.Positioned>
     )
 }
 
-const WindowInner : React.FC = (props) => {
+const WindowInner : React.FC<{ onClick?: () => void }> = (props) => {
     const parentSpace = Space.useParentSpace();
 
     return (
         <>
-            <Space.Top className="title-bar" onMouseDown={parentSpace.startDrag} size={40}>
+            <Space.Top className="title-bar" onMouseDown={e => { props.onClick && props.onClick(); parentSpace.startDrag(e); }} size={40}>
                 {Description(`Window title`)}
             </Space.Top>
             <Space.Fill className="content" centerContent={Space.CenterType.HorizontalVertical}>

react-spaces/package-lock.json

@@ -14,8 +14,7 @@
   "license": "MIT",
   "description": "React Layout Components",
   "dependencies": {
-    "css-element-queries": "^1.2.1",
-    "guid-typescript": "^1.0.9"
+    "css-element-queries": "^1.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

react-spaces/package.json

@@ -26,7 +26,7 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 			height: isVerticalSpace(props) ? props.anchorSize || 0 : props.height,
 			debug: props.debug !== undefined ? props.debug : false,
 		})
-	}, [ props.left, props.top, props.bottom, props.right, props.width, props.height, props.anchor, props.anchorSize, props.debug ]);
+	}, [ props.zIndex, props.left, props.top, props.bottom, props.right, props.width, props.height, props.anchor, props.anchorSize, props.debug ]);
 
 	// Setup / cleanup
 	React.useEffect(() => {
@@ -72,7 +72,10 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 	};
 
 	if (parentContext) {
-		onRemove.current = () => parentContext.removeSpaceTaker(state.id);
+		onRemove.current = () => {
+			console.log(`Removing ${state.id}`);
+			parentContext.removeSpaceTaker(state.id);
+		}
 
 		let adjustedTop: string[] = [];
 		let adjustedLeft: string[] = [];

react-spaces/src/Globals/Hooks.tsx react-spaces/src/Globals/Hooks.tsreact-spaces/src/Globals/Hooks.tsx renamed to react-spaces/src/Globals/Hooks.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Resizable, ResizeType } from '../Resizable';
-import { Guid } from 'guid-typescript';
 import { AnchorType, AllProps, IState, ISpaceContext, ISpaceTaker, AnchorToResizeTypeMap } from './Types';
 
 export const getSizeString = 
@@ -15,8 +14,15 @@ export const isHorizontalSpace = (props: AllProps) =>
 export const isVerticalSpace = (props: AllProps) => 
 	props.anchor && (props.anchor === AnchorType.Top || props.anchor === AnchorType.Bottom)
 
+const uuid = () =>
+	"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
+		  let random = Math.random() * 16 | 0;
+		  let value = char === "x" ? random : (random % 4 + 8);
+		  return value.toString(16);
+	});
+
 export const initialState = (props: AllProps) => ({
-	id: Guid.create().toString(),
+	id: props.id || uuid(),
 	currentWidth: 0,
 	currentHeight: 0,
 	adjustedSize: 0,

react-spaces/src/Globals/Utils.tsx

@@ -18,6 +18,7 @@ export const Positioned : React.FC<IPublicProps & IResizableProps & IPositionedP
 
 const SpaceInternal : React.FC<AllProps> = (props) => {
 
+	console.log(props.id);
 	const divElementRef = React.useRef<HTMLDivElement>();
 
 	const {