Skip to content

Commit 16269d7

Browse files
aeagleaeagle
authored
Merge pull request #74 from saisandeepvaddi/master
Fix for #73
2 parents 3b0ba02 + 6f7bdd2 commit 16269d7

File tree

7 files changed

+26
-27
lines changed

7 files changed

+26
-27
lines changed

‎package-lock.json

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/ISpaceContext.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ export interface ISpaceContext {
77
updateChildren: (children: ISpace[]) => void;
88
updateResizing: (state: boolean) => void;
99
startMouseDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>, onDragEnd?: (info: IPosition) => void) => void;
10-
startMouseResize: (
11-
e: React.MouseEvent<HTMLElement, MouseEvent>,
12-
resizeType: ResizeType,
13-
onResizeEnd?: (size: number, position: IPosition) => void,
14-
) => void;
10+
startMouseResize: (e: React.MouseEvent<HTMLElement, MouseEvent>, resizeType: ResizeType, onResizeEnd?: (newSize: number) => void) => void;
1511
}
1612

1713
const recalcSpaces = (spaces: ISpace[]) => {
@@ -115,11 +111,7 @@ export const createSpaceContext = (
115111
updateChildren: (children: ISpace[]) => void,
116112
updateResizing: (state: boolean) => void,
117113
startMouseDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>, onDragEnd?: (info: IPosition) => void) => void,
118-
startMouseResize: (
119-
e: React.MouseEvent<HTMLElement, MouseEvent>,
120-
resizeType: ResizeType,
121-
onResizeEnd?: (size: number, position: IPosition) => void,
122-
) => void,
114+
startMouseResize: (e: React.MouseEvent<HTMLElement, MouseEvent>, resizeType: ResizeType, onResizeEnd?: (newSize: number) => void) => void,
123115
parent?: ISpaceContext | null,
124116
) => {
125117
const context: ISpaceContext = {

‎src/components/ResizeHandle.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ interface IProps {
1313
parentContext: ISpaceContext | undefined;
1414
space: ISpace;
1515
spaceElement: HTMLElement | undefined;
16+
onResizeStart?: () => boolean | void;
17+
onResizeEnd?: (newSize: number) => void;
1618
}
1719

1820
export const ResizeHandle: React.FC<IProps> = (props) => {
@@ -25,8 +27,12 @@ export const ResizeHandle: React.FC<IProps> = (props) => {
2527
<div
2628
style={{ width: width, height: height }}
2729
className={`spaces-resize-handle ${AnchorToResizeTypeMap[props.anchor]}`}
28-
onMouseDown={(e) => startMouseResize(e, props.parentContext, props.space, props, props.spaceElement, resizeType)}
29-
onTouchStart={(e) => startTouchResize(e, props.parentContext, props.space, props, props.spaceElement, resizeType)}
30+
onMouseDown={(e) =>
31+
startMouseResize(e, props.parentContext, props.space, props, props.spaceElement, resizeType, undefined, props.onResizeEnd)
32+
}
33+
onTouchStart={(e) =>
34+
startTouchResize(e, props.parentContext, props.space, props, props.spaceElement, resizeType, undefined, props.onResizeEnd)
35+
}
3036
/>
3137
);
3238
}

‎src/components/Space.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,8 @@ export const SpaceInternal: React.FC<AllProps> = React.memo((props) => {
145145
spaceElement={spaceElement.current}
146146
minimumSize={props.minimumSize}
147147
maximumSize={props.maximumSize}
148+
onResizeStart={props.onResizeStart}
149+
onResizeEnd={props.onResizeEnd}
148150
/>
149151
<div className={innerClasses.join(" ")} style={innerStyle}>
150152
<SpaceContext.Provider value={currentContext}>
@@ -176,6 +178,8 @@ export const SpaceInternal: React.FC<AllProps> = React.memo((props) => {
176178
spaceElement={spaceElement.current}
177179
minimumSize={props.minimumSize}
178180
maximumSize={props.maximumSize}
181+
onResizeStart={props.onResizeStart}
182+
onResizeEnd={props.onResizeEnd}
179183
/>
180184
<SpaceContext.Provider value={currentContext}>
181185
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize.width), height: Math.floor(currentSize.height) }}>

‎src/components/stories/02-components/LeftResizable.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Anchored resizable space on the left edge of it's parent.
1818
<Preview>
1919
<Story name="Default (%)">
2020
<ViewPort>
21-
<LeftResizable style={green} size="50%" trackSize={true}>
21+
<LeftResizable style={green} size="50%" trackSize={true} onResizeStart={() => console.log("Resize Started")} onResizeEnd={newSize => {console.log("newSize after resizeEnd: ", newSize)}}>
2222
{description("Left resizable")}
2323
</LeftResizable>
2424
</ViewPort>

‎src/resizing.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ResizeType, AllProps, AnchorToResizeTypeMap, ISpace, IPosition } from "./types";
1+
import { ResizeType, AllProps, AnchorToResizeTypeMap, ISpace } from "./types";
22
import { isHorizontalSpace, coalesce } from "./utils";
33
import { ISpaceContext, updateSpace } from "./ISpaceContext";
44
import { throttle } from "./throttle";
@@ -29,7 +29,7 @@ export function startTouchResize(
2929
element: HTMLElement | undefined,
3030
resizeType?: ResizeType,
3131
customResizeHandler?: (resizeDelta: IResizeChange) => void,
32-
onResizeEnd?: (size: number, position: IPosition) => void,
32+
onResizeEnd?: (newSize: number) => void,
3333
) {
3434
return startResize(
3535
e,
@@ -57,7 +57,7 @@ export function startMouseResize(
5757
element: HTMLElement | undefined,
5858
resizeType?: ResizeType,
5959
customResizeHandler?: (resizeDelta: IResizeChange) => void,
60-
onResizeEnd?: (size: number, position: IPosition) => void,
60+
onResizeEnd?: (newSize: number) => void,
6161
) {
6262
return startResize(
6363
e,
@@ -77,10 +77,10 @@ export function startMouseResize(
7777
);
7878
}
7979

80-
function resizeEnd(props: AllProps, resizeType: ResizeType, element: HTMLElement, onResizeEnd?: (size: number, position: IPosition) => void) {
80+
function resizeEnd(resizeType: ResizeType, element: HTMLElement, onResizeEnd?: (newSize: number) => void) {
8181
const currentRect = element.getBoundingClientRect();
82-
props.onResizeEnd &&
83-
props.onResizeEnd(Math.floor(resizeType === ResizeType.Left || resizeType === ResizeType.Right ? currentRect.width : currentRect.height));
82+
onResizeEnd &&
83+
onResizeEnd(Math.floor(resizeType === ResizeType.Left || resizeType === ResizeType.Right ? currentRect.width : currentRect.height));
8484
}
8585

8686
function onResize(
@@ -127,7 +127,7 @@ function startResize<T extends SyntheticEvent<HTMLElement> | MouseEvent | TouchE
127127
getCoords: (event: T) => { x: number; y: number },
128128
resizeType?: ResizeType,
129129
customResizeHandler?: (resizeDelta: IResizeChange) => void,
130-
onResizeEnd?: (size: number, position: IPosition) => void,
130+
onResizeEnd?: (newSize: number) => void,
131131
) {
132132
const type = resizeType || (props.anchor ? AnchorToResizeTypeMap[props.anchor] : undefined);
133133
if (element && parentContext && (props.resizable || props.isPositioned) && type) {
@@ -178,7 +178,7 @@ function startResize<T extends SyntheticEvent<HTMLElement> | MouseEvent | TouchE
178178
parentContext.updateResizing(false);
179179
}
180180

181-
resizeEnd(props, type, element, onResizeEnd);
181+
resizeEnd(type, element, onResizeEnd);
182182
};
183183

184184
window.addEventListener(moveEvent, withPreventDefault as EventListener);

‎src/types.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,7 @@ export interface IReactEvents {
4949

5050
export interface IParentSpace {
5151
startMouseDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>, onDragEnd?: (position: IPosition) => void) => void;
52-
startMouseResize: (
53-
e: React.MouseEvent<HTMLElement, MouseEvent>,
54-
resizeType: ResizeType,
55-
onResizeEnd?: (size: number, position: IPosition) => void,
56-
) => void;
52+
startMouseResize: (e: React.MouseEvent<HTMLElement, MouseEvent>, resizeType: ResizeType, onResizeEnd?: (newSize: number) => void) => void;
5753
}
5854

5955
export interface IPosition {

0 commit comments

Comments
 (0)