Web: Common: Fix scrolling position when opening or editing a profile, refactoring Layout
This commit is contained in:
parent
58ee96df1f
commit
89bb769b92
@ -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);
|
||||
@ -20,9 +20,12 @@ class GroupSelector extends React.Component {
|
||||
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 });
|
||||
}
|
||||
|
@ -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,35 +22,43 @@ 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;
|
||||
|
||||
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(
|
||||
|
||||
<StyledContainer className="Layout" >
|
||||
{ (isMobile || this.windowWidth.matches )
|
||||
|
||||
{(isMobile || (!isMobile && this.windowWidth.matches) )
|
||||
? <Scrollbar {...scrollProp} stype="mediumBlack">
|
||||
<RefContextProvider value={this.scrollRefPage}>
|
||||
<IsVisibleContextProvider value={this.state.visibleContent}>
|
||||
|
||||
{ children }
|
||||
</IsVisibleContextProvider>
|
||||
</RefContextProvider>
|
||||
@ -59,7 +67,6 @@ class Layout extends Component{
|
||||
: children
|
||||
}
|
||||
</StyledContainer>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user