@fluentui/react-northstar
Version:
A themable React component library.
155 lines (152 loc) • 6.16 kB
JavaScript
;
exports.__esModule = true;
exports.avatarClassName = exports.Avatar = void 0;
var _reactBindings = require("@fluentui/react-bindings");
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../utils");
var _AvatarStatus = require("./AvatarStatus");
var _AvatarImage = require("./AvatarImage");
var _AvatarIcon = require("./AvatarIcon");
var _AvatarLabel = require("./AvatarLabel");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var avatarClassName = 'ui-avatar';
/**
* An Avatar is a graphical representation of a user.
*/
exports.avatarClassName = avatarClassName;
var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.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 = (0, _reactBindings.useAccessibility)(accessibility, {
debugName: Avatar.displayName,
rtl: context.rtl
});
var _useStyles = (0, _reactBindings.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 = (0, _reactBindings.getElementType)(props);
var unhandledProps = (0, _reactBindings.useUnhandledProps)(Avatar.handledProps, props);
var imageElement = (0, _utils.createShorthand)(_AvatarImage.AvatarImage, image, {
defaultProps: function defaultProps() {
return getA11Props('image', {
fluid: true,
avatar: !square,
title: name,
size: size
});
}
});
var iconElement = (0, _utils.createShorthand)(_AvatarIcon.AvatarIcon, icon, {
defaultProps: function defaultProps() {
return getA11Props('icon', {
title: name,
size: size,
square: square
});
}
});
var labelElement = (0, _utils.createShorthand)(_AvatarLabel.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, (0, _utils.createShorthand)(_AvatarStatus.AvatarStatus, status, {
defaultProps: function defaultProps() {
return getA11Props('status', {
size: size
});
},
overrideProps: function overrideProps(predefinedProps) {
return {
variables: (0, _reactBindings.mergeVariablesOverrides)(variables, predefinedProps.variables)
};
}
}));
setEnd();
return result;
});
exports.Avatar = Avatar;
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({}, _utils.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 = (0, _utils.createShorthandFactory)({
Component: Avatar,
mappedProp: 'name'
});
//# sourceMappingURL=Avatar.js.map