Commit 99d9f55

committed

feat: added event listener for window resize for dynamic bar heights

1 parent 474504c commit 99d9f55Copy full SHA for 99d9f55

File tree

+26

-5

lines changed

+26

-5

lines changed

Lines changed: 3 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,12 @@ import { BarStatus } from '@/utils'`
`5`	`5`	`interface IProps {`
`6`	`6`	`value: number`
`7`	`7`	`status: BarStatus`
	`8`	`+ isMobileScreen: boolean`
`8`	`9`	`}`
`9`	`10`
`10`		`-const Bar: FC<IProps> = ({ value, status }: IProps) => {`
	`11`	`+const Bar: FC<IProps> = ({ value, status, isMobileScreen }: IProps) => {`
`11`	`12`	`const barStyle = {`
`12`		`- height: value * 2,`
	`13`	`+ height: value * (isMobileScreen ? 1.5 : 2),`
`13`	`14`	backgroundColor: `var(--${status})`
`14`	`15`	`}`
`15`	`16`	`return <div className='bar' style={barStyle} />`

Lines changed: 22 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { FC } from 'react'`
	`1`	`+import { FC,useEffect,useState } from 'react'`
`2`	`2`
`3`	`3`	`import { Bar } from '@/utils'`
`4`	`4`
`@@ -8,10 +8,30 @@ interface IProps {`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`const BarContainer: FC<IProps> = ({ step }: IProps) => {`
	`11`	`+ const [isMobileScreen, setIsMobileScreen] = useState<boolean>(true)`
	`12`	`+`
	`13`	`+ useEffect(() => {`
	`14`	`+ const resizeCallback = () => {`
	`15`	`+ const isMobile = window.innerWidth < 768`
	`16`	`+ setIsMobileScreen(isMobile)`
	`17`	`+ }`
	`18`	`+`
	`19`	`+ resizeCallback()`
	`20`	`+ window.addEventListener('resize', resizeCallback)`
	`21`	`+ return () => {`
	`22`	`+ window.removeEventListener('resize', resizeCallback)`
	`23`	`+ }`
	`24`	`+ }, [])`
	`25`	`+`
`11`	`26`	`return (`
`12`	`27`	`<div className='barContainer'>`
`13`	`28`	`{step.map(a => (`
`14`		`- <BarComponent key={a.value} value={a.value} status={a.status} />`
	`29`	`+ <BarComponent`
	`30`	`+ key={a.value}`
	`31`	`+ value={a.value}`
	`32`	`+ status={a.status}`
	`33`	`+ isMobileScreen={isMobileScreen}`
	`34`	`+ />`
`15`	`35`	`))}`
`16`	`36`	`</div>`
`17`	`37`	`)`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'`
`3`	`3`
`4`	`4`	`import { Bar } from '@/utils/Bar'`
`5`	`5`	`import { RootState } from '@/store'`
`6`		`-import sorting,{`
	`6`	`+import {`
`7`	`7`	`goToNextStep,`
`8`	`8`	`goToPreviousStep,`
`9`	`9`	`resetSorting,`

Comments

(0)