{"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"]}