Skip to content

Commit 5a59335

Browse files
bokuwebbokuweb
authored
Merge pull request #45 from bokuweb/0.5.0
0.5.0
2 parents 1b2fcf9 + 6525d6e commit 5a59335

File tree

7 files changed

+157
-91
lines changed

7 files changed

+157
-91
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,13 @@ The `style` property is used to set the style of a Pane component.
255255

256256
## Changelog
257257

258+
### V0.5.0
259+
260+
- Fixes a nasty bug
261+
- Add isResizable props to Pane component
262+
- Set `user-select: none` when resizeing or moving.
263+
- update example
264+
258265
### V0.4.1
259266

260267
- Fixes a nasty bug where all Panes could end up sharing the same static style #44 (thanks @ara4n)

‎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: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-sortable-pane",
3-
"version": "0.4.1",
3+
"version": "0.5.0",
44
"description": "",
55
"main": "lib/index.js",
66
"scripts": {
@@ -52,22 +52,8 @@
5252
"eslint": "^2.7.0",
5353
"eslint-config-airbnb": "^6.2.0",
5454
"eslint-plugin-react": "^4.2.0",
55-
"espower-babel": "^3.3.0",
56-
"espower-loader": "^1.0.0",
57-
"espowerify": "^1.0.0",
58-
"estraverse": "^4.1.1",
59-
"estraverse-fb": "^1.3.1",
6055
"husky": "^0.11.4",
61-
"intelli-espower-loader": "^1.0.0",
62-
"karma": "^0.13.19",
63-
"karma-browserify": "^4.4.0",
64-
"karma-cli": "^0.1.1",
65-
"karma-mocha": "^0.2.0",
66-
"karma-phantomjs-launcher": "^0.2.1",
67-
"mocha": "^2.3.3",
68-
"phantomjs": "^1.9.18",
69-
"phantomjs-polyfill": "^0.0.1",
70-
"power-assert": "^1.1.0",
56+
"re-bulma": "0.0.5",
7157
"react": "^15.0.1",
7258
"react-addons-test-utils": "^15.0.1",
7359
"sinon": "^1.17.2",
@@ -83,7 +69,7 @@
8369
],
8470
"dependencies": {
8571
"lodash.isequal": "^4.1.1",
86-
"react-motion": "^0.4.3",
87-
"react-resizable-box": "^1.2.1"
72+
"react-motion": "^0.4.4",
73+
"react-resizable-box": "^1.3.2"
8874
}
8975
}

‎screenshot/screenshot.gif‎

477 KB
Loading

0 commit comments

Comments
 (0)