@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
31 lines • 1.76 kB
JavaScript
/** @jsx withSlots */
import { withSlots, getSlots } from '../../Foundation';
import { PersonaPresence } from '../../utilities/factoryComponents';
import { PersonaCoinImage } from './PersonaCoinImage/PersonaCoinImage';
import { DEFAULT_PERSONA_COIN_SIZE } from './PersonaCoin.styles';
import { hideInitialsWhenImageIsLoaded } from './propHelpers';
import PersonaCoinSize10 from './PersonaCoinSize10/PersonaCoinSize10';
import { PersonaCoinInitials } from './PersonaCoinInitials/PersonaCoinInitials';
export var PersonaCoinView = function (props) {
var coinSize = props.size || DEFAULT_PERSONA_COIN_SIZE;
var Slots = getSlots(props, {
root: 'div',
image: PersonaCoinImage,
initials: PersonaCoinInitials,
presence: PersonaPresence,
personaCoinSize10: PersonaCoinSize10
});
if (coinSize === 10) {
if (props.presence) {
// TODO: why do we need to pass size twice?
return withSlots(Slots.presence, { coinSize: coinSize, size: coinSize });
}
return withSlots(Slots.personaCoinSize10, null);
}
var initials = hideInitialsWhenImageIsLoaded(props) ? null : (withSlots(Slots.initials, { initials: props.initials, text: props.text, allowPhoneInitials: props.allowPhoneInitials }));
return (withSlots(Slots.root, null,
initials,
withSlots(Slots.image, { src: props.imageUrl, dimension: coinSize, onPhotoLoadingStateChange: props.onPhotoLoadingStateChange, imageShouldFadeIn: props.imageShouldFadeIn, imageShouldStartVisible: props.imageShouldStartVisible, imageAlt: props.imageAlt }),
withSlots(Slots.presence, { coinSize: coinSize, size: coinSize })));
};
//# sourceMappingURL=PersonaCoin.view.js.map