Skip to content

Commit 86f9366

Browse files
alencarlucasdavimacedo
alencarlucas
authored and
davimacedo
committed
fix: Update PIG examples to work with react-dnd 3.x (#1214)
1 parent 343732b commit 86f9366

File tree

2 files changed

+50
-48
lines changed

2 files changed

+50
-48
lines changed

‎src/components/DataBrowserHeader/DataBrowserHeader.example.js‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,37 @@
88
import DataBrowserHeader from 'components/DataBrowserHeader/DataBrowserHeader.react';
99
import HTML5Backend from 'react-dnd-html5-backend';
1010
import React from 'react';
11-
import { DragDropContext } from 'react-dnd';
11+
import { DndProvider } from 'react-dnd'
1212

1313
export const component = DataBrowserHeader;
1414

1515
let lightBg = { background: 'rgba(224,224,234,0.10)' };
1616

17-
@DragDropContext(HTML5Backend)
1817
class HeadersDemo extends React.Component {
1918
render() {
2019
return (
21-
<div style={{ height: 30, background: '#66637A' }}>
22-
<div style={{ float: 'left', width: 140 }}>
23-
<DataBrowserHeader name='objectId' type='Special' />
20+
<DndProvider backend={HTML5Backend}>
21+
<div style={{ height: 30, background: '#66637A' }}>
22+
<div style={{ float: 'left', width: 140 }}>
23+
<DataBrowserHeader name='objectId' type='Special' />
24+
</div>
25+
<div style={{ float: 'left', width: 140 }}>
26+
<DataBrowserHeader name='createdAt' type='Date' style={lightBg} />
27+
</div>
28+
<div style={{ float: 'left', width: 140 }}>
29+
<DataBrowserHeader name='updatedAt' type='Date' />
30+
</div>
31+
<div style={{ float: 'left', width: 140 }}>
32+
<DataBrowserHeader name='name' type='String' style={lightBg} />
33+
</div>
34+
<div style={{ float: 'left', width: 140 }}>
35+
<DataBrowserHeader name='owner' type='Pointer<_User>' />
36+
</div>
37+
<div style={{ float: 'left', width: 140 }}>
38+
<DataBrowserHeader name='really_long_column_name_that_overflows' type='String' style={lightBg} />
39+
</div>
2440
</div>
25-
<div style={{ float: 'left', width: 140 }}>
26-
<DataBrowserHeader name='createdAt' type='Date' style={lightBg} />
27-
</div>
28-
<div style={{ float: 'left', width: 140 }}>
29-
<DataBrowserHeader name='updatedAt' type='Date' />
30-
</div>
31-
<div style={{ float: 'left', width: 140 }}>
32-
<DataBrowserHeader name='name' type='String' style={lightBg} />
33-
</div>
34-
<div style={{ float: 'left', width: 140 }}>
35-
<DataBrowserHeader name='owner' type='Pointer<_User>' />
36-
</div>
37-
<div style={{ float: 'left', width: 140 }}>
38-
<DataBrowserHeader name='really_long_column_name_that_overflows' type='String' style={lightBg} />
39-
</div>
40-
</div>
41+
</DndProvider>
4142
);
4243
}
4344
}

‎src/components/DragHandle/DragHandle.example.js‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import DataBrowserHeader from 'components/DataBrowserHeader/DataBrowserHeader.
99
import DragHandle from 'components/DragHandle/DragHandle.react';
1010
import HTML5Backend from 'react-dnd-html5-backend';
1111
import React from 'react';
12-
import { DragDropContext } from 'react-dnd';
12+
import { DndProvider } from 'react-dnd'
1313

1414
export const component = DragHandle;
1515

@@ -64,7 +64,6 @@ let handleStyle = {
6464
cursor: 'ew-resize'
6565
};
6666

67-
@DragDropContext(HTML5Backend)
6867
class HeadersDemo extends React.Component {
6968
constructor() {
7069
super();
@@ -90,32 +89,34 @@ class HeadersDemo extends React.Component {
9089

9190
render() {
9291
return (
93-
<div style={{ height: 30, background: '#66637A', whiteSpace: 'nowrap' }}>
94-
<div style={{ display: 'inline-block', width: this.state.widths[0] }}>
95-
<DataBrowserHeader name='objectId' type='Special' />
92+
<DndProvider backend={HTML5Backend}>
93+
<div style={{ height: 30, background: '#66637A', whiteSpace: 'nowrap' }}>
94+
<div style={{ display: 'inline-block', width: this.state.widths[0] }}>
95+
<DataBrowserHeader name='objectId' type='Special' />
96+
</div>
97+
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 0)} />
98+
<div style={{ display: 'inline-block', width: this.state.widths[1] }}>
99+
<DataBrowserHeader name='createdAt' type='Date' style={lightBg} />
100+
</div>
101+
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 1)} />
102+
<div style={{ display: 'inline-block', width: this.state.widths[2] }}>
103+
<DataBrowserHeader name='updatedAt' type='Date' />
104+
</div>
105+
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 2)} />
106+
<div style={{ display: 'inline-block', width: this.state.widths[3] }}>
107+
<DataBrowserHeader name='name' type='String' style={lightBg} />
108+
</div>
109+
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 3)} />
110+
<div style={{ display: 'inline-block', width: this.state.widths[4] }}>
111+
<DataBrowserHeader name='owner' type='Pointer<_User>' />
112+
</div>
113+
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 4)} />
114+
<div style={{ display: 'inline-block', width: this.state.widths[5] }}>
115+
<DataBrowserHeader name='really_long_column_name_that_overflows' type='String' style={lightBg} />
116+
</div>
117+
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 5)} />
96118
</div>
97-
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 0)} />
98-
<div style={{ display: 'inline-block', width: this.state.widths[1] }}>
99-
<DataBrowserHeader name='createdAt' type='Date' style={lightBg} />
100-
</div>
101-
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 1)} />
102-
<div style={{ display: 'inline-block', width: this.state.widths[2] }}>
103-
<DataBrowserHeader name='updatedAt' type='Date' />
104-
</div>
105-
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 2)} />
106-
<div style={{ display: 'inline-block', width: this.state.widths[3] }}>
107-
<DataBrowserHeader name='name' type='String' style={lightBg} />
108-
</div>
109-
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 3)} />
110-
<div style={{ display: 'inline-block', width: this.state.widths[4] }}>
111-
<DataBrowserHeader name='owner' type='Pointer<_User>' />
112-
</div>
113-
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 4)} />
114-
<div style={{ display: 'inline-block', width: this.state.widths[5] }}>
115-
<DataBrowserHeader name='really_long_column_name_that_overflows' type='String' style={lightBg} />
116-
</div>
117-
<DragHandle style={handleStyle} onDrag={this.handleDrag.bind(this, 5)} />
118-
</div>
119+
</DndProvider>
119120
);
120121
}
121122
}

0 commit comments

Comments
 (0)