@selfcommunity/react-ui 0.11.0-alpha.93 → 0.11.0-alpha.95

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.
Files changed (18) hide show
  1. package/lib/cjs/components/BottomNavigation/BottomNavigation.d.ts +6 -1
  2. package/lib/cjs/components/BottomNavigation/BottomNavigation.js +2 -2
  3. package/lib/cjs/components/CategoryHeader/CategoryHeader.d.ts +6 -0
  4. package/lib/cjs/components/CategoryHeader/CategoryHeader.js +6 -3
  5. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts +4 -0
  6. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +3 -3
  7. package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts +4 -0
  8. package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js +2 -2
  9. package/lib/esm/components/BottomNavigation/BottomNavigation.d.ts +6 -1
  10. package/lib/esm/components/BottomNavigation/BottomNavigation.js +2 -2
  11. package/lib/esm/components/CategoryHeader/CategoryHeader.d.ts +6 -0
  12. package/lib/esm/components/CategoryHeader/CategoryHeader.js +6 -3
  13. package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts +4 -0
  14. package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +3 -3
  15. package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts +4 -0
  16. package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js +2 -2
  17. package/lib/umd/react-ui.js +1 -1
  18. package/package.json +6 -6
package/lib/cjs/components/BottomNavigation/BottomNavigation.d.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import { BottomNavigationProps as MuiBottomNavigationProps } from '@mui/material';
2
- export declare type BottomNavigationProps = MuiBottomNavigationProps;
2
+ export interface BottomNavigationProps extends MuiBottomNavigationProps {
3
+ /**
4
+ * Callback on click home
5
+ */
6
+ onClickHome?: () => void;
7
+ }
3
8
  /**
4
9
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
5
10
  *
package/lib/cjs/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -55,7 +55,7 @@ function BottomNavigation(inProps) {
55
55
  props: inProps,
56
56
  name: PREFIX
57
57
  });
58
- const { className, children = null } = props, rest = tslib_1.__rest(props, ["className", "children"]);
58
+ const { className, children = null, onClickHome } = props, rest = tslib_1.__rest(props, ["className", "children", "onClickHome"]);
59
59
  // CONTEXT
60
60
  const scUserContext = (0, react_core_1.useSCUser)();
61
61
  const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -88,7 +88,7 @@ function BottomNavigation(inProps) {
88
88
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, { [classes.ios]: isIOS }) }, rest, { children: children
89
89
  ? children
90
90
  : [
91
- (0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }, "home"),
91
+ (0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, Object.assign({ className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }, (onClickHome && { onClick: onClickHome })), "home"),
92
92
  // (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (
93
93
  // <BottomNavigationAction
94
94
  // key="explore"
package/lib/cjs/components/CategoryHeader/CategoryHeader.d.ts CHANGED
@@ -27,6 +27,11 @@ export interface CategoryHeaderProps {
27
27
  * @default {}
28
28
  */
29
29
  CategoryFollowersButtonProps?: Pick<CategoryFollowersButtonProps, Exclude<keyof CategoryFollowersButtonProps, 'category' | 'categoryId'>>;
30
+ /**
31
+ * shows category tags
32
+ * @default false
33
+ */
34
+ showTags?: boolean;
30
35
  /**
31
36
  * Any other properties
32
37
  */
@@ -56,6 +61,7 @@ export interface CategoryHeaderProps {
56
61
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
57
62
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
58
63
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
64
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
59
65
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
60
66
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
61
67
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
package/lib/cjs/components/CategoryHeader/CategoryHeader.js CHANGED
@@ -13,12 +13,14 @@ const system_1 = require("@mui/system");
13
13
  const CategoryFollowersButton_1 = tslib_1.__importDefault(require("../CategoryFollowersButton"));
14
14
  const constants_1 = require("./constants");
15
15
  const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
16
+ const TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
16
17
  const classes = {
17
18
  root: `${constants_1.PREFIX}-root`,
18
19
  cover: `${constants_1.PREFIX}-cover`,
19
20
  name: `${constants_1.PREFIX}-name`,
20
21
  slogan: `${constants_1.PREFIX}-slogan`,
21
22
  info: `${constants_1.PREFIX}-info`,
23
+ tags: `${constants_1.PREFIX}-tags`,
22
24
  followedCounter: `${constants_1.PREFIX}-followed-counter`,
23
25
  followed: `${constants_1.PREFIX}-followed`,
24
26
  action: `${constants_1.PREFIX}-action`
@@ -51,6 +53,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
51
53
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
52
54
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
53
55
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
56
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
54
57
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
55
58
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
56
59
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
@@ -58,13 +61,13 @@ const Root = (0, material_1.styled)(material_1.Box, {
58
61
  * @param inProps
59
62
  */
60
63
  function CategoryHeader(inProps) {
61
- var _a;
64
+ var _a, _b;
62
65
  // PROPS
63
66
  const props = (0, system_1.useThemeProps)({
64
67
  props: inProps,
65
68
  name: constants_1.PREFIX
66
69
  });
67
- const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
70
+ const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {}, showTags = false } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps", "showTags"]);
68
71
  // STATE
69
72
  const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
70
73
  const categoryFollowEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
@@ -81,6 +84,6 @@ function CategoryHeader(inProps) {
81
84
  if (!scCategory) {
82
85
  return null;
83
86
  }
84
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), categoryFollowEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scCategory.payment_order && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory })), (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
87
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 && scCategory.payment_order && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory })), (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
85
88
  }
86
89
  exports.default = CategoryHeader;
package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts CHANGED
@@ -51,6 +51,10 @@ export interface NavigationToolbarProps extends ToolbarProps {
51
51
  * Callback on close notification menu
52
52
  */
53
53
  onCloseNotificationMenu?: () => void;
54
+ /**
55
+ * Callback on click home
56
+ */
57
+ onClickHome?: () => void;
54
58
  /**
55
59
  * Props to spread to the NotificationsMenu
56
60
  * @default {}
package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js CHANGED
@@ -99,7 +99,7 @@ function NavigationToolbar(inProps) {
99
99
  props: inProps,
100
100
  name: constants_1.PREFIX
101
101
  });
102
- const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
102
+ const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onClickHome, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onClickHome", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
103
103
  // CONTEXT
104
104
  const scUserContext = (0, react_core_1.useSCUser)();
105
105
  const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -151,7 +151,7 @@ function NavigationToolbar(inProps) {
151
151
  if (scUserContext.loading) {
152
152
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
153
153
  }
154
- const _children = children || ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
154
+ const _children = children || ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), component: react_core_1.Link }, (onClickHome && { onClick: onClickHome }), { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
155
155
  (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) &&
156
156
  (!scUserContext.user || (!groupsEnabled && !coursesEnabled && !eventsEnabled)) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.explore, {
157
157
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}))
@@ -163,7 +163,7 @@ function NavigationToolbar(inProps) {
163
163
  }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.events, {
164
164
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}))
165
165
  }), "aria-label": "Events", to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })))] })));
166
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[react_core_1.SCPreferences.ADDONS_CLOSED_COMMUNITY] && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? ((0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteComponentProps))) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.search })), startActions, scUserContext.user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showComposer && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scUserContext.user.username }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.notification, {
166
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, (onClickHome && { onClick: onClickHome }), { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[react_core_1.SCPreferences.ADDONS_CLOSED_COMMUNITY] && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? ((0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteComponentProps))) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.search })), startActions, scUserContext.user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showComposer && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scUserContext.user.username }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.notification, {
167
167
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
168
168
  }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) })) })), Boolean(anchorNotification) && ((0, jsx_runtime_1.jsx)(NotificationMenu_1.default, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: true, onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps)))] }), privateMessagingEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.messages, {
169
169
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts CHANGED
@@ -25,6 +25,10 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
25
25
  * Actions to be inserted after Private Messages IconButton
26
26
  */
27
27
  endActions?: React.ReactNode | null;
28
+ /**
29
+ * Callback on click home
30
+ */
31
+ onClickHome?: () => void;
28
32
  /**
29
33
  * Component for Navigation Menu Icon Button
30
34
  */
package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js CHANGED
@@ -70,7 +70,7 @@ function NavigationToolbarMobile(inProps) {
70
70
  props: inProps,
71
71
  name: constants_1.PREFIX
72
72
  });
73
- const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteComponentProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, ComposerIconButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteComponentProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
73
+ const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteComponentProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, ComposerIconButtonProps = {}, onClickHome } = props, rest = tslib_1.__rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteComponentProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps", "onClickHome"]);
74
74
  // CONTEXT
75
75
  const scUserContext = (0, react_core_1.useSCUser)();
76
76
  const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -107,7 +107,7 @@ function NavigationToolbarMobile(inProps) {
107
107
  }
108
108
  const _children = children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, {}), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: (0, classnames_1.default)(className, classes.logo, {
109
109
  [classes.logoFlex]: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
110
- }) }, { children: !preserveDesktopLogo ? ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
110
+ }) }, (onClickHome && { onClick: onClickHome }), { children: !preserveDesktopLogo ? ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
111
111
  return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })), (0, jsx_runtime_1.jsx)(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || react_core_1.UserUtils.isStaff(scUserContext.user) || react_core_1.UserUtils.isPublisher(scUserContext.user)) &&
112
112
  (scUserContext.user || contentAvailable) &&
113
113
  exploreStreamEnabled && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) })) }))), scUserContext.user ? ((0, jsx_runtime_1.jsx)(NavigationSettingsIconButtonComponent, { className: classes.settings })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.login, color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
package/lib/esm/components/BottomNavigation/BottomNavigation.d.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import { BottomNavigationProps as MuiBottomNavigationProps } from '@mui/material';
2
- export declare type BottomNavigationProps = MuiBottomNavigationProps;
2
+ export interface BottomNavigationProps extends MuiBottomNavigationProps {
3
+ /**
4
+ * Callback on click home
5
+ */
6
+ onClickHome?: () => void;
7
+ }
3
8
  /**
4
9
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
5
10
  *
package/lib/esm/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -53,7 +53,7 @@ export default function BottomNavigation(inProps) {
53
53
  props: inProps,
54
54
  name: PREFIX
55
55
  });
56
- const { className, children = null } = props, rest = __rest(props, ["className", "children"]);
56
+ const { className, children = null, onClickHome } = props, rest = __rest(props, ["className", "children", "onClickHome"]);
57
57
  // CONTEXT
58
58
  const scUserContext = useSCUser();
59
59
  const scRoutingContext = useSCRouting();
@@ -86,7 +86,7 @@ export default function BottomNavigation(inProps) {
86
86
  return (_jsx(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest, { children: children
87
87
  ? children
88
88
  : [
89
- _jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: _jsx(Icon, { children: "home" }) }, "home"),
89
+ _jsx(BottomNavigationAction, Object.assign({ className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: _jsx(Icon, { children: "home" }) }, (onClickHome && { onClick: onClickHome })), "home"),
90
90
  // (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (
91
91
  // <BottomNavigationAction
92
92
  // key="explore"
package/lib/esm/components/CategoryHeader/CategoryHeader.d.ts CHANGED
@@ -27,6 +27,11 @@ export interface CategoryHeaderProps {
27
27
  * @default {}
28
28
  */
29
29
  CategoryFollowersButtonProps?: Pick<CategoryFollowersButtonProps, Exclude<keyof CategoryFollowersButtonProps, 'category' | 'categoryId'>>;
30
+ /**
31
+ * shows category tags
32
+ * @default false
33
+ */
34
+ showTags?: boolean;
30
35
  /**
31
36
  * Any other properties
32
37
  */
@@ -56,6 +61,7 @@ export interface CategoryHeaderProps {
56
61
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
57
62
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
58
63
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
64
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
59
65
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
60
66
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
61
67
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
package/lib/esm/components/CategoryHeader/CategoryHeader.js CHANGED
@@ -11,12 +11,14 @@ import { useThemeProps } from '@mui/system';
11
11
  import CategoryFollowersButton from '../CategoryFollowersButton';
12
12
  import { PREFIX } from './constants';
13
13
  import BuyButton from '../BuyButton';
14
+ import TagChip from '../../shared/TagChip';
14
15
  const classes = {
15
16
  root: `${PREFIX}-root`,
16
17
  cover: `${PREFIX}-cover`,
17
18
  name: `${PREFIX}-name`,
18
19
  slogan: `${PREFIX}-slogan`,
19
20
  info: `${PREFIX}-info`,
21
+ tags: `${PREFIX}-tags`,
20
22
  followedCounter: `${PREFIX}-followed-counter`,
21
23
  followed: `${PREFIX}-followed`,
22
24
  action: `${PREFIX}-action`
@@ -49,6 +51,7 @@ const Root = styled(Box, {
49
51
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
50
52
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
51
53
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
54
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
52
55
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
53
56
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
54
57
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
@@ -56,13 +59,13 @@ const Root = styled(Box, {
56
59
  * @param inProps
57
60
  */
58
61
  export default function CategoryHeader(inProps) {
59
- var _a;
62
+ var _a, _b;
60
63
  // PROPS
61
64
  const props = useThemeProps({
62
65
  props: inProps,
63
66
  name: PREFIX
64
67
  });
65
- const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
68
+ const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {}, showTags = false } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps", "showTags"]);
66
69
  // STATE
67
70
  const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
68
71
  const categoryFollowEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
@@ -79,5 +82,5 @@ export default function CategoryHeader(inProps) {
79
82
  if (!scCategory) {
80
83
  return null;
81
84
  }
82
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), categoryFollowEnabled && (_jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), _jsxs(Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scCategory.payment_order && (_jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory })), _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
85
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsx(Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => (_jsx(TagChip, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && (_jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), _jsxs(Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 && scCategory.payment_order && (_jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory })), _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
83
86
  }
package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts CHANGED
@@ -51,6 +51,10 @@ export interface NavigationToolbarProps extends ToolbarProps {
51
51
  * Callback on close notification menu
52
52
  */
53
53
  onCloseNotificationMenu?: () => void;
54
+ /**
55
+ * Callback on click home
56
+ */
57
+ onClickHome?: () => void;
54
58
  /**
55
59
  * Props to spread to the NotificationsMenu
56
60
  * @default {}
package/lib/esm/components/NavigationToolbar/NavigationToolbar.js CHANGED
@@ -97,7 +97,7 @@ export default function NavigationToolbar(inProps) {
97
97
  props: inProps,
98
98
  name: PREFIX
99
99
  });
100
- const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
100
+ const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onClickHome, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onClickHome", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
101
101
  // CONTEXT
102
102
  const scUserContext = useSCUser();
103
103
  const scRoutingContext = useSCRouting();
@@ -149,7 +149,7 @@ export default function NavigationToolbar(inProps) {
149
149
  if (scUserContext.loading) {
150
150
  return _jsx(NavigationToolbarSkeleton, {});
151
151
  }
152
- const _children = children || (_jsxs(Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "home" }) }))), preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
152
+ const _children = children || (_jsxs(Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), component: Link }, (onClickHome && { onClick: onClickHome }), { children: _jsx(Icon, { children: "home" }) }))), preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
153
153
  (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) &&
154
154
  (!scUserContext.user || (!groupsEnabled && !coursesEnabled && !eventsEnabled)) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, {
155
155
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}))
@@ -161,7 +161,7 @@ export default function NavigationToolbar(inProps) {
161
161
  }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
162
162
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
163
163
  }), "aria-label": "Events", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
164
- return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteComponentProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
164
+ return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, (onClickHome && { onClick: onClickHome }), { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteComponentProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
165
165
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
166
166
  }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) })), Boolean(anchorNotification) && (_jsx(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: true, onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps)))] }), privateMessagingEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.messages, {
167
167
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts CHANGED
@@ -25,6 +25,10 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
25
25
  * Actions to be inserted after Private Messages IconButton
26
26
  */
27
27
  endActions?: React.ReactNode | null;
28
+ /**
29
+ * Callback on click home
30
+ */
31
+ onClickHome?: () => void;
28
32
  /**
29
33
  * Component for Navigation Menu Icon Button
30
34
  */
package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js CHANGED
@@ -68,7 +68,7 @@ export default function NavigationToolbarMobile(inProps) {
68
68
  props: inProps,
69
69
  name: PREFIX
70
70
  });
71
- const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteComponentProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, ComposerIconButtonProps = {} } = props, rest = __rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteComponentProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
71
+ const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteComponentProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, ComposerIconButtonProps = {}, onClickHome } = props, rest = __rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteComponentProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps", "onClickHome"]);
72
72
  // CONTEXT
73
73
  const scUserContext = useSCUser();
74
74
  const scRoutingContext = useSCRouting();
@@ -105,7 +105,7 @@ export default function NavigationToolbarMobile(inProps) {
105
105
  }
106
106
  const _children = children || (_jsxs(_Fragment, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classNames(className, classes.logo, {
107
107
  [classes.logoFlex]: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
108
- }) }, { children: !preserveDesktopLogo ? (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
108
+ }) }, (onClickHome && { onClick: onClickHome }), { children: !preserveDesktopLogo ? (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
109
109
  return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) &&
110
110
  (scUserContext.user || contentAvailable) &&
111
111
  exploreStreamEnabled && _jsx(ComposerIconButton, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && (_jsx(IconButton, Object.assign({ className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) }))), scUserContext.user ? (_jsx(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (_jsx(Button, Object.assign({ className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));