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