Fixed react types

Author: aeagle

src/components/Anchored.tsx

@@ -1,10 +1,10 @@
-import { ICommonProps, SizeUnit, Type, AnchorType, ResizeHandlePlacement } from "../core-types";
+import { SizeUnit, Type, AnchorType, ResizeHandlePlacement } from "../core-types";
 import * as React from "react";
 import { Space } from "./Space";
 import * as PropTypes from "prop-types";
-import { commonProps } from "../core-react";
+import { commonProps, IReactSpaceProps } from "../core-react";
 
-interface IAnchorProps extends ICommonProps {
+interface IAnchorProps extends IReactSpaceProps {
 	size: SizeUnit;
 	order?: number;
 	resizable?: boolean;

src/components/Custom.tsx

@@ -1,10 +1,10 @@
-import { ICommonProps, Type, SizeUnit, IPositionalProps, AnchorType, ResizeType, ResizeHandlePlacement } from "../core-types";
+import { Type, SizeUnit, IPositionalProps, AnchorType, ResizeType, ResizeHandlePlacement } from "../core-types";
 import * as React from "react";
 import { Space } from "./Space";
 import * as PropTypes from "prop-types";
-import { commonProps } from "../core-react";
+import { commonProps, IReactSpaceProps } from "../core-react";
 
-interface ICustomProps extends ICommonProps {
+interface ICustomProps extends IReactSpaceProps {
 	left?: SizeUnit | undefined;
 	top?: SizeUnit | undefined;
 	right?: SizeUnit | undefined;

src/components/Fill.tsx

@@ -1,9 +1,9 @@
-import { ICommonProps, Type } from "../core-types";
+import { Type } from "../core-types";
 import * as React from "react";
 import { Space } from "./Space";
-import { commonProps } from "../core-react";
+import { commonProps, IReactSpaceProps } from "../core-react";
 
-export const Fill: React.FC<ICommonProps> = (props) => (
+export const Fill: React.FC<IReactSpaceProps> = (props) => (
 	<Space {...props} type={Type.Fill} position={{ left: 0, top: 0, right: 0, bottom: 0 }}>
 		{props.children}
 	</Space>

src/components/Fixed.tsx

@@ -1,10 +1,10 @@
-import { ICommonProps, SizeUnit, Type } from "../core-types";
+import { SizeUnit, Type } from "../core-types";
 import * as React from "react";
 import { Space } from "./Space";
 import * as PropTypes from "prop-types";
-import { commonProps } from "../core-react";
+import { commonProps, IReactSpaceProps } from "../core-react";
 
-interface IFixedProps extends ICommonProps {
+interface IFixedProps extends IReactSpaceProps {
 	width?: SizeUnit;
 	height: SizeUnit;
 }

src/components/Positioned.tsx

@@ -1,10 +1,10 @@
-import { ICommonProps, Type, SizeUnit, ResizeType } from "../core-types";
+import { Type, SizeUnit, ResizeType } from "../core-types";
 import * as React from "react";
 import { Space } from "./Space";
 import * as PropTypes from "prop-types";
-import { commonProps } from "../core-react";
+import { commonProps, IReactSpaceProps } from "../core-react";
 
-interface IPositionedProps extends ICommonProps {
+interface IPositionedProps extends IReactSpaceProps {
 	left?: SizeUnit;
 	top?: SizeUnit;
 	right?: SizeUnit;

src/components/Space.tsx

@@ -1,5 +1,5 @@
 import { CenterType, ResizeHandlePlacement, AnchorType, Type } from "../core-types";
-import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceProps } from "../core-react";
+import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps } 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<IReactSpaceProps> {
+export class Space extends React.Component<IReactSpaceInnerProps> {
 	public render() {
 		return <SpaceInner {...this.props} wrapperInstance={this} />;
 	}
 }
 
-const SpaceInner: React.FC<IReactSpaceProps & { wrapperInstance: Space }> = (props) => {
+const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> = (props) => {
 	if (!props.id && !props.wrapperInstance["_react_spaces_uniqueid"]) {
 		props.wrapperInstance["_react_spaces_uniqueid"] = `s${shortuuid()}`;
 	}

src/components/ViewPort.tsx

@@ -1,10 +1,10 @@
-import { ICommonProps, Type, SizeUnit } from "../core-types";
+import { Type, SizeUnit } from "../core-types";
 import * as React from "react";
 import { Space } from "./Space";
 import * as PropTypes from "prop-types";
-import { commonProps } from "../core-react";
+import { commonProps, IReactSpaceProps } from "../core-react";
 
-interface IViewPortProps extends ICommonProps {
+interface IViewPortProps extends IReactSpaceProps {
 	left?: SizeUnit;
 	right?: SizeUnit;
 	top?: SizeUnit;

src/components/tests/Common.tsx

@@ -23,6 +23,15 @@ export const commonPropsTests = (name: string, component: React.ReactNode, expec
 		});
 	});
 
+	test(`${name} with id applied`, async () => {
+		// arrange, act
+		const { container } = render(<ViewPort>{mutateComponent(component, { id: "test" })}</ViewPort>);
+
+		// assert
+		const sut = container.querySelector("#test")!;
+		expect(sut.id).toBe("test");
+	});
+
 	test(`${name} with class applied`, async () => {
 		// arrange, act
 		const { container } = render(<ViewPort>{mutateComponent(component, { id: "test", className: "custom-class" })}</ViewPort>);
@@ -132,11 +141,12 @@ export const commonAnchorTests = (
 
 		// assert
 		const style = window.getComputedStyle(sut);
+		const style1 = window.getComputedStyle(sut1);
+
 		expect(size(style)).toBe("50px");
 		expect(edge(style)).toBe("0px");
 		expect(oppositeEdge(style)).toBe("");
 
-		const style1 = window.getComputedStyle(sut1);
 		expect(size(style1)).toBe("100px");
 		expect(edge(style1)).toBe("calc(0px + 50px)");
 		expect(oppositeEdge(style1)).toBe("");

src/core-react.ts

@@ -47,11 +47,13 @@ export interface IReactEvents {
 	onTouchEnd?: (event: React.TouchEvent<HTMLElement>) => void;
 }
 
-export interface IReactSpaceProps extends ISpaceProps, IReactEvents {
+export interface IReactSpaceProps extends ICommonProps, IReactEvents {
 	style?: React.CSSProperties;
 	as?: keyof React.ReactDOM | React.ComponentType<ICommonProps>;
 }
 
+export interface IReactSpaceInnerProps extends IReactSpaceProps, ISpaceProps, IReactEvents {}
+
 export interface IReactSpacesOptions {
 	debug?: boolean;
 }
@@ -64,7 +66,7 @@ export function useForceUpdate() {
 	return update;
 }
 
-export function useSpace(props: IReactSpaceProps) {
+export function useSpace(props: IReactSpaceInnerProps) {
 	const store = currentStore;
 	const update = useForceUpdate();
 	const parent = React.useContext(ParentContext);