1 | import React, { Component } from 'react';
|
2 | import ReactDOM from 'react-dom';
|
3 | import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
4 | import { getClass } from './util';
|
5 | import classnames from 'classnames';
|
6 | import isEqual from 'lodash.isequal';
|
7 |
|
8 |
|
9 | const reorder = (list, startIndex, endIndex) => {
|
10 | const result = Array.from(list);
|
11 | const [removed] = result.splice(startIndex, 1);
|
12 | result.splice(endIndex, 0, removed);
|
13 |
|
14 | return result;
|
15 | };
|
16 |
|
17 | class Vertical extends Component {
|
18 | constructor(props) {
|
19 | super(props);
|
20 | this.state = {
|
21 | items: this.props.list||[],
|
22 | };
|
23 | }
|
24 | componentWillReceiveProps(nextProps){
|
25 | if(!isEqual(this.state.items,nextProps.list)){
|
26 | this.setState({
|
27 | items:nextProps.list
|
28 | })
|
29 | }
|
30 | }
|
31 |
|
32 | onDragEnd = result => {
|
33 | if (!result.destination) {
|
34 | return;
|
35 | }
|
36 | const items = reorder(
|
37 | this.state.items,
|
38 | result.source.index,
|
39 | result.destination.index
|
40 | );
|
41 |
|
42 | this.setState({
|
43 | items,
|
44 | });
|
45 | this.props.onStop(result,items);
|
46 | }
|
47 |
|
48 | onDragStart = result =>{
|
49 | this.props.onStart(result,this.state.items);
|
50 | }
|
51 |
|
52 |
|
53 | render() {
|
54 | const { onStart,onDrag,onStop,onDragUpdate,dropClass,dropOverClass,
|
55 | dragClass,dragingClass,showKey,type } = this.props;
|
56 |
|
57 | return (
|
58 | <DragDropContext onDragEnd={this.onDragEnd} onDragStart={this.onDragStart} onDragUpdate={onDragUpdate}>
|
59 | <Droppable droppableId="droppable" direction={type}>
|
60 | {(provided, snapshot) => (
|
61 | <div
|
62 | ref={provided.innerRef}
|
63 | className={classnames({
|
64 | ...getClass(this.props,snapshot.isDraggingOver).drop
|
65 | })}
|
66 | >
|
67 | {this.state.items.map((item, index) => (
|
68 | <Draggable key={index} draggableId={index} index={index}>
|
69 | {(provided, snapshot) => (
|
70 | <div
|
71 | ref={provided.innerRef}
|
72 | {...provided.draggableProps}
|
73 | {...provided.dragHandleProps}
|
74 | className={classnames({
|
75 | ...getClass(this.props,snapshot.isDragging).drag
|
76 | })}
|
77 | style={{...provided.draggableProps.style}}
|
78 | >
|
79 | {showKey?item[showKey]:item}
|
80 | </div>
|
81 | )}
|
82 | </Draggable>
|
83 | ))}
|
84 | {provided.placeholder}
|
85 | </div>
|
86 | )}
|
87 | </Droppable>
|
88 | </DragDropContext>
|
89 | );
|
90 | }
|
91 | }
|
92 |
|
93 | export default Vertical; |
\ | No newline at end of file |