diff --git a/src/components/SceneLayers/Nodes/Node/LabelContainer/ExpandButton.tsx b/src/components/SceneLayers/Nodes/Node/LabelContainer/ExpandButton.tsx new file mode 100644 index 0000000..77e3683 --- /dev/null +++ b/src/components/SceneLayers/Nodes/Node/LabelContainer/ExpandButton.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Button as MuiButton } from '@mui/material'; +import { + ExpandMore as ReadMoreIcon, + ExpandLess as ReadLessIcon +} from '@mui/icons-material'; + +interface Props { + isExpanded: boolean; + onClick: () => void; +} + +export const ExpandButton = ({ isExpanded, onClick }: Props) => { + return ( + + {isExpanded ? ( + + ) : ( + + )} + + ); +}; diff --git a/src/components/SceneLayers/Nodes/Node/LabelContainer.tsx b/src/components/SceneLayers/Nodes/Node/LabelContainer/LabelContainer.tsx similarity index 68% rename from src/components/SceneLayers/Nodes/Node/LabelContainer.tsx rename to src/components/SceneLayers/Nodes/Node/LabelContainer/LabelContainer.tsx index 447d0d6..77dceab 100644 --- a/src/components/SceneLayers/Nodes/Node/LabelContainer.tsx +++ b/src/components/SceneLayers/Nodes/Node/LabelContainer/LabelContainer.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useRef, useMemo, useState } from 'react'; -import { Box, Button } from '@mui/material'; -import { MoreHoriz as ReadMoreIcon } from '@mui/icons-material'; +import { Box } from '@mui/material'; import { useResizeObserver } from 'src/hooks/useResizeObserver'; import { PROJECTED_TILE_SIZE } from 'src/config'; import { Gradient } from 'src/components/Gradient/Gradient'; +import { ExpandButton } from './ExpandButton'; const STANDARD_LABEL_HEIGHT = 80; const EXPANDED_LABEL_HEIGHT = 200; @@ -40,6 +40,10 @@ export const LabelContainer = ({ return !isExpanded && contentSize.height >= STANDARD_LABEL_HEIGHT - 10; }, [isExpanded, contentSize.height]); + useEffect(() => { + contentRef.current?.scrollTo({ top: 0 }); + }, [isExpanded]); + return ( + - {children} - {isContentTruncated && ( - - - - - + + + )} + + + {isContentTruncated && ( + { + setIsExpanded(true); + }} + /> + )} + {isExpanded && ( + { + setIsExpanded(false); + }} + /> )} diff --git a/src/components/SceneLayers/Nodes/Node/Node.tsx b/src/components/SceneLayers/Nodes/Node/Node.tsx index 80b5cc2..d6490b5 100644 --- a/src/components/SceneLayers/Nodes/Node/Node.tsx +++ b/src/components/SceneLayers/Nodes/Node/Node.tsx @@ -5,7 +5,7 @@ import { PROJECTED_TILE_SIZE } from 'src/config'; import { getTilePosition } from 'src/utils'; import { useIcon } from 'src/hooks/useIcon'; import { MarkdownEditor } from 'src/components/MarkdownEditor/MarkdownEditor'; -import { LabelContainer } from './LabelContainer'; +import { LabelContainer } from './LabelContainer/LabelContainer'; interface Props { node: NodeI;