Web: Common/Components: Added Hide Header on Scroll Down & Show on Scroll Up
This commit is contained in:
parent
aca906db56
commit
5c89eabc81
@ -1,5 +1,8 @@
|
||||
import { createContext } from 'react'
|
||||
|
||||
const ThemeContext = createContext({})
|
||||
export const ThemeContextProvider = ThemeContext.Provider
|
||||
export const ThemeContextConsumer = ThemeContext.Consumer
|
||||
const RefContext = createContext({})
|
||||
const IsVisibleContext = createContext();
|
||||
export const RefContextProvider = RefContext.Provider
|
||||
export const IsVisibleContextProvider = IsVisibleContext.Provider
|
||||
export const RefContextConsumer = RefContext.Consumer
|
||||
export const IsVisibleContextConsumer = IsVisibleContext.Consumer
|
@ -3,7 +3,7 @@ import React, { Component, createRef} from "react"
|
||||
import styled from "styled-components";
|
||||
import { Scrollbar } from "asc-web-components";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import {ThemeContextProvider} from "./context"
|
||||
import {RefContextProvider, IsVisibleContextProvider} from "./context"
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
width:100%;
|
||||
@ -12,11 +12,33 @@ height:100vh;
|
||||
class Layout extends Component{
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
prevScrollPosition: window.pageYOffset ,
|
||||
visibleContent: true
|
||||
};
|
||||
this.scrollRefPage = createRef();
|
||||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
isMobile && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
|
||||
}
|
||||
|
||||
|
||||
componentWillUnmount() {
|
||||
isMobile && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
|
||||
}
|
||||
|
||||
scrolledTheVerticalAxis = () => {
|
||||
const { prevScrollPosition } = this.state;
|
||||
const currentScrollPosition = document.getElementById("scroll").scrollTop || window.pageYOffset ;
|
||||
const visibleContent = prevScrollPosition > currentScrollPosition;
|
||||
this.setState({
|
||||
prevScrollPosition: currentScrollPosition,
|
||||
visibleContent
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const scrollProp = { ref: this.scrollRefPage } ;
|
||||
const { children } = this.props
|
||||
@ -25,9 +47,11 @@ class Layout extends Component{
|
||||
<StyledContainer className="Layout">
|
||||
{ isMobile
|
||||
? <Scrollbar {...scrollProp} stype="mediumBlack">
|
||||
<ThemeContextProvider value={this.scrollRefPage}>
|
||||
<RefContextProvider value={this.scrollRefPage}>
|
||||
<IsVisibleContextProvider value={this.state.visibleContent}>
|
||||
{ children }
|
||||
</ThemeContextProvider>
|
||||
</IsVisibleContextProvider>
|
||||
</RefContextProvider>
|
||||
</Scrollbar>
|
||||
|
||||
: children
|
||||
|
@ -1,28 +1,16 @@
|
||||
import React, { useEffect } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Backdrop, Toast, Aside, utils } from "asc-web-components";
|
||||
import { Backdrop, Toast, Aside} from "asc-web-components";
|
||||
import Header from "./sub-components/header";
|
||||
import HeaderNav from "./sub-components/header-nav";
|
||||
import HeaderUnAuth from "./sub-components/header-unauth";
|
||||
import styled from "styled-components"
|
||||
|
||||
import { I18nextProvider, withTranslation } from "react-i18next";
|
||||
import i18n from "./i18n";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import { withRouter } from "react-router";
|
||||
|
||||
import { getLanguage } from "../../store/auth/selectors";
|
||||
const { tablet } = utils.device;
|
||||
|
||||
const StyledHideAndShow = styled.div`
|
||||
@media ${tablet} {
|
||||
top: 0px;
|
||||
transition: top 0.3s;
|
||||
z-index:100;
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
class NavMenu extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -112,7 +100,7 @@ class NavMenu extends React.Component {
|
||||
<Toast />
|
||||
|
||||
<Backdrop visible={isBackdropVisible} onClick={this.backdropClick} />
|
||||
<StyledHideAndShow id="scroll">
|
||||
|
||||
<HeaderNav />
|
||||
|
||||
{!isAuthenticated && isLoaded ? (
|
||||
@ -126,7 +114,7 @@ class NavMenu extends React.Component {
|
||||
toggleAside={this.toggleAside}
|
||||
/>
|
||||
)}
|
||||
</StyledHideAndShow>
|
||||
|
||||
{isAsideAvailable && (
|
||||
<Aside visible={isAsideVisible} onClick={this.backdropClick}>
|
||||
{asideContent}
|
||||
|
@ -6,6 +6,7 @@ import NavItem from "./nav-item";
|
||||
import ProfileActions from "./profile-actions";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { utils } from "asc-web-components";
|
||||
import {IsVisibleContextConsumer} from "asc-web-common"
|
||||
const { tablet } = utils.device;
|
||||
import { logout } from "../../../store/auth/actions";
|
||||
|
||||
@ -24,9 +25,6 @@ const StyledNav = styled.nav`
|
||||
height: 56px;
|
||||
z-index: 190;
|
||||
|
||||
@media ${tablet} {
|
||||
position:fixed;
|
||||
}
|
||||
|
||||
.profile-menu {
|
||||
right: 12px;
|
||||
@ -41,10 +39,17 @@ const StyledNav = styled.nav`
|
||||
margin: 0 0 0 16px;
|
||||
padding: 0;
|
||||
min-width: 24px;
|
||||
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
padding: 0 16px;
|
||||
position:fixed;
|
||||
transition: top 0.3s;
|
||||
top: ${props => props.valueTop ? "0" : "-56px"}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
`;
|
||||
const HeaderNav = React.memo(
|
||||
@ -89,8 +94,11 @@ const HeaderNav = React.memo(
|
||||
|
||||
//console.log("HeaderNav render");
|
||||
return (
|
||||
<StyledNav>
|
||||
<IsVisibleContextConsumer>
|
||||
{value =>
|
||||
<StyledNav valueTop={value}>
|
||||
{modules.map((module) => (
|
||||
|
||||
<NavItem
|
||||
key={module.id}
|
||||
iconName={module.iconName}
|
||||
@ -105,6 +113,8 @@ const HeaderNav = React.memo(
|
||||
<ProfileActions userActions={getCurrentUserActions()} user={user} />
|
||||
)}
|
||||
</StyledNav>
|
||||
}
|
||||
</IsVisibleContextConsumer>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
@ -5,7 +5,7 @@ import NavItem from "./nav-item";
|
||||
import Headline from "../../Headline";
|
||||
import Nav from "./nav";
|
||||
import NavLogoItem from "./nav-logo-item";
|
||||
|
||||
import {IsVisibleContextConsumer} from "asc-web-common"
|
||||
import { utils } from "asc-web-components";
|
||||
import { connect } from "react-redux";
|
||||
import {
|
||||
@ -31,7 +31,11 @@ const Header = styled.header`
|
||||
@media ${tablet} {
|
||||
position:fixed;
|
||||
z-index:100;
|
||||
transition: top 0.3s;
|
||||
top: ${props => props.valueTop ? "0" : "-56px"}
|
||||
}
|
||||
|
||||
|
||||
.header-logo-wrapper {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@ -106,7 +110,9 @@ const HeaderComponent = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header module={currentProductName}>
|
||||
<IsVisibleContextConsumer>
|
||||
{value =>
|
||||
<Header module={currentProductName} valueTop={value} >
|
||||
<NavItem
|
||||
iconName="MenuIcon"
|
||||
badgeNumber={totalNotifications}
|
||||
@ -127,7 +133,8 @@ const HeaderComponent = ({
|
||||
<Headline className="header-module-title" type="header" color="#FFF">
|
||||
{currentProductName}
|
||||
</Headline>
|
||||
</Header>
|
||||
</Header>}
|
||||
</IsVisibleContextConsumer>
|
||||
{isNavAvailable && (
|
||||
<Nav
|
||||
opened={isNavOpened}
|
||||
|
@ -5,7 +5,7 @@ import { utils, Scrollbar, DragAndDrop } from "asc-web-components";
|
||||
import SelectedFrame from "./SelectedFrame";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import {ThemeContextConsumer} from "asc-web-common"
|
||||
import {RefContextConsumer} from "asc-web-common"
|
||||
const { tablet } = utils.device;
|
||||
|
||||
const commonStyles = css`
|
||||
@ -134,7 +134,7 @@ class SectionBody extends React.Component {
|
||||
</SelectedFrame>
|
||||
</Scrollbar>)
|
||||
: (
|
||||
<ThemeContextConsumer>
|
||||
<RefContextConsumer>
|
||||
{value =>
|
||||
<SelectedFrame
|
||||
viewAs={viewAs}
|
||||
@ -149,7 +149,7 @@ class SectionBody extends React.Component {
|
||||
</div>
|
||||
</SelectedFrame>
|
||||
}
|
||||
</ThemeContextConsumer>)
|
||||
</RefContextConsumer>)
|
||||
) : (
|
||||
<SelectedFrame
|
||||
viewAs={viewAs}
|
||||
|
@ -3,7 +3,7 @@ import styled from "styled-components";
|
||||
import { utils } from "asc-web-components";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import classnames from "classnames";
|
||||
|
||||
import {IsVisibleContextConsumer} from "asc-web-common"
|
||||
const { tablet } = utils.device;
|
||||
|
||||
const StyledSectionHeader = styled.div`
|
||||
@ -20,12 +20,9 @@ const StyledSectionHeader = styled.div`
|
||||
|
||||
|
||||
}
|
||||
.section-header--hidden {
|
||||
@media ${tablet} {
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.section-header {
|
||||
width: calc(100% - 76px);
|
||||
|
||||
@ -53,43 +50,23 @@ const StyledSectionHeader = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-header--hidden {
|
||||
@media ${tablet} {
|
||||
top: -50px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class SectionHeader extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
prevScrollPosition: window.pageYOffset || document.documentElement.scrollTop,
|
||||
visibleContent: true
|
||||
};
|
||||
this.focusRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener("scroll", this.scrolledTheVerticalAxis,false);
|
||||
}
|
||||
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
|
||||
}
|
||||
|
||||
scrolledTheVerticalAxis = () => {
|
||||
const { prevScrollPosition } = this.state;
|
||||
// const first = document.documentElement.offsetTop
|
||||
// const second = document.body.scrollTop || document.documentElement.scrollTop
|
||||
const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
const visibleContent = prevScrollPosition > currentScrollPosition;
|
||||
|
||||
|
||||
this.setState({
|
||||
prevScrollPosition: currentScrollPosition,
|
||||
visibleContent
|
||||
});
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return !isEqual(this.props, nextProps);
|
||||
}
|
||||
@ -100,11 +77,18 @@ class SectionHeader extends React.Component {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const { isArticlePinned, ...rest } = this.props;
|
||||
return (
|
||||
|
||||
<StyledSectionHeader isArticlePinned={isArticlePinned}>
|
||||
<IsVisibleContextConsumer>
|
||||
{ value =>
|
||||
<div id="scroll" className={classnames("section-header", {
|
||||
"section-header--hidden": !this.state.visibleContent
|
||||
"section-header--hidden": !value
|
||||
})} {...rest}/>
|
||||
}
|
||||
</IsVisibleContextConsumer>
|
||||
</StyledSectionHeader>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,8 @@ export { default as PeopleSelector } from "./PeopleSelector";
|
||||
export { default as GroupSelector } from "./GroupSelector";
|
||||
export { default as AdvancedSelector } from "./AdvancedSelector";
|
||||
export { default as Layout } from "./Layout"
|
||||
export { ThemeContextConsumer } from "./Layout/context"
|
||||
export { RefContextConsumer } from "./Layout/context"
|
||||
export { IsVisibleContextConsumer} from "./Layout/context"
|
||||
export { default as PageLayout } from "./PageLayout";
|
||||
export { default as ProfileMenu } from "./ProfileMenu";
|
||||
export { default as ErrorContainer } from "./ErrorContainer";
|
||||
|
@ -3,7 +3,7 @@ import PropTypes from "prop-types";
|
||||
import { Scrollbars } from "react-custom-scrollbars";
|
||||
|
||||
const Scrollbar = React.forwardRef((props, ref) => {
|
||||
//console.log("Scrollbar render");
|
||||
|
||||
const scrollbarType = {
|
||||
smallWhite: {
|
||||
thumbV: {
|
||||
@ -97,6 +97,7 @@ const Scrollbar = React.forwardRef((props, ref) => {
|
||||
style={{ ...style, ...view }}
|
||||
tabIndex={-1}
|
||||
className={"scroll-body"}
|
||||
id="scroll"
|
||||
/>
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user