Migrate MediaGallery to Storybook
This commit is contained in:
Sidney Keese
Josh Perez
parent
2de4a3177a
commit
b112666239
3 changed files with 165 additions and 100 deletions
|
|
@ -1,99 +0,0 @@
|
|||
### Empty states for missing media and documents
|
||||
|
||||
```
|
||||
<div style={{width: '100%', height: 300}}>
|
||||
<MediaGallery
|
||||
i18n={window.i18n}
|
||||
media={[]}
|
||||
documents={[]}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Media gallery with media and documents
|
||||
|
||||
```jsx
|
||||
const _ = util._;
|
||||
const DAY_MS = 24 * 60 * 60 * 1000;
|
||||
const MONTH_MS = 30 * DAY_MS;
|
||||
const YEAR_MS = 12 * MONTH_MS;
|
||||
const tokens = ['foo', 'bar', 'baz', 'qux', 'quux'];
|
||||
const fileExtensions = ['docx', 'pdf', 'txt', 'mp3', 'wmv', 'tiff'];
|
||||
const createRandomMessage = ({ startTime, timeWindow } = {}) => props => {
|
||||
const now = Date.now();
|
||||
const fileName = `${_.sample(tokens)}${_.sample(tokens)}.${_.sample(
|
||||
fileExtensions
|
||||
)}`;
|
||||
return {
|
||||
contentType: 'image/jpeg',
|
||||
message: {
|
||||
id: _.random(now).toString(),
|
||||
received_at: _.random(startTime, startTime + timeWindow),
|
||||
},
|
||||
attachment: {
|
||||
data: null,
|
||||
fileName,
|
||||
size: _.random(1000, 1000 * 1000 * 50),
|
||||
contentType: 'image/jpeg',
|
||||
},
|
||||
|
||||
thumbnailObjectUrl: `https://placekitten.com/${_.random(
|
||||
50,
|
||||
150
|
||||
)}/${_.random(50, 150)}`,
|
||||
...props,
|
||||
};
|
||||
};
|
||||
|
||||
const createRandomMessages = ({ startTime, timeWindow }) =>
|
||||
_.range(_.random(5, 10)).map(createRandomMessage({ startTime, timeWindow }));
|
||||
|
||||
const startTime = Date.now();
|
||||
const messages = _.sortBy(
|
||||
[
|
||||
...createRandomMessages({
|
||||
startTime,
|
||||
timeWindow: DAY_MS,
|
||||
}),
|
||||
...createRandomMessages({
|
||||
startTime: startTime - DAY_MS,
|
||||
timeWindow: DAY_MS,
|
||||
}),
|
||||
...createRandomMessages({
|
||||
startTime: startTime - 3 * DAY_MS,
|
||||
timeWindow: 3 * DAY_MS,
|
||||
}),
|
||||
...createRandomMessages({
|
||||
startTime: startTime - 30 * DAY_MS,
|
||||
timeWindow: 15 * DAY_MS,
|
||||
}),
|
||||
...createRandomMessages({
|
||||
startTime: startTime - 365 * DAY_MS,
|
||||
timeWindow: 300 * DAY_MS,
|
||||
}),
|
||||
],
|
||||
message => -message.received_at
|
||||
);
|
||||
|
||||
<MediaGallery i18n={util.i18n} media={messages} documents={messages} />;
|
||||
```
|
||||
|
||||
## Media gallery with one document
|
||||
|
||||
```jsx
|
||||
const mediaItems = [
|
||||
{
|
||||
thumbnailObjectUrl: 'https://placekitten.com/76/67',
|
||||
contentType: 'image/jpeg',
|
||||
message: {
|
||||
id: '1',
|
||||
},
|
||||
attachment: {
|
||||
fileName: 'foo.jpg',
|
||||
contentType: 'image/jpeg',
|
||||
},
|
||||
},
|
||||
];
|
||||
<MediaGallery i18n={util.i18n} media={mediaItems} documents={mediaItems} />;
|
||||
```
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
import * as React from 'react';
|
||||
import { random, range, sample, sortBy } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../../js/modules/i18n';
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../../_locales/en/messages.json';
|
||||
|
||||
import { MediaItemType } from '../../LightboxGallery';
|
||||
import { MIMEType } from '../../../types/MIME';
|
||||
|
||||
import { MediaGallery, Props } from './MediaGallery';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf(
|
||||
'Components/Conversation/MediaGallery/MediaGallery',
|
||||
module
|
||||
);
|
||||
|
||||
const now = Date.now();
|
||||
const DAY_MS = 24 * 60 * 60 * 1000;
|
||||
const days = (n: number) => n * DAY_MS;
|
||||
const tokens = ['foo', 'bar', 'baz', 'qux', 'quux'];
|
||||
|
||||
const contentTypes = ({
|
||||
gif: 'image/gif',
|
||||
jpg: 'image/jpeg',
|
||||
png: 'image/png',
|
||||
mp4: 'video/mp4',
|
||||
docx: 'application/text',
|
||||
pdf: 'application/pdf',
|
||||
txt: 'application/text',
|
||||
} as unknown) as Record<string, MIMEType>;
|
||||
|
||||
const createRandomFile = (
|
||||
startTime: number,
|
||||
timeWindow: number,
|
||||
fileExtension: string
|
||||
): MediaItemType => {
|
||||
const contentType = contentTypes[fileExtension];
|
||||
const fileName = `${sample(tokens)}${sample(tokens)}.${fileExtension}`;
|
||||
|
||||
return {
|
||||
contentType,
|
||||
message: {
|
||||
id: random(now).toString(),
|
||||
received_at: random(startTime, startTime + timeWindow),
|
||||
attachments: [],
|
||||
},
|
||||
attachment: {
|
||||
url: '',
|
||||
fileName,
|
||||
size: random(1000, 1000 * 1000 * 50),
|
||||
contentType,
|
||||
},
|
||||
index: 0,
|
||||
thumbnailObjectUrl: `https://placekitten.com/${random(50, 150)}/${random(
|
||||
50,
|
||||
150
|
||||
)}`,
|
||||
};
|
||||
};
|
||||
|
||||
const createRandomFiles = (
|
||||
startTime: number,
|
||||
timeWindow: number,
|
||||
fileExtensions: Array<string>
|
||||
) =>
|
||||
range(random(5, 10)).map(() =>
|
||||
createRandomFile(startTime, timeWindow, sample(fileExtensions) as string)
|
||||
);
|
||||
|
||||
const createRandomDocuments = (startTime: number, timeWindow: number) =>
|
||||
createRandomFiles(startTime, timeWindow, ['docx', 'pdf', 'txt']);
|
||||
|
||||
const createRandomMedia = (startTime: number, timeWindow: number) =>
|
||||
createRandomFiles(startTime, timeWindow, ['mp4', 'jpg', 'png', 'gif']);
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
i18n,
|
||||
onItemClick: action('onItemClick'),
|
||||
documents: overrideProps.documents || [],
|
||||
media: overrideProps.media || [],
|
||||
});
|
||||
|
||||
story.add('Populated', () => {
|
||||
const media = sortBy(
|
||||
[
|
||||
...createRandomMedia(now, days(1)),
|
||||
...createRandomMedia(now - days(1), days(1)),
|
||||
...createRandomMedia(now - days(3), days(3)),
|
||||
...createRandomMedia(now - days(30), days(15)),
|
||||
...createRandomMedia(now - days(365), days(300)),
|
||||
],
|
||||
(document: MediaItemType) => -document.message.received_at
|
||||
);
|
||||
|
||||
const documents = sortBy(
|
||||
[
|
||||
...createRandomDocuments(now, days(1)),
|
||||
...createRandomDocuments(now - days(1), days(1)),
|
||||
...createRandomDocuments(now - days(3), days(3)),
|
||||
...createRandomDocuments(now - days(30), days(15)),
|
||||
...createRandomDocuments(now - days(365), days(300)),
|
||||
],
|
||||
(document: MediaItemType) => -document.message.received_at
|
||||
);
|
||||
|
||||
const props = createProps({ documents, media });
|
||||
|
||||
return <MediaGallery {...props} />;
|
||||
});
|
||||
|
||||
story.add('No Documents', () => {
|
||||
const media = sortBy(
|
||||
[
|
||||
...createRandomMedia(now, days(1)),
|
||||
...createRandomMedia(now - days(1), days(1)),
|
||||
...createRandomMedia(now - days(3), days(3)),
|
||||
...createRandomMedia(now - days(30), days(15)),
|
||||
...createRandomMedia(now - days(365), days(300)),
|
||||
],
|
||||
(document: MediaItemType) => -document.message.received_at
|
||||
);
|
||||
|
||||
const props = createProps({ media });
|
||||
|
||||
return <MediaGallery {...props} />;
|
||||
});
|
||||
|
||||
story.add('No Media', () => {
|
||||
const documents = sortBy(
|
||||
[
|
||||
...createRandomDocuments(now, days(1)),
|
||||
...createRandomDocuments(now - days(1), days(1)),
|
||||
...createRandomDocuments(now - days(3), days(3)),
|
||||
...createRandomDocuments(now - days(30), days(15)),
|
||||
...createRandomDocuments(now - days(365), days(300)),
|
||||
],
|
||||
(document: MediaItemType) => -document.message.received_at
|
||||
);
|
||||
|
||||
const props = createProps({ documents });
|
||||
|
||||
return <MediaGallery {...props} />;
|
||||
});
|
||||
|
||||
story.add('One Each', () => {
|
||||
const media = createRandomMedia(now, days(1)).slice(0, 1);
|
||||
const documents = createRandomDocuments(now, days(1)).slice(0, 1);
|
||||
|
||||
const props = createProps({ documents, media });
|
||||
|
||||
return <MediaGallery {...props} />;
|
||||
});
|
||||
|
||||
story.add('Empty', () => {
|
||||
const props = createProps();
|
||||
|
||||
return <MediaGallery {...props} />;
|
||||
});
|
||||
|
|
@ -12,7 +12,7 @@ import { LocalizerType } from '../../../types/Util';
|
|||
|
||||
import { MediaItemType } from '../../LightboxGallery';
|
||||
|
||||
interface Props {
|
||||
export interface Props {
|
||||
documents: Array<MediaItemType>;
|
||||
i18n: LocalizerType;
|
||||
media: Array<MediaItemType>;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue