bootstrap-rn 0.3.4 → 0.3.6

package/src/components/navbar/NavbarBrand.tsx

@@ -6,7 +6,7 @@ import useForcedContext from '../../hooks/useForcedContext';
 import { getStyles } from '../../utils';
 import NavbarContext from './NavbarContext';
 
-export interface NavbarBrand extends PressableProps {}
+export interface NavbarBrandProps extends PressableProps {}
 
 const styles = StyleSheet.create({
   '.navbar-brand': css`
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-const NavbarBrand = React.forwardRef<PressableRef, NavbarBrand>(
+const NavbarBrand = React.forwardRef<PressableRef, NavbarBrandProps>(
   (props, ref) => {
     const { children, style, textStyle, ...elementProps } = props;
 

package/src/components/navbar/NavbarContext.ts

@@ -4,7 +4,7 @@ export type NavbarExpand = true | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 export type NavbarVariant = 'light' | 'dark';
 
-export type NavbarContextType = {
+export type NavbarContextProps = {
   identifier: string;
   variant?: NavbarVariant;
   expanded?: boolean;
@@ -14,7 +14,7 @@ export type NavbarContextType = {
   expand?: NavbarExpand;
 };
 
-const NavbarContext = createContext<NavbarContextType | null>(null);
+const NavbarContext = createContext<NavbarContextProps | null>(null);
 
 NavbarContext.displayName = 'NavbarContext';
 

package/src/components/offcanvas/OffcanvasBody.tsx

@@ -1,66 +1,64 @@
-import React, { useContext } from 'react';
-import { ScrollView as BaseScrollView } from 'react-native';
-import css from '../../style/css';
-import StyleSheet from '../../style/StyleSheet';
-import ScrollView from '../ScrollView';
-import { GRID_BREAKPOINTS } from '../../theme/proxies';
-import { infix, next } from '../../theme/breakpoints';
-import { getStyles, each } from '../../utils';
-import NavbarContext from '../navbar/NavbarContext';
-import type { ExtendedViewStyle, StyleProp } from '../../types';
-import { ViewProps } from '../View';
-
-export interface OffcanvasBodyProps extends ViewProps {
-  contentContainerStyle?: StyleProp<ExtendedViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  '.offcanvas-body': css`
-    // flex-grow: 1;
-    padding: $offcanvas-padding-y $offcanvas-padding-x;
-    // overflow-y: auto;
-  `,
-  // Navbar styles
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.navbar-expand${infix(next(breakpoint))} .offcanvas-body`]: css`
-      @include media-breakpoint-up(${next(breakpoint)}) {
-        display: flex;
-        flex-grow: 0;
-        padding: 0;
-        // overflow-y: visible;
-      }
-    `,
-  })),
-});
-
-const OffcanvasBody = React.forwardRef<BaseScrollView, OffcanvasBodyProps>(
-  (props, ref) => {
-    const { children, style, contentContainerStyle, ...elementProps } = props;
-
-    const navbar = useContext(NavbarContext);
-
-    const contentContainerClasses = getStyles(styles, [
-      '.offcanvas-body',
-      navbar &&
-        navbar.expand &&
-        `.navbar-expand${
-          navbar.expand === true ? '' : `-${navbar.expand}`
-        } .offcanvas-body`,
-    ]);
-
-    return (
-      <ScrollView
-        {...elementProps}
-        ref={ref}
-        style={style}
-        contentContainerStyle={[contentContainerClasses, contentContainerStyle]}
-      >
-        {children}
-      </ScrollView>
-    );
-  },
-);
-
-OffcanvasBody.displayName = 'OffcanvasBody';
-
-export default OffcanvasBody;
+import React, { useContext } from 'react';
+import css from '../../style/css';
+import StyleSheet from '../../style/StyleSheet';
+import ScrollView, { ScrollViewProps, ScrollViewRef } from '../ScrollView';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarContext from '../navbar/NavbarContext';
+import type { ExtendedViewStyle, StyleProp } from '../../types';
+
+export interface OffcanvasBodyProps extends ScrollViewProps {
+  contentContainerStyle?: StyleProp<ExtendedViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  '.offcanvas-body': css`
+    // flex-grow: 1;
+    padding: $offcanvas-padding-y $offcanvas-padding-x;
+    // overflow-y: auto;
+  `,
+  // Navbar styles
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .offcanvas-body`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        display: flex;
+        flex-grow: 0;
+        padding: 0;
+        // overflow-y: visible;
+      }
+    `,
+  })),
+});
+
+const OffcanvasBody = React.forwardRef<ScrollViewRef, OffcanvasBodyProps>(
+  (props, ref) => {
+    const { children, style, contentContainerStyle, ...elementProps } = props;
+
+    const navbar = useContext(NavbarContext);
+
+    const contentContainerClasses = getStyles(styles, [
+      '.offcanvas-body',
+      navbar &&
+        navbar.expand &&
+        `.navbar-expand${
+          navbar.expand === true ? '' : `-${navbar.expand}`
+        } .offcanvas-body`,
+    ]);
+
+    return (
+      <ScrollView
+        {...elementProps}
+        ref={ref}
+        style={style}
+        contentContainerStyle={[contentContainerClasses, contentContainerStyle]}
+      >
+        {children}
+      </ScrollView>
+    );
+  },
+);
+
+OffcanvasBody.displayName = 'OffcanvasBody';
+
+export default OffcanvasBody;

package/src/components/offcanvas/OffcanvasContext.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 
-type OffcanvasContextType = Record<string, never>;
+export type OffcanvasContextProps = Record<string, never>;
 
-const OffcanvasContext = React.createContext<OffcanvasContextType | null>(null);
+const OffcanvasContext = React.createContext<OffcanvasContextProps | null>(
+  null,
+);
 
 OffcanvasContext.displayName = 'OffcanvasContext';
 

package/src/components/popover/injectPopover.tsx

@@ -1,98 +1,97 @@
-import React from 'react';
-import { OverlayContainer } from '@react-native-aria/overlays';
-import Overlay from '../helpers/Overlay';
-import BackdropHandler from '../helpers/BackdropHandler';
-import useTrigger, { TriggerProps } from '../../hooks/useTrigger';
-import { normalizeNumber } from '../../style/math';
-import StyleSheet from '../../style/StyleSheet';
-import Popover from './Popover';
-import Pressable, { PressableProps } from '../Pressable';
-import type { ViewRef } from '../View';
-import type { Trigger, Axis } from '../../types';
-
-type PopoverProps = {
-  title?: React.ReactNode;
-  content: React.ReactNode;
-  autoClose?: boolean | 'inside' | 'outside';
-  trigger?: Trigger;
-  placement?: Axis;
-} & TriggerProps;
-
-export interface InjectPopoverProps extends PressableProps {
-  popover: PopoverProps;
-}
-
-export default function injectPopover(Target: typeof Pressable) {
-  const OverlayPopover = React.forwardRef<ViewRef, InjectPopoverProps>(
-    (props, ref) => {
-      const {
-        popover: {
-          title,
-          content,
-          autoClose = 'outside',
-          trigger = 'press',
-          placement = 'right',
-          ...popoverProps
-        },
-        ...elementProps
-      } = props;
-
-      const { visible, setVisible, targetProps, targetRef, templateProps } =
-        useTrigger(trigger, popoverProps, elementProps, ref);
-
-      const offset = normalizeNumber(StyleSheet.value('popover-arrow-height'));
-
-      return (
-        <>
-          <Target {...elementProps} {...targetProps} />
-          {visible && (
-            <OverlayContainer>
-              <Overlay
-                placement={placement}
-                offset={offset}
-                arrowOffset={offset}
-                targetRef={targetRef}
-                visible={visible}
-              >
-                {(overlay, overlayRef) => (
-                  <>
-                    <BackdropHandler
-                      toggleRef={targetRef}
-                      dialogRef={overlayRef}
-                      onClose={() => {
-                        setVisible(false);
-                      }}
-                      autoClose={autoClose}
-                    />
-                    <Popover
-                      {...templateProps}
-                      ref={overlayRef}
-                      placement={overlay.placement}
-                      popper={overlay.rendered}
-                      style={[
-                        overlay.overlayProps.style,
-                        {
-                          maxHeight: 'auto',
-                          opacity: overlay.rendered ? 1 : 0,
-                        },
-                      ]}
-                      arrowStyle={overlay.arrowProps.style}
-                    >
-                      <Popover.Arrow />
-                      {title && <Popover.Header>{title}</Popover.Header>}
-                      <Popover.Body>{content}</Popover.Body>
-                    </Popover>
-                  </>
-                )}
-              </Overlay>
-            </OverlayContainer>
-          )}
-        </>
-      );
-    },
-  );
-
-  OverlayPopover.displayName = 'Overlay(Popover)';
-
-  return OverlayPopover;
-}
+import React from 'react';
+import { OverlayContainer } from '@react-native-aria/overlays';
+import Overlay from '../helpers/Overlay';
+import BackdropHandler from '../helpers/BackdropHandler';
+import useTrigger, { TriggerProps } from '../../hooks/useTrigger';
+import { normalizeNumber } from '../../style/math';
+import StyleSheet from '../../style/StyleSheet';
+import Popover from './Popover';
+import type { ViewRef } from '../View';
+import type { Trigger, Axis } from '../../types';
+
+export interface InjectPopoverProps {
+  popover: {
+    title?: React.ReactNode;
+    content: React.ReactNode;
+    autoClose?: boolean | 'inside' | 'outside';
+    trigger?: Trigger;
+    placement?: Axis;
+  } & TriggerProps;
+}
+
+export default function injectPopover<Props>(
+  Target: React.ComponentType<Props>,
+) {
+  const OverlayPopover = React.forwardRef<ViewRef, Props & InjectPopoverProps>(
+    (props, ref) => {
+      const {
+        popover: {
+          title,
+          content,
+          autoClose = 'outside',
+          trigger = 'press',
+          placement = 'right',
+          ...popoverProps
+        },
+        ...elementProps
+      } = props;
+
+      const { visible, setVisible, targetProps, targetRef, templateProps } =
+        useTrigger(trigger, popoverProps, elementProps, ref);
+
+      const offset = normalizeNumber(StyleSheet.value('popover-arrow-height'));
+
+      return (
+        <>
+          <Target {...(elementProps as Props)} {...targetProps} />
+          {visible && (
+            <OverlayContainer>
+              <Overlay
+                placement={placement}
+                offset={offset}
+                arrowOffset={offset}
+                targetRef={targetRef}
+                visible={visible}
+              >
+                {(overlay, overlayRef) => (
+                  <>
+                    <BackdropHandler
+                      toggleRef={targetRef}
+                      dialogRef={overlayRef}
+                      onClose={() => {
+                        setVisible(false);
+                      }}
+                      autoClose={autoClose}
+                    />
+                    <Popover
+                      {...templateProps}
+                      ref={overlayRef}
+                      placement={overlay.placement}
+                      popper={overlay.rendered}
+                      style={[
+                        overlay.overlayProps.style,
+                        {
+                          maxHeight: 'auto',
+                          opacity: overlay.rendered ? 1 : 0,
+                        },
+                      ]}
+                      arrowStyle={overlay.arrowProps.style}
+                    >
+                      <Popover.Arrow />
+                      {title && <Popover.Header>{title}</Popover.Header>}
+                      <Popover.Body>{content}</Popover.Body>
+                    </Popover>
+                  </>
+                )}
+              </Overlay>
+            </OverlayContainer>
+          )}
+        </>
+      );
+    },
+  );
+
+  OverlayPopover.displayName = 'Overlay(Popover)';
+
+  return OverlayPopover;
+}

package/src/components/toasts/ToastContainer.tsx

@@ -1,39 +1,41 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { getStyles } from '../../utils';
-import ToastContainerContext from './ToastContainerContext';
-import useList from '../../hooks/useList';
-
-export interface ToastContainerProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.toast-container': css`
-    width: 100%; // max-content;
-    max-width: 100%;
-    pointer-events: none;
-  `,
-});
-
-const ToastContainer = React.forwardRef<ViewRef, ToastContainerProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const list = useList(children);
-
-    const classes = getStyles(styles, ['.toast-container']);
-
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        <ToastContainerContext.Provider value>
-          {list}
-        </ToastContainerContext.Provider>
-      </View>
-    );
-  },
-);
-
-ToastContainer.displayName = 'ToastContainer';
-
-export default ToastContainer;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { getStyles } from '../../utils';
+import ToastContainerContext from './ToastContainerContext';
+import useList from '../../hooks/useList';
+
+export interface ToastContainerProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.toast-container': css`
+    width: 100%; // max-content;
+    max-width: 100%;
+    pointer-events: none;
+  `,
+});
+
+const ToastContainer = React.forwardRef<ViewRef, ToastContainerProps>(
+  (props, ref) => {
+    const { children, style, ...elementProps } = props;
+
+    const list = useList(children);
+
+    const classes = getStyles(styles, ['.toast-container']);
+
+    return (
+      <View {...elementProps} ref={ref} style={[classes, style]}>
+        <ToastContainerContext.Provider value>
+          {list}
+        </ToastContainerContext.Provider>
+      </View>
+    );
+  },
+);
+
+ToastContainer.displayName = 'ToastContainer';
+
+export default Object.assign(ToastContainer, {
+  Context: ToastContainerContext,
+});

package/src/components/tooltip/injectTooltip.tsx

@@ -1,96 +1,93 @@
-import React from 'react';
-import { OverlayContainer } from '@react-native-aria/overlays';
-import Overlay from '../helpers/Overlay';
-import BackdropHandler from '../helpers/BackdropHandler';
-import useTrigger, { TriggerProps } from '../../hooks/useTrigger';
-import { normalizeNumber } from '../../style/math';
-import StyleSheet from '../../style/StyleSheet';
-import Tooltip from './Tooltip';
-import Pressable, { PressableProps } from '../Pressable';
-import type { ViewRef } from '../View';
-import type { Trigger, Axis } from '../../types';
-
-type TooltipProps = {
-  title: React.ReactNode;
-  autoClose?: boolean | 'inside' | 'outside';
-  trigger?: Trigger;
-  placement?: Axis;
-} & TriggerProps;
-
-export interface InjectTooltipProps extends PressableProps {
-  tooltip: TooltipProps;
-}
-
-export default function injectTooltip(Target: typeof Pressable) {
-  const OverlayTooltip = React.forwardRef<ViewRef, InjectTooltipProps>(
-    (props, ref) => {
-      /* eslint-disable react/prop-types */
-      const {
-        tooltip: {
-          title,
-          autoClose = 'outside',
-          trigger = 'hover focus',
-          placement = 'top',
-          ...tooltipProps
-        },
-        ...elementProps
-      } = props;
-      /* eslint-enable */
-
-      const { visible, setVisible, targetProps, targetRef, templateProps } =
-        useTrigger(trigger, tooltipProps, elementProps, ref);
-
-      const offset = normalizeNumber(StyleSheet.value('tooltip-arrow-height'));
-
-      return (
-        <>
-          <Target {...elementProps} {...targetProps} />
-          {visible && (
-            <OverlayContainer>
-              <Overlay
-                placement={placement}
-                targetRef={targetRef}
-                arrowOffset={offset}
-                visible={visible}
-              >
-                {(overlay, overlayRef) => (
-                  <>
-                    <BackdropHandler
-                      toggleRef={targetRef}
-                      dialogRef={overlayRef}
-                      onClose={() => {
-                        setVisible(false);
-                      }}
-                      autoClose={autoClose}
-                    />
-                    <Tooltip
-                      {...templateProps}
-                      ref={overlayRef}
-                      placement={overlay.placement}
-                      popper={overlay.rendered}
-                      style={[
-                        overlay.overlayProps.style,
-                        {
-                          maxHeight: 'auto',
-                          opacity: overlay.rendered ? 1 : 0,
-                        },
-                      ]}
-                      arrowStyle={overlay.arrowProps.style}
-                    >
-                      <Tooltip.Arrow />
-                      <Tooltip.Inner>{title}</Tooltip.Inner>
-                    </Tooltip>
-                  </>
-                )}
-              </Overlay>
-            </OverlayContainer>
-          )}
-        </>
-      );
-    },
-  );
-
-  OverlayTooltip.displayName = 'Overlay(Tooltip)';
-
-  return OverlayTooltip;
-}
+import React from 'react';
+import { OverlayContainer } from '@react-native-aria/overlays';
+import Overlay from '../helpers/Overlay';
+import BackdropHandler from '../helpers/BackdropHandler';
+import useTrigger, { TriggerProps } from '../../hooks/useTrigger';
+import { normalizeNumber } from '../../style/math';
+import StyleSheet from '../../style/StyleSheet';
+import Tooltip from './Tooltip';
+import type { ViewRef } from '../View';
+import type { Trigger, Axis } from '../../types';
+
+export interface InjectTooltipProps {
+  tooltip: {
+    title: React.ReactNode;
+    autoClose?: boolean | 'inside' | 'outside';
+    trigger?: Trigger;
+    placement?: Axis;
+  } & TriggerProps;
+}
+
+export default function injectTooltip<Props>(
+  Target: React.ComponentType<Props>,
+) {
+  const OverlayTooltip = React.forwardRef<ViewRef, Props & InjectTooltipProps>(
+    (props, ref) => {
+      const {
+        tooltip: {
+          title,
+          autoClose = 'outside',
+          trigger = 'hover focus',
+          placement = 'top',
+          ...tooltipProps
+        },
+        ...elementProps
+      } = props;
+
+      const { visible, setVisible, targetProps, targetRef, templateProps } =
+        useTrigger(trigger, tooltipProps, elementProps, ref);
+
+      const offset = normalizeNumber(StyleSheet.value('tooltip-arrow-height'));
+
+      return (
+        <>
+          <Target {...(elementProps as Props)} {...targetProps} />
+          {visible && (
+            <OverlayContainer>
+              <Overlay
+                placement={placement}
+                targetRef={targetRef}
+                arrowOffset={offset}
+                visible={visible}
+              >
+                {(overlay, overlayRef) => (
+                  <>
+                    <BackdropHandler
+                      toggleRef={targetRef}
+                      dialogRef={overlayRef}
+                      onClose={() => {
+                        setVisible(false);
+                      }}
+                      autoClose={autoClose}
+                    />
+                    <Tooltip
+                      {...templateProps}
+                      ref={overlayRef}
+                      placement={overlay.placement}
+                      popper={overlay.rendered}
+                      style={[
+                        overlay.overlayProps.style,
+                        {
+                          maxHeight: 'auto',
+                          opacity: overlay.rendered ? 1 : 0,
+                        },
+                      ]}
+                      arrowStyle={overlay.arrowProps.style}
+                    >
+                      <Tooltip.Arrow />
+                      <Tooltip.Inner>{title}</Tooltip.Inner>
+                    </Tooltip>
+                  </>
+                )}
+              </Overlay>
+            </OverlayContainer>
+          )}
+        </>
+      );
+    },
+  );
+
+  OverlayTooltip.displayName = 'Overlay(Tooltip)';
+
+  return OverlayTooltip;
+}