@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
158 lines (149 loc) • 16.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = tslib_1.__importStar(require("react"));
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const react_intl_1 = require("react-intl");
const NotificationMenu_1 = tslib_1.__importDefault(require("./NotificationMenu"));
const SearchAutocomplete_1 = tslib_1.__importDefault(require("../SearchAutocomplete"));
const NavigationSettingsIconButton_1 = tslib_1.__importDefault(require("../NavigationSettingsIconButton"));
const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
const types_1 = require("@selfcommunity/types");
const react_core_1 = require("@selfcommunity/react-core");
const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("../NavigationMenuIconButton"));
const constants_1 = require("./constants");
const classes = {
root: `${constants_1.PREFIX}-root`,
logo: `${constants_1.PREFIX}-logo`,
customItem: `${constants_1.PREFIX}-custom-item`,
register: `${constants_1.PREFIX}-register`,
navigation: `${constants_1.PREFIX}-navigation`,
home: `${constants_1.PREFIX}-home`,
explore: `${constants_1.PREFIX}-explore`,
events: `${constants_1.PREFIX}-events`,
groups: `${constants_1.PREFIX}-groups`,
search: `${constants_1.PREFIX}-search`,
composer: `${constants_1.PREFIX}-composer`,
profile: `${constants_1.PREFIX}-profile`,
notification: `${constants_1.PREFIX}-notification`,
notificationsMenu: `${constants_1.PREFIX}-notifications-menu`,
messages: `${constants_1.PREFIX}-messages`,
settings: `${constants_1.PREFIX}-settings`,
active: `${constants_1.PREFIX}-active`
};
const Root = (0, material_1.styled)(material_1.Toolbar, {
name: constants_1.PREFIX,
slot: 'Root'
})(() => ({}));
const PREFERENCES = [
react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED,
react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY,
react_core_1.SCPreferences.LOGO_NAVBAR_LOGO,
react_core_1.SCPreferences.ADDONS_CLOSED_COMMUNITY,
react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED,
react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL,
react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE,
react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT
];
/**
* > API documentation for the Community-JS NavigationToolbar component. Learn about the available props and the CSS API.
*
*
* This component renders the application header.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/NavigationToolbar)
#### Import
```jsx
import {NavigationToolbar} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCNavigationToolbar` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCNavigationToolbar-root|Styles applied to the root element.|
|logo|.SCNavigationToolbar-logo|Styles applied to the logo element.|
|register|.SCNavigationToolbar-register|Styles applied to the register button elements.|
|navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation container element|
|home|.SCNavigationToolbar-home|Styles applied to the home button|
|explore|.SCNavigationToolbar-explore|Styles applied to the explore button|
|groups|.SCNavigationToolbar-groups|Styles applied to the group button|
|events|.SCNavigationToolbar-events|Styles applied to the event button|
|search|.SCNavigationToolbar-search|Styles applied to the search component|
|composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
|profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
|notification|.SCNavigationToolbar-notification|Styles applied to the notification button|
|notificationsMenu|.SCNavigationToolbar-notifications-menu|Styles applied to the notifications menu|
|messages|.SCNavigationToolbar-messages|Styles applied to the messages button|
|settings|.SCNavigationToolbar-settings|Styles applied to the settings button|
|active|.SCNavigationToolbar-active|Styles applied to the active button on navigation|
*
* @param inProps
*/
function NavigationToolbar(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
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"]);
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
const scRoutingContext = (0, react_core_1.useSCRouting)();
// PREFERENCES
const scPreferences = (0, react_core_1.useSCPreferences)();
const preferences = (0, react_1.useMemo)(() => {
const _preferences = {};
PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
return _preferences;
}, [scPreferences.preferences]);
const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
const groupsEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
scPreferences.features &&
scPreferences.features.includes(types_1.SCFeatureName.TAGGING) &&
scPreferences.features.includes(types_1.SCFeatureName.GROUPING) &&
react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in scPreferences.preferences &&
scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
const eventsEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
scPreferences.features &&
scPreferences.features.includes(types_1.SCFeatureName.TAGGING) &&
scPreferences.features.includes(types_1.SCFeatureName.EVENT) &&
react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in scPreferences.preferences &&
scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
const showComposer = (0, react_1.useMemo)(() => {
return (!disableComposer &&
(!scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || react_core_1.UserUtils.isStaff(scUserContext.user)));
}, [preferences, disableComposer, scUserContext.user]);
// STATE
const [anchorNotification, setAnchorNotification] = react_1.default.useState(null);
// HANDLERS
const handleOpenNotificationMenu = (event) => {
setAnchorNotification(event.currentTarget);
onOpenNotificationMenu && onOpenNotificationMenu();
};
const handleCloseNotificationMenu = () => {
setAnchorNotification(null);
onCloseNotificationMenu && onCloseNotificationMenu();
};
// RENDER
if (scUserContext.loading) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
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)(Icon_1.default, { children: "home" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
(preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "explore" }) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.groups, {
[classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}))
}), "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)(Icon_1.default, { 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, {
[classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}))
}), "aria-label": "Events", to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }) })))] })));
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, {
[classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
}), "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)(Icon_1.default, { 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, {
[classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
}), "aria-label": "Messages", to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "email" }) })) }))), endActions, (0, jsx_runtime_1.jsx)(NavigationSettingsIconButtonComponent, { className: classes.settings })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [endActions, (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ 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" }) }))] }))] })));
}
exports.default = NavigationToolbar;