attachment.tsx
TLDR
This file contains a React component called AttachmentList
that displays a list of attachments. It also includes some utility functions and imports other components and styles.
Classes
AttachmentList
This class is a React component that renders a list of attachments. It receives the following props:
-
attachments
(type:AttachmentBlock[]
): An array of attachment blocks to be displayed. -
onDelete
(type:(block: Block) => void
): A function that is called when an attachment is deleted. -
addAttachment
(type:() => void
): A function that is called when a new attachment is added.
The component renders an outer container div with the class Attachment
, containing a header and a content section. The header displays the number of attachments and includes a button to add a new attachment if the user has the ManageBoardCards
permission. The content section maps over the attachments array and renders an AttachmentElement
component for each attachment.
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {useIntl} from 'react-intl'
import AttachmentElement from '../../components/content/attachmentElement'
import {AttachmentBlock} from '../../blocks/attachmentBlock'
import './attachment.scss'
import {Block} from '../../blocks/block'
import CompassIcon from '../../widgets/icons/compassIcon'
import BoardPermissionGate from '../../components/permissions/boardPermissionGate'
import {Permission} from '../../constants'
type Props = {
attachments: AttachmentBlock[]
onDelete: (block: Block) => void
addAttachment: () => void
}
const AttachmentList = (props: Props): JSX.Element => {
const {attachments, onDelete, addAttachment} = props
const intl = useIntl()
return (
<div className='Attachment'>
<div className='attachment-header'>
<div className='attachment-title mb-2'>{intl.formatMessage({id: 'Attachment.Attachment-title', defaultMessage: 'Attachment'})} {`(${attachments.length})`}</div>
<BoardPermissionGate permissions={[Permission.ManageBoardCards]}>
<div
className='attachment-plus-btn'
onClick={addAttachment}
>
<CompassIcon
icon='plus'
className='attachment-plus-icon'
/>
</div>
</BoardPermissionGate>
</div>
<div className='attachment-content'>
{attachments.map((block: AttachmentBlock) => {
return (
<div key={block.id}>
<AttachmentElement
block={block}
onDelete={onDelete}
/>
</div>)
})
}
</div>
</div>
)
}
export default AttachmentList