Skip to content

Commit

Permalink
feat(popup): lockscroll 增加可选值 strict, 用于支持 iOS12
Browse files Browse the repository at this point in the history
  • Loading branch information
oasis-cloud committed Oct 9, 2024
1 parent 46abf45 commit 2cecfb9
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 10 deletions.
10 changes: 6 additions & 4 deletions src/packages/overlay/overlay.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, {
useState,
useEffect,
FunctionComponent,
MouseEvent,
MouseEventHandler,
useEffect,
useRef,
useState,
} from 'react'
import { CSSTransition } from 'react-transition-group'
import { EnterHandler, ExitHandler } from 'react-transition-group/Transition'
Expand All @@ -17,7 +17,7 @@ export interface OverlayProps extends BasicComponent {
duration: number
closeOnOverlayClick: boolean
visible: boolean
lockScroll: boolean
lockScroll: boolean | 'strict'
onClick: (event: MouseEvent) => void
afterShow: () => void
afterClose: () => void
Expand Down Expand Up @@ -66,7 +66,9 @@ export const Overlay: FunctionComponent<
}
}, [visible])

useLockScroll(nodeRef, !!lockScroll && innerVisible)
const shouldLockScroll = !innerVisible ? false : lockScroll

useLockScroll(nodeRef, shouldLockScroll)

const classes = classNames(classPrefix, className)

Expand Down
15 changes: 9 additions & 6 deletions src/packages/popup/popup.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import React, {
FunctionComponent,
useState,
useEffect,
MouseEventHandler,
MouseEvent,
MouseEventHandler,
ReactElement,
ReactPortal,
ReactNode,
ReactPortal,
useEffect,
useState,
} from 'react'
import { createPortal } from 'react-dom'
import { CSSTransition } from 'react-transition-group'
import classNames from 'classnames'
import { Close } from '@nutui/icons-react'
import { EnterHandler, ExitHandler } from 'react-transition-group/Transition'
import { OverlayProps, defaultOverlayProps } from '@/packages/overlay/overlay'
import { defaultOverlayProps, OverlayProps } from '@/packages/overlay/overlay'
import Overlay from '@/packages/overlay'
import { ComponentDefaults } from '@/utils/typings'
import { useLockScroll } from '@/utils/use-lock-scroll'
Expand Down Expand Up @@ -104,7 +104,10 @@ export const Popup: FunctionComponent<
const [innerVisible, setInnerVisible] = useState(visible)
const [showChildren, setShowChildren] = useState(true)
const [transitionName, setTransitionName] = useState('')
useLockScroll(nodeRef, innerVisible && lockScroll)

const shouldLockScroll = !innerVisible ? false : lockScroll
useLockScroll(nodeRef, shouldLockScroll)

const classPrefix = 'nut-popup'
const baseStyle = {
zIndex: index,
Expand Down

0 comments on commit 2cecfb9

Please sign in to comment.