105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
// src/views/Community/components/DynamicNews/EventScrollList.js
|
|
// 事件列表组件
|
|
|
|
import React, { useRef, useCallback } from "react";
|
|
import { Box, useColorModeValue } from "@chakra-ui/react";
|
|
import MainlineTimelineView from "./layouts/MainlineTimelineView";
|
|
import VerticalModeLayout from "./layouts/VerticalModeLayout";
|
|
|
|
/**
|
|
* 事件列表组件 - 支持纵向、主线两种展示模式
|
|
* @param {Array} events - 当前页的事件列表（服务端已分页）
|
|
* @param {Object} filters - 筛选条件（主线模式用）
|
|
* @param {Function} onMainlineEventClick - 主线模式事件点击回调（打开弹窗）
|
|
* @param {Object} selectedEvent - 当前选中的事件
|
|
* @param {Function} onEventSelect - 事件选择回调
|
|
* @param {string} borderColor - 边框颜色
|
|
* @param {number} currentPage - 当前页码
|
|
* @param {number} totalPages - 总页数（由服务端返回）
|
|
* @param {Function} onPageChange - 页码改变回调
|
|
* @param {boolean} loading - 全局加载状态
|
|
* @param {Object} error - 错误状态
|
|
* @param {string} mode - 展示模式：'vertical'（纵向分栏）| 'mainline'（主线时间轴）
|
|
* @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
|
|
* @param {Function} onToggleFollow - 关注按钮回调
|
|
* @param {React.Ref} mainlineRef - MainlineTimelineView 的 ref
|
|
*/
|
|
const EventScrollList = React.memo(
|
|
({
|
|
events,
|
|
filters = {},
|
|
onMainlineEventClick,
|
|
selectedEvent,
|
|
onEventSelect,
|
|
borderColor,
|
|
currentPage,
|
|
totalPages,
|
|
onPageChange,
|
|
loading = false,
|
|
error,
|
|
mode = "vertical",
|
|
eventFollowStatus = {},
|
|
onToggleFollow,
|
|
mainlineRef,
|
|
}) => {
|
|
const scrollContainerRef = useRef(null);
|
|
|
|
// 所有 useColorModeValue 必须在组件顶层调用
|
|
const timelineBg = useColorModeValue("gray.50", "gray.700");
|
|
const timelineBorderColor = useColorModeValue("gray.400", "gray.500");
|
|
const timelineTextColor = useColorModeValue("blue.600", "blue.400");
|
|
|
|
const getTimelineBoxStyle = () => {
|
|
return {
|
|
bg: timelineBg,
|
|
borderColor: timelineBorderColor,
|
|
borderWidth: "2px",
|
|
textColor: timelineTextColor,
|
|
boxShadow: "sm",
|
|
};
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
ref={scrollContainerRef}
|
|
overflow="hidden"
|
|
h="100%"
|
|
pt={0}
|
|
pb={mode === "mainline" ? 0 : 4}
|
|
px={mode === "mainline" ? 0 : { base: 0, md: 2 }}
|
|
position="relative"
|
|
data-scroll-container="true"
|
|
>
|
|
{/* 主线时间轴模式 - 按 lv2 概念分组，调用独立 API */}
|
|
<MainlineTimelineView
|
|
ref={mode === "mainline" ? mainlineRef : null}
|
|
display={mode === "mainline" ? "block" : "none"}
|
|
filters={filters}
|
|
selectedEvent={selectedEvent}
|
|
onEventSelect={onMainlineEventClick}
|
|
eventFollowStatus={eventFollowStatus}
|
|
onToggleFollow={onToggleFollow}
|
|
borderColor={borderColor}
|
|
/>
|
|
|
|
{/* 纵向分栏模式 */}
|
|
<VerticalModeLayout
|
|
display={mode === "vertical" ? "flex" : "none"}
|
|
events={events}
|
|
selectedEvent={selectedEvent}
|
|
onEventSelect={onEventSelect}
|
|
eventFollowStatus={eventFollowStatus}
|
|
onToggleFollow={onToggleFollow}
|
|
getTimelineBoxStyle={getTimelineBoxStyle}
|
|
borderColor={borderColor}
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={onPageChange}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default EventScrollList;
|