Skip to content

Commit ef95d55

Browse files
aeagleaeagle
authored
Merge pull request #10 from aeagle/ui-demo
Ui demo
2 parents 33a491e + b5a9f5f commit ef95d55

File tree

17 files changed

+901
-538
lines changed

17 files changed

+901
-538
lines changed

‎demo/src/App.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,12 @@ pre {
5959
display: none;
6060
}
6161

62+
.ant-menu {
63+
.ant-menu-item {
64+
font-size: 16px !important;
65+
}
66+
}
67+
6268
.ant-anchor-link {
6369
line-height: 1.5;
6470
}

‎demo/src/App.tsx‎

Lines changed: 8 additions & 538 deletions
Large diffs are not rendered by default.

‎demo/src/docs/Anchored.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import * as React from 'react';
2+
import * as Space from 'react-spaces';
3+
import SyntaxHighlighter from 'react-syntax-highlighter';
4+
import { Tabs } from 'antd';
5+
import { Description } from './Docs';
6+
7+
export const Anchored = () => {
8+
return (
9+
<>
10+
<h2 id="non-resizable">Anchored spaces</h2>
11+
12+
<p>
13+
Anchored spaces provide spaces which can be anchored to the side of a container space. For example,
14+
a <strong>&lt;Left /&gt;</strong> space might be used for a left sidebar and a <strong>&lt;Top /&gt;</strong>
15+
{" "}space might be used for a fixed heading or toolbar.
16+
</p>
17+
18+
<Tabs defaultActiveKey="1">
19+
<Tabs.TabPane tab="Left and right" key="1">
20+
21+
<SyntaxHighlighter language="html">
22+
{
23+
"const App = () => (\r\n" +
24+
" <Space.Fixed height={400}>\r\n" +
25+
" <Space.Left size=\"20%\" />\r\n" +
26+
" <Space.Fill />\r\n" +
27+
" <Space.Right size=\"20%\" />\r\n" +
28+
" </Space.Fixed>\r\n" +
29+
")"
30+
}
31+
</SyntaxHighlighter>
32+
33+
<Space.Fixed height={400}>
34+
<Space.Left size="20%" style={{ backgroundColor: '#e0eae0' }}>
35+
{Description("Left", "L")}
36+
</Space.Left>
37+
<Space.Fill style={{ backgroundColor: '#eee0e0' }}>
38+
{Description("Fill", "F")}
39+
</Space.Fill>
40+
<Space.Right size="20%" style={{ backgroundColor: '#e0eee0' }}>
41+
{Description("Right", "R")}
42+
</Space.Right>
43+
</Space.Fixed>
44+
45+
</Tabs.TabPane>
46+
<Tabs.TabPane tab="Top and bottom" key="2">
47+
48+
<SyntaxHighlighter language="html">
49+
{
50+
"const App = () => (\r\n" +
51+
" <Space.Fixed height={400}>\r\n" +
52+
" <Space.Top size=\"20%\" />\r\n" +
53+
" <Space.Fill />\r\n" +
54+
" <Space.Bottom size=\"20%\" />\r\n" +
55+
" </Space.Fixed>\r\n" +
56+
")"
57+
}
58+
</SyntaxHighlighter>
59+
60+
<Space.Fixed height={400}>
61+
<Space.Top size="20%" style={{ backgroundColor: '#e0eee0' }}>
62+
{Description("Top", "T")}
63+
</Space.Top>t5 cf
64+
<Space.Fill style={{ backgroundColor: '#eee0e0' }}>
65+
{Description("Fill", "F")}
66+
</Space.Fill>
67+
<Space.Bottom size="20%" style={{ backgroundColor: '#e0eee0' }}>
68+
{Description("Bottom", "B")}
69+
</Space.Bottom>
70+
</Space.Fixed>
71+
72+
</Tabs.TabPane>
73+
</Tabs>
74+
</>
75+
)
76+
}

‎demo/src/docs/Docs.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import * as React from 'react';
2+
import * as Space from 'react-spaces';
3+
import { Button, Icon, Menu } from 'antd';
4+
import 'antd/dist/antd.css';
5+
import { GettingStarted } from './GettingStarted';
6+
import { Types } from './Types';
7+
import { Anchored } from '../ui-demo/Anchored';
8+
import { Resizable } from './Resizable';
9+
import { Nested } from './Nested';
10+
import { Scrollable } from './Scrollable';
11+
import { Stacked } from './Stacked';
12+
import { SizingInfo } from './SizingInfo';
13+
import { VersionHistory } from './VersionHistory';
14+
import { Intro } from './Intro';
15+
import { Try } from './Try';
16+
17+
export const Docs = () => {
18+
return (
19+
<Space.ViewPort>
20+
<Space.Top size={80} style={{ backgroundColor: 'black', color: 'white', padding: 15 }}>
21+
<Space.CenteredVertically>
22+
<h1 style={{ color: 'white' }}>React Spaces</h1>
23+
</Space.CenteredVertically>
24+
</Space.Top>
25+
<Space.Fill className="all-content">
26+
<Space.Left className="sidebar" scrollable={true} size={250} style={{ paddingTop: 15, borderRight: '2px solid #ddd' }}>
27+
28+
<Menu>
29+
<Menu.Item><a href="#getting-started">Getting started</a></Menu.Item>
30+
<Menu.Item><a href="#types">Types</a></Menu.Item>
31+
<Menu.Item><a href="#non-resizable">Anchored</a></Menu.Item>
32+
<Menu.Item><a href="#resizable">Resizable</a></Menu.Item>
33+
<Menu.Item><a href="#nested">Nested</a></Menu.Item>
34+
<Menu.Item><a href="#scrollable">Scrollable</a></Menu.Item>
35+
<Menu.Item><a href="#stacked">Stacked</a></Menu.Item>
36+
<Menu.Item><a href="#sizeinfo">Sizing information</a></Menu.Item>
37+
<Menu.Item><a href="#try">Try</a></Menu.Item>
38+
<Menu.Item><a href="#changes">Version history</a></Menu.Item>
39+
</Menu>
40+
41+
<div style={{ padding: 15}}>
42+
<h3 className="sidebar-header">GitHub</h3>
43+
<div style={{ marginBottom: 15 }}>
44+
<Button type="primary" onClick={() => window.location.href = 'https://github.com/aeagle/react-spaces'}><Icon type="github" /> View on GitHub</Button>
45+
</div>
46+
47+
<h3 className="sidebar-header">NPM <img style={{ position: 'relative', top: -2 }} alt="NPM version" src="https://img.shields.io/npm/v/react-spaces.svg" /></h3>
48+
49+
<h2 className="sidebar-header"><a style={{ color: 'black', fontSize: 18 }} href="https://twitter.com/allaneagle">@allaneagle</a></h2>
50+
</div>
51+
52+
</Space.Left>
53+
<Space.Fill className="main" scrollable={true} style={{ padding: 30, paddingTop: 0 }}>
54+
55+
<Intro />
56+
<GettingStarted />
57+
<Types />
58+
<Anchored />
59+
<Resizable />
60+
<Nested />
61+
<Scrollable />
62+
<Stacked />
63+
<SizingInfo />
64+
<Try />
65+
<VersionHistory />
66+
67+
</Space.Fill>
68+
69+
</Space.Fill>
70+
</Space.ViewPort>
71+
)
72+
}
73+
74+
export const Description = (desc: string, mobileDesc: string) => (
75+
<Space.Centered>
76+
<span className="description">
77+
<strong className="desc">{desc}</strong>
78+
<strong className="mobileDesc">{mobileDesc}</strong>
79+
<Space.Info>{info => <div>{info.width.toFixed()} x {info.height.toFixed()}</div> }</Space.Info>
80+
</span>
81+
</Space.Centered>
82+
)

‎demo/src/docs/GettingStarted.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import SyntaxHighlighter from 'react-syntax-highlighter';
3+
4+
export const GettingStarted = () => {
5+
return (
6+
<>
7+
<h2 id="getting-started">Getting started</h2>
8+
9+
<p>
10+
Spaces can be used by importing the spaces using the following:
11+
</p>
12+
13+
<SyntaxHighlighter language="html">
14+
{
15+
"npm install react-spaces --save"
16+
}
17+
</SyntaxHighlighter>
18+
19+
<SyntaxHighlighter language="html">
20+
{
21+
"import * as Space from 'react-spaces';"
22+
}
23+
</SyntaxHighlighter>
24+
</>
25+
)
26+
}

‎demo/src/docs/Intro.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
3+
export const Intro = () => {
4+
return (
5+
<>
6+
<p id="intro" style={{ fontWeight: 400, paddingTop: 30, paddingBottom: 0, fontSize: 28, color: '#777' }}>
7+
React Spaces allow you to divide a page or container into nestable, anchored, scrollable and resizable spaces.
8+
</p>
9+
10+
<p>
11+
<h2>Features</h2>
12+
13+
<ul>
14+
<li>
15+
No styling to achieve simple or complex layouts.
16+
</li>
17+
<li>
18+
Spaces know how to behave in relation to each other and resize accordingly.
19+
</li>
20+
<li>
21+
Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
22+
</li>
23+
</ul>
24+
</p>
25+
26+
<p>
27+
<img src="http://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
28+
</p>
29+
</>
30+
)
31+
}

‎demo/src/docs/Nested.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import * as React from 'react';
2+
import * as Space from 'react-spaces';
3+
import SyntaxHighlighter from 'react-syntax-highlighter';
4+
import { Tabs } from 'antd';
5+
import { Description } from './Docs';
6+
7+
export const Nested = () => {
8+
return (
9+
<>
10+
<h2 id="nested">Nested spaces</h2>
11+
12+
<p>
13+
Spaces can be nested within other spaces to create complex layouts.
14+
</p>
15+
16+
<Tabs defaultActiveKey="1">
17+
<Tabs.TabPane tab="Left/right nested within top/fill/bottom" key="1">
18+
19+
<SyntaxHighlighter language="html">
20+
{
21+
"const App = () => (\r\n" +
22+
" <Space.Fixed height={400}>\r\n" +
23+
" <Space.TopResizable size=\"20%\" />\r\n" +
24+
" <Space.Fill>\r\n" +
25+
" <Space.LeftResizable size=\"20%\" />\r\n" +
26+
" <Space.Fill />\r\n" +
27+
" <Space.RightResizable size=\"20%\" />\r\n" +
28+
" </Space.Fill>\r\n" +
29+
" <Space.BottomResizable size=\"20%\" />\r\n" +
30+
" </Space.Fixed>\r\n" +
31+
")"
32+
}
33+
</SyntaxHighlighter>
34+
35+
<Space.Fixed height={400}>
36+
<Space.TopResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
37+
{Description("Top", "T")}
38+
</Space.TopResizable>
39+
<Space.Fill>
40+
<Space.LeftResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eeee' }}>
41+
{Description("Left", "L")}
42+
</Space.LeftResizable>
43+
<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
44+
{Description("Fill", "F")}
45+
</Space.Fill>
46+
<Space.RightResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eeee' }}>
47+
{Description("Right", "R")}
48+
</Space.RightResizable>
49+
</Space.Fill>
50+
<Space.BottomResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
51+
{Description("Bottom", "B")}
52+
</Space.BottomResizable>
53+
</Space.Fixed>
54+
55+
</Tabs.TabPane>
56+
<Tabs.TabPane tab="Top/bottom nested within left/fill/right" key="2">
57+
58+
<SyntaxHighlighter language="html">
59+
{
60+
"const App = () => (\r\n" +
61+
" <Space.Fixed height={400}>\r\n" +
62+
" <Space.LeftResizable size=\"25%\" />\r\n" +
63+
" <Space.Fill>\r\n" +
64+
" <Space.TopResizable size=\"25%\" />\r\n" +
65+
" <Space.Fill />\r\n" +
66+
" <Space.BottomResizable size=\"25%\" />\r\n" +
67+
" </Space.Fill>\r\n" +
68+
" <Space.RightResizable size=\"25%\" />\r\n" +
69+
" </Space.Fixed>\r\n" +
70+
")"
71+
}
72+
</SyntaxHighlighter>
73+
74+
<Space.Fixed height={400}>
75+
<Space.LeftResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eeee' }}>
76+
{Description("Left", "L")}
77+
</Space.LeftResizable>
78+
<Space.Fill>
79+
<Space.TopResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
80+
{Description("Top", "T")}
81+
</Space.TopResizable>
82+
<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
83+
{Description("Fill", "F")}
84+
</Space.Fill>
85+
<Space.BottomResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
86+
{Description("Bottom", "B")}
87+
</Space.BottomResizable>
88+
</Space.Fill>
89+
<Space.RightResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eeee' }}>
90+
{Description("Right", "R")}
91+
</Space.RightResizable>
92+
</Space.Fixed>
93+
94+
</Tabs.TabPane>
95+
</Tabs>
96+
</>
97+
)
98+
}

0 commit comments

Comments
 (0)