Rename DocumentListItem::isLast
to shouldShowSeparator
This commit is contained in:
parent
05f67dc04a
commit
a8cd0b782e
3 changed files with 28 additions and 20 deletions
|
@ -49,7 +49,7 @@ export class AttachmentSection extends React.Component<Props, {}> {
|
||||||
const { i18n, messages, type } = this.props;
|
const { i18n, messages, type } = this.props;
|
||||||
|
|
||||||
return messages.map((message, index, array) => {
|
return messages.map((message, index, array) => {
|
||||||
const isLast = index === array.length - 1;
|
const shouldShowSeparator = index < array.length - 1;
|
||||||
const { attachments } = message;
|
const { attachments } = message;
|
||||||
const firstAttachment = attachments[0];
|
const firstAttachment = attachments[0];
|
||||||
|
|
||||||
|
@ -70,7 +70,7 @@ export class AttachmentSection extends React.Component<Props, {}> {
|
||||||
fileName={firstAttachment.fileName}
|
fileName={firstAttachment.fileName}
|
||||||
fileSize={firstAttachment.size}
|
fileSize={firstAttachment.size}
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
isLast={isLast}
|
shouldShowSeparator={shouldShowSeparator}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
timestamp={message.received_at}
|
timestamp={message.received_at}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -15,5 +15,6 @@ DocumentListItem example:
|
||||||
fileName="kitten.gif"
|
fileName="kitten.gif"
|
||||||
fileSize={1024 * 1000 * 1.2}
|
fileSize={1024 * 1000 * 1.2}
|
||||||
timestamp={Date.now() - 14 * 24 * 60 * 1000}
|
timestamp={Date.now() - 14 * 24 * 60 * 1000}
|
||||||
|
shouldShowSeparator={false}
|
||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
|
@ -4,12 +4,15 @@ import moment from 'moment';
|
||||||
import formatFileSize from 'filesize';
|
import formatFileSize from 'filesize';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
// Required
|
||||||
|
i18n: (key: string, values?: Array<string>) => string;
|
||||||
|
timestamp: number;
|
||||||
|
|
||||||
|
// Optional
|
||||||
fileName?: string | null;
|
fileName?: string | null;
|
||||||
fileSize?: number;
|
fileSize?: number;
|
||||||
i18n: (key: string, values?: Array<string>) => string;
|
|
||||||
isLast: boolean;
|
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
timestamp: number;
|
shouldShowSeparator?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
|
@ -56,7 +59,25 @@ const styles = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export class DocumentListItem extends React.Component<Props, {}> {
|
export class DocumentListItem extends React.Component<Props, {}> {
|
||||||
public renderContent() {
|
public static defaultProps: Partial<Props> = {
|
||||||
|
shouldShowSeparator: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const { shouldShowSeparator } = this.props;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...styles.container,
|
||||||
|
...(shouldShowSeparator ? styles.containerSeparator : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{this.renderContent()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderContent() {
|
||||||
const { fileName, fileSize, timestamp } = this.props;
|
const { fileName, fileSize, timestamp } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -79,18 +100,4 @@ export class DocumentListItem extends React.Component<Props, {}> {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public render() {
|
|
||||||
const { isLast } = this.props;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
...styles.container,
|
|
||||||
...(isLast ? {} : styles.containerSeparator),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{this.renderContent()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue