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

[MM-56298] Convert ./components/file_attachment/file_thumbnail/file_thumbnail.tsx from Class Component to Function Component (#25761)

Browse Source 
* [MM-56298] Convert `./components/file_attachment/file_thumbnail/file_thumbnail.tsx` from Class Component to Function Component

* refactor: implement code review changes
This commit is contained in:
Syed Ali Abbas Zaidi
2023-12-21 15:13:08 +05:00
committed by GitHub
parent ab6e206a51
commit cac50f593b
3 changed files with 46 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
View File

@@ -10,7 +10,7 @@ exports[`FileAttachment should match snapshot, after change from file to image 1
href="#"
onClick={[Function]}
>
<Connect(FileThumbnail)
<Connect(Component)
fileInfo={
Object {
"archived": false,
@@ -99,7 +99,7 @@ exports[`FileAttachment should match snapshot, regular file 1`] = `
href="#"
onClick={[Function]}
>
<Connect(FileThumbnail)
<Connect(Component)
fileInfo={
Object {
"archived": false,
@@ -332,7 +332,7 @@ exports[`FileAttachment should match snapshot, svg image 1`] = `
href="#"
onClick={[Function]}
>
<Connect(FileThumbnail)
<Connect(Component)
fileInfo={
Object {
"archived": false,
@@ -532,7 +532,7 @@ exports[`FileAttachment should match snapshot, without compact display and witho
href="#"
onClick={[Function]}
>
<Connect(FileThumbnail)
<Connect(Component)
fileInfo={
Object {
"archived": false,

77
webapp/channels/src/components/file_attachment/file_thumbnail/file_thumbnail.tsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import React, {memo} from 'react';
import type {FileInfo} from '@mattermost/types/files';
@@ -19,47 +19,46 @@ type Props = {
fileInfo: FileInfo;
}
export default class FileThumbnail extends React.PureComponent<Props> {
render() {
const {fileInfo} = this.props;
const type = getFileType(fileInfo.extension);
const FileThumbnail = ({
fileInfo,
enableSVGs,
}: Props) => {
const type = getFileType(fileInfo.extension);
let thumbnail;
if (type === FileTypes.IMAGE) {
let className = 'post-image';
if (type === FileTypes.IMAGE) {
let className = 'post-image';
if (fileInfo.width < Constants.THUMBNAIL_WIDTH && fileInfo.height < Constants.THUMBNAIL_HEIGHT) {
className += ' small';
} else {
className += ' normal';
}
let thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
if (isGIFImage(fileInfo.extension) && !fileInfo.has_preview_image) {
thumbnailUrl = getFileUrl(fileInfo.id);
}
return (
<div
className={className}
style={{
backgroundImage: `url(${thumbnailUrl})`,
backgroundSize: 'cover',
}}
/>
);
} else if (fileInfo.extension === FileTypes.SVG && this.props.enableSVGs) {
thumbnail = (
<img
alt={'file thumbnail image'}
className='post-image normal'
src={getFileUrl(fileInfo.id)}
/>
);
if (fileInfo.width < Constants.THUMBNAIL_WIDTH && fileInfo.height < Constants.THUMBNAIL_HEIGHT) {
className += ' small';
} else {
thumbnail = <div className={'file-icon ' + getIconClassName(type)}/>;
className += ' normal';
}
return thumbnail;
let thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
if (isGIFImage(fileInfo.extension) && !fileInfo.has_preview_image) {
thumbnailUrl = getFileUrl(fileInfo.id);
}
return (
<div
className={className}
style={{
backgroundImage: `url(${thumbnailUrl})`,
backgroundSize: 'cover',
}}
/>
);
} else if (fileInfo.extension === FileTypes.SVG && enableSVGs) {
return (
<img
alt={'file thumbnail image'}
className='post-image normal'
src={getFileUrl(fileInfo.id)}
/>
);
}
}
return <div className={'file-icon ' + getIconClassName(type)}/>;
};
export default memo(FileThumbnail);

8
webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap
View File

@@ -9,7 +9,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
className="FileSearchResultItem"
onClick={[Function]}
>
<Connect(FileThumbnail)
<Connect(Component)
fileInfo={
Object {
"archived": false,
@@ -167,7 +167,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
className="FileSearchResultItem"
onClick={[Function]}
>
<Connect(FileThumbnail)
<Connect(Component)
fileInfo={
Object {
"archived": false,
@@ -334,7 +334,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
className="FileSearchResultItem"
onClick={[Function]}
>
<Connect(FileThumbnail)
<Connect(Component)
fileInfo={
Object {
"archived": false,
@@ -501,7 +501,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
className="FileSearchResultItem"
onClick={[Function]}
>
<Connect(FileThumbnail)
<Connect(Component)
fileInfo={
Object {
"archived": false,