Skip to content

Commit 2e51ee7

Browse files
aeagleaeagle
committed
Added resizing state and class name to parent space
1 parent 1120cfb commit 2e51ee7

File tree

10 files changed

+40
-18
lines changed

10 files changed

+40
-18
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/src/Fixed.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ interface IProps extends IReactEvents {
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,7 +27,7 @@ export const Fixed : React.FC<IProps> = (props) => {
2627

2728
return (
2829
<div
29-
className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}`}
30+
className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}${resizing ? ` spaces-resizing` : ``}`}
3031
style={style}
3132
onClick={props.onClick}
3233
onMouseDown={props.onMouseDown}
@@ -37,7 +38,7 @@ export const Fixed : React.FC<IProps> = (props) => {
3738
onTouchMove={props.onTouchMove}
3839
onTouchEnd={props.onTouchEnd}>
3940
<HeadStyles spaces={children} />
40-
<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
41+
<SpaceContext.Provider value={createSpaceContext(children, setChildren, setResizing)}>
4142
{props.children}
4243
</SpaceContext.Provider>
4344
</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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ export const allProps = { ...publicProps, ...privateProps, ...resizableProps, ..
145145

146146
export interface IState {
147147
id: string,
148+
resizing: boolean,
148149
children: ISpace[]
149150
}
150151

@@ -167,7 +168,7 @@ export interface ISpace {
167168
right?: number | string,
168169
bottom?: number | string,
169170
width?: number | string,
170-
height?: number | string,
171+
height?: number | string
171172
}
172173

173174
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: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
4444
space,
4545
parentContext,
4646
currentContext,
47-
currentSize
47+
currentSize,
48+
resizing
4849
} = useSpace(props, divElementRef);
4950

5051
const handleSize = props.handleSize === undefined ? 5 : props.handleSize;
@@ -105,6 +106,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
105106
}
106107
}
107108

109+
parentContext.updateResizing(true);
110+
108111
var rect = divElementRef.current.getBoundingClientRect();
109112
var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
110113

@@ -124,14 +127,15 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
124127
lastY = e.touches[0].pageY;
125128
e.preventDefault();
126129
e.stopImmediatePropagation();
127-
throttledTouchResize(lastX, lastY);
130+
throttledTouchResize(lastX, lastY);
128131
};
129132
const removeListener = () => {
130133
if (moved) {
131134
touchResize(lastX, lastY);
132135
}
133136
window.removeEventListener('touchmove', withPreventDefault);
134137
window.removeEventListener('touchend', removeListener);
138+
parentContext.updateResizing(false);
135139
onResizeEnd();
136140
};
137141
window.addEventListener('touchmove', withPreventDefault);
@@ -152,6 +156,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
152156
}
153157
}
154158

159+
parentContext.updateResizing(true);
160+
155161
var rect = divElementRef.current.getBoundingClientRect();
156162
var size = isHorizontalSpace(props.anchor) ? rect.width : rect.height;
157163

@@ -179,6 +185,7 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
179185
}
180186
window.removeEventListener('mousemove', withPreventDefault);
181187
window.removeEventListener('mouseup', removeListener);
188+
parentContext.updateResizing(false);
182189
onResizeEnd();
183190
};
184191
window.addEventListener('mousemove', withPreventDefault);
@@ -227,7 +234,8 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
227234
[
228235
...[
229236
"spaces-space",
230-
props.scrollable ? (resizeHandle ? "scrollable" : "scrollable-a") : undefined
237+
props.scrollable ? (resizeHandle ? "scrollable" : "scrollable-a") : undefined,
238+
resizing ? "spaces-resizing" : undefined
231239
],
232240
...(resizeHandle && props.scrollable ? userClasses.map(c => `${c}-container`) : userClasses)
233241
].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: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ interface IProps extends IReactEvents {
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,
@@ -35,7 +36,7 @@ export const ViewPort : React.FC<IProps> = (props) => {
3536
onTouchMove={props.onTouchMove}
3637
onTouchEnd={props.onTouchEnd}>
3738
<HeadStyles spaces={children} />
38-
<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
39+
<SpaceContext.Provider value={createSpaceContext(children, setChildren, setResizing)}>
3940
{props.children}
4041
</SpaceContext.Provider>
4142
</div>

0 commit comments

Comments
 (0)