@selfcommunity/react-ui/lib/esm/shared/UserAvatar/UserAvatar.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { Badge, Avatar } from '@mui/material';
import classNames from 'classnames';
import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
const PREFIX = 'SCUserAvatar';
const classes = {
    root: `${PREFIX}-root`,
    badgeContent: `${PREFIX}-badge-content`,
    badgeContentSmaller: `${PREFIX}-badge-content-xs`
};
const Root = styled(Badge, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
export default function UserAvatar(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, children = null, hide = false, smaller = false } = props, rest = __rest(props, ["className", "children", "hide", "smaller"]);
    // PREFERENCES
    const scPreferences = useSCPreferences();
    const preferences = useMemo(() => {
        const _preferences = {};
        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
        return _preferences;
    }, [scPreferences.preferences]);
    return (_jsx(Root, Object.assign({ classes: { root: classNames(className, classes.root) }, invisible: hide, overlap: "circular", anchorOrigin: { vertical: 'top', horizontal: 'right' }, showZero: !preferences, badgeContent: _jsx(Avatar, { className: classNames(classes.badgeContent, { [classes.badgeContentSmaller]: smaller }), alt: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL], src: preferences[SCPreferences.STAFF_STAFF_BADGE_ICON] }) }, rest, { children: children })));
}