Added react events to top-level spaces and added ability to cancel resize

Author: aeagle

react-spaces/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spaces",
-  "version": "0.1.21",
+  "version": "0.1.22-alpha.1",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",

react-spaces/src/Fixed.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import './Styles.css';
 import * as PropTypes from "prop-types";
 import { SpaceContext } from './Globals/Contexts';
-import { ISpace } from './Globals/Types';
+import { ISpace, IReactEvents } from './Globals/Types';
 import { createSpaceContext } from './Globals/ISpaceContext';
 import { HeadStyles } from './HeadStyles';
 
-interface IProps {
+interface IProps extends IReactEvents {
 	className?: string,
 	style?: React.CSSProperties,
 	width?: number,
@@ -27,7 +27,15 @@ export const Fixed : React.FC<IProps> = (props) => {
 	return (
 	<div 
 		className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}`}
-		style={style}>
+		style={style}
+		onClick={props.onClick}
+		onMouseDown={props.onMouseDown}
+		onMouseEnter={props.onMouseEnter}
+		onMouseLeave={props.onMouseLeave}
+		onMouseMove={props.onMouseMove}
+		onTouchStart={props.onTouchStart}
+		onTouchMove={props.onTouchMove}
+		onTouchEnd={props.onTouchEnd}>
 		<HeadStyles spaces={children} />
 		<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
 			{props.children}

react-spaces/src/Globals/Types.ts

@@ -34,16 +34,7 @@ export enum CenterType {
 	HorizontalVertical = "horizontalVertical"
 }
 
-export interface IPublicProps {
-	id?: string,
-	className?: string,
-	style?: React.CSSProperties,
-	scrollable?: boolean,
-	trackSize?: boolean,
-	centerContent?: CenterType,
-	as?: string,
-	children?: React.ReactNode,
-	zIndex?: number,
+export interface IReactEvents {
 	onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
 	onMouseDown?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
 	onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
@@ -54,6 +45,18 @@ export interface IPublicProps {
 	onTouchEnd?: (event: React.TouchEvent<HTMLElement>) => void
 }
 
+export interface IPublicProps extends IReactEvents {
+	id?: string,
+	className?: string,
+	style?: React.CSSProperties,
+	scrollable?: boolean,
+	trackSize?: boolean,
+	centerContent?: CenterType,
+	as?: string,
+	children?: React.ReactNode,
+	zIndex?: number
+}
+
 export const publicProps = {
 	id: PropTypes.string,
 	className: PropTypes.string,
@@ -103,7 +106,7 @@ export interface IResizableProps {
 	overlayHandle?: boolean,
 	minimumSize?: number,
 	maximumSize?: number,
-	onResizeStart?: () => void,
+	onResizeStart?: () => boolean | void,
 	onResizeEnd?: (newSize: number) => void
 }
 

react-spaces/src/Space.tsx

@@ -33,6 +33,7 @@ export const RightResizable : React.FC<IPublicProps & IAnchoredProps & IResizabl
 RightResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
 export const Positioned : React.FC<IPublicProps & IResizableProps & IPositionedProps> = (props) => <SpaceInternal {...props} />
 RightResizable.propTypes = {...publicProps, ...resizableProps, ...positionedProps};
+export const Custom : React.FC<AllProps> = (props) => <SpaceInternal {...props} />
 
 export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 
@@ -95,6 +96,13 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 			if (!divElementRef.current) {
 				return;
 			}
+			
+			if (props.onResizeStart) {
+				const result = props.onResizeStart();
+				if (typeof result === "boolean" && !result) {
+					return;
+				}
+			}
 
 			var rect = divElementRef.current.getBoundingClientRect();
 			var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
@@ -129,13 +137,19 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 			window.addEventListener('touchend', removeListener);
 			e.preventDefault();
 			e.stopPropagation();
-			props.onResizeStart && props.onResizeStart();
 		};
 
 		const startResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
 			if (!divElementRef.current) {
 				return;
 			}
+			
+			if (props.onResizeStart) {
+				const result = props.onResizeStart();
+				if (typeof result === "boolean" && !result) {
+					return;
+				}
+			}
 
 			var rect = divElementRef.current.getBoundingClientRect();
 			var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
@@ -170,7 +184,6 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 			window.addEventListener('mouseup', removeListener);
 			e.preventDefault();
 			e.stopPropagation();
-			props.onResizeStart && props.onResizeStart();
 		};
 
 		resizeHandle =

react-spaces/src/ViewPort.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import './Styles.css';
 import * as PropTypes from "prop-types";
 import { SpaceContext } from './Globals/Contexts';
-import { ISpace } from './Globals/Types';
+import { ISpace, IReactEvents } from './Globals/Types';
 import { createSpaceContext } from './Globals/ISpaceContext';
 import { HeadStyles } from './HeadStyles';
 
-interface IProps {
+interface IProps extends IReactEvents {
 	className?: string,
 	left?: number,
 	top?: number,
@@ -25,7 +25,15 @@ export const ViewPort : React.FC<IProps> = (props) => {
 				top: props.top || 0, 
 				right: props.right || 0, 
 				bottom: props.bottom || 0
-			}}>
+			}}
+			onClick={props.onClick}
+			onMouseDown={props.onMouseDown}
+			onMouseEnter={props.onMouseEnter}
+			onMouseLeave={props.onMouseLeave}
+			onMouseMove={props.onMouseMove}
+			onTouchStart={props.onTouchStart}
+			onTouchMove={props.onTouchMove}
+			onTouchEnd={props.onTouchEnd}>
 			<HeadStyles spaces={children} />
 			<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
 				{props.children}

react-spaces/src/index.ts

@@ -14,7 +14,8 @@ export {
 	RightResizable,
 	TopResizable,
 	BottomResizable,
-	Positioned
+	Positioned,
+	Custom
 } from './Space';
 
 export {