Migrate Lightbox to Storybook
This commit is contained in:
Chris Svenningsen
Josh Perez
parent
3591fa005e
commit
4b0c206128
3 changed files with 122 additions and 110 deletions
|
|
@ -1,108 +0,0 @@
|
|||
## Image
|
||||
|
||||
```jsx
|
||||
const noop = () => {};
|
||||
|
||||
<div style={{ position: 'relative', width: '100%', height: 500 }}>
|
||||
<Lightbox
|
||||
objectURL="https://placekitten.com/800/600"
|
||||
contentType="image/jpeg"
|
||||
onSave={noop}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## Image with caption
|
||||
|
||||
```jsx
|
||||
const noop = () => {};
|
||||
|
||||
<div style={{ position: 'relative', width: '100%', height: 500 }}>
|
||||
<Lightbox
|
||||
objectURL="https://placekitten.com/800/600"
|
||||
caption="This is the user-provided caption. We show it overlaid on the image. If it's really long, then it wraps, but it doesn't get too close to the edges of the image."
|
||||
contentType="image/jpeg"
|
||||
onSave={noop}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## Image with timer
|
||||
|
||||
```jsx
|
||||
const noop = () => {};
|
||||
|
||||
<div style={{ position: 'relative', width: '100%', height: 500 }}>
|
||||
<Lightbox
|
||||
objectURL="https://placekitten.com/800/600"
|
||||
contentType="image/jpeg"
|
||||
timerExpiresAt={Date.now() + 10 * 1000}
|
||||
timerDuration={30 * 1000}
|
||||
onSave={null}
|
||||
close={() => console.log('close')}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## Image (unsupported format)
|
||||
|
||||
```jsx
|
||||
const noop = () => {};
|
||||
|
||||
<div style={{ position: 'relative', width: '100%', height: 500 }}>
|
||||
<Lightbox
|
||||
objectURL="foo.tif"
|
||||
contentType="image/tiff"
|
||||
onSave={noop}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## Video (supported format)
|
||||
|
||||
```jsx
|
||||
const noop = () => {};
|
||||
|
||||
<div style={{ position: 'relative', width: '100%', height: 500 }}>
|
||||
<Lightbox
|
||||
objectURL="fixtures/pixabay-Soap-Bubble-7141.mp4"
|
||||
contentType="video/mp4"
|
||||
onSave={noop}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## Video (unsupported format)
|
||||
|
||||
```jsx
|
||||
const noop = () => {};
|
||||
|
||||
<div style={{ position: 'relative', width: '100%', height: 500 }}>
|
||||
<Lightbox
|
||||
objectURL="foo.mov"
|
||||
contentType="video/quicktime"
|
||||
onSave={noop}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## Unsupported file format
|
||||
|
||||
```jsx
|
||||
const noop = () => {};
|
||||
|
||||
<div style={{ position: 'relative', width: '100%', height: 600 }}>
|
||||
<Lightbox
|
||||
objectURL="tsconfig.json"
|
||||
contentType="application/json"
|
||||
onSave={noop}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
```
|
||||
120
ts/components/Lightbox.stories.tsx
Normal file
120
ts/components/Lightbox.stories.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, text } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { Lightbox, Props } from './Lightbox';
|
||||
import {
|
||||
AUDIO_MP3,
|
||||
IMAGE_JPEG,
|
||||
MIMEType,
|
||||
VIDEO_MP4,
|
||||
VIDEO_QUICKTIME,
|
||||
} 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/Lightbox', module);
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
caption: text('caption', overrideProps.caption || ''),
|
||||
close: action('close'),
|
||||
contentType: overrideProps.contentType || IMAGE_JPEG,
|
||||
i18n,
|
||||
isViewOnce: boolean('isViewOnce', overrideProps.isViewOnce || false),
|
||||
objectURL: text('objectURL', overrideProps.objectURL || ''),
|
||||
onNext: overrideProps.onNext,
|
||||
onPrevious: overrideProps.onPrevious,
|
||||
onSave: overrideProps.onSave,
|
||||
});
|
||||
|
||||
story.add('Image', () => {
|
||||
const props = createProps({
|
||||
objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
||||
story.add('Image with Caption', () => {
|
||||
const props = createProps({
|
||||
caption:
|
||||
'This is the user-provided caption. It can get long and wrap onto multiple lines.',
|
||||
objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
||||
story.add('Video', () => {
|
||||
const props = createProps({
|
||||
contentType: VIDEO_MP4,
|
||||
objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
||||
story.add('Video with Caption', () => {
|
||||
const props = createProps({
|
||||
caption:
|
||||
'This is the user-provided caption. It can get long and wrap onto multiple lines.',
|
||||
contentType: VIDEO_MP4,
|
||||
objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
||||
story.add('Video (View Once)', () => {
|
||||
const props = createProps({
|
||||
contentType: VIDEO_MP4,
|
||||
isViewOnce: true,
|
||||
objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
||||
story.add('Unsupported Image Type', () => {
|
||||
const props = createProps({
|
||||
contentType: 'image/tiff' as MIMEType,
|
||||
objectURL: 'unsupported-image.tiff',
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
||||
story.add('Unsupported Video Type', () => {
|
||||
const props = createProps({
|
||||
contentType: VIDEO_QUICKTIME,
|
||||
objectURL: 'unsupported-video.mov',
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
||||
story.add('Unsupported ContentType', () => {
|
||||
const props = createProps({
|
||||
contentType: AUDIO_MP3,
|
||||
objectURL: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
||||
story.add('Including Next/Previous/Save Callbacks', () => {
|
||||
const props = createProps({
|
||||
objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
|
||||
onNext: action('onNext'),
|
||||
onPrevious: action('onPrevious'),
|
||||
onSave: action('onSave'),
|
||||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
|
|
@ -23,7 +23,7 @@ const colorSVG = (url: string, color: string) => {
|
|||
};
|
||||
};
|
||||
|
||||
interface Props {
|
||||
export interface Props {
|
||||
close: () => void;
|
||||
contentType: MIME.MIMEType | undefined;
|
||||
i18n: LocalizerType;
|
||||
|
|
@ -363,7 +363,7 @@ export class Lightbox extends React.Component<Props, State> {
|
|||
!isVideoTypeSupported && MIME.isVideo(contentType);
|
||||
if (isUnsupportedImageType || isUnsupportedVideoType) {
|
||||
const iconUrl = isUnsupportedVideoType
|
||||
? 'images/video.svg'
|
||||
? 'images/movie.svg'
|
||||
: 'images/image.svg';
|
||||
|
||||
return <Icon url={iconUrl} onClick={this.onObjectClick} />;
|
||||
|
|
|
|||
Loading…
Reference in a new issue