@selfcommunity/react-ui/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Badge, Button, IconButton, styled, Toolbar } from '@mui/material';
import { useCallback, useMemo, useState } from 'react';
import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
import Icon from '@mui/material/Icon';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import NavigationToolbarMobileSkeleton from './Skeleton';
import { FormattedMessage } from 'react-intl';
import SearchDialog from '../SearchDialog';
import NavigationSettingsIconButton from '../NavigationSettingsIconButton';
import NavigationMenuIconButton from '../NavigationMenuIconButton';
import { PREFIX } from './constants';
import { SCFeatureName } from '@selfcommunity/types';
import ComposerIconButton from '../ComposerIconButton';
const classes = {
    root: `${PREFIX}-root`,
    logo: `${PREFIX}-logo`,
    logoFlex: `${PREFIX}-logo-flex`,
    customItem: `${PREFIX}-custom-item`,
    search: `${PREFIX}-search`,
    searchDialog: `${PREFIX}-search-dialog`,
    notifications: `${PREFIX}-notifications`,
    settings: `${PREFIX}-settings`,
    settingsDialog: `${PREFIX}-settings-dialog`,
    login: `${PREFIX}-login`
};
const Root = styled(Toolbar, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS Navigation Toolbar Mobile component. Learn about the available props and the CSS API.
 *
 *
 * This component renders the mobile application header.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/NavigationToolbarMobile)

 #### Import

 ```jsx
 import {NavigationToolbarMobile} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCNavigationToolbarMobile` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCNavigationToolbarMobile-root|Styles applied to the root element.|
 |logo|.SCNavigationToolbarMobile-logo|Styles applied to the logo element.|
 |search|.SCNavigationToolbarMobile-search|Styles applied to the search button element|
 |searchDialog|.SCNavigationToolbarMobile-search-dialog|Styles applied to the search dialog element|
 |notifications|.SCNavigationToolbarMobile-notifications|Styles applied to the notifications button element|
 |settings|.SCNavigationToolbarMobile-settings|Styles applied to the settings button element|
 |settingsDialog|.SCNavigationToolbarMobile-settingsDialog|Styles applied to the settings dialog elements|
 |login|.SCNavigationToolbarMobile-login|Styles applied to the login element.|
 *
 * @param inProps
 */
export default function NavigationToolbarMobile(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    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"]);
    // CONTEXT
    const scUserContext = useSCUser();
    const scRoutingContext = useSCRouting();
    // PREFERENCES
    const { preferences, features } = useSCPreferences();
    // STATE
    const [searchOpen, setSearchOpen] = useState(false);
    // MEMO
    const groupsEnabled = useMemo(() => preferences &&
        features &&
        features.includes(SCFeatureName.TAGGING) &&
        features.includes(SCFeatureName.GROUPING) &&
        SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
        preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
    const eventsEnabled = useMemo(() => preferences &&
        features &&
        features.includes(SCFeatureName.TAGGING) &&
        features.includes(SCFeatureName.EVENT) &&
        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
    const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
    const postOnlyStaffEnabled = preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
    const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
    // HANDLERS
    const handleOpenSearch = useCallback(() => {
        setSearchOpen(true);
    }, [setSearchOpen]);
    const handleCloseSearch = useCallback(() => {
        setSearchOpen(false);
    }, [setSearchOpen]);
    // RENDER
    if (scUserContext.loading) {
        return _jsx(NavigationToolbarMobileSkeleton, {});
    }
    const _children = children || (_jsxs(_Fragment, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classNames(className, classes.logo, {
                    [classes.logoFlex]: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
                }) }, { 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" }) })))] }));
    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) && postOnlyStaffEnabled)) &&
                (scUserContext.user || contentAvailable) &&
                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" }) })))] })));
}