assistant-todo-mobile/src/pages/ToDoCal/index.jsx

import {Calendar, Cascader, Tag} from "antd-mobile";
import dayjs from "dayjs";
import {TaskCount} from "../TaskCount";
import React, {Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
import {getTaskByPid, getTaskCount} from "../../utils";
import {FrownFill, SmileFill} from "antd-mobile-icons";
import {NEW, OVERDUE, UNDER_WAY} from "../../utils/commonConstant";
import {dateStartUtcFormat} from "../../utils/timeFormatUtil";

import './index.css'

const ToDoCal = (props) => {
    const today = new Date()
    const calRef = useRef(null);
    const [currentDay, setCurrentDay] = React.useState(new Date())
    const [currentMonth, setCurrentMonth] = React.useState(dayjs().set("date", 1).format('YYYY-MM-DD'));
    // Map key为当前月value为当前月的向
    const [listTaskMap, setListTaskMap] = useState(new Map());
    // useLayoutEffect
    useEffect(() => {
        console.log("getCurrentShowDay", getCurrentShowDay())
        const {startDay, endDay} = getCurrentShowDay();
        listTaskCount(startDay, endDay);
    }, [currentMonth])
    let loading = false

    async function listTaskCount(start, end) {
        if (loading) {
            return;
        }
        loading = true;
        if (listTaskMap.has(currentMonth)) return
        const res = await getTaskCount(start, end);
        setListTaskMap(prevState => {
            const newMap = new Map(prevState);
            newMap.set(currentMonth, res);
            return newMap;
        })
        loading = false;
    }

    /*
        获取当前展示的日期
     */
    function getCurrentShowDay() {
        const firstDay = dayjs(currentMonth).set("date", 1);
        const startDay = firstDay.subtract(firstDay.day(), 'day');
        const endDay = startDay.add(6 * 7, 'day');
        return {startDay: dateStartUtcFormat(startDay), endDay: dateStartUtcFormat(endDay)};
    }

    function backToToday() {
        calRef.current.jumpToToday();
        setCurrentDay(today)
    }

    return (

        <Fragment>
            <Calendar
                ref={calRef}
                selectionMode='single'
                // renderLabel={date => {
                //     // 没有任务不显示
                //     return listTaskMap?.get(currentMonth)?.filter(taskC => dayjs(taskC.todoDay).isSame(dayjs(date), 'date'))?.map(taskC => {
                //         // 如果有逾期的      红色
                //         // Object.keys() 返回一个包含对象自身所有可枚举属性的数组
                //         // Object.entries() 返回一个包含对象所有可枚举属性的键值对数组。
                //         if (Object.keys(taskC.state).length > 0) {
                //             console.log("taskC.state", taskC.state)
                //             if (taskC.state[OVERDUE]) {
                //                 return <FrownFill color='var(--adm-color-danger)'/>;
                //             }
                //             // 如果有未完成的任务 warn
                //             if (taskC.state[NEW] || taskC.state[UNDER_WAY]) {
                //                 return <SmileFill color='var(--adm-color-warning)'/>;
                //             }
                //             // 任务全部完成      绿色
                //             return <SmileFill color='var(--adm-color-success)'/>;
                //         }
                //     })
                //
                //     // if (dayjs(date).isSame(today, 'day')) return '今天'
                //     // if (date.getDay() === 0 || date.getDay() === 6) {
                //     //     return '周末'
                //     // }
                // }}
                renderDate={date => {
                    return listTaskMap?.get(currentMonth)?.filter(taskC => dayjs(taskC.todoDay).isSame(dayjs(date), 'date'))?.map(taskC => {
                        // 如果有逾期的      红色
                        // Object.keys() 返回一个包含对象自身所有可枚举属性的数组
                        // Object.entries() 返回一个包含对象所有可枚举属性的键值对数组。
                        if (Object.keys(taskC.state).length > 0) {
                            console.log("taskC.state", taskC.state)
                            if (taskC.state[OVERDUE]) {
                                return <div className='cal-day-circle' style={{
                                    borderColor: 'var(--adm-color-danger)',
                                }}><span>{dayjs(date).date()}</span></div>;
                            }
                            // 如果有未完成的任务 warn
                            if (taskC.state[NEW] || taskC.state[UNDER_WAY]) {
                                return <div className='cal-day-circle' style={{
                                    borderColor: 'var(--adm-color-warning)',
                                }}><span>{dayjs(date).date()}</span></div>;
                            }
                            // 任务全部完成      绿色
                            return <div className='cal-day-circle' style={{
                                borderColor: 'var(--adm-color-success)',
                            }}><span>{dayjs(date).date()}</span></div>;
                        }
                        return <span>{dayjs(date).date()}</span>;
                    })
                }}
                defaultValue={currentDay}
                onChange={val => {
                    setCurrentDay(val)
                }}
                onPageChange={(year, month) => {
                    console.log(year, month)
                    setCurrentMonth(`${year}-${month}-01`)
                }}

            />
            <TaskCount currentDay={currentDay} taskCount={listTaskMap?.get(currentMonth)} today={today}
                       currentMonth={currentMonth}
                       backToToday={backToToday}/>
        </Fragment>
    )
}
export default ToDoCal;