@selfcommunity/react-ui/lib/esm/components/User/User.js

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

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Avatar, Badge, Button, Chip } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { Link, SCPreferences, SCRoutes, useSCFetchUser, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
import classNames from 'classnames';
import React, { useMemo, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import BaseItemButton from '../../shared/BaseItemButton';
import UserAvatar from '../../shared/UserAvatar';
import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
import ConnectionUserButton from '../ConnectionUserButton';
import { PREFIX } from './constants';
import UserSkeleton from './Skeleton';
const messages = defineMessages({
    userFollowers: {
        id: 'ui.user.userFollowers',
        defaultMessage: 'ui.user.userFollowers'
    }
});
const classes = {
    root: `${PREFIX}-root`,
    avatar: `${PREFIX}-avatar`,
    staffBadgeLabel: `${PREFIX}-staff-badge-label`,
    groupAdminBadgeLabel: `${PREFIX}-group-admin-badge-label`
};
const Root = styled(BaseItemButton, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
/**
 * > API documentation for the Community-JS User component. Learn about the available props and the CSS API.
 *
 *
 * This component renders a user item.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/User)

 #### Import

 ```jsx
 import {User} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCUser` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCUser-root|Styles applied to the root element.|
 |avatar|.SCUser-avatar|Styles applied to the avatar element.|
 |staffBadgeLabel|.SCUser-staff-badge-label|Styles applied to the staff badge label element.|

 *
 * @param inProps
 */
export default function User(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = null, secondary = null } = props, rest = __rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps", "secondary"]);
    // STATE
    const { scUser } = useSCFetchUser({ id: userId, user });
    // CONTEXT
    const scRoutingContext = useSCRouting();
    // 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]);
    const hasBadge = scUser && scUser.community_badge;
    const [openAlert, setOpenAlert] = useState(false);
    // INTL
    const intl = useIntl();
    /**
     * Render authenticated actions
     * @return {JSX.Element}
     */
    function renderAuthenticatedActions() {
        return (_jsxs(React.Fragment, { children: [handleIgnoreAction && (_jsx(Button, Object.assign({ size: "small", onClick: handleIgnoreAction }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.user.ignore", id: "ui.user.ignore" }) }))), _jsx(ConnectionUserButton, Object.assign({ user: scUser }, followConnectUserButtonProps))] }));
    }
    /**
     * Renders user object
     */
    if (!scUser) {
        return _jsx(UserSkeleton, { elevation: elevation });
    }
    /**
     * Renders root object
     */
    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: buttonProps !== null && buttonProps !== void 0 ? buttonProps : (scUser.deleted
                    ? { onClick: () => setOpenAlert(true) }
                    : { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }), image: badgeContent ? (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: badgeContent }, { children: _jsx(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))) : (_jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))), primary: (hasBadge && preferences) || isGroupAdmin ? (_jsxs(_Fragment, { children: [scUser.username, _jsx(Chip, { component: "span", className: isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel, size: "small", label: isGroupAdmin ? (_jsx(FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL]) })] })) : (scUser.username), secondary: secondary || (showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description), actions: actions !== null && actions !== void 0 ? actions : renderAuthenticatedActions() })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
}