Skip to content

Commit 909395c

Browse files
aeagleaeagle
authored
Merge pull request #53 from aeagle/feature/resize-cancel-extra-events
Feature/resize cancel extra events
2 parents 9a57cd8 + 410cd0f commit 909395c

File tree

12 files changed

+96
-40
lines changed

12 files changed

+96
-40
lines changed

‎demo/src/ui-demo/Pinnable.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.pinnable {
2+
.spaces-space {
3+
transition-property: width,height,top,left,bottom,right;
4+
transition-duration: 0.5s;
5+
}
6+
}

‎demo/src/ui-demo/Pinnable.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import * as Space from 'react-spaces';
3+
import './Pinnable.scss';
34

45
export const Pinnable = () => {
56
const [leftOpen, setLeftOpen] = React.useState(false);
@@ -9,7 +10,7 @@ export const Pinnable = () => {
910

1011
return (
1112
<>
12-
<Space.Fill>
13+
<Space.Fill className="pinnable">
1314
<Space.LeftResizable
1415
order={1}
1516
size={leftOpen ? "25%" : 50}

‎react-spaces/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-spaces",
3-
"version": "0.1.21",
3+
"version": "0.1.22",
44
"main": "dist/index.js",
55
"module": "dist/es/index.js",
66
"types": "dist/index.d.ts",

‎react-spaces/src/Fixed.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import * as React from 'react';
22
import './Styles.css';
33
import * as PropTypes from "prop-types";
44
import { SpaceContext } from './Globals/Contexts';
5-
import { ISpace } from './Globals/Types';
5+
import { ISpace, IReactEvents } from './Globals/Types';
66
import { createSpaceContext } from './Globals/ISpaceContext';
77
import { HeadStyles } from './HeadStyles';
88

9-
interface IProps {
9+
interface IProps extends IReactEvents {
1010
className?: string,
1111
style?: React.CSSProperties,
1212
width?: number,
@@ -15,6 +15,7 @@ interface IProps {
1515

1616
export const Fixed : React.FC<IProps> = (props) => {
1717
const [ children, setChildren ] = React.useState<ISpace[]>([]);
18+
const [ resizing, setResizing ] = React.useState(false);
1819

1920
const style = {
2021
...props.style,
@@ -26,10 +27,18 @@ export const Fixed : React.FC<IProps> = (props) => {
2627

2728
return (
2829
<div
29-
className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}`}
30-
style={style}>
30+
className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}${resizing ? ` spaces-resizing` : ``}`}
31+
style={style}
32+
onClick={props.onClick}
33+
onMouseDown={props.onMouseDown}
34+
onMouseEnter={props.onMouseEnter}
35+
onMouseLeave={props.onMouseLeave}
36+
onMouseMove={props.onMouseMove}
37+
onTouchStart={props.onTouchStart}
38+
onTouchMove={props.onTouchMove}
39+
onTouchEnd={props.onTouchEnd}>
3140
<HeadStyles spaces={children} />
32-
<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
41+
<SpaceContext.Provider value={createSpaceContext(children, setChildren, setResizing)}>
3342
{props.children}
3443
</SpaceContext.Provider>
3544
</div>

‎react-spaces/src/Globals/ISpaceContext.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { getSizeString } from './Utils';
44
export interface ISpaceContext {
55
level: number,
66
children: ISpace[],
7-
updateChildren: (children: ISpace[]) => void
7+
updateChildren: (children: ISpace[]) => void,
8+
updateResizing: (state: boolean) => void
89
}
910

1011
const recalcSpaces = (spaces: ISpace[]) => {
@@ -115,13 +116,14 @@ export const updateSpace = (context: ISpaceContext, id: string, delta: Partial<I
115116
export const createSpaceContext = (
116117
children: ISpace[],
117118
updateChildren: (children: ISpace[]) => void,
118-
currentSpace?: ISpace,
119+
updateResizing: (state: boolean) => void,
119120
parent?: ISpaceContext | null) => {
120121

121122
const context : ISpaceContext = {
122123
level: parent ? parent.level + 1 : 0,
123124
children: children,
124-
updateChildren: updateChildren
125+
updateChildren: updateChildren,
126+
updateResizing: updateResizing
125127
}
126128

127129
return context;

‎react-spaces/src/Globals/Types.ts

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,7 @@ export enum CenterType {
3434
HorizontalVertical = "horizontalVertical"
3535
}
3636

37-
export interface IPublicProps {
38-
id?: string,
39-
className?: string,
40-
style?: React.CSSProperties,
41-
scrollable?: boolean,
42-
trackSize?: boolean,
43-
centerContent?: CenterType,
44-
as?: string,
45-
children?: React.ReactNode,
46-
zIndex?: number,
37+
export interface IReactEvents {
4738
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
4839
onMouseDown?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
4940
onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
@@ -54,6 +45,18 @@ export interface IPublicProps {
5445
onTouchEnd?: (event: React.TouchEvent<HTMLElement>) => void
5546
}
5647

48+
export interface IPublicProps extends IReactEvents {
49+
id?: string,
50+
className?: string,
51+
style?: React.CSSProperties,
52+
scrollable?: boolean,
53+
trackSize?: boolean,
54+
centerContent?: CenterType,
55+
as?: string,
56+
children?: React.ReactNode,
57+
zIndex?: number
58+
}
59+
5760
export const publicProps = {
5861
id: PropTypes.string,
5962
className: PropTypes.string,
@@ -103,7 +106,7 @@ export interface IResizableProps {
103106
overlayHandle?: boolean,
104107
minimumSize?: number,
105108
maximumSize?: number,
106-
onResizeStart?: () => void,
109+
onResizeStart?: () => boolean | void,
107110
onResizeEnd?: (newSize: number) => void
108111
}
109112

@@ -142,6 +145,7 @@ export const allProps = { ...publicProps, ...privateProps, ...resizableProps, ..
142145

143146
export interface IState {
144147
id: string,
148+
resizing: boolean,
145149
children: ISpace[]
146150
}
147151

@@ -164,7 +168,7 @@ export interface ISpace {
164168
right?: number | string,
165169
bottom?: number | string,
166170
width?: number | string,
167-
height?: number | string,
171+
height?: number | string
168172
}
169173

170174
export interface ISpaceInfo {

‎react-spaces/src/Globals/Utils.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ function shortuuid() {
2020

2121
export const initialState = (props: AllProps) => ({
2222
id: props.id || `s${shortuuid()}`,
23-
children: []
23+
children: [],
24+
resizing: false
2425
})
2526

2627
export const cssValue = (value: number | string | undefined, adjusted: number) =>

‎react-spaces/src/Hooks/useSpace.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,15 +129,16 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
129129
const currentContext =
130130
createSpaceContext(
131131
state.children,
132-
(children) => setState({ children: children }),
133-
space,
132+
(children) => setState({ children: children }),
133+
(resizing) => setState({ resizing: resizing }),
134134
parentContext
135135
);
136136

137137
return {
138138
space,
139139
parentContext,
140140
currentContext,
141-
currentSize: currentSize || { width: 0, height: 0 }
141+
currentSize: currentSize || { width: 0, height: 0 },
142+
resizing: state.resizing
142143
}
143144
}

‎react-spaces/src/Space.tsx

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ BottomResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps
3232
export const RightResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Right} anchorSize={props.size} resizable={true} />
3333
RightResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
3434
export const Positioned : React.FC<IPublicProps & IResizableProps & IPositionedProps> = (props) => <SpaceInternal {...props} />
35-
RightResizable.propTypes = {...publicProps, ...resizableProps, ...positionedProps};
35+
Positioned.propTypes = {...publicProps, ...resizableProps, ...positionedProps};
36+
export const Custom : React.FC<AllProps> = (props) => <SpaceInternal {...props} />
37+
Custom.propTypes = allProps;
3638

3739
export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
3840

@@ -42,7 +44,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
4244
space,
4345
parentContext,
4446
currentContext,
45-
currentSize
47+
currentSize,
48+
resizing
4649
} = useSpace(props, divElementRef);
4750

4851
const handleSize = props.handleSize === undefined ? 5 : props.handleSize;
@@ -95,6 +98,15 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
9598
if (!divElementRef.current) {
9699
return;
97100
}
101+
102+
if (props.onResizeStart) {
103+
const result = props.onResizeStart();
104+
if (typeof result === "boolean" && !result) {
105+
return;
106+
}
107+
}
108+
109+
parentContext.updateResizing(true);
98110

99111
var rect = divElementRef.current.getBoundingClientRect();
100112
var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
@@ -115,27 +127,36 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
115127
lastY = e.touches[0].pageY;
116128
e.preventDefault();
117129
e.stopImmediatePropagation();
118-
throttledTouchResize(lastX, lastY);
130+
throttledTouchResize(lastX, lastY);
119131
};
120132
const removeListener = () => {
121133
if (moved) {
122134
touchResize(lastX, lastY);
123135
}
124136
window.removeEventListener('touchmove', withPreventDefault);
125137
window.removeEventListener('touchend', removeListener);
138+
parentContext.updateResizing(false);
126139
onResizeEnd();
127140
};
128141
window.addEventListener('touchmove', withPreventDefault);
129142
window.addEventListener('touchend', removeListener);
130143
e.preventDefault();
131144
e.stopPropagation();
132-
props.onResizeStart && props.onResizeStart();
133145
};
134146

135147
const startResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
136148
if (!divElementRef.current) {
137149
return;
138150
}
151+
152+
if (props.onResizeStart) {
153+
const result = props.onResizeStart();
154+
if (typeof result === "boolean" && !result) {
155+
return;
156+
}
157+
}
158+
159+
parentContext.updateResizing(true);
139160

140161
var rect = divElementRef.current.getBoundingClientRect();
141162
var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
@@ -164,13 +185,13 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
164185
}
165186
window.removeEventListener('mousemove', withPreventDefault);
166187
window.removeEventListener('mouseup', removeListener);
188+
parentContext.updateResizing(false);
167189
onResizeEnd();
168190
};
169191
window.addEventListener('mousemove', withPreventDefault);
170192
window.addEventListener('mouseup', removeListener);
171193
e.preventDefault();
172194
e.stopPropagation();
173-
props.onResizeStart && props.onResizeStart();
174195
};
175196

176197
resizeHandle =
@@ -213,7 +234,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
213234
[
214235
...[
215236
"spaces-space",
216-
props.scrollable ? (resizeHandle ? "scrollable" : "scrollable-a") : undefined
237+
props.scrollable ? (resizeHandle ? "scrollable" : "scrollable-a") : undefined,
238+
resizing ? "spaces-resizing" : undefined
217239
],
218240
...(resizeHandle && props.scrollable ? userClasses.map(c => `${c}-container`) : userClasses)
219241
].filter(c => c);

‎react-spaces/src/Styles.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@
6868
box-sizing: border-box;
6969
}
7070

71-
.spaces-space.resizing .spaces-space {
72-
transition: inherit !important;
71+
.spaces-resizing .spaces-space {
72+
transition: none !important;
7373
}
7474

7575
.spaces-space .spaces-space-inner {

‎react-spaces/src/ViewPort.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import * as React from 'react';
22
import './Styles.css';
33
import * as PropTypes from "prop-types";
44
import { SpaceContext } from './Globals/Contexts';
5-
import { ISpace } from './Globals/Types';
5+
import { ISpace, IReactEvents } from './Globals/Types';
66
import { createSpaceContext } from './Globals/ISpaceContext';
77
import { HeadStyles } from './HeadStyles';
88

9-
interface IProps {
9+
interface IProps extends IReactEvents {
1010
className?: string,
1111
left?: number,
1212
top?: number,
@@ -16,18 +16,27 @@ interface IProps {
1616

1717
export const ViewPort : React.FC<IProps> = (props) => {
1818
const [ children, setChildren ] = React.useState<ISpace[]>([]);
19+
const [ resizing, setResizing ] = React.useState(false);
1920

2021
return (
2122
<div
22-
className={`spaces-fullpage-layout${props.className ? ` ${props.className}` : ``}`}
23+
className={`spaces-fullpage-layout${props.className ? ` ${props.className}` : ``}${resizing ? ` spaces-resizing` : ``}`}
2324
style={{
2425
left: props.left || 0,
2526
top: props.top || 0,
2627
right: props.right || 0,
2728
bottom: props.bottom || 0
28-
}}>
29+
}}
30+
onClick={props.onClick}
31+
onMouseDown={props.onMouseDown}
32+
onMouseEnter={props.onMouseEnter}
33+
onMouseLeave={props.onMouseLeave}
34+
onMouseMove={props.onMouseMove}
35+
onTouchStart={props.onTouchStart}
36+
onTouchMove={props.onTouchMove}
37+
onTouchEnd={props.onTouchEnd}>
2938
<HeadStyles spaces={children} />
30-
<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
39+
<SpaceContext.Provider value={createSpaceContext(children, setChildren, setResizing)}>
3140
{props.children}
3241
</SpaceContext.Provider>
3342
</div>

‎react-spaces/src/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export {
1414
RightResizable,
1515
TopResizable,
1616
BottomResizable,
17-
Positioned
17+
Positioned,
18+
Custom
1819
} from './Space';
1920

2021
export {

0 commit comments

Comments
 (0)