kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'scroll-context' into 'main'
Implement a custom ScrollContext component See merge request soapbox-pub/soapbox!3193merge-requests/3194/head
commit
a78aa37d56
|
@ -137,7 +137,6 @@
|
|||
"react-redux": "^9.0.4",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-router-dom-v5-compat": "^6.6.2",
|
||||
"react-router-scroll-4": "^1.0.0-beta.2",
|
||||
"react-simple-pull-to-refresh": "^1.3.3",
|
||||
"react-sparklines": "^1.7.0",
|
||||
"react-sticky-box": "^2.0.0",
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import { usePrevious } from 'soapbox/hooks';
|
||||
|
||||
export type Location<T> = ReturnType<typeof useLocation<T>>;
|
||||
|
||||
interface IScrollContext {
|
||||
shouldUpdateScroll(prevLocation: Location<any> | undefined, location: Location<any>): boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ScrollContext: React.FC<IScrollContext> = ({ shouldUpdateScroll, children }) => {
|
||||
const location = useLocation();
|
||||
const prevLocation = usePrevious(location);
|
||||
|
||||
useEffect(() => {
|
||||
if (prevLocation && shouldUpdateScroll(prevLocation, location)) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
}, [location, shouldUpdateScroll]);
|
||||
|
||||
return children;
|
||||
};
|
|
@ -2,12 +2,11 @@ import React, { Suspense, useEffect } from 'react';
|
|||
import { Toaster } from 'react-hot-toast';
|
||||
import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
|
||||
import { CompatRouter } from 'react-router-dom-v5-compat';
|
||||
// @ts-ignore: it doesn't have types
|
||||
import { ScrollContext } from 'react-router-scroll-4';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import * as BuildConfig from 'soapbox/build-config';
|
||||
import LoadingScreen from 'soapbox/components/loading-screen';
|
||||
import { Location, ScrollContext } from 'soapbox/components/scroll-context';
|
||||
import SiteErrorBoundary from 'soapbox/components/site-error-boundary';
|
||||
import {
|
||||
ModalContainer,
|
||||
|
@ -25,6 +24,10 @@ const GdprBanner = React.lazy(() => import('soapbox/components/gdpr-banner'));
|
|||
const EmbeddedStatus = React.lazy(() => import('soapbox/features/embedded-status'));
|
||||
const UI = React.lazy(() => import('soapbox/features/ui'));
|
||||
|
||||
interface LocationState {
|
||||
soapboxModalKey?: string;
|
||||
}
|
||||
|
||||
/** Highest level node with the Redux store. */
|
||||
const SoapboxMount = () => {
|
||||
useCachedLocationHandler();
|
||||
|
@ -51,10 +54,9 @@ const SoapboxMount = () => {
|
|||
|
||||
const { redirectRootNoLogin, gdpr } = soapboxConfig;
|
||||
|
||||
// @ts-ignore: I don't actually know what these should be, lol
|
||||
const shouldUpdateScroll = (prevRouterProps, { location }) => {
|
||||
return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
|
||||
};
|
||||
function shouldUpdateScroll<T extends LocationState>(prev: Location<T> | undefined, location: Location<T>): boolean {
|
||||
return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prev?.state?.soapboxModalKey);
|
||||
}
|
||||
|
||||
return (
|
||||
<SiteErrorBoundary>
|
||||
|
|
23
yarn.lock
23
yarn.lock
|
@ -5516,13 +5516,6 @@ intl-pluralrules@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/intl-pluralrules/-/intl-pluralrules-2.0.1.tgz#de16c3df1e09437635829725e88ea70c9ad79569"
|
||||
integrity sha512-astxTLzIdXPeN0K9Rumi6LfMpm3rvNO0iJE+h/k8Kr/is+wPbRe4ikyDjlLr6VTh/mEfNv8RjN+gu3KwDiuhqg==
|
||||
|
||||
invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
|
||||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
|
||||
|
@ -7363,14 +7356,6 @@ react-router-dom@^5.3.0:
|
|||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-router-scroll-4@^1.0.0-beta.2:
|
||||
version "1.0.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router-scroll-4/-/react-router-scroll-4-1.0.0-beta.2.tgz#d887063ec0f66124aaf450158dd158ff7d3dc279"
|
||||
integrity sha512-K67Dnm75naSBs/WYc2CDNxqU+eE8iA3I0wSCArgGSHb0xR/7AUcgUEXtCxrQYVTogXvjVK60gmwYvOyRQ6fuBA==
|
||||
dependencies:
|
||||
scroll-behavior "^0.9.1"
|
||||
warning "^3.0.0"
|
||||
|
||||
react-router@5.2.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
|
||||
|
@ -7817,14 +7802,6 @@ schema-utils@^4.0.0:
|
|||
ajv-formats "^2.1.1"
|
||||
ajv-keywords "^5.0.0"
|
||||
|
||||
scroll-behavior@^0.9.1:
|
||||
version "0.9.12"
|
||||
resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.12.tgz#1c22d273ec4ce6cd4714a443fead50227da9424c"
|
||||
integrity sha512-18sirtyq1P/VsBX6O/vgw20Np+ngduFXEMO4/NDFXabdOKBL2kjPVUpz1y0+jm99EWwFJafxf5/tCyMeXt9Xyg==
|
||||
dependencies:
|
||||
dom-helpers "^3.4.0"
|
||||
invariant "^2.2.4"
|
||||
|
||||
semver-compare@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
|
||||
|
|
Ładowanie…
Reference in New Issue