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

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

"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 = require("react");
const react_core_1 = require("@selfcommunity/react-core");
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 SearchDialog_1 = tslib_1.__importDefault(require("../SearchDialog"));
const NavigationSettingsIconButton_1 = tslib_1.__importDefault(require("../NavigationSettingsIconButton"));
const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("../NavigationMenuIconButton"));
const constants_1 = require("./constants");
const types_1 = require("@selfcommunity/types");
const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
const classes = {
    root: `${constants_1.PREFIX}-root`,
    logo: `${constants_1.PREFIX}-logo`,
    logoFlex: `${constants_1.PREFIX}-logo-flex`,
    customItem: `${constants_1.PREFIX}-custom-item`,
    search: `${constants_1.PREFIX}-search`,
    searchDialog: `${constants_1.PREFIX}-search-dialog`,
    notifications: `${constants_1.PREFIX}-notifications`,
    settings: `${constants_1.PREFIX}-settings`,
    settingsDialog: `${constants_1.PREFIX}-settings-dialog`,
    login: `${constants_1.PREFIX}-login`
};
const Root = (0, material_1.styled)(material_1.Toolbar, {
    name: constants_1.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
 */
function NavigationToolbarMobile(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    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"]);
    // CONTEXT
    const scUserContext = (0, react_core_1.useSCUser)();
    const scRoutingContext = (0, react_core_1.useSCRouting)();
    // PREFERENCES
    const { preferences, features } = (0, react_core_1.useSCPreferences)();
    // STATE
    const [searchOpen, setSearchOpen] = (0, react_1.useState)(false);
    // MEMO
    const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
        features &&
        features.includes(types_1.SCFeatureName.TAGGING) &&
        features.includes(types_1.SCFeatureName.GROUPING) &&
        react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
        preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
    const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
        features &&
        features.includes(types_1.SCFeatureName.TAGGING) &&
        features.includes(types_1.SCFeatureName.EVENT) &&
        react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
        preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
    const exploreStreamEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
    const postOnlyStaffEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
    const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
    // HANDLERS
    const handleOpenSearch = (0, react_1.useCallback)(() => {
        setSearchOpen(true);
    }, [setSearchOpen]);
    const handleCloseSearch = (0, react_1.useCallback)(() => {
        setSearchOpen(false);
    }, [setSearchOpen]);
    // RENDER
    if (scUserContext.loading) {
        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
    }
    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, {
                    [classes.logoFlex]: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
                }) }, { 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" }) })))] }));
    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)(Icon_1.default, { 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) && postOnlyStaffEnabled)) &&
                (scUserContext.user || contentAvailable) &&
                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)(Icon_1.default, { 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" }) })))] })));
}
exports.default = NavigationToolbarMobile;