IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

migrate post_image.tsx to function component (#26395)

Browse Source
This commit is contained in:
Andrea 2024-03-25 10:00:27 +01:00 committed by GitHub
parent 1021e51270
commit ba2d11ff3d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 51 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
webapp/channels/src/components/post_view/post_image/post_image.tsx
View File

@ -1,10 +1,13 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React, {useCallback} from 'react';
import type {KeyboardEvent, MouseEvent} from 'react'; import type {KeyboardEvent, MouseEvent} from 'react';
import type {Post, PostImage as PostImageMetadata} from '@mattermost/types/posts'; import type {
Post,
PostImage as PostImageMetadata,
} from '@mattermost/types/posts';
import ExternalImage from 'components/external_image'; import ExternalImage from 'components/external_image';
import FilePreviewModal from 'components/file_preview_modal'; import FilePreviewModal from 'components/file_preview_modal';
@ -14,7 +17,7 @@ import {ModalIdentifiers} from 'utils/constants';
import type {ModalData} from 'types/actions'; import type {ModalData} from 'types/actions';
interface Props { type PostImageProps = {
imageMetadata: PostImageMetadata; imageMetadata: PostImageMetadata;
link: string; link: string;
post: Post; post: Post;
@ -23,46 +26,57 @@ interface Props {
}; };
} }
export default class PostImage extends React.PureComponent<Props> { const PostImage = ({
showModal = (e: (KeyboardEvent<HTMLImageElement> | MouseEvent<HTMLElement>), link = '') => { imageMetadata,
link,
post,
actions,
}: PostImageProps) => {
const {openModal} = actions;
const showModal = useCallback((
e: KeyboardEvent<HTMLImageElement> | MouseEvent<HTMLElement>,
link = '',
) => {
e.preventDefault(); e.preventDefault();
this.props.actions.openModal({ openModal({
modalId: ModalIdentifiers.FILE_PREVIEW_MODAL, modalId: ModalIdentifiers.FILE_PREVIEW_MODAL,
dialogType: FilePreviewModal, dialogType: FilePreviewModal,
dialogProps: { dialogProps: {
post: this.props.post, post,
startIndex: 0, startIndex: 0,
fileInfos: [{ fileInfos: [
has_preview_image: false, {
link, has_preview_image: false,
extension: this.props.imageMetadata.format, link,
name: this.props.link, extension: imageMetadata.format,
}], name: link,
},
],
}, },
}); });
}; }, [openModal, imageMetadata.format, post]);
render() { return (
return ( <div className='post__embed-container'>
<div className='post__embed-container'> <ExternalImage
<ExternalImage src={link}
src={this.props.link} imageMetadata={imageMetadata}
imageMetadata={this.props.imageMetadata} >
> {(safeLink) => (
{(safeLink) => ( <React.Fragment>
<React.Fragment> <SizeAwareImage
<SizeAwareImage className='img-div attachment__image cursor--pointer'
className='img-div attachment__image cursor--pointer' src={safeLink}
src={safeLink} dimensions={imageMetadata}
dimensions={this.props.imageMetadata} showLoader={true}
showLoader={true} onClick={showModal}
onClick={this.showModal} />
/> </React.Fragment>
</React.Fragment> )}
)} </ExternalImage>
</ExternalImage> </div>
</div> );
); };
}
} export default PostImage;