| 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\";\nimport classnames from \"classnames\";\nimport { Icon, Spin } from \"antd\";\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 收起\n </span>\n <span className=\"button\" onClick={this.onOrigin}>\n <Icon type=\"search\" /> 查看原图\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"]}
|
