Skip to content

Commit 21db54c

Browse files
aeagleaeagle
committed
Initial implementation of positioned spaces and refactored and optmised existing code
1 parent d58894a commit 21db54c

File tree

13 files changed

+644
-518
lines changed

13 files changed

+644
-518
lines changed

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,30 @@
22
aside {
33
opacity: 0.7;
44
background-color: #e0eeee;
5+
6+
.description {
7+
position: relative;
8+
top: -200px;
9+
}
10+
}
11+
12+
section {
13+
opacity: 0.7;
14+
background-color: #e0e0ee;
15+
16+
.description {
17+
position: relative;
18+
top: -200px;
19+
}
520
}
621

722
nav {
823
background-color: #eee0e0;
24+
25+
.description {
26+
position: relative;
27+
top: 200px;
28+
}
929
}
1030

1131
main {
@@ -15,5 +35,6 @@
1535
.description {
1636
color: black;
1737
font-size: 120%;
38+
padding: 30px;
1839
}
1940
}

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

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,57 @@ import './Layers.scss';
55
export const LayersDemo = () => {
66
const [ fixedSideBarHovered, setFixedSideBarHovered ] = React.useState(false);
77
const [ floatingSideBarHovered, setFloatingSideBarHovered ] = React.useState(false);
8+
const [ showLayer1, setShowLayer1 ] = React.useState(true);
9+
const [ showLayer2, setShowLayer2 ] = React.useState(true);
810

911
return (
1012
<Space.Fill className="layers-demo">
11-
<Space.Layer zIndex={0}>
12-
<Space.Left
13-
size={fixedSideBarHovered ? "40%" : "15%" }
14-
onMouseEnter={() => setFixedSideBarHovered(true)}
15-
onMouseLeave={() => setFixedSideBarHovered(false)}
16-
as="nav">
17-
</Space.Left>
18-
19-
<Space.Fill as="main">
20-
{Description("Fill space not affected by floated left space in different layer")}
21-
</Space.Fill>
22-
</Space.Layer>
23-
24-
<Space.Layer zIndex={1}>
25-
<Space.Left
26-
size={floatingSideBarHovered ? "30%" : 50 }
27-
onMouseEnter={() => setFloatingSideBarHovered(true)}
28-
onMouseLeave={() => setFloatingSideBarHovered(false)}
29-
as="aside">
30-
{Description("Left floated")}
31-
</Space.Left>
32-
</Space.Layer>
13+
<Space.Top size={40} centerContent={Space.CenterType.HorizontalVertical}>
14+
<label><input type="checkbox" checked={showLayer1} onChange={e => setShowLayer1(e.target.checked)} /> Show layer 1</label>
15+
<label><input type="checkbox" checked={showLayer2} onChange={e => setShowLayer2(e.target.checked)} /> Show layer 2</label>
16+
</Space.Top>
17+
<Space.Fill>
18+
19+
{ showLayer1 &&
20+
<Space.Layer zIndex={0}>
21+
22+
<Space.Left
23+
size={fixedSideBarHovered ? "75%" : "60%" }
24+
onMouseEnter={() => setFixedSideBarHovered(true)}
25+
onMouseLeave={() => setFixedSideBarHovered(false)}
26+
as="nav">
27+
{Description("Left fixed (zIndex = 0)")}
28+
</Space.Left>
29+
30+
<Space.Fill as="main">
31+
{Description("Fill space not affected by floated left space in different layer but is affected by left space in same layer (zIndex = 0)")}
32+
</Space.Fill>
33+
34+
</Space.Layer>
35+
}
36+
37+
{ showLayer2 &&
38+
<Space.Layer zIndex={1}>
39+
40+
<Space.Left
41+
order={1}
42+
size={floatingSideBarHovered ? "30%" : "15%" }
43+
onMouseEnter={() => setFloatingSideBarHovered(true)}
44+
onMouseLeave={() => setFloatingSideBarHovered(false)}
45+
as="aside">
46+
{Description("Left floated (zIndex = 1)")}
47+
</Space.Left>
48+
<Space.Left
49+
order={2}
50+
size="15%"
51+
as="section">
52+
{Description("Left floated (zIndex = 1)")}
53+
</Space.Left>
54+
55+
</Space.Layer>
56+
}
57+
58+
</Space.Fill>
3359
</Space.Fill>
3460
)
3561
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.ui-demo {
22
font-family: 'Roboto', sans-serif;
33
font-size: 12px;
4-
color: #c5c5c5;
54

65
.examples-sidebar {
76
h2 {

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

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import { CodeEditor } from './CodeEditor';
66
import { Resizable } from './Resizable';
77
import { ScrollableDemo } from './Scrollable';
88
import { LayersDemo } from './Layers';
9+
import { WindowsDemo } from './Windows';
910

1011
export const UI = () => {
11-
const [ selectedDemo, setSelectedDemo ] = React.useState(1);
12+
const [ selectedDemo, setSelectedDemo ] = React.useState("resizable");
1213
const [ showSpaces, setShowSpaces ] = React.useState(false);
1314
const [ sidebarVisible, setSidebarVisible ] = React.useState(true);
1415

@@ -29,8 +30,8 @@ export const UI = () => {
2930
const DemoSelection = (props: {
3031
sidebarVisible: boolean,
3132
setSidebarVisible: (state: boolean) => void,
32-
selectedDemo: number,
33-
setSelectedDemo: (demo: number) => void,
33+
selectedDemo: string,
34+
setSelectedDemo: (demo: string) => void,
3435
showSpaces: boolean,
3536
setShowSpaces: (state: boolean) => void }) => {
3637

@@ -39,32 +40,41 @@ const DemoSelection = (props: {
3940
<Space.LeftResizable className="ui-list" size={300} minimumSize={150} style={{ backgroundColor: '#193549' }}>
4041
<Space.Fill scrollable={true}>
4142
<ul>
42-
<li className={props.selectedDemo === 1 ? "active" : undefined}>
43-
<a onClick={() => props.setSelectedDemo(1)}>
43+
<li className={props.selectedDemo === "resizable" ? "active" : undefined}>
44+
<a onClick={() => props.setSelectedDemo("resizable")}>
4445
Nested / resizable spaces
4546
<span>
4647
Example with nested and resizable spaces
4748
</span>
4849
</a>
4950
</li>
50-
<li className={props.selectedDemo === 2 ? "active" : undefined}>
51-
<a onClick={() => props.setSelectedDemo(2)}>
51+
<li className={props.selectedDemo === "scrollable" ? "active" : undefined}>
52+
<a onClick={() => props.setSelectedDemo("scrollable")}>
5253
Sidebar / header layout
5354
<span>
5455
antd components with a header, sidebar and scrollable main layout
5556
</span>
5657
</a>
5758
</li>
58-
<li className={props.selectedDemo === 3 ? "active" : undefined}>
59-
<a onClick={() => props.setSelectedDemo(3)}>
59+
<li className={props.selectedDemo === "layers" ? "active" : undefined}>
60+
<a onClick={() => props.setSelectedDemo("layers")}>
6061
Layers
6162
<span>
62-
Layered spaces
63+
Layered spaces demonstrating hover interaction to create drawer like
64+
elements
6365
</span>
6466
</a>
6567
</li>
66-
<li className={props.selectedDemo === 4 ? "active" : undefined}>
67-
<a onClick={() => props.setSelectedDemo(4)}>
68+
<li className={props.selectedDemo === "windows" ? "active" : undefined}>
69+
<a onClick={() => props.setSelectedDemo("windows")}>
70+
Windows
71+
<span>
72+
Positioned spaces used to create resizable / draggable floating windows
73+
</span>
74+
</a>
75+
</li>
76+
<li className={props.selectedDemo === "codeeditor" ? "active" : undefined}>
77+
<a onClick={() => props.setSelectedDemo("codeeditor" )}>
6878
Code editor
6979
<span>
7080
A code editor interface with docked panels, menu bars and tabs
@@ -103,13 +113,14 @@ const DemoSelection = (props: {
103113
)
104114
}
105115

106-
const Main = (props: { selectedDemo: number, showSpaces: boolean }) => {
116+
const Main = (props: { selectedDemo: string, showSpaces: boolean }) => {
107117
return (
108118
<Space.Fill debug={props.showSpaces}>
109-
{ props.selectedDemo === 1 ? <Resizable /> : null }
110-
{ props.selectedDemo === 2 ? <ScrollableDemo /> : null }
111-
{ props.selectedDemo === 3 ? <LayersDemo /> : null }
112-
{ props.selectedDemo === 4 ? <CodeEditor /> : null }
119+
{ props.selectedDemo === "resizable" ? <Resizable /> : null }
120+
{ props.selectedDemo === "scrollable" ? <ScrollableDemo /> : null }
121+
{ props.selectedDemo === "layers" ? <LayersDemo /> : null }
122+
{ props.selectedDemo === "windows" ? <WindowsDemo /> : null }
123+
{ props.selectedDemo === "codeeditor" ? <CodeEditor /> : null }
113124
</Space.Fill>
114125
)
115126
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.windows-demo {
2+
.desktop {
3+
background-color: #091731;
4+
}
5+
.window {
6+
background-color: #eee0e0;
7+
8+
.title-bar {
9+
cursor: move;
10+
margin: 0px;
11+
background-color: navy;
12+
.description {
13+
color: white;
14+
}
15+
}
16+
17+
.content {
18+
margin: 2px;
19+
background-color: white;
20+
}
21+
}
22+
23+
.description {
24+
color: black;
25+
font-size: 120%;
26+
}
27+
}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import * as React from 'react';
2+
import * as Space from 'react-spaces';
3+
import './Windows.scss';
4+
import { Button } from 'antd';
5+
6+
interface IWindow {
7+
id: number
8+
}
9+
10+
export const WindowsDemo = () => {
11+
const [ windows, setWindows ] = React.useState<IWindow[]>([]);
12+
13+
const addWindow = () => {
14+
setWindows(prev => [...prev, { id: prev.length + 1 }]);
15+
}
16+
17+
const bringToFront = (window: IWindow) => {
18+
setWindows(prev => [...prev.filter(w => w.id !== window.id), window]);
19+
}
20+
21+
return (
22+
<Space.Fill className="windows-demo">
23+
<Space.Top size={40} centerContent={Space.CenterType.HorizontalVertical}>
24+
<Button onClick={addWindow}>Add window</Button>
25+
</Space.Top>
26+
<Space.Fill className="desktop">
27+
{ windows.map((w, idx) => <Window window={w} key={idx} zIndex={idx} onClick={bringToFront} />) }
28+
</Space.Fill>
29+
</Space.Fill>
30+
)
31+
}
32+
33+
interface IWindowProps {
34+
window: IWindow,
35+
zIndex?: number,
36+
onClick?: (window: IWindow) => void
37+
}
38+
39+
const Window : React.FC<IWindowProps> = (props) => {
40+
return (
41+
<Space.Positioned
42+
className="window"
43+
onClick={() => props.onClick && props.onClick(props.window)}
44+
zIndex={props.zIndex}
45+
left={"25%"}
46+
top={"25%"}
47+
width={"50%"}
48+
height={"50%"}>
49+
50+
<WindowInner />
51+
52+
</Space.Positioned>
53+
)
54+
}
55+
56+
const WindowInner : React.FC = (props) => {
57+
const parentSpace = Space.useParentSpace();
58+
59+
return (
60+
<>
61+
<Space.Top className="title-bar" onMouseDown={parentSpace.startDrag} size={40}>
62+
{Description(`Window title`)}
63+
</Space.Top>
64+
<Space.Fill className="content" centerContent={Space.CenterType.HorizontalVertical}>
65+
{Description(`Window content`)}
66+
</Space.Fill>
67+
</>
68+
)
69+
}
70+
71+
const Description = (props: string) => (
72+
<Space.Centered>
73+
<div className="description">
74+
<strong>{props}</strong>
75+
</div>
76+
</Space.Centered>
77+
);

0 commit comments

Comments
 (0)