bootstrap-rn 0.4.8 → 0.4.10

package/src/components/navbar/Navbar.tsx

@@ -1,90 +1,89 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { GRID_BREAKPOINTS } from '../../theme/proxies';
-import { infix, next } from '../../theme/breakpoints';
-import { getStyles, each } from '../../utils';
-import NavbarText from './NavbarText';
-import NavbarBrand from './NavbarBrand';
-import NavbarCollapse from './NavbarCollapse';
-import NavbarToggler from './NavbarToggler';
-import NavbarContext, { NavbarExpand, NavbarVariant } from './NavbarContext';
-import useNavbar from './useNavbar';
-import useDismissNavbar from './useDismissNavbar';
-import useToggleNavbar from './useToggleNavbar';
-
-export interface NavbarProps extends ViewProps {
-  variant?: NavbarVariant;
-  defaultExpanded?: boolean;
-  expanded?: boolean;
-  onToggle?: () => void;
-  expand?: NavbarExpand;
-}
-
-const styles = StyleSheet.create({
-  '.navbar': css`
-    position: relative;
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    flex-wrap: wrap; // allow us to do the line break for collapsing content
-    align-items: center;
-    justify-content: space-between; // space out brand from logo
-    padding-top: $navbar-padding-y;
-    padding-right: $navbar-padding-x; // default: null
-    padding-bottom: $navbar-padding-y;
-    padding-left: $navbar-padding-x; // default: null
-    // @include gradient-bg();
-  `,
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.navbar-expand${infix(next(breakpoint))}`]: css`
-      @include media-breakpoint-up(${next(breakpoint)}) {
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-      }
-    `,
-  })),
-});
-
-const Navbar = React.forwardRef<ViewRef, NavbarProps>((props, ref) => {
-  const {
-    children,
-    variant = 'light',
-    defaultExpanded = false,
-    expanded,
-    onToggle,
-    expand,
-    style,
-    ...elementProps
-  } = props;
-
-  const navbar = useNavbar(
-    variant,
-    defaultExpanded,
-    expanded,
-    onToggle,
-    expand,
-  );
-
-  const classes = getStyles(styles, [
-    '.navbar',
-    expand && `.navbar-expand${expand === true ? '' : `-${expand}`}`,
-  ]);
-
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      <NavbarContext.Provider value={navbar}>{children}</NavbarContext.Provider>
-    </View>
-  );
-});
-
-Navbar.displayName = 'Navbar';
-
-export default Object.assign(Navbar, {
-  Brand: NavbarBrand,
-  Text: NavbarText,
-  Collapse: NavbarCollapse,
-  Toggler: NavbarToggler,
-  useDismiss: useDismissNavbar,
-  useToggle: useToggleNavbar,
-});
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarText from './NavbarText';
+import NavbarBrand from './NavbarBrand';
+import NavbarCollapse from './NavbarCollapse';
+import NavbarToggler from './NavbarToggler';
+import NavbarContext, { NavbarExpand, NavbarVariant } from './NavbarContext';
+import useNavbar from './useNavbar';
+import useDismissNavbar from './useDismissNavbar';
+import useToggleNavbar from './useToggleNavbar';
+
+export interface NavbarProps extends ViewProps {
+  variant?: NavbarVariant;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onToggle?: () => void;
+  expand?: NavbarExpand;
+}
+
+const styles = StyleSheet.create({
+  '.navbar': css`
+    position: relative;
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap; // allow us to do the line break for collapsing content
+    align-items: center;
+    justify-content: space-between; // space out brand from logo
+    padding-top: $navbar-padding-y;
+    padding-right: $navbar-padding-x; // default: null
+    padding-bottom: $navbar-padding-y;
+    padding-left: $navbar-padding-x; // default: null
+    // @include gradient-bg();
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))}`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+      }
+    `,
+  })),
+});
+
+function Navbar(props: NavbarProps & React.RefAttributes<ViewRef>) {
+  const {
+    ref,
+    children,
+    variant = 'light',
+    defaultExpanded = false,
+    expanded,
+    onToggle,
+    expand,
+    style,
+    ...elementProps
+  } = props;
+
+  const navbar = useNavbar(
+    variant,
+    defaultExpanded,
+    expanded,
+    onToggle,
+    expand,
+  );
+
+  const classes = getStyles(styles, [
+    '.navbar',
+    expand && `.navbar-expand${expand === true ? '' : `-${expand}`}`,
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <NavbarContext.Provider value={navbar}>{children}</NavbarContext.Provider>
+    </View>
+  );
+}
+
+export default Object.assign(Navbar, {
+  Brand: NavbarBrand,
+  Text: NavbarText,
+  Collapse: NavbarCollapse,
+  Toggler: NavbarToggler,
+  useDismiss: useDismissNavbar,
+  useToggle: useToggleNavbar,
+});

package/src/components/navbar/NavbarBrand.tsx

@@ -1,80 +1,78 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Pressable, { PressableProps, PressableRef } from '../Pressable';
-import useForcedContext from '../../hooks/useForcedContext';
-import { getStyles } from '../../utils';
-import NavbarContext from './NavbarContext';
-
-export interface NavbarBrandProps extends PressableProps {}
-
-const styles = StyleSheet.create({
-  '.navbar-brand': css`
-    padding-top: $navbar-brand-padding-y;
-    padding-bottom: $navbar-brand-padding-y;
-    margin-right: $navbar-brand-margin-end;
-  `,
-  '.navbar-brand --text': css`
-    font-size: $navbar-brand-font-size;
-    line-height: $navbar-brand-font-size * $line-height-base; // added for bootstrap-rn
-    text-decoration: none; // if($link-decoration == none, null, none);
-    // white-space: nowrap;
-
-    &:hover {
-      text-decoration: none; // if($link-hover-decoration == underline, none, null);
-    }
-    &:focus {
-      text-decoration: none; // if($link-hover-decoration == underline, none, null);
-    }
-  `,
-  '.navbar-light .navbar-brand --text': css`
-    color: $navbar-light-brand-color;
-
-    &:hover {
-      color: $navbar-light-brand-hover-color;
-    }
-    &:focus {
-      color: $navbar-light-brand-hover-color;
-    }
-  `,
-  '.navbar-dark .navbar-brand --text': css`
-    color: $navbar-dark-brand-color;
-
-    &:hover {
-      color: $navbar-dark-brand-hover-color;
-    }
-    &:focus {
-      color: $navbar-dark-brand-hover-color;
-    }
-  `,
-});
-
-const NavbarBrand = React.forwardRef<PressableRef, NavbarBrandProps>(
-  (props, ref) => {
-    const { children, style, textStyle, ...elementProps } = props;
-
-    const { variant } = useForcedContext(NavbarContext);
-
-    const classes = getStyles(styles, ['.navbar-brand']);
-
-    const textClasses = getStyles(styles, [
-      '.navbar-brand --text',
-      `.navbar-${variant} .navbar-brand --text`,
-    ]);
-
-    return (
-      <Pressable
-        {...elementProps}
-        ref={ref}
-        style={[classes, style]}
-        textStyle={[textClasses, textStyle]}
-      >
-        {children}
-      </Pressable>
-    );
-  },
-);
-
-NavbarBrand.displayName = 'NavbarBrand';
-
-export default NavbarBrand;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable, { PressableProps, PressableRef } from '../Pressable';
+import useForcedContext from '../../hooks/useForcedContext';
+import { getStyles } from '../../utils';
+import NavbarContext from './NavbarContext';
+
+export interface NavbarBrandProps extends PressableProps {}
+
+const styles = StyleSheet.create({
+  '.navbar-brand': css`
+    padding-top: $navbar-brand-padding-y;
+    padding-bottom: $navbar-brand-padding-y;
+    margin-right: $navbar-brand-margin-end;
+  `,
+  '.navbar-brand --text': css`
+    font-size: $navbar-brand-font-size;
+    line-height: $navbar-brand-font-size * $line-height-base; // added for bootstrap-rn
+    text-decoration: none; // if($link-decoration == none, null, none);
+    // white-space: nowrap;
+
+    &:hover {
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+    &:focus {
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+  `,
+  '.navbar-light .navbar-brand --text': css`
+    color: $navbar-light-brand-color;
+
+    &:hover {
+      color: $navbar-light-brand-hover-color;
+    }
+    &:focus {
+      color: $navbar-light-brand-hover-color;
+    }
+  `,
+  '.navbar-dark .navbar-brand --text': css`
+    color: $navbar-dark-brand-color;
+
+    &:hover {
+      color: $navbar-dark-brand-hover-color;
+    }
+    &:focus {
+      color: $navbar-dark-brand-hover-color;
+    }
+  `,
+});
+
+function NavbarBrand(
+  props: NavbarBrandProps & React.RefAttributes<PressableRef>,
+) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const { variant } = useForcedContext(NavbarContext);
+
+  const classes = getStyles(styles, ['.navbar-brand']);
+
+  const textClasses = getStyles(styles, [
+    '.navbar-brand --text',
+    `.navbar-${variant} .navbar-brand --text`,
+  ]);
+
+  return (
+    <Pressable
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export default NavbarBrand;

package/src/components/navbar/NavbarCollapse.tsx

@@ -1,63 +1,61 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, 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 useMedia from '../../hooks/useMedia';
-import NavbarContext from './NavbarContext';
-
-export interface NavbarCollapseProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.navbar-collapse': css`
-    flex-basis: 100%;
-    flex-grow: 1;
-    // For always expanded or extra full navbars, ensure content aligns itself
-    // properly vertically. Can be easily overridden with flex utilities.
-    // align-items: center;
-  `,
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.navbar-expand${infix(next(breakpoint))} .navbar-collapse`]: css`
-      @include media-breakpoint-up(${next(breakpoint)}) {
-        flex-direction: row; // added for bootstrap-rn
-        display: flex;
-        flex-basis: auto;
-        align-items: center; // added for bootstrap-rn
-      }
-    `,
-  })),
-});
-
-const NavbarCollapse = React.forwardRef<ViewRef, NavbarCollapseProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const { expand, expanded } = useForcedContext(NavbarContext);
-    const media = useMedia();
-
-    const classes = getStyles(styles, [
-      '.navbar-collapse',
-      expand &&
-        `.navbar-expand${expand === true ? '' : `-${expand}`} .navbar-collapse`,
-    ]);
-
-    const show = expanded || (expand && (expand === true || media.up(expand)));
-
-    if (!show) {
-      return null;
-    }
-
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        {children}
-      </View>
-    );
-  },
-);
-
-NavbarCollapse.displayName = 'NavbarCollapse';
-
-export default NavbarCollapse;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, 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 useMedia from '../../hooks/useMedia';
+import NavbarContext from './NavbarContext';
+
+export interface NavbarCollapseProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.navbar-collapse': css`
+    flex-basis: 100%;
+    flex-grow: 1;
+    // For always expanded or extra full navbars, ensure content aligns itself
+    // properly vertically. Can be easily overridden with flex utilities.
+    // align-items: center;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .navbar-collapse`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        flex-direction: row; // added for bootstrap-rn
+        display: flex;
+        flex-basis: auto;
+        align-items: center; // added for bootstrap-rn
+      }
+    `,
+  })),
+});
+
+function NavbarCollapse(
+  props: NavbarCollapseProps & React.RefAttributes<ViewRef>,
+) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const { expand, expanded } = useForcedContext(NavbarContext);
+  const media = useMedia();
+
+  const classes = getStyles(styles, [
+    '.navbar-collapse',
+    expand &&
+      `.navbar-expand${expand === true ? '' : `-${expand}`} .navbar-collapse`,
+  ]);
+
+  const show = expanded || (expand && (expand === true || media.up(expand)));
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default NavbarCollapse;

package/src/components/navbar/NavbarText.tsx

@@ -1,45 +1,43 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import Text from '../Text';
-import { getStyles } from '../../utils';
-import useForcedContext from '../../hooks/useForcedContext';
-import NavbarContext from './NavbarContext';
-
-export interface NavbarTextProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.navbar-text': css`
-    padding-top: $nav-link-padding-y;
-    padding-bottom: $nav-link-padding-y;
-  `,
-  '.navbar-light .navbar-text --text': css`
-    color: $navbar-light-color;
-  `,
-  '.navbar-dark .navbar-text --text': css`
-    color: $navbar-dark-color;
-  `,
-});
-
-const NavbarText = React.forwardRef<ViewRef, NavbarTextProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const { variant } = useForcedContext(NavbarContext);
-
-  const classes = getStyles(styles, ['.navbar-text']);
-  const textClasses = getStyles(styles, [
-    `.navbar-${variant} .navbar-text --text`,
-  ]);
-
-  // composite component
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      <Text style={[textClasses, textStyle]}>{children}</Text>
-    </View>
-  );
-});
-
-NavbarText.displayName = 'NavbarText';
-
-export default NavbarText;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import Text from '../Text';
+import { getStyles } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import NavbarContext from './NavbarContext';
+
+export interface NavbarTextProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.navbar-text': css`
+    padding-top: $nav-link-padding-y;
+    padding-bottom: $nav-link-padding-y;
+  `,
+  '.navbar-light .navbar-text --text': css`
+    color: $navbar-light-color;
+  `,
+  '.navbar-dark .navbar-text --text': css`
+    color: $navbar-dark-color;
+  `,
+});
+
+function NavbarText(props: NavbarTextProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const { variant } = useForcedContext(NavbarContext);
+
+  const classes = getStyles(styles, ['.navbar-text']);
+  const textClasses = getStyles(styles, [
+    `.navbar-${variant} .navbar-text --text`,
+  ]);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+}
+
+export default NavbarText;

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,