react-photo-view/example/stories/Index.stories.js

import * as React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { PhotoProvider, PhotoConsumer, PhotoSlider } from 'react-photo-view';
import 'react-photo-view/dist/index.css';
import image1 from './static/1.jpg';
import image2 from './static/2.jpg';
import image3 from './static/3.jpg';
import image4 from './static/4.jpg';
import image5 from './static/5.jpg';
import image6 from './static/6.jpg';
import image7 from './static/7.jpg';
import image8 from './static/8.jpg';
import defaultPhoto from './static/default-photo.svg';

const photoImages = [
  image1,
  image2,
  image3,
  image4,
  image5,
  image6,
  image7,
  image8,
];

const ImageList = styled.div`
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
`;

const ViewBox = styled.div`
  margin-right: 20px;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  background: url('${props => props.viewImage}') no-repeat center;
  background-size: cover;
`;

const Button = styled.button`
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;

  &:not(:last-child) {
    margin-right: 12px;
  }

  &[type='primary'] {
    background: deepskyblue;
    border-color: deepskyblue;
    color: white;
  }
`;

const DefaultImage = styled.img`
  width: 100px;
  height: 100px;
`;

storiesOf('react-photo-view', module)
  .add('默认展示', () => (
    <PhotoProvider>
      <ImageList>
        {photoImages.map((item, index) => (
          <PhotoConsumer key={index} src={item} intro={item}>
            <ViewBox viewImage={item} />
          </PhotoConsumer>
        ))}
      </ImageList>
    </PhotoProvider>
  ))
  .add('两张预览', () => (
    <PhotoProvider>
      <ImageList>
        {photoImages.map((item, index) => (
          <PhotoConsumer key={index} src={item}>
            {index < 2 ? <ViewBox viewImage={item} /> : undefined}
          </PhotoConsumer>
        ))}
      </ImageList>
    </PhotoProvider>
  ))
  .add('通过按钮触发', () => (
    <PhotoProvider>
      <ImageList>
        <PhotoConsumer src={image4}>
          <Button>打开预览</Button>
        </PhotoConsumer>
      </ImageList>
    </PhotoProvider>
  ))
  .add('自定义加载失败', () => (
    <ImageList>
      <PhotoProvider>
        <PhotoConsumer src={null}>
          <Button>无默认图</Button>
        </PhotoConsumer>
      </PhotoProvider>
      <PhotoProvider brokenElement={<DefaultImage src={defaultPhoto} />}>
        <PhotoConsumer src={null}>
          <Button>自定义默认图</Button>
        </PhotoConsumer>
      </PhotoProvider>
    </ImageList>
  ))
  .add('受控 PhotoSlider', () => {
    const [visible, setVisible] = React.useState(false);
    const [photoIndex, setPhotoIndex] = React.useState(0);

    function handleShowSlider() {
      setVisible(true);
    }
    function handleCloseSlider() {
      setVisible(false);
    }
    return (
      <ImageList>
        <Button onClick={() => setPhotoIndex(2)}>setPhotoIndex(2)</Button>
        <Button onClick={() => setPhotoIndex(4)}>setPhotoIndex(4)</Button>
        <Button onClick={handleShowSlider} type="primary">
          打开 PhotoSlider
        </Button>

        <PhotoSlider
          images={photoImages.map(item => ({ src: item }))}
          visible={visible}
          onClose={handleCloseSlider}
          index={photoIndex}
          onIndexChange={setPhotoIndex}
        />
      </ImageList>
    );
  });