feat(Popup): 🎸 新增 overlayBackgroundColor 自定义 Overlay 颜色

公共属性,基于 Popup 实现的组件都可以使用
24jieqi · Sep 26, 2024 · 0a6fac0 · 0a6fac0
1 parent b9dc717
commit 0a6fac0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git a/src/dialog/__fixtures__/base.tsx b/src/dialog/__fixtures__/base.tsx
@@ -132,7 +132,6 @@ const BasicDialogBase: React.FC = () => {
       <Cell
         title="确认弹窗:自定义颜色、文案、beforeClose"
         isLink
-        divider={false}
         onPress={() => {
           Dialog.confirm({
             title: '提示',
@@ -164,6 +163,18 @@ const BasicDialogBase: React.FC = () => {
           })
         }}
       />
+      <Cell
+        title="其他:自定义 Overlay 颜色"
+        isLink
+        divider={false}
+        onPress={() => {
+          Dialog.confirm({
+            title: '提示',
+            message: '自定义 Overlay 颜色',
+            overlayBackgroundColor: '#098',
+          })
+        }}
+      />
     </Cell.Group>
   )
 }

diff --git a/src/popup/__fixtures__/popup.tsx b/src/popup/__fixtures__/popup.tsx
@@ -22,10 +22,12 @@ const BasicPopupPopup: React.FC = () => {
     show: boolean
     position: PopupPosition
     show2: boolean
+    show3: boolean
   }>({
     show: false,
     position: 'left',
     show2: false,
+    show3: false,
   })
   return (
     <>
@@ -58,6 +60,17 @@ const BasicPopupPopup: React.FC = () => {
               }))
             }}
           />
+
+          <Button
+            type="primary"
+            text="overlayBackgroundColor"
+            onPress={() => {
+              setState(s => ({
+                ...s,
+                show3: true,
+              }))
+            }}
+          />
         </Space>
       </Card>
 
@@ -115,6 +128,21 @@ const BasicPopupPopup: React.FC = () => {
         />
         <Popup.KeyboardShim />
       </Popup>
+
+      <Popup
+        overlayBackgroundColor="#098"
+        visible={state.show3}
+        round
+        position="bottom"
+        safeAreaInsetBottom
+        onPressOverlay={() => {
+          setState(s => ({
+            ...s,
+            show3: false,
+          }))
+        }}>
+        <Popup.Header title="自定义 Overlay 颜色" />
+      </Popup>
     </>
   )
 }

diff --git a/src/popup/interface.ts b/src/popup/interface.ts
@@ -3,6 +3,7 @@ import type { PropsWithChildren } from 'react'
 import type { ViewStyle, StyleProp, ViewProps } from 'react-native'
 
 import type { NavBarProps } from '../nav-bar/interface'
+import type { OverlayProps } from '../overlay/interface'
 
 import type { PopupTheme } from './style'
 
@@ -71,6 +72,12 @@ export interface PopupPropsCommon {
    * Used to locate this view in end-to-end tests.
    */
   testID?: string | undefined
+
+  /**
+   * 自定义遮罩层颜色
+   * @default overlay_background_color
+   */
+  overlayBackgroundColor?: OverlayProps['backgroundColor']
 }
 
 export interface PopupProps extends PopupPropsCommon, PropsWithChildren<{}> {

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
@@ -43,6 +43,7 @@ const Popup: React.FC<PopupProps> = ({
   onClose: onCloseFn,
   onClosed: onClosedFn,
   onRequestClose,
+  overlayBackgroundColor,
 }) => {
   const insets = useSafeAreaInsets()
   const onPressOverlayPersistFn = usePersistFn(onPressOverlayFn || noop)
@@ -200,6 +201,7 @@ const Popup: React.FC<PopupProps> = ({
           zIndex={state.zIndex}
           duration={duration}
           onPress={onPressOverlay}
+          backgroundColor={overlayBackgroundColor}
         />
       ) : null}