Commit 48bcba55 authored by Oleksii Savran's avatar Oleksii Savran Committed by Viacheslav Pavlov

Page isn`t scrolled if user goes by link with position key

- fixed scroll to top with anchor
parent 75a37a08
......@@ -11,7 +11,7 @@ import ADoc from 'model/cms/ADoc';
import PageLayout from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
import PageTitle from 'ui/common/PageTitle';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import { checkAnchorInUrl, ScrollToTopOnMount } from 'ui/common/page/scrollers';
import DocumentationSection from './c/DocumentationSection';
import Grid from '@material-ui/core/Grid';
......@@ -48,13 +48,19 @@ class ContentPage extends React.Component<IDocumentationPageProps> {
}
}
public componentDidUpdate(prevProps) {
const { documentation, loadingSlug } = this.props;
if (!prevProps.documentation && prevProps.loadingSlug && !loadingSlug && documentation) {
checkAnchorInUrl();
}
}
public render() {
const {documentation, apiUrl} = this.props;
return (
<PageLayout withFooter>
<ScrollToTopOnMount/>
<ScrollToTopOnMount withAnchor/>
{ documentation &&
<Grid container>
<PageTitle title={ documentation.title }/>
......
......@@ -23,7 +23,7 @@ import BackButton from 'ui/common/buttons/BackButton';
import PageLayout from 'ui/layout/PageLayout';
import DescriptorListDisplay from './c/DescriptorListDisplay';
import ErrorMessage from 'ui/common/error/ErrorMessage';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import { ScrollToTopOnMount, checkAnchorInUrl } from 'ui/common/page/scrollers';
interface IDescriptorListPageProps extends React.ClassAttributes<any> {
classes: any;
......@@ -64,13 +64,20 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
}
}
public componentDidUpdate(prevProps: IDescriptorListPageProps) {
const { descriptorList, loading } = this.props;
if (!prevProps.descriptorList && prevProps.loading && !loading && descriptorList && !!descriptorList.descriptors.length) {
checkAnchorInUrl();
}
}
public render() {
const { classes, loading, error, deleteDescriptorList, setDescriptorsToDescriptorList, copyDescriptor, descriptorList, apiUrl, t } = this.props;
const { approveDescriptorList, rejectDescriptorList, publishDescriptorList, editDescriptorList } = this.props;
return (
<PageLayout>
<ScrollToTopOnMount/>
<ScrollToTopOnMount withAnchor/>
<PageTitle title={ !loading && descriptorList ? `${descriptorList.title} ${descriptorList.versionTag}` : t('common:label.loading', {what: t('descriptorlists.public.p.display.title')}) }/>
<ContentHeaderWithButton
title={ !loading ? t('descriptorlists.public.p.display.title') : t('common:label.loading', {what: t('descriptorlists.public.p.display.title')}) }
......
import * as React from 'react';
interface IScrollToTopOnMountProps extends React.ClassAttributes<any> {
withAnchor?: boolean;
}
// Nicked from
// https://reacttraining.com/react-router/web/guides/scroll-restoration
export class ScrollToTopOnMount extends React.Component {
export class ScrollToTopOnMount extends React.Component<IScrollToTopOnMountProps> {
public componentDidMount() {
if (window) {
const {withAnchor} = this.props;
if (withAnchor) {
return checkAnchorInUrl();
}
window.scrollTo(0, 0);
}
}
......@@ -13,3 +23,16 @@ export class ScrollToTopOnMount extends React.Component {
return null;
}
}
export const checkAnchorInUrl = () => {
if (typeof window !== 'undefined') {
const id = window.location.hash.substr(1);
if (id) {
const anchor = document.getElementById(id);
if (anchor) {
anchor.scrollIntoView();
}
}
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment