/
Example.js
159 lines (145 loc) · 4.19 KB
/
Example.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/* @flow */
/* eslint-disable no-console, react/prop-types */
import React from 'react';
import cx from 'classnames';
import DraggableList from '../src';
type PlanetListItem = {
name: string;
subtitle?: boolean;
};
type PlanetProps = {
item: PlanetListItem;
itemSelected: number;
dragHandle: *;
};
type PlanetState = {
value: number;
};
class PlanetItem extends React.Component<PlanetProps, PlanetState> {
state = {
value: 0
};
_inc() {
this.setState({
value: this.state.value+1
});
}
getDragHeight() {
return this.props.item.subtitle ? 47 : 28;
}
render() {
const {item, itemSelected, dragHandle} = this.props;
const {value} = this.state;
const scale = itemSelected * 0.05 + 1;
const shadow = itemSelected * 15 + 1;
const dragged = itemSelected !== 0;
return (
<div
className={cx('item', {dragged})}
style={{
transform: `scale(${scale})`,
boxShadow: `rgba(0, 0, 0, 0.3) 0px ${shadow}px ${2 * shadow}px 0px`
}}
>
{dragHandle(<div className="dragHandle" />)}
<h2>{ item.name }</h2>
{item.subtitle &&
<div className="subtitle">This item has a subtitle visible while dragging</div>
}
<div>
some description here<br/>
this planet orbits the sun<br/>
this planet is mostly round
</div>
{item.subtitle &&
<div>
subtitled planets are better<br/>
and have longer descriptions
</div>
}
<div>
State works and is retained during movement:
{' '}<input type="button" value={value} onClick={() => this._inc()} />
</div>
</div>
);
}
}
type ExampleState = {
useContainer: boolean;
list: $ReadOnlyArray<PlanetListItem>;
};
export default class Example extends React.Component<{}, ExampleState> {
_container: HTMLElement;
state = {
useContainer: false,
list: [
{name: 'Mercury'},
{name: 'Venus'},
{name: 'Earth', subtitle: true},
{name: 'Mars'},
{name: 'Jupiter'},
{name: 'Saturn', subtitle: true},
{name: 'Uranus', subtitle: true},
{name: 'Neptune'}
]
};
_togglePluto() {
const noPluto = this.state.list.filter(item => item.name !== 'Pluto');
if (noPluto.length !== this.state.list.length) {
this.setState({list: noPluto});
} else {
this.setState({list: this.state.list.concat([{name: 'Pluto'}])});
}
}
_toggleContainer() {
this.setState({useContainer: !this.state.useContainer});
}
_onListChange(newList: $ReadOnlyArray<PlanetListItem>) {
this.setState({list: newList});
}
render() {
const {useContainer} = this.state;
return (
<div className="main">
<div className="intro">
<p>
This is a demonstration of the <a href="https://github.com/StreakYC/react-draggable-list">react-draggable-list</a> library.
</p>
<p>
Each item has a drag handle visible when the user hovers over them.
The items may have any height, and can each define their own height
to use while being dragged.
</p>
<p>
When the list is reordered, the page will
be scrolled if possible to keep the moved item visible and on the
same part of the screen.
</p>
<div>
<input type="button" value="Toggle Pluto" onClick={() => this._togglePluto()} />
<input type="button" value="Toggle Container" onClick={() => this._toggleContainer()} />
</div>
</div>
<div
className="list" ref={el => {
if (el) this._container = el;
}}
style={{
overflow: useContainer ? 'auto' : '',
height: useContainer ? '200px' : '',
border: useContainer ? '1px solid gray' : ''
}}
>
<DraggableList
itemKey="name"
template={PlanetItem}
list={this.state.list}
onMoveEnd={newList => this._onListChange(newList)}
container={()=>useContainer ? this._container : document.body}
/>
</div>
</div>
);
}
}