Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Fix/scroll#395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
ShMcK merged 4 commits intomasterfromfix/scroll
Jul 20, 2020
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletionsweb-app/src/containers/Tutorial/components/Level.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,6 @@ const styles = {
display: 'flex' as 'flex',
flexDirection: 'column' as 'column',
padding: 0,
paddingBottom: '5rem',
},

text: {
Expand All@@ -39,13 +38,6 @@ type Props = {
}

const Level = ({ level }: Props) => {
const pageBottomRef = React.useRef(null)
const scrollToBottom = () => {
// @ts-ignore
pageBottomRef.current.scrollIntoView({ behavior: 'smooth' })
}
React.useEffect(scrollToBottom, [level.id])

return (
<div css={styles.page}>
<div css={styles.content}>
Expand All@@ -54,8 +46,6 @@ const Level = ({ level }: Props) => {
{level.content.length && level.steps.length ? <div css={styles.separator} /> : null}

<Steps steps={level.steps} />

<div ref={pageBottomRef} />
</div>
</div>
)
Expand Down
81 changes: 81 additions & 0 deletionsweb-app/src/containers/Tutorial/components/ScrollContent.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
import * as React from 'react'
import { Icon } from '@alifd/next'

const styles = {
scrollIndicator: {
position: 'fixed' as 'fixed',
display: 'flex' as 'flex',
justifyContent: 'center' as 'center',
alignItems: 'center' as 'center',
left: 'calc(50% - 8px)',
borderRadius: '100%',
zIndex: 100,
bottom: '2.2rem',
boxShadow: '0 0 0 5px transparent',
},
}

type Props = {
item: string
children: React.ReactElement
}

const ScrollContent = ({ item, children }: Props) => {
const [showScrollIndicator, setShowScrollIndicator] = React.useState<'UNDETERMINED' | 'SHOW' | 'HIDE'>('UNDETERMINED')
const pageTopRef: React.RefObject<any> = React.useRef(null)
const pageBottomRef: React.RefObject<any> = React.useRef(null)

const scrollToTop = () => {
pageTopRef.current.scrollIntoView({ behavior: 'smooth' })
let hideTimeout: any

// API to detect if an HTML element is in the viewport
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
const observer = new IntersectionObserver(
([entry]) => {
// show a scroll indicator to let the user know
// they can scroll down for more
const isVisible = entry.isIntersecting
if (!isVisible && showScrollIndicator === 'UNDETERMINED') {
setShowScrollIndicator('SHOW')
}
hideTimeout = setTimeout(() => {
setShowScrollIndicator('HIDE')
observer.unobserve(pageBottomRef.current)
}, 2000)
},
{ rootMargin: '0px' },
)

const showTimeout = setTimeout(() => {
// detect if bottom of page is visible

if (pageBottomRef.current) {
observer.observe(pageBottomRef.current)
}
}, 600)
return () => {
// cleanup timeouts & subs
observer.unobserve(pageBottomRef.current)
clearTimeout(showTimeout)
clearTimeout(hideTimeout)
}
}

React.useEffect(scrollToTop, [item])

return (
<div css={{ position: 'relative' }}>
<div ref={pageTopRef} />
{children}
{showScrollIndicator === 'SHOW' ? (
<div style={styles.scrollIndicator}>
<Icon type="arrow-down" size="small" />
</div>
) : null}
<div ref={pageBottomRef} />
</div>
)
}

export default ScrollContent
13 changes: 11 additions & 2 deletionsweb-app/src/containers/Tutorial/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,12 @@ import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
import formatLevels from './formatLevels'
import Reset from './components/Reset'
import Continue from './components/Continue'
import ScrollContent from './components/ScrollContent'

const styles = {
page: {
paddingBottom: '5rem',
},
header: {
display: 'flex' as 'flex',
alignItems: 'center',
Expand DownExpand Up@@ -47,6 +51,7 @@ const styles = {
left: 0,
right: 0,
color: 'white',
zIndex: 1000,
},
processes: {
padding: '0 1rem',
Expand DownExpand Up@@ -112,15 +117,19 @@ const TutorialPage = (props: PageProps) => {

return (
<div>
<div>
<div css={styles.page}>
<div css={styles.header}>
<a onClick={() => setMenuVisible(!menuVisible)}>
<Icon type="toggle-left" size="small" style={{ color: '#333' }} />
</a>
<span css={styles.title}>{tutorial.summary.title}</span>
</div>

{page === 'level' && <Level level={level} />}
{page === 'level' && (
<ScrollContent item={level.id}>
<Level level={level} />
</ScrollContent>
)}
{page === 'review' && <ReviewPage levels={levels} />}
{/* {page === 'settings' && <SettingsPage />} */}
</div>
Expand Down
7 changes: 4 additions & 3 deletionsweb-app/stories/Tutorial.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -36,7 +36,8 @@ const context: Partial<T.MachineContext> = {
id: '1',
title: 'First Level',
summary: 'A summary of the first level',
content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
content:
'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!\nShould support markdown test\n ```js\nvar a = 1\n```\nwhew it works!\nShould support markdown test\n ```js\nvar a = 1\n```\nwhew it works!\nShould support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
setup: null,
status: 'COMPLETE' as 'COMPLETE',
steps: [
Expand DownExpand Up@@ -147,6 +148,6 @@ storiesOf('Tutorial', module)
position: { levelId: '1', stepId: '1.2' },
progress: { levels: {}, steps: {}, complete: false },
}
return <Tutorial context={firstLevel} send={action('send')} />
return <Tutorialstate="Normal"context={firstLevel} send={action('send')} />
})
.add('3 step', () => <Tutorial context={context} send={action('send')} />)
.add('3 step', () => <Tutorialstate="Normal"context={context} send={action('send')} />)
[8]ページ先頭
©2009-2025 Movatter.jp