@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
150 lines (141 loc) • 6.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const react_intl_1 = require("react-intl");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const UserProfile_1 = require("../../constants/UserProfile");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const types_1 = require("../../types");
const Errors_1 = require("../../constants/Errors");
const Tags_1 = tslib_1.__importStar(require("../../shared/Tags"));
const constants_1 = require("./constants");
const messages = (0, react_intl_1.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: `${constants_1.PREFIX}-root`,
field: `${constants_1.PREFIX}-field`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.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
*/
function UserInfo(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { className = null, userId = null, user = null, fields = [...UserProfile_1.DEFAULT_FIELDS] } = props, rest = tslib_1.__rest(props, ["className", "userId", "user", "fields"]);
// STATE
const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
// INTL
const intl = (0, react_intl_1.useIntl)();
// PREFERENCES
const scPreferences = (0, react_core_1.useSCPreferences)();
const metadataDefinitions = (0, react_1.useMemo)(() => {
if (scPreferences.preferences && react_core_1.SCPreferences.CONFIGURATIONS_USER_METADATA_DEFINITIONS in scPreferences.preferences) {
try {
return JSON.parse(scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_USER_METADATA_DEFINITIONS].value);
}
catch (e) {
utils_1.Logger.error(Errors_1.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 types_1.SCUserProfileFields.DATE_JOINED:
case types_1.SCUserProfileFields.DATE_OF_BIRTH:
return `${intl.formatDate(user[field], { year: 'numeric', month: 'numeric', day: 'numeric' })}`;
case types_1.SCUserProfileFields.TAGS:
return ((0, jsx_runtime_1.jsx)(Tags_1.default, { tags: user.tags.filter((t) => t.visible), type: Tags_1.TagsComponentType.LIST, direction: 'row', TagChipProps: { clickable: false, disposable: false } }));
case types_1.SCUserProfileFields.WEBSITE:
return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: user[field], target: '_blank' }, { children: user[field] })));
default:
return user[field];
}
};
if (!scUser || !metadataDefinitions) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
if (_fields.length === 0) {
return null;
}
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: _fields.map((field) => {
if (scUser[field]) {
if (field === types_1.SCUserProfileFields.TAGS) {
return scUser[field].length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.field }, { children: renderField(scUser, field) }), field)) : null;
}
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.field }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: metadataDefinitions[field] ? metadataDefinitions[field].label : intl.formatMessage(messages[(0, utils_1.camelCase)(field)]) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: renderField(scUser, field) }))] }), field));
}
return null;
}) })));
}
exports.default = UserInfo;