{"version":3,"sources":["../../../src/components/ImagePreviewer/ImagePreviewer.jsx"],"names":["ImagePreviewer","props","setIndex","bind","onPrev","onNext","onOrigin","rotateLeft","rotateRight","onImgLoad","onImageError","state","cIndex","index","direction","loading","nextProps","prev","list","length","next","window","open","setState","onFold","intl","get","large","transform","opacity","transition","map","item","wrapper","active","thumbnail","backgroundImage","small","React","Component"],"mappings":"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","file":"ImagePreviewer.js","sourcesContent":["import React from \"react\";\nimport classnames from \"classnames\";\nimport { Icon, Spin } from \"antd\";\nimport intl from \"react-intl-universal\";\n\nimport \"./ImagePreviewer.less\";\n// import \"./ImagePreviewer.css\";\n// import styles from \"./ImagePreviewer.module.css\";\nimport { addImageProcess } from \"../../helper\";\n// import styles from \"./ImagePreviewer.module.less\";\n\nexport default class ImagePreviewer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.setIndex = this.setIndex.bind(this);\n    this.onPrev = this.onPrev.bind(this);\n    this.onNext = this.onNext.bind(this);\n    this.onOrigin = this.onOrigin.bind(this);\n    this.rotateLeft = this.rotateLeft.bind(this);\n    this.rotateRight = this.rotateRight.bind(this);\n    this.onImgLoad = this.onImgLoad.bind(this);\n    this.onImageError = this.onImageError.bind(this);\n    this.state = {\n      cIndex: props.index,\n      direction: 0, // 0- 0deg 1- 90deg 2- 180deg 3- 270deg\n      loading: false\n    };\n  }\n\n  componentWillReceiveProps(nextProps) {\n    if (nextProps.index !== this.props.index) {\n      this.setIndex(nextProps.index);\n    }\n  }\n\n  onPrev() {\n    const prev =\n      this.state.cIndex === 0\n        ? this.props.list.length - 1\n        : this.state.cIndex - 1;\n    this.setIndex(prev);\n  }\n\n  onNext() {\n    const next =\n      this.state.cIndex === this.props.list.length - 1\n        ? 0\n        : this.state.cIndex + 1;\n    this.setIndex(next);\n  }\n\n  onOrigin() {\n    window.open(this.props.list[this.state.cIndex]);\n  }\n\n  onImgLoad() {\n    this.setState({\n      loading: false\n    });\n  }\n\n  onImageError() {\n    this.setState({\n      loading: false\n    });\n  }\n\n  setIndex(index) {\n    this.setState({\n      cIndex: index,\n      direction: 0,\n      loading: true\n    });\n  }\n\n  rotateLeft() {\n    let direction = this.state.direction - 1;\n    if (direction === -1) {\n      direction = 3;\n    }\n    this.setState({\n      direction\n    });\n  }\n\n  rotateRight() {\n    let direction = this.state.direction + 1;\n    if (direction === 4) {\n      direction = 0;\n    }\n    this.setState({\n      direction\n    });\n  }\n\n  // calcHeight(node) {\n  //     const { naturalHeight, naturalWidth } = node;\n  // }\n\n  render() {\n    const { list, onFold } = this.props;\n    const { cIndex } = this.state;\n    return (\n      <div className=\"comment-image-preview-container\">\n        <div className=\"toolbar\">\n          <span className=\"button\" onClick={onFold}>\n            <Icon type=\"to-top\" />\n            {intl.get(\"picture.collapse\")}\n          </span>\n          <span className=\"button\" onClick={this.onOrigin}>\n            <Icon type=\"search\" /> {intl.get(\"picture.viewOriginal\")}\n          </span>\n          {/* <span className=\"button\" onClick={this.rotateRight}>\n                        <Icon type=\"reload\" /> 向右旋转\n                    </span>\n                    <span className={classnames(\"button\", \"reversal\")} onClick={this.rotateLeft}>\n                        <Icon type=\"reload\" /> 向左旋转\n                    </span> */}\n        </div>\n        <div className=\"pictureWrapper\">\n          <Spin spinning={this.state.loading}>\n            <img\n              // ref={node => {\n              //     if (node) {\n              //         this.calcHeight(node);\n              //     }\n              // }}\n              className=\"picture\"\n              src={addImageProcess(list[cIndex], { large: true })}\n              alt={list[cIndex]}\n              style={{\n                transform: `rotate(${this.state.direction * 90}deg)`,\n                opacity: this.state.loading ? 0 : 1,\n                transition: \"0.3s opacity\"\n              }}\n              onLoad={this.onImgLoad}\n              onError={this.onImageError}\n            />\n          </Spin>\n          <div className=\"tools\">\n            {list.length > 1 && (\n              <div\n                onClick={this.onPrev}\n                className={classnames(\"item\", \"left\")}\n              />\n            )}\n\n            <div onClick={onFold} className={classnames(\"item\", \"shrink\")} />\n            {list.length > 1 && (\n              <div\n                onClick={this.onNext}\n                className={classnames(\"item\", \"right\")}\n              />\n            )}\n          </div>\n          {/* <div className=\"prev\" onClick={this.onPrev}>\n                        <Icon className=\"middle\" type=\"left\" />\n                    </div>\n                    <div className=\"next\" onClick={this.onNext}>\n                        <Icon className=\"middle\" type=\"right\" />\n                    </div> */}\n          {/* <div className=\"picture\" style={{ backgroundImage: `url(${addImageProcess(list[cIndex])})` }} /> */}\n        </div>\n        {list.length > 1 && (\n          <div className=\"list\">\n            {list.map((item, index) => (\n              <div\n                className={classnames({\n                  wrapper: true,\n                  active: index === cIndex\n                })}\n                key={item}\n              >\n                <div\n                  className={classnames({\n                    thumbnail: true\n                  })}\n                  style={{\n                    backgroundImage: `url(${addImageProcess(item, {\n                      small: true\n                    })})`\n                  }}\n                  onClick={() => {\n                    this.setIndex(index);\n                  }}\n                />\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}