| 1 |
- {"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","large","transform","opacity","transition","map","item","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\n\r\nimport './ImagePreviewer.css';\r\nimport { addImageProcess } from '../../helper';\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 = this.state.cIndex === 0 ? this.props.list.length - 1 : this.state.cIndex - 1;\r\n this.setIndex(prev);\r\n }\r\n\r\n onNext() {\r\n const next = this.state.cIndex === this.props.list.length - 1 ? 0 : 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=\"container\">\r\n <div className=\"toolbar\">\r\n <span className=\"button\" onClick={onFold}>\r\n <Icon type=\"to-top\" />收起\r\n </span>\r\n <span className=\"button\" onClick={this.onOrigin}>\r\n <Icon type=\"search\" /> 查看原图\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"]}
|
