@selfcommunity/react-ui/lib/esm/components/UserInfo/UserInfo.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 { useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { Box, Typography } from '@mui/material';
import { defineMessages, useIntl } from 'react-intl';
import { camelCase, Logger } from '@selfcommunity/utils';
import { SCPreferences, useSCFetchUser, useSCPreferences } from '@selfcommunity/react-core';
import { DEFAULT_FIELDS } from '../../constants/UserProfile';
import UserInfoSkeleton from './Skeleton';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { SCUserProfileFields } from '../../types';
import { SCOPE_SC_UI } from '../../constants/Errors';
import Tags, { TagsComponentType } from '../../shared/Tags';
import { PREFIX } from './constants';
const messages = defineMessages({
    realName: {
        id: 'ui.userInfo.realName',
        defaultMessage: 'ui.userInfo.realName'
    },
    dateJoined: {
        id: 'ui.userInfo.dateJoined',
        defaultMessage: 'ui.userInfo.dateJoined'
    },
    bio: {
        id: 'ui.userInfo.bio',
        defaultMessage: 'ui.userInfo.bio'
    },
    location: {
        id: 'ui.userInfo.location',
        defaultMessage: 'ui.userInfo.location'
    },
    dateOfBirth: {
        id: 'ui.userInfo.dateOfBirth',
        defaultMessage: 'ui.userInfo.dateOfBirth'
    },
    description: {
        id: 'ui.userInfo.description',
        defaultMessage: 'ui.userInfo.description'
    },
    gender: {
        id: 'ui.userInfo.gender',
        defaultMessage: 'ui.userInfo.gender'
    },
    website: {
        id: 'ui.userInfo.website',
        defaultMessage: 'ui.userInfo.website'
    },
    tags: {
        id: 'ui.userInfo.website',
        defaultMessage: 'ui.userInfo.website'
    },
    fieldLink: {
        id: 'ui.userInfo.fieldLink',
        defaultMessage: 'ui.userInfo.fieldLink'
    }
});
const classes = {
    root: `${PREFIX}-root`,
    field: `${PREFIX}-field`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS User Info component. Learn about the available props and the CSS API.

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCUserInfo-root|Styles applied to the root element.|
 |field|.SCUserInfo-field|Styles applied to the field element.|

 * @param inProps
 */
export default function UserInfo(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className = null, userId = null, user = null, fields = [...DEFAULT_FIELDS] } = props, rest = __rest(props, ["className", "userId", "user", "fields"]);
    // STATE
    const { scUser } = useSCFetchUser({ id: userId, user });
    // INTL
    const intl = useIntl();
    // PREFERENCES
    const scPreferences = useSCPreferences();
    const metadataDefinitions = useMemo(() => {
        if (scPreferences.preferences && SCPreferences.CONFIGURATIONS_USER_METADATA_DEFINITIONS in scPreferences.preferences) {
            try {
                return JSON.parse(scPreferences.preferences[SCPreferences.CONFIGURATIONS_USER_METADATA_DEFINITIONS].value);
            }
            catch (e) {
                Logger.error(SCOPE_SC_UI, 'Error on parse user metadata.');
                return {};
            }
        }
        return null;
    }, [scPreferences.preferences]);
    // FIELDS
    const _fields = [...fields, ...Object.keys(metadataDefinitions)];
    // RENDER
    const renderField = (user, field) => {
        switch (field) {
            case SCUserProfileFields.DATE_JOINED:
            case SCUserProfileFields.DATE_OF_BIRTH:
                return `${intl.formatDate(user[field], { year: 'numeric', month: 'numeric', day: 'numeric' })}`;
            case SCUserProfileFields.TAGS:
                return (_jsx(Tags, { tags: user.tags.filter((t) => t.visible), type: TagsComponentType.LIST, direction: 'row', TagChipProps: { clickable: false, disposable: false } }));
            case SCUserProfileFields.WEBSITE:
                return (_jsx("a", Object.assign({ href: user[field], target: '_blank' }, { children: user[field] })));
            default:
                return user[field];
        }
    };
    if (!scUser || !metadataDefinitions) {
        return _jsx(UserInfoSkeleton, {});
    }
    if (_fields.length === 0) {
        return null;
    }
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _fields.map((field) => {
            if (scUser[field]) {
                if (field === SCUserProfileFields.TAGS) {
                    return scUser[field].length > 0 ? (_jsx(Box, Object.assign({ className: classes.field }, { children: renderField(scUser, field) }), field)) : null;
                }
                return (_jsxs(Box, Object.assign({ className: classes.field }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: metadataDefinitions[field] ? metadataDefinitions[field].label : intl.formatMessage(messages[camelCase(field)]) })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: renderField(scUser, field) }))] }), field));
            }
            return null;
        }) })));
}