Removed unnecessary top most markup at ViewPort and Fixed components

Author: aeagle

react-spaces/src/Fixed.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as Spaces from './Space';
 import './Styles.css';
 import * as PropTypes from "prop-types";
+import { SpaceInternal } from './Space';
 
 interface IProps {
 	className?: string,
@@ -23,10 +23,9 @@ export const Fixed : React.FC<IProps> = (props) => {
 	<div 
 		className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}`}
 		style={style}>
-
-		<Spaces.Fill>
+		<SpaceInternal topMost={true}>
 			{props.children}
-		</Spaces.Fill>
+		</SpaceInternal>
 	</div>
 	)
 }

react-spaces/src/Globals/Hooks.ts

@@ -200,7 +200,8 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 		innerStyle,
 		innerClasses,
 		currentWidth: state.currentWidth,
-		currentHeight: state.currentHeight
+		currentHeight: state.currentHeight,
+		state
 	} 
 }
 

react-spaces/src/Globals/Types.ts

@@ -71,14 +71,16 @@ export interface IPrivateProps {
 	anchorSize?: string | number,
 	anchor?: AnchorType,
 	resizable?: boolean,
-	order?: number
+	order?: number,
+	topMost?: boolean
 }
 
 export const privateProps = {
 	anchorSize: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
 	anchor: PropTypes.oneOf([ AnchorType.Bottom, AnchorType.Left, AnchorType.Right, AnchorType.Top ]),
 	resizable: PropTypes.bool,
-	order: PropTypes.number
+	order: PropTypes.number,
+	topMost: PropTypes.bool
 }
 
 export interface IAnchoredProps {

react-spaces/src/Space.tsx

@@ -26,7 +26,7 @@ RightResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps}
 export const Positioned : React.FC<IPublicProps & IResizableProps & IPositionedProps> = (props) => <SpaceInternal {...props} />
 RightResizable.propTypes = {...publicProps, ...resizableProps, ...positionedProps};
 
-const SpaceInternal : React.FC<AllProps> = (props) => {
+export const SpaceInternal : React.FC<AllProps> = (props) => {
 
 	const divElementRef = React.useRef<HTMLDivElement>();
 
@@ -38,7 +38,8 @@ const SpaceInternal : React.FC<AllProps> = (props) => {
 		innerClasses,
 		resizeHandle,
 		currentWidth,
-		currentHeight
+		currentHeight,
+		state
 	} = useSpace(props, divElementRef);
 
 	let children = props.children;
@@ -53,25 +54,27 @@ const SpaceInternal : React.FC<AllProps> = (props) => {
 		<SpaceContext.Provider value={currentContext}>
 			<SpaceInfoContext.Provider value={{ width: Math.floor(currentWidth), height: Math.floor(currentHeight) }}>
 				{
-					React.createElement(
-						props.as || 'div',
-						{
-							id: props.id,
-							ref: divElementRef,
-							className: outerClasses.join(' '),
-							style: outerStyle,
-							onClick: props.onClick,
-							onMouseDown: props.onMouseDown,
-							onMouseEnter: props.onMouseEnter,
-							onMouseLeave: props.onMouseLeave
-						},
-						<>
-							{ resizeHandle }
-							<div className={innerClasses.join(' ')} style={innerStyle}>
-								{ children }
-							</div>
-						</>
-					)
+					props.topMost ?
+						children :
+						React.createElement(
+							props.as || 'div',
+							{
+								id: state.id,
+								ref: divElementRef,
+								className: outerClasses.join(' '),
+								style: outerStyle,
+								onClick: props.onClick,
+								onMouseDown: props.onMouseDown,
+								onMouseEnter: props.onMouseEnter,
+								onMouseLeave: props.onMouseLeave
+							},
+							<>
+								{ resizeHandle }
+								<div className={innerClasses.join(' ')} style={innerStyle}>
+									{ children }
+								</div>
+							</>
+						)
 				}
 			</SpaceInfoContext.Provider>
 		</SpaceContext.Provider>

react-spaces/src/ViewPort.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as Spaces from './Space';
 import './Styles.css';
 import * as PropTypes from "prop-types";
+import { SpaceInternal } from './Space';
 
 interface IProps {
 	className?: string,
@@ -20,10 +20,9 @@ export const ViewPort : React.FC<IProps> = (props) => (
 			right: props.right || 0, 
 			bottom: props.bottom || 0
 		}}>
-
-		<Spaces.Fill>
+		<SpaceInternal topMost={true}>
 			{props.children}
-		</Spaces.Fill>
+		</SpaceInternal>
 	</div>
 )
 

react-spaces/src/index.ts

@@ -2,9 +2,20 @@ export * from './Centered';
 export * from './ClearFix';
 export * from './Fixed';
 export * from './ViewPort';
-export * from './Space';
 export * from './Layer';
 export * from './SpaceInfo';
+export {
+	Fill,
+	Left,
+	Right,
+	Top,
+	Bottom,
+	LeftResizable,
+	RightResizable,
+	TopResizable,
+	BottomResizable,
+	Positioned
+} from './Space';
 
 export { 
 	useParentSpace