mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Migrate ImageGrid to Storybook

Browse source
This commit is contained in:
Chris Svenningsen 2020-08-26 11:32:24 -07:00 • committed by Josh Perez
parent 5aac427017
commit 58844f92ab
4 changed files with 324 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

409
ts/components/conversation/ImageGrid.md
View file

@ -1,409 +0,0 @@
### One image
```jsx
const attachments = [
{
url: util.gifObjectUrl,
contentType: 'image/gif',
width: 320,
height: 240,
},
];
<div>
<div>
<ImageGrid attachments={attachments} i18n={util.i18n} />
</div>
<hr />
<div>
<ImageGrid
withContentAbove
withContentBelow
attachments={attachments}
i18n={util.i18n}
/>
</div>
</div>;
```
### One image, various aspect ratios
```jsx
<div>
<ImageGrid
attachments={[
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 800,
height: 1200,
},
]}
i18n={util.i18n}
/>
<hr />
<ImageGrid
attachments={[
{
url: util.gifObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
]}
i18n={util.i18n}
/>
<hr />
<ImageGrid
attachments={[
{
url: util.landscapeObjectUrl,
contentType: 'image/png',
width: 4496,
height: 3000,
},
]}
i18n={util.i18n}
/>
<hr />
<ImageGrid
attachments={[
{
url: util.landscapeGreenObjectUrl,
contentType: 'image/png',
width: 1000,
height: 50,
},
]}
i18n={util.i18n}
/>
<hr />
<ImageGrid
attachments={[
{
url: util.landscapePurpleObjectUrl,
contentType: 'image/png',
width: 200,
height: 50,
},
]}
i18n={util.i18n}
/>
<hr />
<ImageGrid
attachments={[
{
url: util.portraitYellowObjectUrl,
contentType: 'image/png',
width: 20,
height: 200,
},
]}
i18n={util.i18n}
/>
<hr />
<ImageGrid
attachments={[
{
url: util.landscapeRedObjectUrl,
contentType: 'image/png',
width: 300,
height: 1,
},
]}
i18n={util.i18n}
/>
<hr />
<ImageGrid
attachments={[
{
url: util.portraitTealObjectUrl,
contentType: 'image/png',
width: 50,
height: 1000,
},
]}
i18n={util.i18n}
/>
</div>
```
### Two images
```jsx
const attachments = [
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
];
<div>
<div>
<ImageGrid attachments={attachments} i18n={util.i18n} />
</div>
<hr />
<div>
<ImageGrid
withContentAbove
withContentBelow
attachments={attachments}
i18n={util.i18n}
/>
</div>
</div>;
```
### Three images
```jsx
const attachments = [
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
];
<div>
<div>
<ImageGrid attachments={attachments} i18n={util.i18n} />
</div>
<hr />
<div>
<ImageGrid
withContentAbove
withContentBelow
attachments={attachments}
i18n={util.i18n}
/>
</div>
</div>;
```
### Four images
```jsx
const attachments = [
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
];
<div>
<div>
<ImageGrid attachments={attachments} i18n={util.i18n} />
</div>
<hr />
<div>
<ImageGrid
withContentAbove
withContentBelow
attachments={attachments}
i18n={util.i18n}
/>
</div>
</div>;
```
### Five images
```jsx
const attachments = [
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
];
<div>
<div>
<ImageGrid attachments={attachments} i18n={util.i18n} />
</div>
<hr />
<div>
<ImageGrid
withContentAbove
withContentBelow
attachments={attachments}
i18n={util.i18n}
/>
</div>
</div>;
```
### Six images
```
const attachments = [
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
];
<div>
<div>
<ImageGrid attachments={attachments} i18n={util.i18n} />
</div>
<hr />
<div>
<ImageGrid withContentAbove withContentBelow attachments={attachments} i18n={util.i18n} />
</div>
</div>;
```
### Mixing attachment types
```
const attachments = [
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
contentType: 'text/plain',
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
];
<div>
<div>
<ImageGrid attachments={attachments} i18n={util.i18n} />
</div>
<hr />
<div>
<ImageGrid withContentAbove withContentBelow attachments={attachments} i18n={util.i18n} />
</div>
</div>;
```
### Sticker
```
const attachments = [
{
url: util.squareStickerObjectUrl,
contentType: 'image/webp',
width: 512,
height: 512,
},
];
<div>
<div>
<ImageGrid isSticker={true} stickerSize={128} attachments={attachments} i18n={util.i18n} />
</div>
<hr />
<div>
<ImageGrid isSticker={true} stickerSize={128} withContentAbove withContentBelow attachments={attachments} i18n={util.i18n} />
</div>
</div>;
```

322
ts/components/conversation/ImageGrid.stories.tsx Normal file
View file

@ -0,0 +1,322 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, number } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { ImageGrid, Props } from './ImageGrid';
import {
AUDIO_MP3,
IMAGE_JPEG,
IMAGE_PNG,
IMAGE_WEBP,
MIMEType,
VIDEO_MP4,
} from '../../types/MIME';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
import { pngUrl, squareStickerUrl } from '../../storybook/Fixtures';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/ImageGrid', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachments: overrideProps.attachments || [
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
],
bottomOverlay: boolean('bottomOverlay', overrideProps.bottomOverlay || false),
i18n,
isSticker: boolean('isSticker', overrideProps.isSticker || false),
onClick: action('onClick'),
onError: action('onError'),
stickerSize: number('stickerSize', overrideProps.stickerSize || 0),
tabIndex: number('tabIndex', overrideProps.tabIndex || 0),
withContentAbove: boolean(
'withContentAbove',
overrideProps.withContentAbove || false
),
withContentBelow: boolean(
'withContentBelow',
overrideProps.withContentBelow || false
),
});
story.add('One Image', () => {
const props = createProps();
return <ImageGrid {...props} />;
});
story.add('Two Images', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
},
],
});
return <ImageGrid {...props} />;
});
story.add('Three Images', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
],
});
return <ImageGrid {...props} />;
});
story.add('Four Images', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
},
],
});
return <ImageGrid {...props} />;
});
story.add('Five Images', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
],
});
return <ImageGrid {...props} />;
});
story.add('6+ Images', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
],
});
return <ImageGrid {...props} />;
});
story.add('Mixed Content Types', () => {
const props = createProps({
attachments: [
{
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
height: 112,
screenshot: {
height: 112,
width: 112,
url: '/fixtures/kitten-4-112-112.jpg',
contentType: IMAGE_JPEG,
},
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
width: 112,
},
{
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
},
{
contentType: 'text/plain' as MIMEType,
fileName: 'lorem-ipsum.txt',
url: '/fixtures/lorem-ipsum.txt',
},
{
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
},
],
});
return <ImageGrid {...props} />;
});
story.add('Sticker', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_WEBP,
fileName: 'sticker.webp',
height: 512,
url: squareStickerUrl,
width: 512,
},
],
isSticker: true,
stickerSize: 128,
});
return <ImageGrid {...props} />;
});
story.add('Content Above and Below', () => {
const props = createProps({
withContentAbove: true,
withContentBelow: true,
});
return <ImageGrid {...props} />;
});
story.add('Bottom Overlay', () => {
const props = createProps({
bottomOverlay: true,
});
return <ImageGrid {...props} />;
});

2
ts/components/conversation/ImageGrid.tsx
View file

@ -15,7 +15,7 @@ import { Image } from './Image';
import { LocalizerType } from '../../types/Util';
interface Props {
export interface Props {
attachments: Array<AttachmentType>;
withContentAbove?: boolean;
withContentBelow?: boolean;

1
ts/types/MIME.ts
View file

@ -8,6 +8,7 @@ export const IMAGE_GIF = 'image/gif' as MIMEType;
export const IMAGE_JPEG = 'image/jpeg' as MIMEType;
export const IMAGE_PNG = 'image/png' as MIMEType;
export const IMAGE_WEBP = 'image/webp' as MIMEType;
export const IMAGE_PNG = 'image/png' as MIMEType;
export const VIDEO_MP4 = 'video/mp4' as MIMEType;
export const VIDEO_QUICKTIME = 'video/quicktime' as MIMEType;
export const LONG_MESSAGE = 'text/x-signal-plain' as MIMEType;