bootstrap-rn 0.4.7 → 0.4.9

package/src/components/navbar/NavbarToggler.tsx

@@ -84,47 +84,45 @@ const styles = StyleSheet.create({
   `,
 });
 
-const NavbarToggler = React.forwardRef<ViewRef, NavbarTogglerProps>(
-  (props, ref) => {
-    const { style, textStyle, iconStyle, ...elementProps } = props;
+function NavbarToggler(
+  props: NavbarTogglerProps & React.RefAttributes<ViewRef>,
+) {
+  const { ref, style, textStyle, iconStyle, ...elementProps } = props;
 
-    const media = useMedia();
-    const { variant, expand } = useForcedContext(NavbarContext);
+  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 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 textClasses = getStyles(styles, [
+    '.navbar-toggler --text',
+    `.navbar-${variant} .navbar-toggler --text`,
+  ]);
 
-    const iconClasses = getStyles(styles, [
-      '.navbar-toggler-icon',
-      `.navbar-${variant} .navbar-toggler-icon`,
-    ]);
+  const iconClasses = getStyles(styles, [
+    '.navbar-toggler-icon',
+    `.navbar-${variant} .navbar-toggler-icon`,
+  ]);
 
-    const resolveIconStyle = useStyle([iconClasses, iconStyle]);
-    const background = useBackground(resolveIconStyle({ media }));
+  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';
+  return (
+    <Pressable
+      {...elementProps}
+      ref={ref}
+      toggle={useToggleNavbar}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      <View style={background.style}>{background.element}</View>
+    </Pressable>
+  );
+}
 
 export default NavbarToggler;

package/src/components/offcanvas/Offcanvas.tsx

@@ -21,7 +21,7 @@ export interface OffcanvasProps extends ViewProps {
   placement?: 'top' | 'bottom' | 'start' | 'end';
   backdrop?: boolean | 'static';
   scroll?: boolean;
-  onClose: () => void;
+  onClose?: () => void;
 }
 
 const styles = StyleSheet.create({
@@ -133,8 +133,9 @@ const styles = StyleSheet.create({
   })),
 });
 
-const Offcanvas = React.forwardRef<ViewRef, OffcanvasProps>((props, ref) => {
+function Offcanvas(props: OffcanvasProps & React.RefAttributes<ViewRef>) {
   const {
+    ref,
     children,
     visible = false,
     placement = 'top',
@@ -232,9 +233,7 @@ const Offcanvas = React.forwardRef<ViewRef, OffcanvasProps>((props, ref) => {
       </View>
     </Dialog>
   );
-});
-
-Offcanvas.displayName = 'Offcanvas';
+}
 
 export default Object.assign(Offcanvas, {
   Context: OffcanvasContext,

package/src/components/offcanvas/OffcanvasBody.tsx

@@ -31,34 +31,33 @@ const styles = StyleSheet.create({
   })),
 });
 
-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';
+function OffcanvasBody(
+  props: OffcanvasBodyProps & React.RefAttributes<ScrollViewRef>,
+) {
+  const { ref, 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>
+  );
+}
 
 export default OffcanvasBody;

package/src/components/offcanvas/OffcanvasHeader.tsx

@@ -1,55 +1,53 @@
-import React, { useContext } from 'react';
-import css from '../../style/css';
-import StyleSheet from '../../style/StyleSheet';
-import View, { ViewProps, ViewRef } from '../View';
-import { GRID_BREAKPOINTS } from '../../theme/proxies';
-import { infix, next } from '../../theme/breakpoints';
-import { getStyles, each } from '../../utils';
-import NavbarContext from '../navbar/NavbarContext';
-
-export interface OffcanvasHeaderProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.offcanvas-header': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    align-items: center;
-    justify-content: space-between;
-    padding: $offcanvas-padding-y $offcanvas-padding-x;
-  `,
-  // Navbar styles
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.navbar-expand${infix(next(breakpoint))} .offcanvas-header`]: css`
-      @include media-breakpoint-up(${next(breakpoint)}) {
-        display: none;
-      }
-    `,
-  })),
-});
-
-const OffcanvasHeader = React.forwardRef<ViewRef, OffcanvasHeaderProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const navbar = useContext(NavbarContext);
-
-    const classes = getStyles(styles, [
-      '.offcanvas-header',
-      navbar &&
-        navbar.expand &&
-        `.navbar-expand${
-          navbar.expand === true ? '' : `-${navbar.expand}`
-        } .offcanvas-header`,
-    ]);
-
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        {children}
-      </View>
-    );
-  },
-);
-
-OffcanvasHeader.displayName = 'OffcanvasHeader';
-
-export default OffcanvasHeader;
+import React, { useContext } from 'react';
+import css from '../../style/css';
+import StyleSheet from '../../style/StyleSheet';
+import View, { ViewProps, ViewRef } from '../View';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarContext from '../navbar/NavbarContext';
+
+export interface OffcanvasHeaderProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.offcanvas-header': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    align-items: center;
+    justify-content: space-between;
+    padding: $offcanvas-padding-y $offcanvas-padding-x;
+  `,
+  // Navbar styles
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .offcanvas-header`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        display: none;
+      }
+    `,
+  })),
+});
+
+function OffcanvasHeader(
+  props: OffcanvasHeaderProps & React.RefAttributes<ViewRef>,
+) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const navbar = useContext(NavbarContext);
+
+  const classes = getStyles(styles, [
+    '.offcanvas-header',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .offcanvas-header`,
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default OffcanvasHeader;

package/src/components/offcanvas/OffcanvasTitle.tsx

@@ -16,28 +16,26 @@ const styles = StyleSheet.create({
   `,
 });
 
-const OffcanvasTitle = React.forwardRef<TextRef, OffcanvasTitleProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const { identifier } = useForcedContext(OffcanvasContext);
-
-    const classes = getStyles(styles, ['.offcanvas-title']);
-
-    return (
-      <Heading
-        id={`${identifier}-title`}
-        size={5}
-        {...elementProps}
-        ref={ref}
-        style={[classes, style]}
-      >
-        {children}
-      </Heading>
-    );
-  },
-);
-
-OffcanvasTitle.displayName = 'OffcanvasTitle';
+function OffcanvasTitle(
+  props: OffcanvasTitleProps & React.RefAttributes<TextRef>,
+) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const { identifier } = useForcedContext(OffcanvasContext);
+
+  const classes = getStyles(styles, ['.offcanvas-title']);
+
+  return (
+    <Heading
+      id={`${identifier}-title`}
+      size={5}
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+    >
+      {children}
+    </Heading>
+  );
+}
 
 export default OffcanvasTitle;

package/src/components/pagination/Pagination.tsx

@@ -1,39 +1,37 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-import useList from '../../hooks/useList';
-import View, { ViewProps, ViewRef } from '../View';
-import PaginationItem from './PaginationItem';
-
-export interface PaginationProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.pagination': css`
-    background-color: $white;
-    flex-direction: row;
-  `,
-});
-
-const Pagination = React.forwardRef<ViewRef, PaginationProps>((props, ref) => {
-  const { children, style, ...elementProps } = props;
-
-  const list = useList(children);
-
-  const classes = getStyles(styles, ['.pagination']);
-
-  const role = Platform.OS === 'web' ? 'list' : undefined;
-
-  return (
-    <View {...elementProps} ref={ref} role={role} style={[classes, style]}>
-      {list}
-    </View>
-  );
-});
-
-Pagination.displayName = 'Pagination';
-
-export default Object.assign(Pagination, {
-  Item: PaginationItem,
-});
+import React from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import useList from '../../hooks/useList';
+import View, { ViewProps, ViewRef } from '../View';
+import PaginationItem from './PaginationItem';
+
+export interface PaginationProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.pagination': css`
+    background-color: $white;
+    flex-direction: row;
+  `,
+});
+
+function Pagination(props: PaginationProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const list = useList(children);
+
+  const classes = getStyles(styles, ['.pagination']);
+
+  const role = Platform.OS === 'web' ? 'list' : undefined;
+
+  return (
+    <View {...elementProps} ref={ref} role={role} style={[classes, style]}>
+      {list}
+    </View>
+  );
+}
+
+export default Object.assign(Pagination, {
+  Item: PaginationItem,
+});

package/src/components/pagination/PaginationItem.tsx

@@ -53,49 +53,48 @@ const styles = StyleSheet.create({
   `,
 });
 
-const PaginationItem = React.forwardRef<ViewRef, PaginationItemProps>(
-  (props, ref) => {
-    const {
-      children,
-      active = false,
-      disabled = false,
-      style,
-      textStyle,
-      ...elementProps
-    } = props;
-
-    const { first, last } = useForcedContext(ListContext);
-
-    const classes = getStyles(styles, [
-      '.pagination-item',
-      first && '.pagination-item:first-child',
-      last && '.pagination-item:last-child',
-      active && '.pagination-item.active',
-      disabled && '.pagination-item.disabled',
-    ]);
-
-    const textClasses = getStyles(styles, [
-      active && '.pagination-item.active',
-      disabled && '.pagination-item.disabled',
-    ]);
-
-    const role = Platform.OS === 'web' ? 'listitem' : undefined;
-
-    return (
-      <View
-        {...elementProps}
-        ref={ref}
-        role={role}
-        style={[classes, style]}
-        textStyle={[textClasses, textStyle]}
-      >
-        {children}
-      </View>
-    );
-  },
-);
-
-PaginationItem.displayName = 'PaginationItem';
+function PaginationItem(
+  props: PaginationItemProps & React.RefAttributes<ViewRef>,
+) {
+  const {
+    ref,
+    children,
+    active = false,
+    disabled = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const { first, last } = useForcedContext(ListContext);
+
+  const classes = getStyles(styles, [
+    '.pagination-item',
+    first && '.pagination-item:first-child',
+    last && '.pagination-item:last-child',
+    active && '.pagination-item.active',
+    disabled && '.pagination-item.disabled',
+  ]);
+
+  const textClasses = getStyles(styles, [
+    active && '.pagination-item.active',
+    disabled && '.pagination-item.disabled',
+  ]);
+
+  const role = Platform.OS === 'web' ? 'listitem' : undefined;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+}
 
 export default PaginationItem;
 

package/src/components/placeholders/Placeholders.tsx

@@ -1,34 +1,30 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-import View, { ViewProps, ViewRef } from '../View';
-
-export interface PlaceholdersProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.placeholders': css``,
-});
-
-const Placeholders = React.forwardRef<ViewRef, PlaceholdersProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const classes = getStyles(styles, ['.placeholders']);
-
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        {children}
-      </View>
-    );
-  },
-);
-
-Placeholders.displayName = 'Placeholders';
-
-export default Placeholders;
-
-/*
-$placeholder-opacity-max:           .5;
-$placeholder-opacity-min:           .2;
-*/
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import View, { ViewProps, ViewRef } from '../View';
+
+export interface PlaceholdersProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.placeholders': css``,
+});
+
+function Placeholders(props: PlaceholdersProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.placeholders']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default Placeholders;
+
+/*
+$placeholder-opacity-max:           .5;
+$placeholder-opacity-min:           .2;
+*/

package/src/components/popover/Popover.tsx

@@ -39,8 +39,9 @@ const styles = StyleSheet.create({
   `,
 });
 
-const Popover = React.forwardRef<ViewRef, PopoverProps>((props, ref) => {
+function Popover(props: PopoverProps & React.RefAttributes<ViewRef>) {
   const {
+    ref,
     children,
     placement = 'right',
     floating,
@@ -76,9 +77,7 @@ const Popover = React.forwardRef<ViewRef, PopoverProps>((props, ref) => {
       </PopoverContext.Provider>
     </View>
   );
-});
-
-Popover.displayName = 'Popover';
+}
 
 export default Object.assign(Popover, {
   Arrow: PopoverArrow,

package/src/components/popover/PopoverArrow.tsx

@@ -171,38 +171,34 @@ const transformPlacement = (placement: OverlayPlacement) => {
   return placement;
 };
 
-const PopoverArrow = React.forwardRef<ViewRef, PopoverArrowProps>(
-  (props, ref) => {
-    const { style, ...elementProps } = props;
+function PopoverArrow(props: PopoverArrowProps & React.RefAttributes<ViewRef>) {
+  const { ref, style, ...elementProps } = props;
 
-    const context = useForcedContext(PopoverContext);
+  const context = useForcedContext(PopoverContext);
 
-    // For some reason the classes are named start/end, but they always define
-    // the overlay on the left/right placement, so it has no effect on RTL.
-    const placement = transformPlacement(context.placement);
+  // For some reason the classes are named start/end, but they always define
+  // the overlay on the left/right placement, so it has no effect on RTL.
+  const placement = transformPlacement(context.placement);
 
-    const classes = getStyles(styles, [
-      '.popover-arrow',
-      context.floating && `.bs-popover-${placement} .popover-arrow`,
-    ]);
-    const beforeClasses = getStyles(styles, [
-      '.popover-arrow::before',
-      context.floating && `.bs-popover-${placement} .popover-arrow::before`,
-    ]);
-    const afterClasses = getStyles(styles, [
-      '.popover-arrow::after',
-      context.floating && `.bs-popover-${placement} .popover-arrow::after`,
-    ]);
+  const classes = getStyles(styles, [
+    '.popover-arrow',
+    context.floating && `.bs-popover-${placement} .popover-arrow`,
+  ]);
+  const beforeClasses = getStyles(styles, [
+    '.popover-arrow::before',
+    context.floating && `.bs-popover-${placement} .popover-arrow::before`,
+  ]);
+  const afterClasses = getStyles(styles, [
+    '.popover-arrow::after',
+    context.floating && `.bs-popover-${placement} .popover-arrow::after`,
+  ]);
 
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        <View style={beforeClasses} />
-        <View style={afterClasses} />
-      </View>
-    );
-  },
-);
-
-PopoverArrow.displayName = 'PopoverArrow';
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <View style={beforeClasses} />
+      <View style={afterClasses} />
+    </View>
+  );
+}
 
 export default PopoverArrow;