Enhance NoteItem component with new props for body and footer visibility
- Added showBody and showFooter props to the NoteItem component to control the rendering of the note's content and footer elements. - Refactored the component structure to conditionally display the body and footer based on the new props, improving flexibility in note presentation.
This commit is contained in:
parent
6471434d81
commit
03cd3db1c7
@ -36,6 +36,8 @@ const NoteItem = ({
|
|||||||
showChildNotes = true,
|
showChildNotes = true,
|
||||||
showActions = true,
|
showActions = true,
|
||||||
showInfo = true,
|
showInfo = true,
|
||||||
|
showBody = true,
|
||||||
|
showFooter = true,
|
||||||
largeSpacing = false
|
largeSpacing = false
|
||||||
}) => {
|
}) => {
|
||||||
const [childNotes, setChildNotes] = useState([])
|
const [childNotes, setChildNotes] = useState([])
|
||||||
@ -162,16 +164,21 @@ const NoteItem = ({
|
|||||||
const noteItem = (
|
const noteItem = (
|
||||||
<>
|
<>
|
||||||
<Flex vertical gap={'small'}>
|
<Flex vertical gap={'small'}>
|
||||||
|
{showBody && (
|
||||||
<Flex gap={'middle'} align='start' style={{ marginBottom: '4px' }}>
|
<Flex gap={'middle'} align='start' style={{ marginBottom: '4px' }}>
|
||||||
<Space>
|
<Space>
|
||||||
<PersonIcon />
|
<PersonIcon />
|
||||||
<Text style={{ whiteSpace: 'nowrap' }}>{note.user.name}:</Text>
|
<Text style={{ whiteSpace: 'nowrap' }}>{note.user.name}:</Text>
|
||||||
</Space>
|
</Space>
|
||||||
<div style={{ marginTop: '1px' }}>
|
<div style={{ marginTop: '4px' }}>
|
||||||
<MarkdownDisplay content={note.content} />
|
<MarkdownDisplay content={note.content} />
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
)}
|
||||||
|
{showFooter && showBody && (
|
||||||
<Divider style={{ margin: largeSpacing ? '10px 0' : 0 }} />
|
<Divider style={{ margin: largeSpacing ? '10px 0' : 0 }} />
|
||||||
|
)}
|
||||||
|
{showFooter && (
|
||||||
<Flex wrap gap={'small'}>
|
<Flex wrap gap={'small'}>
|
||||||
{showActions && (
|
{showActions && (
|
||||||
<>
|
<>
|
||||||
@ -246,6 +253,7 @@ const NoteItem = ({
|
|||||||
</Space>
|
</Space>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
)}
|
||||||
{isExpanded && (
|
{isExpanded && (
|
||||||
<Flex vertical gap={'small'} style={{ flexGrow: 1 }}>
|
<Flex vertical gap={'small'} style={{ flexGrow: 1 }}>
|
||||||
{childNotes.length > 0 ? (
|
{childNotes.length > 0 ? (
|
||||||
@ -342,7 +350,9 @@ NoteItem.propTypes = {
|
|||||||
showChildNotes: PropTypes.bool,
|
showChildNotes: PropTypes.bool,
|
||||||
showActions: PropTypes.bool,
|
showActions: PropTypes.bool,
|
||||||
largeSpacing: PropTypes.bool,
|
largeSpacing: PropTypes.bool,
|
||||||
showInfo: PropTypes.bool
|
showInfo: PropTypes.bool,
|
||||||
|
showBody: PropTypes.bool,
|
||||||
|
showFooter: PropTypes.bool
|
||||||
}
|
}
|
||||||
|
|
||||||
export default NoteItem
|
export default NoteItem
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user