File tree Expand file tree Collapse file tree 3 files changed +34
-9
lines changed
web-app/src/containers/Tutorial Expand file tree Collapse file tree 3 files changed +34
-9
lines changed Original file line number Diff line number Diff line change @@ -39,16 +39,8 @@ type Props = {
3939}
4040
4141const Level = ( { level } : Props ) => {
42- const pageTopRef = React . useRef ( null )
43- const scrollToTop = ( ) => {
44- // @ts -ignore
45- pageTopRef . current . scrollIntoView ( { behavior : 'smooth' } )
46- }
47- React . useEffect ( scrollToTop , [ level . id ] )
48-
4942 return (
5043 < div css = { styles . page } >
51- < div ref = { pageTopRef } />
5244 < div css = { styles . content } >
5345 < Content title = { level . title } content = { level . content } />
5446
Original file line number Diff line number Diff line change 1+ import * as React from 'react'
2+
3+ type Props = {
4+ item : string
5+ children : React . ReactElement
6+ }
7+
8+ const ScrollContent = ( { item
10000
, children } : Props ) => {
9+ const pageTopRef : React . RefObject < any > = React . useRef ( null )
10+
11+ const pageBottomRef : React . RefObject < any > = React . useRef ( null )
12+
13+ const scrollToTop = ( ) => {
14+ pageTopRef . current . scrollIntoView ( { behavior : 'smooth' } )
15+ }
16+
17+ React . useEffect ( scrollToTop , [ item ] )
18+
19+ return (
20+ < >
21+ < div ref = { pageTopRef } />
22+ { children }
23+ < div ref = { pageBottomRef } />
24+ </ >
25+ )
26+ }
27+
28+ export default ScrollContent
Original file line number Diff line number Diff line change @@ -13,6 +13,7 @@ import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
1313import formatLevels from './formatLevels'
1414import Reset from './components/Reset'
1515import Continue from './components/Continue'
16+ import ScrollContent from './components/ScrollContent'
1617
1718const styles = {
1819 header : {
@@ -120,7 +121,11 @@ const TutorialPage = (props: PageProps) => {
120121 < span css = { styles . title } > { tutorial . summary . title } </ span >
121122 </ div >
122123
123- { page === 'level' && < Level level = { level } /> }
124+ { page === 'level' && (
125+ < ScrollContent item = { level . id } >
126+ < Level level = { level } />
127+ </ ScrollContent >
128+ ) }
124129 { page === 'review' && < ReviewPage levels = { levels } /> }
125130 { /* {page === 'settings' && <SettingsPage />} */ }
126131 </ div >
You can’t perform that action at this time.
0 commit comments