1 | import React, {Component} from 'react';
|
2 | import {DragDropContext, Droppable, Draggable} from 'react-beautiful-dnd';
|
3 | import Drag from 'react-draggable'
|
4 | import PropTypes from 'prop-types';
|
5 | import isEqual from 'lodash.isequal';
|
6 | import SortList from './SortList';
|
7 | import Between from './Between';
|
8 | import GridLayout from './GridLayout';
|
9 |
|
10 |
|
11 | const propTypes = {
|
12 | onStart: PropTypes.func,
|
13 | onDrag: PropTypes.func,
|
14 | onStop: PropTypes.func,
|
15 | onDragUpdate: PropTypes.func,
|
16 | dropClass: PropTypes.string,
|
17 | dropOverClass: PropTypes.string,
|
18 | dragClass: PropTypes.string,
|
19 | dragingClass: PropTypes.string,
|
20 | draggedClass:PropTypes.string,
|
21 | className:PropTypes.string,
|
22 | style:PropTypes.object,
|
23 | list: PropTypes.array,
|
24 | otherList: PropTypes.array,
|
25 | type:PropTypes.oneOf(['vertical','horizontal','betweenVertical','betweenHorizontal']),
|
26 | showKey:PropTypes.string
|
27 |
|
28 | };
|
29 | const defaultProps = {
|
30 | onStart: () => {
|
31 |
|
32 | },
|
33 | onDrag:()=>{
|
34 |
|
35 | },
|
36 | onStop: () => {
|
37 |
|
38 | },
|
39 | onDragUpdate: () => {
|
40 |
|
41 | },
|
42 | list: false,
|
43 | otherList:[],
|
44 | dropClass:'',
|
45 | dropOverClass:'',
|
46 | dragClass:'',
|
47 | dragingClass:'',
|
48 | draggedClass:'',
|
49 | type:'vertical'
|
50 | };
|
51 |
|
52 |
|
53 | class Dnd extends Component {
|
54 | constructor(props) {
|
55 | super(props);
|
56 | this.state={
|
57 | items:this.props.list||[]
|
58 | }
|
59 | }
|
60 | componentWillReceiveProps(nextProps){
|
61 | if(!isEqual(this.state.items,nextProps.list)){
|
62 | this.setState({
|
63 | items:nextProps.list
|
64 | })
|
65 | }
|
66 | }
|
67 |
|
68 | render() {
|
69 | let self = this;
|
70 | let DndType = () => {
|
71 | switch(this.props.type){
|
72 | case 'vertical':
|
73 | return <SortList {...this.props}/>;
|
74 | break;
|
75 | case 'horizontal':
|
76 | return <SortList {...this.props}/>;
|
77 | break;
|
78 | case 'betweenVertical':
|
79 | return <Between {...this.props}/>;
|
80 | break;
|
81 | case 'betweenHorizontal':
|
82 | return <Between {...this.props}/>;
|
83 | break;
|
84 | default :
|
85 | return <SortList {...this.props}/>;
|
86 | break;
|
87 | }
|
88 | }
|
89 | return (
|
90 | <div>
|
91 | {
|
92 | self.state.items.length ?
|
93 | DndType(): (
|
94 | <Drag defaultClassName={this.props.dragClass}
|
95 | defaultClassNameDragging={this.props.dragingClass}
|
96 | defaultClassNameDragged={this.props.draggedClass}
|
97 | {...this.props}>
|
98 | {self.props.children}
|
99 | </Drag>
|
100 | )
|
101 | }
|
102 | </div>
|
103 |
|
104 |
|
105 | );
|
106 | }
|
107 | }
|
108 | Dnd.propTypes = propTypes;
|
109 | Dnd.defaultProps = defaultProps;
|
110 | Dnd.Drag = Drag;
|
111 | Dnd.DragDropContext = DragDropContext;
|
112 | Dnd.Droppable = Droppable;
|
113 | Dnd.Draggable = Draggable;
|
114 | Dnd.GridLayout = GridLayout;
|
115 | export default Dnd; |
\ | No newline at end of file |