Skip to content

Commit eebdcde

Browse files
chetoncheton
committed
Update examples
1 parent 7309824 commit eebdcde

File tree

5 files changed

+80
-100
lines changed

5 files changed

+80
-100
lines changed

‎examples/app.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,26 @@ ul {
3030

3131
.title {
3232
color: #fff;
33-
display: inline-block;
3433
position: relative;
3534
background-color: #ff7373;
3635
padding: 4px 10px;
37-
margin-bottom: 5px;
36+
margin-bottom: 10px;
3837
}
3938
.block-list {
4039
padding: 20px 0;
4140
max-width: 360px;
4241
background-color: #fff;
42+
border: 1px solid #eee;
4343
}
4444
.block-list > * {
4545
padding: 10px 40px;
4646
}
47+
.block-list > *:first-child {
48+
border-top: 1px solid #eee;
49+
}
50+
.block-list > * {
51+
border-bottom: 1px solid #eee;
52+
}
4753
.block-list > *:hover {
4854
cursor: move;
4955
}

‎examples/src/index.jsx renamed to ‎examples/index.jsx

Lines changed: 71 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import uniq from 'lodash/uniq';
44
import React from 'react';
55
import ReactDOM from 'react-dom';
66
import Sortable from '../../src';
7-
import store from './store';
87

98
class App extends React.Component {
109
state = {
@@ -16,6 +15,8 @@ class App extends React.Component {
1615
cloneControlledTarget: []
1716
};
1817

18+
simpleList = null;
19+
1920
addMoreItems() {
2021
const items = [
2122
'Apple',
@@ -58,11 +59,28 @@ class App extends React.Component {
5859
<div>
5960
<div className="container-fluid" style={{marginTop: 50}}>
6061
<div className="title">Simple List</div>
62+
<div className="form-group">
63+
<button
64+
type="button"
65+
className="btn btn-default"
66+
onClick={(e) => {
67+
const order = this.simpleList.toArray();
68+
this.simpleList.sort(order.reverse());
69+
}}
70+
>
71+
Reverse Order
72+
</button>
73+
</div>
6174
<div className="row">
6275
<div className="col-sm-12">
6376
<Sortable
64-
tag="ul"
6577
className="block-list"
78+
ref={c => {
79+
if (c) {
80+
this.simpleList = c.sortable;
81+
}
82+
}}
83+
tag="ul"
6684
>
6785
{simpleList}
6886
</Sortable>
@@ -83,13 +101,15 @@ class App extends React.Component {
83101
<div className="row">
84102
<div className="col-sm-6">
85103
<Sortable
86-
ref="group-left"
87-
className="block-list"
88-
group={{
89-
name: 'shared',
90-
pull: true,
91-
put: true
104+
options={{
105+
group: {
106+
name: 'shared',
107+
pull: true,
108+
put: true
109+
}
92110
}}
111+
className="block-list"
112+
ref="group-left"
93113
onChange={(items) => {
94114
this.setState({ groupLeft: items });
95115
}}
@@ -99,16 +119,18 @@ class App extends React.Component {
99119
</div>
100120
<div className="col-sm-6">
101121
<Sortable
102-
ref="group-right"
103-
className="block-list"
104-
group={{
105-
name: 'shared',
106-
pull: true,
107-
put: true
122+
options={{
123+
group: {
124+
name: 'shared',
125+
pull: true,
126+
put: true
127+
}
108128
}}
129+
className="block-list"
109130
onChange={(items) => {
110131
this.setState({ groupRight: items });
111132
}}
133+
ref="group-right"
112134
>
113135
{groupRight}
114136
</Sortable>
@@ -117,33 +139,35 @@ class App extends React.Component {
117139
</div>
118140
<div className="container-fluid">
119141
<div className="title" style={{marginTop: 50}}>Uncontrolled Component</div>
120-
<h4>Clone items from left to right with duplicate DOM elements.</h4>
142+
<h4>Clone items from left to right. DOM elements are duplicated.</h4>
121143
<div className="row">
122144
<div className="col-sm-6">
123145
<Sortable
124-
ref="group-left"
125-
tag="ul"
126-
className="block-list"
127-
sort={false}
128-
group={{
129-
name: 'shared',
130-
pull: 'clone',
131-
put: false
146+
options={{
147+
sort: false,
148+
group: {
149+
name: 'clone1',
150+
pull: 'clone',
151+
put: false
152+
}
132153
}}
154+
className="block-list"
155+
tag="ul"
133156
>
134157
{cloneUncontrolled}
135158
</Sortable>
136159
</div>
137160
<div className="col-sm-6">
138161
<Sortable
139-
ref="group-right"
140-
tag="ul"
141-
className="block-list"
142-
group={{
143-
name: 'shared',
144-
pull: false,
145-
put: true
162+
options={{
163+
group: {
164+
name: 'clone1',
165+
pull: false,
166+
put: true
167+
}
146168
}}
169+
className="block-list"
170+
tag="ul"
147171
>
148172
</Sortable>
149173
</div>
@@ -155,36 +179,38 @@ class App extends React.Component {
155179
<div className="row">
156180
<div className="col-sm-6">
157181
<Sortable
158-
ref="group-left"
159-
tag="ul"
160-
className="block-list"
161-
sort={false}
162-
group={{
163-
name: 'shared',
164-
pull: 'clone',
165-
put: false
182+
options={{
183+
sort: false,
184+
group: {
185+
name: 'clone2',
186+
pull: 'clone',
187+
put: false
188+
}
166189
}}
190+
className="block-list"
167191
onChange={(items) => {
168192
this.setState({ cloneControlledSource: items });
169193
}}
194+
tag="ul"
170195
>
171196
{cloneControlledSource}
172197
</Sortable>
173198
</div>
174199
<div className="col-sm-6">
175200
<Sortable
176-
ref="group-right"
177-
tag="ul"
178-
className="block-list"
179-
group={{
180-
name: 'shared',
181-
pull: false,
182-
put: true
201+
options={{
202+
group: {
203+
name: 'clone2',
204+
pull: false,
205+
put: true
206+
}
183207
}}
208+
className="block-list"
184209
onChange={(items) => {
185210
items = uniq(items); // Remove duplicate items
186211
this.setState({ cloneControlledTarget: items });
187212
}}
213+
tag="ul"
188214
>
189215
{cloneControlledTarget}
190216
</Sortable>

‎examples/src/immutable-store.js

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎examples/src/store.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎examples/webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var webpack = require('webpack');
44
module.exports = {
55
debug: true,
66
devtool: 'source-map',
7-
entry: path.resolve(__dirname, 'src/index.jsx'),
7+
entry: path.resolve('index.jsx'),
88
output: {
99
path: path.join(__dirname),
1010
filename: 'app.bundle.js'

0 commit comments

Comments
 (0)