Skip to content

Commit bfad8da

Browse files
aeagleaeagle
committed
Moved space styling to head styles
1 parent 251aff3 commit bfad8da

File tree

8 files changed

+85
-52
lines changed

8 files changed

+85
-52
lines changed

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
}
1515
}
1616

17-
.bottom-pane-container {
17+
.bottom-pane {
1818
.spaces-resize-handle {
1919
background-color: #333 !important;
2020
}
@@ -28,9 +28,7 @@
2828
}
2929
}
3030

31-
.side-bar-container {
32-
.resize-right {
33-
background-color: #333 !important;
34-
}
31+
.side-bar {
32+
background-color: #333 !important;
3533
}
3634
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.scrollable-demo {
2-
header > .spaces-space-inner {
2+
header {
33
background-color: black;
44
color: white;
55
font-size: 140%;
66
font-weight: 700;
77
padding: 15px;
88
}
99

10-
main > .spaces-space-inner {
10+
article {
1111
padding: 0 25px 25px 25px;
1212
font-size: 130%;
1313
color: black;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,19 @@ export const ScrollableDemo = () => {
1919
}, [selectedKey]);
2020

2121
return (
22-
<Space.Fill className="scrollable-demo">
22+
<Space.Fill as="main" className="scrollable-demo">
2323
<Space.Top as="header" size={50} centerContent={Space.CenterType.Vertical}>
2424
Header
2525
</Space.Top>
26-
<Space.Fill>
26+
<Space.Fill as="section">
2727
<Space.LeftResizable as="aside" size={sidebarSize} onResizeEnd={(newSize) => { setSidebarSize(newSize);}} handleSize={30}>
2828
<Menu defaultSelectedKeys={[ selectedKey ]} onSelect={e => setSelectedKey(e.key)}>
2929
<Menu.Item key="1">Menu item 1</Menu.Item>
3030
<Menu.Item key="2">Menu item 2</Menu.Item>
3131
<Menu.Item key="3">Menu item 3</Menu.Item>
3232
</Menu>
3333
</Space.LeftResizable>
34-
<Space.Fill as="main" scrollable={true}>
34+
<Space.Fill as="article" scrollable={true}>
3535
{
3636
loading ?
3737
<Space.Centered><Spin size="large" /><br />Loading stuff</Space.Centered> :

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const DemoSelection = (props: {
3737

3838
return (
3939
props.sidebarVisible ?
40-
<Space.LeftResizable className="ui-list" size={300} minimumSize={150} style={{ backgroundColor: '#193549' }} handleSize={30}>
40+
<Space.LeftResizable as="aside" id="ui-list" className="ui-list" size={300} minimumSize={150} style={{ backgroundColor: '#193549' }} handleSize={30}>
4141
<Space.Fill scrollable={true}>
4242
<ul>
4343
<li className={props.selectedDemo === "resizable" ? "active" : undefined}>

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AllProps, IState, AnchorTypes, ResizeType } from './Types';
22
import * as React from 'react';
3-
import { initialState, isHorizontalSpace, isVerticalSpace, getSizeString, isFilledSpace, applyResize, createContext } from './Utils';
3+
import { initialState, isHorizontalSpace, isVerticalSpace, getSizeString, isFilledSpace, applyResize, createContext, cssValue } from './Utils';
44
import { ResizeSensor } from 'css-element-queries';
55
import { AnchorType } from './Types';
66
import { SpaceContext, SpaceLayerContext } from './Contexts';
@@ -70,12 +70,12 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
7070
})
7171

7272
const outerStyle = {
73-
left: (state.left !== undefined ? `calc(${getSizeString(state.left || 0)}${state.adjustedLeft ? ` + ${state.adjustedLeft}px` : ``})` : undefined),
74-
top: (state.top !== undefined ? `calc(${getSizeString(state.top || 0)}${state.adjustedTop ? ` + ${state.adjustedTop}px` : ``})` : undefined),
75-
right: (state.right !== undefined ? `calc(${getSizeString(state.right || 0)}${state.adjustedLeft ? ` - ${state.adjustedLeft}px` : ``})` : undefined),
76-
bottom: (state.bottom !== undefined ? `calc(${getSizeString(state.bottom || 0)}${state.adjustedTop ? ` - ${state.adjustedTop}px` : ``})` : undefined),
77-
width: isHorizontalSpace(props) ? `calc(${getSizeString(props.anchorSize || 0)} + ${state.adjustedSize}px)` : state.width,
78-
height: isVerticalSpace(props) ? `calc(${getSizeString(props.anchorSize || 0)} + ${state.adjustedSize}px)` : state.height,
73+
left: (state.left !== undefined ? cssValue(state.left, state.adjustedLeft) : undefined),
74+
top: (state.top !== undefined ? cssValue(state.top, state.adjustedTop) : undefined),
75+
right: (state.right !== undefined ? cssValue(state.right, state.adjustedLeft) : undefined),
76+
bottom: (state.bottom !== undefined ? cssValue(state.bottom, state.adjustedTop) : undefined),
77+
width: isHorizontalSpace(props) ? cssValue(props.anchorSize, state.adjustedSize) : state.width,
78+
height: isVerticalSpace(props) ? cssValue(props.anchorSize, state.adjustedSize) : state.height,
7979
zIndex: currentZIndex,
8080
};
8181

@@ -100,7 +100,7 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
100100
{
101101
const t = spaceTakers[i];
102102
if (t.id !== state.id) {
103-
const adjustedSize = t.adjustedSize !== 0 ?` + ${t.adjustedSize}px` : ``;
103+
const adjustedSize = t.adjustedSize !== 0 ? ` + ${getSizeString(t.adjustedSize)}` : ``;
104104
if (isFilledSpace(props))
105105
{
106106
if (t.anchorType === AnchorType.Top) {
@@ -178,12 +178,11 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
178178
[
179179
...[
180180
"spaces-space",
181-
props.anchor || undefined,
182181
resize.resizeType || undefined,
183-
props.scrollable ? "scrollable" : undefined,
182+
props.scrollable ? (resize.resizeHandle ? "scrollable" : "scrollable-a") : undefined,
184183
debug ? 'debug' : undefined
185184
],
186-
...userClasses.map(c => `${c}-container`)
185+
...(resize.resizeHandle && props.scrollable ? userClasses.map(c => `${c}-container`) : userClasses)
187186
].filter(c => c);
188187

189188
const innerClasses =

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Resizable } from '../Resizable';
33
import { AnchorType, AllProps, IState, ISpaceContext, ISpaceTaker, AnchorToResizeTypeMap, ResizeType } from './Types';
44

55
export const getSizeString =
6-
(size: string | number) => typeof(size) === "string" ? size : `${size}px`;
6+
(size: string | number) => typeof(size) === "string" ? size : `${size}${size !== 0 ? "px" : ""}`;
77

88
export const isFilledSpace =
99
(props: AllProps) => !props.anchor
@@ -14,15 +14,14 @@ export const isHorizontalSpace = (props: AllProps) =>
1414
export const isVerticalSpace = (props: AllProps) =>
1515
props.anchor && (props.anchor === AnchorType.Top || props.anchor === AnchorType.Bottom)
1616

17-
const uuid = () =>
18-
"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
19-
let random = Math.random() * 16 | 0;
20-
let value = char === "x" ? random : (random % 4 + 8);
21-
return value.toString(16);
22-
});
17+
function shortuuid() {
18+
let firstPart = (Math.random() * 46656) | 0;
19+
let secondPart = (Math.random() * 46656) | 0;
20+
return ("000" + firstPart.toString(36)).slice(-3) + ("000" + secondPart.toString(36)).slice(-3);
21+
}
2322

2423
export const initialState = (props: AllProps) => ({
25-
id: props.id || uuid(),
24+
id: props.id || `s${shortuuid()}`,
2625
currentWidth: 0,
2726
currentHeight: 0,
2827
adjustedSize: 0,
@@ -92,6 +91,11 @@ export const createContext = (
9291
return context;
9392
}
9493

94+
export const cssValue = (value: number | string | undefined, adjusted: number) =>
95+
adjusted ?
96+
`calc(${getSizeString(value || 0)} + ${getSizeString(adjusted)})` :
97+
getSizeString(value || 0)
98+
9599
export const applyResize = (
96100
props: AllProps,
97101
state: IState,

‎react-spaces/src/Space.tsx‎

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { SpaceContext, SpaceInfoContext } from './Globals/Contexts';
44
import { useSpace } from './Globals/Hooks';
55
import './Styles.css';
66
import { CenteredVertically, Centered } from './Centered';
7+
import * as ReactDOM from 'react-dom';
78

89
export const Fill : React.FC<IPublicProps> = (props) => <SpaceInternal {...props} />
910
Fill.propTypes = publicProps;
@@ -55,29 +56,61 @@ export const SpaceInternal : React.FC<AllProps> = (props) => {
5556
<SpaceInfoContext.Provider value={{ width: Math.floor(currentWidth), height: Math.floor(currentHeight) }}>
5657
{
5758
props.topMost ?
58-
children :
59-
React.createElement(
60-
props.as || 'div',
61-
{
62-
id: state.id,
63-
ref: divElementRef,
64-
className: outerClasses.join(' '),
65-
style: outerStyle,
66-
onClick: props.onClick,
67-
onMouseDown: props.onMouseDown,
68-
onMouseEnter: props.onMouseEnter,
69-
onMouseLeave: props.onMouseLeave
70-
},
71-
<>
72-
{ resizeHandle }
73-
<div className={innerClasses.join(' ')} style={innerStyle}>
59+
<>
60+
{ children }
61+
</> :
62+
resizeHandle && props.scrollable ?
63+
React.createElement(
64+
props.as || 'div',
65+
{
66+
id: state.id,
67+
ref: divElementRef,
68+
className: outerClasses.join(' '),
69+
onClick: props.onClick,
70+
onMouseDown: props.onMouseDown,
71+
onMouseEnter: props.onMouseEnter,
72+
onMouseLeave: props.onMouseLeave
73+
},
74+
<>
75+
<HeadStyles id={state.id} style={outerStyle} />
76+
{ resizeHandle }
77+
<div
78+
className={innerClasses.join(' ')}
79+
style={innerStyle}>
80+
{ children }
81+
</div>
82+
</>
83+
) :
84+
React.createElement(
85+
props.as || 'div',
86+
{
87+
id: state.id,
88+
ref: divElementRef,
89+
className: outerClasses.join(' '),
90+
style: innerStyle,
91+
onClick: props.onClick,
92+
onMouseDown: props.onMouseDown,
93+
onMouseEnter: props.onMouseEnter,
94+
onMouseLeave: props.onMouseLeave
95+
},
96+
<>
97+
<HeadStyles id={state.id} style={outerStyle} />
98+
{ resizeHandle }
7499
{ children }
75-
</div>
76-
</>
77-
)
100+
</>
101+
)
78102
}
79103
</SpaceInfoContext.Provider>
80104
</SpaceContext.Provider>
81105
)
82106
}
107+
108+
const HeadStyles : React.FC<{ id: string, style: React.CSSProperties }> = (props) => {
109+
const { style } = props;
110+
return ReactDOM.createPortal(
111+
<style key={props.id}>{ `#${props.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};` : "" } { `}`}</style>,
112+
window.document.head
113+
);
114+
}
115+
83116
SpaceInternal.propTypes = allProps;

‎react-spaces/src/Styles.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,17 @@
6363
.spaces-space {
6464
position: absolute;
6565
overflow: hidden;
66-
z-index: 1;
6766
}
6867

6968
.spaces-space .spaces-space-inner {
70-
z-index: 1;
7169
position: absolute;
7270
left: 0;
7371
top: 0;
7472
right: 0;
7573
bottom: 0;
7674
}
7775

78-
.spaces-space.scrollable .spaces-space-inner {
76+
.spaces-space.scrollable .spaces-space-inner,
77+
.spaces-space.scrollable-a {
7978
overflow: auto;
8079
}

0 commit comments

Comments
 (0)