UNPKG

@selfcommunity/react-ui

Version:

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

128 lines (119 loc) • 8.7 kB
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, {}) })] }))] }) }))); }