@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
83 lines (82 loc) • 7.09 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme, Zoom } from '@mui/material';
import { Link, SCPreferences, SCRoutes, useSCFetchCategories, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
import { useEffect, useMemo, useState } from 'react';
import Category from '../Category';
import { FormattedMessage } from 'react-intl';
import { sortByAttr } from '@selfcommunity/utils';
import { SCFeatureName } from '@selfcommunity/types';
import { styled } from '@mui/material/styles';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import DefaultDrawerSkeleton from './DefaultDrawerSkeleton';
const PREFIX = 'SCDefaultDrawerContent';
const classes = {
root: `${PREFIX}-root`,
navigation: `${PREFIX}-navigation`,
noResults: `${PREFIX}-no-results`,
title: `${PREFIX}-title`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'Root',
overridesResolver: (_, styles) => styles.root
})(() => ({}));
export default function DefaultDrawerContent(inProps) {
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, CategoryItemProps = { showTooltip: true } } = props, rest = __rest(props, ["className", "CategoryItemProps"]);
// HOOKS
const { categories, isLoading } = useSCFetchCategories();
const [categoriesOrdered, setCategoriesOrdered] = useState([]);
// ROUTING
const scRoutingContext = useSCRouting();
// CONTEXT
const scUserContext = useSCUser();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
// PREFERENCES
const { preferences, features } = useSCPreferences();
//STATE
const [isHovered, setIsHovered] = useState({});
// MEMO
const groupsEnabled = useMemo(() => preferences &&
features &&
features.includes(SCFeatureName.TAGGING) &&
features.includes(SCFeatureName.GROUPING) &&
SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
const eventsEnabled = useMemo(() => preferences &&
features &&
features.includes(SCFeatureName.TAGGING) &&
SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
// HANDLERS
const handleMouseEnter = (index) => {
setIsHovered((prevState) => {
return Object.assign(Object.assign({}, prevState), { [index]: true });
});
};
const handleMouseLeave = (index) => {
setIsHovered((prevState) => {
return Object.assign(Object.assign({}, prevState), { [index]: false });
});
};
// Order categories
useEffect(() => {
setCategoriesOrdered(sortByAttr(categories, 'order'));
}, [categories]);
const getMouseEvents = (mouseEnter, mouseLeave) => ({
onMouseEnter: mouseEnter,
onMouseLeave: mouseLeave,
onTouchStart: mouseEnter,
onTouchMove: mouseLeave
});
//order
return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [isMobile && (_jsxs(_Fragment, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) })), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {})] })), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), isLoading ? (_jsx(DefaultDrawerSkeleton, {})) : (_jsxs(_Fragment, { children: [!categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] }))] })));
}