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

import {Card, Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
import React, {Fragment, useEffect, useRef, useState} from 'react'
import {
    DragDropContext,
    Draggable,
    Droppable,
    // DropResult,
} from 'react-beautiful-dnd'
import {getTaskList} from "../../utils";
import "./index.css"
import {useLocation, useOutletContext} from "react-router-dom";
import dayjs from "dayjs";
import {DATE_TIME_FORMAT} from "../../utils/timeFormatUtil";

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([])
    const [hasMore, setHasMore] = useState(true)
    const [pageNumber, setPageNumber] = useState(1)
    let loading = false;
    const location = useLocation();
    const {search: outletSearch} = useOutletContext()
    const search = location.state ? location.state.search : outletSearch;
    console.log("ToDoList.search", location, outletSearch)

    async function loadMore() {
        if (loading) {
            return
        }
        loading = true;
        console.log("loadMore", loading)
        getTaskList({...search, "pageNumber": pageNumber + 1}).then(result => {
            setTaskList(val => [...val, ...result.content])
            setHasMore(result.page.number < result.page.totalPages)
        })
        setPageNumber(pageNumber + 1)
        loading = false;
    }

    useEffect(() => {
        getTaskList({...search, "pageNumber": pageNumber}).then(result => {
            setTaskList(result.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 (
        <Fragment>
            {/* 下拉刷新 */}
            <PullToRefresh
                onRefresh={async () => {
                    getTaskList({...search, "pageNumber": 1}).then(result => {
                        setTaskList(result.content)
                        setPageNumber(1)
                        setHasMore(result.page.number < result.page.totalPages)
                    })
                }}
            >
                <List>
                    <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")
                                                            //     }
                                                            // }
                                                            title={
                                                                <div style={{
                                                                    display: "flex",
                                                                    justifyContent: "space-between",
                                                                    alignItems: "center",
                                                                    flexDirection: "row",
                                                                    flexWrap: "nowrap",
                                                                    fontSize: "large",
                                                                    color: "black"
                                                                }}>
                                                                    <span>{item.name}</span>
                                                                    {item.expectedEndTime && <span>
                                                                    结束时间:{dayjs(item.expectedEndTime).format(DATE_TIME_FORMAT)}</span>}
                                                                </div>}
                                                            description={item.description}
                                                        >
                                                            {/*<Card style={{width: "100%"}} title={*/}
                                                            {/*    <div style={{*/}
                                                            {/*        display: "flex",*/}
                                                            {/*        justifyContent: "space-between",*/}
                                                            {/*        alignItems: "center",*/}
                                                            {/*        flexDirection: "row",*/}
                                                            {/*        flexWrap: "nowrap"*/}
                                                            {/*    }}>*/}
                                                            {/*        <span>{item.name}</span>*/}
                                                            {/*        {item.expectedEndTime && <span>*/}
                                                            {/*        结束时间:{item.expectedEndTime}</span>}*/}

                                                            {/*    </div>}*/}
                                                            {/*>*/}
                                                            {/*    {item.description}*/}
                                                            {/*</Card>*/}
                                                        </List.Item>
                                                    </SwipeAction>
                                                </div>
                                            )}
                                        </Draggable>
                                    ))}
                                    {droppableProvided.placeholder}
                                </div>
                            )}
                        </Droppable>
                    </DragDropContext>
                </List>
                {/*无限滚动*/}
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}/>
            </PullToRefresh>
        </Fragment>
    )
}
export default ToDoList;