npmcomment/lib/components/ImagePreviewer/ImagePreviewer.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _spin = require('antd/es/spin');

var _spin2 = _interopRequireDefault(_spin);

var _icon = require('antd/es/icon');

var _icon2 = _interopRequireDefault(_icon);

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

require('antd/es/spin/style/css');

require('antd/es/icon/style/css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

require('./ImagePreviewer.css');

var _helper = require('../../helper');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ImagePreviewer = function (_React$Component) {
    _inherits(ImagePreviewer, _React$Component);

    function ImagePreviewer(props) {
        _classCallCheck(this, ImagePreviewer);

        var _this = _possibleConstructorReturn(this, (ImagePreviewer.__proto__ || Object.getPrototypeOf(ImagePreviewer)).call(this, props));

        _this.setIndex = _this.setIndex.bind(_this);
        _this.onPrev = _this.onPrev.bind(_this);
        _this.onNext = _this.onNext.bind(_this);
        _this.onOrigin = _this.onOrigin.bind(_this);
        _this.rotateLeft = _this.rotateLeft.bind(_this);
        _this.rotateRight = _this.rotateRight.bind(_this);
        _this.onImgLoad = _this.onImgLoad.bind(_this);
        _this.onImageError = _this.onImageError.bind(_this);
        _this.state = {
            cIndex: props.index,
            direction: 0, // 0- 0deg 1- 90deg 2- 180deg 3- 270deg
            loading: false
        };
        return _this;
    }

    _createClass(ImagePreviewer, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if (nextProps.index !== this.props.index) {
                this.setIndex(nextProps.index);
            }
        }
    }, {
        key: 'onPrev',
        value: function onPrev() {
            var prev = this.state.cIndex === 0 ? this.props.list.length - 1 : this.state.cIndex - 1;
            this.setIndex(prev);
        }
    }, {
        key: 'onNext',
        value: function onNext() {
            var next = this.state.cIndex === this.props.list.length - 1 ? 0 : this.state.cIndex + 1;
            this.setIndex(next);
        }
    }, {
        key: 'onOrigin',
        value: function onOrigin() {
            window.open(this.props.list[this.state.cIndex]);
        }
    }, {
        key: 'onImgLoad',
        value: function onImgLoad() {
            this.setState({
                loading: false
            });
        }
    }, {
        key: 'onImageError',
        value: function onImageError() {
            this.setState({
                loading: false
            });
        }
    }, {
        key: 'setIndex',
        value: function setIndex(index) {
            this.setState({
                cIndex: index,
                direction: 0,
                loading: true
            });
        }
    }, {
        key: 'rotateLeft',
        value: function rotateLeft() {
            var direction = this.state.direction - 1;
            if (direction === -1) {
                direction = 3;
            }
            this.setState({
                direction: direction
            });
        }
    }, {
        key: 'rotateRight',
        value: function rotateRight() {
            var direction = this.state.direction + 1;
            if (direction === 4) {
                direction = 0;
            }
            this.setState({
                direction: direction
            });
        }

        // calcHeight(node) {
        //     const { naturalHeight, naturalWidth } = node;
        // }

    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                list = _props.list,
                onFold = _props.onFold;
            var cIndex = this.state.cIndex;

            return _react2.default.createElement(
                'div',
                { className: 'container' },
                _react2.default.createElement(
                    'div',
                    { className: 'toolbar' },
                    _react2.default.createElement(
                        'span',
                        { className: 'button', onClick: onFold },
                        _react2.default.createElement(_icon2.default, { type: 'to-top' }),
                        '\u6536\u8D77'
                    ),
                    _react2.default.createElement(
                        'span',
                        { className: 'button', onClick: this.onOrigin },
                        _react2.default.createElement(_icon2.default, { type: 'search' }),
                        ' \u67E5\u770B\u539F\u56FE'
                    )
                ),
                _react2.default.createElement(
                    'div',
                    { className: 'pictureWrapper' },
                    _react2.default.createElement(
                        _spin2.default,
                        { spinning: this.state.loading },
                        _react2.default.createElement('img', {
                            // ref={node => {
                            //     if (node) {
                            //         this.calcHeight(node);
                            //     }
                            // }}
                            className: 'picture',
                            src: (0, _helper.addImageProcess)(list[cIndex], { large: true }),
                            alt: list[cIndex],
                            style: {
                                transform: 'rotate(' + this.state.direction * 90 + 'deg)',
                                opacity: this.state.loading ? 0 : 1,
                                transition: '0.3s opacity'
                            },
                            onLoad: this.onImgLoad,
                            onError: this.onImageError
                        })
                    ),
                    _react2.default.createElement(
                        'div',
                        { className: 'tools' },
                        list.length > 1 && _react2.default.createElement('div', {
                            onClick: this.onPrev,
                            className: (0, _classnames2.default)("item", "left")
                        }),
                        _react2.default.createElement('div', { onClick: onFold, className: (0, _classnames2.default)("item", "shrink") }),
                        list.length > 1 && _react2.default.createElement('div', {
                            onClick: this.onNext,
                            className: (0, _classnames2.default)("item", "right")
                        })
                    )
                ),
                list.length > 1 && _react2.default.createElement(
                    'div',
                    { className: 'list' },
                    list.map(function (item, index) {
                        return _react2.default.createElement(
                            'div',
                            {
                                className: (0, _classnames2.default)({
                                    "wrapper": true,
                                    "active": index === cIndex
                                }),
                                key: item
                            },
                            _react2.default.createElement('div', {
                                className: (0, _classnames2.default)({
                                    "thumbnail": true
                                }),
                                style: {
                                    backgroundImage: 'url(' + (0, _helper.addImageProcess)(item, {
                                        small: true
                                    }) + ')'
                                },
                                onClick: function onClick() {
                                    _this2.setIndex(index);
                                }
                            })
                        );
                    })
                )
            );
        }
    }]);

    return ImagePreviewer;
}(_react2.default.Component);

exports.default = ImagePreviewer;
//# sourceMappingURL=ImagePreviewer.js.map