@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
102 lines (101 loc) • 7.54 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { useContext } from 'react';
import Box from '@mui/material/Box';
import Menu from '@mui/material/Menu';
import Tooltip from '@mui/material/Tooltip';
import { Button, ListItemButton, ListItemText, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
import Icon from '@mui/material/Icon';
import { styled } from '@mui/material/styles';
import { SCFeedObjectActivitiesType } from '../../../../types/feedObject';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { camelCase } from '@selfcommunity/utils';
import { SCPreferences, SCPreferencesContext, useSCUser } from '@selfcommunity/react-core';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
const messages = defineMessages({
relevantActivities: {
id: 'ui.feedObject.activitiesMenu.relevantActivities',
defaultMessage: 'ui.feedObject.activitiesMenu.relevantActivities'
},
recentComments: {
id: 'ui.feedObject.activitiesMenu.recentComments',
defaultMessage: 'ui.feedObject.activitiesMenu.recentComments'
},
firstComments: {
id: 'ui.feedObject.activitiesMenu.firstComments',
defaultMessage: 'ui.feedObject.activitiesMenu.firstComments'
},
followedComments: {
id: 'ui.feedObject.activitiesMenu.followedComments',
defaultMessage: 'ui.feedObject.activitiesMenu.followedComments'
},
connectionsComments: {
id: 'ui.feedObject.activitiesMenu.connectionsComments',
defaultMessage: 'ui.feedObject.activitiesMenu.connectionsComments'
}
});
const classes = {
root: `${PREFIX}-activities-menu-root`,
selector: `${PREFIX}-activities-menu-selector`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'ActivitiesMenuRoot'
})(() => ({}));
export default function ActivitiesMenu(props) {
// PROPS
const { className = null, selectedActivities = null, hideRelevantActivitiesItem = false, onChange = null } = props, rest = __rest(props, ["className", "selectedActivities", "hideRelevantActivitiesItem", "onChange"]);
// CONTEXT
const scPreferencesContext = useContext(SCPreferencesContext);
const scUserContext = useSCUser();
// STATE
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const followEnabled = scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
// INTL
const intl = useIntl();
// HANDLERS
const handleOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleChangeActivitiesType = (type) => {
return () => {
onChange && onChange(type);
};
};
function renderMenuContent() {
return (_jsxs(Box, { children: [!hideRelevantActivitiesItem && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.relevantActivities) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc', defaultMessage: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc' }) }) }))), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RECENT_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RECENT_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.recentComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.recentCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.recentCommentsDesc' }) }) })), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.FIRST_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.firstComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.firstCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.firstCommentsDesc' }) }) })), scUserContext.user && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: followEnabled ? intl.formatMessage(messages.followedComments) : intl.formatMessage(messages.connectionsComments) }), secondary: followEnabled ? (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.followedCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.followedCommentsDesc' })) : (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc' })) }) })))] }));
}
/**
* Renders root object
*/
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Box, Object.assign({ className: classes.selector }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.feedObject.activitiesMenu.tooltipTitle", defaultMessage: "ui.feedObject.activitiesMenu.tooltipTitle" }) }, { children: _jsxs(Button, Object.assign({ variant: "text", size: "small", onClick: handleOpen }, { children: [selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS && followEnabled
? intl.formatMessage(messages.followedComments)
: intl.formatMessage(messages[`${camelCase(selectedActivities)}`]), "\u00A0 ", _jsx(Icon, { children: "expand_more" })] })) })) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuContent() }))) : (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose, onClick: handleClose, PaperProps: {
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: renderMenuContent() }))) }))] })));
}