Skip to content

Commit

Permalink
fix lints
Browse files Browse the repository at this point in the history
  • Loading branch information
blainekasten committed May 21, 2020
1 parent 23344c0 commit 36bcdbd
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 27 deletions.
19 changes: 10 additions & 9 deletions packages/gatsby-react-router-scroll/src/scroll-container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,44 +12,45 @@ const propTypes = {
children: PropTypes.element.isRequired,
}

type Props = {
interface IProps {
scrollKey: string
shouldUpdateScroll?: Function
children: React.ReactNode
}

type PropsWithContextAndLocation = Props & {
interface IPropsWithContextAndLocation extends IProps {
context: SessionStorage
location: HLocation
}

class ScrollContainerImplementation extends React.Component<
PropsWithContextAndLocation
IPropsWithContextAndLocation
> {
componentDidMount() {
componentDidMount(): void {
// eslint-disable-next-line react/no-find-dom-node
const node = ReactDOM.findDOMNode(this) as Element
const { location, scrollKey } = this.props

if (!node) return

node.addEventListener("scroll", () => {
node.addEventListener(`scroll`, () => {
this.props.context.save(location, scrollKey, node.scrollTop)
})

const position = this.props.context.read(location, scrollKey)
node.scrollTo(0, position)
}

render() {
render(): React.ReactNode {
return this.props.children
}
}

export const ScrollContainer = (props: Props) => (
export const ScrollContainer = (props: IProps): React.ReactNode => (
<Location>
{({ location }) => (
{({ location }): React.ReactNode => (
<ScrollContext.Consumer>
{context => (
{(context): React.ReactNode => (
<ScrollContainerImplementation
{...props}
context={context}
Expand Down
23 changes: 13 additions & 10 deletions packages/gatsby-react-router-scroll/src/scroll-handler.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,15 @@ export class ScrollHandler extends React.Component<

_stateStorage: SessionStorage = new SessionStorage()

scrollListener = () => {
scrollListener = (): void => {
const { key } = this.props.location

this._stateStorage.save(this.props.location, key, window.scrollY)
if (key) {
this._stateStorage.save(this.props.location, key, window.scrollY)
}
}

componentDidMount() {
componentDidMount(): void {
window.addEventListener(`scroll`, this.scrollListener)

const scrollPosition = this._stateStorage.read(
Expand All @@ -45,17 +47,18 @@ export class ScrollHandler extends React.Component<
}
}

componentWillUnmount() {
componentWillUnmount(): void {
window.removeEventListener(`scroll`, this.scrollListener)
}

componentDidUpdate(prevProps: LocationContext): void {
const { hash } = this.props.location
const { hash, key } = this.props.location
let scrollPosition

if (key) {
scrollPosition = this._stateStorage.read(this.props.location, key)
}

const scrollPosition = this._stateStorage.read(
this.props.location,
this.props.location.key
)
if (scrollPosition) {
this.windowScroll(scrollPosition, prevProps)
} else if (hash) {
Expand Down Expand Up @@ -96,7 +99,7 @@ export class ScrollHandler extends React.Component<
return shouldUpdateScroll.call(this, prevRouterProps, routerProps)
}

render() {
render(): React.ReactNode {
return (
<ScrollContext.Provider value={this._stateStorage}>
{this.props.children}
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-react-router-scroll/src/session-storage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class SessionStorage {
}
}

save(location: Location, key: string, value: number) {
save(location: Location, key: string, value: number): void {
const stateKey = this.getStateKey(location, key)
const storedValue = JSON.stringify(value)

Expand All @@ -50,7 +50,7 @@ export class SessionStorage {
}
}

getStateKey(location: Location, key: string) {
getStateKey(location: Location, key: string): string {
const locationKey = location.key || location.pathname
const stateKeyBase = `${STATE_KEY_PREFIX}${locationKey}`
return key === null || typeof key === `undefined`
Expand Down
23 changes: 17 additions & 6 deletions packages/gatsby-react-router-scroll/src/use-scroll-restoration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,31 @@ import { ScrollContext } from "./scroll-handler"
import { useRef, useContext, useLayoutEffect } from "react"
import { useLocation } from "@reach/router"

export function useScrollRestoration(identifier: string) {
interface IScrollRestorationProps {
ref: React.MutableRefObject<HTMLElement | undefined>
onScroll(): void
}

export function useScrollRestoration(
identifier: string
): IScrollRestorationProps {
const location = useLocation()
const state = useContext(ScrollContext)
const ref = useRef<HTMLElement>()

useLayoutEffect(() => {
const position = state.read(location, identifier)
ref.current!.scrollTo(0, position)
useLayoutEffect((): void => {
if (ref.current) {
const position = state.read(location, identifier)
ref.current.scrollTo(0, position)
}
}, [])

return {
ref,
onScroll() {
state.save(location, identifier, ref.current!.scrollTop)
onScroll(): void {
if (ref.current) {
state.save(location, identifier, ref.current.scrollTop)
}
},
}
}

0 comments on commit 36bcdbd

Please sign in to comment.