Skip to content

Commit 96067c8

Browse files
tomkptomkp
authored
Simplify examples: white background, 1px splitter (#854)
- Replace dark theme with clean white background - Change divider from 11px to 1px with semi-opaque hover area - Add 'dragging' class to divider to prevent hover flicker - Remove confusing TouchExample - Add PercentageExample for percentage-based layouts - Simplify all example content and remove verbose styling - Make styled example more exciting with gradients and grip dots - Add more snap points (600, 800) to SnapPointsExample - Fix nav buttons for smaller screens with flex-wrap
1 parent 13c0430 commit 96067c8

File tree

10 files changed

+261
-867
lines changed

10 files changed

+261
-867
lines changed

‎examples/BasicExample.tsx‎

Lines changed: 14 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,46 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState } from 'react';
22
import { SplitPane, Pane } from '../src';
33

44
export function BasicExample() {
55
const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
66
'horizontal'
77
);
88

9-
// Default to vertical on mobile for better usability
10-
useEffect(() => {
11-
const isMobile = window.innerWidth <= 768;
12-
if (isMobile) {
13-
setDirection('vertical');
14-
}
15-
}, []);
16-
179
return (
1810
<div className="example-container">
19-
<div className="example-info">
11+
<div className="example-header">
2012
<h2>Basic Split Pane</h2>
2113
<p>
2214
A simple two-pane layout.{' '}
2315
<button
16+
className="btn"
2417
onClick={() =>
2518
setDirection((d) =>
2619
d === 'horizontal' ? 'vertical' : 'horizontal'
2720
)
2821
}
29-
style={{
30-
padding: '0.25rem 0.5rem',
31-
marginLeft: '0.5rem',
32-
background: '#e94560',
33-
border: 'none',
34-
borderRadius: '4px',
35-
color: 'white',
36-
cursor: 'pointer',
37-
minHeight: '32px',
38-
}}
3922
>
4023
{direction}
4124
</button>
4225
</p>
4326
</div>
4427
<div className="example-content">
4528
<SplitPane direction={direction}>
46-
<Pane
47-
minSize={80}
48-
defaultSize={direction === 'vertical' ? '40%' : '30%'}
49-
>
50-
<div className="pane-content sidebar">
51-
<h2>Sidebar</h2>
52-
<p>Min size: 80px. Drag the divider to resize.</p>
53-
<div className="file-tree">
54-
<div className="file-tree-item folder">src</div>
55-
<div
56-
className="file-tree-item file"
57-
style={{ marginLeft: '1rem' }}
58-
>
59-
index.ts
60-
</div>
61-
<div
62-
className="file-tree-item file"
63-
style={{ marginLeft: '1rem' }}
64-
>
65-
App.tsx
66-
</div>
67-
<div className="file-tree-item folder">components</div>
68-
<div className="file-tree-item folder">styles</div>
69-
</div>
29+
<Pane minSize={100} defaultSize="30%">
30+
<div className="pane gray">
31+
<h3>Left Pane</h3>
32+
<p>minSize: 100px</p>
7033
</div>
7134
</Pane>
7235
<Pane minSize={100}>
73-
<div className="pane-content editor">
74-
<h2>Main Content</h2>
75-
<p>Use arrow keys when focused for keyboard control.</p>
76-
<div className="code-block">
36+
<div className="pane">
37+
<h3>Right Pane</h3>
38+
<p>Drag the divider to resize.</p>
39+
<div className="code">
7740
<code>
78-
{`import { SplitPane, Pane } from 'react-split-pane';
79-
80-
<SplitPane direction="${direction}">
81-
<Pane minSize={80}>
82-
Sidebar
83-
</Pane>
84-
<Pane>
85-
Main Content
86-
</Pane>
41+
{`<SplitPane direction="${direction}">
42+
<Pane minSize={100}>Left</Pane>
43+
<Pane>Right</Pane>
8744
</SplitPane>`}
8845
</code>
8946
</div>

‎examples/ControlledExample.tsx‎

Lines changed: 21 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,44 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState } from 'react';
22
import { SplitPane, Pane } from '../src';
33

4-
const STORAGE_KEY = 'split-pane-sizes';
5-
64
export function ControlledExample() {
7-
const [sizes, setSizes] = useState<number[]>(() => {
8-
const saved = localStorage.getItem(STORAGE_KEY);
9-
return saved ? JSON.parse(saved) : [300, 500];
10-
});
11-
12-
useEffect(() => {
13-
localStorage.setItem(STORAGE_KEY, JSON.stringify(sizes));
14-
}, [sizes]);
15-
16-
const handleResize = (newSizes: number[]) => {
17-
setSizes(newSizes);
18-
};
19-
20-
const handleReset = () => {
21-
setSizes([300, 500]);
22-
};
5+
const [sizes, setSizes] = useState<number[]>([200, 400]);
236

247
return (
258
<div className="example-container">
26-
<div className="example-info">
27-
<h2>Controlled + Persistent</h2>
9+
<div className="example-header">
10+
<h2>Controlled</h2>
2811
<p>
29-
Sizes are controlled via state and persisted to localStorage. Refresh
30-
to see persistence.
31-
<button
32-
onClick={handleReset}
33-
style={{
34-
padding: '0.25rem 0.5rem',
35-
marginLeft: '0.5rem',
36-
background: '#e94560',
37-
border: 'none',
38-
borderRadius: '4px',
39-
color: 'white',
40-
cursor: 'pointer',
41-
}}
42-
>
12+
Sizes are controlled via state.{' '}
13+
<button className="btn" onClick={() => setSizes([200, 400])}>
4314
Reset
4415
</button>
4516
</p>
4617
</div>
4718
<div className="example-content">
48-
<SplitPane direction="horizontal" onResize={handleResize}>
49-
<Pane size={sizes[0]} minSize={150}>
50-
<div className="pane-content sidebar">
51-
<h2>Panel A</h2>
52-
<p>This pane's size is controlled.</p>
53-
<div className="size-display">
54-
Width: {Math.round(sizes[0])}px
55-
</div>
56-
<div className="code-block" style={{ marginTop: '1rem' }}>
19+
<SplitPane direction="horizontal" onResize={setSizes}>
20+
<Pane size={sizes[0]} minSize={100}>
21+
<div className="pane gray">
22+
<h3>Panel A</h3>
23+
<p className="size-display">{Math.round(sizes[0])}px</p>
24+
</div>
25+
</Pane>
26+
<Pane size={sizes[1]} minSize={100}>
27+
<div className="pane">
28+
<h3>Panel B</h3>
29+
<p className="size-display">{Math.round(sizes[1])}px</p>
30+
<div className="code">
5731
<code>
58-
{`const [sizes, setSizes] = useState([300, 500]);
32+
{`const [sizes, setSizes] = useState([200, 400]);
5933
6034
<SplitPane onResize={setSizes}>
61-
<Pane size={sizes[0]}>
62-
Panel A
63-
</Pane>
64-
<Pane size={sizes[1]}>
65-
Panel B
66-
</Pane>
35+
<Pane size={sizes[0]}>A</Pane>
36+
<Pane size={sizes[1]}>B</Pane>
6737
</SplitPane>`}
6838
</code>
6939
</div>
7040
</div>
7141
</Pane>
72-
<Pane size={sizes[1]} minSize={200}>
73-
<div className="pane-content editor">
74-
<h2>Panel B</h2>
75-
<p>Sizes are saved to localStorage on every change.</p>
76-
<div className="size-display">
77-
Width: {Math.round(sizes[1])}px
78-
</div>
79-
<div
80-
style={{
81-
marginTop: '1rem',
82-
padding: '1rem',
83-
background: '#16213e',
84-
borderRadius: '4px',
85-
}}
86-
>
87-
<h3 style={{ fontSize: '0.9rem', marginBottom: '0.5rem' }}>
88-
localStorage
89-
</h3>
90-
<code style={{ fontSize: '0.8rem', color: '#8be9fd' }}>
91-
{STORAGE_KEY}: {JSON.stringify(sizes.map(Math.round))}
92-
</code>
93-
</div>
94-
</div>
95-
</Pane>
9642
</SplitPane>
9743
</div>
9844
</div>

‎examples/NestedExample.tsx‎

Lines changed: 14 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,30 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React from 'react';
22
import { SplitPane, Pane } from '../src';
33

44
export function NestedExample() {
5-
const [isMobile, setIsMobile] = useState(false);
6-
7-
useEffect(() => {
8-
setIsMobile(window.innerWidth <= 768);
9-
}, []);
10-
115
return (
126
<div className="example-container">
13-
<div className="example-info">
7+
<div className="example-header">
148
<h2>Nested Split Panes</h2>
15-
<p>Create complex layouts by nesting split panes. IDE-style layout.</p>
9+
<p>Create complex layouts by nesting split panes.</p>
1610
</div>
1711
<div className="example-content">
18-
<SplitPane direction={isMobile ? 'vertical' : 'horizontal'}>
19-
<Pane minSize={80} defaultSize={isMobile ? '30%' : 200}>
20-
<div className="pane-content sidebar">
21-
<h2>Explorer</h2>
22-
<div className="file-tree">
23-
<div className="file-tree-item folder">react-split-pane</div>
24-
<div
25-
className="file-tree-item folder"
26-
style={{ marginLeft: '1rem' }}
27-
>
28-
src
29-
</div>
30-
<div
31-
className="file-tree-item file"
32-
style={{ marginLeft: '2rem' }}
33-
>
34-
index.ts
35-
</div>
36-
<div
37-
className="file-tree-item file"
38-
style={{ marginLeft: '2rem' }}
39-
>
40-
SplitPane.tsx
41-
</div>
42-
<div
43-
className="file-tree-item file"
44-
style={{ marginLeft: '2rem' }}
45-
>
46-
Pane.tsx
47-
</div>
48-
</div>
12+
<SplitPane direction="horizontal">
13+
<Pane minSize={100} defaultSize={200}>
14+
<div className="pane gray">
15+
<h3>Sidebar</h3>
4916
</div>
5017
</Pane>
51-
<Pane minSize={100}>
18+
<Pane minSize={200}>
5219
<SplitPane direction="vertical">
53-
<Pane minSize={60}>
54-
<div className="pane-content editor">
55-
<h2>Editor</h2>
56-
<div className="code-block">
57-
<code>
58-
{`export function SplitPane(props) {
59-
const {
60-
direction = 'horizontal',
61-
children,
62-
} = props;
63-
64-
return (
65-
<div className={className}>
66-
{renderChildren()}
67-
</div>
68-
);
69-
}`}
70-
</code>
71-
</div>
20+
<Pane minSize={100}>
21+
<div className="pane">
22+
<h3>Main</h3>
7223
</div>
7324
</Pane>
74-
<Pane minSize={50} defaultSize={isMobile ? 80 : 150}>
75-
<div className="pane-content console">
76-
<h2>Terminal</h2>
77-
<div style={{ marginTop: '0.5rem', fontSize: '0.75rem' }}>
78-
<div style={{ color: '#50fa7b' }}>$ npm test</div>
79-
<div style={{ color: '#888', marginTop: '0.25rem' }}>
80-
✓ 14 tests passed
81-
</div>
82-
<div style={{ color: '#50fa7b', marginTop: '0.25rem' }}>
83-
All tests passed
84-
</div>
85-
</div>
25+
<Pane minSize={80} defaultSize={150}>
26+
<div className="pane gray">
27+
<h3>Panel</h3>
8628
</div>
8729
</Pane>
8830
</SplitPane>

‎examples/PercentageExample.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import { SplitPane, Pane } from '../src';
3+
4+
export function PercentageExample() {
5+
return (
6+
<div className="example-container">
7+
<div className="example-header">
8+
<h2>Percentage Sizes</h2>
9+
<p>Use percentage values for responsive layouts.</p>
10+
</div>
11+
<div className="example-content">
12+
<SplitPane direction="horizontal">
13+
<Pane defaultSize="25%">
14+
<div className="pane gray">
15+
<h3>25%</h3>
16+
</div>
17+
</Pane>
18+
<Pane defaultSize="50%">
19+
<div className="pane">
20+
<h3>50%</h3>
21+
<div className="code">
22+
<code>
23+
{`<SplitPane>
24+
<Pane defaultSize="25%">A</Pane>
25+
<Pane defaultSize="50%">B</Pane>
26+
<Pane defaultSize="25%">C</Pane>
27+
</SplitPane>`}
28+
</code>
29+
</div>
30+
</div>
31+
</Pane>
32+
<Pane defaultSize="25%">
33+
<div className="pane gray">
34+
<h3>25%</h3>
35+
</div>
36+
</Pane>
37+
</SplitPane>
38+
</div>
39+
</div>
40+
);
41+
}

0 commit comments

Comments
 (0)