Skip to content

Commit 4ef3337

Browse files
bokuwebbokuweb
committed
Update example
1 parent 8c49430 commit 4ef3337

File tree

4 files changed

+112
-46
lines changed

4 files changed

+112
-46
lines changed

‎example/index.html‎

Lines changed: 65 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,70 @@
11
<!doctype html>
22
<html lang="ja">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>React-resizable-and-movable example</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<style>
8-
.body {
9-
width: 100%;
10-
height: 100%;
11-
overflow-x:scroll;
12-
}
13-
#content {
14-
margin: 100px auto;
15-
width: 800px;
16-
}
17-
</style>
18-
</head>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>react-sortable-pane example</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
8+
<style>
9+
html {
10+
background: #1fc8db;
11+
background-size: cover;
12+
background-attachment: fixed;
13+
}
14+
body {
15+
width:100%;
16+
height:100%;
17+
min-height: 100%;
18+
margin:0;
19+
padding:0;
20+
}
1921

20-
<body>
21-
<div id="content"></div>
22-
<script src="dist/bundle.js"></script>
23-
</body>
22+
#content {
23+
width: 500px;
24+
height: 100%;
25+
margin: 120px auto;
26+
overflow: auto;
27+
}
28+
h1 {
29+
font-family: 'Pacifico', cursive;
30+
color: #fff;
31+
font-size: 56px;
32+
text-align: center;
33+
}
34+
35+
.item {
36+
text-align:center;
37+
border: solid 1px #fff;
38+
border-radius: 5px;
39+
font-size:18px;
40+
overflow: hidden;
41+
color: #fff;
42+
line-height: 100%;
43+
display: -webkit-flex;
44+
display: flex;
45+
-webkit-align-items: center;
46+
align-items: center;
47+
-webkit-justify-content:
48+
justify-content: center;
49+
margin: 0 auto;
50+
padding: 4px;
51+
cursor: pointer;
52+
}
53+
.item span{
54+
text-align: center;
55+
display: inline-block;
56+
width: 100%;
57+
font-family: 'Pacifico', cursive;
58+
font-size: 32px;
59+
}
60+
61+
</style>
62+
</head>
63+
64+
<body>
65+
<div id="content"></div>
66+
<a href="https://github.com/bokuweb/react-sortable-pane" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#1fc8db; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
67+
<script src="dist/bundle.js"></script>
68+
</body>
2469

2570
</html>

‎example/src/example.js‎

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import React, { Component } from 'react';
22
import { SortablePane, Pane } from '../../src';
3+
import { Button } from 're-bulma';
34

45
const style = {
56
fontSize: '40px',
67
textAlign: 'center',
7-
paddingTop: '60px',
8-
paddingRight: '60px',
9-
height: '400px',
10-
border: 'solid 1px #ccc',
118
borderRadius: '5px',
12-
backgroundColor: '#fff',
9+
padding: '15px',
1310
};
1411

1512
export default class Example extends Component {
@@ -22,43 +19,46 @@ export default class Example extends Component {
2219
<Pane
2320
id={1}
2421
key={1}
25-
width={200}
26-
height={70}
22+
width={420}
23+
height={120}
2724
minWidth={100}
2825
maxWidth={800}
2926
minHeight={100}
3027
style={style}
28+
className="item"
3129
>
32-
1
30+
<span>no1<br />resize or sort me!!</span>
3331
</Pane>,
3432
<Pane
3533
id={2}
3634
key={2}
37-
width={300}
38-
height={50}
35+
width={450}
36+
height={100}
3937
minWidth={100}
4038
minHeight={100}
4139
style={style}
40+
className="item"
4241
>
43-
2
42+
<span>no2<br />resize or sort me!!</span>
4443
</Pane>,
4544
<Pane
4645
id={3}
4746
key={3}
48-
width={100}
49-
height={40}
47+
width={470}
48+
height={110}
5049
minWidth={100}
5150
minHeight={100}
5251
style={style}
52+
className="item"
5353
>
54-
3
54+
<span>no3<br />resize or sort me!!</span>
5555
</Pane>,
5656
],
5757
};
5858
this.add = ::this.add;
5959
this.remove = ::this.remove;
6060
this.onResize = ::this.onResize;
61-
setInterval(() => this.setState({ order: this.state.order.map(order => (order + 1) % 3) }), 1000);
61+
// setInterval(() => this.setState({ order: this.state.order.map(order => (order + 1) % 3) }), 1000);
6262
}
6363

6464
onResize(i) {
@@ -70,13 +70,14 @@ export default class Example extends Component {
7070
<Pane
7171
id={++this.id}
7272
key={this.id}
73-
width={~~(Math.random() * 200) + 100}
73+
width={~~(Math.random() * 100) + 350}
7474
height={~~(Math.random() * 200) + 100}
7575
minWidth={50}
7676
minHeight={100}
7777
style={style}
78+
className="item"
7879
>
79-
{this.id}
80+
<span>no{this.id}<br />resize or sort me!!</span>
8081
</Pane>
8182
));
8283
this.setState({ list: this.state.list });
@@ -90,11 +91,29 @@ export default class Example extends Component {
9091
render() {
9192
return (
9293
<div>
93-
<a onClick={this.add} >add</a>
94-
<a onClick={this.remove} >remove</a>
94+
<h1>sortable pane</h1>
95+
<Button
96+
onClick={this.add}
97+
style="isOutlined"
98+
color="isPrimary"
99+
customStyle={{
100+
color: '#fff', borderColor: '#fff',
101+
}}
102+
>
103+
Add
104+
</Button>
105+
<Button
106+
onClick={this.remove}
107+
style="isOutlined"
108+
color="isPrimary"
109+
customStyle={{
110+
color: '#fff', borderColor: '#fff', margin: '0 0 30px 10px',
111+
}}
112+
>
113+
Remove</Button>
95114
<SortablePane
96115
direction="vertical"
97-
margin={10}
116+
margin={20}
98117
onResize={this.onResize}
99118
onOrderChange={(pane) => console.dir(pane)}
100119
order={this.state.order}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"eslint-config-airbnb": "^6.2.0",
5454
"eslint-plugin-react": "^4.2.0",
5555
"husky": "^0.11.4",
56+
"re-bulma": "0.0.5",
5657
"react": "^15.0.1",
5758
"react-addons-test-utils": "^15.0.1",
5859
"sinon": "^1.17.2",
@@ -69,6 +70,6 @@
6970
"dependencies": {
7071
"lodash.isequal": "^4.1.1",
7172
"react-motion": "^0.4.4",
72-
"react-resizable-box": "^1.3.1"
73+
"react-resizable-box": "^1.3.2"
7374
}
7475
}

‎src/index.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -128,9 +128,10 @@ class SortablePane extends Component {
128128
const order = this.getPanePropsArrayOf('order');
129129
panes = panes.map((pane, index) => {
130130
if (order.indexOf(i) === index) {
131+
const { offsetWidth, offsetHeight } = this.refs.panes.children[i];
131132
return {
132-
width: rect.width,
133-
height: rect.height,
133+
width: offsetWidth,
134+
height: offsetHeight,
134135
order: pane.order,
135136
id: pane.id,
136137
};
@@ -219,11 +220,11 @@ class SortablePane extends Component {
219220

220221
setSize() {
221222
const panes = this.props.children.map((child, i) => {
222-
const { width, height } = this.refs.panes.children[i].getBoundingClientRect();
223+
const { offsetWidth, offsetHeight } = this.refs.panes.children[i];
223224
return {
224225
id: child.props.id,
225-
width,
226-
height,
226+
width: offsetWidth,
227+
height: offsetHeight,
227228
order: i,
228229
};
229230
});

0 commit comments

Comments
 (0)