From d62322490bed8bbeea4716a2d87475bdf911ad81 Mon Sep 17 00:00:00 2001 From: oasis <12181600+oasis-cloud@users.noreply.github.com> Date: Fri, 11 Oct 2024 10:06:44 +0800 Subject: [PATCH] =?UTF-8?q?feat(popup):=20lockscroll=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=8F=AF=E9=80=89=E5=80=BC=20strict,=20=E7=94=A8=E4=BA=8E?= =?UTF-8?q?=E6=94=AF=E6=8C=81=20iOS12=20(#2629)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(popup): lockscroll 增加可选值 strict, 用于支持 iOS12 * feat(popup): 更新文档 * feat(popup): 更新文档 --- src/packages/overlay/doc.en-US.md | 2 +- src/packages/overlay/doc.md | 2 +- src/packages/overlay/doc.zh-TW.md | 2 +- src/packages/overlay/overlay.tsx | 10 ++++++---- src/packages/popup/doc.en-US.md | 2 +- src/packages/popup/doc.md | 2 +- src/packages/popup/doc.zh-TW.md | 2 +- src/packages/popup/popup.tsx | 15 +++++++++------ 8 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/packages/overlay/doc.en-US.md b/src/packages/overlay/doc.en-US.md index 19f48d8fd6..4ffa427617 100644 --- a/src/packages/overlay/doc.en-US.md +++ b/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` | `-` | diff --git a/src/packages/overlay/doc.md b/src/packages/overlay/doc.md index 74f7f2fbde..57f13c1229 100644 --- a/src/packages/overlay/doc.md +++ b/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` | `-` | diff --git a/src/packages/overlay/doc.zh-TW.md b/src/packages/overlay/doc.zh-TW.md index 2dfa667d0f..929acff1af 100644 --- a/src/packages/overlay/doc.zh-TW.md +++ b/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` | `-` | diff --git a/src/packages/overlay/overlay.tsx b/src/packages/overlay/overlay.tsx index 3db024f6a7..e11c9e34dd 100644 --- a/src/packages/overlay/overlay.tsx +++ b/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) diff --git a/src/packages/popup/doc.en-US.md b/src/packages/popup/doc.en-US.md index f760845d88..b513983d55 100644 --- a/src/packages/popup/doc.en-US.md +++ b/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` | diff --git a/src/packages/popup/doc.md b/src/packages/popup/doc.md index 75944b1c19..27b6076865 100644 --- a/src/packages/popup/doc.md +++ b/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` | diff --git a/src/packages/popup/doc.zh-TW.md b/src/packages/popup/doc.zh-TW.md index 7e3c018c99..d866b0c20b 100644 --- a/src/packages/popup/doc.zh-TW.md +++ b/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` | diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx index 6987e39c9b..ca1abc71f4 100644 --- a/src/packages/popup/popup.tsx +++ b/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,