{"size": 1460, "ext": "js", "max_stars_repo_path": "ditto/static/flux-chat/js/components/Avatar.react.js", "max_stars_repo_name": "Kvoti/ditto", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "ditto/static/flux-chat/js/components/Avatar.react.js", "max_issues_repo_name": "Kvoti/ditto", "max_issues_repo_issues_event_min_datetime": "2015-11-10T15:17:22.000Z", "max_issues_repo_issues_event_max_datetime": "2015-11-12T11:07:02.000Z", "max_forks_repo_path": "ditto/static/flux-chat/js/components/Avatar.react.js", "max_forks_repo_name": "Kvoti/ditto", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 9, "max_forks_count": null, "avg_line_length": 27.037037037, "max_line_length": 93, "alphanum_fraction": 0.5636986301}
var React = require('react');
var ProfileLink = require('../../../js/components/ProfileLink.jsx');
var avatarSVGs = $('#avatar_svgs').text();

var Avatar = React.createClass({
    propTypes: {
        username: React.PropTypes.string.isRequired,
        avatar: React.PropTypes.string.isRequired,
        size: React.PropTypes.number,
        link: React.PropTypes.bool,
    },

    getDefaultProps () {
        return {
            size: 50,
            link: true
        }
    },

    render () {
        var avatar = (
           <div className="avatar"
            style={{width:this.props.size,margin:'auto'}}
            dangerouslySetInnerHTML={{__html: this._avatarSVG()}}
                />
        );
        // TODO wrapping in a link might be better done in the parent,
        // or create a LinkedAvatar component?
        if (this.props.link) {
            avatar = (
                <ProfileLink username={this.props.username}>
                    {avatar}
                </ProfileLink>
            );
        }
	return avatar;
    },

    _avatarSVG () {
	// TODO better way to generate svg without jquery/outerHTML, convert svg to react component?
	var avatarSVG = $(avatarSVGs);
	avatarSVG.find('>g[id!=' + this.props.avatar + ']').remove();
	avatarSVG.find('>g').show();
	avatarSVG.attr({
	    width: this.props.size,
	    height: this.props.size
	});
	return avatarSVG = avatarSVG.get(0).outerHTML;
    },

});

module.exports = Avatar;
