import React from "react"; import classnames from "classnames"; import { Icon, Spin } from "antd"; import intl from "react-intl-universal"; 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 (