Skip to content

Commit 5444b8b

Browse files
aeagleaeagle
authored
Merge pull request #18 from aeagle/v0.1.10
V0.1.10
2 parents 3b2ef8b + 34bea26 commit 5444b8b

16 files changed

+338
-117
lines changed

‎demo/src/App.scss

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
body {
1+
body, li, p, table, pre {
22
font-size: 18px;
33
}
44

@@ -55,6 +55,45 @@ pre {
5555
}
5656
}
5757

58+
.docs-main-container {
59+
h3 {
60+
font-weight: 400;
61+
font-size: 20px;
62+
color: #193549;
63+
margin-top: 20px;
64+
margin-bottom: 20px;
65+
}
66+
67+
table {
68+
width: 100%;
69+
margin-bottom: 20px;
70+
71+
tr {
72+
td, th {
73+
border-bottom: 1px solid #eee;
74+
padding: 5px 10px
75+
}
76+
77+
th {
78+
strong {
79+
font-weight: 400;
80+
}
81+
}
82+
83+
th:first-child, td:first-child {
84+
width: 25%;
85+
}
86+
}
87+
88+
tbody {
89+
strong {
90+
font-weight: 500;
91+
color: maroon;
92+
}
93+
}
94+
}
95+
}
96+
5897
.mobileDesc, .mobile {
5998
display: none;
6099
}

‎demo/src/docs/Docs.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { SizingInfo } from './SizingInfo';
1313
import { VersionHistory } from './VersionHistory';
1414
import { Intro } from './Intro';
1515
import { Try } from './Try';
16+
import { KnownIssues } from './KnownIssues';
1617

1718
export const Docs = () => {
1819
return (
@@ -35,6 +36,7 @@ export const Docs = () => {
3536
<Menu.Item><a href="#stacked">Stacked</a></Menu.Item>
3637
<Menu.Item><a href="#sizeinfo">Sizing information</a></Menu.Item>
3738
<Menu.Item><a href="#try">Try</a></Menu.Item>
39+
<Menu.Item><a href="#issues">Known issues</a></Menu.Item>
3840
<Menu.Item><a href="#changes">Version history</a></Menu.Item>
3941
</Menu>
4042

@@ -62,6 +64,7 @@ export const Docs = () => {
6264
<Stacked />
6365
<SizingInfo />
6466
<Try />
67+
<KnownIssues />
6568
<VersionHistory />
6669

6770
</Space.Fill>
@@ -74,9 +77,9 @@ export const Docs = () => {
7477
export const Description = (desc: string, mobileDesc: string) => (
7578
<Space.Centered>
7679
<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+
<strong className="desc">{desc}</strong>
81+
<strong className="mobileDesc">{mobileDesc}</strong><br />
82+
<Space.Info>{info => <span>{info.width.toFixed()} x {info.height.toFixed()}</span> }</Space.Info>
8083
</span>
8184
</Space.Centered>
8285
)

‎demo/src/docs/Intro.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const Intro = () => {
3131
</p>
3232

3333
<p>
34-
<img src="/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
34+
<img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
3535
</p>
3636
</>
3737
)

‎demo/src/docs/KnownIssues.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from 'react';
2+
3+
export const KnownIssues = () => {
4+
return (
5+
<>
6+
<h2 id="issues">Known issues / limitations</h2>
7+
8+
<ul>
9+
<li>
10+
Rendering an anchored horizontal space and an anchored vertical space within the same parent space will cause a gap
11+
to appear in the corner where the two anchored spaces meet. You can workaround this by using nested <strong>&lt;Fill /&gt;</strong>
12+
spaces to seperate the horizontally and vertically anchored spaces.
13+
</li>
14+
<li>
15+
There isn't currently any consideration for using spaces in a responsive manner. You can however give spaces class names and
16+
target them with media queries like you would with any other DOM element.
17+
</li>
18+
</ul>
19+
20+
</>
21+
)
22+
}

‎demo/src/docs/Resizable.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,40 @@ export const Resizable = () => {
117117

118118
</Tabs.TabPane>
119119
</Tabs>
120+
121+
<h3>Extra properties</h3>
122+
123+
<table>
124+
<thead>
125+
<tr>
126+
<th>Property</th>
127+
<th>Description</th>
128+
</tr>
129+
</thead>
130+
<tbody>
131+
<tr>
132+
<td><strong>minimumSize</strong></td>
133+
<td>
134+
Optionally sets the minimum size the space can be resized to in pixels.
135+
</td>
136+
</tr>
137+
<tr>
138+
<td><strong>maximumSize</strong></td>
139+
<td>
140+
Optionally sets the mazimum size the space can be resized to in pixels.
141+
</td>
142+
</tr>
143+
<tr>
144+
<td><strong>overlayHandle</strong></td>
145+
<td>
146+
By default, the resize handle is overlayed on top of the spaces content. This might cause issues if a clickable element
147+
sits underneath the resize handle. You can optionally set this to <strong>false</strong> to make the resize handle sit
148+
next to the space content.
149+
</td>
150+
</tr>
151+
</tbody>
152+
</table>
153+
120154
</>
121155
)
122156
}

‎demo/src/docs/Types.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,48 @@ export const Types = () => {
6565
</ul>
6666
</Tabs.TabPane>
6767
</Tabs>
68+
69+
<h3>Properties</h3>
70+
71+
<table>
72+
<thead>
73+
<tr>
74+
<th>Property</th>
75+
<th>Description</th>
76+
</tr>
77+
</thead>
78+
<tbody>
79+
<tr>
80+
<td><strong>as</strong></td>
81+
<td>
82+
By default React Spaces will render a div to the DOM. You can override the element rendered by setting this property
83+
with the element name, i.e. <strong>as="article"</strong> or <strong>as="aside"</strong>.
84+
</td>
85+
</tr>
86+
<tr>
87+
<td><strong>centerContent</strong></td>
88+
<td>
89+
Instead of using the <strong>&lt;Centered /&gt;</strong> or <strong>&lt;CenteredVertically /&gt;</strong> components inside space
90+
you can specify the centering type here. Possible values are <strong>"Vertical"</strong> or <strong>"HorizontalVertical"</strong>.
91+
</td>
92+
</tr>
93+
<tr>
94+
<td><strong>scrollable</strong></td>
95+
<td>
96+
Makes the space scrollable. By default content that overflows the space will be hidden. This will allow the space to add a scroll bar if
97+
the content overflows.
98+
</td>
99+
</tr>
100+
<tr>
101+
<td><strong>trackSize</strong></td>
102+
<td>
103+
Tells the space to report it's size when it changes size to the <strong>&lt;Info /&gt;</strong> component. With this turned off
104+
the space will only report the initial size.
105+
</td>
106+
</tr>
107+
</tbody>
108+
</table>
109+
68110
</>
69111
)
70112
}

‎demo/src/docs/VersionHistory.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,41 @@ export const VersionHistory = () => {
55
<>
66
<h2 id="changes">Version history</h2>
77

8+
<div>
9+
<h3>0.1.10</h3>
10+
<ul>
11+
<li>
12+
Added 'as' property to allow rendered DOM element to be specified (thanks to{" "}
13+
<a href="https://www.reddit.com/user/MahNonAnon/" target="_blank">u/MahNonAnon</a> and{" "}
14+
<a href="https://www.reddit.com/user/trevoreyre/" target="_blank">u/trevoreyre</a> on Reddit
15+
for suggestion of this).
16+
</li>
17+
<li>
18+
Added 'centerContent' property as short-hand for centering space content instead of having
19+
to introduce the extra &lt;Centered /&gt; or &lt;CenteredVertically /&gt; components.
20+
</li>
21+
<li>
22+
Allow resize handle width to be specified and also it's placement within space controlled
23+
with the 'overlayHandle' property.
24+
</li>
25+
<li>
26+
Fixed issue with dynamically added/removed anchored spaces where an anchored space would
27+
see itself as a space taking space.
28+
</li>
29+
</ul>
30+
</div>
31+
<div>
32+
<h3>0.1.9</h3>
33+
<ul>
34+
<li>Added repository field to package.json</li>
35+
</ul>
36+
</div>
37+
<div>
38+
<h3>0.1.8</h3>
39+
<ul>
40+
<li>Removed clear fix from space</li>
41+
</ul>
42+
</div>
843
<div>
944
<h3>0.1.7</h3>
1045
<ul>

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,12 @@
2020

2121
.bottom-pane-container {
2222
.spaces-resize-handle {
23-
opacity: 1 !important;
24-
height: 2px !important;
23+
background-color: #333 !important;
24+
}
25+
}
26+
27+
.side-bar-container {
28+
.resize-right {
2529
background-color: #333 !important;
2630
}
2731
}

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

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as Space from 'react-spaces';
33
import 'antd/dist/antd.css';
44
import './UI.scss';
55
import MonacoEditor from 'react-monaco-editor';
6+
import { CenterType } from 'react-spaces';
67

78
export const UI = () => {
89
return (
@@ -15,20 +16,18 @@ export const UI = () => {
1516
)
1617
}
1718

18-
const Header: React.FC = (props) => {
19+
const Header = () => {
1920
return (
20-
<Space.Top className="title-bar" size={30} style={{ backgroundColor: '#333', color: '#c5c5c5' }}>
21-
<Space.Centered>
22-
<Space.Left className="menu-bar">
21+
<Space.Top className="title-bar" centerContent={CenterType.HorizontalVertical} size={30} style={{ backgroundColor: '#333', color: '#c5c5c5' }}>
22+
<Space.Left className="menu-bar">
2323

24-
</Space.Left>
25-
UI Demo - Example UI interface
26-
</Space.Centered>
24+
</Space.Left>
25+
UI Demo - Example UI interface
2726
</Space.Top>
2827
)
2928
}
3029

31-
const Main: React.FC = (props) => {
30+
const Main = () => {
3231
return (
3332
<Space.Fill style={{ backgroundColor: '#1E1E1E' }}>
3433
<Space.Fill>
@@ -40,7 +39,7 @@ const Main: React.FC = (props) => {
4039
)
4140
}
4241

43-
const Editor: React.FC = (props) => {
42+
const Editor = () => {
4443
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}');
4544

4645
const options = {
@@ -52,7 +51,6 @@ const Editor: React.FC = (props) => {
5251
<Space.Fill>
5352
<Space.Fill>
5453
<Space.Top className="editor-tabs" size={40}>
55-
5654
</Space.Top>
5755
<Space.Fill className="editor-main">
5856
<MonacoEditor
@@ -68,17 +66,16 @@ const Editor: React.FC = (props) => {
6866
)
6967
}
7068

71-
const IconPane: React.FC = (props) => {
69+
const IconPane = () => {
7270
return (
7371
<Space.Left order={1} className="side-bar-icons" size={50} style={{ backgroundColor: '#333' }}>
74-
7572
</Space.Left>
7673
)
7774
}
7875

79-
const SideBar: React.FC = (props) => {
76+
const SideBar = () => {
8077
return (
81-
<Space.LeftResizable order={2} className="side-bar" size={300} style={{ backgroundColor: '#252526' }}>
78+
<Space.LeftResizable order={2} className="side-bar" size={300} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
8279
<SideBarPane order={1} title="Open editors" height={200}>
8380

8481
</SideBarPane>
@@ -120,9 +117,9 @@ const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
120117
)
121118
}
122119

123-
const BottomPane: React.FC = (props) => {
120+
const BottomPane = () => {
124121
return (
125-
<Space.BottomResizable className="bottom-pane" size="25%">
122+
<Space.BottomResizable className="bottom-pane" size="25%" handleSize={2}>
126123
</Space.BottomResizable>
127124
)
128125
}

‎react-spaces/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-spaces",
3-
"version": "0.1.9",
3+
"version": "0.1.10",
44
"main": "dist/index.js",
55
"repository": "github:aeagle/react-spaces",
66
"author": {

‎react-spaces/src/components/Globals.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,10 @@ export enum AnchorType {
33
Right = " anchor-right",
44
Top = " anchor-top",
55
Bottom = " anchor-bottom"
6+
}
7+
8+
export enum CenterType {
9+
None,
10+
Vertical,
11+
HorizontalVertical
612
}

0 commit comments

Comments
 (0)