@git-temporal/git-temporal-react
Version:
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
46 lines (45 loc) • 2.07 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const md5_1 = __importDefault(require("md5"));
const AuthorPlaceholderImage_1 = require("app/components/AuthorPlaceholderImage");
const styles_1 = require("app/styles");
class AuthorGravatarImage extends react_1.default.Component {
constructor(props) {
super(props);
this.state = {
emailsIndex: 0,
};
this.onImageNotFound = this.onImageNotFound.bind(this);
}
componentDidUpdate(newProps) {
newProps.emails.forEach((email, index) => {
if (email !== this.props.emails[index]) {
this.setState({ emailsIndex: 0 });
}
});
}
render() {
const { width = 75, height = 75, emails } = this.props;
const { emailsIndex } = this.state;
const notFound = emailsIndex >= emails.length;
const outerStyle = styles_1.style(this.props.style, {
width,
height,
display: 'inline-block',
});
const gravatarEmail = (emails[emailsIndex] || '')
.toLocaleLowerCase()
.replace(/\s/g, '');
const gravatarUrl = `https://www.gravatar.com/avatar/${md5_1.default(gravatarEmail)}?s=${width}&d=404`;
const imageStyle = styles_1.style({ width, maxHeight: height });
return (react_1.default.createElement("div", { style: outerStyle }, notFound ? (react_1.default.createElement(AuthorPlaceholderImage_1.AuthorPlaceholderImage, { holderForEmails: emails, width: width, height: height })) : (react_1.default.createElement("img", { "data-for": emails[emailsIndex], style: imageStyle, src: gravatarUrl, onError: this.onImageNotFound }))));
}
onImageNotFound() {
this.setState({ emailsIndex: this.state.emailsIndex + 1 });
}
}
exports.AuthorGravatarImage = AuthorGravatarImage;