@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
229 lines (228 loc) • 15.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 = tslib_1.__importStar(require("react"));
const react_intl_1 = require("react-intl");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
const SharesDialog_1 = tslib_1.__importDefault(require("./SharesDialog"));
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const MenuItem_1 = tslib_1.__importDefault(require("@mui/material/MenuItem"));
const ListItemIcon_1 = tslib_1.__importDefault(require("@mui/material/ListItemIcon"));
const Media_1 = require("../../../../constants/Media");
const Errors_1 = require("../../../../constants/Errors");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const notistack_1 = require("notistack");
const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
const types_1 = require("@selfcommunity/types");
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const contribution_1 = require("../../../../utils/contribution");
const SocialShare_1 = require("../../../../constants/SocialShare");
const Composer_1 = tslib_1.__importDefault(require("../../../Composer"));
const constants_1 = require("../../constants");
const messages = (0, react_intl_1.defineMessages)({
shares: {
id: 'ui.feedObject.share.shares',
defaultMessage: 'ui.feedObject.share.shares'
},
share: {
id: 'ui.feedObject.share.share',
defaultMessage: 'ui.feedObject.share.share'
}
});
const classes = {
root: `${constants_1.PREFIX}-action-share-root`,
divider: `${constants_1.PREFIX}-action-share-divider`,
inline: `${constants_1.PREFIX}-action-share-inline`,
button: `${constants_1.PREFIX}-action-share-button`,
viewAudienceButton: `${constants_1.PREFIX}-action-share-view-audience-button`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'ActionShareRoot'
})(() => ({}));
function Share(props) {
// PROPS
const { className = null, feedObjectId = null, feedObject = null, feedObjectType = types_1.SCContributionType.POST, withAction = true, withAudience = true, inlineAction = false } = props, rest = tslib_1.__rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "withAction", "withAudience", "inlineAction"]);
// STATE
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
const { obj, setObj } = (0, react_core_1.useSCFetchFeedObject)({ id: feedObjectId, feedObject, feedObjectType });
const [isSharing, setIsSharing] = (0, react_1.useState)(false);
const [isComposerOpen, setIsComposerOpen] = (0, react_1.useState)(false);
const [composerShareProps, setComposerShareProps] = (0, react_1.useState)(null);
const [openSharesDialog, setOpenSharesDialog] = (0, react_1.useState)(false);
const [anchorEl, setAnchorEl] = react_1.default.useState(null);
// CONTEXT
const scContext = (0, react_core_1.useSCContext)();
const scRoutingContext = (0, react_core_1.useSCRouting)();
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 scUserContext = (0, react_core_1.useSCUser)();
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
const domain = typeof location !== 'undefined' && location.origin ? location.origin : '';
const url = domain + scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj));
const isGroupPublic = (0, react_1.useMemo)(() => feedObject.group && feedObject.group.privacy === types_1.SCGroupPrivacyType.PUBLIC, [feedObject.group]);
const showShareAction = (0, react_1.useMemo)(() => {
return !scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || react_core_1.UserUtils.isStaff(scUserContext.user);
}, [scPreferencesContext, scUserContext.user]);
// INTL
const intl = (0, react_intl_1.useIntl)();
// HANDLERS
const handleOpenShareMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
/**
* Open/Close dialog shares
*/
function handleToggleSharesDialog() {
setOpenSharesDialog(!openSharesDialog);
}
/**
* Handles Composer onClose
*/
function handleComposerOnClose() {
setIsSharing(false);
setIsComposerOpen(false);
}
/**
* Handles Composer onSuccess
*/
function handleComposerOnSuccess() {
setObj(Object.assign({}, obj, { share_count: obj.share_count + 1 }));
handleComposerOnClose();
}
/**
* Performs follow/unfollow
* Post, Discussion, Status
*/
const performCreateMediaShare = (0, react_1.useMemo)(() => () => {
// Define share object id
let sharedObjectId = obj.id;
// Avoid to re-share an object with a shared_object in medias
const shareMedias = obj.medias.filter((media) => media.type === Media_1.MEDIA_TYPE_SHARE);
if (shareMedias.length) {
sharedObjectId = shareMedias[0].embed.metadata.id;
}
const isMediaEvent = obj.medias.some((media) => { var _a; return ((_a = media.embed) === null || _a === void 0 ? void 0 : _a.embed_type) === Media_1.MEDIA_EMBED_SC_SHARED_EVENT; });
return api_services_1.http
.request({
url: api_services_1.Endpoints.ComposerMediaCreate.url(),
method: api_services_1.Endpoints.ComposerMediaCreate.method,
data: {
type: Media_1.MEDIA_TYPE_SHARE,
[isMediaEvent ? 'event_object' : 'shared_object']: sharedObjectId
}
})
.then((res) => {
if (res.status >= 300) {
return Promise.reject(res);
}
return Promise.resolve(res.data);
});
}, [obj]);
/**
* Performs the contribution sharing
*/
function share(inCategories) {
if (!scUserContext.user) {
scContext.settings.handleAnonymousAction();
}
else {
if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
variant: 'warning',
autoHideDuration: 3000
});
}
else {
setIsSharing(true);
performCreateMediaShare()
.then((data) => {
setComposerShareProps(Object.assign({ medias: [data] }, (inCategories ? { categories: obj.categories } : {})));
setIsComposerOpen(true);
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
setIsSharing(false);
});
}
}
}
/**
* Get permalink
*/
function getPermalink() {
(0, utils_1.copyTextToClipboard)(url).then(() => {
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.permanentLinkCopied", defaultMessage: "ui.common.permanentLinkCopied" }), {
variant: 'success',
autoHideDuration: 3000
});
});
}
/**
* Renders audience with detail dialog
* @return {JSX.Element}
*/
function renderAudience() {
const sharesCount = obj.share_count;
let audience;
if (withAudience) {
if (!obj) {
audience = ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", disabled: true, color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 18, width: 50 }) })));
}
else {
audience = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handleToggleSharesDialog, disabled: sharesCount < 1, classes: { root: classes.viewAudienceButton } }, { children: `${intl.formatMessage(messages.shares, { total: sharesCount })}` })), openSharesDialog && sharesCount > 0 && ((0, jsx_runtime_1.jsx)(SharesDialog_1.default, { feedObject: obj, feedObjectType: obj.type, open: openSharesDialog, onClose: handleToggleSharesDialog }))] }));
}
}
return audience;
}
function renderShareMenuItems() {
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(!feedObject.group || isGroupPublic) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showShareAction && ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, Object.assign({ onClick: () => share(false) }, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "redo" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.share.shareNow", defaultMessage: "ui.feedObject.share.shareNow" }) })] }))), facebookShareEnabled && ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, Object.assign({ onClick: () => window.open(SocialShare_1.FACEBOOK_SHARE + url, 'facebook-share-dialog', 'width=626,height=436') }, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "facebook" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.share.facebook", defaultMessage: "ui.feedObject.share.facebook" }) })] }))), xShareEnabled && ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, Object.assign({ onClick: () => window.open(SocialShare_1.X_SHARE + url, 'x-share-dialog', 'width=626,height=436') }, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "twitter" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.share.x", defaultMessage: "ui.feedObject.share.x" }) })] }))), linkedinShareEnabled && ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, Object.assign({ onClick: () => window.open(SocialShare_1.LINKEDIN_SHARE + url, 'linkedin-share-dialog', 'width=626,height=436') }, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "linkedin" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.share.linkedin", defaultMessage: "ui.feedObject.share.linkedin" }) })] })))] })), (0, jsx_runtime_1.jsxs)(MenuItem_1.default, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "link" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.share.permanentLink", defaultMessage: "ui.feedObject.share.permanentLink" }), onClick: () => getPermalink() })] })] }));
}
/**
* Renders vote action if withAction==true
* @return {JSX.Element}
*/
function renderShareBtn() {
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: withAction && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!inlineAction && withAudience && (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.share)}` }, { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ loading: isSharing, onClick: handleOpenShareMenu, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "share" }) })) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose, onClick: handleClose, slotProps: {
paper: {
elevation: 0,
sx: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0
}
}
}
}, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, { children: renderShareMenuItems() }))) : ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClick: handleClose, onClose: handleClose, onOpen: handleOpenShareMenu, anchor: "bottom", disableSwipeToOpen: true }, { children: renderShareMenuItems() }))) })), isComposerOpen && ((0, jsx_runtime_1.jsx)(Composer_1.default, { open: true, defaultValue: composerShareProps, onClose: handleComposerOnClose, onSuccess: handleComposerOnSuccess, maxWidth: "sm", fullWidth: true }))] })) }));
}
/**
* Renders share action
*/
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, { [classes.inline]: inlineAction }) }, rest, { children: [renderAudience(), renderShareBtn()] })));
}
exports.default = Share;