| 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","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\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 收起\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"]}
|
