@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
244 lines (240 loc) • 16.5 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 react_intl_1 = require("react-intl");
const material_1 = require("@mui/material");
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const Incubator_1 = tslib_1.__importDefault(require("../Incubator"));
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
const CentralProgress_1 = tslib_1.__importDefault(require("../../shared/CentralProgress"));
const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
const User_1 = tslib_1.__importDefault(require("../User"));
const Errors_1 = require("../../constants/Errors");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const SocialShare_1 = require("../../constants/SocialShare");
const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
const messages = (0, react_intl_1.defineMessages)({
intro: {
id: 'ui.incubatorDetail.intro',
defaultMessage: 'ui.incubatorDetail.intro'
}
});
const PREFIX = 'SCIncubatorDetail';
const classes = {
root: `${PREFIX}-root`,
avatar: `${PREFIX}-avatar`,
title: `${PREFIX}-title`,
author: `${PREFIX}-author`,
shareCard: `${PREFIX}-share-card`,
copyUrlForm: `${PREFIX}-copy-url-form`,
copyButton: `${PREFIX}-copy-button`,
copyText: `${PREFIX}-copy-text`,
shareSection: `${PREFIX}-share-section`,
socialShareButton: `${PREFIX}-social-share-button`,
subscribers: `${PREFIX}-subscribers`,
shareMenuIcon: `${PREFIX}-share-Menu-icon`
};
const Root = (0, styles_1.styled)(BaseDialog_1.default, {
name: PREFIX,
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({
' & .MuiCardContent-root': {
'&:last-child': {
paddingBottom: 0
}
},
[theme.breakpoints.down(500)]: {
minWidth: 300
},
[`& .${classes.avatar}`]: {
marginRight: theme.spacing(1),
marginBottom: theme.spacing(3)
},
[`& .${classes.title}`]: {
fontSize: '1rem',
whiteSpace: 'pre-line'
},
[`& .${classes.copyUrlForm}`]: {
flexDirection: 'row',
marginBottom: theme.spacing(1)
},
[`& .${classes.copyButton}`]: {
borderRadius: 0
},
[`& .${classes.copyText}`]: {
width: '80%',
'& .MuiInputBase-root': {
borderRadius: 0,
'& .MuiOutlinedInput-input': {
padding: theme.spacing(1)
}
}
},
[`& .${classes.shareSection}`]: {
display: 'flex',
gap: theme.spacing(),
marginTop: theme.spacing(),
marginBottom: theme.spacing(3)
},
[`& .${classes.socialShareButton}`]: {
marginRight: theme.spacing()
},
[`& .${classes.subscribers}`]: {
marginTop: theme.spacing(),
'& .MuiAvatar-root': {
color: theme.palette.common.white,
border: '2px solid #FFF'
}
}
}));
/**
* > API documentation for the Community-JS Incubator Detail component. Learn about the available props and the CSS API.
#### Import
```jsx
import {IncubatorDetail} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCIncubatorDetail` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCIncubatorDetail-root|Styles applied to the root element.|
|avatar|.SCIncubatorDetail-avatar|Styles applied to the avatar element.|
|title|.SCIncubatorDetail-title|Styles applied to the title element.|
|author|.SCIncubatorDetail-author|Styles applied to the author element.|
|shareCard|.SCIncubatorDetail-share-card|Styles applied to the section card.|
|copyUrlForm|.SCIncubatorDetail-copy-url-form|Styles applied to the url copy section.|
|copyButton|.SCIncubatorDetail-copy-button|Styles applied to the copy button element.|
|copyText|.SCIncubatorDetail-copy-text|Styles applied to the text copy element.|
|shareSection|.SCIncubatorDetail-share-section|Styles applied to the social share section.|
|socialShareButton|.SCIncubatorDetail-social-share-button|Styles applied to the social share button.|
|subscribers|.SCIncubatorDetail-subscribers|Styles applied to the subscribers avatar section.|
* @param inProps
*/
function IncubatorDetail(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: PREFIX
});
const { incubator, incubatorId, className, open, onClose, IncubatorProps = {}, onSubscriptionsUpdate } = props, rest = tslib_1.__rest(props, ["incubator", "incubatorId", "className", "open", "onClose", "IncubatorProps", "onSubscriptionsUpdate"]);
// STATE
const [alert, setAlert] = (0, react_1.useState)(false);
const { scIncubator, setSCIncubator } = (0, react_core_1.useSCFetchIncubator)({ id: incubator.id, incubator });
const [loading, setLoading] = (0, react_1.useState)(true);
const [next, setNext] = (0, react_1.useState)(incubator.id || scIncubator ? `${api_services_1.Endpoints.GetIncubatorSubscribers.url({ id: incubator ? incubator.id : scIncubator.id })}?limit=10` : null);
const [total, setTotal] = (0, react_1.useState)(0);
const [subscribers, setSubscribers] = (0, react_1.useState)([]);
const [openSubscribersDialog, setOpenSubscribersDialog] = (0, react_1.useState)(false);
const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
const scContext = (0, react_core_1.useSCContext)();
const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
const facebookShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED in scPreferencesContext.preferences &&
scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED].value;
const xShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED in scPreferencesContext.preferences &&
scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED].value;
const linkedinShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED in scPreferencesContext.preferences &&
scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED].value;
const scRoutingContext = (0, react_core_1.useSCRouting)();
const portal = scContext.settings.portal + scRoutingContext.url(react_core_1.SCRoutes.INCUBATOR_ROUTE_NAME, scIncubator);
const isSocialShareEnabled = facebookShareEnabled || xShareEnabled || linkedinShareEnabled;
// INTL
const intl = (0, react_intl_1.useIntl)();
// HANDLERS
/**
* Copies incubator path on clipboard and notifies user
*/
const copy = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
yield navigator.clipboard.writeText(portal);
setAlert(true);
});
/**
* Opens subscribers dialog
*/
function handleToggleSubscribersDialog() {
setOpenSubscribersDialog((prev) => !prev);
}
/**
* Handles incubator subscribe/unsubscribe callback
*/
function handleSubscribersUpdate(incubator, subscribed) {
let _subscribers = [];
if (subscribed) {
_subscribers = [...[scUserContext.user], ...subscribers];
}
else {
if (total < 5) {
_subscribers = [...subscribers.filter((u) => u.id !== scUserContext.user.id)];
}
else {
const _pSubscribers = subscribers.slice(0, 5).filter((u) => u.id !== scUserContext.user.id);
_subscribers = [..._pSubscribers, ...subscribers.slice(5)];
}
}
setTotal((prev) => prev + (subscribed ? 1 : -1));
setSubscribers(_subscribers);
setNext(null);
}
/**
* Handles subscription counter and subscribers update callbacks on subscribe/unsubscribe action
*/
const handleUpdates = (incubator, subscribed) => {
onSubscriptionsUpdate(incubator);
handleSubscribersUpdate(incubator, subscribed);
};
/**
* If id attempts to get the incubator by id
*/
(0, react_1.useEffect)(() => {
if (scIncubator) {
fetchSubscribers();
}
}, [scIncubator]);
/**
* Fetches incubator subscribers
*/
const fetchSubscribers = (0, react_1.useMemo)(() => () => {
if (next) {
api_services_1.http
.request({
url: next,
method: api_services_1.Endpoints.GetIncubatorSubscribers.method
})
.then((res) => {
if (res.status < 300) {
setSubscribers([...subscribers, ...res.data.results]);
setTotal(res.data['count']);
setNext(res.data['next']);
setLoading(false);
}
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}
}, [scIncubator, next, loading]);
/**
* If not incubator object returns null
*/
if (!scIncubator) {
return null;
}
/**
* Renders root element
*/
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: scIncubator.user.avatar, src: scIncubator.user.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [`${intl.formatMessage(messages.intro, { name: scIncubator.name })}`, " "] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null }, { children: ["@", scIncubator.user.username] })) }))] })] }), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: scIncubator, detailView: true, subscribeButtonProps: { onSubscribe: handleUpdates } }, IncubatorProps)), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.subscribers }, { children: loading && !scIncubator ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: total > 0 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleSubscribersDialog, disabled: loading || !scIncubator }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, Object.assign({}, rest, { children: [subscribers.map((u) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: u.username, src: u.avatar }, u.id))), [...Array(Math.max(0, total - subscribers.length))].map((x, i // Add max to 0 to prevent creation of array with negative index during state update
) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, {}, i)))] })) }))) : null })) })), openSubscribersDialog && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubatorDetail.subscribersSection.title", id: "ui.incubatorDetail.subscribersSection.title" }), " (", total, ")"] }), onClose: handleToggleSubscribersDialog, open: openSubscribersDialog }, { children: loading ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: total, next: fetchSubscribers, hasMoreNext: next !== null, loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.subscribersSection.noMoreSubscribers", defaultMessage: "ui.incubatorDetail.subscribersSection.noMoreSubscribers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: subscribers.map((s, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: s }, index) }, (s.id, index)))) }) }))) }))), (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ elevation: 1, className: classes.shareCard }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'h6' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.title", defaultMessage: "ui.incubatorDetail.shareSection.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'subtitle1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.share", defaultMessage: "ui.incubatorDetail.shareSection.share" }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.copyUrlForm }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.copyText, variant: "outlined", value: portal }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.copyButton, variant: "contained", onClick: copy }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.button.copy", defaultMessage: "ui.incubatorDetail.shareSection.button.copy" }) }))] })), alert && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.copied", defaultMessage: "ui.incubatorDetail.shareSection.copied" }) }))), isSocialShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'subtitle2' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.invite", defaultMessage: "ui.incubatorDetail.shareSection.invite" }) }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.shareSection }, { children: [facebookShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.FACEBOOK_SHARE + portal, 'facebook-share-dialog', 'width=626,height=436') }, { children: "facebook" }))), xShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.X_SHARE + portal, 'x-share-dialog', 'width=626,height=436') }, { children: "x" }))), linkedinShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.LINKEDIN_SHARE + portal, 'linkedin-share-dialog', 'width=626,height=436') }, { children: "linkedin" })))] }))] }) }))] }) })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
}
exports.default = IncubatorDetail;