aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-06 16:04:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

hotfix: update vote particles position on scroll

Browse Source
This commit is contained in:
MTG2000
2022-09-02 14:58:20 +03:00
parent 3660eb39ce
commit c6aea31159
1 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/Components/VoteButton/VoteButton.tsx
View File

@@ -1,7 +1,7 @@
import { MdLocalFireDepartment } from 'react-icons/md'
import Button from 'src/Components/Button/Button'
import { useAppSelector, usePressHolder, useResizeListener, useVote } from 'src/utils/hooks'
import { ComponentProps, SyntheticEvent, useRef, useState } from 'react'
import { ComponentProps, SyntheticEvent, useRef, useState, useEffect } from 'react'
import styles from './styles.module.scss'
import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
import { useDebouncedCallback, useMountEffect, useThrottledCallback } from '@react-hookz/web'
@@ -179,28 +179,44 @@ export default function VoteButton({
onHold();
}
useMountEffect(() => {
const bodyRect = document.body.getBoundingClientRect();
const btnRect = btnContainerRef.current.getBoundingClientRect()
setBtnPosition({
top: btnRect.top - bodyRect.top,
left: btnRect.left - bodyRect.left,
width: btnRect.width,
height: btnRect.height
});
const updateParticlesContainerPos = useDebouncedCallback(
() => {
const bodyRect = document.body.getBoundingClientRect();
const btnRect = btnContainerRef.current.getBoundingClientRect()
setBtnPosition({
top: btnRect.top - bodyRect.top,
left: btnRect.left - bodyRect.left,
width: btnRect.width,
height: btnRect.height
});
},
[],
300
)
})
useResizeListener(() => {
const bodyRect = document.body.getBoundingClientRect();
const btnRect = btnContainerRef.current.getBoundingClientRect()
setBtnPosition({
top: btnRect.top - bodyRect.top,
left: btnRect.left - bodyRect.left,
width: btnRect.width,
height: btnRect.height
});
}, { debounce: 300 })
useEffect(() => {
updateParticlesContainerPos();
document.addEventListener('scroll', updateParticlesContainerPos)
document.addEventListener('resize', updateParticlesContainerPos)
return () => {
document.removeEventListener('scroll', updateParticlesContainerPos)
document.removeEventListener('resize', updateParticlesContainerPos)
}
}, [updateParticlesContainerPos])
// useResizeListener(() => {
// const bodyRect = document.body.getBoundingClientRect();
// const btnRect = btnContainerRef.current.getBoundingClientRect()
// setBtnPosition({
// top: btnRect.top - bodyRect.top,
// left: btnRect.left - bodyRect.left,
// width: btnRect.width,
// height: btnRect.height
// });
// }, { debounce: 300 })
return (
<button