Commitaa2a750

committed

refactor scroll content

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

1 parent7810621 commitaa2a750Copy full SHA for aa2a750

File tree

+34

-9

lines changed

web-app/src/containers/Tutorial
- components
  - Level.tsx
  - ScrollContent.tsx
- index.tsx

+34

-9

lines changed

Lines changed: 0 additions & 8 deletions

Original file line number	Diff line number	Diff line change
`@@ -39,16 +39,8 @@ type Props = {`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`constLevel=({ level}:Props)=>{`
`42`		`-constpageTopRef=React.useRef(null)`
`43`		`-constscrollToTop=()=>{`
`44`		`-//@ts-ignore`
`45`		`-pageTopRef.current.scrollIntoView({behavior:'smooth'})`
`46`		`-}`
`47`		`-React.useEffect(scrollToTop,[level.id])`
`48`		`-`
`49`	`42`	`return(`
`50`	`43`	`<divcss={styles.page}>`
`51`		`-<divref={pageTopRef}/>`
`52`	`44`	`<divcss={styles.content}>`
`53`	`45`	`<Contenttitle={level.title}content={level.content}/>`
`54`	`46`

Lines changed: 28 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,28 @@`
	`1`	`+import*asReactfrom'react'`
	`2`	`+`
	`3`	`+typeProps={`
	`4`	`+item:string`
	`5`	`+children:React.ReactElement`
	`6`	`+}`
	`7`	`+`
	`8`	`+constScrollContent=({ item, children}:Props)=>{`
	`9`	`+constpageTopRef:React.RefObject<any>=React.useRef(null)`
	`10`	`+`
	`11`	`+constpageBottomRef:React.RefObject<any>=React.useRef(null)`
	`12`	`+`
	`13`	`+constscrollToTop=()=>{`
	`14`	`+pageTopRef.current.scrollIntoView({behavior:'smooth'})`
	`15`	`+}`
	`16`	`+`
	`17`	`+React.useEffect(scrollToTop,[item])`
	`18`	`+`
	`19`	`+return(`
	`20`	`+<>`
	`21`	`+<divref={pageTopRef}/>`
	`22`	`+{children}`
	`23`	`+<divref={pageBottomRef}/>`
	`24`	`+</>`
	`25`	`+)`
	`26`	`+}`
	`27`	`+`
	`28`	`+exportdefaultScrollContent`

Lines changed: 6 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'`
`13`	`13`	`importformatLevelsfrom'./formatLevels'`
`14`	`14`	`importResetfrom'./components/Reset'`
`15`	`15`	`importContinuefrom'./components/Continue'`
	`16`	`+importScrollContentfrom'./components/ScrollContent'`
`16`	`17`
`17`	`18`	`conststyles={`
`18`	`19`	`header:{`
`@@ -120,7 +121,11 @@ const TutorialPage = (props: PageProps) => {`
`120`	`121`	`<spancss={styles.title}>{tutorial.summary.title}</span>`
`121`	`122`	`</div>`
`122`	`123`
`123`		`-{page==='level'&&<Levellevel={level}/>}`
	`124`	`+{page==='level'&&(`
	`125`	`+<ScrollContentitem={level.id}>`
	`126`	`+<Levellevel={level}/>`
	`127`	`+</ScrollContent>`
	`128`	`+)}`
`124`	`129`	`{page==='review'&&<ReviewPagelevels={levels}/>}`
`125`	`130`	`{/* {page === 'settings' && <SettingsPage />} */}`
`126`	`131`	`</div>`

Comments

(0)