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 |
|
18 |
|
19 |
|
20 | const move = (source, destination, droppableSource, droppableDestination) => {
|
21 | const sourceClone = Array.from(source);
|
22 | const destClone = Array.from(destination);
|
23 | const [removed] = sourceClone.splice(droppableSource.index, 1);
|
24 |
|
25 | destClone.splice(droppableDestination.index, 0, removed);
|
26 |
|
27 | const result = {};
|
28 | result[droppableSource.droppableId] = sourceClone;
|
29 | result[droppableDestination.droppableId] = destClone;
|
30 |
|
31 | return result;
|
32 | };
|
33 |
|
34 |
|
35 | class Between extends Component {
|
36 | constructor(props) {
|
37 | super(props);
|
38 | this.state = {
|
39 | items: this.props.list,
|
40 | selected: this.props.otherList
|
41 | };
|
42 | }
|
43 |
|
44 | componentWillReceiveProps(nextProps){
|
45 | if(!isEqual(this.state.items,nextProps.list)){
|
46 | this.setState({
|
47 | items:nextProps.list
|
48 | })
|
49 | }
|
50 | if(!isEqual(this.state.selected,nextProps.otherList)){
|
51 | this.setState({
|
52 | selected:nextProps.otherList
|
53 | })
|
54 | }
|
55 | }
|
56 |
|
57 | id2List = {
|
58 | droppable: 'items',
|
59 | droppable2: 'selected'
|
60 | };
|
61 |
|
62 | getList = id => this.state[this.id2List[id]];
|
63 |
|
64 | onDragEnd = result => {
|
65 | console.log(result);
|
66 | const { source, destination } = result;
|
67 |
|
68 |
|
69 | if (!destination) {
|
70 | return;
|
71 | }
|
72 | let list=this.state.items;
|
73 | let otherList=this.state.selected;
|
74 |
|
75 | if (source.droppableId === destination.droppableId) {
|
76 | const items = reorder(
|
77 | this.getList(source.droppableId),
|
78 | source.index,
|
79 | destination.index
|
80 | );
|
81 |
|
82 | let state = { items };
|
83 | list=items;
|
84 |
|
85 | if (source.droppableId === 'droppable2') {
|
86 | state = { selected: items };
|
87 | otherList=items;
|
88 | list=this.state.items;
|
89 | }
|
90 | this.setState(state);
|
91 | } else {
|
92 | const result = move(
|
93 | this.getList(source.droppableId),
|
94 | this.getList(destination.droppableId),
|
95 | source,
|
96 | destination
|
97 | );
|
98 |
|
99 | this.setState({
|
100 | items: result.droppable,
|
101 | selected: result.droppable2
|
102 | });
|
103 | list=result.droppable;
|
104 | otherList=result.droppable2;
|
105 | }
|
106 | this.props.onStop(result,{
|
107 | list:list,
|
108 | otherList:otherList
|
109 | })
|
110 |
|
111 | };
|
112 |
|
113 | onDragStart = result =>{
|
114 | this.props.onStart(result,{
|
115 | list:this.state.list,
|
116 | otherList:this.state.selected
|
117 | })
|
118 | }
|
119 |
|
120 | render() {
|
121 | const { onStart,onDrag,onStop,onDragUpdate,dropClass,dropOverClass,
|
122 | dragClass,dragingClass,showKey,type } = this.props;
|
123 |
|
124 | return (
|
125 | <div className={classnames({
|
126 | 'u-drag-between':type=='betweenVertical',
|
127 | 'u-drag-between u-drag-between-horizontal':type=='betweenHorizontal',
|
128 |
|
129 | })}>
|
130 | <DragDropContext onDragEnd={this.onDragEnd} onDragStart={this.onDragStart} onDragUpdate={onDragUpdate}>
|
131 | <Droppable droppableId="droppable" direction={type=='betweenVertical'?'vertical':'horizontal'}>
|
132 | {(provided, snapshot) => (
|
133 | <div
|
134 | ref={provided.innerRef}
|
135 | className={classnames({
|
136 | ...getClass(this.props,snapshot.isDraggingOver).drop
|
137 | })}>
|
138 | {this.state.items.map((item, index) => (
|
139 | <Draggable
|
140 | key={'1'+index}
|
141 | draggableId={'1'+index}
|
142 | index={index}>
|
143 | {(provided, snapshot) => (
|
144 | <div
|
145 | ref={provided.innerRef}
|
146 | {...provided.draggableProps}
|
147 | {...provided.dragHandleProps}
|
148 | className={classnames({
|
149 | ...getClass(this.props,snapshot.isDragging).drag
|
150 | })}
|
151 | style={{...provided.draggableProps.style}}>
|
152 | {showKey?item[showKey]:item}
|
153 | </div>
|
154 | )}
|
155 | </Draggable>
|
156 | ))}
|
157 | {provided.placeholder}
|
158 | </div>
|
159 | )}
|
160 | </Droppable>
|
161 | <Droppable droppableId="droppable2" direction={type=='betweenVertical'?'vertical':'horizontal'}>
|
162 | {(provided, snapshot) => (
|
163 | <div
|
164 | ref={provided.innerRef}
|
165 | className={classnames({
|
166 | ...getClass(this.props,snapshot.isDraggingOver).drop
|
167 | })}>
|
168 | {this.state.selected.map((item, index) => (
|
169 | <Draggable
|
170 | key={'2'+index}
|
171 | draggableId={'2'+index}
|
172 | index={index}>
|
173 | {(provided, snapshot) => (
|
174 | <div
|
175 | ref={provided.innerRef}
|
176 | {...provided.draggableProps}
|
177 | {...provided.dragHandleProps}
|
178 | className={classnames({
|
179 | ...getClass(this.props,snapshot.isDragging).drag
|
180 | })}
|
181 | style={{...provided.draggableProps.style}}>
|
182 | {showKey?item[showKey]:item}
|
183 | </div>
|
184 | )}
|
185 | </Draggable>
|
186 | ))}
|
187 | {provided.placeholder}
|
188 | </div>
|
189 | )}
|
190 | </Droppable>
|
191 | </DragDropContext>
|
192 | </div>
|
193 |
|
194 | );
|
195 | }
|
196 | }
|
197 |
|
198 |
|
199 | export default Between; |
\ | No newline at end of file |