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

Migrate AttachmentList to Storybook

Browse source
This commit is contained in:
Chris Svenningsen 2020-08-20 14:50:43 -07:00 • committed by Josh Perez
parent 3416818e01
commit 67d2dd07c3
3 changed files with 120 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

118
ts/components/conversation/AttachmentList.md
View file

@ -1,118 +0,0 @@
### One image
```jsx
const attachments = [
{
url: util.gifObjectUrl,
contentType: 'image/gif',
width: 320,
height: 240,
},
];
<util.ConversationContext theme={util.theme}>
<AttachmentList
attachments={attachments}
onClose={() => console.log('onClose')}
onClickAttachment={attachment => {
console.log('onClickAttachment', attachment);
}}
onCloseAttachment={attachment => {
console.log('onCloseAttachment', attachment);
}}
onAddAttachment={() => console.log('onAddAttachment')}
i18n={util.i18n}
/>
</util.ConversationContext>;
```
### Four images
```jsx
const attachments = [
{
url: util.gifObjectUrl,
contentType: 'image/png',
width: 320,
height: 240,
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 800,
height: 1200,
},
{
url: util.landscapeObjectUrl,
contentType: 'image/png',
width: 4496,
height: 3000,
},
{
url: util.landscapeGreenObjectUrl,
contentType: 'image/png',
width: 1000,
height: 50,
},
];
<util.ConversationContext theme={util.theme}>
<AttachmentList
attachments={attachments}
onClose={() => console.log('onClose')}
onClickAttachment={attachment => {
console.log('onClickAttachment', attachment);
}}
onCloseAttachment={attachment => {
console.log('onCloseAttachment', attachment);
}}
onAddAttachment={() => console.log('onAddAttachment')}
i18n={util.i18n}
/>
</util.ConversationContext>;
```
### A mix of attachment types
```jsx
const attachments = [
{
url: util.gifObjectUrl,
contentType: 'image/gif',
width: 320,
height: 240,
},
{
contentType: 'text/plain',
fileName: 'manifesto.txt',
},
{
url: util.pngObjectUrl,
contentType: 'image/png',
width: 800,
height: 1200,
},
];
<util.ConversationContext theme={util.theme}>
<AttachmentList
attachments={attachments}
onClose={() => console.log('onClose')}
onClickAttachment={attachment => {
console.log('onClickAttachment', attachment);
}}
onCloseAttachment={attachment => {
console.log('onCloseAttachment', attachment);
}}
onAddAttachment={() => console.log('onAddAttachment')}
i18n={util.i18n}
/>
</util.ConversationContext>;
```
### No attachments provided
Nothing is shown if attachment list is empty.
```jsx
<AttachmentList attachments={[]} i18n={util.i18n} />
```

119
ts/components/conversation/AttachmentList.stories.tsx Normal file
View file

@ -0,0 +1,119 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { AttachmentList, Props } from './AttachmentList';
import {
AUDIO_MP3,
IMAGE_GIF,
IMAGE_JPEG,
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';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/AttachmentList', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachments: overrideProps.attachments || [],
i18n,
onAddAttachment: action('onAddAttachment'),
onClickAttachment: action('onClickAttachment'),
onClose: action('onClose'),
onCloseAttachment: action('onCloseAttachment'),
});
story.add('One File', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
},
],
});
return <AttachmentList {...props} />;
});
story.add('Multiple Visual Attachments', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
},
{
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
screenshot: {
height: 112,
width: 112,
url: '/fixtures/kitten-4-112-112.jpg',
contentType: IMAGE_JPEG,
},
},
{
contentType: IMAGE_GIF,
fileName: 'giphy-GVNv0UpeYm17e',
url: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
},
],
});
return <AttachmentList {...props} />;
});
story.add('Multiple with Non-Visual Types', () => {
const props = createProps({
attachments: [
{
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
},
{
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',
},
{
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
screenshot: {
height: 112,
width: 112,
url: '/fixtures/kitten-4-112-112.jpg',
contentType: IMAGE_JPEG,
},
},
{
contentType: IMAGE_GIF,
fileName: 'giphy-GVNv0UpeYm17e',
url: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
},
],
});
return <AttachmentList {...props} />;
});
story.add('Empty List', () => {
const props = createProps();
return <AttachmentList {...props} />;
});

3
ts/components/conversation/AttachmentList.tsx
View file

@ -15,10 +15,9 @@ import {
isVideoAttachment,
} from '../../types/Attachment';
interface Props {
export interface Props {
attachments: Array<AttachmentType>;
i18n: LocalizerType;
// onError: () => void;
onClickAttachment: (attachment: AttachmentType) => void;
onCloseAttachment: (attachment: AttachmentType) => void;
onAddAttachment: () => void;