Skip to content

Commit a397f86

Browse files
aeagleaeagle
committed
Seperated doc sections
1 parent aeec1c0 commit a397f86

File tree

15 files changed

+737
-541
lines changed

15 files changed

+737
-541
lines changed

‎demo/src/App.tsx

Lines changed: 8 additions & 541 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: 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 { Anchor, Button, Icon } 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+
16+
export const Docs = () => {
17+
return (
18+
<Space.ViewPort>
19+
<Space.Top size={80} style={{ backgroundColor: 'black', color: 'white', padding: 15 }}>
20+
<Space.CenteredVertically>
21+
<h1 style={{ color: 'white' }}>React Spaces</h1>
22+
</Space.CenteredVertically>
23+
</Space.Top>
24+
<Space.Fill className="all-content">
25+
<Space.Left className="sidebar" scrollable={true} size={250} style={{ padding: 30, borderRight: '2px solid #ddd' }}>
26+
27+
<h3 className="sidebar-header">GitHub</h3>
28+
<div style={{ marginBottom: 15 }}>
29+
<Button type="primary" onClick={() => window.location.href = 'https://github.com/aeagle/react-spaces'}><Icon type="github" /> View on GitHub</Button>
30+
</div>
31+
32+
<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>
33+
34+
<Anchor offsetTop={30}>
35+
<Anchor.Link href="#getting-started" title="Getting started" />
36+
<Anchor.Link href="#types" title="Types" />
37+
<Anchor.Link href="#non-resizable" title="Anchored" />
38+
<Anchor.Link href="#resizable" title="Resizable" />
39+
<Anchor.Link href="#nested" title="Nested" />
40+
<Anchor.Link href="#scrollable" title="Scrollable" />
41+
<Anchor.Link href="#stacked" title="Stacked" />
42+
<Anchor.Link href="#sizeinfo" title="Sizing information" />
43+
<Anchor.Link href="#changes" title="Version history" />
44+
</Anchor>
45+
46+
<h2 className="sidebar-header"><a style={{ color: 'black', fontSize: 24 }} href="https://twitter.com/allaneagle">@allaneagle</a></h2>
47+
48+
</Space.Left>
49+
<Space.Fill className="main" scrollable={true} style={{ padding: 30, paddingTop: 0 }}>
50+
51+
<Intro />
52+
<GettingStarted />
53+
<Types />
54+
<Anchored />
55+
<Resizable />
56+
<Nested />
57+
<Scrollable />
58+
<Stacked />
59+
<SizingInfo />
60+
<VersionHistory />
61+
62+
</Space.Fill>
63+
64+
</Space.Fill>
65+
</Space.ViewPort>
66+
)
67+
}
68+
69+
export const Description = (desc: string, mobileDesc: string) => (
70+
<Space.Centered>
71+
<span className="description">
72+
<strong className="desc">{desc}</strong>
73+
<strong className="mobileDesc">{mobileDesc}</strong>
74+
<Space.Info>{info => <div>{info.width.toFixed()} x {info.height.toFixed()}</div> }</Space.Info>
75+
</span>
76+
</Space.Centered>
77+
)

‎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)