bootstrap-rn 0.3.3 → 0.3.4

package/src/components/containers/{Container.js → Container.tsx}

@@ -1,19 +1,16 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
-import View from '../View';
+import View, { ViewProps, ViewRef } from '../View';
 import { CONTAINER_MAX_WIDTHS, GRID_BREAKPOINTS } from '../../theme/proxies';
 import { getStyles, each } from '../../utils';
 import { infix, next } from '../../theme/breakpoints';
 import NavbarContext from '../navbar/NavbarContext';
+import type { ThemeVariables } from '../../types';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  fluid: PropTypes.oneOf([true, ...Object.keys(CONTAINER_MAX_WIDTHS)]),
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
+export interface ContainerProps extends ViewProps {
+  fluid?: true | keyof typeof CONTAINER_MAX_WIDTHS;
+}
 
 const styles = StyleSheet.create({
   '.container': css`
@@ -25,57 +22,57 @@ const styles = StyleSheet.create({
   `,
   '.container-sm': css`
     @include media-breakpoint-up(sm) {
-      max-width: ${(t) => t['container-max-widths'].sm};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].sm};
     }
     @include media-breakpoint-up(md) {
-      max-width: ${(t) => t['container-max-widths'].md};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].md};
     }
     @include media-breakpoint-up(lg) {
-      max-width: ${(t) => t['container-max-widths'].lg};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].lg};
     }
     @include media-breakpoint-up(xl) {
-      max-width: ${(t) => t['container-max-widths'].xl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xl};
     }
     @include media-breakpoint-up(xxl) {
-      max-width: ${(t) => t['container-max-widths'].xxl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xxl};
     }
   `,
   '.container-md': css`
     @include media-breakpoint-up(md) {
-      max-width: ${(t) => t['container-max-widths'].md};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].md};
     }
     @include media-breakpoint-up(lg) {
-      max-width: ${(t) => t['container-max-widths'].lg};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].lg};
     }
     @include media-breakpoint-up(xl) {
-      max-width: ${(t) => t['container-max-widths'].xl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xl};
     }
     @include media-breakpoint-up(xxl) {
-      max-width: ${(t) => t['container-max-widths'].xxl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xxl};
     }
   `,
   '.container-lg': css`
     @include media-breakpoint-up(lg) {
-      max-width: ${(t) => t['container-max-widths'].lg};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].lg};
     }
     @include media-breakpoint-up(xl) {
-      max-width: ${(t) => t['container-max-widths'].xl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xl};
     }
     @include media-breakpoint-up(xxl) {
-      max-width: ${(t) => t['container-max-widths'].xxl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xxl};
     }
   `,
   '.container-xl': css`
     @include media-breakpoint-up(xl) {
-      max-width: ${(t) => t['container-max-widths'].xl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xl};
     }
     @include media-breakpoint-up(xxl) {
-      max-width: ${(t) => t['container-max-widths'].xxl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xxl};
     }
   `,
   '.container-xxl': css`
     @include media-breakpoint-up(xxl) {
-      max-width: ${(t) => t['container-max-widths'].xxl};
+      max-width: ${(t: ThemeVariables) => t['container-max-widths'].xxl};
     }
   `,
   // Navbar styles
@@ -95,7 +92,7 @@ const styles = StyleSheet.create({
   })),
 });
 
-const Container = React.forwardRef((props, ref) => {
+const Container = React.forwardRef<ViewRef, ContainerProps>((props, ref) => {
   const { fluid = 'sm', style, ...elementProps } = props;
 
   const navbar = useContext(NavbarContext);
@@ -117,6 +114,5 @@ const Container = React.forwardRef((props, ref) => {
 });
 
 Container.displayName = 'Container';
-Container.propTypes = propTypes;
 
 export default Container;

package/src/components/dropdown/{Dropdown.js → Dropdown.tsx}

@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
-import View from '../View';
+import View, { ViewProps, ViewRef } from '../View';
 import { getStyles } from '../../utils';
-import DropdownContext from './DropdownContext';
+import DropdownContext, { DropdownDirection } from './DropdownContext';
 import DropdownToggle from './DropdownToggle';
 import DropdownMenu from './DropdownMenu';
 import DropdownHeader from './DropdownHeader';
@@ -15,23 +14,15 @@ import useDropdown from './useDropdown';
 import useDismissDropdown from './useDismissDropdown';
 import useToggleDropdown from './useToggleDropdown';
 
-const DIRECTIONS = ['up', 'down', 'start', 'end'];
-
-const propTypes = {
-  children: PropTypes.node,
-  defaultVisible: PropTypes.bool,
-  visible: PropTypes.bool,
-  onToggle: PropTypes.func,
-  direction: PropTypes.oneOf(DIRECTIONS),
-  center: PropTypes.bool,
-  display: PropTypes.oneOf(['dynamic', 'static']),
-  autoClose: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf(['inside', 'outside']),
-  ]),
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
+export interface DropdownProps extends ViewProps {
+  defaultVisible?: boolean;
+  visible?: boolean;
+  onToggle?: () => void;
+  direction?: DropdownDirection;
+  center?: boolean;
+  display?: 'dynamic' | 'static';
+  autoClose?: boolean | 'inside' | 'outside';
+}
 
 const styles = StyleSheet.create({
   '.dropdown': css`
@@ -39,12 +30,12 @@ const styles = StyleSheet.create({
   `,
 });
 
-const Dropdown = React.forwardRef((props, ref) => {
+const Dropdown = React.forwardRef<ViewRef, DropdownProps>((props, ref) => {
   const {
     children,
     defaultVisible = false,
     visible,
-    onToggle,
+    onToggle = () => {},
     direction = 'down',
     center = false,
     display = 'dynamic',
@@ -75,16 +66,15 @@ const Dropdown = React.forwardRef((props, ref) => {
 });
 
 Dropdown.displayName = 'Dropdown';
-Dropdown.propTypes = propTypes;
 
-Dropdown.Context = DropdownContext;
-Dropdown.Toggle = DropdownToggle;
-Dropdown.Menu = DropdownMenu;
-Dropdown.Header = DropdownHeader;
-Dropdown.Item = DropdownItem;
-Dropdown.ItemText = DropdownItemText;
-Dropdown.Divider = DropdownDivider;
-Dropdown.useDismiss = useDismissDropdown;
-Dropdown.useToggle = useToggleDropdown;
-
-export default Dropdown;
+export default Object.assign(Dropdown, {
+  Context: DropdownContext,
+  Toggle: DropdownToggle,
+  Menu: DropdownMenu,
+  Header: DropdownHeader,
+  Item: DropdownItem,
+  ItemText: DropdownItemText,
+  Divider: DropdownDivider,
+  useDismiss: useDismissDropdown,
+  useToggle: useToggleDropdown,
+});

package/src/components/dropdown/DropdownContext.ts

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+import type { ViewRef } from '../View';
+
+export type DropdownDirection = 'up' | 'down' | 'start' | 'end';
+
+type DropdownContextProps = {
+  identifier: string;
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  toggleRef: React.RefObject<ViewRef>;
+  direction: DropdownDirection;
+  center: boolean;
+  display: string;
+  autoClose: string | boolean;
+};
+
+const DropdownContext = createContext<DropdownContextProps | null>(null);
+
+DropdownContext.displayName = 'DropdownContext';
+
+export default DropdownContext;

package/src/components/dropdown/{DropdownDivider.js → DropdownDivider.tsx}

@@ -1,14 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import StyleSheet from '../../style/StyleSheet';
 import { getStyles } from '../../utils';
 import css from '../../style/css';
-import View from '../View';
+import View, { ViewProps, ViewRef } from '../View';
 
-const propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
+export interface DropdownDividerProps extends ViewProps {}
 
 const styles = StyleSheet.create({
   '.dropdown-divider': css`
@@ -21,15 +17,16 @@ const styles = StyleSheet.create({
   `,
 });
 
-const DropdownDivider = React.forwardRef((props, ref) => {
-  const { style, ...elementProps } = props;
+const DropdownDivider = React.forwardRef<ViewRef, DropdownDividerProps>(
+  (props, ref) => {
+    const { style, ...elementProps } = props;
 
-  const classes = getStyles(styles, ['.dropdown-divider']);
+    const classes = getStyles(styles, ['.dropdown-divider']);
 
-  return <View {...elementProps} ref={ref} style={[classes, style]} />;
-});
+    return <View {...elementProps} ref={ref} style={[classes, style]} />;
+  },
+);
 
 DropdownDivider.displayName = 'DropdownDivider';
-DropdownDivider.propTypes = propTypes;
 
 export default DropdownDivider;

package/src/components/dropdown/DropdownHeader.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import Heading from '../Heading';
+
+export interface DropdownHeaderProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.dropdown-header': css`
+    // display: block;
+    padding: $dropdown-header-padding;
+  `,
+  '.dropdown-header --text': css`
+    margin-bottom: 0; // for use with heading elements
+    font-size: $font-size-sm;
+    color: $dropdown-header-color;
+    // white-space: nowrap; // as with > li > a
+  `,
+});
+
+const DropdownHeader = React.forwardRef<ViewRef, DropdownHeaderProps>(
+  (props, ref) => {
+    const { children, style, textStyle, ...elementProps } = props;
+
+    const classes = getStyles(styles, ['.dropdown-header']);
+    const textClasses = getStyles(styles, ['.dropdown-header --text']);
+
+    return (
+      <View {...elementProps} ref={ref} style={[classes, style]}>
+        <Heading size={6} style={[textClasses, textStyle]}>
+          {children}
+        </Heading>
+      </View>
+    );
+  },
+);
+
+DropdownHeader.displayName = 'DropdownHeader';
+
+export default DropdownHeader;

package/src/components/dropdown/{DropdownItem.js → DropdownItem.tsx}

@@ -1,151 +1,141 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../style/StyleSheet';
-import { getStyles } from '../../utils';
-import useForcedContext from '../../hooks/useForcedContext';
-import css from '../../style/css';
-import Pressable from '../Pressable';
-import DropdownContext from './DropdownContext';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  onPress: PropTypes.func,
-  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
-  textStyle: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  '.dropdown-item': css`
-    width: 100%;
-    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-    // clear: both;
-    background-color: transparent;
-    border: 0;
-
-    &:hover {
-      // @include gradient-bg($dropdown-link-hover-bg);
-      background-color: $dropdown-link-hover-bg;
-    }
-    &:focus {
-      // @include gradient-bg($dropdown-link-hover-bg);
-      background-color: $dropdown-link-hover-bg;
-    }
-  `,
-  '.dropdown-item --text': css`
-    font-weight: $font-weight-normal;
-    color: $dropdown-link-color;
-    // text-align: inherit;
-    text-decoration: none; // if($link-decoration == none, null, none);
-    // white-space: nowrap;
-
-    &:hover {
-      color: $dropdown-link-hover-color;
-      text-decoration: none; // if($link-hover-decoration == underline, none, null);
-    }
-    &:focus {
-      color: $dropdown-link-hover-color;
-      text-decoration: none; // if($link-hover-decoration == underline, none, null);
-    }
-  `,
-  '.dropdown-item.active': css`
-    // @include gradient-bg($dropdown-link-active-bg);
-    background-color: $dropdown-link-active-bg;
-
-    &:hover {
-      background-color: $dropdown-link-active-bg;
-    }
-    &:focus {
-      background-color: $dropdown-link-active-bg;
-    }
-  `,
-  '.dropdown-item.active --text': css`
-    color: $dropdown-link-active-color;
-    text-decoration: none;
-
-    &:hover {
-      color: $dropdown-link-active-color;
-    }
-    &:focus {
-      color: $dropdown-link-active-color;
-    }
-  `,
-
-  '.dropdown-item.disabled': css`
-    pointer-events: none;
-    background-color: transparent;
-    // Remove CSS gradients if they're enabled
-    // background-image: if($enable-gradients, none, null);
-
-    &:hover {
-      background-color: transparent;
-    }
-    &:focus {
-      background-color: transparent;
-    }
-  `,
-  '.dropdown-item.disabled --text': css`
-    color: $dropdown-link-disabled-color;
-
-    &:hover {
-      color: $dropdown-link-disabled-color;
-    }
-    &:focus {
-      color: $dropdown-link-disabled-color;
-    }
-  `,
-});
-
-const DropdownItem = (props) => {
-  const {
-    children,
-    onPress: handlePress,
-    active = false,
-    disabled = false,
-    style,
-    textStyle,
-    ...elementProps
-  } = props;
-
-  const dropdown = useForcedContext(DropdownContext);
-
-  const classes = getStyles(styles, [
-    '.dropdown-item',
-    active && '.dropdown-item.active',
-    disabled && '.dropdown-item.disabled',
-  ]);
-
-  const textClasses = getStyles(styles, [
-    '.dropdown-item --text',
-    active && '.dropdown-item.active --text',
-    disabled && '.dropdown-item.disabled --text',
-  ]);
-
-  return (
-    <Pressable
-      {...elementProps}
-      onPress={(event) => {
-        if (handlePress) handlePress(event);
-
-        if (event.defaultPrevented) {
-          return;
-        }
-
-        dropdown.setVisible(false);
-      }}
-      disabled={disabled}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-DropdownItem.displayName = 'DropdownItem';
-DropdownItem.propTypes = propTypes;
-
-export default DropdownItem;
+import React from 'react';
+import { GestureResponderEvent } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import css from '../../style/css';
+import Pressable, { PressableProps } from '../Pressable';
+import DropdownContext from './DropdownContext';
+
+export interface DropdownItemProps extends PressableProps {}
+
+const styles = StyleSheet.create({
+  '.dropdown-item': css`
+    width: 100%;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    // clear: both;
+    background-color: transparent;
+    border: 0;
+
+    &:hover {
+      // @include gradient-bg($dropdown-link-hover-bg);
+      background-color: $dropdown-link-hover-bg;
+    }
+    &:focus {
+      // @include gradient-bg($dropdown-link-hover-bg);
+      background-color: $dropdown-link-hover-bg;
+    }
+  `,
+  '.dropdown-item --text': css`
+    font-weight: $font-weight-normal;
+    color: $dropdown-link-color;
+    // text-align: inherit;
+    text-decoration: none; // if($link-decoration == none, null, none);
+    // white-space: nowrap;
+
+    &:hover {
+      color: $dropdown-link-hover-color;
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+    &:focus {
+      color: $dropdown-link-hover-color;
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+  `,
+  '.dropdown-item.active': css`
+    // @include gradient-bg($dropdown-link-active-bg);
+    background-color: $dropdown-link-active-bg;
+
+    &:hover {
+      background-color: $dropdown-link-active-bg;
+    }
+    &:focus {
+      background-color: $dropdown-link-active-bg;
+    }
+  `,
+  '.dropdown-item.active --text': css`
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+
+    &:hover {
+      color: $dropdown-link-active-color;
+    }
+    &:focus {
+      color: $dropdown-link-active-color;
+    }
+  `,
+
+  '.dropdown-item.disabled': css`
+    pointer-events: none;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    // background-image: if($enable-gradients, none, null);
+
+    &:hover {
+      background-color: transparent;
+    }
+    &:focus {
+      background-color: transparent;
+    }
+  `,
+  '.dropdown-item.disabled --text': css`
+    color: $dropdown-link-disabled-color;
+
+    &:hover {
+      color: $dropdown-link-disabled-color;
+    }
+    &:focus {
+      color: $dropdown-link-disabled-color;
+    }
+  `,
+});
+
+function DropdownItem(props: DropdownItemProps) {
+  const {
+    children,
+    onPress: handlePress,
+    active = false,
+    disabled = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const dropdown = useForcedContext(DropdownContext);
+
+  const classes = getStyles(styles, [
+    '.dropdown-item',
+    active && '.dropdown-item.active',
+    disabled && '.dropdown-item.disabled',
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.dropdown-item --text',
+    active && '.dropdown-item.active --text',
+    disabled && '.dropdown-item.disabled --text',
+  ]);
+
+  return (
+    <Pressable
+      {...elementProps}
+      onPress={(event: GestureResponderEvent) => {
+        if (handlePress) handlePress(event);
+
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        dropdown.setVisible(false);
+      }}
+      disabled={disabled}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+DropdownItem.displayName = 'DropdownItem';
+
+export default DropdownItem;

package/src/components/dropdown/DropdownItemText.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import Text from '../Text';
+
+export interface DropdownItemTextProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.dropdown-item-text': css`
+    // display: block;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  `,
+  '.dropdown-item-text --text': css`
+    color: $dropdown-link-color;
+  `,
+});
+
+const DropdownItemText = React.forwardRef<ViewRef, DropdownItemTextProps>(
+  (props, ref) => {
+    const { children, style, textStyle, ...elementProps } = props;
+
+    const classes = getStyles(styles, ['.dropdown-item-text']);
+    const textClasses = getStyles(styles, ['.dropdown-item-text --text']);
+
+    return (
+      <View {...elementProps} ref={ref} style={[classes, style]}>
+        <Text style={[textClasses, textStyle]}>{children}</Text>
+      </View>
+    );
+  },
+);
+
+DropdownItemText.displayName = 'DropdownItemText';
+
+export default DropdownItemText;