bootstrap-rn 0.3.3 → 0.3.4

package/src/components/modal/{ModalTitle.js → ModalTitle.tsx}

@@ -1,15 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
 import Heading from '../Heading';
 import { getStyles } from '../../utils';
+import type { TextProps, TextRef } from '../Text';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
+export interface ModalTitleProps extends TextProps {}
 
 const styles = StyleSheet.create({
   '.modal-title': css`
@@ -18,7 +14,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-const ModalTitle = React.forwardRef((props, ref) => {
+const ModalTitle = React.forwardRef<TextRef, ModalTitleProps>((props, ref) => {
   const { children, style, ...elementProps } = props;
 
   const classes = getStyles(styles, ['.modal-title']);
@@ -31,6 +27,5 @@ const ModalTitle = React.forwardRef((props, ref) => {
 });
 
 ModalTitle.displayName = 'ModalTitle';
-ModalTitle.propTypes = propTypes;
 
 export default ModalTitle;

package/src/components/modal/{useModal.js → useModal.ts}

@@ -1,25 +1,25 @@
-import { useContext, useEffect, useMemo } from 'react';
-import Context from '../../Context';
-
-export default function useModal(visible, scrollable) {
-  const context = useContext(Context);
-
-  useEffect(() => {
-    if (!visible) {
-      return undefined;
-    }
-
-    context.scrollbars.hide();
-
-    return () => {
-      context.scrollbars.show();
-    };
-  }, [visible]);
-
-  return useMemo(
-    () => ({
-      scrollable,
-    }),
-    [scrollable],
-  );
-}
+import { useContext, useEffect, useMemo } from 'react';
+import Context from '../../Context';
+
+export default function useModal(visible: boolean, scrollable: boolean) {
+  const context = useContext(Context);
+
+  useEffect(() => {
+    if (!visible || !context) {
+      return undefined;
+    }
+
+    context.scrollbars.hide();
+
+    return () => {
+      context.scrollbars.show();
+    };
+  }, [visible, context]);
+
+  return useMemo(
+    () => ({
+      scrollable,
+    }),
+    [scrollable],
+  );
+}

package/src/components/nav/{Nav.js → Nav.tsx}

@@ -1,101 +1,106 @@
-import React, { useContext } from 'react';
-import { Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View from '../View';
-import { GRID_BREAKPOINTS } from '../../theme/proxies';
-import { infix, next } from '../../theme/breakpoints';
-import { getStyles, each } from '../../utils';
-import NavbarContext from '../navbar/NavbarContext';
-import NavContext from './NavContext';
-import NavLink from './NavLink';
-import TabContext from './TabContext';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  variant: PropTypes.oneOf(['tabs', 'pills']),
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  '.nav': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    // flex-wrap: wrap; // bootstrap-rn: width will shrink on native with "flex-direction: column;"
-    padding-left: 0;
-    margin-bottom: 0;
-    // list-style: none;
-  `,
-  '.nav-tabs': css`
-    border-bottom-width: $nav-tabs-border-width;
-    border-style: solid;
-    border-color: $nav-tabs-border-color;
-  `,
-  // Navbar styles
-  '.navbar-nav': css`
-    display: flex;
-    flex-direction: column; // cannot use "inherit" to get the ".navbar"s value
-    padding-left: 0;
-    margin-bottom: 0;
-    // list-style: none;
-  `,
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.navbar-expand${infix(next(breakpoint))} .navbar-nav`]: css`
-      @include media-breakpoint-up(${next(breakpoint)}) {
-        flex-direction: row;
-      }
-    `,
-  })),
-});
-
-const getRole = (tabbable, navbar) => {
-  if (tabbable) {
-    return 'tablist';
-  }
-
-  if (Platform.OS === 'web' && !navbar) {
-    return 'navigation';
-  }
-
-  return null;
-};
-
-const Nav = React.forwardRef((props, ref) => {
-  const { children, variant, style, ...elementProps } = props;
-
-  const navbar = useContext(NavbarContext);
-  const tabbable = useContext(TabContext);
-
-  const classes = getStyles(styles, [
-    !navbar && '.nav',
-    variant === 'tabs' && '.nav-tabs',
-    // Navbar styles
-    navbar && '.navbar-nav',
-    navbar &&
-      navbar.expand &&
-      `.navbar-expand${
-        navbar.expand === true ? '' : `-${navbar.expand}`
-      } .navbar-nav`,
-  ]);
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      role={getRole(tabbable, navbar)}
-      style={[classes, style]}
-    >
-      <NavContext.Provider value={{ variant }}>{children}</NavContext.Provider>
-    </View>
-  );
-});
-
-Nav.displayName = 'Nav';
-Nav.propTypes = propTypes;
-
-Nav.Context = NavContext;
-Nav.Link = NavLink;
-
-export default Nav;
+import React, { useContext, useMemo } from 'react';
+import { Platform } from 'react-native';
+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 NavbarContext, { NavbarContextType } from '../navbar/NavbarContext';
+import NavContext, { NavVariant } from './NavContext';
+import NavLink from './NavLink';
+import TabContext, { TabContextType } from './TabContext';
+
+export interface NavProps extends ViewProps {
+  variant?: NavVariant;
+}
+
+const styles = StyleSheet.create({
+  '.nav': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    // flex-wrap: wrap; // bootstrap-rn: width will shrink on native with "flex-direction: column;"
+    padding-left: 0;
+    margin-bottom: 0;
+    // list-style: none;
+  `,
+  '.nav-tabs': css`
+    border-bottom-width: $nav-tabs-border-width;
+    border-style: solid;
+    border-color: $nav-tabs-border-color;
+  `,
+  // Navbar styles
+  '.navbar-nav': css`
+    display: flex;
+    flex-direction: column; // cannot use "inherit" to get the ".navbar"s value
+    padding-left: 0;
+    margin-bottom: 0;
+    // list-style: none;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .navbar-nav`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        flex-direction: row;
+      }
+    `,
+  })),
+});
+
+const getRole = (
+  tabbable: TabContextType | null,
+  navbar: NavbarContextType | null,
+) => {
+  if (tabbable) {
+    return 'tablist';
+  }
+
+  if (Platform.OS === 'web' && !navbar) {
+    return 'navigation';
+  }
+
+  return undefined;
+};
+
+const Nav = React.forwardRef<ViewRef, NavProps>((props, ref) => {
+  const { children, variant, style, ...elementProps } = props;
+
+  const navbar = useContext(NavbarContext);
+  const tabbable = useContext(TabContext);
+
+  const classes = getStyles(styles, [
+    !navbar && '.nav',
+    variant === 'tabs' && '.nav-tabs',
+    // Navbar styles
+    navbar && '.navbar-nav',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .navbar-nav`,
+  ]);
+
+  const contextValue = useMemo(
+    () => ({
+      variant,
+    }),
+    [variant],
+  );
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={getRole(tabbable, navbar)}
+      style={[classes, style]}
+    >
+      <NavContext.Provider value={contextValue}>{children}</NavContext.Provider>
+    </View>
+  );
+});
+
+Nav.displayName = 'Nav';
+
+export default Object.assign(Nav, {
+  Context: NavContext,
+  Link: NavLink,
+});

package/src/components/nav/NavContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+export type NavVariant = 'tabs' | 'pills';
+
+type NavContextType = {
+  variant?: NavVariant;
+};
+
+const NavContext = createContext<NavContextType | null>(null);
+
+NavContext.displayName = 'NavContext';
+
+export default NavContext;

package/src/components/nav/{NavLink.js → NavLink.tsx}

@@ -1,8 +1,7 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
-import Pressable from '../Pressable';
+import Pressable, { PressableProps, PressableRef } from '../Pressable';
 import { GRID_BREAKPOINTS } from '../../theme/proxies';
 import { infix, next } from '../../theme/breakpoints';
 import { getStyles, each } from '../../utils';
@@ -10,20 +9,9 @@ import useModifier from '../../hooks/useModifier';
 import useForcedContext from '../../hooks/useForcedContext';
 import NavbarContext from '../navbar/NavbarContext';
 import NavContext from './NavContext';
+import type { UseTabbableProps } from '../../types';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  activeStyle: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  textStyle: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  activeTextStyle: PropTypes.any,
-};
+export interface NavLinkProps extends UseTabbableProps, PressableProps {}
 
 const styles = StyleSheet.create({
   '.nav-link': css`
@@ -195,7 +183,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-const NavLink = React.forwardRef((props, ref) => {
+const NavLink = React.forwardRef<PressableRef, NavLinkProps>((props, ref) => {
   const [modifierProps, modifierRef] = useModifier('useTabbable', props, ref);
 
   const {
@@ -222,7 +210,7 @@ const NavLink = React.forwardRef((props, ref) => {
     navbar &&
       navbar.expand &&
       `.navbar-expand${
-        navbar.expand === true ? '' : `-${navbar.expand}`
+        navbar.expand === true ? '' : infix(navbar.expand)
       } .navbar-nav .nav-link`,
     navbar && `.navbar-${navbar.variant} .navbar-nav .nav-link`,
     navbar &&
@@ -245,7 +233,7 @@ const NavLink = React.forwardRef((props, ref) => {
     navbar && '.navbar-nav .nav-link --text',
     navbar &&
       navbar.expand &&
-      `.navbar-expand${infix(navbar.expand)} .navbar-nav .nav-link --text`,
+      `.navbar-expand${navbar.expand === true ? '' : infix(navbar.expand)} .navbar-nav .nav-link --text`,
     navbar && `.navbar-${navbar.variant} .navbar-nav .nav-link --text`,
     navbar &&
       disabled &&
@@ -275,6 +263,5 @@ const NavLink = React.forwardRef((props, ref) => {
 });
 
 NavLink.displayName = 'NavLink';
-NavLink.propTypes = propTypes;
 
 export default NavLink;

package/src/components/nav/{Tab.js → Tab.ts}

@@ -6,10 +6,10 @@ import useToggleTab from './useToggleTab';
 
 const Tab = {};
 
-Tab.Context = TabContext;
-Tab.Provider = TabProvider;
-Tab.Content = TabContent;
-Tab.Pane = TabPane;
-Tab.useToggle = useToggleTab;
-
-export default Tab;
+export default Object.assign(Tab, {
+  Context: TabContext,
+  Provider: TabProvider,
+  Content: TabContent,
+  Pane: TabPane,
+  useToggle: useToggleTab,
+});

package/src/components/nav/TabContent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+
+export interface TabContentProps extends ViewProps {}
+
+const TabContent = React.forwardRef<ViewRef, TabContentProps>((props, ref) => {
+  const { ...elementProps } = props;
+
+  return <View {...elementProps} ref={ref} />;
+});
+
+TabContent.displayName = 'TabContent';
+
+export default TabContent;

package/src/components/nav/TabContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+export type TabContextType = {
+  identifier: string;
+  activeTarget: string;
+  setActiveTarget: (target: string) => void;
+};
+
+const TabContext = createContext<TabContextType | null>(null);
+
+TabContext.displayName = 'TabContext';
+
+export default TabContext;

package/src/components/nav/{TabPane.js → TabPane.tsx}

@@ -1,57 +1,52 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View from '../View';
-import { getStyles, getElementId } from '../../utils';
-import useForcedContext from '../../hooks/useForcedContext';
-import TabContext from './TabContext';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  '.tab-pane': css`
-    display: none;
-  `,
-  '.active': css`
-    display: flex;
-  `,
-});
-
-const TabPane = React.forwardRef((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' : null;
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      id={id}
-      role={role}
-      aria-labelledby={`${id}-tab`}
-      style={[classes, style]}
-    />
-  );
-});
-
-TabPane.displayName = 'TabPane';
-TabPane.propTypes = propTypes;
-
-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;
+  `,
+});
+
+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;

package/src/components/nav/{TabProvider.js → TabProvider.tsx}

@@ -1,24 +1,22 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import TabContext from './TabContext';
 import useTabbable from './useTabbable';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  defaultActiveTarget: PropTypes.string.isRequired,
-  activeTarget: PropTypes.string,
-  onChange: PropTypes.func,
-};
+export interface TabProviderProps {
+  children: React.ReactNode;
+  defaultActiveTarget: string;
+  activeTarget?: string;
+  onChange?: () => void;
+}
 
-const TabProvider = (props) => {
+function TabProvider(props: TabProviderProps) {
   const { children, defaultActiveTarget, activeTarget, onChange } = props;
 
   const tabbable = useTabbable(defaultActiveTarget, activeTarget, onChange);
 
   return <TabContext.Provider value={tabbable}>{children}</TabContext.Provider>;
-};
+}
 
 TabProvider.displayName = 'TabProvider';
-TabProvider.propTypes = propTypes;
 
 export default TabProvider;

package/src/components/nav/{useTabbable.js → useTabbable.ts}

@@ -2,11 +2,17 @@ import { useMemo } from 'react';
 import useIdentifier from '../../hooks/useIdentifier';
 import useControlledState from '../../hooks/useControlledState';
 
+type UseTabbableReturnType = {
+  identifier: string;
+  activeTarget: string;
+  setActiveTarget: (target: string) => void;
+};
+
 export default function useTabbable(
-  defaultActiveTarget,
-  controlledActiveTarget,
-  onChange,
-) {
+  defaultActiveTarget: string,
+  controlledActiveTarget?: string,
+  onChange?: () => void,
+): UseTabbableReturnType {
   const identifier = useIdentifier('tabbable');
 
   const [activeTarget, setActiveTarget] = useControlledState(

package/src/components/nav/{useToggleTab.js → useToggleTab.ts}

@@ -1,30 +1,36 @@
-import invariant from 'tiny-invariant';
-import useForcedContext from '../../hooks/useForcedContext';
-import TabContext from './TabContext';
-import { getElementId } from '../../utils';
-
-export default function useToggleTab(props) {
-  const context = useForcedContext(TabContext);
-
-  const { target, onPress: handlePress, ...restProps } = props;
-
-  invariant(target, 'Prop "target" is required.');
-
-  const id = getElementId(context.identifier, target);
-  const active = context.activeTarget === target;
-
-  return {
-    ...restProps,
-    id: `${id}-tab`,
-    onPress: (event) => {
-      if (handlePress) handlePress(event);
-
-      event.preventDefault();
-      context.setActiveTarget(target);
-    },
-    active,
-    role: 'tab',
-    'aria-controls': id,
-    'aria-selected': active,
-  };
-}
+import type { GestureResponderEvent } from 'react-native';
+import invariant from 'tiny-invariant';
+import useForcedContext from '../../hooks/useForcedContext';
+import TabContext from './TabContext';
+import { getElementId } from '../../utils';
+
+export interface UseToggleTabProps {
+  target?: string;
+  onPress?: null | ((event: GestureResponderEvent) => void);
+}
+
+export default function useToggleTab<T>(props: UseToggleTabProps & T) {
+  const context = useForcedContext(TabContext);
+
+  const { target, onPress: handlePress, ...restProps } = props;
+
+  invariant(target, 'Prop "target" is required.');
+
+  const id = getElementId(context.identifier, target);
+  const active = context.activeTarget === target;
+
+  return {
+    ...restProps,
+    id: `${id}-tab`,
+    onPress: (event: GestureResponderEvent) => {
+      if (handlePress) handlePress(event);
+
+      event.preventDefault();
+      context.setActiveTarget(target);
+    },
+    active,
+    role: 'tab',
+    'aria-controls': id,
+    'aria-selected': active,
+  };
+}