Added prop types for all space components

react-spaces/package.json

@@ -33,6 +33,7 @@
     "@babel/core": "^7.5.5",
     "@types/jest": "^24.0.15",
     "@types/node": "^12.6.8",
+    "@types/prop-types": "^15.7.3",
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.4",
     "react": "^16.9.0",
@@ -51,7 +52,8 @@
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react-dom": "^16.8.0",
+    "prop-types": "^15.7.2"
   },
   "scripts": {
     "start": "rollup -c -w",

react-spaces/src/FixedSizeContainer.tsx → react-spaces/src/Fixed.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as Spaces from './Space';
 import './Styles.css';
+import * as PropTypes from "prop-types";
 
 interface IProps {
 	className?: string,
@@ -28,4 +29,11 @@ export const Fixed : React.FC<IProps> = (props) => {
 		</Spaces.Fill>
 	</div>
 	)
+}
+
+Fixed.propTypes = {
+	className: PropTypes.string,
+	style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+	width: PropTypes.number,
+	height: PropTypes.number.isRequired
 }

react-spaces/src/Globals/Debounce.ts

@@ -0,0 +1,10 @@
+export const debounce = <F extends ((...args: any) => any)>(func: F, waitFor: number) => {
+    let timeout: number = 0
+
+    const debounced = (...args: any) => {
+        window.clearTimeout(timeout)
+        timeout = window.setTimeout(() => func(...args), waitFor)
+    }
+
+    return debounced as (...args: Parameters<F>) => ReturnType<F>
+}

react-spaces/src/Globals/Hooks.ts

@@ -1,10 +1,9 @@
-import { AllProps, IState, AnchorTypes } from './Types';
+import { AllProps, IState, AnchorTypes, ResizeType } from './Types';
 import * as React from 'react';
 import { initialState, isHorizontalSpace, isVerticalSpace, getSizeString, isFilledSpace, applyResize, createContext } from './Utils';
 import { ResizeSensor } from 'css-element-queries';
 import { AnchorType } from './Types';
 import { SpaceContext, SpaceLayerContext } from './Contexts';
-import { ResizeType } from '../Resizable';
 
 export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<HTMLElement | undefined>) => {
 

react-spaces/src/Globals/Types.ts

@@ -1,4 +1,11 @@
-import { ResizeType } from 'src/Resizable';
+import * as PropTypes from "prop-types";
+
+export enum ResizeType {
+	Left = "resize-left",
+	Right = "resize-right",
+	Top = "resize-top",
+	Bottom = "resize-bottom"
+}
 
 export enum AnchorType {
 	Left = "anchor-left",
@@ -22,9 +29,9 @@ export const AnchorToResizeTypeMap = {
 }
 
 export enum CenterType {
-	None,
-	Vertical,
-	HorizontalVertical
+	None = "none",
+	Vertical = "vertical",
+	HorizontalVertical = "horizontalVertical"
 }
 
 export interface IPublicProps {
@@ -44,25 +51,60 @@ export interface IPublicProps {
 	onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
 }
 
+export const publicProps = {
+	id: PropTypes.string,
+	className: PropTypes.string,
+	style: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]),
+	scrollable: PropTypes.bool,
+	trackSize: PropTypes.bool,
+	centerContent: PropTypes.oneOf([ CenterType.None, CenterType.Vertical, CenterType.HorizontalVertical ]),
+	as: PropTypes.string,
+	debug: PropTypes.bool,
+	zIndex: PropTypes.number,
+	onClick: PropTypes.func,
+	onMouseDown: PropTypes.func,
+	onMouseEnter: PropTypes.func,
+	onMouseLeave: PropTypes.func
+}
+
 export interface IPrivateProps {
 	anchorSize?: string | number,
 	anchor?: AnchorType,
 	resizable?: boolean,
 	order?: number
 }
 
+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
+}
+
 export interface IAnchoredProps {
 	size: number | string,
 	order?: number
 }
 
+export const anchoredProps = {
+	size: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired,
+	order: PropTypes.number
+}
+
 export interface IResizableProps {
 	handleSize?: number,
 	overlayHandle?: boolean,
 	minimumSize?: number,
 	maximumSize?: number
 }
 
+export const resizableProps = {
+	handleSize: PropTypes.number,
+	overlayHandle: PropTypes.bool,
+	minimumSize: PropTypes.number,
+	maximumSize: PropTypes.number
+}
+
 export interface IPositionedProps {
 	left?: string | number,
 	top?: string | number,
@@ -73,8 +115,20 @@ export interface IPositionedProps {
 	resizable?: boolean
 }
 
+export const positionedProps = {
+	left: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+	top: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+	right: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+	bottom: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+	width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+	height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+	resizable: PropTypes.bool
+}
+
 export type AllProps = IPublicProps & IPrivateProps & IResizableProps & IPositionedProps;
 
+export const allProps = { ...publicProps, ...privateProps, ...resizableProps, ...positionedProps };
+
 export interface IState {
 	id: string,
 	currentWidth: number,

react-spaces/src/Globals/Utils.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Resizable, ResizeType } from '../Resizable';
-import { AnchorType, AllProps, IState, ISpaceContext, ISpaceTaker, AnchorToResizeTypeMap } from './Types';
+import { Resizable } from '../Resizable';
+import { AnchorType, AllProps, IState, ISpaceContext, ISpaceTaker, AnchorToResizeTypeMap, ResizeType } from './Types';
 
 export const getSizeString = 
 	(size: string | number) => typeof(size) === "string" ? size : `${size}px`;
@@ -114,15 +114,4 @@ export const applyResize = (props: AllProps, state: IState, setState: (stateDelt
 	}
 
 	return { resizeHandle: null, resizeType: null };
-}
-
-export const debounce = <F extends ((...args: any) => any)>(func: F, waitFor: number) => {
-    let timeout: number = 0
-
-    const debounced = (...args: any) => {
-        window.clearTimeout(timeout)
-        timeout = window.setTimeout(() => func(...args), waitFor)
-    }
-
-    return debounced as (...args: Parameters<F>) => ReturnType<F>
 }

react-spaces/src/Resizable.tsx

@@ -1,13 +1,8 @@
 import * as React from 'react';
 import './Styles.css';
-import { debounce } from './Globals/Utils';
-
-export enum ResizeType {
-	Left = "resize-left",
-	Right = "resize-right",
-	Top = "resize-top",
-	Bottom = "resize-bottom"
-}
+import { debounce } from './Globals/Debounce';
+import { ResizeType } from './Globals/Types';
+import * as PropTypes from 'prop-types';
 
 interface IProps {
 	type: ResizeType,
@@ -73,4 +68,13 @@ export const Resizable : React.FC<IProps> = (props) => {
 			onMouseDown={startResize}
 			onTouchStart={startTouchResize} />
 	)
+}
+
+Resizable.propTypes = {
+	type: PropTypes.oneOf([ ResizeType.Bottom, ResizeType.Left, ResizeType.Right, ResizeType.Top ]).isRequired,
+	width: PropTypes.number,
+	height: PropTypes.number,
+	minimumAdjust: PropTypes.number.isRequired,
+	maximumAdjust: PropTypes.number,
+	onResize: PropTypes.any
 }

react-spaces/src/Space.tsx

@@ -1,20 +1,30 @@
 import * as React from 'react';
-import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IPositionedProps, CenterType } from './Globals/Types';
+import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IPositionedProps, CenterType, publicProps, anchoredProps, resizableProps, positionedProps, allProps } from './Globals/Types';
 import { SpaceContext, SpaceInfoContext } from './Globals/Contexts';
 import { useSpace } from './Globals/Hooks';
 import './Styles.css';
 import { CenteredVertically, Centered } from './Centered';
 
 export const Fill : React.FC<IPublicProps> = (props) => <SpaceInternal {...props} />
+Fill.propTypes = publicProps;
 export const Top : React.FC<IPublicProps & IAnchoredProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Top} anchorSize={props.size} />
+Top.propTypes = {...publicProps, ...anchoredProps};
 export const Left : React.FC<IPublicProps & IAnchoredProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Left} anchorSize={props.size} />
+Left.propTypes = {...publicProps, ...anchoredProps};
 export const Bottom : React.FC<IPublicProps & IAnchoredProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Bottom} anchorSize={props.size} />
+Bottom.propTypes = {...publicProps, ...anchoredProps};
 export const Right : React.FC<IPublicProps & IAnchoredProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Right} anchorSize={props.size} />
+Right.propTypes = {...publicProps, ...anchoredProps};
 export const TopResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Top} anchorSize={props.size} resizable={true} />
+TopResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
 export const LeftResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Left} anchorSize={props.size} resizable={true} />
+LeftResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
 export const BottomResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Bottom} anchorSize={props.size} resizable={true} />
+BottomResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
 export const RightResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Right} anchorSize={props.size} resizable={true} />
+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) => {
 
@@ -66,4 +76,5 @@ const SpaceInternal : React.FC<AllProps> = (props) => {
 			</SpaceInfoContext.Provider>
 		</SpaceContext.Provider>
 	)
-}
+}
+SpaceInternal.propTypes = allProps;

react-spaces/src/FullPageContainer.tsx → react-spaces/src/ViewPort.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as Spaces from './Space';
 import './Styles.css';
+import * as PropTypes from "prop-types";
 
 interface IProps {
 	className?: string,
@@ -24,4 +25,12 @@ export const ViewPort : React.FC<IProps> = (props) => (
 			{props.children}
 		</Spaces.Fill>
 	</div>
-)
+)
+
+ViewPort.propTypes = {
+	className: PropTypes.string,
+	left: PropTypes.number,
+	top: PropTypes.number,
+	right: PropTypes.number,
+	bottom: PropTypes.number
+}

react-spaces/src/index.ts

@@ -1,7 +1,7 @@
 export * from './Centered';
 export * from './ClearFix';
-export * from './FixedSizeContainer';
-export * from './FullPageContainer';
+export * from './Fixed';
+export * from './ViewPort';
 export * from './Space';
 export * from './Layer';
 export * from './SpaceInfo';