2020-09-21 15:27:22 +00:00
|
|
|
import React, { useEffect } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2020-11-11 23:26:21 +00:00
|
|
|
import styled from "styled-components";
|
2020-09-30 22:25:08 +00:00
|
|
|
import { Backdrop, Toast, Aside } from "asc-web-components";
|
2020-09-21 15:27:22 +00:00
|
|
|
import Header from "./sub-components/header";
|
|
|
|
import HeaderNav from "./sub-components/header-nav";
|
2020-09-30 22:25:08 +00:00
|
|
|
import HeaderUnAuth from "./sub-components/header-unauth";
|
2020-09-21 15:27:22 +00:00
|
|
|
|
2020-09-30 22:25:08 +00:00
|
|
|
import { I18nextProvider, withTranslation } from "react-i18next";
|
2020-09-21 15:27:22 +00:00
|
|
|
import i18n from "./i18n";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
|
|
|
|
import { withRouter } from "react-router";
|
2020-10-05 15:25:01 +00:00
|
|
|
|
2020-10-30 13:43:51 +00:00
|
|
|
import { getLanguage, isDesktopClient } from "../../store/auth/selectors";
|
2020-11-11 23:26:21 +00:00
|
|
|
import Loaders from "../Loaders";
|
|
|
|
|
|
|
|
const backgroundColor = "#0F4071";
|
|
|
|
|
|
|
|
const StyledContainer = styled.header`
|
|
|
|
align-items: center;
|
|
|
|
background-color: ${backgroundColor};
|
|
|
|
`;
|
2020-09-21 15:27:22 +00:00
|
|
|
|
|
|
|
class NavMenu extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.timeout = null;
|
|
|
|
|
2020-09-30 22:25:08 +00:00
|
|
|
const {
|
|
|
|
isBackdropVisible,
|
|
|
|
isNavHoverEnabled,
|
|
|
|
isNavOpened,
|
2020-10-16 12:38:04 +00:00
|
|
|
isAsideVisible,
|
2020-10-30 13:43:51 +00:00
|
|
|
isDesktop,
|
2020-09-30 22:25:08 +00:00
|
|
|
} = props;
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
isBackdropVisible,
|
|
|
|
isNavOpened,
|
|
|
|
isAsideVisible,
|
2020-10-16 12:38:04 +00:00
|
|
|
isNavHoverEnabled,
|
2020-10-30 13:43:51 +00:00
|
|
|
isDesktop,
|
2020-09-21 15:27:22 +00:00
|
|
|
};
|
2020-09-30 22:25:08 +00:00
|
|
|
}
|
2020-09-21 15:27:22 +00:00
|
|
|
|
|
|
|
backdropClick = () => {
|
|
|
|
this.setState({
|
|
|
|
isBackdropVisible: false,
|
|
|
|
isNavOpened: false,
|
|
|
|
isAsideVisible: false,
|
2020-10-16 12:38:04 +00:00
|
|
|
isNavHoverEnabled: !this.state.isNavHoverEnabled,
|
2020-09-21 15:27:22 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
showNav = () => {
|
|
|
|
this.setState({
|
|
|
|
isBackdropVisible: true,
|
|
|
|
isNavOpened: true,
|
|
|
|
isAsideVisible: false,
|
2020-10-16 12:38:04 +00:00
|
|
|
isNavHoverEnabled: false,
|
2020-09-21 15:27:22 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
clearNavTimeout = () => {
|
|
|
|
if (this.timeout == null) return;
|
|
|
|
clearTimeout(this.timeout);
|
|
|
|
this.timeout = null;
|
|
|
|
};
|
|
|
|
|
|
|
|
handleNavMouseEnter = () => {
|
|
|
|
if (!this.state.isNavHoverEnabled) return;
|
|
|
|
this.timeout = setTimeout(() => {
|
|
|
|
this.setState({
|
|
|
|
isBackdropVisible: false,
|
|
|
|
isNavOpened: true,
|
2020-10-16 12:38:04 +00:00
|
|
|
isAsideVisible: false,
|
2020-09-21 15:27:22 +00:00
|
|
|
});
|
|
|
|
}, 1000);
|
|
|
|
};
|
|
|
|
|
|
|
|
handleNavMouseLeave = () => {
|
|
|
|
if (!this.state.isNavHoverEnabled) return;
|
|
|
|
this.clearNavTimeout();
|
|
|
|
this.setState({
|
|
|
|
isBackdropVisible: false,
|
|
|
|
isNavOpened: false,
|
2020-10-16 12:38:04 +00:00
|
|
|
isAsideVisible: false,
|
2020-09-21 15:27:22 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
toggleAside = () => {
|
|
|
|
this.clearNavTimeout();
|
|
|
|
this.setState({
|
|
|
|
isBackdropVisible: true,
|
|
|
|
isNavOpened: false,
|
|
|
|
isAsideVisible: true,
|
2020-10-16 12:38:04 +00:00
|
|
|
isNavHoverEnabled: false,
|
2020-09-21 15:27:22 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2020-10-30 13:43:51 +00:00
|
|
|
const {
|
|
|
|
isBackdropVisible,
|
|
|
|
isNavOpened,
|
|
|
|
isAsideVisible,
|
|
|
|
isDesktop,
|
|
|
|
} = this.state;
|
2020-09-30 22:25:08 +00:00
|
|
|
|
2020-11-23 10:06:09 +00:00
|
|
|
const { isAuthenticated, isLoaded, asideContent, history } = this.props;
|
2020-10-05 15:25:01 +00:00
|
|
|
|
2020-09-30 22:25:08 +00:00
|
|
|
const isAsideAvailable = !!asideContent;
|
|
|
|
|
2020-12-04 08:38:15 +00:00
|
|
|
//console.log("NavMenu render", this.state, this.props);
|
2020-09-21 15:27:22 +00:00
|
|
|
|
|
|
|
return (
|
2020-11-11 23:26:21 +00:00
|
|
|
<StyledContainer>
|
2020-11-12 16:00:43 +00:00
|
|
|
<Toast />
|
2020-09-21 15:27:22 +00:00
|
|
|
|
2020-12-10 17:06:04 +00:00
|
|
|
<Backdrop
|
|
|
|
visible={isBackdropVisible}
|
|
|
|
onClick={this.backdropClick}
|
|
|
|
withBackground={true}
|
|
|
|
/>
|
2020-09-30 22:25:08 +00:00
|
|
|
|
2020-12-29 14:19:02 +00:00
|
|
|
{!isDesktop &&
|
|
|
|
(isLoaded && isAuthenticated ? (
|
|
|
|
<>
|
|
|
|
<HeaderNav history={history} />
|
|
|
|
<Header
|
|
|
|
isNavOpened={isNavOpened}
|
|
|
|
onClick={this.showNav}
|
|
|
|
onNavMouseEnter={this.handleNavMouseEnter}
|
|
|
|
onNavMouseLeave={this.handleNavMouseLeave}
|
|
|
|
toggleAside={this.toggleAside}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
) : !isLoaded && isAuthenticated ? (
|
|
|
|
<Loaders.Header />
|
|
|
|
) : (
|
|
|
|
<HeaderUnAuth />
|
|
|
|
))}
|
2020-11-13 18:39:49 +00:00
|
|
|
|
2020-09-30 22:25:08 +00:00
|
|
|
{isAsideAvailable && (
|
|
|
|
<Aside visible={isAsideVisible} onClick={this.backdropClick}>
|
|
|
|
{asideContent}
|
2020-09-21 15:27:22 +00:00
|
|
|
</Aside>
|
2020-11-12 16:00:43 +00:00
|
|
|
)}
|
2020-11-11 23:26:21 +00:00
|
|
|
</StyledContainer>
|
2020-09-21 15:27:22 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
NavMenu.propTypes = {
|
|
|
|
isBackdropVisible: PropTypes.bool,
|
|
|
|
isNavHoverEnabled: PropTypes.bool,
|
|
|
|
isNavOpened: PropTypes.bool,
|
|
|
|
isAsideVisible: PropTypes.bool,
|
2020-10-30 13:43:51 +00:00
|
|
|
isDesktop: PropTypes.bool,
|
2020-09-21 15:27:22 +00:00
|
|
|
|
|
|
|
asideContent: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2020-10-16 12:38:04 +00:00
|
|
|
PropTypes.node,
|
2020-09-21 15:27:22 +00:00
|
|
|
]),
|
|
|
|
|
2020-09-30 22:25:08 +00:00
|
|
|
isAuthenticated: PropTypes.bool,
|
|
|
|
isLoaded: PropTypes.bool,
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
history: PropTypes.object,
|
2020-09-21 15:27:22 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
NavMenu.defaultProps = {
|
|
|
|
isBackdropVisible: false,
|
|
|
|
isNavHoverEnabled: true,
|
|
|
|
isNavOpened: false,
|
2020-10-16 12:38:04 +00:00
|
|
|
isAsideVisible: false,
|
2020-10-30 13:43:51 +00:00
|
|
|
isDesktop: false,
|
2020-09-21 15:27:22 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const NavMenuTranslationWrapper = withTranslation()(NavMenu);
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
const NavMenuWrapper = (props) => {
|
2020-09-21 15:27:22 +00:00
|
|
|
const { language } = props;
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
i18n.changeLanguage(language);
|
|
|
|
}, [language]);
|
|
|
|
|
2020-09-30 22:25:08 +00:00
|
|
|
return (
|
|
|
|
<I18nextProvider i18n={i18n}>
|
|
|
|
<NavMenuTranslationWrapper {...props} />
|
|
|
|
</I18nextProvider>
|
|
|
|
);
|
2020-09-28 08:26:21 +00:00
|
|
|
};
|
2020-09-21 15:27:22 +00:00
|
|
|
|
|
|
|
NavMenuWrapper.propTypes = {
|
2020-10-16 12:38:04 +00:00
|
|
|
language: PropTypes.string.isRequired,
|
2020-09-21 15:27:22 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
function mapStateToProps(state) {
|
2020-10-05 15:25:01 +00:00
|
|
|
const { isAuthenticated, isLoaded } = state.auth;
|
2020-09-21 15:27:22 +00:00
|
|
|
|
|
|
|
return {
|
2020-09-30 22:25:08 +00:00
|
|
|
isAuthenticated,
|
|
|
|
isLoaded,
|
2020-10-30 13:43:51 +00:00
|
|
|
isDesktop: isDesktopClient(state),
|
2020-10-16 12:38:04 +00:00
|
|
|
language: getLanguage(state),
|
2020-09-21 15:27:22 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-10-05 15:25:01 +00:00
|
|
|
export default connect(mapStateToProps)(withRouter(NavMenuWrapper));
|