@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
128 lines (119 loc) • 8.7 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { styled } from '@mui/material/styles';
import { CardContent, Icon, Typography } from '@mui/material';
import classNames from 'classnames';
import Widget from '../Widget';
import { useThemeProps } from '@mui/system';
import { PREFIX } from './constants';
import { FormattedMessage, useIntl } from 'react-intl';
import { SCGroupPrivacyType } from '@selfcommunity/types';
import PubSub from 'pubsub-js';
import { SCPreferences, useSCFetchGroup, useSCPreferences } from '@selfcommunity/react-core';
import GroupInfoWidgetSkeleton from './Skeleton';
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
import User from '../User';
const classes = {
root: `${PREFIX}-root`,
title: `${PREFIX}-title`,
description: `${PREFIX}-description`,
privacy: `${PREFIX}-privacy`,
privacyTitle: `${PREFIX}-privacy-title`,
visibility: `${PREFIX}-visibility`,
visibilityTitle: `${PREFIX}-visibility-title`,
admin: `${PREFIX}-admin`,
date: `${PREFIX}-date`
};
const Root = styled(Widget, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
/**
* > API documentation for the Community-JS Group Info Widget component. Learn about the available props and the CSS API.
*
*
* This component renders a widget containing the group info.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/GroupInfoWidget)
#### Import
```jsx
import {GroupInfoWidget} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCGroupInfoWidget` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCGroupInfoWidget-root|Styles applied to the root element.|
|title|.SCGroupInfoWidget-title|Styles applied to the title element.|
*
* @param inProps
*/
export default function GroupInfoWidget(inProps) {
var _a;
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, group, groupId, onHeightChange, onStateChange } = props, rest = __rest(props, ["className", "group", "groupId", "onHeightChange", "onStateChange"]);
// HOOKS
const { scGroup, setSCGroup } = useSCFetchGroup({ id: groupId, group });
// INTL
const intl = useIntl();
// REFS
const updatesSubscription = useRef(null);
// PREFERENCES
const scPreferences = useSCPreferences();
const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
/**
* Subscriber for pubsub callback
*/
const onChangeGroupHandler = useCallback((_msg, data) => {
if (data && scGroup.id === data.id) {
setSCGroup(data);
}
}, [scGroup, setSCGroup]);
/**
* On mount, subscribe to receive groups updates (only edit)
*/
useEffect(() => {
if (scGroup) {
updatesSubscription.current = PubSub.subscribe(`${SCTopicType.GROUP}.${SCGroupEventType.EDIT}`, onChangeGroupHandler);
}
return () => {
updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
};
}, [scGroup]);
/**
* Loading group
*/
if (!scGroup) {
return _jsx(GroupInfoWidgetSkeleton, {});
}
/**
* Renders root object
*/
return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.title", defaultMessage: "ui.groupInfoWidget.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scGroup.description })), privateEnabled && (_jsx(Typography, Object.assign({ component: "div", className: classes.privacy }, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.privacyTitle }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public", defaultMessage: "ui.groupInfoWidget.privacy.public" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public.info", defaultMessage: "ui.groupInfoWidget.privacy.public.info", values: {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (chunks) => _jsx("strong", { children: chunks })
} }) }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.privacyTitle }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.private", defaultMessage: "ui.groupInfoWidget.privacy.private" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.private.info", defaultMessage: "ui.groupInfoWidget.private.public.info", values: {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (chunks) => _jsx("strong", { children: chunks })
} }) }))] })) }))), privateEnabled && visibilityEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PRIVATE && (_jsx(Typography, Object.assign({ component: "div", className: classes.visibility }, { children: scGroup.visible ? (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.visibilityTitle }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (chunks) => _jsx("strong", { children: chunks })
} }) }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.visibilityTitle }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (chunks) => _jsx("strong", { children: chunks })
} }) }))] })) }))) })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.date }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } }) })), _jsxs(Typography, Object.assign({ component: "div", className: classes.admin }, { children: [_jsx(FormattedMessage, { id: "ui.groupInfoWidget.admin", defaultMessage: "ui.groupInfoWidget.admin", values: {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (chunks) => _jsx("strong", { children: chunks })
} }), _jsx(User, { userId: (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id, elevation: 0, actions: _jsx(_Fragment, {}) })] }))] }) })));
}