Skip to content

Commit c8e0ad0

Browse files
chetoncheton
committed
Add examples
1 parent e914b32 commit c8e0ad0

21 files changed

+29185
-0
lines changed

‎examples/app.bundle.js‎

Lines changed: 21332 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/app.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
html {
2+
background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
3+
background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
4+
background-image: linear-gradient(to bottom, #F4E2C9 20%, #F4D7C9 100%);
5+
}
6+
7+
html, body {
8+
background-color: transparent;
9+
font-family: sans-serif;
10+
font-weight: 300;
11+
color: #333;
12+
margin: 0;
13+
padding: 20px;
14+
min-height: 100%;
15+
font-size: 20px;
16+
}
17+
18+
#container {
19+
width: 80%;
20+
min-width: 960px;
21+
margin: auto;
22+
position: relative;
23+
}
24+
25+
ul {
26+
margin: 0;
27+
padding: 0;
28+
list-style: none;
29+
}
30+
31+
.title {
32+
color: #fff;
33+
display: inline-block;
34+
position: relative;
35+
background-color: #ff7373;
36+
padding: 4px 10px;
37+
margin-bottom: 5px;
38+
}
39+
.block-list {
40+
padding: 20px 0;
41+
max-width: 360px;
42+
background-color: #fff;
43+
}
44+
.block-list li {
45+
padding: 10px 40px;
46+
}
47+
.block-list li:hover {
48+
cursor: move;
49+
}

‎examples/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv-"X-UA-Compatible" content="IE=edge">
6+
<title>react-sortable</title>
7+
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
8+
<link href="app.css" rel="stylesheet" type="text/css">
9+
</head>
10+
<body>
11+
<div id="container"></div>
12+
<script src="app.bundle.js"></script>
13+
</body>
14+
</html>

‎examples/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "examples",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "app.bundle.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"react": "^0.14.7",
13+
"react-dom": "^0.14.7",
14+
"react-sortablejs": "latest",
15+
"sortablejs": "^1.4.2"
16+
}
17+
}

‎examples/src/index.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import Sortable from 'react-sortablejs';
4+
import SimpleList from './simple-list';
5+
import SharedGroup from './shared-group';
6+
7+
ReactDOM.render(
8+
<div>
9+
<div className="container-fluid">
10+
<div className="title">Simple List</div>
11+
<div className="row">
12+
<div className="col-sm-12">
13+
<SimpleList />
14+
</div>
15+
</div>
16+
</div>
17+
<div className="container-fluid">
18+
<div className="title" style={{marginTop: 100}}>Shared Group</div>
19+
<div className="row">
20+
<div className="col-sm-6">
21+
<SharedGroup
22+
items={['Apple', 'Banaba', 'Cherry', 'Grape']}
23+
/>
24+
</div>
25+
<div className="col-sm-6">
26+
<SharedGroup
27+
items={['Lemon', 'Orange', 'Pear', 'Peach']}
28+
/>
29+
</div>
30+
</div>
31+
</div>
32+
</div>,
33+
document.getElementById('container')
34+
);

‎examples/src/shared-group.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import Sortable from 'react-sortablejs';
3+
4+
const sortableOptions = {
5+
ref: 'list',
6+
model: 'items',
7+
group: 'shared'
8+
};
9+
10+
class SharedGroup extends React.Component {
11+
static propTypes = {
12+
items: React.PropTypes.array
13+
};
14+
static defaultProps = {
15+
items: []
16+
};
17+
18+
state = {
19+
items: this.props.items
20+
};
21+
22+
render() {
23+
const items = this.state.items.map((text, index) => (
24+
<li key={index}>{text}</li>
25+
));
26+
27+
return (
28+
<ul ref="list" className="block-list">{items}</ul>
29+
);
30+
}
31+
}
32+
33+
export default Sortable(SharedGroup, sortableOptions);

‎examples/src/simple-list.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import Sortable from 'react-sortablejs';
3+
4+
const sortableOptions = {
5+
ref: 'list',
6+
model: 'items'
7+
};
8+
9+
class SimpleList extends React.Component {
10+
state = {
11+
items: [1, 2, 3, 4, 5, 6]
12+
};
13+
14+
render() {
15+
const items = this.state.items.map((text, index) => (
16+
<li key={index}>List Item {text}</li>
17+
));
18+
19+
return (
20+
<ul ref="list" className="block-list">{items}</ul>
21+
);
22+
}
23+
}
24+
25+
export default Sortable(SimpleList, sortableOptions);

0 commit comments

Comments
 (0)