123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- import React from "react";
- import classnames from "classnames";
- import { Icon, Spin } from "antd";
-
- import "./ImagePreviewer.less";
- // import "./ImagePreviewer.css";
- // import styles from "./ImagePreviewer.module.css";
- import { addImageProcess } from "../../helper";
- // import styles from "./ImagePreviewer.module.less";
-
- 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="comment-image-preview-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>
- );
- }
- }
|