67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
|
|
// 相关股票列表区组件（可折叠，网格布局）
|
|
|
|
import React from 'react';
|
|
import {
|
|
Box,
|
|
SimpleGrid,
|
|
Collapse,
|
|
} from '@chakra-ui/react';
|
|
import CollapsibleHeader from './CollapsibleHeader';
|
|
import StockListItem from './StockListItem';
|
|
|
|
/**
|
|
* 相关股票列表区组件
|
|
* @param {Object} props
|
|
* @param {Array<Object>} props.stocks - 股票数组
|
|
* @param {Object} props.quotes - 股票行情字典 { [stockCode]: { change: number } }
|
|
* @param {string} props.eventTime - 事件时间
|
|
* @param {Set} props.watchlistSet - 自选股代码集合
|
|
* @param {boolean} props.isOpen - 是否展开
|
|
* @param {Function} props.onToggle - 切换展开/收起的回调
|
|
* @param {Function} props.onWatchlistToggle - 切换自选股回调
|
|
*/
|
|
const RelatedStocksSection = ({
|
|
stocks,
|
|
quotes = {},
|
|
eventTime = null,
|
|
watchlistSet = new Set(),
|
|
isOpen,
|
|
onToggle,
|
|
onWatchlistToggle
|
|
}) => {
|
|
// 如果没有股票数据，不渲染
|
|
if (!stocks || stocks.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<CollapsibleHeader
|
|
title="相关股票"
|
|
isOpen={isOpen}
|
|
onToggle={onToggle}
|
|
count={stocks.length}
|
|
/>
|
|
<Collapse in={isOpen} animateOpacity>
|
|
<Box mt={3}>
|
|
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
|
|
{stocks.map((stock, index) => (
|
|
<StockListItem
|
|
key={index}
|
|
stock={stock}
|
|
quote={quotes[stock.stock_code]}
|
|
eventTime={eventTime}
|
|
isInWatchlist={watchlistSet.has(stock.stock_code)}
|
|
onWatchlistToggle={onWatchlistToggle}
|
|
/>
|
|
))}
|
|
</SimpleGrid>
|
|
</Box>
|
|
</Collapse>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default RelatedStocksSection;
|