@gravityforms/components/react/admin/modules/Gravatar/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, PropTypes, classnames } from '@gravityforms/libraries';
import Image from '../../elements/Image';

const { forwardRef } = React;

/**
 * @module Gravatar
 * @description Renders a Gravatar image.
 *
 * @since 4.0.7
 *
 * @param {object}  props                  Component props.
 * @param {string}  props.altText          The alt text for the image.
 * @param {boolean} props.circular         Whether to display the image as a circle.
 * @param {string}  props.customAttributes The custom attributes for the component.
 * @param {string}  props.customClasses    The custom classes for the component.
 * @param {string}  props.defaultImage     The default image to use if the email address does not have a Gravatar. One of `404`, `mp`, `identicon`, `monsterid`, `wavatar`, `retro`, `robohash`, `blank`, or a URL.
 * @param {string}  props.emailHash        The email hash for the Gravatar.
 * @param {boolean} props.forceDefault     Whether to force the default image to be used.
 * @param {number}  props.height           The height of the image.
 * @param {object}  props.imageAttributes  The custom attributes for the image.
 * @param {string}  props.rating           The rating for the Gravatar image. One of `g`, `pg`, `r`, or `x`.
 * @param {number}  props.size             The size of the requested Gravatar image.
 * @param {number}  props.width            The width of the image.
 *
 * @return {JSX.Element} Return the Gravatar component in React.
 *
 * @example
 * import Gravatar from '@gravityforms/components/react/admin/modules/Gravatar';
 *
 * return (
 *     <Gravatar
 *         altText="Gravatar"
 *         defaultImage="mp"
 *         emailHash="8486aca7237c742c03f9b3d5ee3789fabad38a63868b89a9646175fafe297297"
 *         forceDefault={ true }
 *         height={ 100 }
 *         size={ 100 }
 *         width={ 100 }
 *     />
 * );
 *
 */
const Gravatar = forwardRef( ( {
	altText = '',
	circular = false,
	customAttributes = {},
	customClasses = [],
	defaultImage = '',
	emailHash = '',
	forceDefault = false,
	height = 0,
	imageAttributes = {},
	rating = '',
	size = 0,
	width = 0,
}, ref ) => {
	const gravatarUrlProps = [];
	if ( size ) {
		gravatarUrlProps.push( `s=${ size }` );
	}
	if ( defaultImage ) {
		gravatarUrlProps.push( `d=${ defaultImage }` );
	}
	if ( forceDefault ) {
		gravatarUrlProps.push( 'f=y' );
	}
	if ( rating ) {
		gravatarUrlProps.push( `r=${ rating }` );
	}
	const gravatarUrlQueryString = gravatarUrlProps.length ? `?${ gravatarUrlProps.join( '&' ) }` : '';
	const gravatarUrl = `https://gravatar.com/avatar/${ emailHash }${ gravatarUrlQueryString }`;

	const props = {
		...customAttributes,
		asBg: true,
		altText,
		aspectRatio: height && width ? width / height : 1,
		customClasses: classnames(
			{
				'gform-gravatar': true,
				'gform-gravatar--circular': circular,
			},
			...customClasses,
		),
		ref,
		url: gravatarUrl,
		imageAttributes: {
			...imageAttributes,
			customClasses: classnames(
				[ 'gform-gravatar__image' ],
				imageAttributes.customClasses || [],
			),
		},
		width,
	};

	return (
		<Image { ...props } />
	);
} );

Gravatar.propTypes = {
	altText: PropTypes.string,
	circular: PropTypes.bool,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.array,
	defaultImage: PropTypes.string,
	emailHash: PropTypes.string.isRequired,
	forceDefault: PropTypes.bool,
	height: PropTypes.number,
	imageAttributes: PropTypes.object,
	rating: PropTypes.string,
	size: PropTypes.number,
	width: PropTypes.number,
};

export default Gravatar;