Skip to content

Commit 1f22dc4

Browse files
aeagleaeagle
committed
Moved HeadStyles component into separate file and ensure context provider only wraps children
1 parent 55ec4a5 commit 1f22dc4

File tree

2 files changed

+97
-87
lines changed

2 files changed

+97
-87
lines changed

‎react-spaces/src/HeadStyles.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { ISpace } from "./Globals/Types";
2+
import * as ReactDOM from 'react-dom';
3+
import { cssValue, isHorizontalSpace, isVerticalSpace } from './Globals/Utils';
4+
import * as React from 'react';
5+
6+
export const HeadStyles : React.FC<{ spaces: ISpace[] }> = (props) => {
7+
const { spaces } = props;
8+
9+
if (spaces.length > 0)
10+
{
11+
return ReactDOM.createPortal(
12+
<style>
13+
{
14+
spaces.map(space => {
15+
const style = {
16+
left: (space.left !== undefined ? cssValue(space.left, space.adjustedLeft) : undefined),
17+
top: (space.top !== undefined ? cssValue(space.top, space.adjustedTop) : undefined),
18+
right: (space.right !== undefined ? cssValue(space.right, space.adjustedLeft) : undefined),
19+
bottom: (space.bottom !== undefined ? cssValue(space.bottom, space.adjustedTop) : undefined),
20+
width: isHorizontalSpace(space.anchorType) ? cssValue(space.size, space.adjustedSize) : space.width,
21+
height: isVerticalSpace(space.anchorType) ? cssValue(space.size, space.adjustedSize) : space.height,
22+
zIndex: space.zIndex
23+
};
24+
return (
25+
<>{ `#${space.id} {` } { style.left ? `left: ${style.left};` : "" } { style.top ? `top: ${style.top};` : "" } { style.right ? `right: ${style.right};` : "" } { style.bottom ? `bottom: ${style.bottom};` : "" } { style.width ? `width: ${style.width};` : "" } { style.height ? `height: ${style.height};` : "" } { style.zIndex ? `z-index: ${style.zIndex};` : "" } { `}`}</>
26+
)
27+
})
28+
}
29+
</style>
30+
,
31+
window.document.head
32+
);
33+
}
34+
35+
return null;
36+
}

‎react-spaces/src/Space.tsx‎

Lines changed: 61 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import * as React from 'react';
2-
import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IPositionedProps, CenterType, publicProps, anchoredProps, resizableProps, positionedProps, allProps, ResizeType, ISpace } from './Globals/Types';
2+
import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IPositionedProps, CenterType, publicProps, anchoredProps, resizableProps, positionedProps, allProps, ResizeType } from './Globals/Types';
33
import { SpaceContext, SpaceInfoContext } from './Globals/Contexts';
44
import './Styles.css';
55
import { CenteredVertically, Centered } from './Centered';
6-
import * as ReactDOM from 'react-dom';
76
import { useSpace } from './Hooks/useSpace';
87
import { cssValue, isHorizontalSpace, isVerticalSpace } from './Globals/Utils';
98
import { applyResize } from './Globals/Resize';
9+
import { HeadStyles } from './HeadStyles';
10+
11+
const USE_INLINESTYLES = false;
1012

1113
export const Fill : React.FC<IPublicProps> = (props) => <SpaceInternal {...props} />
1214
Fill.propTypes = publicProps;
@@ -29,8 +31,6 @@ RightResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps}
2931
export const Positioned : React.FC<IPublicProps & IResizableProps & IPositionedProps> = (props) => <SpaceInternal {...props} />
3032
RightResizable.propTypes = {...publicProps, ...resizableProps, ...positionedProps};
3133

32-
const USE_INLINESTYLES = false;
33-
3434
export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
3535

3636
const divElementRef = React.useRef<HTMLDivElement>();
@@ -97,91 +97,65 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
9797
}
9898

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

155-
const HeadStyles : React.FC<{ spaces: ISpace[] }> = (props) => {
156-
const { spaces } = props;
157-
158-
if (spaces.length > 0)
159-
{
160-
return ReactDOM.createPortal(
161-
<style>
162-
{
163-
spaces.map(space => {
164-
const style = {
165-
left: (space.left !== undefined ? cssValue(space.left, space.adjustedLeft) : undefined),
166-
top: (space.top !== undefined ? cssValue(space.top, space.adjustedTop) : undefined),
167-
right: (space.right !== undefined ? cssValue(space.right, space.adjustedLeft) : undefined),
168-
bottom: (space.bottom !== undefined ? cssValue(space.bottom, space.adjustedTop) : undefined),
169-
width: isHorizontalSpace(space.anchorType) ? cssValue(space.size, space.adjustedSize) : space.width,
170-
height: isVerticalSpace(space.anchorType) ? cssValue(space.size, space.adjustedSize) : space.height,
171-
zIndex: space.zIndex
172-
};
173-
return (
174-
<>{ `#${space.id} {` } { style.left ? `left: ${style.left};` : "" } { style.top ? `top: ${style.top};` : "" } { style.right ? `right: ${style.right};` : "" } { style.bottom ? `bottom: ${style.bottom};` : "" } { style.width ? `width: ${style.width};` : "" } { style.height ? `height: ${style.height};` : "" } { style.zIndex ? `z-index: ${style.zIndex};` : "" } { `}`}</>
175-
)
176-
})
177-
}
178-
</style>
179-
,
180-
window.document.head
181-
);
182-
}
183-
184-
return null;
185-
}
186-
187161
SpaceInternal.propTypes = allProps;

0 commit comments

Comments
 (0)