@fluentui/react-northstar
Version:
A themable React component library.
150 lines (148 loc) • 5.03 kB
JavaScript
import { getElementType, useUnhandledProps, useAccessibility, useFluentContext, useStyles, useTelemetry, mergeVariablesOverrides } from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { createShorthandFactory, commonPropTypes, createShorthand } from '../../utils';
import { AvatarStatus } from './AvatarStatus';
import { AvatarImage } from './AvatarImage';
import { AvatarIcon } from './AvatarIcon';
import { AvatarLabel } from './AvatarLabel';
export var avatarClassName = 'ui-avatar';
/**
* An Avatar is a graphical representation of a user.
*/
export var Avatar = /*#__PURE__*/function () {
var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = useFluentContext();
var _useTelemetry = useTelemetry(Avatar.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var accessibility = props.accessibility,
className = props.className,
design = props.design,
getInitials = props.getInitials,
label = props.label,
icon = props.icon,
image = props.image,
name = props.name,
square = props.square,
size = props.size,
status = props.status,
styles = props.styles,
variables = props.variables;
var getA11Props = useAccessibility(accessibility, {
debugName: Avatar.displayName,
rtl: context.rtl
});
var _useStyles = useStyles(Avatar.displayName, {
className: avatarClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
size: size,
square: square
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
}
}),
classes = _useStyles.classes;
var ElementType = getElementType(props);
var unhandledProps = useUnhandledProps(Avatar.handledProps, props);
var imageElement = createShorthand(AvatarImage, image, {
defaultProps: function defaultProps() {
return getA11Props('image', {
fluid: true,
avatar: !square,
title: name,
size: size
});
}
});
var iconElement = createShorthand(AvatarIcon, icon, {
defaultProps: function defaultProps() {
return getA11Props('icon', {
title: name,
size: size,
square: square
});
}
});
var labelElement = createShorthand(AvatarLabel, label || {}, {
defaultProps: function defaultProps() {
return getA11Props('label', {
content: getInitials(name),
circular: !square,
title: name,
size: size,
square: square
});
}
});
var hasGlyph = !!image || !!icon;
var result = /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
className: classes.root,
ref: ref
}, unhandledProps)), hasGlyph && (imageElement || iconElement), !hasGlyph && labelElement, createShorthand(AvatarStatus, status, {
defaultProps: function defaultProps() {
return getA11Props('status', {
size: size
});
},
overrideProps: function overrideProps(predefinedProps) {
return {
variables: mergeVariablesOverrides(variables, predefinedProps.variables)
};
}
}));
setEnd();
return result;
});
Avatar.displayName = 'Avatar';
Avatar.defaultProps = {
size: 'medium',
getInitials: function getInitials(name) {
if (!name) {
return '';
}
var reducedName = name.replace(/\s+/g, ' ').replace(/\s*\(.*?\)\s*/g, ' ').replace(/\s*{.*?}\s*/g, ' ').replace(/\s*\[.*?]\s*/g, ' ');
var initials = reducedName.split(' ').filter(function (item) {
return item !== '';
}).map(function (item) {
return item.charAt(0);
}).reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, '');
if (initials.length > 2) {
return initials.charAt(0) + initials.charAt(initials.length - 1);
}
return initials;
}
};
Avatar.propTypes = Object.assign({}, commonPropTypes.createCommon({
children: false,
content: false
}), {
name: PropTypes.string,
icon: customPropTypes.shorthandAllowingChildren,
image: customPropTypes.itemShorthandWithoutJSX,
label: customPropTypes.itemShorthand,
square: PropTypes.bool,
size: customPropTypes.size,
status: customPropTypes.itemShorthand,
getInitials: PropTypes.func
});
Avatar.handledProps = Object.keys(Avatar.propTypes);
Avatar.create = createShorthandFactory({
Component: Avatar,
mappedProp: 'name'
});
return Avatar;
}();
//# sourceMappingURL=Avatar.js.map