Ajout d'un scrollToTop sur l'onLoad de l'iframe

betagouv · Mar 14, 2022 · 56eb238 · 56eb238
1 parent 4b14a27
commit 56eb238
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 18 deletions.
diff --git a/site/source/components/PlaceDesEntreprises.tsx b/site/source/components/PlaceDesEntreprises.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense, useEffect } from 'react'
+import { lazy, ReactEventHandler, Suspense, useEffect, useRef } from 'react'
 import styled from 'styled-components'
 import Emoji from './utils/Emoji'
 import { iframeResize } from 'iframe-resizer'
@@ -19,7 +19,13 @@ const IframeContainer = styled.div`
 	margin: 0 -3rem;
 `
 
-export const PlacesDesEntreprisesIframe = ({ src }: { src: string }) => {
+export const PlacesDesEntreprisesIframe = ({
+	src,
+	onLoad,
+}: {
+	src: string
+	onLoad?: ReactEventHandler<HTMLIFrameElement>
+}) => {
 	useEffect(() => {
 		iframeResize({}, '#pdeIframe')
 	}, [])
@@ -31,6 +37,7 @@ export const PlacesDesEntreprisesIframe = ({ src }: { src: string }) => {
 				src={src}
 				frameBorder="0"
 				id="pdeIframe"
+				onLoad={onLoad}
 			/>
 		</IframeContainer>
 	)
@@ -68,6 +75,12 @@ export const PlacesDesEntreprisesButton = ({
 			: 'reso-staging.osc-fr1.scalingo.io')
 	const url = new URL(baseURL + pathname)
 
+	const contentRef = useRef<HTMLDivElement>(null)
+
+	const scrollTo = (x: number, y: number) => {
+		contentRef.current?.scrollTo(x, y)
+	}
+
 	if (siret) {
 		url.searchParams.set('siret', siret)
 	}
@@ -82,7 +95,17 @@ export const PlacesDesEntreprisesButton = ({
 						<ButtonLabel>{t('Échanger avec un conseiller')}</ButtonLabel>
 					</Button>
 				)}
+				contentRef={contentRef}
 			>
+				<Body>
+					<Trans>
+						Décrivez votre projet ou votre problème en donnant quelques éléments
+						de contexte. Nous identifions, parmi l’ensemble des partenaires
+						publics et parapublics, le conseiller compétent pour votre demande.
+						Celui-ci vous contacte par téléphone sous 5 jours et vous accompagne
+						en fonction de votre situation.
+					</Trans>
+				</Body>
 				<Suspense
 					fallback={
 						<Container
@@ -95,18 +118,7 @@ export const PlacesDesEntreprisesButton = ({
 						</Container>
 					}
 				>
-					<>
-						<Body>
-							<Trans>
-								Décrivez votre projet ou votre problème en donnant quelques
-								éléments de contexte. Nous identifions, parmi l’ensemble des
-								partenaires publics et parapublics, le conseiller compétent pour
-								votre demande. Celui-ci vous contacte par téléphone sous 5 jours
-								et vous accompagne en fonction de votre situation.
-							</Trans>
-						</Body>
-						<LazyIframe src={url.href} />
-					</>
+					<LazyIframe src={url.href} onLoad={() => scrollTo(0, 0)} />
 				</Suspense>
 			</PopoverWithTrigger>
 		</Container>

diff --git a/site/source/design-system/Popover.tsx b/site/source/design-system/Popover.tsx
@@ -11,7 +11,7 @@ import {
 	usePreventScroll,
 } from '@react-aria/overlays'
 import { AriaDialogProps } from '@react-types/dialog'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { RefObject, useEffect, useRef, useState } from 'react'
 import styled, { css, keyframes, ThemeProvider } from 'styled-components'
 import { Container } from './layout'
 import { H2 } from './typography/heading'
@@ -44,9 +44,10 @@ export default function Popover(
 			children: React.ReactNode
 			title?: string
 			small?: boolean
+			contentRef?: RefObject<HTMLDivElement>
 		}
 ) {
-	const { title, children, small } = props
+	const { title, children, small, contentRef } = props
 
 	// Handle interacting outside the dialog and pressing
 	// the Escape key to close the modal.
@@ -118,7 +119,7 @@ export default function Popover(
 												</CloseButton>
 											</CloseButtonContainer>
 										)}
-										<PopoverContent>
+										<PopoverContent ref={contentRef}>
 											{title && (
 												<H2 as="h1" {...titleProps}>
 													{title}

diff --git a/site/source/design-system/PopoverWithTrigger.tsx b/site/source/design-system/PopoverWithTrigger.tsx
@@ -2,7 +2,14 @@ import { useOverlayTrigger } from '@react-aria/overlays'
 import { useOverlayTriggerState } from '@react-stately/overlays'
 import { AriaButtonProps } from '@react-types/button'
 import { Button } from '@/design-system/buttons'
-import React, { ReactElement, Ref, useEffect, useMemo, useRef } from 'react'
+import React, {
+	ReactElement,
+	Ref,
+	RefObject,
+	useEffect,
+	useMemo,
+	useRef,
+} from 'react'
 import { useLocation } from 'react-router'
 import Popover from './Popover'
 import { Link } from './typography/link'
@@ -18,13 +25,15 @@ type PopoverWithTriggerProps = {
 	children: React.ReactNode | ((close: () => void) => React.ReactNode)
 	title?: string
 	small?: boolean
+	contentRef?: RefObject<HTMLDivElement>
 }
 
 export default function PopoverWithTrigger({
 	children,
 	title,
 	trigger,
 	small,
+	contentRef,
 }: PopoverWithTriggerProps) {
 	const state = useOverlayTriggerState({})
 	const openButtonRef = useRef<HTMLButtonElement>(null)
@@ -66,6 +75,7 @@ export default function PopoverWithTrigger({
 					isDismissable
 					role="dialog"
 					small={small}
+					contentRef={contentRef}
 				>
 					{typeof children === 'function'
 						? children(() => state.close())