diff --git a/ts/components/conversation/media-gallery/AttachmentSection.tsx b/ts/components/conversation/media-gallery/AttachmentSection.tsx index ef515293a..521c92911 100644 --- a/ts/components/conversation/media-gallery/AttachmentSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentSection.tsx @@ -49,7 +49,7 @@ export class AttachmentSection extends React.Component { const { i18n, messages, type } = this.props; return messages.map((message, index, array) => { - const isLast = index === array.length - 1; + const shouldShowSeparator = index < array.length - 1; const { attachments } = message; const firstAttachment = attachments[0]; @@ -70,7 +70,7 @@ export class AttachmentSection extends React.Component { fileName={firstAttachment.fileName} fileSize={firstAttachment.size} i18n={i18n} - isLast={isLast} + shouldShowSeparator={shouldShowSeparator} onClick={onClick} timestamp={message.received_at} /> diff --git a/ts/components/conversation/media-gallery/DocumentListItem.md b/ts/components/conversation/media-gallery/DocumentListItem.md index 94ce5e06a..9be4c2471 100644 --- a/ts/components/conversation/media-gallery/DocumentListItem.md +++ b/ts/components/conversation/media-gallery/DocumentListItem.md @@ -15,5 +15,6 @@ DocumentListItem example: fileName="kitten.gif" fileSize={1024 * 1000 * 1.2} timestamp={Date.now() - 14 * 24 * 60 * 1000} + shouldShowSeparator={false} /> ``` diff --git a/ts/components/conversation/media-gallery/DocumentListItem.tsx b/ts/components/conversation/media-gallery/DocumentListItem.tsx index f73809af2..3c75e2a50 100644 --- a/ts/components/conversation/media-gallery/DocumentListItem.tsx +++ b/ts/components/conversation/media-gallery/DocumentListItem.tsx @@ -4,12 +4,15 @@ import moment from 'moment'; import formatFileSize from 'filesize'; interface Props { + // Required + i18n: (key: string, values?: Array) => string; + timestamp: number; + + // Optional fileName?: string | null; fileSize?: number; - i18n: (key: string, values?: Array) => string; - isLast: boolean; onClick?: () => void; - timestamp: number; + shouldShowSeparator?: boolean; } const styles = { @@ -56,7 +59,25 @@ const styles = { }; export class DocumentListItem extends React.Component { - public renderContent() { + public static defaultProps: Partial = { + shouldShowSeparator: true, + }; + + public render() { + const { shouldShowSeparator } = this.props; + return ( +
+ {this.renderContent()} +
+ ); + } + + private renderContent() { const { fileName, fileSize, timestamp } = this.props; return ( @@ -79,18 +100,4 @@ export class DocumentListItem extends React.Component { ); } - - public render() { - const { isLast } = this.props; - return ( -
- {this.renderContent()} -
- ); - } }