|
|
|
@ -16,40 +16,44 @@ By using `itemRender`, we can integrate upload with react-dnd to implement drag |
|
|
|
```jsx |
|
|
|
import React, { useState, useCallback, useRef } from 'react'; |
|
|
|
import { Upload, Button, Tooltip } from 'antd'; |
|
|
|
import { DndProvider, useDrag, useDrop, createDndContext } from 'react-dnd'; |
|
|
|
import { DndProvider, useDrag, useDrop } from 'react-dnd'; |
|
|
|
import { HTML5Backend } from 'react-dnd-html5-backend'; |
|
|
|
import update from 'immutability-helper'; |
|
|
|
import { UploadOutlined } from '@ant-design/icons'; |
|
|
|
|
|
|
|
const RNDContext = createDndContext(HTML5Backend); |
|
|
|
|
|
|
|
const type = 'DragableUploadList'; |
|
|
|
|
|
|
|
const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => { |
|
|
|
const ref = React.useRef(); |
|
|
|
const index = fileList.indexOf(file); |
|
|
|
const [{ isOver, dropClassName }, drop] = useDrop({ |
|
|
|
accept: type, |
|
|
|
collect: monitor => { |
|
|
|
const { index: dragIndex } = monitor.getItem() || {}; |
|
|
|
if (dragIndex === index) { |
|
|
|
return {}; |
|
|
|
} |
|
|
|
return { |
|
|
|
isOver: monitor.isOver(), |
|
|
|
dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward', |
|
|
|
}; |
|
|
|
}, |
|
|
|
drop: item => { |
|
|
|
moveRow(item.index, index); |
|
|
|
}, |
|
|
|
}); |
|
|
|
const [, drag] = useDrag({ |
|
|
|
item: { type, index }, |
|
|
|
collect: monitor => ({ |
|
|
|
isDragging: monitor.isDragging(), |
|
|
|
const [{ isOver, dropClassName }, drop] = useDrop( |
|
|
|
() => ({ |
|
|
|
accept: type, |
|
|
|
collect: monitor => { |
|
|
|
const { index: dragIndex } = monitor.getItem() || {}; |
|
|
|
if (dragIndex === index) { |
|
|
|
return {}; |
|
|
|
} |
|
|
|
return { |
|
|
|
isOver: monitor.isOver(), |
|
|
|
dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward', |
|
|
|
}; |
|
|
|
}, |
|
|
|
drop: item => { |
|
|
|
moveRow(item.index, index); |
|
|
|
}, |
|
|
|
}), |
|
|
|
}); |
|
|
|
[index], |
|
|
|
); |
|
|
|
const [, drag] = useDrag( |
|
|
|
() => ({ |
|
|
|
item: { type, index }, |
|
|
|
collect: monitor => ({ |
|
|
|
isDragging: monitor.isDragging(), |
|
|
|
}), |
|
|
|
}), |
|
|
|
[], |
|
|
|
); |
|
|
|
drop(drag(ref)); |
|
|
|
const errorNode = ( |
|
|
|
<Tooltip title="Upload Error" getPopupContainer={() => document.body}> |
|
|
|
@ -115,14 +119,12 @@ const DragSortingUpload: React.FC = () => { |
|
|
|
[fileList], |
|
|
|
); |
|
|
|
|
|
|
|
const manager = useRef(RNDContext); |
|
|
|
|
|
|
|
const onChange = ({ fileList: newFileList }) => { |
|
|
|
setFileList(newFileList); |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<DndProvider manager={manager.current.dragDropManager}> |
|
|
|
<DndProvider backend={HTML5Backend}> |
|
|
|
<Upload |
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|
|
|
fileList={fileList} |
|
|
|
@ -136,9 +138,7 @@ const DragSortingUpload: React.FC = () => { |
|
|
|
/> |
|
|
|
)} |
|
|
|
> |
|
|
|
<Button> |
|
|
|
<UploadOutlined /> Click to Upload |
|
|
|
</Button> |
|
|
|
<Button icon={<UploadOutlined />}>Click to Upload</Button> |
|
|
|
</Upload> |
|
|
|
</DndProvider> |
|
|
|
); |
|
|
|
|
afc163
4 years ago
GitHub