Commit9c581dd

authored

Merge pull request#453 from ShubhamCanMakeCommit/feat/natural-progress-animation

Natural progress animation

2 parentsb42ac77 +696b27f commit9c581ddCopy full SHA for 9c581dd

File tree

+33

-15

lines changed

web-app/src
- containers/Tutorial/components
  - ProgressPie.tsx
- services/hooks
  - useNaturalProgress.ts

+33

-15

lines changed

Lines changed: 2 additions & 15 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,27 +1,14 @@`
`1`	`1`	`import*asReactfrom'react'`
`2`	`2`	`import{Progress,Icon}from'@alifd/next'`
	`3`	`+importuseNaturalProgressfrom'services/hooks/useNaturalProgress'`
`3`	`4`
`4`	`5`	`interfaceProps{`
`5`	`6`	`current:number`
`6`	`7`	`max:number`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`constProgressPie=(props:Props)=>{`
`10`		`-const[progress,setProgress]=React.useState(0)`
`11`		`-`
`12`		`-React.useEffect(()=>{`
`13`		`-lettimeout:any`
`14`		`-if(progress<props.current){`
`15`		`-timeout=setTimeout(()=>{`
`16`		`-setProgress(progress+1)`
`17`		`-},100)`
`18`		`-}`
`19`		`-return()=>{`
`20`		`-if(timeout){`
`21`		`-clearTimeout(timeout)`
`22`		`-}`
`23`		`-}`
`24`		`-},[progress])`
	`11`	`+constprogress=useNaturalProgress({stop:props.current})`
`25`	`12`
`26`	`13`	`constprogressPercent=Math.floor((progress/props.max)*100)`
`27`	`14`

Lines changed: 31 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,31 @@`
	`1`	`+import{useEffect,useState}from'react'`
	`2`	`+`
	`3`	`+interfaceProgressConfig{`
	`4`	`+start?:number`
	`5`	`+stop:number`
	`6`	`+updateDuration?:number`
	`7`	`+}`
	`8`	`+`
	`9`	`+constuseNaturalProgress=(config:ProgressConfig):number=>{`
	`10`	`+const{ start, stop, updateDuration}=config`
	`11`	`+const[progress,setProgress]=useState(start\|\|0)`
	`12`	`+useEffect(()=>{`
	`13`	`+lettimeout:any`
	`14`	`+letdifference=(stop-progress)/4`
	`15`	`+// for difference>0.01 update progress or make it stop`
	`16`	`+letnewProgress=difference>0.01 ?progress+difference :stop`
	`17`	`+if(progress<stop){`
	`18`	`+timeout=setTimeout(()=>{`
	`19`	`+setProgress(newProgress)`
	`20`	`+},updateDuration\|\|100)`
	`21`	`+}`
	`22`	`+return()=>{`
	`23`	`+if(timeout){`
	`24`	`+clearTimeout(timeout)`
	`25`	`+}`
	`26`	`+}`
	`27`	`+},[progress,stop,updateDuration])`
	`28`	`+returnprogress`
	`29`	`+}`
	`30`	`+`
	`31`	`+exportdefaultuseNaturalProgress`

Comments

(0)