@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
53 lines (52 loc) • 4.22 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { CacheStrategies } from '@selfcommunity/utils';
import { useSCFetchContributors } from '@selfcommunity/react-core';
import { Avatar, AvatarGroup, Box, Button, List, ListItem, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import BaseDialog from '../../../shared/BaseDialog';
import CentralProgress from '../../../shared/CentralProgress';
import InfiniteScroll from '../../../shared/InfiniteScroll';
import User from '../../User';
import classNames from 'classnames';
import ContributorsSkeleton from './Skeleton';
import { PREFIX } from '../constants';
const classes = {
root: `${PREFIX}-contributors-root`,
avatarGroup: `${PREFIX}-contributors-avatarGroup`,
btnParticipants: `${PREFIX}-contributors-btn-participants`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'ContributorsRoot'
})(() => ({}));
export default function ContributorsFeedObject(props) {
// PROPS
const { className = null, feedObjectId = null, feedObject = null, feedObjectType = null, ContributorsSkeletonProps = {}, cacheStrategy = CacheStrategies.CACHE_FIRST } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "ContributorsSkeletonProps", "cacheStrategy"]);
const contributorsObject = useSCFetchContributors({
id: feedObjectId,
feedObject,
feedObjectType,
pageSize: 10,
cacheStrategy
});
// STATE
const [openContributorsDialog, setOpenContributorsDialog] = useState(false);
/**
* On mount fetches contributors
*/
useEffect(() => {
if (contributorsObject.feedObject) {
contributorsObject.getNextPage();
}
}, [contributorsObject.feedObject]);
/**
* Renders root object (if obj)
*/
if (!contributorsObject.feedObject) {
return null;
}
return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, { children: contributorsObject.isLoadingNext && !openContributorsDialog ? (_jsx(ContributorsSkeleton, Object.assign({}, ContributorsSkeletonProps))) : (_jsx(_Fragment, { children: contributorsObject.contributors.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Button, Object.assign({ variant: "text", onClick: () => setOpenContributorsDialog(true), classes: { root: classes.btnParticipants }, color: "inherit" }, { children: [_jsx(FormattedMessage, { id: 'ui.feedObject.contributors.participants', defaultMessage: 'ui.feedObject.contributors.participants' }), ":", _jsxs(AvatarGroup, Object.assign({}, rest, { children: [contributorsObject.contributors.map((c, i) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, i))), [...Array(Math.max(contributorsObject.total - contributorsObject.contributors.length, 0))].map((x, i) => (_jsx(Avatar, {}, i)))] }))] })), openContributorsDialog && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.feedObject.contributors.title", id: "ui.feedObject.contributors.title", values: { total: contributorsObject.total } }), onClose: () => setOpenContributorsDialog(false), open: openContributorsDialog }, { children: contributorsObject.isLoadingNext ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: contributorsObject.contributors.length, next: contributorsObject.getNextPage(), hasMoreNext: Boolean(contributorsObject.next), loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.contributors.noOtherContributors", defaultMessage: "ui.feedObject.contributors.noOtherContributors" }) })) }, { children: _jsx(List, { children: contributorsObject.contributors.map((c, i) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: c, sx: { m: 0 }, onClick: () => setOpenContributorsDialog(false) }, c.id) }, i))) }) }))) })))] })) : null })) }) })));
}