assistant-todo-mobile/src/pages/ToDoList/index.js

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}
                                                        //     />
                                                        // }
                                                        title={<span style={{color:"red"}}>{item.name}</span>}
                                                        children={item.description}
                                                        description={item.state}
                                                        onClick={
                                                            () => {
                                                                console.log("dianji")
                                                            }
                                                        }
                                                    />
                                            </SwipeAction>
                                        </div>
                                    )}
                                </Draggable>
                            ))}
                            {droppableProvided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        </List>
    )
}
export default ToDoList;