zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

EnhancedRenderCode: auto-open

Browse Source
This commit is contained in:
Enrico Ros
2024-09-24 20:24:13 -07:00
parent 1e61998b50
commit 0989796f87
1 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/blocks/enhanced-code/EnhancedRenderCode.tsx
+42 -31
View File
@@ -2,6 +2,7 @@ import * as React from 'react';
import type { SxProps } from '@mui/joy/styles/types';
import { Box, ColorPaletteProp, IconButton, Typography } from '@mui/joy';
import BarChartIcon from '@mui/icons-material/BarChart';
import CodeIcon from '@mui/icons-material/Code';
import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -50,6 +51,12 @@ export function EnhancedRenderCode(props: {
);
// React to changes in the collapsed state. Note that by default, nothing is collapsed
React.useEffect(() => {
setIsCodeCollapsed(props.initialIsCollapsed);
}, [props.initialIsCollapsed]);
// handlers
const handleCloseContextMenu = React.useCallback(() => setContextMenuAnchor(null), []);
@@ -108,40 +115,44 @@ export function EnhancedRenderCode(props: {
</Box>
), [props.code, props.semiStableId, props.title]);
const headerRow = React.useMemo(() => <>
{/* Icon and Title */}
<TooltipOutlined placement='top-start' color='neutral' title={headerTooltipContents}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CodeIcon
aria-hidden
onClick={handleToggleCodeCollapse}
sx={{
transform: isCodeCollapsed ? 'rotate(-90deg)' : 'none',
transition: 'transform 0.2s cubic-bezier(.17,.84,.44,1)',
cursor: 'pointer',
}}
/>
<Typography level={props.title !== BLOCK_CODE_VND_AGI_CHARTJS ? 'title-sm' : 'body-sm'}>
{props.title === BLOCK_CODE_VND_AGI_CHARTJS ? 'Chart ' + (props.isPartial ? '.'.repeat(Math.round(props.code.length / 100) % 4) : '')
: props.title || 'Code'}
</Typography>
</Box>
</TooltipOutlined>
const headerRow = React.useMemo(() => {
const isChart = props.title === BLOCK_CODE_VND_AGI_CHARTJS;
const Icon = (isChart && !isCodeCollapsed) ? BarChartIcon : CodeIcon;
return <>
{/* Icon and Title */}
<TooltipOutlined placement='top-start' color='neutral' title={headerTooltipContents}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Icon
aria-hidden
onClick={handleToggleCodeCollapse}
sx={{
transform: (isCodeCollapsed && !isChart) ? 'rotate(-90deg)' : 'none',
transition: 'transform 0.2s cubic-bezier(.17,.84,.44,1)',
cursor: 'pointer',
}}
/>
<Typography level={!isChart ? 'title-sm' : 'body-sm'}>
{isChart ? 'Chart ' + (props.isPartial ? '.'.repeat(Math.round(props.code.length / 100) % 4) : '')
: props.title || 'Code'}
</Typography>
</Box>
</TooltipOutlined>
{/* LiveFile - Select */}
{liveFileButton}
{/* LiveFile - Select */}
{liveFileButton}
{/* Menu Options button */}
<IconButton
size='sm'
onClick={handleToggleContextMenu}
onContextMenu={handleToggleContextMenu}
sx={{ mr: -0.5 }}
>
<MoreVertIcon />
</IconButton>
{/* Menu Options button */}
<IconButton
size='sm'
onClick={handleToggleContextMenu}
onContextMenu={handleToggleContextMenu}
sx={{ mr: -0.5 }}
>
<MoreVertIcon />
</IconButton>
</>, [handleToggleCodeCollapse, handleToggleContextMenu, headerTooltipContents, isCodeCollapsed, liveFileButton, props.title]);
</>;
}, [handleToggleCodeCollapse, handleToggleContextMenu, headerTooltipContents, isCodeCollapsed, liveFileButton, props.code.length, props.isPartial, props.title]);
// const toolbarRow = React.useMemo(() => <>
// {props.onLiveFileCreate && (