@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
63 lines (58 loc) • 4.15 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { Avatar, Box, Button, Stack, Typography } from '@mui/material';
import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { getContributionRouteName, getRouteData } from '../../../utils/contribution';
import DateTimeAgo from '../../../shared/DateTimeAgo';
import BaseItem from '../../../shared/BaseItem';
import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
import UserAvatar from '../../../shared/UserAvatar';
import { PREFIX } from '../constants';
const classes = {
root: `${PREFIX}-poll-snippet-root`,
avatar: `${PREFIX}-avatar`,
username: `${PREFIX}-username`,
title: `${PREFIX}-title`,
activityAt: `${PREFIX}-activity-at`
};
const Root = styled(BaseItem, {
name: PREFIX,
slot: 'PollSnippetRoot'
})(() => ({}));
/**
* > API documentation for the Community-JS PollSnippet component. Learn about the available props and the CSS API.
*
*
#### Import
```jsx
import {PollSnippet} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCPollSuggestionWidget-poll-snippet-root` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCPollSuggestionWidget-poll-snippet-root|Styles applied to the root element.|
|avatar|.SCPollSuggestionWidget-avatar|Styles applied to the avatar element.|
|username|.SCPollSuggestionWidget-username|Styles applied to the username element.|
|title|.SCPollSuggestionWidget-title|Styles applied to the title element.|
|activityAt|.SCPollSuggestionWidget-activity-at|Styles applied to activity section.|
* @param props
*/
export default function PollSnippet(props) {
// PROPS
const { feedObj = null, className = null, autoHide = false } = props, rest = __rest(props, ["feedObj", "className", "autoHide"]);
// CONTEXT
const scRoutingContext = useSCRouting();
// STATE
const [openAlert, setOpenAlert] = useState(false);
// RENDER
if (!autoHide) {
return (_jsxs(_Fragment, { children: [_jsx(Root, { elevation: 0, className: classNames(classes.root, className), image: _jsx(Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !feedObj.author.community_badge }, { children: _jsx(Avatar, { alt: feedObj.author.username, variant: "circular", src: feedObj.author.avatar, className: classes.avatar }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { className: classes.username, onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }, { children: feedObj.author.username })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.title }, { children: feedObj.poll.title }))] }), disableTypography: true, secondary: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(feedObj), getRouteData(feedObj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: "span", date: feedObj.added_at }) })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(getContributionRouteName(feedObj), getRouteData(feedObj)), variant: "text", color: "secondary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.pollSnippet.button.seeItem", defaultMessage: "ui.pollSuggestionWidget.pollSnippet.button.seeItem" }) }))] })) }), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
}
return null;
}