refactored right panel to hook
Audric Ackermann
4 years ago
parent
4ca5a4f093
commit
511adcf388
@ -1,67 +1,66 @@
|
||||
import React from 'react';
|
||||
|
||||
import { DocumentListItem } from './DocumentListItem';
|
||||
import { ItemClickEvent } from './types/ItemClickEvent';
|
||||
import { MediaGridItem } from './MediaGridItem';
|
||||
import { MediaItemType } from '../../LightboxGallery';
|
||||
import { missingCaseError } from '../../../util/missingCaseError';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getSelectedConversationKey } from '../../../state/selectors/conversations';
|
||||
|
||||
interface Props {
|
||||
type Props = {
|
||||
type: 'media' | 'documents';
|
||||
mediaItems: Array<MediaItemType>;
|
||||
onItemClick?: (event: ItemClickEvent) => void;
|
||||
}
|
||||
};
|
||||
|
||||
export class AttachmentSection extends React.Component<Props> {
|
||||
public render() {
|
||||
const { type } = this.props;
|
||||
const Items = (props: Props): JSX.Element => {
|
||||
const { mediaItems, type } = props;
|
||||
const selectedConversationKey = useSelector(getSelectedConversationKey);
|
||||
|
||||
return (
|
||||
<div className="module-attachment-section">
|
||||
<div className="module-attachment-section__items">
|
||||
<div className={`module-attachment-section__items-${type}`}>{this.renderItems()}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderItems() {
|
||||
const { mediaItems, type } = this.props;
|
||||
|
||||
return mediaItems.map((mediaItem, position, array) => {
|
||||
const shouldShowSeparator = position < array.length - 1;
|
||||
const { index, attachment, messageTimestamp, messageId } = mediaItem;
|
||||
return (
|
||||
<>
|
||||
{mediaItems.map((mediaItem, position, array) => {
|
||||
const shouldShowSeparator = position < array.length - 1;
|
||||
const { index, attachment, messageTimestamp, messageId } = mediaItem;
|
||||
|
||||
const onClick = this.createClickHandler(mediaItem);
|
||||
switch (type) {
|
||||
case 'media':
|
||||
return (
|
||||
<MediaGridItem key={`${messageId}-${index}`} mediaItem={mediaItem} onClick={onClick} />
|
||||
);
|
||||
case 'documents':
|
||||
return (
|
||||
<DocumentListItem
|
||||
key={`${messageId}-${index}`}
|
||||
fileName={attachment.fileName}
|
||||
fileSize={attachment.size}
|
||||
shouldShowSeparator={shouldShowSeparator}
|
||||
onClick={onClick}
|
||||
timestamp={messageTimestamp}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return missingCaseError(type);
|
||||
}
|
||||
});
|
||||
}
|
||||
switch (type) {
|
||||
case 'media':
|
||||
return (
|
||||
<MediaGridItem
|
||||
key={`${messageId}-${index}`}
|
||||
mediaItem={mediaItem}
|
||||
mediaItems={mediaItems}
|
||||
/>
|
||||
);
|
||||
case 'documents':
|
||||
return (
|
||||
<DocumentListItem
|
||||
key={`${messageId}-${index}`}
|
||||
fileName={attachment.fileName}
|
||||
fileSize={attachment.size}
|
||||
shouldShowSeparator={shouldShowSeparator}
|
||||
timestamp={messageTimestamp}
|
||||
mediaItem={mediaItem}
|
||||
conversationId={selectedConversationKey as string}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return missingCaseError(type);
|
||||
}
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
private readonly createClickHandler = (mediaItem: MediaItemType) => () => {
|
||||
const { onItemClick, type } = this.props;
|
||||
export const AttachmentSection = (props: Props) => {
|
||||
const { type } = props;
|
||||
|
||||
if (!onItemClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
onItemClick({ mediaItem, type });
|
||||
};
|
||||
}
|
||||
return (
|
||||
<div className="module-attachment-section">
|
||||
<div className="module-attachment-section__items">
|
||||
<div className={`module-attachment-section__items-${type}`}>
|
||||
<Items {...props} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import { MediaItemType } from '../../../LightboxGallery';
|
||||
|
||||
export interface ItemClickEvent {
|
||||
mediaItem: MediaItemType;
|
||||
type: 'media' | 'documents';
|
||||
}
|
||||
Loading…
Reference in New Issue