Skip to content

Commit

Permalink
feat(popup): lockscroll 增加可选值 strict, 用于支持 iOS12 (jdf2e#2629)
Browse files Browse the repository at this point in the history
* feat(popup): lockscroll 增加可选值 strict, 用于支持 iOS12

* feat(popup): 更新文档

* feat(popup): 更新文档
  • Loading branch information
oasis-cloud authored Oct 11, 2024
1 parent f7c0b40 commit d623224
Show file tree
Hide file tree
Showing 8 changed files with 21 additions and 16 deletions.
2 changes: 1 addition & 1 deletion src/packages/overlay/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ import { Overlay } from '@nutui/nutui-react'
| --- | --- | --- | --- |
| visible | Whether the current component is displayed | `boolean` | `false` |
| duration | Animation duration, in ms | `number` | `300` |
| lockScroll | Whether the background is locked | `boolean` | `true` |
| lockScroll | Whether the background is locked ,strict is used to support iOS12 | `boolean\|strict` | `true` |
| zIndex | Set component page level | `number` | `1000` |
| closeOnOverlayClick | Tap Mask off | `boolean` | `true` |
| onClick | Triggered when the button is clicked | `event: Event` | `-` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/overlay/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ import { Overlay } from '@nutui/nutui-react'
| --- | --- | --- | --- |
| visible | 当前组件是否显示 | `boolean` | `false` |
| duration | 动画时长,单位毫秒 | `number` | `300` |
| lockScroll | 背景是否锁定 | `boolean` | `true` |
| lockScroll | 背景是否锁定,strict 用于支持 iOS12 | `boolean\|strict` | `true` |
| zIndex | 设置组件页面层级 | `number` | `1000` |
| closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
| onClick | 点击时触发 | `event: Event` | `-` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/overlay/doc.zh-TW.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ import { Overlay } from '@nutui/nutui-react'
| --- | --- | --- | --- |
| visible | 當前組件是否顯示 | `boolean` | `false` |
| duration | 動畫時長,單位毫秒 | `number` | `300` |
| lockScroll | 背景是否鎖定 | `boolean` | `true` |
| lockScroll | 背景是否鎖定,strict 用於支援 iOS12 | `boolean\|strict` | `true` |
| zIndex | 設置組件頁面層級 | `number` | `1000` |
| closeOnOverlayClick | 是否點擊遮罩關閉 | `boolean` | `true` |
| onClick | 點擊時觸發 | `event: Event` | `-` |
Expand Down
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
2 changes: 1 addition & 1 deletion src/packages/popup/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ import { Popup } from '@nutui/nutui-react'
| duration | Mask animation duration, in ms | `number` | `300` |
| overlayClassName | custom mask class | `string` | `-` |
| overlayStyle | custom mask style | `CSSProperties` | `-` |
| lockScroll | Whether the background is locked | `boolean` | `true` |
| lockScroll | Whether the background is locked ,strict is used to support iOS12 | `boolean\|strict` | `true` |
| overlay | Whether to show the mask | `boolean` | `true` |
| closeOnOverlayClick | Whether to click the mask to close | `boolean` | `true` |
| position | popup location | `top` \| `bottom` \| `left` \| `right` \| `center` | `center` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/popup/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ import { Popup } from '@nutui/nutui-react'
| duration | 遮罩动画时长,单位毫秒 | `number` | `300` |
| overlayClassName | 自定义遮罩类名 | `string` | `-` |
| overlayStyle | 自定义遮罩样式 | `CSSProperties` | `-` |
| lockScroll | 背景是否锁定 | `boolean` | `true` |
| lockScroll | 背景是否锁定,strict 用于支持 iOS12 | `boolean\|strict` | `true` |
| overlay | 是否显示遮罩 | `boolean` | `true` |
| closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
| position | 弹出位置 | `top` \| `bottom` \| `left` \| `right` \| `center` | `center` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/popup/doc.zh-TW.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ import { Popup } from '@nutui/nutui-react'
| duration | 遮罩動畫時長,單位秒 | `number` | `0.3` |
| overlayClassName | 自定義遮罩類名 | `string` | `-` |
| overlayStyle | 自定義遮罩樣式 | `CSSProperties` | `-` |
| lockScroll | 背景是否鎖定 | `boolean` | `true` |
| lockScroll | 背景是否鎖定,strict 用於支援 iOS12 | `boolean\|strict` | `true` |
| overlay | 是否顯示遮罩 | `boolean` | `true` |
| closeOnOverlayClick | 是否點擊遮罩關閉 | `boolean` | `true` |
| position | 彈出位置(top,bottom,left,right,center) | `string` | `center` |
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 d623224

Please sign in to comment.