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

Commit4e6b79c

Browse files
committed
add scroll indicator
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent96ef687 commit4e6b79c

File tree

3 files changed

+32
-21
lines changed

3 files changed

+32
-21
lines changed

‎web-app/src/containers/Tutorial/components/ScrollContent.tsx

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import*asReactfrom'react'
2+
import{Icon}from'@alifd/next'
23

34
conststyles={
45
scrollIndicator:{
56
position:'fixed'as'fixed',
6-
bottom:'2rem',
7+
display:'flex'as'flex',
8+
justifyContent:'center'as'center',
9+
alignItems:'center'as'center',
10+
left:'calc(50% - 8px)',
11+
borderRadius:'100%',
12+
zIndex:100,
13+
bottom:'2.2rem',
14+
boxShadow:'0 0 0 5px transparent',
715
},
816
}
917

@@ -13,7 +21,7 @@ type Props = {
1321
}
1422

1523
constScrollContent=({ item, children}:Props)=>{
16-
const[showScrollIndicator,setShowScrollIndicator]=React.useState(false)
24+
const[showScrollIndicator,setShowScrollIndicator]=React.useState<'UNDETERMINED'|'SHOW'|'HIDE'>('UNDETERMINED')
1725
constpageTopRef:React.RefObject<any>=React.useRef(null)
1826
constpageBottomRef:React.RefObject<any>=React.useRef(null)
1927

@@ -27,17 +35,16 @@ const ScrollContent = ({ item, children }: Props) => {
2735
([entry])=>{
2836
// show a scroll indicator to let the user know
2937
// they can scroll down for more
30-
constisVisible=!entry.isIntersecting
31-
setShowScrollIndicator(isVisible)
32-
if(!isVisible){
33-
hideTimeout=setTimeout(()=>{
34-
setShowScrollIndicator(false)
35-
},3000)
38+
constisVisible=entry.isIntersecting
39+
if(!isVisible&&showScrollIndicator==='UNDETERMINED'){
40+
setShowScrollIndicator('SHOW')
3641
}
42+
hideTimeout=setTimeout(()=>{
43+
setShowScrollIndicator('HIDE')
44+
observer.unobserve(pageBottomRef.current)
45+
},2000)
3746
},
38-
{
39-
rootMargin:'0px',
40-
},
47+
{rootMargin:'0px'},
4148
)
4249

4350
constshowTimeout=setTimeout(()=>{
@@ -46,7 +53,7 @@ const ScrollContent = ({ item, children }: Props) => {
4653
if(pageBottomRef.current){
4754
observer.observe(pageBottomRef.current)
4855
}
49-
},300)
56+
},600)
5057
return()=>{
5158
// cleanup timeouts & subs
5259
observer.unobserve(pageBottomRef.current)
@@ -57,15 +64,17 @@ const ScrollContent = ({ item, children }: Props) => {
5764

5865
React.useEffect(scrollToTop,[item])
5966

60-
console.log(`showScrollIndicator =${showScrollIndicator}`)
61-
6267
return(
63-
<>
68+
<divcss={{position:'relative'}}>
6469
<divref={pageTopRef}/>
6570
{children}
66-
{showScrollIndicator ?<divstyle={styles.scrollIndicator}>MORE</div> :null}
67-
<divref={pageBottomRef}>BOTTOM</div>
68-
</>
71+
{showScrollIndicator==='SHOW' ?(
72+
<divstyle={styles.scrollIndicator}>
73+
<Icontype="arrow-down"size="small"/>
74+
</div>
75+
) :null}
76+
<divref={pageBottomRef}/>
77+
</div>
6978
)
7079
}
7180

‎web-app/src/containers/Tutorial/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const styles = {
5151
left:0,
5252
right:0,
5353
color:'white',
54+
zIndex:1000,
5455
},
5556
processes:{
5657
padding:'0 1rem',

‎web-app/stories/Tutorial.stories.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ const context: Partial<T.MachineContext> = {
3636
id:'1',
3737
title:'First Level',
3838
summary:'A summary of the first level',
39-
content:'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
39+
content:
40+
'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!',
4041
setup:null,
4142
status:'COMPLETE'as'COMPLETE',
4243
steps:[
@@ -147,6 +148,6 @@ storiesOf('Tutorial', module)
147148
position:{levelId:'1',stepId:'1.2'},
148149
progress:{levels:{},steps:{},complete:false},
149150
}
150-
return<Tutorialcontext={firstLevel}send={action('send')}/>
151+
return<Tutorialstate="Normal"context={firstLevel}send={action('send')}/>
151152
})
152-
.add('3 step',()=><Tutorialcontext={context}send={action('send')}/>)
153+
.add('3 step',()=><Tutorialstate="Normal"context={context}send={action('send')}/>)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp