Skip to content

Commit e08375a

Browse files
aeagleaeagle
authored
Merge pull request #50 from aeagle/feature/clean-markup
State and resize optimisations
2 parents d45dc32 + a8094f9 commit e08375a

29 files changed

+903
-586
lines changed

‎demo/src/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { Suspense } from 'react';
1+
import React from 'react';
22
import './App.scss';
33
import ReactGA from 'react-ga';
4+
// import { Test } from './Test';
45
import { UI } from './ui-demo/UI';
56

67
ReactGA.initialize("UA-144490437-1");

‎demo/src/Test.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.test {
2+
.spaces-space {
3+
// transition: width 0.5s ease;
4+
}
5+
}

‎demo/src/Test.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from "react";
2+
import * as Space from "react-spaces";
3+
import './Test.scss';
4+
import { Info } from "react-spaces";
5+
6+
const COLLAPSED_SIZE = 20;
7+
const MINIMUM_SIZE = 200;
8+
9+
export const Test : React.FC = () => {
10+
const [ size, setSize ] = React.useState("25%");
11+
12+
const onResizeStart = () => {
13+
};
14+
15+
const onResizeEnd = (width: number) => {
16+
// setSize(width);
17+
}
18+
19+
return (
20+
<Space.ViewPort className="test">
21+
22+
<Space.Left
23+
style={{ backgroundColor: 'yellow', padding: 10 }}
24+
size={size}
25+
trackSize={false}
26+
order={1}>
27+
<Space.Info>
28+
{(info) => <span>Hello<br />{info.width} x {info.height}</span>}
29+
</Space.Info>
30+
<div>Something else</div>
31+
</Space.Left>
32+
33+
<Space.Left
34+
style={{ backgroundColor: 'navy', color: 'white', padding: 10 }}
35+
size={200}
36+
trackSize={false}
37+
order={2}>
38+
<Space.Info>
39+
{(info) => <span>Something<br />{info.width} x {info.height}</span>}
40+
</Space.Info>
41+
</Space.Left>
42+
43+
<Space.Fill
44+
style={{ backgroundColor: 'red', padding: 10 }}
45+
trackSize={false}>
46+
<Space.Info>
47+
{(info) => <span>World<br />{info.width} x {info.height}</span>}
48+
</Space.Info>
49+
</Space.Fill>
50+
51+
</Space.ViewPort>
52+
)
53+
}

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
}
1515
}
1616

17-
.bottom-pane-container {
17+
.bottom-pane {
1818
.spaces-resize-handle {
19-
background-color: #333 !important;
19+
border-top: 2px #333 solid;
2020
}
2121

2222
button {
@@ -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/CodeEditor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const IconPane = () => {
8181

8282
const SideBar : React.FC<{ wide: boolean, visible: boolean }> = (props) => {
8383
return (
84-
<Space.LeftResizable order={2} className="side-bar" size={props.visible ? (props.wide ? 500 : 300) : 0} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
84+
<Space.LeftResizable order={2} className="side-bar" size={props.visible ? (props.wide ? 500 : 300) : 0} handleSize={20} overlayHandle={true} style={{ backgroundColor: '#252526' }}>
8585
<SideBarPane order={1} title="Open editors" height={200}>
8686

8787
</SideBarPane>
@@ -116,7 +116,7 @@ const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
116116
{props.title}
117117
</Space.CenteredVertically>
118118
</Space.Top>
119-
<Space.Fill className="content">
119+
<Space.Fill className="content" style={{ backgroundColor: '#1f1f1f' }}>
120120
{props.children}
121121
</Space.Fill>
122122
</>
@@ -125,7 +125,7 @@ const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
125125

126126
const BottomPane : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
127127
return (
128-
<Space.BottomResizable className="bottom-pane" size={60} handleSize={2} centerContent={Space.CenterType.HorizontalVertical}>
128+
<Space.BottomResizable className="bottom-pane" size={60} handleSize={20} centerContent={Space.CenterType.HorizontalVertical}>
129129
<button onClick={props.toggleVisibility}>Toggle sidebar visibility</button>
130130
<button onClick={props.toggleSize}>Toggle sidebar size</button>
131131
</Space.BottomResizable>

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react';
2+
import * as Space from 'react-spaces';
3+
4+
export const Pinnable = () => {
5+
const [leftOpen, setLeftOpen] = React.useState(false);
6+
const [leftPinned, setLeftPinned] = React.useState(false);
7+
const [rightOpen, setRightOpen] = React.useState(false);
8+
const [rightPinned, setRightPinned] = React.useState(false);
9+
10+
return (
11+
<>
12+
<Space.Fill>
13+
<Space.LeftResizable
14+
order={1}
15+
size={leftOpen ? "25%" : 50}
16+
zIndex={leftPinned ? 1 : 2}
17+
style={{ background: "yellow", opacity: 0.8 }}
18+
>
19+
<Space.Top size={40} centerContent={Space.CenterType.HorizontalVertical}>
20+
<button onClick={() => setLeftOpen(prev => !prev)}>
21+
{leftOpen ? "Close" : "Open"}
22+
</button>
23+
{leftOpen && (
24+
<button onClick={() => setLeftPinned(prev => !prev)}>
25+
{leftPinned ? "Unpin" : "Pin"}
26+
</button>
27+
)}
28+
</Space.Top>
29+
<Space.Fill style={{ padding: 10 }}>
30+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab incidunt
31+
commodi id doloremque inventore laudantium maxime saepe veritatis,
32+
dolorem labore magnam. Quod, tempore inventore omnis doloremque
33+
accusantium commodi ratione dignissimos eos doloribus aliquid
34+
quibusdam officiis qui porro neque modi, fugiat iusto suscipit
35+
perspiciatis? Corporis, necessitatibus quia soluta illum perferendis
36+
beatae.
37+
</Space.Fill>
38+
</Space.LeftResizable>
39+
<Space.Left
40+
zIndex={1}
41+
order={2}
42+
size="25%"
43+
style={{ background: "orange" }}
44+
>
45+
<Space.Top size={40} />
46+
<Space.Fill style={{ padding: 10 }}>
47+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod a,
48+
facilis qui perspiciatis excepturi culpa! Vero sit eum nobis itaque
49+
nemo culpa sed quasi recusandae, voluptatum, debitis dolores qui dolor
50+
libero ipsam minima animi voluptates! Ad excepturi modi eius velit,
51+
debitis impedit maxime voluptates consequatur rem dolore nesciunt,
52+
earum cum.
53+
</Space.Fill>
54+
</Space.Left>
55+
<Space.Fill zIndex={1} style={{ background: "pink" }}>
56+
<Space.Top size={40} />
57+
<Space.Fill style={{ padding: 10 }}>
58+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo dicta
59+
dolore nisi veniam maiores iusto magnam fuga facere ipsum, recusandae,
60+
reprehenderit quasi illum sequi doloribus molestias. Consectetur qui
61+
unde dolore odio similique quidem perferendis, eligendi sequi
62+
recusandae explicabo. Excepturi ratione molestias et temporibus
63+
perferendis vitae ab voluptatum repellat corporis assumenda.
64+
</Space.Fill>
65+
</Space.Fill>
66+
<Space.Right
67+
size={rightOpen ? "25%" : 50}
68+
zIndex={rightPinned ? 1 : 2}
69+
style={{ background: "lime", opacity: 0.8 }}
70+
>
71+
<Space.Top size={40} centerContent={Space.CenterType.HorizontalVertical}>
72+
<button onClick={() => setRightOpen(prev => !prev)}>
73+
{rightOpen ? "Close" : "Open"}
74+
</button>
75+
{rightOpen && (
76+
<button onClick={() => setRightPinned(prev => !prev)}>
77+
{rightPinned ? "Unpin" : "Pin"}
78+
</button>
79+
)}
80+
</Space.Top>
81+
<Space.Fill style={{ padding: 10 }}>
82+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure,
83+
inventore! Deserunt quasi hic atque natus quod totam. Quia molestias
84+
obcaecati quibusdam illum sint dolorem doloremque eos unde natus
85+
nesciunt officia corrupti recusandae ipsam, accusamus, sed amet optio
86+
numquam minima eaque inventore enim esse. Natus saepe laboriosam dolor
87+
magnam at illo.
88+
</Space.Fill>
89+
</Space.Right>
90+
</Space.Fill>
91+
</>
92+
);
93+
};

‎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: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Resizable } from './Resizable';
77
import { ScrollableDemo } from './Scrollable';
88
import { LayersDemo } from './Layers';
99
import { WindowsDemo } from './Windows';
10+
import { Pinnable } from './Pinnable';
1011

1112
export const UI = () => {
1213
const [ selectedDemo, setSelectedDemo ] = React.useState("resizable");
@@ -37,7 +38,7 @@ const DemoSelection = (props: {
3738

3839
return (
3940
props.sidebarVisible ?
40-
<Space.LeftResizable className="ui-list" size={300} minimumSize={150} style={{ backgroundColor: '#193549' }} handleSize={30}>
41+
<Space.LeftResizable as="aside" id="ui-list" className="ui-list" size={300} minimumSize={150} style={{ backgroundColor: '#193549' }} handleSize={30}>
4142
<Space.Fill scrollable={true}>
4243
<ul>
4344
<li className={props.selectedDemo === "resizable" ? "active" : undefined}>
@@ -81,6 +82,15 @@ const DemoSelection = (props: {
8182
</span>
8283
</a>
8384
</li>
85+
<li className={props.selectedDemo === "pinnable" ? "active" : undefined}>
86+
<a onClick={() => props.setSelectedDemo("pinnable" )}>
87+
Pinnable
88+
<span>
89+
Pinnable anchored spaces using a combination of layers and
90+
anchored spaces.
91+
</span>
92+
</a>
93+
</li>
8494
</ul>
8595
</Space.Fill>
8696
<Space.Bottom size={60} className="tools">
@@ -115,12 +125,13 @@ const DemoSelection = (props: {
115125

116126
const Main = (props: { selectedDemo: string, showSpaces: boolean }) => {
117127
return (
118-
<Space.Fill debug={props.showSpaces}>
128+
<Space.Fill>
119129
{ props.selectedDemo === "resizable" ? <Resizable /> : null }
120130
{ props.selectedDemo === "scrollable" ? <ScrollableDemo /> : null }
121131
{ props.selectedDemo === "layers" ? <LayersDemo /> : null }
122132
{ props.selectedDemo === "windows" ? <WindowsDemo /> : null }
123133
{ props.selectedDemo === "codeeditor" ? <CodeEditor /> : null }
134+
{ props.selectedDemo === "pinnable" ? <Pinnable /> : null }
124135
</Space.Fill>
125136
)
126137
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const WindowInner : React.FC<{ onClick?: () => void }> = (props) => {
5858

5959
return (
6060
<>
61-
<Space.Top className="title-bar" onMouseDown={e => { props.onClick && props.onClick(); parentSpace.startDrag(e); }} size={40}>
61+
<Space.Top className="title-bar" onMouseDown={e => { props.onClick && props.onClick(); parentSpace.startDrag(); }} size={40}>
6262
{Description(`Window title`)}
6363
</Space.Top>
6464
<Space.Fill className="content" centerContent={Space.CenterType.HorizontalVertical}>

0 commit comments

Comments
 (0)