Skip to content

Commit f008651

Browse files
aeagleaeagle
committed
Refactored render to ensure context is outside divs and added 'as' property logic
1 parent 3b2ef8b commit f008651

File tree

2 files changed

+68
-51
lines changed

2 files changed

+68
-51
lines changed

‎react-spaces/src/components/Space.tsx‎

Lines changed: 65 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ interface IPublicProps {
1111
className?: string,
1212
style?: React.CSSProperties,
1313
scrollable?: boolean,
14-
trackSize?: boolean
14+
trackSize?: boolean,
15+
as?: string
1516
}
1617

1718
interface IPrivateProps {
@@ -30,7 +31,7 @@ interface IResizableProps {
3031
}
3132

3233
interface IState {
33-
id: Guid,
34+
id: string,
3435
currentWidth: number,
3536
currentHeight: number,
3637
adjustedSize: number,
@@ -76,7 +77,7 @@ class Space extends React.Component<AllProps, IState> {
7677
super(props);
7778

7879
this.state = {
79-
id: Guid.create(),
80+
id: Guid.create().toString(),
8081
currentWidth: 0,
8182
currentHeight: 0,
8283
adjustedSize: 0,
@@ -129,10 +130,10 @@ class Space extends React.Component<AllProps, IState> {
129130
{
130131
parentContext => {
131132
const style = {
132-
left: (this.state.left !== undefined ? `calc(${this.state.left}px)` : undefined) as string | number | undefined,
133-
top: (this.state.top !== undefined ? `calc(${this.state.top}px)` : undefined) as string | number,
134-
right: (this.state.right !== undefined ? `calc(${this.state.right}px)` : undefined) as string | number,
135-
bottom: (this.state.bottom !== undefined ? `calc(${this.state.bottom}px)` : undefined) as string | number,
133+
left: (this.state.left !== undefined ? `calc(${this.state.left}px)` : undefined) as string | undefined,
134+
top: (this.state.top !== undefined ? `calc(${this.state.top}px)` : undefined) as string,
135+
right: (this.state.right !== undefined ? `calc(${this.state.right}px)` : undefined) as string,
136+
bottom: (this.state.bottom !== undefined ? `calc(${this.state.bottom}px)` : undefined) as string,
136137
width:
137138
this.isHorizontalSpace() ?
138139
`calc(${getSizeString(this.props.size || 0)} + ${this.state.adjustedSize}px)`
@@ -166,29 +167,30 @@ class Space extends React.Component<AllProps, IState> {
166167
for (let i = 0; i < spaceTakers.length; i ++)
167168
{
168169
const t = spaceTakers[i];
169-
if (!t.id.equals(this.state.id)) {
170+
if (t.id !== this.state.id) {
171+
const adjustedSize = t.adjustedSize !== 0 ?` + ${t.adjustedSize}px` : ``;
170172
if (this.isFilledSpace())
171173
{
172174
if (t.anchorType === AnchorType.Top) {
173-
adjustedTop.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
175+
adjustedTop.push(`${getSizeString(t.size)}${adjustedSize}`);
174176
} else if (t.anchorType === AnchorType.Left) {
175-
adjustedLeft.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
177+
adjustedLeft.push(`${getSizeString(t.size)}${adjustedSize}`);
176178
} else if (t.anchorType === AnchorType.Bottom) {
177-
adjustedBottom.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
179+
adjustedBottom.push(`${getSizeString(t.size)}${adjustedSize}`);
178180
} else if (t.anchorType === AnchorType.Right) {
179-
adjustedRight.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
181+
adjustedRight.push(`${getSizeString(t.size)}${adjustedSize}`);
180182
}
181183
}
182184
else
183185
{
184186
if (t.anchorType === AnchorType.Top && style.top !== undefined) {
185-
adjustedTop.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
187+
adjustedTop.push(`${getSizeString(t.size)}${adjustedSize}`);
186188
} else if (t.anchorType === AnchorType.Left && style.left !== undefined) {
187-
adjustedLeft.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
189+
adjustedLeft.push(`${getSizeString(t.size)}${adjustedSize}`);
188190
} else if (t.anchorType === AnchorType.Bottom && style.bottom !== undefined) {
189-
adjustedBottom.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
191+
adjustedBottom.push(`${getSizeString(t.size)}${adjustedSize}`);
190192
} else if (t.anchorType === AnchorType.Right && style.right !== undefined) {
191-
adjustedRight.push(`${getSizeString(t.size)} + ${t.adjustedSize}px`);
193+
adjustedRight.push(`${getSizeString(t.size)}${adjustedSize}`);
192194
}
193195
}
194196
} else {
@@ -197,18 +199,16 @@ class Space extends React.Component<AllProps, IState> {
197199
}
198200
});
199201

200-
if (adjustedTop.length > 0) {
201-
style.top = `calc(${adjustedTop.join(" + ")})`;
202-
}
203-
if (adjustedLeft.length > 0) {
204-
style.left = `calc(${adjustedLeft.join(" + ")})`;
205-
}
206-
if (adjustedRight.length > 0) {
207-
style.right = `calc(${adjustedRight.join(" + ")})`;
208-
}
209-
if (adjustedBottom.length > 0) {
210-
style.bottom = `calc(${adjustedBottom.join(" + ")})`;
211-
}
202+
[
203+
{ adjusted: adjustedTop, setter: (value: string) => style.top = value },
204+
{ adjusted: adjustedBottom, setter: (value: string) => style.bottom = value },
205+
{ adjusted: adjustedLeft, setter: (value: string) => style.left = value },
206+
{ adjusted: adjustedRight, setter: (value: string) => style.right = value }
207+
].map(x => {
208+
if (x.adjusted.length > 0) {
209+
x.setter(`calc(${x.adjusted.join(" + ")})`)
210+
}
211+
});
212212

213213
if (this.props.anchor) {
214214
parentContext.registerSpaceTaker({
@@ -260,21 +260,39 @@ class Space extends React.Component<AllProps, IState> {
260260
}} />;
261261
}
262262

263+
const adjustedStyle =
264+
{
265+
...this.props.style,
266+
...{
267+
left: resizeType === ResizeType.Left && !overlayHandle ? handleSize : undefined,
268+
top: resizeType === ResizeType.Top && !overlayHandle ? handleSize : undefined,
269+
right: resizeType === ResizeType.Right && !overlayHandle ? handleSize : undefined,
270+
bottom: resizeType === ResizeType.Bottom && !overlayHandle ? handleSize : undefined
271+
}
272+
};
273+
263274
return (
264-
<div
265-
id={id}
266-
ref={this.divElementRef}
267-
className={`spaces-space${this.props.anchor || ''}${this.props.scrollable ? ' scrollable' : ''}${className ? ` ${className}-container` : ``}`}
268-
style={style}>
269-
{ resizeRender }
270-
<div className={`spaces-space-inner${className ? ` ${className}` : ``}`} style={this.props.style}>
271-
<SpaceContext.Provider value={currentContext}>
272-
<SpaceInfoContext.Provider value={{ width: Math.floor(this.state.currentWidth), height: Math.floor(this.state.currentHeight) }}>
273-
{ spaceRender }
274-
</SpaceInfoContext.Provider>
275-
</SpaceContext.Provider>
276-
</div>
277-
</div>
275+
<SpaceContext.Provider value={currentContext}>
276+
<SpaceInfoContext.Provider value={{ width: Math.floor(this.state.currentWidth), height: Math.floor(this.state.currentHeight) }}>
277+
{
278+
React.createElement(
279+
this.props.as || 'div',
280+
{
281+
id: this.props.id,
282+
ref: this.divElementRef,
283+
className: `spaces-space${this.props.anchor || ''}${resizeType || ''}${this.props.scrollable ? ' scrollable' : ''}${this.props.className ? ` ${this.props.className}-container` : ``}`,
284+
style: style
285+
},
286+
<>
287+
{ resizeRender }
288+
<div className={`spaces-space-inner${this.props.className ? ` ${this.props.className}` : ``}`} style={adjustedStyle}>
289+
{ children }
290+
</div>
291+
</>
292+
)
293+
}
294+
</SpaceInfoContext.Provider>
295+
</SpaceContext.Provider>
278296
)
279297
}
280298
}
@@ -302,24 +320,24 @@ class Space extends React.Component<AllProps, IState> {
302320
spaceTakers: this.state.spaceTakers,
303321
registerSpaceTaker:
304322
(spaceTaker: ISpaceTaker) => {
305-
if (!this.state.spaceTakers.find(t => t.id.equals(spaceTaker.id))) {
323+
if (!this.state.spaceTakers.find(t => t.id === spaceTaker.id)) {
306324
this.setState({
307325
spaceTakers: [ ...this.state.spaceTakers, spaceTaker ]
308326
})
309327
}
310328
},
311329
removeSpaceTaker:
312-
(id: Guid) => {
330+
(id: string) => {
313331
this.setState({
314-
spaceTakers: this.state.spaceTakers.filter(t => !t.id.equals(id))
332+
spaceTakers: this.state.spaceTakers.filter(t => t.id !== id)
315333
})
316334
},
317335
updateSpaceTakerAdjustedSize:
318-
(id: Guid, adjustedSize: number) => {
336+
(id: string, adjustedSize: number) => {
319337
this.setState({
320338
spaceTakers:
321339
this.state.spaceTakers.map(t =>
322-
t.id.equals(id) ?
340+
t.id === id ?
323341
{...t, ...{ adjustedSize: adjustedSize }} :
324342
t
325343
)

‎react-spaces/src/components/SpaceContext.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import * as React from 'react';
22
import { AnchorType } from './Globals';
3-
import { Guid } from 'guid-typescript';
43

54
export interface ISpaceContext {
65
level: number,
76
width: number,
87
height: number,
98
spaceTakers: ISpaceTaker[],
109
registerSpaceTaker: (spaceTaker: ISpaceTaker) => void,
11-
removeSpaceTaker: (id: Guid) => void,
12-
updateSpaceTakerAdjustedSize: (id: Guid, adjustedSize: number) => void
10+
removeSpaceTaker: (id: string) => void,
11+
updateSpaceTakerAdjustedSize: (id: string, adjustedSize: number) => void
1312
}
1413

1514
export interface ISpaceTaker {
16-
id: Guid,
15+
id: string,
1716
order: number,
1817
anchorType: AnchorType,
1918
size: number | string,

0 commit comments

Comments
 (0)