Merge pull request #143 from sagar-accacia/fix/component-styling-issue

FIX: #142

Author: aeagle

nextjs-demo/pages/index.tsx

@@ -1,7 +1,9 @@
 import Head from "next/head";
+import { useState } from "react";
 import * as Space from "react-spaces";
 
 export default function Home() {
+	const [lsize, setLSize] = useState("10%"); // To check for the hover effect
 	return (
 		<>
 			<Space.SSR />
@@ -12,7 +14,12 @@ export default function Home() {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<Space.ViewPort>
-				<Space.LeftResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
+				<Space.LeftResizable
+					size={lsize}
+					onMouseEnter={() => setLSize("25%")}
+					onMouseLeave={() => setLSize("10%")}
+					centerContent={Space.CenterType.HorizontalVertical}
+					style={{ backgroundColor: "white", transition: "all 0.3s ease-in-out" }}>
 					<span style={{ color: "black" }}>Hello world</span>
 				</Space.LeftResizable>
 				<Space.RightResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>

src/components/Space.tsx

@@ -42,7 +42,7 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 	}
 
 	const {
-		style,
+		innerComponentStyle,
 		className,
 		onClick,
 		onDoubleClick,
@@ -55,6 +55,7 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 		onTouchEnd,
 		children,
 		handleRender,
+		style,
 	} = props;
 
 	const events = {
@@ -103,10 +104,10 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 
 	const innerClasses = [...["spaces-space-inner"], ...userClasses];
 
-	let innerStyle = style;
+	let innerStyle = innerComponentStyle;
 	if (space.handlePlacement === ResizeHandlePlacement.Inside) {
 		innerStyle = {
-			...style,
+			...innerStyle,
 			...{
 				left: space.anchor === AnchorType.Right ? space.handleSize : undefined,
 				right: space.anchor === AnchorType.Left ? space.handleSize : undefined,
@@ -125,6 +126,7 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 			className: outerClasses.join(" "),
 		},
 		...events,
+		style,
 	} as any;
 
 	return (

src/core-react.ts

@@ -97,9 +97,10 @@ export interface IReactEvents {
 }
 
 export interface IReactSpaceCommonProps extends ICommonProps, IReactEvents {
-	style?: React.CSSProperties;
+	innerComponentStyle?: React.CSSProperties; // For people who like to modify the inner `as` component
 	as?: keyof React.ReactDOM | React.ComponentType<ICommonProps>;
 	children?: React.ReactNode;
+	style?: React.CSSProperties; // Normal styles for the wrapper itself as it is the main component that is resized
 }
 
 export interface IReactSpaceInnerProps extends IReactSpaceCommonProps, ISpaceProps, IReactEvents {