Web: Common: Added listener for current window width and changed context, deleted Box and unnecessary classes
This commit is contained in:
parent
19833e45d4
commit
55e2feb18d
@ -1,8 +1,7 @@
|
||||
import { createContext } from 'react'
|
||||
|
||||
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
|
||||
const LayoutContext = createContext({})
|
||||
|
||||
|
||||
export const LayoutContextProvider = LayoutContext.Provider
|
||||
export const LayoutContextConsumer = LayoutContext.Consumer
|
||||
|
@ -1,43 +1,49 @@
|
||||
|
||||
import React, { Component, createRef} from "react"
|
||||
import React, { Component, createRef, useRef, useEffect} from "react"
|
||||
import styled from "styled-components";
|
||||
import { Scrollbar, utils} from "asc-web-components";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import {RefContextProvider, IsVisibleContextProvider} from "./context"
|
||||
import { Scrollbar} from "asc-web-components";
|
||||
|
||||
import {LayoutContextProvider} from "./context"
|
||||
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
width:100%;
|
||||
height:100vh;
|
||||
`
|
||||
class Layout extends Component{
|
||||
class ExpandLayout extends Component{
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
prevScrollPosition: window.pageYOffset ,
|
||||
visibleContent: true
|
||||
};
|
||||
this.scrollRefPage = createRef();
|
||||
this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
|
||||
|
||||
this.state = {
|
||||
isTablet: window.innerWidth < 1024,
|
||||
prevScrollPosition: window.pageYOffset,
|
||||
visibleContent: true,
|
||||
};
|
||||
|
||||
this.scrollRefPage = createRef();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
(isMobile || this.windowWidth.matches ) && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
|
||||
componentDidMount() {
|
||||
this.getElementById = document.getElementById("scroll");
|
||||
|
||||
this.getElementById.addEventListener("scroll", this.scrolledTheVerticalAxis);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
(isMobile || this.windowWidth.matches ) && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
|
||||
}
|
||||
|
||||
this.getElementById.removeEventListener("scroll", this.scrolledTheVerticalAxis);
|
||||
}
|
||||
|
||||
scrolledTheVerticalAxis = () => {
|
||||
|
||||
const { prevScrollPosition } = this.state;
|
||||
const currentScrollPosition = document.getElementById("scroll").scrollTop || window.pageYOffset ;
|
||||
const currentScrollPosition = this.getElementById.scrollTop || window.pageYOffset ;
|
||||
let visibleContent = prevScrollPosition >= currentScrollPosition;
|
||||
|
||||
if (!visibleContent && (document.getElementById("scroll").scrollHeight - document.getElementById("scroll").clientHeight < 57)) {
|
||||
if (!visibleContent && (this.getElementById.scrollHeight - this.getElementById.clientHeight < 57)) {
|
||||
visibleContent = true
|
||||
}
|
||||
|
||||
@ -49,27 +55,42 @@ class Layout extends Component{
|
||||
|
||||
render() {
|
||||
const scrollProp = { ref: this.scrollRefPage } ;
|
||||
const { children } = this.props
|
||||
|
||||
const { children, windowWidth } = this.props
|
||||
return(
|
||||
|
||||
<StyledContainer className="Layout">
|
||||
|
||||
{(isMobile || (!isMobile && this.windowWidth.matches) )
|
||||
{windowWidth && windowWidth.matches
|
||||
? <Scrollbar {...scrollProp} stype="mediumBlack">
|
||||
<RefContextProvider value={this.scrollRefPage}>
|
||||
<IsVisibleContextProvider value={this.state.visibleContent}>
|
||||
<LayoutContextProvider value={{scrollRefLayout: this.scrollRefPage, isVisible:this.state.visibleContent}}>
|
||||
{ children }
|
||||
</IsVisibleContextProvider>
|
||||
</RefContextProvider>
|
||||
</LayoutContextProvider>
|
||||
</Scrollbar>
|
||||
|
||||
: children
|
||||
}
|
||||
</StyledContainer>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const Layout = (props) => {
|
||||
// const scrollRefPage = useRef(null)
|
||||
// const scrollProp = { ref: scrollRefPage } ;
|
||||
|
||||
const isTablet = window.innerWidth < 1024;
|
||||
|
||||
const [windowWidth, setWindowWidth] = React.useState({
|
||||
matches: isTablet,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let mediaQuery = window.matchMedia("(max-width: 1024px)");
|
||||
mediaQuery.addListener(setWindowWidth);
|
||||
|
||||
return () => mediaQuery.removeListener(setWindowWidth);
|
||||
}, []);
|
||||
|
||||
return <ExpandLayout windowWidth={windowWidth} {...props}/>;
|
||||
}
|
||||
export default Layout;
|
@ -6,7 +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"
|
||||
import {LayoutContextConsumer} from "asc-web-common"
|
||||
const { tablet } = utils.device;
|
||||
import { logout } from "../../../store/auth/actions";
|
||||
|
||||
@ -100,9 +100,9 @@ const HeaderNav = React.memo(
|
||||
|
||||
//console.log("HeaderNav render");
|
||||
return (
|
||||
<IsVisibleContextConsumer>
|
||||
<LayoutContextConsumer>
|
||||
{value =>
|
||||
<StyledNav valueTop={value}>
|
||||
<StyledNav valueTop={value.isVisible}>
|
||||
{modules.map((module) => (
|
||||
|
||||
<NavItem
|
||||
@ -120,7 +120,7 @@ const HeaderNav = React.memo(
|
||||
)}
|
||||
</StyledNav>
|
||||
}
|
||||
</IsVisibleContextConsumer>
|
||||
</LayoutContextConsumer>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
@ -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 {LayoutContextConsumer} from "asc-web-common"
|
||||
import { utils } from "asc-web-components";
|
||||
import { connect } from "react-redux";
|
||||
import {
|
||||
@ -116,9 +116,9 @@ const HeaderComponent = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<IsVisibleContextConsumer>
|
||||
<LayoutContextConsumer>
|
||||
{value =>
|
||||
<Header module={currentProductName} valueTop={value} >
|
||||
<Header module={currentProductName} valueTop={value.isVisible} >
|
||||
<NavItem
|
||||
iconName="MenuIcon"
|
||||
badgeNumber={totalNotifications}
|
||||
@ -140,7 +140,7 @@ const HeaderComponent = ({
|
||||
{currentProductName}
|
||||
</Headline>
|
||||
</Header>}
|
||||
</IsVisibleContextConsumer>
|
||||
</LayoutContextConsumer>
|
||||
{isNavAvailable && (
|
||||
<Nav
|
||||
opened={isNavOpened}
|
||||
|
@ -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"
|
||||
import {LayoutContextConsumer} from "asc-web-common"
|
||||
const { tablet } = utils.device;
|
||||
|
||||
const StyledSectionHeader = styled.div`
|
||||
@ -106,13 +106,13 @@ class SectionHeader extends React.Component {
|
||||
isArticlePinned={isArticlePinned}
|
||||
borderBottom={borderBottom}
|
||||
>
|
||||
<IsVisibleContextConsumer>
|
||||
<LayoutContextConsumer>
|
||||
{ value =>
|
||||
<div id="scroll" className={classnames("section-header", {
|
||||
"section-header--hidden": !value
|
||||
"section-header--hidden": !value.isVisible
|
||||
})} {...rest}/>
|
||||
}
|
||||
</IsVisibleContextConsumer>
|
||||
</LayoutContextConsumer>
|
||||
</StyledSectionHeader>
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user