forked from mattermost/mattermost
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MM-54819] Convert ./components/external_image/external_image.tsx fro…
…m Class Component to Function Component (mattermost#24941)
- Loading branch information
1 parent
7480fcf
commit af8c9ae
Showing
8 changed files
with
140 additions
and
144 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 13 additions & 27 deletions
40
webapp/channels/src/components/external_image/external_image.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,29 @@ | ||
| // 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 {PostImage} from '@mattermost/types/posts'; | ||
|
|
||
| import {getImageSrc} from 'utils/post_utils'; | ||
|
|
||
| interface Props { | ||
| import {isSVGImage} from './is_svg_image'; | ||
|
|
||
| type Props = { | ||
| children: (src: string) => React.ReactNode; | ||
| enableSVGs: boolean; | ||
| hasImageProxy: boolean; | ||
| imageMetadata?: PostImage; | ||
| src: string; | ||
| } | ||
|
|
||
| export default class ExternalImage extends React.PureComponent<Props> { | ||
| isSVGImage = () => { | ||
| if (!this.props.imageMetadata) { | ||
| // Just check if the string contains an svg extension instead of if it ends with one because it avoids | ||
| // having to deal with query strings and proxied image URLs | ||
| return this.props.src.indexOf('.svg') !== -1; | ||
| } | ||
|
|
||
| return this.props.imageMetadata.format === 'svg'; | ||
| }; | ||
|
|
||
| shouldRenderImage = () => { | ||
| // Return true unless the image is an SVG and we have SVG rendering disabled | ||
| return this.props.enableSVGs || !this.isSVGImage(); | ||
| }; | ||
|
|
||
| render() { | ||
| let src = getImageSrc(this.props.src, this.props.hasImageProxy); | ||
|
|
||
| if (!this.shouldRenderImage()) { | ||
| src = ''; | ||
| } | ||
|
|
||
| return this.props.children(src); | ||
| const ExternalImage = (props: Props) => { | ||
| const shouldRenderImage = props.enableSVGs || !isSVGImage(props.imageMetadata, props.src); | ||
| let src = getImageSrc(props.src, props.hasImageProxy); | ||
| if (!shouldRenderImage) { | ||
| src = ''; | ||
| } | ||
| } | ||
| return (<>{props.children(src)}</>); | ||
| }; | ||
|
|
||
| export default memo(ExternalImage); |
73 changes: 73 additions & 0 deletions
73
webapp/channels/src/components/external_image/is_svg_image.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
| // See LICENSE.txt for license information. | ||
|
|
||
| import {isSVGImage} from './is_svg_image'; | ||
|
|
||
| describe('ExternalIImage isSVGImage', () => { | ||
| for (const testCase of [ | ||
| { | ||
| name: 'no metadata, no extension', | ||
| src: 'https://example.com/image.png', | ||
| imageMetadata: undefined, | ||
| expected: false, | ||
| }, | ||
| { | ||
| name: 'no metadata, svg extension', | ||
| src: 'https://example.com/image.svg', | ||
| imageMetadata: undefined, | ||
| expected: true, | ||
| }, | ||
| { | ||
| name: 'no metadata, svg extension with query parameter', | ||
| src: 'https://example.com/image.svg?a=1', | ||
| imageMetadata: undefined, | ||
| expected: true, | ||
| }, | ||
| { | ||
| name: 'no metadata, svg extension with hash', | ||
| src: 'https://example.com/image.svg#abc', | ||
| imageMetadata: undefined, | ||
| expected: true, | ||
| }, | ||
| { | ||
| name: 'no metadata, proxied image', | ||
| src: 'https://mattermost.example.com/api/v4/image?url=' + encodeURIComponent('https://example.com/image.png'), | ||
| imageMetadata: undefined, | ||
| expected: false, | ||
| }, | ||
| { | ||
| name: 'no metadata, proxied svg image', | ||
| src: 'https://mattermost.example.com/api/v4/image?url=' + encodeURIComponent('https://example.com/image.svg'), | ||
| imageMetadata: undefined, | ||
| expected: true, | ||
| }, | ||
| { | ||
| name: 'with metadata, not an SVG', | ||
| src: 'https://example.com/image.png', | ||
| imageMetadata: { | ||
| format: 'png', | ||
| frameCount: 40, | ||
| width: 100, | ||
| height: 200, | ||
| }, | ||
| expected: false, | ||
| }, | ||
| { | ||
| name: 'with metadata, SVG', | ||
| src: 'https://example.com/image.svg', | ||
| imageMetadata: { | ||
| format: 'svg', | ||
| frameCount: 30, | ||
| width: 10, | ||
| height: 20, | ||
| }, | ||
| expected: true, | ||
| }, | ||
| ]) { | ||
| test(testCase.name, () => { | ||
| const {imageMetadata, src} = testCase; | ||
|
|
||
| expect(isSVGImage(imageMetadata, src)).toBe(testCase.expected); | ||
| }); | ||
| } | ||
| }); |
13 changes: 13 additions & 0 deletions
13
webapp/channels/src/components/external_image/is_svg_image.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
| // See LICENSE.txt for license information. | ||
|
|
||
| import type {PostImage} from '@mattermost/types/posts'; | ||
|
|
||
| export const isSVGImage = (imageMetadata: PostImage | undefined, src: string) => { | ||
| if (!imageMetadata) { | ||
| // Just check if the string contains an svg extension instead of if it ends with one because it avoids | ||
| // having to deal with query strings and proxied image URLs | ||
| return src.indexOf('.svg') !== -1; | ||
| } | ||
| return imageMetadata.format === 'svg'; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.