test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 19:49:59 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Merge pull request #14757 from zlljqn/patch-2

Browse Source 
Optimized Drag & Drop Table Demo performance
This commit is contained in:
Wei Zhu 2019-02-11 11:14:03 +08:00 committed by GitHub
commit 499a3e2ad5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/table/demo/drag-sorting.md
View File

@ -19,22 +19,7 @@ import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
function dragDirection(
dragIndex,
hoverIndex,
initialClientOffset,
clientOffset,
sourceClientOffset,
) {
const hoverMiddleY = (initialClientOffset.y - sourceClientOffset.y) / 2;
const hoverClientY = clientOffset.y - sourceClientOffset.y;
if (dragIndex < hoverIndex && hoverClientY > hoverMiddleY) {
return 'downward';
}
if (dragIndex > hoverIndex && hoverClientY < hoverMiddleY) {
return 'upward';
}
}
let dragingIndex = -1;
class BodyRow extends React.Component {
render() {
@ -43,27 +28,16 @@ class BodyRow extends React.Component {
connectDragSource,
connectDropTarget,
moveRow,
dragRow,
clientOffset,
sourceClientOffset,
initialClientOffset,
...restProps
} = this.props;
const style = { ...restProps.style, cursor: 'move' };
let className = restProps.className;
if (isOver && initialClientOffset) {
const direction = dragDirection(
dragRow.index,
restProps.index,
initialClientOffset,
clientOffset,
sourceClientOffset
);
if (direction === 'downward') {
if (isOver) {
if (restProps.index > dragingIndex) {
className += ' drop-over-downward';
}
if (direction === 'upward') {
if (restProps.index < dragingIndex) {
className += ' drop-over-upward';
}
}
@ -82,6 +56,7 @@ class BodyRow extends React.Component {
const rowSource = {
beginDrag(props) {
dragingIndex = props.index;
return {
index: props.index,
};
@ -109,17 +84,21 @@ const rowTarget = {
},
};
const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
sourceClientOffset: monitor.getSourceClientOffset(),
}))(
DragSource('row', rowSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
dragRow: monitor.getItem(),
clientOffset: monitor.getClientOffset(),
initialClientOffset: monitor.getInitialClientOffset(),
}))(BodyRow)
const DragableBodyRow = DropTarget(
'row',
rowTarget,
(connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
}),
)(
DragSource(
'row',
rowSource,
(connect) => ({
connectDragSource: connect.dragSource(),
}),
)(BodyRow),
);
const columns = [{