bootstrap-rn 0.3.5 → 0.4.0

package/src/components/helpers/BackdropHandler.tsx

@@ -1,143 +1,143 @@
-import React, { useEffect, useMemo, RefObject } from 'react';
-import { Platform, findNodeHandle } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Pressable from '../Pressable';
-import { ViewRef } from '../View';
-
-type BackdropType = boolean | 'static';
-type AutoCloseType = boolean | string;
-
-const styles = StyleSheet.create({
-  handler: css`
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    position: absolute;
-    flex-grow: 1;
-  `,
-});
-
-const initialState = {
-  waitingForMouseUp: false,
-  ignoreBackdropClick: false,
-};
-
-interface BackdropHandlerProps {
-  toggleRef?: RefObject<ViewRef>;
-  dialogRef: RefObject<ViewRef>;
-  onClose?: () => void;
-  autoClose?: AutoCloseType;
-  backdrop?: BackdropType;
-}
-
-function BackdropHandler(props: BackdropHandlerProps) {
-  const {
-    toggleRef,
-    dialogRef,
-    onClose: handleClose,
-    backdrop = true,
-    autoClose = 'outside',
-  } = props;
-
-  if (Platform.OS === 'web') {
-    const state = useMemo(() => initialState, []);
-
-    useEffect(() => {
-      const toggle = toggleRef
-        ? // @ts-expect-error web only method for converting to HTMLElement
-          (findNodeHandle(toggleRef.current) as HTMLElement)
-        : undefined;
-      // @ts-expect-error web only method for converting to HTMLElement
-      const dialog = findNodeHandle(dialogRef.current) as HTMLElement;
-
-      const handleDialogMouseDown = () => {
-        state.waitingForMouseUp = true;
-      };
-
-      // Workaround for chrome, because chrome does not fire onMouseDown event
-      // for dialog when clicking on the <select> menu.
-      const handleDialogMouseUp = () => {
-        state.ignoreBackdropClick = true;
-      };
-
-      const handleDocumentClick = ({ target }: MouseEvent) => {
-        const isDialogClick =
-          state.ignoreBackdropClick ||
-          (dialog && dialog.contains(target as Node));
-
-        if (backdrop === 'static' || autoClose === false) {
-          return;
-        }
-
-        // Click outside -> return if autoClose is inside.
-        if (!isDialogClick && autoClose === 'inside') {
-          return;
-        }
-
-        // Click inside / on dialog -> return if autoClose is outside.
-        if (isDialogClick) {
-          state.ignoreBackdropClick = false;
-
-          if (autoClose === 'outside') {
-            return;
-          }
-        }
-
-        // Click on toggle -> return always.
-        if (toggle && (target === toggle || toggle.contains(target as Node))) {
-          return;
-        }
-
-        handleClose?.();
-      };
-
-      const handleDocumentMouseUp = () => {
-        if (state.waitingForMouseUp) {
-          state.ignoreBackdropClick = true;
-        }
-
-        state.waitingForMouseUp = false;
-      };
-
-      if (dialog) {
-        dialog.addEventListener('mousedown', handleDialogMouseDown);
-        dialog.addEventListener('mouseup', handleDialogMouseUp);
-      }
-      // See https://github.com/necolas/react-native-web/issues/2115
-      document.addEventListener('click', handleDocumentClick, true);
-      document.addEventListener('mouseup', handleDocumentMouseUp, true);
-
-      return () => {
-        if (dialog) {
-          dialog.removeEventListener('mousedown', handleDialogMouseDown);
-          dialog.removeEventListener('mouseup', handleDialogMouseUp);
-        }
-        document.removeEventListener('click', handleDocumentClick, true);
-        document.removeEventListener('mouseup', handleDocumentMouseUp, true);
-      };
-    }, [backdrop, autoClose]);
-
-    return null;
-  }
-
-  if (backdrop !== true) {
-    return null;
-  }
-
-  return (
-    <Pressable
-      style={styles.handler}
-      onPress={() => {
-        handleClose?.();
-      }}
-      accessible={false}
-      importantForAccessibility="no"
-    />
-  );
-}
-
-BackdropHandler.displayName = 'BackdropHandler';
-
-export default BackdropHandler;
+import React, { useEffect, useMemo, RefObject } from 'react';
+import { Platform, findNodeHandle } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+import { ViewRef } from '../View';
+
+type BackdropType = boolean | 'static';
+type AutoCloseType = boolean | string;
+
+const styles = StyleSheet.create({
+  handler: css`
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    flex-grow: 1;
+  `,
+});
+
+const initialState = {
+  waitingForMouseUp: false,
+  ignoreBackdropClick: false,
+};
+
+interface BackdropHandlerProps {
+  toggleRef?: RefObject<ViewRef | null>;
+  dialogRef: RefObject<ViewRef | null>;
+  onClose?: () => void;
+  autoClose?: AutoCloseType;
+  backdrop?: BackdropType;
+}
+
+function BackdropHandler(props: BackdropHandlerProps) {
+  const {
+    toggleRef,
+    dialogRef,
+    onClose: handleClose,
+    backdrop = true,
+    autoClose = 'outside',
+  } = props;
+
+  if (Platform.OS === 'web') {
+    const state = useMemo(() => initialState, []);
+
+    useEffect(() => {
+      const toggle = toggleRef
+        ? // @ts-expect-error web only method for converting to HTMLElement
+          (findNodeHandle(toggleRef.current) as HTMLElement)
+        : undefined;
+      // @ts-expect-error web only method for converting to HTMLElement
+      const dialog = findNodeHandle(dialogRef.current) as HTMLElement;
+
+      const handleDialogMouseDown = () => {
+        state.waitingForMouseUp = true;
+      };
+
+      // Workaround for chrome, because chrome does not fire onMouseDown event
+      // for dialog when clicking on the <select> menu.
+      const handleDialogMouseUp = () => {
+        state.ignoreBackdropClick = true;
+      };
+
+      const handleDocumentClick = ({ target }: MouseEvent) => {
+        const isDialogClick =
+          state.ignoreBackdropClick ||
+          (dialog && dialog.contains(target as Node));
+
+        if (backdrop === 'static' || autoClose === false) {
+          return;
+        }
+
+        // Click outside -> return if autoClose is inside.
+        if (!isDialogClick && autoClose === 'inside') {
+          return;
+        }
+
+        // Click inside / on dialog -> return if autoClose is outside.
+        if (isDialogClick) {
+          state.ignoreBackdropClick = false;
+
+          if (autoClose === 'outside') {
+            return;
+          }
+        }
+
+        // Click on toggle -> return always.
+        if (toggle && (target === toggle || toggle.contains(target as Node))) {
+          return;
+        }
+
+        handleClose?.();
+      };
+
+      const handleDocumentMouseUp = () => {
+        if (state.waitingForMouseUp) {
+          state.ignoreBackdropClick = true;
+        }
+
+        state.waitingForMouseUp = false;
+      };
+
+      if (dialog) {
+        dialog.addEventListener('mousedown', handleDialogMouseDown);
+        dialog.addEventListener('mouseup', handleDialogMouseUp);
+      }
+      // See https://github.com/necolas/react-native-web/issues/2115
+      document.addEventListener('click', handleDocumentClick, true);
+      document.addEventListener('mouseup', handleDocumentMouseUp, true);
+
+      return () => {
+        if (dialog) {
+          dialog.removeEventListener('mousedown', handleDialogMouseDown);
+          dialog.removeEventListener('mouseup', handleDialogMouseUp);
+        }
+        document.removeEventListener('click', handleDocumentClick, true);
+        document.removeEventListener('mouseup', handleDocumentMouseUp, true);
+      };
+    }, [backdrop, autoClose]);
+
+    return null;
+  }
+
+  if (backdrop !== true) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      style={styles.handler}
+      onPress={() => {
+        handleClose?.();
+      }}
+      accessible={false}
+      importantForAccessibility="no"
+    />
+  );
+}
+
+BackdropHandler.displayName = 'BackdropHandler';
+
+export default BackdropHandler;

package/src/components/helpers/Overlay.tsx

@@ -1,79 +1,92 @@
-import React, { useRef, ReactNode } from 'react';
-import { Platform, StatusBar, ViewStyle } from 'react-native';
-import { useOverlayPosition } from '@react-native-aria/overlays';
-import type { ViewRef } from '../View';
-import type { Placement, PlacementAxis } from '../../types';
-
-type OverlayReturnType = {
-  placement: PlacementAxis;
-  rendered?: boolean;
-  overlayProps: {
-    style: ViewStyle;
-  };
-  arrowProps: {
-    style: ViewStyle;
-  };
-};
-
-interface OverlayProps {
-  children: (
-    overlay: OverlayReturnType,
-    overlayRef: React.RefObject<ViewRef>,
-  ) => ReactNode;
-  placement: Placement;
-  targetRef: React.RefObject<ViewRef>;
-  offset?: number;
-  arrowOffset?: number;
-  visible: boolean;
-}
-
-const Overlay = ({
-  children,
-  targetRef,
-  placement,
-  offset,
-  arrowOffset = 0,
-  visible,
-}: OverlayProps) => {
-  const overlayRef = useRef(null);
-
-  const overlay = useOverlayPosition({
-    placement,
-    targetRef,
-    overlayRef,
-    offset,
-    isOpen: visible,
-  });
-
-  // Remove unnecessary arrow styles and adjust arrow offset.
-  if (placement === 'top' || placement === 'bottom') {
-    // @ts-expect-error workaround for correct positioning
-    delete overlay.arrowProps.style.top;
-    if (typeof overlay.arrowProps.style.left === 'number') {
-      overlay.arrowProps.style.left -= arrowOffset;
-    }
-  }
-  if (placement === 'left' || placement === 'right') {
-    // @ts-expect-error workaround for correct positioning
-    delete overlay.arrowProps.style.left;
-    if (typeof overlay.arrowProps.style.top === 'number') {
-      overlay.arrowProps.style.top -= arrowOffset;
-    }
-  }
-
-  // Adjust top value by status bar height on Android
-  if (Platform.OS === 'android' && StatusBar.currentHeight) {
-    if (typeof overlay.overlayProps.style.top === 'number') {
-      overlay.overlayProps.style.top -= StatusBar.currentHeight;
-    }
-    if (typeof overlay.arrowProps.style.top === 'number') {
-      overlay.arrowProps.style.top -= StatusBar.currentHeight;
-    }
-  }
-
-  return children(overlay, overlayRef);
-};
-
-Overlay.displayName = 'Overlay';
-
-export default Overlay;
+import React, { useRef, ReactNode } from 'react';
+import { Platform, StatusBar, ViewStyle } from 'react-native';
+import { useOverlayPosition } from '@react-native-aria/overlays';
+import type { ViewRef } from '../View';
+import type { Placement, PlacementAxis } from '../../types';
+
+type OverlayReturnType = {
+  placement: PlacementAxis;
+  rendered?: boolean;
+  overlayProps: {
+    style: ViewStyle;
+  };
+  arrowProps: {
+    style: ViewStyle;
+  };
+};
+
+interface OverlayProps {
+  children: (
+    overlay: OverlayReturnType,
+    overlayRef: React.RefObject<ViewRef | null>,
+  ) => ReactNode;
+  placement: Placement;
+  targetRef: React.RefObject<ViewRef | null>;
+  offset?: number;
+  arrowOffset?: number;
+  visible: boolean;
+}
+
+function Overlay({
+  children,
+  targetRef,
+  placement,
+  offset,
+  arrowOffset = 0,
+  visible,
+}: OverlayProps) {
+  const overlayRef = useRef(null);
+
+  const overlay = useOverlayPosition({
+    placement,
+    targetRef,
+    overlayRef,
+    offset,
+    isOpen: visible,
+  });
+
+  // Remove unnecessary arrow styles and adjust arrow offset.
+  if (placement === 'top' || placement === 'bottom') {
+    // @ts-expect-error workaround for correct positioning
+    delete overlay.arrowProps.style.top;
+    if (typeof overlay.arrowProps.style.left === 'number') {
+      overlay.arrowProps.style.left -= arrowOffset;
+    }
+  }
+  if (placement === 'left' || placement === 'right') {
+    // @ts-expect-error workaround for correct positioning
+    delete overlay.arrowProps.style.left;
+    if (typeof overlay.arrowProps.style.top === 'number') {
+      overlay.arrowProps.style.top -= arrowOffset;
+    }
+  }
+
+  // Adjust top value by status bar height on Android
+  if (Platform.OS === 'android' && StatusBar.currentHeight) {
+    if (typeof overlay.overlayProps.style.top === 'number') {
+      overlay.overlayProps.style.top -= StatusBar.currentHeight;
+    }
+    if (typeof overlay.arrowProps.style.top === 'number') {
+      overlay.arrowProps.style.top -= StatusBar.currentHeight;
+    }
+  }
+
+  // Workaround for different calculation of height in Android 15
+  // https://github.com/facebook/react-native/issues/47080
+  if (
+    Platform.OS === 'android' &&
+    Platform.constants.Version >= 35 &&
+    StatusBar.currentHeight
+  ) {
+    if (typeof overlay.overlayProps.style.bottom === 'number') {
+      // Assuming height of bottom bar is 22
+      overlay.overlayProps.style.bottom -= StatusBar.currentHeight + 22;
+    }
+  }
+
+  return children(overlay, overlayRef);
+}
+
+Overlay.displayName = 'Overlay';
+
+export default Overlay;

package/src/components/modal/Modal.tsx

@@ -4,8 +4,8 @@ import { OverlayProvider } from '@react-native-aria/overlays';
 import StyleSheet from '../../style/StyleSheet';
 import { getStyles } from '../../utils';
 import css from '../../style/css';
-import ScrollView from '../ScrollView';
-import View, { ViewProps, ViewRef } from '../View';
+import ScrollView, { ScrollViewRef, ScrollViewProps } from '../ScrollView';
+import View, { ViewRef } from '../View';
 import BackdropHandler from '../helpers/BackdropHandler';
 import useModal from './useModal';
 import ModalContext from './ModalContext';
@@ -15,14 +15,13 @@ import ModalBody from './ModalBody';
 import ModalFooter from './ModalFooter';
 import { ExtendedTextStyle, ExtendedViewStyle, StyleProp } from '../../types';
 
-export interface ModalProps extends ViewProps {
+export interface ModalProps extends ScrollViewProps {
   visible: boolean;
   size?: 'sm' | 'lg' | 'xl';
   backdrop?: boolean | 'static';
   scrollable?: boolean;
   centered?: boolean;
   onToggle: () => void;
-  contentContainerStyle?: StyleProp<ExtendedViewStyle>;
   dialogStyle?: StyleProp<ExtendedViewStyle>;
   contentStyle?: StyleProp<ExtendedViewStyle>;
   dialogTextStyle?: StyleProp<ExtendedTextStyle>;
@@ -135,92 +134,94 @@ const styles = StyleSheet.create({
   `,
 });
 
-const Modal = React.forwardRef<ViewRef, ModalProps>((props, ref) => {
-  const {
-    children,
-    visible,
-    size,
-    backdrop = true,
-    scrollable = false,
-    centered = false,
-    onToggle: handleToggle,
-    style,
-    contentContainerStyle,
-    dialogStyle,
-    contentStyle,
-    textStyle,
-    dialogTextStyle,
-    contentTextStyle,
-    ...elementProps
-  } = props;
+const Modal = React.forwardRef<ViewRef | ScrollViewRef, ModalProps>(
+  (props, ref) => {
+    const {
+      children,
+      visible,
+      size,
+      backdrop = true,
+      scrollable = false,
+      centered = false,
+      onToggle: handleToggle,
+      style,
+      contentContainerStyle,
+      dialogStyle,
+      contentStyle,
+      textStyle,
+      dialogTextStyle,
+      contentTextStyle,
+      ...elementProps
+    } = props;
 
-  const dialogRef = useRef(null);
+    const dialogRef = useRef(null);
 
-  const modal = useModal(visible, scrollable);
+    const modal = useModal(visible, scrollable);
 
-  const backdropClasses = getStyles(styles, ['.modal-backdrop']);
-  const classes = getStyles(styles, ['.modal']);
-  const dialogClasses = getStyles(styles, [
-    '.modal-dialog',
-    size === 'sm' && '.modal-sm',
-    size === 'lg' && '.modal-lg',
-    size === 'xl' && '.modal-xl',
-    scrollable && '.modal-dialog-scrollable',
-    centered && '.modal-dialog-centered',
-  ]);
-  const contentClasses = getStyles(styles, [
-    '.modal-content',
-    scrollable && '.modal-dialog-scrollable .modal-content',
-  ]);
-  const contentTextClasses = getStyles(styles, ['.modal-content --text']);
+    const backdropClasses = getStyles(styles, ['.modal-backdrop']);
+    const classes = getStyles(styles, ['.modal']);
+    const dialogClasses = getStyles(styles, [
+      '.modal-dialog',
+      size === 'sm' && '.modal-sm',
+      size === 'lg' && '.modal-lg',
+      size === 'xl' && '.modal-xl',
+      scrollable && '.modal-dialog-scrollable',
+      centered && '.modal-dialog-centered',
+    ]);
+    const contentClasses = getStyles(styles, [
+      '.modal-content',
+      scrollable && '.modal-dialog-scrollable .modal-content',
+    ]);
+    const contentTextClasses = getStyles(styles, ['.modal-content --text']);
 
-  // If scrollable we use a ScrollView in ModalBody, so we can use a View here.
-  const FlexView = scrollable ? View : ScrollView;
+    // If scrollable we use a ScrollView in ModalBody, so we can use a View here.
+    const FlexView = scrollable ? View : ScrollView;
 
-  const centeredStyle = centered && {
-    justifyContent: 'center' as JustifyContentValue,
-  };
+    const centeredStyle = centered && {
+      justifyContent: 'center' as JustifyContentValue,
+    };
 
-  return (
-    <BaseModal transparent visible={visible} onRequestClose={handleToggle}>
-      {backdrop && <View style={backdropClasses} />}
-      <FlexView
-        {...elementProps}
-        // @ts-expect-error We need to fix it in the future.
-        ref={ref}
-        style={[classes, scrollable && centeredStyle, style]}
-        textStyle={textStyle}
-        contentContainerStyle={
-          scrollable
-            ? undefined
-            : [{ flexGrow: 1 }, centeredStyle, contentContainerStyle]
-        }
-      >
-        <BackdropHandler
-          dialogRef={dialogRef}
-          onClose={handleToggle}
-          backdrop={backdrop}
-        />
-        <SafeAreaView style={{ flexShrink: 1 }}>
-          <View
-            ref={dialogRef}
-            style={[dialogClasses, dialogStyle]}
-            textStyle={dialogTextStyle}
-          >
+    return (
+      <BaseModal transparent visible={visible} onRequestClose={handleToggle}>
+        {backdrop && <View style={backdropClasses} />}
+        <FlexView
+          {...elementProps}
+          // @ts-expect-error Type of ref depends on component.
+          ref={ref}
+          style={[classes, scrollable && centeredStyle, style]}
+          textStyle={textStyle}
+          contentContainerStyle={
+            scrollable
+              ? undefined
+              : [{ flexGrow: 1 }, centeredStyle, contentContainerStyle]
+          }
+        >
+          <BackdropHandler
+            dialogRef={dialogRef}
+            onClose={handleToggle}
+            backdrop={backdrop}
+          />
+          <SafeAreaView style={{ flexShrink: 1 }}>
             <View
-              style={[contentClasses, contentStyle]}
-              textStyle={[contentTextClasses, contentTextStyle]}
+              ref={dialogRef}
+              style={[dialogClasses, dialogStyle]}
+              textStyle={dialogTextStyle}
             >
-              <ModalContext.Provider value={modal}>
-                <OverlayProvider>{children}</OverlayProvider>
-              </ModalContext.Provider>
+              <View
+                style={[contentClasses, contentStyle]}
+                textStyle={[contentTextClasses, contentTextStyle]}
+              >
+                <ModalContext.Provider value={modal}>
+                  <OverlayProvider>{children}</OverlayProvider>
+                </ModalContext.Provider>
+              </View>
             </View>
-          </View>
-        </SafeAreaView>
-      </FlexView>
-    </BaseModal>
-  );
-});
+          </SafeAreaView>
+        </FlexView>
+      </BaseModal>
+    );
+  },
+);
 
 Modal.displayName = 'Modal';