125 lines
3.4 KiB
JavaScript
125 lines
3.4 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js
|
||
// 通用可折叠区块组件
|
||
|
||
import React, { useState } 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 - 详细内容
|
||
* @param {React.ReactNode} props.simpleContent - 精简模式的内容（可选）
|
||
* @param {boolean} props.showModeToggle - 是否显示模式切换按钮（默认 false）
|
||
* @param {string} props.defaultMode - 默认模式：'detailed' | 'simple'（默认 'detailed'）
|
||
*/
|
||
const CollapsibleSection = ({
|
||
title,
|
||
isOpen,
|
||
onToggle,
|
||
count = null,
|
||
subscriptionBadge = null,
|
||
isLocked = false,
|
||
onLockedClick = null,
|
||
children,
|
||
simpleContent = null,
|
||
showModeToggle = false,
|
||
defaultMode = 'detailed'
|
||
}) => {
|
||
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
||
|
||
// 模式状态：'detailed' | 'simple'
|
||
const [displayMode, setDisplayMode] = useState(defaultMode);
|
||
|
||
// 处理点击：如果锁定则触发锁定回调，否则触发正常切换
|
||
const handleToggle = () => {
|
||
if (isLocked && onLockedClick) {
|
||
onLockedClick();
|
||
} else if (!isLocked) {
|
||
onToggle();
|
||
}
|
||
};
|
||
|
||
// 处理模式切换
|
||
const handleModeToggle = (e) => {
|
||
e.stopPropagation(); // 阻止冒泡到标题栏的 onToggle
|
||
|
||
if (isLocked && onLockedClick) {
|
||
// 如果被锁定，触发付费弹窗
|
||
onLockedClick();
|
||
return;
|
||
}
|
||
|
||
if (displayMode === 'detailed') {
|
||
// 从详细模式切换到精简模式
|
||
setDisplayMode('simple');
|
||
} else {
|
||
// 从精简模式切换回详细模式
|
||
setDisplayMode('detailed');
|
||
// 切换回详细模式时，如果未展开则自动展开
|
||
if (!isOpen && onToggle) {
|
||
onToggle();
|
||
}
|
||
}
|
||
};
|
||
|
||
// 渲染精简模式
|
||
const renderSimpleMode = () => {
|
||
if (!simpleContent) return null;
|
||
|
||
return (
|
||
<Box mt={2} bg={sectionBg} p={3} borderRadius="md">
|
||
{simpleContent}
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
// 渲染详细模式
|
||
const renderDetailedMode = () => {
|
||
return (
|
||
<Collapse
|
||
in={isOpen && !isLocked}
|
||
animateOpacity
|
||
unmountOnExit={false}
|
||
startingHeight={0}
|
||
>
|
||
<Box mt={2} bg={sectionBg} p={3} borderRadius="md">
|
||
{children}
|
||
</Box>
|
||
</Collapse>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Box>
|
||
<CollapsibleHeader
|
||
title={title}
|
||
isOpen={isOpen}
|
||
onToggle={handleToggle}
|
||
count={count}
|
||
subscriptionBadge={subscriptionBadge}
|
||
showModeToggle={showModeToggle}
|
||
currentMode={displayMode}
|
||
onModeToggle={handleModeToggle}
|
||
isLocked={isLocked}
|
||
/>
|
||
|
||
{/* 根据当前模式渲染对应内容 */}
|
||
{displayMode === 'simple' ? renderSimpleMode() : renderDetailedMode()}
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default CollapsibleSection;
|