Merge pull request #99 from brawcode/issue-84/upstream

Allow React.ComponentType to be used for the `as` prop

Author: aeagle

src/components/Space.tsx

@@ -1,5 +1,5 @@
-import { ISpaceProps, CenterType, ResizeHandlePlacement, AnchorType } from "../core-types";
-import { useSpace, ParentContext, LayerContext, DOMRectContext } from "../core-react";
+import { CenterType, ResizeHandlePlacement, AnchorType } from "../core-types";
+import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceProps } from "../core-react";
 import * as React from "react";
 import { Centered } from "./Centered";
 import { CenteredVertically } from "./CenteredVertically";
@@ -15,13 +15,13 @@ function applyCentering(children: React.ReactNode, centerType: CenterType | unde
 	return children;
 }
 
-export class Space extends React.Component<ISpaceProps> {
+export class Space extends React.Component<IReactSpaceProps> {
 	public render() {
 		return <SpaceInner {...this.props} wrapperInstance={this} />;
 	}
 }
 
-const SpaceInner: React.FC<ISpaceProps & { wrapperInstance: Space }> = (props) => {
+const SpaceInner: React.FC<IReactSpaceProps & { wrapperInstance: Space }> = (props) => {
 	if (!props.id && !props.wrapperInstance["_react_spaces_uniqueid"]) {
 		props.wrapperInstance["_react_spaces_uniqueid"] = `s${shortuuid()}`;
 	}

src/components/stories/Utils.tsx

@@ -82,9 +82,9 @@ export const StandardProps = () => (
 		<PropsHeader>Standard properties</PropsHeader>
 		<Prop
 			name="as"
-			type="string"
+			type="string | React.ComponentType<ICommonProps>"
 			default="div"
-			description="Allows control over the outputted HTML element allowing HTML 5 semantic markup to be created."
+			description="Allows control over the outputted HTML element either through HTML 5 semantic markup or a custom Component."
 		/>
 		<Prop
 			name="centerContent"

src/core-react.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createStore } from "./core";
-import { ISpaceProps, ISpaceStore, ISpaceDefinition, IPositionalProps, ResizeType, CenterType } from "./core-types";
+import { ISpaceProps, ISpaceStore, ISpaceDefinition, IPositionalProps, ResizeType, CenterType, ICommonProps } from "./core-types";
 import { coalesce, shortuuid } from "./core-utils";
 import { ResizeSensor } from "css-element-queries";
 import * as PropTypes from "prop-types";
@@ -15,7 +15,7 @@ export const commonProps = {
 	id: PropTypes.string,
 	className: PropTypes.string,
 	style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-	as: PropTypes.string,
+	as: PropTypes.any,
 	centerContent: PropTypes.oneOf([CenterType.None, CenterType.Vertical, CenterType.HorizontalVertical]),
 	zIndex: PropTypes.number,
 	scrollable: PropTypes.bool,
@@ -30,10 +30,6 @@ export const commonProps = {
 	onTouchEnd: PropTypes.func,
 };
 
-export interface IReactSpacesOptions {
-	debug?: boolean
-}
-
 export interface IReactEvents {
 	onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 	onDoubleClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@@ -46,6 +42,15 @@ export interface IReactEvents {
 	onTouchEnd?: (event: React.TouchEvent<HTMLElement>) => void;
 }
 
+export interface IReactSpaceProps extends ISpaceProps, IReactEvents {
+	style?: React.CSSProperties;
+	as?: keyof React.ReactDOM | React.ComponentType<ICommonProps>;
+}
+
+export interface IReactSpacesOptions {
+	debug?: boolean;
+}
+
 export function useForceUpdate() {
 	const [, setTick] = React.useState(0);
 	const update = React.useCallback(() => {
@@ -54,7 +59,7 @@ export function useForceUpdate() {
 	return update;
 }
 
-export function useSpace(props: ISpaceProps) {
+export function useSpace(props: IReactSpaceProps) {
 	const store = currentStore;
 	const update = useForceUpdate();
 	const parent = React.useContext(ParentContext);
@@ -179,6 +184,6 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
 	}
 
 	return {
-		mouseHandles
+		mouseHandles,
 	};
 }

src/core-types.ts

@@ -44,23 +44,9 @@ export enum CenterType {
 	HorizontalVertical = "horizontalVertical",
 }
 
-export interface IPassThroughEvents {
-	onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-	onDoubleClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-	onMouseDown?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-	onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-	onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-	onMouseMove?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-	onTouchStart?: (event: React.TouchEvent<HTMLElement>) => void;
-	onTouchMove?: (event: React.TouchEvent<HTMLElement>) => void;
-	onTouchEnd?: (event: React.TouchEvent<HTMLElement>) => void;
-}
-
-export interface ICommonProps extends IPassThroughEvents {
+export interface ICommonProps {
 	id?: string;
 	className?: string;
-	style?: React.CSSProperties;
-	as?: string;
 	centerContent?: CenterType;
 	zIndex?: number;
 	scrollable?: boolean;