Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Files] Simplify image component implementation and usage #145347

Merged
merged 8 commits into from
Nov 18, 2022
Merged

[Files] Simplify image component implementation and usage #145347

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8fa55f6
Simplify image component implementation and usage
Dosant Nov 16, 2022
6897185
stretch the blurred image to the original size
Dosant Nov 16, 2022
85f99fe
update tests
Dosant Nov 16, 2022
351c5cc
remove not needed css
Dosant Nov 16, 2022
a7cb59d
improvements
Dosant Nov 17, 2022
0a5339e
Merge branch 'main' into d/2022-11-16-image-component-improve
kibanamachine Nov 17, 2022
7b3ae18
Merge branch 'main' into d/2022-11-16-image-component-improve
kibanamachine Nov 17, 2022
6e5c2b1
Merge branch 'main' into d/2022-11-16-image-component-improve
kibanamachine Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/plugins/files/public/components/file_picker/components/file_card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export const FileCard: FunctionComponent<Props> = ({ file }) => {
`}
meta={file.meta as FileImageMetadata}
src={client.getDownloadHref({ id: file.id, fileKind: kind })}
loading={'lazy'}
/>
) : (
<div
Expand Down
64 changes: 0 additions & 64 deletions src/plugins/files/public/components/image/components/blurhash.tsx
View file
Open in desktop

This file was deleted.

61 changes: 0 additions & 61 deletions src/plugins/files/public/components/image/components/img.tsx
View file
Open in desktop

This file was deleted.

11 changes: 0 additions & 11 deletions src/plugins/files/public/components/image/components/index.ts
View file
Open in desktop

This file was deleted.

58 changes: 34 additions & 24 deletions src/plugins/files/public/components/image/image.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,11 @@

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { css } from '@emotion/react';

import { FilesContext } from '../context';
import { getImageMetadata } from '../util';
import { Image, Props } from './image';
import { getImageData as getBlob, base64dLogo } from './image.constants.stories';
import { FilesClient } from '../../types';

const defaultArgs: Props = { alt: 'test', src: `data:image/png;base64,${base64dLogo}` };

Expand All @@ -24,41 +21,38 @@ export default {
component: Image,
args: defaultArgs,
decorators: [
(Story) => (
<FilesContext client={{} as unknown as FilesClient}>
<Story />
</FilesContext>
),
(Story) => {
React.useLayoutEffect(() => {
// @ts-ignore
window.__image_stories_simulate_slow_load = true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice hack 😄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally adding hack code into production for stories/tests should be avoided, but I see why you have done it in this case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree that such hacks must be avoided.
I thought of also using process.env.NODE_ENV !== 'production but looks like env is production is storybook :(

return () => {
// @ts-ignore
window.__image_stories_simulate_slow_load = false;
};
}, []);

return (
<>
<Story />
</>
);
},
],
} as ComponentMeta<typeof Image>;

const Template: ComponentStory<typeof Image> = (props: Props, { loaded: { meta } }) => (
<Image size="original" {...props} meta={meta} ref={action('ref')} />
<Image {...props} meta={meta} />
);

export const Basic = Template.bind({});

export const WithBlurhash = Template.bind({});
WithBlurhash.storyName = 'With blurhash';
WithBlurhash.args = {
style: { visibility: 'hidden' },
};
WithBlurhash.loaders = [
async () => ({
meta: await getImageMetadata(getBlob()),
}),
];
WithBlurhash.decorators = [
(Story) => {
const alwaysShowBlurhash = `img:nth-of-type(1) { opacity: 1 !important; }`;
return (
<>
<style>{alwaysShowBlurhash}</style>
<Story />
</>
);
},
];

export const BrokenSrc = Template.bind({});
BrokenSrc.storyName = 'Broken src';
Expand All @@ -71,15 +65,31 @@ WithBlurhashAndBrokenSrc.storyName = 'With blurhash and broken src';
WithBlurhashAndBrokenSrc.args = {
src: 'foo',
};

WithBlurhashAndBrokenSrc.loaders = [
async () => ({
blurhash: await getImageMetadata(getBlob()),
}),
];

export const WithCustomSizing = Template.bind({});
WithCustomSizing.storyName = 'With custom sizing';
WithCustomSizing.loaders = [
async () => ({
meta: await getImageMetadata(getBlob()),
}),
];
WithCustomSizing.args = {
css: `width: 100px; height: 500px; object-fit: fill`,
};

export const OffScreen = Template.bind({});
OffScreen.storyName = 'Offscreen';
OffScreen.args = { onFirstVisible: action('visible') };
OffScreen.args = {
/* demonstrates how to make image lazy load */
/* @note: the demo doesn't really work with the base64 encoded src */
loading: 'lazy',
};
OffScreen.decorators = [
(Story) => (
<>
Expand Down
Loading