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

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

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Avatar, Box, styled, Typography } from '@mui/material';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import UserInfo, { UserInfoSkeleton } from '../UserInfo';
import BaseDialog from '../../shared/BaseDialog';
import { useSCFetchUser } from '@selfcommunity/react-core';
import { FormattedMessage } from 'react-intl';
import { PREFIX } from '../UserInfo/constants';
const classes = {
    root: `${PREFIX}-dialog-root`,
    caption: `${PREFIX}-caption`,
    avatar: `${PREFIX}-avatar`,
    username: `${PREFIX}-username`
};
const Root = styled(BaseDialog, {
    name: PREFIX,
    slot: 'DialogRoot'
})(() => ({}));
export default function UserInfoDialog(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, userId = null, user = null, UserInfoProps = {} } = props, rest = __rest(props, ["className", "userId", "user", "UserInfoProps"]);
    // HOOKS
    const { scUser } = useSCFetchUser({ id: userId, user });
    // RENDER
    const subtitle = (_jsxs(Box, Object.assign({ className: classes.caption }, { children: [_jsx(Avatar, { className: classes.avatar, src: scUser === null || scUser === void 0 ? void 0 : scUser.avatar }), _jsx(Typography, Object.assign({ className: classes.username, variant: "h6" }, { children: (scUser === null || scUser === void 0 ? void 0 : scUser.real_name) ? scUser === null || scUser === void 0 ? void 0 : scUser.real_name : scUser === null || scUser === void 0 ? void 0 : scUser.username }))] })));
    return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.userInfoDialog.title", defaultMessage: "ui.userInfoDialog.title" }), subtitle: subtitle, className: classNames(classes.root, className) }, rest, { children: scUser ? _jsx(UserInfo, Object.assign({}, UserInfoProps, { userId: userId, user: scUser })) : _jsx(UserInfoSkeleton, {}) })));
}