Skip to content

Commit 31eaf17

Browse files
aeagleaeagle
committed
Latest revision
1 parent bf7d8a5 commit 31eaf17

File tree

6 files changed

+92
-117
lines changed

6 files changed

+92
-117
lines changed

‎react-spaces/src/Fixed.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as React from 'react';
22
import './Styles.css';
33
import * as PropTypes from "prop-types";
4-
import { SpaceInternal } from './Space';
54
import { SpaceContext } from './Globals/Contexts';
65
import { ISpace } from './Globals/Types';
76
import { createSpaceContext } from './Globals/ISpaceContext';
7+
import { HeadStyles } from './HeadStyles';
88

99
interface IProps {
1010
className?: string,
@@ -28,10 +28,9 @@ export const Fixed : React.FC<IProps> = (props) => {
2828
<div
2929
className={`spaces-fixedsize-layout${props.className ? ` ${props.className}` : ``}`}
3030
style={style}>
31+
<HeadStyles spaces={children} />
3132
<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
32-
<SpaceInternal topMost={true}>
33-
{props.children}
34-
</SpaceInternal>
33+
{props.children}
3534
</SpaceContext.Provider>
3635
</div>
3736
)

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,7 @@ export const createSpaceContext = (
114114
children: ISpace[],
115115
updateChildren: (children: ISpace[]) => void,
116116
currentSpace?: ISpace,
117-
parent?: ISpaceContext | null,
118-
zIndex?: number) => {
117+
parent?: ISpaceContext | null) => {
119118

120119
const context : ISpaceContext = {
121120
level: parent ? parent.level + 1 : 0,

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,7 @@ export interface IPrivateProps {
6969
anchorSize?: string | number,
7070
anchor?: AnchorType,
7171
resizable?: boolean,
72-
order?: number,
73-
topMost?: boolean
72+
order?: number
7473
}
7574

7675
export const privateProps = {

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

Lines changed: 37 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import * as React from 'react';
22
import { AllProps, IState, AnchorType, ISize } from 'src/Globals/Types';
33
import { initialState, isHorizontalSpace, isVerticalSpace } from 'src/Globals/Utils';
4-
import { ISpaceContext, updateSpace, removeSpace, registerSpace, createSpaceContext, getSpace } from 'src/Globals/ISpaceContext';
4+
import { ISpaceContext, updateSpace, removeSpace, registerSpace, createSpaceContext } from 'src/Globals/ISpaceContext';
55
import { SpaceLayerContext, SpaceContext } from 'src/Globals/Contexts';
66
import { ResizeSensor } from 'css-element-queries';
77
import { throttle } from 'src/Globals/Throttle';
88

99
export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<HTMLElement | undefined>) => {
1010

1111
const [ state, changeState ] = React.useState<IState>(initialState(props));
12-
const [ currentSize, setCurrentSize ] = React.useState<ISize>({ parsedSize: undefined, width: 0, height: 0 });
12+
const [ currentSize, setCurrentSize ] = React.useState<ISize | null>(null);
1313
const resizeSensor = React.useRef<ResizeSensor>();
1414
const onRemove = React.useRef<(() => void)>();
1515

@@ -24,12 +24,12 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
2424
const layerContext = React.useContext(SpaceLayerContext);
2525
const currentZIndex = props.zIndex || layerContext || 0;
2626

27-
// Deal with property changes to size / anchoring
27+
// Deal with property changes to size / zIndex / anchoring
2828
React.useEffect(() => {
2929
setCurrentSize(prev => ({
3030
parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
31-
width: prev.width,
32-
height: prev.height
31+
width: prev ? prev.width : 0,
32+
height: prev ? prev.height : 0
3333
}));
3434
updateSpace(
3535
parentContext,
@@ -45,8 +45,8 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
4545
React.useEffect(() => {
4646
setCurrentSize(prev => ({
4747
parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
48-
width: prev.width,
49-
height: prev.height
48+
width: prev ? prev.width : 0,
49+
height: prev ? prev.height : 0
5050
}));
5151
updateSpace(
5252
parentContext,
@@ -71,8 +71,36 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
7171
}
7272
);
7373
}, [ currentZIndex ]);
74+
75+
const space =
76+
registerSpace(
77+
parentContext,
78+
{
79+
id: state.id,
80+
zIndex: currentZIndex,
81+
order: props.order === undefined ? 1 : props.order,
82+
anchorType: props.anchor,
83+
size: props.anchorSize || 0,
84+
adjustedSize: 0,
85+
adjustedLeft: 0,
86+
adjustedTop: 0,
87+
width: props.anchor && isHorizontalSpace(props.anchor) ? props.anchorSize || 0 : props.width,
88+
height: props.anchor && isVerticalSpace(props.anchor) ? props.anchorSize || 0 : props.height
89+
}
90+
);
7491

7592
// Setup / cleanup
93+
const determineCurrentSize = React.useCallback(throttle(() => {
94+
if (divElementRef.current) {
95+
const currentRect = divElementRef.current.getBoundingClientRect();
96+
setCurrentSize({
97+
parsedSize: (isHorizontalSpace(props.anchor) ? currentRect.width : currentRect.height),
98+
width: currentRect.width,
99+
height: currentRect.height
100+
});
101+
}
102+
}, 200), []);
103+
76104
React.useEffect(() => {
77105
if (divElementRef.current) {
78106
if (props.trackSize) {
@@ -94,58 +122,18 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
94122
}
95123

96124
return cleanup;
97-
}, [])
98-
99-
const determineCurrentSize = React.useCallback(throttle(() => {
100-
var space = getSpace(parentContext, state.id);
101-
if (space && divElementRef.current) {
102-
const currentRect = divElementRef.current.getBoundingClientRect();
103-
if (currentRect.width !== currentSize.width ||
104-
currentRect.height !== currentSize.height ||
105-
(isHorizontalSpace(props.anchor) ? currentRect.width : currentRect.height) !== currentSize.parsedSize) {
106-
setCurrentSize({
107-
parsedSize: (isHorizontalSpace(props.anchor) ? currentRect.width : currentRect.height),
108-
width: currentRect.width,
109-
height: currentRect.height
110-
});
111-
}
112-
}
113-
}, 200), []);
114-
115-
React.useEffect(() => {
116-
if (!props.trackSize) {
117-
determineCurrentSize();
118-
}
119-
});
125+
}, []);
120126

121127
onRemove.current = () => {
122128
removeSpace(parentContext, state.id);
123129
}
124130

125-
const space =
126-
registerSpace(
127-
parentContext,
128-
{
129-
id: state.id,
130-
zIndex: currentZIndex,
131-
order: props.order === undefined ? 1 : props.order,
132-
anchorType: props.anchor,
133-
size: props.anchorSize || 0,
134-
adjustedSize: 0,
135-
adjustedLeft: 0,
136-
adjustedTop: 0,
137-
width: props.anchor && isHorizontalSpace(props.anchor) ? props.anchorSize || 0 : props.width,
138-
height: props.anchor && isVerticalSpace(props.anchor) ? props.anchorSize || 0 : props.height
139-
}
140-
);
141-
142131
const currentContext =
143132
createSpaceContext(
144133
state.children,
145134
(children) => setState({ children: children }),
146135
space,
147-
parentContext,
148-
currentZIndex
136+
parentContext
149137
);
150138

151139
return {

‎react-spaces/src/Space.tsx‎

Lines changed: 47 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
5454

5555
const handleSize = props.handleSize === undefined ? 5 : props.handleSize;
5656
const overlayHandle = props.overlayHandle !== undefined ? props.overlayHandle : true;
57-
const resize = applyResize(props, space, currentSize.parsedSize, parentContext, handleSize, divElementRef);
57+
const resize = applyResize(props, space, currentSize ? currentSize.parsedSize : 0, parentContext, handleSize, divElementRef);
5858

5959
const innerStyle =
6060
{
@@ -96,64 +96,55 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
9696
}
9797

9898
return (
99-
props.topMost ?
100-
<>
101-
{ !USE_INLINESTYLES && <HeadStyles spaces={currentContext.children} /> }
102-
<SpaceContext.Provider value={currentContext}>
103-
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize.width), height: Math.floor(currentSize.height) }}>
104-
{ children }
105-
</SpaceInfoContext.Provider>
106-
</SpaceContext.Provider>
107-
</> :
108-
resize.resizeHandle && props.scrollable ?
109-
React.createElement(
110-
props.as || 'div',
111-
{
112-
id: space.id,
113-
ref: divElementRef,
114-
className: outerClasses.join(' '),
115-
style: USE_INLINESTYLES ? {...outerStyle, ...innerStyle} : undefined,
116-
onClick: props.onClick,
117-
onMouseDown: props.onMouseDown,
118-
onMouseEnter: props.onMouseEnter,
119-
onMouseLeave: props.onMouseLeave
120-
},
121-
<>
122-
{ !USE_INLINESTYLES && <HeadStyles spaces={currentContext.children} /> }
123-
{ resize.resizeHandle }
124-
<div
125-
className={innerClasses.join(' ')}
126-
style={innerStyle}>
127-
<SpaceContext.Provider value={currentContext}>
128-
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize.width), height: Math.floor(currentSize.height) }}>
129-
{ children }
130-
</SpaceInfoContext.Provider>
131-
</SpaceContext.Provider>
132-
</div>
133-
</>
134-
) :
135-
React.createElement(
136-
props.as || 'div',
137-
{
138-
id: space.id,
139-
ref: divElementRef,
140-
className: outerClasses.join(' '),
141-
style: USE_INLINESTYLES ? {...innerStyle, ...outerStyle} : innerStyle,
142-
onClick: props.onClick,
143-
onMouseDown: props.onMouseDown,
144-
onMouseEnter: props.onMouseEnter,
145-
onMouseLeave: props.onMouseLeave
146-
},
147-
<>
148-
{ !USE_INLINESTYLES && <HeadStyles spaces={currentContext.children} /> }
149-
{ resize.resizeHandle }
99+
resize.resizeHandle && props.scrollable ?
100+
React.createElement(
101+
props.as || 'div',
102+
{
103+
id: space.id,
104+
ref: divElementRef,
105+
className: outerClasses.join(' '),
106+
style: USE_INLINESTYLES ? {...outerStyle, ...innerStyle} : undefined,
107+
onClick: props.onClick,
108+
onMouseDown: props.onMouseDown,
109+
onMouseEnter: props.onMouseEnter,
110+
onMouseLeave: props.onMouseLeave
111+
},
112+
<>
113+
{ !USE_INLINESTYLES && <HeadStyles spaces={currentContext.children} /> }
114+
{ resize.resizeHandle }
115+
<div
116+
className={innerClasses.join(' ')}
117+
style={innerStyle}>
150118
<SpaceContext.Provider value={currentContext}>
151-
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize.width), height: Math.floor(currentSize.height) }}>
152-
{ children }
119+
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize ? currentSize.width : 0), height: Math.floor(currentSize ? currentSize.height : 0) }}>
120+
{ children }
153121
</SpaceInfoContext.Provider>
154122
</SpaceContext.Provider>
155-
</>
156-
)
123+
</div>
124+
</>
125+
) :
126+
React.createElement(
127+
props.as || 'div',
128+
{
129+
id: space.id,
130+
ref: divElementRef,
131+
className: outerClasses.join(' '),
132+
style: USE_INLINESTYLES ? {...innerStyle, ...outerStyle} : innerStyle,
133+
onClick: props.onClick,
134+
onMouseDown: props.onMouseDown,
135+
onMouseEnter: props.onMouseEnter,
136+
onMouseLeave: props.onMouseLeave
137+
},
138+
<>
139+
{ !USE_INLINESTYLES && <HeadStyles spaces={currentContext.children} /> }
140+
{ resize.resizeHandle }
141+
<SpaceContext.Provider value={currentContext}>
142+
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize ? currentSize.width : 0), height: Math.floor(currentSize ? currentSize.height : 0) }}>
143+
{ children }
144+
</SpaceInfoContext.Provider>
145+
</SpaceContext.Provider>
146+
</>
147+
)
157148
)
158149
})
159150

‎react-spaces/src/ViewPort.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as React from 'react';
22
import './Styles.css';
33
import * as PropTypes from "prop-types";
4-
import { SpaceInternal } from './Space';
54
import { SpaceContext } from './Globals/Contexts';
65
import { ISpace } from './Globals/Types';
76
import { createSpaceContext } from './Globals/ISpaceContext';
7+
import { HeadStyles } from './HeadStyles';
88

99
interface IProps {
1010
className?: string,
@@ -26,10 +26,9 @@ export const ViewPort : React.FC<IProps> = (props) => {
2626
right: props.right || 0,
2727
bottom: props.bottom || 0
2828
}}>
29+
<HeadStyles spaces={children} />
2930
<SpaceContext.Provider value={createSpaceContext(children, setChildren)}>
30-
<SpaceInternal topMost={true}>
31-
{props.children}
32-
</SpaceInternal>
31+
{props.children}
3332
</SpaceContext.Provider>
3433
</div>
3534
)

0 commit comments

Comments
 (0)