fix: disable scroll on popup open

Closes #61
This commit is contained in:
enes 2024-10-21 11:11:35 +02:00
parent 610801a674
commit 9d50cdfd88
5 changed files with 35 additions and 2 deletions

View File

@ -5,7 +5,12 @@ import { useState } from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { RelayController, UserRelaysType } from '../controllers' import { RelayController, UserRelaysType } from '../controllers'
import { useAppSelector, useDidMount, useNDKContext } from '../hooks' import {
useAppSelector,
useBodyScrollDisable,
useDidMount,
useNDKContext
} from '../hooks'
import { appRoutes, getProfilePageRoute } from '../routes' import { appRoutes, getProfilePageRoute } from '../routes'
import '../styles/author.css' import '../styles/author.css'
import '../styles/innerPage.css' import '../styles/innerPage.css'
@ -254,6 +259,8 @@ export const ProfileQRButtonWithPopUp = ({
}: QRButtonWithPopUpProps) => { }: QRButtonWithPopUpProps) => {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
useBodyScrollDisable(isOpen)
const nprofile = nip19.nprofileEncode({ const nprofile = nip19.nprofileEncode({
pubkey pubkey
}) })
@ -335,6 +342,8 @@ type ZapButtonWithPopUpProps = {
const ZapButtonWithPopUp = ({ pubkey }: ZapButtonWithPopUpProps) => { const ZapButtonWithPopUp = ({ pubkey }: ZapButtonWithPopUpProps) => {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
useBodyScrollDisable(isOpen)
return ( return (
<> <>
<div <div

View File

@ -6,3 +6,4 @@ export * from './useMuteLists'
export * from './useNSFWList' export * from './useNSFWList'
export * from './useReactions' export * from './useReactions'
export * from './useNDKContext' export * from './useNDKContext'
export * from './useScrollDisable'

View File

@ -0,0 +1,11 @@
import { useEffect } from 'react'
export const useBodyScrollDisable = (disable: boolean) => {
useEffect(() => {
if (disable) document.body.style.overflow = 'hidden'
return () => {
document.body.style.overflow = ''
}
}, [disable])
}

View File

@ -10,6 +10,7 @@ import { MetadataController } from '../controllers'
import { import {
useAppDispatch, useAppDispatch,
useAppSelector, useAppSelector,
useBodyScrollDisable,
useDidMount, useDidMount,
useNDKContext useNDKContext
} from '../hooks' } from '../hooks'
@ -260,6 +261,8 @@ const TipButtonWithDialog = React.memo(() => {
const [adminNpub, setAdminNpub] = useState<string | null>(null) const [adminNpub, setAdminNpub] = useState<string | null>(null)
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
useBodyScrollDisable(isOpen)
useDidMount(async () => { useDidMount(async () => {
const metadataController = await MetadataController.getInstance() const metadataController = await MetadataController.getInstance()
setAdminNpub(metadataController.adminNpubs[0]) setAdminNpub(metadataController.adminNpubs[0])
@ -321,6 +324,8 @@ const TipButtonWithDialog = React.memo(() => {
const RegisterButtonWithDialog = () => { const RegisterButtonWithDialog = () => {
const [showPopUp, setShowPopUp] = useState(false) const [showPopUp, setShowPopUp] = useState(false)
useBodyScrollDisable(showPopUp)
return ( return (
<> <>
<a <a

View File

@ -12,7 +12,12 @@ import { BlogCard } from '../../components/BlogCard'
import { LoadingSpinner } from '../../components/LoadingSpinner' import { LoadingSpinner } from '../../components/LoadingSpinner'
import { ProfileSection } from '../../components/ProfileSection' import { ProfileSection } from '../../components/ProfileSection'
import { MetadataController, UserRelaysType } from '../../controllers' import { MetadataController, UserRelaysType } from '../../controllers'
import { useAppSelector, useDidMount, useNDKContext } from '../../hooks' import {
useAppSelector,
useBodyScrollDisable,
useDidMount,
useNDKContext
} from '../../hooks'
import { getGamePageRoute, getModsEditPageRoute } from '../../routes' import { getGamePageRoute, getModsEditPageRoute } from '../../routes'
import '../../styles/comments.css' import '../../styles/comments.css'
import '../../styles/downloads.css' import '../../styles/downloads.css'
@ -221,6 +226,8 @@ const Game = ({ naddr, game, author, aTag }: GameProps) => {
const [isBlocked, setIsBlocked] = useState(false) const [isBlocked, setIsBlocked] = useState(false)
const [isAddedToNSFW, setIsAddedToNSFW] = useState(false) const [isAddedToNSFW, setIsAddedToNSFW] = useState(false)
useBodyScrollDisable(showReportPopUp)
useEffect(() => { useEffect(() => {
if (userState.auth && userState.user?.pubkey) { if (userState.auth && userState.user?.pubkey) {
const pubkey = userState.user.pubkey as string const pubkey = userState.user.pubkey as string