refactor: replacement of injectIntl (#625)
This commit is contained in:
Jacobo Dominguez
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
|
||||
// Local Components
|
||||
@@ -20,99 +20,84 @@ import messages from '../Header.messages';
|
||||
// Assets
|
||||
import { MenuIcon } from '../Icons';
|
||||
|
||||
class MobileHeader extends React.Component {
|
||||
constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
|
||||
super(props);
|
||||
}
|
||||
const MobileHeader = ({
|
||||
mainMenu,
|
||||
secondaryMenu,
|
||||
userMenu,
|
||||
loggedOutItems,
|
||||
logo,
|
||||
logoAltText,
|
||||
logoDestination,
|
||||
avatar,
|
||||
username,
|
||||
loggedIn,
|
||||
stickyOnMobile,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
renderMainMenu() {
|
||||
const { mainMenu, secondaryMenu } = this.props;
|
||||
return <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
|
||||
}
|
||||
const renderMainMenu = () => <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
|
||||
|
||||
renderUserMenuItems() {
|
||||
const { userMenu } = this.props;
|
||||
return <MobileUserMenuSlot menu={userMenu} />;
|
||||
}
|
||||
const renderUserMenuItems = () => <MobileUserMenuSlot menu={userMenu} />;
|
||||
|
||||
renderLoggedOutItems() {
|
||||
const { loggedOutItems } = this.props;
|
||||
return <MobileLoggedOutItemsSlot items={loggedOutItems} />;
|
||||
}
|
||||
const renderLoggedOutItems = () => <MobileLoggedOutItemsSlot items={loggedOutItems} />;
|
||||
|
||||
renderUserMenuToggle() {
|
||||
const { avatar, username } = this.props;
|
||||
return <MobileUserMenuToggleSlot avatar={avatar} label={username} />;
|
||||
}
|
||||
const renderUserMenuToggle = () => <MobileUserMenuToggleSlot avatar={avatar} label={username} />;
|
||||
|
||||
render() {
|
||||
const {
|
||||
logo,
|
||||
logoAltText,
|
||||
logoDestination,
|
||||
loggedIn,
|
||||
stickyOnMobile,
|
||||
intl,
|
||||
mainMenu,
|
||||
userMenu,
|
||||
loggedOutItems,
|
||||
} = this.props;
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
|
||||
const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
|
||||
const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
|
||||
|
||||
return (
|
||||
<header
|
||||
aria-label={intl.formatMessage(messages['header.label.main.header'])}
|
||||
className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
|
||||
>
|
||||
<a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
|
||||
{mainMenu.length > 0 ? (
|
||||
<div className="w-100 d-flex justify-content-start">
|
||||
return (
|
||||
<header
|
||||
aria-label={intl.formatMessage(messages['header.label.main.header'])}
|
||||
className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
|
||||
>
|
||||
<a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
|
||||
{mainMenu.length > 0 ? (
|
||||
<div className="w-100 d-flex justify-content-start">
|
||||
|
||||
<Menu className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label={intl.formatMessage(messages['header.label.main.menu'])}
|
||||
title={intl.formatMessage(messages['header.label.main.menu'])}
|
||||
>
|
||||
<MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
|
||||
</MenuTrigger>
|
||||
<MenuContent
|
||||
tag="nav"
|
||||
aria-label={intl.formatMessage(messages['header.label.main.nav'])}
|
||||
className="nav flex-column pin-left pin-right border-top shadow py-2"
|
||||
>
|
||||
{this.renderMainMenu()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`w-100 d-flex ${logoClasses}`}>
|
||||
<LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
|
||||
<Menu className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label={intl.formatMessage(messages['header.label.main.menu'])}
|
||||
title={intl.formatMessage(messages['header.label.main.menu'])}
|
||||
>
|
||||
<MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
|
||||
</MenuTrigger>
|
||||
<MenuContent
|
||||
tag="nav"
|
||||
aria-label={intl.formatMessage(messages['header.label.main.nav'])}
|
||||
className="nav flex-column pin-left pin-right border-top shadow py-2"
|
||||
>
|
||||
{renderMainMenu()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
{userMenu.length > 0 || loggedOutItems.length > 0 ? (
|
||||
<div className="w-100 d-flex justify-content-end align-items-center">
|
||||
<Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
title={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
>
|
||||
{this.renderUserMenuToggle()}
|
||||
</MenuTrigger>
|
||||
<MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
|
||||
{loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
) : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
) : null}
|
||||
<div className={`w-100 d-flex ${logoClasses}`}>
|
||||
<LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
|
||||
</div>
|
||||
{userMenu.length > 0 || loggedOutItems.length > 0 ? (
|
||||
<div className="w-100 d-flex justify-content-end align-items-center">
|
||||
<Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
title={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
>
|
||||
{renderUserMenuToggle()}
|
||||
</MenuTrigger>
|
||||
<MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
|
||||
{loggedIn ? renderUserMenuItems() : renderLoggedOutItems()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
) : null}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export const mobileHeaderDataShape = {
|
||||
mainMenu: mobileHeaderMainMenuDataShape,
|
||||
@@ -140,9 +125,6 @@ MobileHeader.propTypes = {
|
||||
username: mobileHeaderDataShape.username,
|
||||
loggedIn: mobileHeaderDataShape.loggedIn,
|
||||
stickyOnMobile: mobileHeaderDataShape.stickyOnMobile,
|
||||
|
||||
// i18n
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
MobileHeader.defaultProps = {
|
||||
@@ -160,4 +142,4 @@ MobileHeader.defaultProps = {
|
||||
|
||||
};
|
||||
|
||||
export default injectIntl(MobileHeader);
|
||||
export default MobileHeader;
|
||||
|
||||
Reference in New Issue
Block a user