diff --git a/src/components/DiaryOption.module.css b/src/components/DiaryOption.module.css index ad7744c..1ca30e7 100644 --- a/src/components/DiaryOption.module.css +++ b/src/components/DiaryOption.module.css @@ -1,8 +1,3 @@ -.reverseScrollList { - display: flex; - flex-direction: column; /* 垂直反转 */ - /*overflow-y: auto;*/ -} /* 容器样式 */ .container { display: flex; @@ -55,7 +50,7 @@ display: inline-block; padding: 4rpx 20rpx; border: solid; - border-radius: 20rpx; + border-radius: 0.5rem; border-color: #1677FF; white-space: normal; word-break: break-all; diff --git a/src/components/DiaryOption.tsx b/src/components/DiaryOption.tsx index f147afa..8404b1b 100644 --- a/src/components/DiaryOption.tsx +++ b/src/components/DiaryOption.tsx @@ -1,5 +1,5 @@ -import React, {useEffect, useState} from 'react'; -import {Avatar, Input, List, message} from 'antd'; +import React, {useEffect, useRef, useState} from 'react'; +import {Avatar, Dropdown, Input, List, MenuProps, message} from 'antd'; import VirtualList from 'rc-virtual-list'; import {Button, Drawer} from 'antd'; import {ListDiary, SelectDiary} from "@/components/type/Diary"; @@ -7,6 +7,8 @@ import TextArea from "antd/es/input/TextArea"; import style from "@/components/DiaryOption.module.css" import dayjs from "dayjs"; import {addTaskLogAPI} from "@/components/service/Diary"; +import {ListBodyRef} from "antd/es/transfer/ListBody"; +import {ListRef} from "rc-virtual-list/lib/List"; const CONTAINER_HEIGHT = 400; const PAGE_SIZE = 20; @@ -29,12 +31,19 @@ const DiaryOption = (props: SelectDiary) => { const [diaryList, setDiaryList] = useState([]); const [diaryReduceList, setDiaryReduceList] = useState([]) const [page, setPage] = useState(1); - const noMore = {id: '0', keyId: 'o0',createdDate:new Date(), description: '没有更多了',taskId:props.taskId, enableFlag: 'day-separate'}; + const noMore = { + id: '0', + keyId: 'o0', + createdDate: new Date(), + description: '没有更多了', + taskId: props.taskId, + enableFlag: 'day-separate' + }; const [noMoreFlag, setNoMoreFlag] = useState(false) - const [sendValue,setSendValue] = useState(); - const [sendValueFlag,setSendValueFlag] =useState(false); - const handleSend = ()=>{ - if(sendValueFlag){ + const [sendValue, setSendValue] = useState(); + const [sendValueFlag, setSendValueFlag] = useState(false); + const handleSend = () => { + if (sendValueFlag) { return } setSendValueFlag(true); @@ -72,21 +81,31 @@ const DiaryOption = (props: SelectDiary) => { setDiaryList(diaryList.concat(results)); setPage(page + 1); showMessage && message.success(`${results.length} more items loaded!`); + if (!showMessage) { + if (listRef && listRef.current && typeof listRef.current.scrollTo == 'function') { + listRef.current.scrollTo({top: 9999999 }); + } + } }); }; useEffect(() => { appendData(false); + // 视口高度 + window.innerHeight }, []); useEffect(() => { - console.log("处理日志集合",diaryList) + console.log("处理日志集合", diaryList) const returnResult: ListDiary[] = [] diaryList.filter(taskLog => { - if (currentIndex === 0) { return true } - else if (currentIndex === 1 && taskLog.enableFlag === "1") { return true } - else if (currentIndex === 2 && taskLog.enableFlag === "0") { return true } - else return false; + if (currentIndex === 0) { + return true + } else if (currentIndex === 1 && taskLog.enableFlag === "1") { + return true + } else if (currentIndex === 2 && taskLog.enableFlag === "0") { + return true + } else return false; }).reduce((map, taskLog) => { if (!map.has(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))) { map.set(dayjs(taskLog.createdDate).format("YYYY-MM-DD"), []); @@ -103,9 +122,10 @@ const DiaryOption = (props: SelectDiary) => { createdDate: new Date() }) }) - setDiaryReduceList(returnResult); - }, [diaryList]); + setDiaryReduceList(returnResult.reverse()); + }, [diaryList, currentIndex]); + const listRef = useRef(null); const onScroll = (e: React.UIEvent) => { // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions if ( @@ -120,6 +140,37 @@ const DiaryOption = (props: SelectDiary) => { // 点击操作 start const [clickTaskDiary, setClickTaskDiary] = useState() + const onClickTAskDiary = (item: ListDiary, operate: string) => { + if (clickTaskDiary == item && operate == 'L') { + setClickTaskDiary(undefined) + } else { + setClickTaskDiary(item) + } + } + const items: MenuProps['items'] = [ + { + label: '复制', + key: '1', + onClick: () => { + } + }, + { + label: '失效', + key: '2', + }, + { + label: '创建计划', + key: '3', + }, + { + label: '删除', + key: '4', + }, + { + label: '取消', + key: '5', + }, + ]; // 点击操作 end return ( @@ -128,7 +179,10 @@ const DiaryOption = (props: SelectDiary) => { 日志心得 { } > -
+
-
- - - {item => ( - item.enableFlag === 'day-separate' ? -
-
- {item.description} -
+ + + {item => ( + item.enableFlag === 'day-separate' ? +
+
+ {item.description}
- :
+
+ :
+
setClickTaskDiary(item)}> + onClick={() => onClickTAskDiary(item, "L")} + onContextMenu={() => onClickTAskDiary(item, "R")}> + style={{ + textDecoration: item.enableFlag === '0' && currentIndex === 0 ? 'line-through' : '', + whiteSpace: 'pre-line' + }}> {item.description}
-
- )} - - -
+ +
+ )} +
+
);