feat:日志高度设置
This commit is contained in:
1708-huayu
parent
db19c5e12c
commit
a2aced4c85
|
|
@ -7,12 +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;
|
||||
|
||||
const DiaryOption = (props: SelectDiary) => {
|
||||
// 抽屉 start
|
||||
const [open, setOpen] = useState(false);
|
||||
|
|
@ -23,6 +19,36 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
setOpen(false);
|
||||
};
|
||||
// 抽屉 end
|
||||
const [shouldScroll,setShouldScroll] = React.useState(true);
|
||||
// 设置高度 start
|
||||
const [containerHeight, setContainerHeight] = useState(400);
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
// 使用 setTimeout 确保 Drawer 内容已渲染
|
||||
const timer = setTimeout(() => {
|
||||
const innerDiv = document.querySelector('.ant-drawer-body');
|
||||
const titleButtonHeight = document.querySelector('.titleButton');
|
||||
// clientHeight：可视高度（包括 padding，但不包括 border、margin 和滚动条）
|
||||
// offsetHeight：总高度（包括 padding、border 和滚动条，但不包括 margin）
|
||||
// scrollHeight：内容总高度（包括不可见部分）
|
||||
if (innerDiv && titleButtonHeight) {
|
||||
console.log(innerDiv.clientHeight)
|
||||
setContainerHeight(innerDiv.clientHeight - titleButtonHeight.clientHeight)
|
||||
}
|
||||
}, 100);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
// console.log({contentRef})
|
||||
// const observer = new ResizeObserver((entries) => {
|
||||
// const entry = entries[0];
|
||||
// setContentHeight(entry.contentRect.height);
|
||||
// });
|
||||
//
|
||||
// observer.observe(contentRef.current);
|
||||
//
|
||||
// return () => observer.disconnect();
|
||||
}, [open]);
|
||||
// 设置高度 end
|
||||
|
||||
// 头按钮设置 start
|
||||
const [currentIndex, setCurrentIndex] = useState(1);
|
||||
|
|
@ -58,6 +84,7 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
}).then(res => {
|
||||
setDiaryList([res.data.data, ...diaryList])
|
||||
setSendValue(undefined)
|
||||
setShouldScroll(true);
|
||||
}).finally(() => {
|
||||
setSendValueFlag(false);
|
||||
})
|
||||
|
|
@ -83,7 +110,7 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
showMessage && message.success(`${results.length} more items loaded!`);
|
||||
if (!showMessage) {
|
||||
if (listRef && listRef.current && typeof listRef.current.scrollTo == 'function') {
|
||||
listRef.current.scrollTo({top: 9999999 });
|
||||
listRef.current.scrollTo({top: 9999999});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -128,16 +155,30 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
const listRef = useRef<ListRef>(null);
|
||||
const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
|
||||
// Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
|
||||
if (
|
||||
Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - CONTAINER_HEIGHT) <= 1 &&
|
||||
!noMoreFlag
|
||||
) {
|
||||
// if (
|
||||
// Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - containerHeight) <= 1 &&
|
||||
// !noMoreFlag
|
||||
// ) {
|
||||
// appendData();
|
||||
// }
|
||||
if (e.currentTarget.scrollTop === 0 && !noMoreFlag) {
|
||||
appendData();
|
||||
setShouldScroll(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 数据 end
|
||||
// 滚动处理 start
|
||||
|
||||
// 条件滚动
|
||||
useEffect(() => {
|
||||
console.log({shouldScroll},{listRef})
|
||||
if (shouldScroll && listRef.current) {
|
||||
listRef.current.scrollTo({
|
||||
top: 99999,
|
||||
});
|
||||
}
|
||||
}, [diaryList, shouldScroll,open]);
|
||||
// 滚动处理 end
|
||||
// 点击操作 start
|
||||
const [clickTaskDiary, setClickTaskDiary] = useState<ListDiary>()
|
||||
const onClickTAskDiary = (item: ListDiary, operate: string) => {
|
||||
|
|
@ -241,7 +282,7 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
</div>
|
||||
}
|
||||
>
|
||||
<div className="displayFlexRow"
|
||||
<div className="displayFlexRow titleButton"
|
||||
style={{position: "sticky", top: "0", background: "white", zIndex: "100"}}>
|
||||
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(0)}
|
||||
type={currentIndex == 0 ? "primary" : "default"}>全部</Button>
|
||||
|
|
@ -250,14 +291,14 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(2)}
|
||||
type={currentIndex == 2 ? "primary" : "default"}>失效</Button>
|
||||
</div>
|
||||
<List style={{height: "auto"}}>
|
||||
<List>
|
||||
<VirtualList
|
||||
data={diaryReduceList}
|
||||
// height={CONTAINER_HEIGHT}
|
||||
height={containerHeight}
|
||||
// itemHeight={47}
|
||||
itemKey="email"
|
||||
itemKey="id"
|
||||
onScroll={onScroll}
|
||||
style={{height: "auto"}}
|
||||
// style={{height: "auto"}}
|
||||
ref={listRef}
|
||||
>
|
||||
{item => (
|
||||
|
|
|
|||
Loading…
Reference in New Issue