Skip to content

Commit 8385a47

Browse files
aeagleaeagle
authored
Merge pull request #4 from aeagle/percentage-sizes
Percentage sizes
2 parents d3f51b6 + 4eb8fd7 commit 8385a47

File tree

8 files changed

+21757
-52
lines changed

8 files changed

+21757
-52
lines changed

‎demo/package-lock.json‎

Lines changed: 15470 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/src/App.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@ pre {
9494
display: none;
9595
}
9696

97+
.all-content {
98+
top: 0px !important;
99+
}
100+
97101
.main {
98102
position: fixed;
99103
left: inherit !important;

‎demo/src/App.tsx‎

Lines changed: 94 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,9 @@ const App: React.FC = () => {
4242
<Anchor.Link href="#non-resizable" title="Non-resizable" />
4343
<Anchor.Link href="#resizable" title="Resizable" />
4444
<Anchor.Link href="#nested" title="Nested" />
45-
<Anchor.Link href="#stacked" title="Stacked" />
4645
<Anchor.Link href="#scrollable" title="Scrollable" />
46+
<Anchor.Link href="#percent" title="Percent sizing" />
47+
<Anchor.Link href="#stacked" title="Stacked" />
4748
<Anchor.Link href="#sizeinfo" title="Sizing information" />
4849
<Anchor.Link href="#changes" title="Version history" />
4950
</Anchor>
@@ -146,13 +147,13 @@ const App: React.FC = () => {
146147
</SyntaxHighlighter>
147148

148149
<Space.Fixed height={400}>
149-
<Space.Left size={100} style={{ backgroundColor: '#e0eae0' }}>
150+
<Space.Left size="20%" style={{ backgroundColor: '#e0eae0' }}>
150151
{Description("Left")}
151152
</Space.Left>
152153
<Space.Fill style={{ backgroundColor: '#eee0e0' }}>
153154
{Description("Fill")}
154155
</Space.Fill>
155-
<Space.Right size={200} style={{ backgroundColor: '#e0eee0' }}>
156+
<Space.Right size="20%" style={{ backgroundColor: '#e0eee0' }}>
156157
{Description("Right")}
157158
</Space.Right>
158159
</Space.Fixed>
@@ -186,7 +187,7 @@ const App: React.FC = () => {
186187

187188
</Tabs.TabPane>
188189
</Tabs>
189-
190+
190191
<h2 id="resizable">Resizable spaces</h2>
191192

192193
<p>
@@ -376,6 +377,75 @@ const App: React.FC = () => {
376377

377378
</Tabs.TabPane>
378379
</Tabs>
380+
381+
<h2 id="scrollable">Scrollable spaces</h2>
382+
383+
<p>
384+
By default, all spaces hide content that overflows the space. To make a particular space scrollable,
385+
set the scrollable property to true. The space will then be scrollable horizontally or vertically if
386+
the content overflows the space.
387+
</p>
388+
389+
<h2 id="percent">Percentage sizing</h2>
390+
391+
<p>
392+
Anchored spaces support sizes as percentages. The specified percentage will be used as the initial size
393+
of the space. Resizing a space will still adjust the space size.
394+
</p>
395+
396+
<Tabs defaultActiveKey="1">
397+
<Tabs.TabPane tab="Percentage left" key="1">
398+
399+
<SyntaxHighlighter language="html">
400+
{
401+
"const App = () => (\r\n" +
402+
" <Space.Fixed height={400}>\r\n" +
403+
" <Space.LeftResizable size=\"50%\" />\r\n" +
404+
" <Space.Fill />\r\n" +
405+
" </Space.Fixed>\r\n" +
406+
")"
407+
}
408+
</SyntaxHighlighter>
409+
410+
<Space.Fixed height={400}>
411+
<Space.LeftResizable trackSize={true} size="50%" style={{ backgroundColor: '#e0eee0' }}>
412+
{Description("Left 50%")}
413+
</Space.LeftResizable>
414+
<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
415+
{Description("Fill")}
416+
</Space.Fill>
417+
</Space.Fixed>
418+
419+
</Tabs.TabPane>
420+
421+
<Tabs.TabPane tab="Percentage left / right" key="2">
422+
423+
<SyntaxHighlighter language="html">
424+
{
425+
"const App = () => (\r\n" +
426+
" <Space.Fixed height={400}>\r\n" +
427+
" <Space.LeftResizable size=\"25%\" />\r\n" +
428+
" <Space.Fill />\r\n" +
429+
" <Space.RightResizable size=\"25%\" />\r\n" +
430+
" </Space.Fixed>\r\n" +
431+
")"
432+
}
433+
</SyntaxHighlighter>
434+
435+
<Space.Fixed height={400}>
436+
<Space.LeftResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
437+
{Description("Left 25%")}
438+
</Space.LeftResizable>
439+
<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
440+
{Description("Fill")}
441+
</Space.Fill>
442+
<Space.RightResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
443+
{Description("Right 25%")}
444+
</Space.RightResizable>
445+
</Space.Fixed>
446+
447+
</Tabs.TabPane>
448+
</Tabs>
379449

380450
<h2 id="stacked">Stacked spaces</h2>
381451

@@ -392,45 +462,37 @@ const App: React.FC = () => {
392462
{
393463
"const App = () => (\r\n" +
394464
" <Space.Fixed height={400}>\r\n" +
395-
" <Space.LeftResizable size={75} order={1} />\r\n" +
396-
" <Space.LeftResizable size={75} order={2} />\r\n" +
465+
" <Space.LeftResizable size=\"10%\" order={1} />\r\n" +
466+
" <Space.LeftResizable size=\"10%\" order={2} />\r\n" +
397467
" <Space.Fill />\r\n" +
398-
" <Space.RightResizable size={75} order={2} />\r\n" +
399-
" <Space.RightResizable size={75} order={1} />\r\n" +
468+
" <Space.RightResizable size=\"10%\" order={2} />\r\n" +
469+
" <Space.RightResizable size=\"10%\" order={1} />\r\n" +
400470
" </Space.Fixed>\r\n" +
401471
")"
402472
}
403473
</SyntaxHighlighter>
404474

405475
<Space.Fixed height={400}>
406-
<Space.LeftResizable trackSize={true} size={75} order={1} style={{ backgroundColor: '#e0eee0' }}>
476+
<Space.LeftResizable trackSize={true} size="10%" order={1} style={{ backgroundColor: '#e0eee0' }}>
407477
{Description("Left 1")}
408478
</Space.LeftResizable>
409-
<Space.LeftResizable trackSize={true} size={75} order={2} style={{ backgroundColor: '#e0eeee' }}>
479+
<Space.LeftResizable trackSize={true} size="10%" order={2} style={{ backgroundColor: '#e0eeee' }}>
410480
{Description("Left 2")}
411481
</Space.LeftResizable>
412482
<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
413483
{Description("Fill")}
414484
</Space.Fill>
415-
<Space.RightResizable trackSize={true} size={75} order={2} style={{ backgroundColor: '#e0eeee' }}>
485+
<Space.RightResizable trackSize={true} size="10%" order={2} style={{ backgroundColor: '#e0eeee' }}>
416486
{Description("Right 2")}
417487
</Space.RightResizable>
418-
<Space.RightResizable trackSize={true} size={75} order={1} style={{ backgroundColor: '#e0eee0' }}>
488+
<Space.RightResizable trackSize={true} size="10%" order={1} style={{ backgroundColor: '#e0eee0' }}>
419489
{Description("Right 1")}
420490
</Space.RightResizable>
421491
</Space.Fixed>
422492

423493
</Tabs.TabPane>
424494
</Tabs>
425495

426-
<h2 id="scrollable">Scrollable spaces</h2>
427-
428-
<p>
429-
By default, all spaces hide content that overflows the space. To make a particular space scrollable,
430-
set the scrollable property to true. The space will then be scrollable horizontally or vertically if
431-
the content overflows the space.
432-
</p>
433-
434496
<h2 id="sizeinfo">Getting size information for a space</h2>
435497

436498
<p>
@@ -454,27 +516,33 @@ const App: React.FC = () => {
454516

455517
<h2 id="changes">Version history</h2>
456518

457-
<p>
519+
<div>
520+
<strong>0.1.4</strong>
521+
<ul>
522+
<li>Add support for percentage sizing on anchored spaces</li>
523+
</ul>
524+
</div>
525+
<div>
458526
<strong>0.1.3</strong>
459527
<ul>
460528
<li>Added readme</li>
461529
<li>Updated documentation</li>
462530
</ul>
463-
</p>
464-
<p>
531+
</div>
532+
<div>
465533
<strong>0.1.2</strong>
466534
<ul>
467535
<li>Removed ResizeSensor from spaces by default and now optionally allow live size updates with <strong>trackSize</strong> property</li>
468536
<li>Added <strong>VerticallyCentered</strong> component to vertically centre content within space</li>
469537
<li>Allow class names to be specified on top-level spaces <strong>ViewPort</strong> and <strong>Fixed</strong></li>
470538
</ul>
471-
</p>
472-
<p>
539+
</div>
540+
<div>
473541
<strong>0.1.0 - 0.1.1</strong>
474542
<ul>
475543
<li>Initial version</li>
476544
</ul>
477-
</p>
545+
</div>
478546

479547
</Space.Fill>
480548

‎demo/yarn.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9184,7 +9184,7 @@ react-slick@~0.24.0:
91849184
resize-observer-polyfill "^1.5.0"
91859185

91869186
"react-spaces@file:../react-spaces":
9187-
version "0.1.2"
9187+
version "0.1.3"
91889188
dependencies:
91899189
css-element-queries "^1.2.1"
91909190
guid-typescript "^1.0.9"

0 commit comments

Comments
 (0)