feat(popup): lockscroll 增加可选值 strict, 用于支持 iOS12 (jdf2e#2629)

* feat(popup): lockscroll 增加可选值 strict, 用于支持 iOS12

* feat(popup): 更新文档

* feat(popup): 更新文档

Author: oasis-cloud

src/packages/overlay/doc.en-US.md

@@ -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` | `-` |

src/packages/overlay/doc.md

@@ -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` | `-` |

src/packages/overlay/doc.zh-TW.md

@@ -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` | `-` |

src/packages/overlay/overlay.tsx

@@ -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'
@@ -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
@@ -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)
 

src/packages/popup/doc.en-US.md

@@ -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` |

src/packages/popup/doc.md

@@ -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` |

src/packages/popup/doc.zh-TW.md

@@ -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` |

src/packages/popup/popup.tsx

@@ -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'
@@ -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,