Merge pull request #53 from aeagle/feature/resize-cancel-extra-events

Feature/resize cancel extra events

Author: aeagle

demo/src/ui-demo/Pinnable.scss

@@ -0,0 +1,6 @@
+.pinnable {
+    .spaces-space {
+        transition-property: width,height,top,left,bottom,right;
+        transition-duration: 0.5s;
+    }
+}

demo/src/ui-demo/Pinnable.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as Space from 'react-spaces';
+import './Pinnable.scss';
 
 export const Pinnable = () => {
     const [leftOpen, setLeftOpen] = React.useState(false);
@@ -9,7 +10,7 @@ export const Pinnable = () => {
 
     return (
       <>
-        <Space.Fill>
+        <Space.Fill className="pinnable">
           <Space.LeftResizable
             order={1}
             size={leftOpen ? "25%" : 50}

react-spaces/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spaces",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "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,
@@ -15,6 +15,7 @@ interface IProps {
 
 export const Fixed : React.FC<IProps> = (props) => {
 	const [ children, setChildren ] = React.useState<ISpace[]>([]);
+	const [ resizing, setResizing ] = React.useState(false);
 
 	const style = {
 		...props.style,
@@ -26,10 +27,18 @@ export const Fixed : React.FC<IProps> = (props) => {
 
 	return (
 	<div 
-		className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}`}
-		style={style}>
+		className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}${resizing ? ` spaces-resizing` : ``}`}
+		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)}>
+		<SpaceContext.Provider value={createSpaceContext(children, setChildren, setResizing)}>
 			{props.children}
 		</SpaceContext.Provider>
 	</div>

react-spaces/src/Globals/ISpaceContext.ts

@@ -4,7 +4,8 @@ import { getSizeString } from './Utils';
 export interface ISpaceContext {
 	level: number,
 	children: ISpace[],
-	updateChildren: (children: ISpace[]) => void
+	updateChildren: (children: ISpace[]) => void,
+	updateResizing: (state: boolean) => void
 }
 
 const recalcSpaces = (spaces: ISpace[]) => {
@@ -115,13 +116,14 @@ export const updateSpace = (context: ISpaceContext, id: string, delta: Partial<I
 export const createSpaceContext = (
 	children: ISpace[],
 	updateChildren: (children: ISpace[]) => void,
-	currentSpace?: ISpace,
+	updateResizing: (state: boolean) => void,
 	parent?: ISpaceContext | null) => {
 
 	const context : ISpaceContext = {
 		level: parent ? parent.level + 1 : 0,
 		children: children,
-		updateChildren: updateChildren
+		updateChildren: updateChildren,
+		updateResizing: updateResizing
 	}
 
 	return context;

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
 }
 
@@ -142,6 +145,7 @@ export const allProps = { ...publicProps, ...privateProps, ...resizableProps, ..
 
 export interface IState {
 	id: string,
+	resizing: boolean,
 	children: ISpace[]
 }
 
@@ -164,7 +168,7 @@ export interface ISpace {
 	right?: number | string,
 	bottom?: number | string,
 	width?: number | string,
-	height?: number | string,
+	height?: number | string
 }
 
 export interface ISpaceInfo {

react-spaces/src/Globals/Utils.ts

@@ -20,7 +20,8 @@ function shortuuid() {
 
 export const initialState = (props: AllProps) => ({
 	id: props.id || `s${shortuuid()}`,
-	children: []
+	children: [],
+	resizing: false
 })
 
 export const cssValue = (value: number | string | undefined, adjusted: number) =>

react-spaces/src/Hooks/useSpace.ts

@@ -129,15 +129,16 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 	const currentContext = 
 		createSpaceContext(
 			state.children, 
-			(children) => setState({ children: children }), 
-			space, 
+			(children) => setState({ children: children }),
+			(resizing) => setState({ resizing: resizing }),
 			parentContext
 		);
 
 	return {
 		space,
 		parentContext,
 		currentContext,
-		currentSize: currentSize || { width: 0, height: 0 }
+		currentSize: currentSize || { width: 0, height: 0 },
+		resizing: state.resizing
 	} 
 }

react-spaces/src/Space.tsx

@@ -32,7 +32,9 @@ 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};
+Positioned.propTypes = {...publicProps, ...resizableProps, ...positionedProps};
+export const Custom : React.FC<AllProps> = (props) => <SpaceInternal {...props} />
+Custom.propTypes = allProps;
 
 export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 
@@ -42,7 +44,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 		space,
 		parentContext,
 		currentContext,
-		currentSize
+		currentSize,
+		resizing
 	} = useSpace(props, divElementRef);
 
 	const handleSize = props.handleSize === undefined ? 5 : props.handleSize;
@@ -95,6 +98,15 @@ 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;
+				}
+			}
+
+			parentContext.updateResizing(true);
 
 			var rect = divElementRef.current.getBoundingClientRect();
 			var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
@@ -115,27 +127,36 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 				lastY = e.touches[0].pageY; 
 				e.preventDefault(); 
 				e.stopImmediatePropagation(); 
-				throttledTouchResize(lastX, lastY); 
+				throttledTouchResize(lastX, lastY);
 			};
 			const removeListener = () => {
 				if (moved) {
 					touchResize(lastX, lastY);
 				}
 				window.removeEventListener('touchmove', withPreventDefault);
 				window.removeEventListener('touchend', removeListener);
+				parentContext.updateResizing(false);
 				onResizeEnd();
 			};
 			window.addEventListener('touchmove', withPreventDefault);
 			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;
+				}
+			}
+
+			parentContext.updateResizing(true);
 
 			var rect = divElementRef.current.getBoundingClientRect();
 			var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
@@ -164,13 +185,13 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 				}
 				window.removeEventListener('mousemove', withPreventDefault);
 				window.removeEventListener('mouseup', removeListener);
+				parentContext.updateResizing(false);
 				onResizeEnd();
 			};
 			window.addEventListener('mousemove', withPreventDefault);
 			window.addEventListener('mouseup', removeListener);
 			e.preventDefault();
 			e.stopPropagation();
-			props.onResizeStart && props.onResizeStart();
 		};
 
 		resizeHandle =
@@ -213,7 +234,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
 		[
 			...[
 				"spaces-space",
-				props.scrollable ? (resizeHandle ? "scrollable" : "scrollable-a") : undefined
+				props.scrollable ? (resizeHandle ? "scrollable" : "scrollable-a") : undefined,
+				resizing ? "spaces-resizing" : undefined
 			],
 			...(resizeHandle && props.scrollable ? userClasses.map(c => `${c}-container`) : userClasses)
 		].filter(c => c);

react-spaces/src/Styles.css

@@ -68,8 +68,8 @@
 	box-sizing: border-box;
 }
 
-.spaces-space.resizing .spaces-space {
-	transition: inherit !important;
+.spaces-resizing .spaces-space {
+	transition: none !important;
 }
 
 .spaces-space .spaces-space-inner {