npmcomment/src/components/ImagePreviewer/ImagePreviewer.jsx

import React from "react";
import classnames from "classnames";
import { Icon, Spin } from "antd";

import "./ImagePreviewer.css";
import { addImageProcess } from "../../helper";

export default class ImagePreviewer extends React.Component {
  constructor(props) {
    super(props);
    this.setIndex = this.setIndex.bind(this);
    this.onPrev = this.onPrev.bind(this);
    this.onNext = this.onNext.bind(this);
    this.onOrigin = this.onOrigin.bind(this);
    this.rotateLeft = this.rotateLeft.bind(this);
    this.rotateRight = this.rotateRight.bind(this);
    this.onImgLoad = this.onImgLoad.bind(this);
    this.onImageError = this.onImageError.bind(this);
    this.state = {
      cIndex: props.index,
      direction: 0, // 0- 0deg 1- 90deg 2- 180deg 3- 270deg
      loading: false
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.index !== this.props.index) {
      this.setIndex(nextProps.index);
    }
  }

  onPrev() {
    const prev =
      this.state.cIndex === 0
        ? this.props.list.length - 1
        : this.state.cIndex - 1;
    this.setIndex(prev);
  }

  onNext() {
    const next =
      this.state.cIndex === this.props.list.length - 1
        ? 0
        : this.state.cIndex + 1;
    this.setIndex(next);
  }

  onOrigin() {
    window.open(this.props.list[this.state.cIndex]);
  }

  onImgLoad() {
    this.setState({
      loading: false
    });
  }

  onImageError() {
    this.setState({
      loading: false
    });
  }

  setIndex(index) {
    this.setState({
      cIndex: index,
      direction: 0,
      loading: true
    });
  }

  rotateLeft() {
    let direction = this.state.direction - 1;
    if (direction === -1) {
      direction = 3;
    }
    this.setState({
      direction
    });
  }

  rotateRight() {
    let direction = this.state.direction + 1;
    if (direction === 4) {
      direction = 0;
    }
    this.setState({
      direction
    });
  }

  // calcHeight(node) {
  //     const { naturalHeight, naturalWidth } = node;
  // }

  render() {
    const { list, onFold } = this.props;
    const { cIndex } = this.state;
    return (
      <div className="container">
        <div className="toolbar">
          <span className="button" onClick={onFold}>
            <Icon type="to-top" />收起
          </span>
          <span className="button" onClick={this.onOrigin}>
            <Icon type="search" /> 查看原图
          </span>
          {/* <span className="button" onClick={this.rotateRight}>
                        <Icon type="reload" /> 向右旋转
                    </span>
                    <span className={classnames("button", "reversal")} onClick={this.rotateLeft}>
                        <Icon type="reload" /> 向左旋转
                    </span> */}
        </div>
        <div className="pictureWrapper">
          <Spin spinning={this.state.loading}>
            <img
              // ref={node => {
              //     if (node) {
              //         this.calcHeight(node);
              //     }
              // }}
              className="picture"
              src={addImageProcess(list[cIndex], { large: true })}
              alt={list[cIndex]}
              style={{
                transform: `rotate(${this.state.direction * 90}deg)`,
                opacity: this.state.loading ? 0 : 1,
                transition: "0.3s opacity"
              }}
              onLoad={this.onImgLoad}
              onError={this.onImageError}
            />
          </Spin>
          <div className="tools">
            {list.length > 1 && (
              <div
                onClick={this.onPrev}
                className={classnames("item", "left")}
              />
            )}

            <div onClick={onFold} className={classnames("item", "shrink")} />
            {list.length > 1 && (
              <div
                onClick={this.onNext}
                className={classnames("item", "right")}
              />
            )}
          </div>
          {/* <div className="prev" onClick={this.onPrev}>
                        <Icon className="middle" type="left" />
                    </div>
                    <div className="next" onClick={this.onNext}>
                        <Icon className="middle" type="right" />
                    </div> */}
          {/* <div className="picture" style={{ backgroundImage: `url(${addImageProcess(list[cIndex])})` }} /> */}
        </div>
        {list.length > 1 && (
          <div className="list">
            {list.map((item, index) => (
              <div
                className={classnames({
                  wrapper: true,
                  active: index === cIndex
                })}
                key={item}
              >
                <div
                  className={classnames({
                    thumbnail: true
                  })}
                  style={{
                    backgroundImage: `url(${addImageProcess(item, {
                      small: true
                    })})`
                  }}
                  onClick={() => {
                    this.setIndex(index);
                  }}
                />
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }
}