Added centerContent property on space as shorthand instead of using Space.Centered or Space.CenteredVertically components

Author: aeagle

react-spaces/src/components/Globals.ts

@@ -3,4 +3,10 @@ export enum AnchorType {
 	Right = " anchor-right",
 	Top = " anchor-top",
 	Bottom = " anchor-bottom"
+}
+
+export enum CenterType {
+	None,
+	Vertical,
+	HorizontalVertical
 }

react-spaces/src/components/Space.scss

@@ -4,7 +4,7 @@
 	z-index: 1;
 
 	.spaces-space-inner {
-		z-index: 2;
+		z-index: 1;
 		position: absolute;
 		left: 0;
 		top: 0;

react-spaces/src/components/Space.tsx

@@ -1,17 +1,19 @@
 import * as React from 'react';
 import './Space.scss';
-import { AnchorType } from './Globals';
+import { AnchorType, CenterType } from './Globals';
 import { ResizeSensor, ResizeSensorCallback } from 'css-element-queries';
 import { SpaceContext, ISpaceContext, ISpaceTaker } from './SpaceContext';
 import { Guid } from "guid-typescript";
 import { Resizable, ResizeType } from './Resizable';
+import { CenteredVertically, Centered } from './Centered';
 
 interface IPublicProps {
 	id?: string,
 	className?: string,
 	style?: React.CSSProperties,
 	scrollable?: boolean,
 	trackSize?: boolean,
+	centerContent?: CenterType,
 	as?: string
 }
 
@@ -258,6 +260,11 @@ class Space extends React.Component<AllProps, IState> {
 												parentContext.updateSpaceTakerAdjustedSize(this.state.id, adjustedSize); 
 											}); 
 									}} />;
+
+						if (this.props.centerContent === CenterType.Vertical) {
+							children = <CenteredVertically>{children}</CenteredVertically>;
+						} else if (this.props.centerContent === CenterType.HorizontalVertical) {
+							children = <Centered>{children}</Centered>;
 						}
 
 						const adjustedStyle =