Merge pull request #44 from aeagle/fix/42-zindex-change

Ensure zIndex changes on space refreshes related spaces in same parent

Author: aeagle

react-spaces/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spaces",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",

react-spaces/src/Globals/Hooks.ts

@@ -16,6 +16,7 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 	const parentContext = React.useContext(SpaceContext);
 	const layerContext = React.useContext(SpaceLayerContext);
 	const currentZIndex = props.zIndex || layerContext || 0;
+	const previouszIndex = usePrevious(currentZIndex);
 
 	// Deal with property changes to size / anchoring 
 	React.useEffect(() => {
@@ -32,8 +33,11 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 		})
 		if (parentContext) {
 			parentContext.updateSpaceTakerAdjustedSize(state.id, 0);
+			if (currentZIndex !== previouszIndex) {
+				parentContext.updateSpaceTakerLayer(state.id, currentZIndex);
+			}
 		}
-	}, [ props.zIndex, props.left, props.top, props.bottom, props.right, props.width, props.height, props.anchor, props.anchorSize, props.debug ]);
+	}, [ currentZIndex, props.left, props.top, props.bottom, props.right, props.width, props.height, props.anchor, props.anchorSize, props.debug ]);
 
 	// Setup / cleanup
 	React.useEffect(() => {
@@ -200,6 +204,20 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 	} 
 }
 
+function usePrevious<T>(value: T) {
+	// The ref object is a generic container whose current property is mutable ...
+	// ... and can hold any value, similar to an instance property on a class
+	const ref = React.useRef<T>();
+	
+	// Store current value in ref
+	React.useEffect(() => {
+	  ref.current = value;
+	}, [value]); // Only re-run if value changes
+	
+	// Return previous value (happens before update in useEffect above)
+	return ref.current;
+}
+
 export const useParentSpace = () => {
 	const parentContext = React.useContext(SpaceContext);
 

react-spaces/src/Globals/Types.ts

@@ -162,6 +162,7 @@ export interface ISpaceContext {
 	registerSpaceTaker: (spaceTaker: ISpaceTaker) => void,
 	removeSpaceTaker: (id: string) => void,
 	updateSpaceTakerAdjustedSize: (id: string, adjustedSize: number) => void,
+	updateSpaceTakerLayer: (id: string, zIndex: number) => void,
 	updateDebug: (id: string, debug: boolean) => void,
 	startDrag: (e: React.MouseEvent) => void
 }

react-spaces/src/Globals/Utils.tsx

@@ -71,6 +71,9 @@ export const createContext = (
 		updateSpaceTakerAdjustedSize:
 			(id: string, adjustedSize: number) =>
 				setState({ spaceTakers: state.spaceTakers.map(t => t.id === id ? {...t, ...{ adjustedSize: adjustedSize }} : t) }),
+		updateSpaceTakerLayer:
+			(id: string, zIndex: number) =>
+				setState({ spaceTakers: state.spaceTakers.map(t => t.id === id ? {...t, ...{ zIndex: zIndex }} : t) }),
 		updateDebug:
 			(id: string, debug: boolean) =>
 				setState({ spaceTakers: state.spaceTakers.map(t => t.id === id ? {...t, ...{ debug: debug }} : t) }),