@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
66 lines (61 loc) • 4.98 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_core_1 = require("@selfcommunity/react-core");
const react_intl_1 = require("react-intl");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const contribution_1 = require("../../../utils/contribution");
const DateTimeAgo_1 = tslib_1.__importDefault(require("../../../shared/DateTimeAgo"));
const BaseItem_1 = tslib_1.__importDefault(require("../../../shared/BaseItem"));
const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
const constants_1 = require("../constants");
const classes = {
root: `${constants_1.PREFIX}-poll-snippet-root`,
avatar: `${constants_1.PREFIX}-avatar`,
username: `${constants_1.PREFIX}-username`,
title: `${constants_1.PREFIX}-title`,
activityAt: `${constants_1.PREFIX}-activity-at`
};
const Root = (0, styles_1.styled)(BaseItem_1.default, {
name: constants_1.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
*/
function PollSnippet(props) {
// PROPS
const { feedObj = null, className = null, autoHide = false } = props, rest = tslib_1.__rest(props, ["feedObj", "className", "autoHide"]);
// CONTEXT
const scRoutingContext = (0, react_core_1.useSCRouting)();
// STATE
const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
// RENDER
if (!autoHide) {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, { elevation: 0, className: (0, classnames_1.default)(classes.root, className), image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !feedObj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: feedObj.author.username, variant: "circular", src: feedObj.author.avatar, className: classes.avatar }) })) })), primary: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { className: classes.username, onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }, { children: feedObj.author.username })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.title }, { children: feedObj.poll.title }))] }), disableTypography: true, secondary: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObj), (0, contribution_1.getRouteData)(feedObj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { component: "span", date: feedObj.added_at }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObj), (0, contribution_1.getRouteData)(feedObj)), variant: "text", color: "secondary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.pollSnippet.button.seeItem", defaultMessage: "ui.pollSuggestionWidget.pollSnippet.button.seeItem" }) }))] })) }), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
}
return null;
}
exports.default = PollSnippet;