bootstrap-rn 0.4.8 → 0.4.9

package/src/components/nav/TabPane.tsx

@@ -1,52 +1,50 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { getStyles, getElementId } from '../../utils';
-import useForcedContext from '../../hooks/useForcedContext';
-import TabContext from './TabContext';
-
-export interface TabPaneProps extends ViewProps {
-  id: string;
-}
-
-const styles = StyleSheet.create({
-  '.tab-pane': css`
-    display: none;
-  `,
-  '.active': css`
-    display: flex;
-  `,
-});
-
-const TabPane = React.forwardRef<ViewRef, TabPaneProps>((props, ref) => {
-  const { id: target, style, ...elementProps } = props;
-
-  const tabbable = useForcedContext(TabContext);
-
-  const classes = getStyles(styles, [
-    '.tab-pane',
-    tabbable.activeTarget === target && '.active',
-  ]);
-
-  const id = getElementId(tabbable.identifier, target);
-
-  // Accessiblity role tabpanel is only supported on web.
-  const role = Platform.OS === 'web' ? 'tabpanel' : undefined;
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      id={id}
-      role={role}
-      aria-labelledby={`${id}-tab`}
-      style={[classes, style]}
-    />
-  );
-});
-
-TabPane.displayName = 'TabPane';
-
-export default TabPane;
+import React from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { getStyles, getElementId } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import TabContext from './TabContext';
+
+export interface TabPaneProps extends ViewProps {
+  id: string;
+}
+
+const styles = StyleSheet.create({
+  '.tab-pane': css`
+    display: none;
+  `,
+  '.active': css`
+    display: flex;
+  `,
+});
+
+function TabPane(props: TabPaneProps & React.RefAttributes<ViewRef>) {
+  const { ref, id: target, style, ...elementProps } = props;
+
+  const tabbable = useForcedContext(TabContext);
+
+  const classes = getStyles(styles, [
+    '.tab-pane',
+    tabbable.activeTarget === target && '.active',
+  ]);
+
+  const id = getElementId(tabbable.identifier, target);
+
+  // Accessiblity role tabpanel is only supported on web.
+  const role = Platform.OS === 'web' ? 'tabpanel' : undefined;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      id={id}
+      role={role}
+      aria-labelledby={`${id}-tab`}
+      style={[classes, style]}
+    />
+  );
+}
+
+export default TabPane;

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;