140 lines
7.1 KiB
JavaScript
140 lines
7.1 KiB
JavaScript
|
import {Dialog,Image, List, SwipeAction} from 'antd-mobile'
|
||
|
|
import React, {useEffect, useRef, useState} from 'react'
|
||
|
|
import {
|
||
|
|
DragDropContext,
|
||
|
|
Draggable,
|
||
|
|
Droppable,
|
||
|
|
// DropResult,
|
||
|
|
} from 'react-beautiful-dnd'
|
||
|
|
import {getTaskList} from "../../utils";
|
||
|
|
import "./index.css"
|
||
|
|
|
||
|
|
const reorder = (
|
||
|
|
list,
|
||
|
|
startIndex,
|
||
|
|
endIndex
|
||
|
|
) => {
|
||
|
|
const result = Array.from(list)
|
||
|
|
const [removed] = result.splice(startIndex, 1)
|
||
|
|
result.splice(endIndex, 0, removed)
|
||
|
|
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
|
||
|
|
const ToDoList = () => {
|
||
|
|
const [taskList, setTaskList] = useState([])
|
||
|
|
useEffect(() => {
|
||
|
|
getTaskList().then(result => {
|
||
|
|
console.log("getTaskList()", result)
|
||
|
|
setTaskList(result.data.data.content)
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
const onDragEnd = (result) => {
|
||
|
|
if (!result.destination) return
|
||
|
|
const newList = reorder(taskList, result.source.index, result.destination.index)
|
||
|
|
setTaskList([...newList])
|
||
|
|
}
|
||
|
|
const ref = useRef(null)
|
||
|
|
return (
|
||
|
|
<List
|
||
|
|
// header='任务清单'
|
||
|
|
>
|
||
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
||
|
|
<Droppable droppableId='droppable'>
|
||
|
|
{droppableProvided => (
|
||
|
|
<div ref={droppableProvided.innerRef}>
|
||
|
|
{taskList.map((item, index) => (
|
||
|
|
<Draggable key={item.id} draggableId={item.id} index={index}>
|
||
|
|
{(provided, snapshot) => (
|
||
|
|
<div
|
||
|
|
ref={provided.innerRef}
|
||
|
|
{...provided.draggableProps}
|
||
|
|
{...provided.dragHandleProps}
|
||
|
|
style={{
|
||
|
|
...provided.draggableProps.style,
|
||
|
|
opacity: snapshot.isDragging ? 0.8 : 1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<SwipeAction
|
||
|
|
ref={ref}
|
||
|
|
closeOnAction={false}
|
||
|
|
closeOnTouchOutside={false}
|
||
|
|
rightActions={[
|
||
|
|
{
|
||
|
|
key: 'delete',
|
||
|
|
text: '删除',
|
||
|
|
color: 'danger',
|
||
|
|
onClick: async () => {
|
||
|
|
await Dialog.confirm({
|
||
|
|
content: '确定要关闭吗？',
|
||
|
|
})
|
||
|
|
ref.current?.close()
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'close',
|
||
|
|
text: '关闭',
|
||
|
|
color: 'warning',
|
||
|
|
onClick: async () => {
|
||
|
|
await Dialog.confirm({
|
||
|
|
content: '确定要关闭吗？',
|
||
|
|
})
|
||
|
|
ref.current?.close()
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'update',
|
||
|
|
text: '修改',
|
||
|
|
color: 'primary',
|
||
|
|
onClick: async () => {
|
||
|
|
await Dialog.confirm({
|
||
|
|
content: '确定要修改吗？',
|
||
|
|
})
|
||
|
|
ref.current?.close()
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'complete',
|
||
|
|
text: '完成',
|
||
|
|
color: 'success',
|
||
|
|
onClick: async () => {
|
||
|
|
await Dialog.confirm({
|
||
|
|
content: '确定要完成吗？',
|
||
|
|
})
|
||
|
|
ref.current?.close()
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<List.Item
|
||
|
|
key={item.id}
|
||
|
|
// prefix={
|
||
|
|
// <Image
|
||
|
|
// src={item.avatar}
|
||
|
|
// style={{ borderRadius: 20 }}
|
||
|
|
// fit='cover'
|
||
|
|
// width={40}
|
||
|
|
// height={40}
|
||
|
|
// />
|
||
|
|
// }
|
||
|
|
description={item.description}
|
||
|
|
onClick={
|
||
|
|
()=>{console.log("dianji")}
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{item.name}
|
||
|
|
</List.Item>
|
||
|
|
</SwipeAction>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Draggable>
|
||
|
|
))}
|
||
|
|
{droppableProvided.placeholder}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Droppable>
|
||
|
|
</DragDropContext>
|
||
|
|
</List>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
export default ToDoList;
|