newICSS/src/components/PreInIcss/RotateImg/index.jsx

import React, { Component } from "react";
import $ from "jquery";
import style from "./index.less";
import ReactDom from "react-dom";
import closeImg from "./img/closeImg.png";
import imgBgActive from "./img/imgBgActive.png";
import plus from "./img/plus.png";
import reduce from "./img/reduce.png";
import nextImg from "./img/nextImg.png";
import prevImg from "./img/prevImg.png";
import rotated from "./img/rotated.png";
import {imgDragMove} from '@utils/drag';

class RotateImg extends Component {
  constructor(props){
    super(props);
    this.state={
      de:0,
      current:0,
      length:0,
      imgWidth:'auto',
      imgHeight:'auto',
      mgLeft:'',
      mgTop:'',
      left:'50%',
      top:'50%'
    }
    this.handlePrev = this.handlePrev.bind(this)
    this.handleNext = this.handleNext.bind(this)
    this.handleRotate = this.handleRotate.bind(this)
    this.handlePlus = this.handlePlus.bind(this)
    this.handleReduce = this.handleReduce.bind(this)
  }
  componentDidMount(){
    imgDragMove('add')
    const { idx,imgLis,windowHeight } = this.props;
    let currentImg = imgLis[idx];
    let scaleHeight = windowHeight*0.8;
    let width = currentImg.width,height = currentImg.height;
    if(width>height){
      if(width > scaleHeight){
        width=scaleHeight
        height=height*scaleHeight/width
      }
    }else{
      if(height > scaleHeight){
        height = scaleHeight
        width = width*scaleHeight/height
      }
    }
    this.setState({
      current:idx,
      length:imgLis.length,
      imgWidth:width,
      imgHeight:height,
      mgLeft:-width/2,
      mgTop:-height/2
    })
  }
  getStyle(){
    const { imgDetail,idx,imgLis } = this.props;
    let currentImg = imgLis[this.state.current];
    let width = currentImg.width,height = currentImg.height;
    let isLorR = width > height;
    return {
      width:width,
      height:height,
      marginLeft:-width/2,
      marginTop:-height/2
    }
  }
  handleNext(){
    this.props.setMove(false)
    const { imgLis,isMove,windowHeight } = this.props;
    let scaleHeight = windowHeight*0.8;
    let tmpIdx = this.state.current;
    let tmpLen = this.state.length,width,height;
    if(tmpIdx == tmpLen-1){
      width = imgLis[0].width
      height = imgLis[0].height
    }else{
      width = imgLis[tmpIdx+1].width
      height = imgLis[tmpIdx+1].height
    }
    if(width>height){
      if(width > scaleHeight){
        width=scaleHeight
        height=height*scaleHeight/width
      }
    }else{
      if(height > scaleHeight){
        height = scaleHeight
        width = width*scaleHeight/height
      }
    }
    let imgDom = this.refs.rotateImg.getDOMNode();
    $(imgDom).css({
      left:'50%',
      top:'50%'
    })
    this.setState({
      current:tmpIdx == tmpLen-1?0:(tmpIdx+1),
      imgWidth:width,
      imgHeight:height,
      mgLeft:-width/2,
      mgTop:-height/2,
      de:0
    })
  }
  handlePrev(){
    const { imgLis,windowHeight } = this.props;
    let scaleHeight = windowHeight*0.8;
    let tmpIdx = this.state.current;
    let tmpLen = this.state.length,width,height;
    if(tmpIdx == 0){
      width = imgLis[tmpLen-1].width
      height = imgLis[tmpLen-1].height
    }else{
      width = imgLis[tmpIdx-1].width
      height = imgLis[tmpIdx-1].height
    }
    if(width>height){
      if(width > scaleHeight){
        width=scaleHeight
        height=height*scaleHeight/width
      }
    }else{
      if(height > scaleHeight){
        height = scaleHeight
        width = width*scaleHeight/height
      }
    }
    let imgDom = this.refs.rotateImg.getDOMNode();
    $(imgDom).css({
      left:'50%',
      top:'50%'
    })
    this.setState({
      current:tmpIdx == 0?tmpLen-1:tmpIdx-1,
      imgWidth:width,
      imgHeight:height,
      mgLeft:-width/2,
      mgTop:-height/2,
      de:0
    })
    this.props.setMove(false)
  }
  handlePlus(){
    const {imgWidth,imgHeight,isMove} = this.state;
    if(this.props.isMove){
      this.setState({
        imgWidth:1.2*imgWidth,
        imgHeight:1.2*imgHeight
      })
      return;
    }
    this.setState({
      imgWidth:1.2*imgWidth,
      imgHeight:1.2*imgHeight,
      mgLeft:-imgWidth*1.2/2,
      mgTop:-imgHeight*1.2/2
    })
  }
  handleReduce(){
    const {imgWidth,imgHeight} = this.state;
    if(this.props.isMove){
      this.setState({
        imgWidth:imgWidth*0.8,
        imgHeight:imgHeight*0.8
      })
      return;
    }
    this.setState({
      imgWidth:imgWidth*0.8,
      imgHeight:imgHeight*0.8,
      mgLeft:-imgWidth*0.8/2,
      mgTop:-imgHeight*0.8/2
    })
  }
  handleRotate(flg){
    let deg = this.state.de;
    if(flg){
      deg = deg-90
    }else{
      deg = deg-0+90
    }
    this.setState({
      de:deg
    })
  }

  render() {
    const { imgLis,handleClose,windowHeight } = this.props;
    const { current,imgWidth,imgHeight,mgLeft,mgTop,de,left,top } = this.state;

    const domNode = document.getElementById('root');
    return ReactDom.createPortal(<div className={style.preImgWrap}>
      <div className={style.modal} onClick={handleClose}></div>
      <div className={style.mainWrap}>
        <div className={style.imgWrap}
          id="previewWrapper"
          style={{
            width:0.8*windowHeight+'px',
            height:0.8*windowHeight+'px',
            marginLeft:-0.8*windowHeight/2+'px',
            marginTop:-0.8*windowHeight/2+'px'
          }}>
            <img className={style.rotateImg}
              id="drugImg"
              ref="rotateImg" 
              src={imgLis[current].originalImage} 
              style={{
                width:imgWidth+'px',
                height:imgHeight+'px',
                marginLeft:mgLeft+'px',
                marginTop:mgTop+'px',
                transform:"rotate(" + de + "deg)",
                left:left,
                top:top,
              }}
              alt="预览图片"/>
          <div className={style.activeBar}>
            <img className={style.plus} src={plus} onClick={this.handlePlus} alt="图片放大"/>
            <img className={style.reduce} src={reduce} onClick={this.handleReduce} alt="图片缩小"/>
            <img className={style.rotate} src={rotated} onClick={this.handleRotate} alt="图片旋转"/>
          </div>
          <img src={closeImg} onClick={handleClose} className={style.close} alt="close"/>
        </div>
          <img src={nextImg} className={style.next} onClick={this.handleNext} alt="下一张"/>
          <img src={prevImg} className={style.prev} onClick={this.handlePrev} alt="上一张"/>
      </div>
    </div>,domNode)
  }
}

export default RotateImg;