bootstrap-rn 0.4.5 → 0.4.7

package/src/components/navbar/NavbarToggler.tsx

@@ -1,130 +1,130 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Pressable, { PressableProps } from '../Pressable';
-import View, { ViewRef } from '../View';
-import useForcedContext from '../../hooks/useForcedContext';
-import { GRID_BREAKPOINTS } from '../../theme/proxies';
-import { infix, next } from '../../theme/breakpoints';
-import { getStyles, each } from '../../utils';
-import NavbarContext from './NavbarContext';
-import useMedia from '../../hooks/useMedia';
-import useToggleNavbar from './useToggleNavbar';
-import useStyle from '../../hooks/useStyle';
-import useBackground from '../../hooks/useBackground';
-import { escapeSvg } from '../../theme/functions';
-import type { ExtendedViewStyle, StyleProp, ThemeVariables } from '../../types';
-
-export interface NavbarTogglerProps extends Omit<PressableProps, 'children'> {
-  iconStyle?: StyleProp<ExtendedViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  '.navbar-toggler': css`
-    padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
-    background-color: transparent; // remove default button style
-    border: $border-width solid transparent; // remove default button style
-    border-radius: $navbar-toggler-border-radius;
-    // @include transition($navbar-toggler-transition);
-
-    &:focus {
-      @include platform(web) {
-        outline-width: 0; // outline: 0;
-      }
-      // box-shadow: 0 0 0 $navbar-toggler-focus-width;
-    }
-  `,
-  '.navbar-toggler --text': css`
-    font-size: $navbar-toggler-font-size;
-    line-height: $navbar-toggler-font-size * $line-height-base;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:focus {
-      text-decoration: none;
-    }
-  `,
-  '.navbar-toggler-icon': css`
-    // display: inline-block;
-    width: $navbar-toggler-font-size * 1.5; // 1.5em;
-    height: $navbar-toggler-font-size * 1.5; // 1.5em;
-    vertical-align: middle;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100%;
-  `,
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.navbar-expand${infix(next(breakpoint))} .navbar-toggler`]: css`
-      @include media-breakpoint-up(${next(breakpoint)}) {
-        display: none;
-      }
-    `,
-  })),
-  '.navbar-light .navbar-toggler': css`
-    border-color: $navbar-light-toggler-border-color;
-  `,
-  '.navbar-light .navbar-toggler --text': css`
-    color: $navbar-light-color;
-  `,
-  '.navbar-light .navbar-toggler-icon': css`
-    background-image: ${(t: ThemeVariables) =>
-      escapeSvg(t['navbar-light-toggler-icon-bg'])};
-  `,
-  '.navbar-dark .navbar-toggler': css`
-    border-color: $navbar-dark-toggler-border-color;
-  `,
-  '.navbar-dark .navbar-toggler --text': css`
-    color: $navbar-dark-color;
-  `,
-  '.navbar-dark .navbar-toggler-icon': css`
-    background-image: ${(t: ThemeVariables) =>
-      escapeSvg(t['navbar-dark-toggler-icon-bg'])};
-  `,
-});
-
-const NavbarToggler = React.forwardRef<ViewRef, NavbarTogglerProps>(
-  (props, ref) => {
-    const { style, textStyle, iconStyle, ...elementProps } = props;
-
-    const media = useMedia();
-    const { variant, expand } = useForcedContext(NavbarContext);
-
-    const classes = getStyles(styles, [
-      '.navbar-toggler',
-      `.navbar-${variant} .navbar-toggler`,
-      expand &&
-        `.navbar-expand${expand === true ? '' : `-${expand}`} .navbar-toggler`,
-    ]);
-
-    const textClasses = getStyles(styles, [
-      '.navbar-toggler --text',
-      `.navbar-${variant} .navbar-toggler --text`,
-    ]);
-
-    const iconClasses = getStyles(styles, [
-      '.navbar-toggler-icon',
-      `.navbar-${variant} .navbar-toggler-icon`,
-    ]);
-
-    const resolveIconStyle = useStyle([iconClasses, iconStyle]);
-    const background = useBackground(resolveIconStyle({ media }));
-
-    return (
-      <Pressable
-        {...elementProps}
-        ref={ref}
-        toggle={useToggleNavbar}
-        style={[classes, style]}
-        textStyle={[textClasses, textStyle]}
-      >
-        <View style={background.style}>{background.element}</View>
-      </Pressable>
-    );
-  },
-);
-
-NavbarToggler.displayName = 'NavbarToggler';
-
-export default NavbarToggler;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable, { PressableProps } from '../Pressable';
+import View, { ViewRef } from '../View';
+import useForcedContext from '../../hooks/useForcedContext';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarContext from './NavbarContext';
+import useMedia from '../../hooks/useMedia';
+import useToggleNavbar from './useToggleNavbar';
+import useStyle from '../../hooks/useStyle';
+import useBackground from '../../hooks/useBackground';
+import { escapeSvg } from '../../theme/functions';
+import type { ExtendedViewStyle, StyleProp, ThemeVariables } from '../../types';
+
+export interface NavbarTogglerProps extends Omit<PressableProps, 'children'> {
+  iconStyle?: StyleProp<ExtendedViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  '.navbar-toggler': css`
+    padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
+    background-color: transparent; // remove default button style
+    border: $border-width solid transparent; // remove default button style
+    border-radius: $navbar-toggler-border-radius;
+    // @include transition($navbar-toggler-transition);
+
+    &:focus {
+      @include platform(web) {
+        outline-style: none; // outline: 0;
+      }
+      // box-shadow: 0 0 0 $navbar-toggler-focus-width;
+    }
+  `,
+  '.navbar-toggler --text': css`
+    font-size: $navbar-toggler-font-size;
+    line-height: $navbar-toggler-font-size * $line-height-base;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:focus {
+      text-decoration: none;
+    }
+  `,
+  '.navbar-toggler-icon': css`
+    // display: inline-block;
+    width: $navbar-toggler-font-size * 1.5; // 1.5em;
+    height: $navbar-toggler-font-size * 1.5; // 1.5em;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .navbar-toggler`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        display: none;
+      }
+    `,
+  })),
+  '.navbar-light .navbar-toggler': css`
+    border-color: $navbar-light-toggler-border-color;
+  `,
+  '.navbar-light .navbar-toggler --text': css`
+    color: $navbar-light-color;
+  `,
+  '.navbar-light .navbar-toggler-icon': css`
+    background-image: ${(t: ThemeVariables) =>
+      escapeSvg(t['navbar-light-toggler-icon-bg'])};
+  `,
+  '.navbar-dark .navbar-toggler': css`
+    border-color: $navbar-dark-toggler-border-color;
+  `,
+  '.navbar-dark .navbar-toggler --text': css`
+    color: $navbar-dark-color;
+  `,
+  '.navbar-dark .navbar-toggler-icon': css`
+    background-image: ${(t: ThemeVariables) =>
+      escapeSvg(t['navbar-dark-toggler-icon-bg'])};
+  `,
+});
+
+const NavbarToggler = React.forwardRef<ViewRef, NavbarTogglerProps>(
+  (props, ref) => {
+    const { style, textStyle, iconStyle, ...elementProps } = props;
+
+    const media = useMedia();
+    const { variant, expand } = useForcedContext(NavbarContext);
+
+    const classes = getStyles(styles, [
+      '.navbar-toggler',
+      `.navbar-${variant} .navbar-toggler`,
+      expand &&
+        `.navbar-expand${expand === true ? '' : `-${expand}`} .navbar-toggler`,
+    ]);
+
+    const textClasses = getStyles(styles, [
+      '.navbar-toggler --text',
+      `.navbar-${variant} .navbar-toggler --text`,
+    ]);
+
+    const iconClasses = getStyles(styles, [
+      '.navbar-toggler-icon',
+      `.navbar-${variant} .navbar-toggler-icon`,
+    ]);
+
+    const resolveIconStyle = useStyle([iconClasses, iconStyle]);
+    const background = useBackground(resolveIconStyle({ media }));
+
+    return (
+      <Pressable
+        {...elementProps}
+        ref={ref}
+        toggle={useToggleNavbar}
+        style={[classes, style]}
+        textStyle={[textClasses, textStyle]}
+      >
+        <View style={background.style}>{background.element}</View>
+      </Pressable>
+    );
+  },
+);
+
+NavbarToggler.displayName = 'NavbarToggler';
+
+export default NavbarToggler;

package/src/components/navbar/useNavbar.ts

@@ -1,31 +1,30 @@
-import { useMemo } from 'react';
-import useIdentifier from '../../hooks/useIdentifier';
-import useControlledState from '../../hooks/useControlledState';
-import type { NavbarExpand, NavbarVariant } from './NavbarContext';
-
-export default function useNavbar(
-  variant: NavbarVariant,
-  defaultExpanded: boolean,
-  controlledExpanded?: boolean,
-  onToggle?: () => void,
-  expand?: NavbarExpand,
-) {
-  const identifier = useIdentifier('navbar');
-
-  const [expanded, setExpanded] = useControlledState(
-    defaultExpanded,
-    controlledExpanded,
-    onToggle,
-  );
-
-  return useMemo(
-    () => ({
-      identifier,
-      variant,
-      expanded,
-      setExpanded,
-      expand,
-    }),
-    [identifier, variant, expanded, expand],
-  );
-}
+import { useId, useMemo } from 'react';
+import useControlledState from '../../hooks/useControlledState';
+import type { NavbarExpand, NavbarVariant } from './NavbarContext';
+
+export default function useNavbar(
+  variant: NavbarVariant,
+  defaultExpanded: boolean,
+  controlledExpanded?: boolean,
+  onToggle?: () => void,
+  expand?: NavbarExpand,
+) {
+  const identifier = useId();
+
+  const [expanded, setExpanded] = useControlledState(
+    defaultExpanded,
+    controlledExpanded,
+    onToggle,
+  );
+
+  return useMemo(
+    () => ({
+      identifier,
+      variant,
+      expanded,
+      setExpanded,
+      expand,
+    }),
+    [identifier, variant, expanded, expand],
+  );
+}

package/src/components/offcanvas/Offcanvas.tsx

@@ -1,59 +1,64 @@
 import React, { useContext, useRef } from 'react';
-import { Modal as BaseModal } from 'react-native';
-import { OverlayProvider } from '@react-native-aria/overlays';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
-import BackdropHandler from '../helpers/BackdropHandler';
-import SafeAreaView from '../SafeAreaView';
+import Dialog from '../helpers/Dialog';
 import View, { ViewProps, ViewRef } from '../View';
 import { GRID_BREAKPOINTS } from '../../theme/proxies';
 import { infix, next } from '../../theme/breakpoints';
 import { getStyles, each, concatRefs } from '../../utils';
 import useMedia from '../../hooks/useMedia';
 import NavbarContext from '../navbar/NavbarContext';
+import BackdropHandler from '../helpers/BackdropHandler';
 import useOffcanvas from './useOffcanvas';
 import OffcanvasContext from './OffcanvasContext';
 import OffcanvasHeader from './OffcanvasHeader';
 import OffcanvasTitle from './OffcanvasTitle';
 import OffcanvasBody from './OffcanvasBody';
-import type {
-  ExtendedTextStyle,
-  ExtendedViewStyle,
-  StyleProp,
-} from '../../types';
 
 export interface OffcanvasProps extends ViewProps {
   visible?: boolean;
   placement?: 'top' | 'bottom' | 'start' | 'end';
   backdrop?: boolean | 'static';
   scroll?: boolean;
-  onToggle?: () => void;
-  dialogStyle?: StyleProp<ExtendedViewStyle>;
-  dialogTextStyle?: StyleProp<ExtendedTextStyle>;
+  onClose: () => void;
 }
 
 const styles = StyleSheet.create({
   '.offcanvas': css`
-    position: absolute; // fixed;
+    position: absolute; // added for bootstrap-rn
+    @include platform(web) {
+      position: fixed;
+    }
     // bottom: 0;
-    z-index: $zindex-offcanvas;
+    // z-index: $zindex-offcanvas;
     display: flex;
     flex-direction: column;
     max-width: 100%;
     // visibility: hidden;
+    background-color: $offcanvas-bg-color;
+    // background-clip: padding-box;
+    @include platform(web) {
+      outline-style: none; // outline: 0;
+    }
+    // @include box-shadow($offcanvas-box-shadow);
+    // @include transition(transform $offcanvas-transition-duration ease-in-out);
   `,
   '.offcanvas --text': css`
     color: $offcanvas-color;
   `,
   '.offcanvas-backdrop': css`
-    position: absolute;
+    position: absolute; // added for bootstrap-rn
+    @include platform(web) {
+      position: fixed;
+    }
     top: 0;
     left: 0;
-    z-index: $zindex-offcanvas-backdrop;
-    width: 100%;
-    height: 100%;
-  `,
-  '.offcanvas-backdrop-inset': css`
+    bottom: 0; // added for bootstrap-rn
+    right: 0; // added for bootstrap-rn
+    // z-index: $zindex-offcanvas-backdrop;
+    // width: 100vw;
+    // height: 100vh;
     background-color: $offcanvas-backdrop-bg;
     opacity: $offcanvas-backdrop-opacity;
   `,
@@ -61,48 +66,26 @@ const styles = StyleSheet.create({
     top: 0;
     bottom: 0; // added for bootstrap-rn
     left: 0;
-  `,
-  '.offcanvas-end': css`
-    top: 0;
-    bottom: 0; // added for bootstrap-rn
-    right: 0;
-  `,
-  '.offcanvas-top': css`
-    top: 0;
-    right: 0;
-    left: 0;
-  `,
-  '.offcanvas-bottom': css`
-    bottom: 0; // added for bootstrap-rn
-    right: 0;
-    left: 0;
-  `,
-  '.offcanvas-inset': css`
-    max-width: 100%; // added for bootstrap-rn
-    max-height: 100%; // added for bootstrap-rn
-    background-color: $offcanvas-bg-color;
-    // background-clip: padding-box;
-    @include platform(web) {
-      outline-width: 0; // outline: 0;
-    }
-    // @include box-shadow($offcanvas-box-shadow);
-    // @include transition(transform $offcanvas-transition-duration ease-in-out);
-  `,
-  '.offcanvas-inset-start': css`
     width: $offcanvas-horizontal-width;
     border-right-width: $offcanvas-border-width;
     border-style: solid;
     border-color: $offcanvas-border-color;
     // transform: translateX(-100%);
   `,
-  '.offcanvas-inset-end': css`
+  '.offcanvas-end': css`
+    top: 0;
+    bottom: 0; // added for bootstrap-rn
+    right: 0;
     width: $offcanvas-horizontal-width;
     border-left-width: $offcanvas-border-width;
     border-style: solid;
     border-color: $offcanvas-border-color;
     // transform: translateX(100%);
   `,
-  '.offcanvas-inset-top': css`
+  '.offcanvas-top': css`
+    top: 0;
+    right: 0;
+    left: 0;
     height: $offcanvas-vertical-height;
     max-height: 100%;
     border-bottom-width: $offcanvas-border-width;
@@ -110,7 +93,10 @@ const styles = StyleSheet.create({
     border-color: $offcanvas-border-color;
     // transform: translateY(-100%);
   `,
-  '.offcanvas-inset-bottom': css`
+  '.offcanvas-bottom': css`
+    bottom: 0; // added for bootstrap-rn
+    right: 0;
+    left: 0;
     height: $offcanvas-vertical-height;
     max-height: 100%;
     width: 100%;
@@ -119,6 +105,14 @@ const styles = StyleSheet.create({
     border-color: $offcanvas-border-color;
     // transform: translateY(100%);
   `,
+  '.offcanvas-dialog': css`
+    max-width: 100%; // added for bootstrap-rn
+    max-height: 100%; // added for bootstrap-rn
+  `,
+  '.offcanvas-dialog-start': css``,
+  '.offcanvas-dialog-end': css``,
+  '.offcanvas-dialog-top': css``,
+  '.offcanvas-dialog-bottom': css``,
   // Navbar styles
   ...each(GRID_BREAKPOINTS, (breakpoint) => ({
     [`.navbar-expand${infix(next(breakpoint))} .offcanvas`]: css`
@@ -146,22 +140,23 @@ const Offcanvas = React.forwardRef<ViewRef, OffcanvasProps>((props, ref) => {
     placement = 'top',
     backdrop = true,
     scroll = false,
-    onToggle: handleToggle,
+    onClose: handleClose,
     style,
-    dialogStyle,
     textStyle,
-    dialogTextStyle,
     ...elementProps
   } = props;
 
   const media = useMedia();
   const navbar = useContext(NavbarContext);
-  const offcanvasRef = useRef(null);
 
-  const offcanvas = useOffcanvas(visible, scroll);
+  const offcanvasRef = useRef<ViewRef>(null);
+  const backdropRef = useRef<ViewRef>(null);
+
+  const insets = useSafeAreaInsets();
+
+  const offcanvas = useOffcanvas();
 
   const backdropClasses = getStyles(styles, ['.offcanvas-backdrop']);
-  const backdropInsetClasses = getStyles(styles, ['.offcanvas-backdrop-inset']);
   const classes = getStyles(styles, [
     '.offcanvas',
     `.offcanvas-${placement}`,
@@ -171,10 +166,10 @@ const Offcanvas = React.forwardRef<ViewRef, OffcanvasProps>((props, ref) => {
         navbar.expand === true ? '' : `-${navbar.expand}`
       } .offcanvas`,
   ]);
-  const dialogClasses = getStyles(styles, [
-    '.offcanvas-inset',
-    `.offcanvas-inset-${placement}`,
-  ]);
+  /* const dialogClasses = getStyles(styles, [
+    '.offcanvas-dialog',
+    `.offcanvas-dialog-${placement}`,
+  ]); */
   const textClasses = getStyles(styles, ['.offcanvas-content --text']);
 
   // Render children without modal for navbar.
@@ -195,45 +190,47 @@ const Offcanvas = React.forwardRef<ViewRef, OffcanvasProps>((props, ref) => {
     );
   }
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <BaseModal
-      transparent
-      statusBarTranslucent
-      navigationBarTranslucent
-      visible={navbar ? navbar.expanded : visible}
-      onRequestClose={handleToggle}
+    <Dialog
+      id={offcanvas.identifier}
+      dialogRef={offcanvasRef}
+      backgroundRef={backdropRef}
+      onClose={handleClose}
+      backdrop={backdrop}
+      backdropElement={
+        <View ref={backdropRef} style={[backdropClasses, insets]} />
+      }
+      scroll={scroll}
     >
-      {backdrop && (
-        <SafeAreaView
-          style={backdropClasses}
-          edges={placement !== 'bottom' ? ['top'] : []}
-        >
-          <SafeAreaView style={[{ flexGrow: 1 }, backdropInsetClasses]}>
-            <BackdropHandler
-              dialogRef={offcanvasRef}
-              onClose={handleToggle}
-              backdrop={backdrop}
-            />
-          </SafeAreaView>
-        </SafeAreaView>
-      )}
-      <SafeAreaView
+      <BackdropHandler onClose={handleClose} backdrop={backdrop} />
+      <View
         {...elementProps}
-        ref={concatRefs(offcanvasRef, ref)}
-        style={[classes, style]}
+        ref={concatRefs(ref, offcanvasRef)}
+        role="dialog"
+        aria-modal
+        aria-labelledby={`${offcanvas.identifier}-title`}
+        tabIndex={-1}
+        style={[
+          classes,
+          {
+            marginTop: insets.top,
+            marginBottom: insets.bottom,
+            marginRight: insets.right,
+            marginLeft: insets.left,
+          },
+          style,
+        ]}
         textStyle={[textClasses, textStyle]}
-        edges={placement !== 'bottom' ? ['top'] : []}
       >
-        <SafeAreaView
-          style={[{ flexGrow: 1 }, dialogClasses, dialogStyle]}
-          textStyle={dialogTextStyle}
-        >
-          <OffcanvasContext.Provider value={offcanvas}>
-            <OverlayProvider>{children}</OverlayProvider>
-          </OffcanvasContext.Provider>
-        </SafeAreaView>
-      </SafeAreaView>
-    </BaseModal>
+        <OffcanvasContext.Provider value={offcanvas}>
+          {children}
+        </OffcanvasContext.Provider>
+      </View>
+    </Dialog>
   );
 });
 

package/src/components/offcanvas/OffcanvasContext.ts

@@ -1,11 +1,13 @@
-import React from 'react';
-
-export type OffcanvasContextProps = Record<string, never>;
-
-const OffcanvasContext = React.createContext<OffcanvasContextProps | null>(
-  null,
-);
-
-OffcanvasContext.displayName = 'OffcanvasContext';
-
-export default OffcanvasContext;
+import React from 'react';
+
+export interface OffcanvasContextProps {
+  identifier: string;
+}
+
+const OffcanvasContext = React.createContext<OffcanvasContextProps | null>(
+  null,
+);
+
+OffcanvasContext.displayName = 'OffcanvasContext';
+
+export default OffcanvasContext;