@selfcommunity/react-ui 0.10.5-payments.242 → 0.10.5-payments.244
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/NavigationMenuIconButton/DefaultDrawerContent.d.ts +1 -0
- package/lib/cjs/components/NavigationMenuIconButton/DefaultDrawerContent.js +34 -2
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +6 -0
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +1 -1
- package/lib/cjs/shared/Tags/index.js +6 -2
- package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.d.ts +1 -0
- package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js +36 -4
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +6 -0
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +1 -1
- package/lib/esm/shared/Tags/index.js +6 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -2,5 +2,6 @@ import { BoxProps } from '@mui/material';
|
|
|
2
2
|
import { CategoryProps } from '../Category';
|
|
3
3
|
export interface DefaultDrawerContentProps extends BoxProps {
|
|
4
4
|
CategoryItemProps?: CategoryProps;
|
|
5
|
+
tagImage?: string;
|
|
5
6
|
}
|
|
6
7
|
export default function DefaultDrawerContent(inProps: DefaultDrawerContentProps): JSX.Element;
|
|
@@ -11,6 +11,7 @@ const utils_1 = require("@selfcommunity/utils");
|
|
|
11
11
|
const types_1 = require("@selfcommunity/types");
|
|
12
12
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
13
13
|
const system_1 = require("@mui/system");
|
|
14
|
+
const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
|
|
14
15
|
const PREFIX = 'SCDefaultDrawerContent';
|
|
15
16
|
const classes = {
|
|
16
17
|
root: `${PREFIX}-root`,
|
|
@@ -28,7 +29,7 @@ function DefaultDrawerContent(inProps) {
|
|
|
28
29
|
props: inProps,
|
|
29
30
|
name: PREFIX
|
|
30
31
|
});
|
|
31
|
-
const { className, CategoryItemProps = { showTooltip: true } } = props, rest = tslib_1.__rest(props, ["className", "CategoryItemProps"]);
|
|
32
|
+
const { className, CategoryItemProps = { showTooltip: true }, tagImage = '' } = props, rest = tslib_1.__rest(props, ["className", "CategoryItemProps", "tagImage"]);
|
|
32
33
|
// HOOKS
|
|
33
34
|
const { categories } = (0, react_core_1.useSCFetchCategories)();
|
|
34
35
|
const [categoriesOrdered, setCategoriesOrdered] = (0, react_1.useState)([]);
|
|
@@ -40,6 +41,7 @@ function DefaultDrawerContent(inProps) {
|
|
|
40
41
|
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
41
42
|
//STATE
|
|
42
43
|
const [isHovered, setIsHovered] = (0, react_1.useState)({});
|
|
44
|
+
const [expanded, setExpanded] = (0, react_1.useState)(false);
|
|
43
45
|
// MEMO
|
|
44
46
|
const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
|
|
45
47
|
features &&
|
|
@@ -72,6 +74,9 @@ function DefaultDrawerContent(inProps) {
|
|
|
72
74
|
return Object.assign(Object.assign({}, prevState), { [index]: false });
|
|
73
75
|
});
|
|
74
76
|
};
|
|
77
|
+
const handleChange = (tagName) => (_event, isExpanded) => {
|
|
78
|
+
setExpanded(isExpanded ? tagName : false);
|
|
79
|
+
};
|
|
75
80
|
// Order categories
|
|
76
81
|
(0, react_1.useEffect)(() => {
|
|
77
82
|
if (!scUserContext.user || (scUserContext.user && showAllCategories)) {
|
|
@@ -87,7 +92,34 @@ function DefaultDrawerContent(inProps) {
|
|
|
87
92
|
onTouchStart: mouseEnter,
|
|
88
93
|
onTouchMove: mouseLeave
|
|
89
94
|
});
|
|
95
|
+
const taggedCategories = {};
|
|
96
|
+
const untaggedCategories = [];
|
|
97
|
+
categoriesOrdered.forEach((c) => {
|
|
98
|
+
var _a;
|
|
99
|
+
const visibleTags = ((_a = c.tags) !== null && _a !== void 0 ? _a : []).filter((tag) => tag.visible);
|
|
100
|
+
if (visibleTags.length > 0) {
|
|
101
|
+
visibleTags.forEach((tag) => {
|
|
102
|
+
if (!taggedCategories[tag.name])
|
|
103
|
+
taggedCategories[tag.name] = [];
|
|
104
|
+
taggedCategories[tag.name].push(c);
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
else {
|
|
108
|
+
untaggedCategories.push(c);
|
|
109
|
+
}
|
|
110
|
+
});
|
|
90
111
|
//order
|
|
91
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))),
|
|
112
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
|
|
113
|
+
var _a;
|
|
114
|
+
if (!categories.length || !((_a = categories[0].tags) === null || _a === void 0 ? void 0 : _a.length))
|
|
115
|
+
return null;
|
|
116
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === tagName, onChange: handleChange(tagName), elevation: 0, onFocus: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) }, { children: (0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: tagName, src: tagImage, variant: "square" }), primary: tagName, disableTypography: false, ButtonBaseProps: {
|
|
117
|
+
onClick: (e) => e.stopPropagation(),
|
|
118
|
+
onFocus: (e) => e.stopPropagation()
|
|
119
|
+
} }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: categories.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ ButtonBaseProps: {
|
|
120
|
+
component: react_core_1.Link,
|
|
121
|
+
to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c)
|
|
122
|
+
}, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }) }), c.id))) }) })] }), tagName));
|
|
123
|
+
}), untaggedCategories.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: untaggedCategories.map((c, index) => ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index))) }))] })] })));
|
|
92
124
|
}
|
|
93
125
|
exports.default = DefaultDrawerContent;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DrawerProps } from '@mui/material';
|
|
3
|
+
import { DefaultDrawerContentProps } from './DefaultDrawerContent';
|
|
3
4
|
import { CreateLiveStreamButtonProps } from '../CreateLiveStreamButton';
|
|
4
5
|
export interface NavigationMenuDrawerProps extends DrawerProps {
|
|
5
6
|
/**
|
|
@@ -17,6 +18,11 @@ export interface NavigationMenuDrawerProps extends DrawerProps {
|
|
|
17
18
|
* @default null
|
|
18
19
|
*/
|
|
19
20
|
drawerContent?: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Default Drawer Content props content
|
|
23
|
+
* @default null
|
|
24
|
+
*/
|
|
25
|
+
defaultDrawerContentProps?: DefaultDrawerContentProps;
|
|
20
26
|
/**
|
|
21
27
|
* Hide drawer footer
|
|
22
28
|
* @default true
|
|
@@ -33,7 +33,7 @@ function NavigationMenuDrawer(inProps) {
|
|
|
33
33
|
props: inProps,
|
|
34
34
|
name: PREFIX
|
|
35
35
|
});
|
|
36
|
-
const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
|
|
36
|
+
const { className = null, showDrawerHeader = true, defaultDrawerContentProps = null, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, Object.assign({}, defaultDrawerContentProps)), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "defaultDrawerContentProps", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
|
|
37
37
|
const footerContent = (() => {
|
|
38
38
|
if (typeof drawerFooterContent === 'function') {
|
|
39
39
|
return drawerFooterContent({ handleCloseMenuDrawer: onClose });
|
|
@@ -112,7 +112,11 @@ function Tags(props) {
|
|
|
112
112
|
}
|
|
113
113
|
] }, { children: (_a) => {
|
|
114
114
|
var { TransitionProps, placement } = _a, rest = tslib_1.__rest(_a, ["TransitionProps", "placement"]);
|
|
115
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderTitle(), (0, jsx_runtime_1.jsx)(StackList, Object.assign({ spacing: 2 }, rest, { children: tags
|
|
116
|
-
|
|
115
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderTitle(), (0, jsx_runtime_1.jsx)(StackList, Object.assign({ spacing: 2 }, rest, { children: tags
|
|
116
|
+
.filter((tag) => tag.visible)
|
|
117
|
+
.map((tag) => ((0, jsx_runtime_1.jsx)(ItemList, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) })) })) })));
|
|
118
|
+
} }))] }))) : ((0, jsx_runtime_1.jsxs)(ListRoot, { children: [renderTitle(), (0, jsx_runtime_1.jsx)(StackList, Object.assign({ spacing: 1, direction: rest.direction ? rest.direction : 'column' }, { children: tags
|
|
119
|
+
.filter((tag) => tag.visible)
|
|
120
|
+
.map((tag) => ((0, jsx_runtime_1.jsx)(ItemList, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] })) })) }));
|
|
117
121
|
}
|
|
118
122
|
exports.default = Tags;
|
|
@@ -2,5 +2,6 @@ import { BoxProps } from '@mui/material';
|
|
|
2
2
|
import { CategoryProps } from '../Category';
|
|
3
3
|
export interface DefaultDrawerContentProps extends BoxProps {
|
|
4
4
|
CategoryItemProps?: CategoryProps;
|
|
5
|
+
tagImage?: string;
|
|
5
6
|
}
|
|
6
7
|
export default function DefaultDrawerContent(inProps: DefaultDrawerContentProps): JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Zoom, styled } from '@mui/material';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Zoom, styled, AccordionDetails, Accordion, AccordionSummary, Avatar } from '@mui/material';
|
|
4
4
|
import { Link, SCPreferences, SCRoutes, useSCFetchCategories, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
|
|
5
5
|
import { useEffect, useMemo, useState } from 'react';
|
|
6
6
|
import Category from '../Category';
|
|
@@ -9,6 +9,7 @@ import { sortByAttr } from '@selfcommunity/utils';
|
|
|
9
9
|
import { SCFeatureName } from '@selfcommunity/types';
|
|
10
10
|
import classNames from 'classnames';
|
|
11
11
|
import { useThemeProps } from '@mui/system';
|
|
12
|
+
import BaseItem from '../../shared/BaseItem';
|
|
12
13
|
const PREFIX = 'SCDefaultDrawerContent';
|
|
13
14
|
const classes = {
|
|
14
15
|
root: `${PREFIX}-root`,
|
|
@@ -26,7 +27,7 @@ export default function DefaultDrawerContent(inProps) {
|
|
|
26
27
|
props: inProps,
|
|
27
28
|
name: PREFIX
|
|
28
29
|
});
|
|
29
|
-
const { className, CategoryItemProps = { showTooltip: true } } = props, rest = __rest(props, ["className", "CategoryItemProps"]);
|
|
30
|
+
const { className, CategoryItemProps = { showTooltip: true }, tagImage = '' } = props, rest = __rest(props, ["className", "CategoryItemProps", "tagImage"]);
|
|
30
31
|
// HOOKS
|
|
31
32
|
const { categories } = useSCFetchCategories();
|
|
32
33
|
const [categoriesOrdered, setCategoriesOrdered] = useState([]);
|
|
@@ -38,6 +39,7 @@ export default function DefaultDrawerContent(inProps) {
|
|
|
38
39
|
const { preferences, features } = useSCPreferences();
|
|
39
40
|
//STATE
|
|
40
41
|
const [isHovered, setIsHovered] = useState({});
|
|
42
|
+
const [expanded, setExpanded] = useState(false);
|
|
41
43
|
// MEMO
|
|
42
44
|
const groupsEnabled = useMemo(() => preferences &&
|
|
43
45
|
features &&
|
|
@@ -70,6 +72,9 @@ export default function DefaultDrawerContent(inProps) {
|
|
|
70
72
|
return Object.assign(Object.assign({}, prevState), { [index]: false });
|
|
71
73
|
});
|
|
72
74
|
};
|
|
75
|
+
const handleChange = (tagName) => (_event, isExpanded) => {
|
|
76
|
+
setExpanded(isExpanded ? tagName : false);
|
|
77
|
+
};
|
|
73
78
|
// Order categories
|
|
74
79
|
useEffect(() => {
|
|
75
80
|
if (!scUserContext.user || (scUserContext.user && showAllCategories)) {
|
|
@@ -85,6 +90,33 @@ export default function DefaultDrawerContent(inProps) {
|
|
|
85
90
|
onTouchStart: mouseEnter,
|
|
86
91
|
onTouchMove: mouseLeave
|
|
87
92
|
});
|
|
93
|
+
const taggedCategories = {};
|
|
94
|
+
const untaggedCategories = [];
|
|
95
|
+
categoriesOrdered.forEach((c) => {
|
|
96
|
+
var _a;
|
|
97
|
+
const visibleTags = ((_a = c.tags) !== null && _a !== void 0 ? _a : []).filter((tag) => tag.visible);
|
|
98
|
+
if (visibleTags.length > 0) {
|
|
99
|
+
visibleTags.forEach((tag) => {
|
|
100
|
+
if (!taggedCategories[tag.name])
|
|
101
|
+
taggedCategories[tag.name] = [];
|
|
102
|
+
taggedCategories[tag.name].push(c);
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
else {
|
|
106
|
+
untaggedCategories.push(c);
|
|
107
|
+
}
|
|
108
|
+
});
|
|
88
109
|
//order
|
|
89
|
-
return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_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" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "courses" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), 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" }) })), !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" }) }))),
|
|
110
|
+
return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_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" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "courses" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), 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" }) })), !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" }) }))), _jsxs(_Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
|
|
111
|
+
var _a;
|
|
112
|
+
if (!categories.length || !((_a = categories[0].tags) === null || _a === void 0 ? void 0 : _a.length))
|
|
113
|
+
return null;
|
|
114
|
+
return (_jsxs(Accordion, Object.assign({ expanded: expanded === tagName, onChange: handleChange(tagName), elevation: 0, onFocus: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: _jsx(BaseItem, { elevation: 0, image: _jsx(Avatar, { alt: tagName, src: tagImage, variant: "square" }), primary: tagName, disableTypography: false, ButtonBaseProps: {
|
|
115
|
+
onClick: (e) => e.stopPropagation(),
|
|
116
|
+
onFocus: (e) => e.stopPropagation()
|
|
117
|
+
} }) })), _jsx(AccordionDetails, { children: _jsx(List, { children: categories.map((c) => (_jsx(Zoom, Object.assign({ in: true }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: {
|
|
118
|
+
component: Link,
|
|
119
|
+
to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c)
|
|
120
|
+
}, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }) }), c.id))) }) })] }), tagName));
|
|
121
|
+
}), untaggedCategories.length > 0 && (_jsx(_Fragment, { children: untaggedCategories.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))) }))] })] })));
|
|
90
122
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DrawerProps } from '@mui/material';
|
|
3
|
+
import { DefaultDrawerContentProps } from './DefaultDrawerContent';
|
|
3
4
|
import { CreateLiveStreamButtonProps } from '../CreateLiveStreamButton';
|
|
4
5
|
export interface NavigationMenuDrawerProps extends DrawerProps {
|
|
5
6
|
/**
|
|
@@ -17,6 +18,11 @@ export interface NavigationMenuDrawerProps extends DrawerProps {
|
|
|
17
18
|
* @default null
|
|
18
19
|
*/
|
|
19
20
|
drawerContent?: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Default Drawer Content props content
|
|
23
|
+
* @default null
|
|
24
|
+
*/
|
|
25
|
+
defaultDrawerContentProps?: DefaultDrawerContentProps;
|
|
20
26
|
/**
|
|
21
27
|
* Hide drawer footer
|
|
22
28
|
* @default true
|
|
@@ -31,7 +31,7 @@ export default function NavigationMenuDrawer(inProps) {
|
|
|
31
31
|
props: inProps,
|
|
32
32
|
name: PREFIX
|
|
33
33
|
});
|
|
34
|
-
const { className = null, showDrawerHeader = true, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
|
|
34
|
+
const { className = null, showDrawerHeader = true, defaultDrawerContentProps = null, drawerHeaderContent = _jsx(DefaultHeaderContent, Object.assign({}, defaultDrawerContentProps)), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "defaultDrawerContentProps", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
|
|
35
35
|
const footerContent = (() => {
|
|
36
36
|
if (typeof drawerFooterContent === 'function') {
|
|
37
37
|
return drawerFooterContent({ handleCloseMenuDrawer: onClose });
|
|
@@ -109,6 +109,10 @@ export default function Tags(props) {
|
|
|
109
109
|
}
|
|
110
110
|
] }, { children: (_a) => {
|
|
111
111
|
var { TransitionProps, placement } = _a, rest = __rest(_a, ["TransitionProps", "placement"]);
|
|
112
|
-
return (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(_Fragment, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 2 }, rest, { children: tags
|
|
113
|
-
|
|
112
|
+
return (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(_Fragment, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 2 }, rest, { children: tags
|
|
113
|
+
.filter((tag) => tag.visible)
|
|
114
|
+
.map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) })) })) })));
|
|
115
|
+
} }))] }))) : (_jsxs(ListRoot, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 1, direction: rest.direction ? rest.direction : 'column' }, { children: tags
|
|
116
|
+
.filter((tag) => tag.visible)
|
|
117
|
+
.map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] })) })) }));
|
|
114
118
|
}
|