Skip to content

Commit 08afb7e

Browse files
aeagleaeagle
authored
Merge pull request #23 from aeagle/migrate-to-rollup
Migrate to rollup
2 parents 575ea99 + e381d3f commit 08afb7e

34 files changed

+2971
-4166
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,4 @@
2020
npm-debug.log*
2121
yarn-debug.log*
2222
yarn-error.log*
23-
*.css*
23+
**/.rpt2_cache

‎demo/public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
67
<meta name="description" content="React Spaces are a set of React components that allow you to divide a page or container into nestable, anchored, scrollable and resizable spaces." />
78
<meta name="viewport" content="width=device-width, initial-scale=1" />
89
<meta name="theme-color" content="#000000" />

‎demo/src/App.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -116,12 +116,8 @@ pre {
116116
font-size: 18px !important;
117117
}
118118

119-
::-webkit-scrollbar{
120-
width: 5px;
121-
}
122-
123119
::-webkit-scrollbar-track-piece{
124-
background-color: #FFF;
120+
background-color: none;
125121
}
126122

127123
::-webkit-scrollbar-thumb{

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.code-editor {
2+
.editor-main {
3+
padding: 5px 5px 5px 10px;
4+
font-size: 16px;
5+
font-family: 'Courier New', Courier, monospace;
6+
}
7+
8+
.sidebar-pane {
9+
.title {
10+
font-size: 11px;
11+
padding-left: 5px;
12+
font-weight: 700;
13+
text-transform: uppercase;
14+
}
15+
}
16+
17+
.bottom-pane-container {
18+
.spaces-resize-handle {
19+
background-color: #333 !important;
20+
}
21+
22+
button {
23+
margin-right: 10px;
24+
border: none;
25+
background-color: #555;
26+
color: white;
27+
padding: 5px 15px;
28+
}
29+
}
30+
31+
.side-bar-container {
32+
.resize-right {
33+
background-color: #333 !important;
34+
}
35+
}
36+
}

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

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import * as React from 'react';
2+
import * as Space from 'react-spaces';
3+
import MonacoEditor from 'react-monaco-editor';
4+
import { CenterType } from 'react-spaces';
5+
import './CodeEditor.scss';
6+
7+
export const CodeEditor = () => {
8+
return (
9+
<Space.Fill className="code-editor">
10+
<Header />
11+
<Main />
12+
</Space.Fill>
13+
)
14+
}
15+
16+
const Header = () => {
17+
return (
18+
<Space.Top className="title-bar" centerContent={CenterType.HorizontalVertical} size={30} style={{ backgroundColor: '#333', color: '#c5c5c5' }}>
19+
<MenuBar />
20+
UI Demo - Example UI interface
21+
</Space.Top>
22+
)
23+
}
24+
25+
const Main = () => {
26+
const [ sidebarVisible, setSidebarVisible ] = React.useState(true);
27+
const [ sidebarWide, setSidebarWide ] = React.useState(false);
28+
29+
return (
30+
<Space.Fill style={{ backgroundColor: '#1E1E1E' }}>
31+
<Space.Fill>
32+
<IconPane />
33+
<SideBar wide={sidebarWide} visible={sidebarVisible} />
34+
<Editor toggleSize={() => setSidebarWide(!sidebarWide)} toggleVisibility={() => setSidebarVisible(!sidebarVisible)} />
35+
</Space.Fill>
36+
</Space.Fill>
37+
)
38+
}
39+
40+
const MenuBar = () => {
41+
return (
42+
<Space.Left className="menu-bar" size="30%">
43+
44+
</Space.Left>
45+
)
46+
}
47+
48+
const Editor : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
49+
const [ code, setCode ] = React.useState('import * as React from \'react\';\r\nimport * as Space from \'react-spaces\';\r\n\r\nexport const App = () => {\r\n <Space.ViewPort>\r\n <Space.Top size={30}>\r\n Hello!\r\n </Space.Top>\r\n <Space.Fill>\r\n World!\r\n </Space.Fill>\r\n </Space.ViewPort>\r\n}');
50+
51+
const options = {
52+
selectOnLineNumbers: true,
53+
automaticLayout: true
54+
};
55+
56+
return (
57+
<Space.Fill>
58+
<Space.Fill>
59+
<Space.Top className="editor-tabs" size={40}>
60+
</Space.Top>
61+
<Space.Fill className="editor-main">
62+
<MonacoEditor
63+
value={code}
64+
onChange={(newValue: string) => setCode(newValue)}
65+
options={options}
66+
language="javascript"
67+
theme="vs-dark" />
68+
</Space.Fill>
69+
</Space.Fill>
70+
<BottomPane toggleSize={props.toggleSize} toggleVisibility={props.toggleVisibility} />
71+
</Space.Fill>
72+
)
73+
}
74+
75+
const IconPane = () => {
76+
return (
77+
<Space.Left order={1} className="side-bar-icons" size={50} style={{ backgroundColor: '#333' }}>
78+
</Space.Left>
79+
)
80+
}
81+
82+
const SideBar : React.FC<{ wide: boolean, visible: boolean }> = (props) => {
83+
return (
84+
props.visible ?
85+
<Space.LeftResizable order={2} className="side-bar" size={props.wide ? 500 : 300} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
86+
<SideBarPane order={1} title="Open editors" height={200}>
87+
88+
</SideBarPane>
89+
<SideBarPane order={2} title="Demo" height={300}>
90+
91+
</SideBarPane>
92+
<SideBarPane fill={true} title="Outline">
93+
94+
</SideBarPane>
95+
</Space.LeftResizable> :
96+
null
97+
)
98+
}
99+
100+
const SideBarPane: React.FC<{ order?: number, title: string, height?: number, fill?: boolean }> = (props) => {
101+
return (
102+
props.fill ?
103+
<Space.Fill className="sidebar-pane">
104+
<SideBarPaneInner title={props.title}>{props.children}</SideBarPaneInner>
105+
</Space.Fill>
106+
:
107+
<Space.TopResizable className="sidebar-pane" order={props.order} size={props.height!}>
108+
<SideBarPaneInner title={props.title}>{props.children}</SideBarPaneInner>
109+
</Space.TopResizable>
110+
)
111+
}
112+
113+
const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
114+
return (
115+
<>
116+
<Space.Top className="title" size={28} style={{ backgroundColor: '#383838', color: '#c5c5c5' }}>
117+
<Space.CenteredVertically>
118+
{props.title}
119+
</Space.CenteredVertically>
120+
</Space.Top>
121+
<Space.Fill className="content">
122+
{props.children}
123+
</Space.Fill>
124+
</>
125+
)
126+
}
127+
128+
const BottomPane : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
129+
return (
130+
<Space.BottomResizable className="bottom-pane" size={60} handleSize={2} centerContent={Space.CenterType.HorizontalVertical}>
131+
<button onClick={props.toggleVisibility}>Toggle sidebar visibility</button>
132+
<button onClick={props.toggleSize}>Toggle sidebar size</button>
133+
</Space.BottomResizable>
134+
)
135+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.resizable-demo {
2+
.gray {
3+
background-color: #eee;
4+
}
5+
6+
.blue {
7+
background-color: #e0eeee;
8+
}
9+
10+
.red {
11+
background-color: #eee0e0;
12+
}
13+
14+
.white {
15+
background-color: white;
16+
}
17+
18+
.description {
19+
color: black;
20+
font-size: 120%;
21+
}
22+
}

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import * as React from 'react';
2+
import * as Space from 'react-spaces';
3+
import './Resizable.scss';
4+
import { Button } from 'antd';
5+
6+
export const Resizable = () => {
7+
const [ spaceSize, setSpaceSize ] = React.useState(20);
8+
const [ resizingSpaces, setResizingSpaces ] = React.useState(false);
9+
10+
const intervalId = React.useRef<number | undefined>(undefined);
11+
const direction = React.useRef<boolean>(true);
12+
13+
React.useEffect(() => {
14+
return () => {
15+
if (intervalId.current) {
16+
window.clearInterval(intervalId.current);
17+
}
18+
}
19+
}, [])
20+
21+
React.useEffect(() => {
22+
if (resizingSpaces) {
23+
intervalId.current = window.setInterval(() => {
24+
setSpaceSize(prev => {
25+
const newSize = prev + (direction.current ? 0.1 : -0.1);
26+
27+
if (newSize < 20 || newSize > 30) {
28+
direction.current = !direction.current;
29+
}
30+
31+
return newSize;
32+
});
33+
}, 21)
34+
} else {
35+
if (intervalId.current) {
36+
window.clearInterval(intervalId.current);
37+
}
38+
}
39+
}, [ resizingSpaces ]);
40+
41+
return (
42+
<Space.Fill className="resizable-demo blue">
43+
<AnchoredExample spaceSize={spaceSize} resizingSpaces={resizingSpaces} setResizingSpaces={setResizingSpaces}>
44+
<AnchoredExample spaceSize={spaceSize} resizingSpaces={resizingSpaces} setResizingSpaces={setResizingSpaces} />
45+
</AnchoredExample>
46+
</Space.Fill>
47+
)
48+
}
49+
50+
const AnchoredExample : React.FC<{ spaceSize: number,resizingSpaces: boolean, setResizingSpaces: (state: boolean) => void }> = (props) => {
51+
const trackSize = false;
52+
53+
return (
54+
<>
55+
<Space.LeftResizable size={`${props.spaceSize}%`} trackSize={trackSize} className={props.children ? "blue" : "gray"}>
56+
{Description("Left")}
57+
</Space.LeftResizable>
58+
59+
<Space.Fill>
60+
<Space.TopResizable size={`${props.spaceSize}%`} trackSize={trackSize} className={props.children ? "red" : "blue"}>
61+
{Description("Top")}
62+
</Space.TopResizable>
63+
<Space.Fill trackSize={trackSize} className="white">
64+
{props.children ?
65+
props.children :
66+
<Space.Centered>
67+
<div style={{ textAlign: 'center' }}>
68+
<Button onClick={() => props.setResizingSpaces(!props.resizingSpaces)}>
69+
{
70+
!props.resizingSpaces ? "Dynamically resize spaces" : "Stop"
71+
}
72+
</Button>
73+
</div>
74+
</Space.Centered>
75+
}
76+
</Space.Fill>
77+
<Space.BottomResizable size={`${props.spaceSize}%`} trackSize={trackSize} className={props.children ? "red" : "blue"}>
78+
{Description("Bottom")}
79+
</Space.BottomResizable>
80+
</Space.Fill>
81+
82+
<Space.RightResizable size={`${props.spaceSize}%`} trackSize={trackSize} className={props.children ? "blue" : "gray"}>
83+
{Description("Right")}
84+
</Space.RightResizable>
85+
</>
86+
)
87+
}
88+
89+
const Description = (props: string) => (
90+
<Space.Centered>
91+
<div className="description">
92+
<strong>{props}</strong>
93+
</div>
94+
</Space.Centered>
95+
);

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.scrollable-demo {
2+
header > .spaces-space-inner {
3+
background-color: black;
4+
color: white;
5+
font-size: 140%;
6+
font-weight: 700;
7+
padding: 15px;
8+
}
9+
10+
main > .spaces-space-inner {
11+
padding: 0 25px 25px 25px;
12+
font-size: 130%;
13+
color: black;
14+
}
15+
}

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import * as React from 'react';
2+
import * as Space from 'react-spaces';
3+
import { Menu, Spin } from 'antd';
4+
import './Scrollable.scss';
5+
6+
export const ScrollableDemo = () => {
7+
const [ selectedKey, setSelectedKey ] = React.useState('1');
8+
const [ html, setHtml ] = React.useState('');
9+
const [ loading, setLoading ] = React.useState(true);
10+
11+
React.useEffect(() => {
12+
(async () => {
13+
setLoading(true);
14+
const response = await fetch('https://baconipsum.com/api/?type=all-meat&paras=20&start-with-lorem=1&format=html');
15+
setHtml(await response.text());
16+
setLoading(false);
17+
})();
18+
}, [selectedKey]);
19+
20+
return (
21+
<Space.Fill className="scrollable-demo">
22+
<Space.Top as="header" size={50} centerContent={Space.CenterType.Vertical}>
23+
Header
24+
</Space.Top>
25+
<Space.Fill>
26+
<Space.LeftResizable as="aside" size="20%">
27+
<Menu defaultSelectedKeys={[ selectedKey ]} onSelect={e => setSelectedKey(e.key)}>
28+
<Menu.Item key="1">Menu item 1</Menu.Item>
29+
<Menu.Item key="2">Menu item 2</Menu.Item>
30+
<Menu.Item key="3">Menu item 3</Menu.Item>
31+
</Menu>
32+
</Space.LeftResizable>
33+
<Space.Fill as="main" scrollable={true}>
34+
{
35+
loading ?
36+
<Space.Centered><Spin size="large" /><br />Loading stuff</Space.Centered> :
37+
<div>
38+
<h2>Some heading</h2>
39+
<div dangerouslySetInnerHTML={{ __html: html }} />
40+
</div>
41+
}
42+
</Space.Fill>
43+
</Space.Fill>
44+
</Space.Fill>
45+
)
46+
}

0 commit comments

Comments
 (0)