Viewer component

var React = require('react/addons');
var _ = require('lodash');
var ReactPropTypes = React.PropTypes;

var ServerAction = require('../actions/ServerAction');


var ImageViewer = React.createClass({

    propTypes: {
        image: ReactPropTypes.object
    },

    getInitialState: function() {
        return {
            mounted: false
        };
    },

    componentDidMount: function() {
        this._addEvent();
        this._mounting(this.props.image);
        this.setState({ mounted: true });
    },

    componentDidUpdate: function(prevProps, prevState) {
        if (this.state.mounted) {
            var box = React.findDOMNode(this.refs.image_wrapper),
                src = React.findDOMNode(this.refs.image_source);

            // Этот блок по видимому нужно тоже анимировать иначе, изображение не будет на своем месте
            $(box).css({
                position: 'initial',
                overflow: 'auto',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
            });

            // Тут нужно изменить параметры изображения на фулскрин
            $(src).css({

            });
        }
    },

    componentWillUnMount: function() {
        this._removeEvent();
    },

    _mounting: function(props) {
        var box = React.findDOMNode(this.refs.image_wrapper),
            src = React.findDOMNode(this.refs.image_source);

        var boxStyle = props.element.getBoundingClientRect(),
            srcStyle = $(props.element).find('img')[0];

        $(box).css({
            position: 'absolute',
            overflow: 'hidden',
            top: boxStyle.top,
            left: boxStyle.left,
            width: boxStyle.width,
            height: boxStyle.height,
        });

        $(src).css({
             position: 'absolute',
             top: '50%',
             left: '50%',
             margin: 0,
             padding: 0,
             border: 'none',
            'margin-top': srcStyle.style.marginTop,
            'margin-left': srcStyle.style.marginLeft,
             width: srcStyle.style.width,
             height: srcStyle.style.height
        });
    },

    _dismiss: function() {
        ServerAction.openImageViewer({ mounted: false });
    },

    /**
     * Обработчик клавиатуры
     *
     * esc [27] - закрыть просмотр
     */
    _handleKeyPress: function(event) {
        switch (event.keyCode) {
            case 27:
                this._dismiss();
                break;

            default:
                // do nothing
        }
    },

    /**
     * Event control
     */
    _addEvent: function() {
        document.addEventListener("keydown", this._handleKeyPress);
    },

    _removeEvent: function() {
        document.removeEventListener("keydown", this._handleKeyPress);
    },

    render: function() {
        return (
            <div className="image-wrapper" ref="wrapper">
                <div ref="image_wrapper">
                    <img src={this.props.image.object.internal_link} ref="image_source" />
                </div>
            </div>
        );
    }

});

module.exports = ImageViewer;