diff --git a/web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js b/web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js index cc6a51b1a6..9ba9163137 100644 --- a/web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js +++ b/web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js @@ -5,7 +5,7 @@ import i18n from "./i18n"; import AdvancedSelector from "../AdvancedSelector"; import { getGroupList } from "../../api/groups"; import { changeLanguage } from "../../utils"; - +import { isMobile } from "react-device-detect"; class GroupSelector extends React.Component { constructor(props) { super(props); @@ -16,13 +16,16 @@ class GroupSelector extends React.Component { componentDidMount() { changeLanguage(i18n); - + getGroupList(this.props.useFake) .then((groups) => this.setState({ groups: this.convertGroups(groups) })) .catch((error) => console.log(error)); + + isMobile && document.getElementById('scroll') && document.getElementById('scroll').scrollTo(0,0) } componentDidUpdate(prevProps) { + if (this.props.isOpen !== prevProps.isOpen) this.setState({ isOpen: this.props.isOpen }); } diff --git a/web/ASC.Web.Common/src/components/Layout/index.js b/web/ASC.Web.Common/src/components/Layout/index.js index 7cc07734aa..c9ac295e28 100644 --- a/web/ASC.Web.Common/src/components/Layout/index.js +++ b/web/ASC.Web.Common/src/components/Layout/index.js @@ -1,7 +1,7 @@ -import React, { Component, createRef, useEffect} from "react" +import React, { Component, createRef} from "react" import styled from "styled-components"; -import { Scrollbar } from "asc-web-components"; +import { Scrollbar, utils} from "asc-web-components"; import { isMobile } from "react-device-detect"; import {RefContextProvider, IsVisibleContextProvider} from "./context" @@ -22,44 +22,51 @@ class Layout extends Component{ } componentDidMount() { + (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false); } - componentWillUnmount() { (isMobile || this.windowWidth.matches ) && 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; + let visibleContent = prevScrollPosition >= currentScrollPosition; - this.setState({ + if (!visibleContent && (document.getElementById("scroll").scrollHeight - document.getElementById("scroll").clientHeight < 57)) { + visibleContent = true + } + + this.setState({ prevScrollPosition: currentScrollPosition, visibleContent }); }; + render() { const scrollProp = { ref: this.scrollRefPage } ; const { children } = this.props return( - - { (isMobile || this.windowWidth.matches ) - ? - - - - { children } - - - - - : children - } + + + + {(isMobile || (!isMobile && this.windowWidth.matches) ) + ? + + + { children } + + + + + : children + } - ) } } diff --git a/web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js b/web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js index 76262c4c24..155570aa90 100644 --- a/web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js +++ b/web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js @@ -1,5 +1,5 @@ /* eslint-disable react/prop-types */ -import React from "react"; +import React, { useEffect } from "react"; import { Redirect, Route } from "react-router-dom"; import { connect } from "react-redux"; //import { Loader } from "asc-web-components"; @@ -8,7 +8,7 @@ import { getCurrentUser, isAdmin, isMe } from "../../store/auth/selectors.js"; import { AUTH_KEY } from "../../constants"; import { Error401, Error404 } from "../../pages/errors"; import isEmpty from "lodash/isEmpty"; - +import { isMobile } from "react-device-detect"; const PrivateRoute = ({ component: Component, ...rest }) => { const { isAdmin, @@ -20,6 +20,10 @@ const PrivateRoute = ({ component: Component, ...rest }) => { } = rest; const { userId } = computedMatch.params; + useEffect(() => { + isMobile && document.getElementById('scroll') && document.getElementById('scroll').scrollTo(0,0) + }) + const renderComponent = (props) => { if (!isAuthenticated) { console.log("PrivateRoute render Redirect to login", rest);