2020-09-21 15:27:22 +00:00
|
|
|
import React, { useEffect } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
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-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-10-05 15:25:01 +00:00
|
|
|
const { isAuthenticated, isLoaded, asideContent } = this.props;
|
|
|
|
|
2020-09-30 22:25:08 +00:00
|
|
|
const isAsideAvailable = !!asideContent;
|
|
|
|
|
|
|
|
console.log("NavMenu render", this.state, this.props);
|
2020-09-21 15:27:22 +00:00
|
|
|
|
|
|
|
return (
|
2020-10-30 13:43:51 +00:00
|
|
|
!isDesktop && (
|
|
|
|
<>
|
|
|
|
<Toast />
|
|
|
|
|
|
|
|
<Backdrop visible={isBackdropVisible} onClick={this.backdropClick} />
|
|
|
|
|
|
|
|
<HeaderNav />
|
|
|
|
|
|
|
|
{!isAuthenticated && isLoaded ? (
|
|
|
|
<HeaderUnAuth />
|
|
|
|
) : (
|
|
|
|
<Header
|
|
|
|
isNavOpened={isNavOpened}
|
|
|
|
onClick={this.showNav}
|
|
|
|
onNavMouseEnter={this.handleNavMouseEnter}
|
|
|
|
onNavMouseLeave={this.handleNavMouseLeave}
|
|
|
|
toggleAside={this.toggleAside}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{isAsideAvailable && (
|
|
|
|
<Aside visible={isAsideVisible} onClick={this.backdropClick}>
|
|
|
|
{asideContent}
|
|
|
|
</Aside>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)
|
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));
|