diff --git a/eslint.config.js b/eslint.config.js index 9aa1cb1..f78b794 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -60,4 +60,14 @@ module.exports = [ ], }, }, + // Web-specific files + { + files: ['src/**/*.web.{ts,tsx}'], + languageOptions: { + globals: { + document: 'readonly', + Element: 'readonly', + }, + }, + }, ]; \ No newline at end of file diff --git a/src/ModalView.web.tsx b/src/ModalView.web.tsx index 1f8cea1..fce92a1 100644 --- a/src/ModalView.web.tsx +++ b/src/ModalView.web.tsx @@ -1,11 +1,13 @@ import { useMemo } from 'react'; -import type { FC } from 'react'; import { createPortal } from 'react-dom'; import { StyleSheet, View, Pressable } from 'react-native'; import { useID } from './hooks/useID'; import { useModalRegistry } from './hooks/useModalRegistry'; + +import type { MouseEvent } from 'react'; +import type { StyleProp, ViewStyle } from 'react-native'; import type { ModalViewProps } from './types'; export type ModalViewWebProps = Omit< @@ -13,6 +15,7 @@ export type ModalViewWebProps = Omit< 'statusBar' | 'disableDefaultStatusBarIOS' | 'statusBarTranslucent' > & { modalId?: string; + containerStyle?: StyleProp; }; const backdropAccessibilityLabel = 'Backdrop'; @@ -24,16 +27,17 @@ export enum DismissalSource { Backdrop = 'Backdrop', } -export const ModalView: FC = ({ +export const ModalView = ({ modalId, children, renderBackdrop, onRequestDismiss, contentContainerStyle, + containerStyle, BackdropPressableComponent = Pressable, backdropColor = defaultBackdropColor, animationType = 'none', -}) => { +}: ModalViewWebProps) => { const currentModalId = useID(modalId); const { modals, isBackdropVisible } = useModalRegistry(currentModalId); const modalIsOpen = modals.has(currentModalId); @@ -57,7 +61,7 @@ export const ModalView: FC = ({ }, [animationType, modalIsOpen]); return createPortal( - + = ({ styles.backdropPressable, !isBackdropVisible && styles.backdropHidden, ]} - onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)} + onPress={(e) => { + const event = e as unknown as MouseEvent; + + if (event.target === event.currentTarget) { + onRequestDismiss?.(DismissalSource.Backdrop); + } + }} > {renderBackdrop ? ( renderBackdrop()