69 lines
1.7 KiB
JavaScript
69 lines
1.7 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js
|
|
// 通用可折叠区块组件
|
|
|
|
import React from 'react';
|
|
import {
|
|
Box,
|
|
Collapse,
|
|
useColorModeValue,
|
|
} from '@chakra-ui/react';
|
|
import CollapsibleHeader from './CollapsibleHeader';
|
|
|
|
/**
|
|
* 通用可折叠区块组件
|
|
* @param {Object} props
|
|
* @param {string} props.title - 标题文本
|
|
* @param {boolean} props.isOpen - 是否展开
|
|
* @param {Function} props.onToggle - 切换展开/收起的回调
|
|
* @param {number} props.count - 可选的数量徽章
|
|
* @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件
|
|
* @param {boolean} props.isLocked - 是否锁定（不可展开）
|
|
* @param {Function} props.onLockedClick - 锁定时点击的回调
|
|
* @param {React.ReactNode} props.children - 子内容
|
|
*/
|
|
const CollapsibleSection = ({
|
|
title,
|
|
isOpen,
|
|
onToggle,
|
|
count = null,
|
|
subscriptionBadge = null,
|
|
isLocked = false,
|
|
onLockedClick = null,
|
|
children
|
|
}) => {
|
|
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
|
|
|
// 处理点击：如果锁定则触发锁定回调，否则触发正常切换
|
|
const handleToggle = () => {
|
|
if (isLocked && onLockedClick) {
|
|
onLockedClick();
|
|
} else if (!isLocked) {
|
|
onToggle();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<CollapsibleHeader
|
|
title={title}
|
|
isOpen={isOpen}
|
|
onToggle={handleToggle}
|
|
count={count}
|
|
subscriptionBadge={subscriptionBadge}
|
|
/>
|
|
<Collapse
|
|
in={isOpen && !isLocked}
|
|
animateOpacity
|
|
unmountOnExit={false}
|
|
startingHeight={0}
|
|
>
|
|
<Box mt={2} bg={sectionBg} p={3} borderRadius="md">
|
|
{children}
|
|
</Box>
|
|
</Collapse>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CollapsibleSection;
|