bootstrap-rn 0.3.3 → 0.3.5

package/src/Context.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View as BaseView } from 'react-native';
+import type { ExtendedStyle, Viewport } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ModifierProps = any;
+
+export type Modifier = (
+  props: ModifierProps,
+  ref: React.Ref<unknown>,
+) => ModifierProps & { ref?: React.Ref<unknown> };
+
+export type Modifiers = {
+  useFormField?: Modifier;
+  useTabbable?: Modifier;
+  useActionable?: Modifier;
+};
+
+export type BootstrapRNContextType = {
+  utilities: Record<string, ExtendedStyle>;
+  modifiers: Modifiers;
+  scrollbars: {
+    hide: () => void;
+    show: () => void;
+  };
+  fixed: React.RefObject<BaseView>[];
+  getViewport(): Viewport;
+  addFixedElement: (ref: unknown) => {
+    remove: () => void;
+  };
+  generateKey(prefix: string): string;
+};
+
+const Context = React.createContext<BootstrapRNContextType | null>(null);
+
+Context.displayName = 'BootstrapRNContext';
+
+export default Context;

package/src/Provider.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo, useRef } from 'react';
+import { View as BaseView } from 'react-native';
+import { OverlayProvider } from '@react-native-aria/overlays';
+import useViewport from './hooks/useViewport';
+import useScrollbarEffects from './hooks/useScrollbarEffects';
+import Context, { Modifiers } from './Context';
+import type { ExtendedStyle, Viewport } from './types';
+
+type ProviderProps = {
+  children: React.ReactNode;
+  utilities?: Record<string, ExtendedStyle>;
+  modifiers?: Modifiers;
+  ssrViewport: Viewport;
+};
+
+function Provider({
+  children,
+  utilities = {},
+  modifiers = {},
+  ssrViewport,
+}: ProviderProps) {
+  const viewport = useViewport(ssrViewport);
+
+  const fixed: React.RefObject<BaseView>[] = useMemo(() => [], []);
+
+  const counter = useRef(0);
+
+  const scrollbars = useScrollbarEffects(fixed);
+
+  const context = useMemo(
+    () => ({
+      utilities,
+      modifiers,
+      scrollbars,
+      fixed,
+      getViewport() {
+        return viewport;
+      },
+      addFixedElement(ref: React.RefObject<BaseView>) {
+        fixed.push(ref);
+
+        return {
+          remove() {
+            const index = fixed.findIndex((item) => item === ref);
+
+            fixed.splice(index, 1);
+          },
+        };
+      },
+      generateKey(prefix: string) {
+        counter.current += 1;
+
+        return `ui-${prefix}-${counter.current}`;
+      },
+    }),
+    [utilities, modifiers, scrollbars, fixed, viewport, fixed, counter],
+  );
+
+  return (
+    <Context.Provider value={context}>
+      <OverlayProvider>{children}</OverlayProvider>
+    </Context.Provider>
+  );
+}
+
+export default Provider;

package/src/components/{Body.js → Body.tsx}

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
 import { SafeAreaView as BaseSafeAreaView } from 'react-native';
 import StyleSheet from '../style/StyleSheet';
 import css from '../style/css';
@@ -7,16 +6,9 @@ import { getStyles } from '../utils';
 import TextStyleContext from '../style/TextStyleContext';
 import useMedia from '../hooks/useMedia';
 import useStyle from '../hooks/useStyle';
+import { ViewProps, ViewRef } from './View';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  textStyle: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  styleName: PropTypes.any,
-};
+export interface BodyProps extends ViewProps {}
 
 const styles = StyleSheet.create({
   body: css`
@@ -30,7 +22,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-const Body = React.forwardRef((props, ref) => {
+const Body = React.forwardRef<ViewRef, BodyProps>((props, ref) => {
   const { children, style, textStyle, styleName, ...elementProps } = props;
 
   const classes = getStyles(styles, ['body']);
@@ -41,17 +33,20 @@ const Body = React.forwardRef((props, ref) => {
   const resolveStyle = useStyle([classes, style], styleName);
   const resolveTextStyle = useStyle([textClasses, textStyle]);
 
+  const contextValue = useMemo(
+    () => ({
+      style: resolveTextStyle({ media }),
+    }),
+    [resolveTextStyle, media],
+  );
+
   return (
     <BaseSafeAreaView
       {...elementProps}
       ref={ref}
       style={resolveStyle({ media })}
     >
-      <TextStyleContext.Provider
-        value={{
-          style: resolveTextStyle({ media }),
-        }}
-      >
+      <TextStyleContext.Provider value={contextValue}>
         {children}
       </TextStyleContext.Provider>
     </BaseSafeAreaView>
@@ -59,6 +54,5 @@ const Body = React.forwardRef((props, ref) => {
 });
 
 Body.displayName = 'Body';
-Body.propTypes = propTypes;
 
 export default Body;

package/src/components/{Caret.js → Caret.tsx}

@@ -1,127 +1,111 @@
-import React, { useContext } from 'react';
-import { I18nManager, StyleSheet as StyleUtils } from 'react-native';
-import PropTypes from 'prop-types';
-import StyleSheet from '../style/StyleSheet';
-import { getStyles } from '../utils';
-import css from '../style/css';
-import TextStyleContext from '../style/TextStyleContext';
-import View from './View';
-
-const DIRECTIONS = ['up', 'down', 'start', 'end'];
-
-const propTypes = {
-  color: PropTypes.string,
-  direction: PropTypes.oneOf(DIRECTIONS),
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
-
-const getColor = (context) => {
-  if (context && context.style) {
-    const flattenedStyle = StyleUtils.flatten(context.style);
-
-    if (flattenedStyle.color) {
-      return flattenedStyle.color;
-    }
-  }
-
-  return StyleSheet.value('body-color');
-};
-
-const getBorderColorStyle = (color, direction) => {
-  switch (direction) {
-    case 'down':
-      return { borderTopColor: color };
-    case 'up':
-      return { borderBottomColor: color };
-    case 'end':
-      return I18nManager.isRTL
-        ? { borderRightColor: color }
-        : { borderLeftColor: color };
-    case 'start':
-      return I18nManager.isRTL
-        ? { borderLeftColor: color }
-        : { borderRightColor: color };
-    default:
-      throw new Error('Unknown direction.');
-  }
-};
-
-const styles = StyleSheet.create({
-  caret: css`
-    // &::after styles
-    // display: inline-block;
-    margin-left: $caret-spacing;
-    // vertical-align: $caret-vertical-align;
-    align-self: center; // added for bootstrap-rn
-    // content: "";
-  `,
-  'caret-down': css`
-    // &::after styles
-    border-top-width: $caret-width;
-    border-right-width: $caret-width;
-    border-right-color: transparent;
-    border-bottom-width: 0;
-    border-left-width: $caret-width;
-    border-left-color: transparent;
-  `,
-  'caret-up': css`
-    // &::after styles
-    border-top-width: 0;
-    border-right-width: $caret-width;
-    border-right-color: transparent;
-    border-bottom-width: $caret-width;
-    border-left-width: $caret-width;
-    border-left-color: transparent;
-  `,
-  'caret-end': css`
-    // &::after styles
-    border-top-width: $caret-width;
-    border-top-color: transparent;
-    border-right-width: 0;
-    border-bottom-width: $caret-width;
-    border-bottom-color: transparent;
-    border-left-width: $caret-width;
-  `,
-  'caret-start': css`
-    // &::after styles
-    // display: none;
-
-    // &::before styles
-    // display: inline-block;
-    margin-left: 0; // added for bootstrap-rn
-    margin-right: $caret-spacing;
-    // vertical-align: $caret-vertical-align;
-    // content: "";
-    border-top-width: $caret-width;
-    border-top-color: transparent;
-    border-right-width: $caret-width;
-    border-bottom-width: $caret-width;
-    border-bottom-color: transparent;
-  `,
-});
-
-const Caret = React.forwardRef((props, ref) => {
-  const { color, direction = 'down', style, ...elementProps } = props;
-
-  const context = useContext(TextStyleContext);
-
-  const classes = getStyles(styles, ['caret', `caret-${direction}`]);
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      style={[
-        classes,
-        getBorderColorStyle(color || getColor(context), direction),
-        style,
-      ]}
-    />
-  );
-});
-
-Caret.displayName = 'Caret';
-Caret.propTypes = propTypes;
-
-export default Caret;
+import React, { useContext, forwardRef } from 'react';
+import { I18nManager, StyleSheet as StyleUtils } from 'react-native';
+import View, { ViewProps, ViewRef } from './View';
+import StyleSheet from '../style/StyleSheet';
+import { getStyles } from '../utils';
+import css from '../style/css';
+import TextStyleContext, {
+  TextStyleContextType,
+} from '../style/TextStyleContext';
+
+type CaretDirectionTypes = 'up' | 'down' | 'start' | 'end';
+
+export interface CaretProps extends ViewProps {
+  color?: string;
+  direction?: CaretDirectionTypes;
+}
+
+const getColor = (context: TextStyleContextType | null) => {
+  if (context && context.style) {
+    const flattenedStyle = StyleUtils.flatten(context.style);
+
+    if (flattenedStyle.color) {
+      return flattenedStyle.color;
+    }
+  }
+
+  return StyleSheet.value('body-color');
+};
+
+const getBorderColorStyle = (color: string, direction: CaretDirectionTypes) => {
+  switch (direction) {
+    case 'down':
+      return { borderTopColor: color };
+    case 'up':
+      return { borderBottomColor: color };
+    case 'end':
+      return I18nManager.isRTL
+        ? { borderRightColor: color }
+        : { borderLeftColor: color };
+    case 'start':
+      return I18nManager.isRTL
+        ? { borderLeftColor: color }
+        : { borderRightColor: color };
+    default:
+      throw new Error('Unknown direction.');
+  }
+};
+
+const styles = StyleSheet.create({
+  caret: css`
+    margin-left: $caret-spacing;
+    align-self: center;
+  `,
+  'caret-down': css`
+    border-top-width: $caret-width;
+    border-right-width: $caret-width;
+    border-right-color: transparent;
+    border-bottom-width: 0;
+    border-left-width: $caret-width;
+    border-left-color: transparent;
+  `,
+  'caret-up': css`
+    border-top-width: 0;
+    border-right-width: $caret-width;
+    border-right-color: transparent;
+    border-bottom-width: $caret-width;
+    border-left-width: $caret-width;
+    border-left-color: transparent;
+  `,
+  'caret-end': css`
+    border-top-width: $caret-width;
+    border-top-color: transparent;
+    border-right-width: 0;
+    border-bottom-width: $caret-width;
+    border-bottom-color: transparent;
+    border-left-width: $caret-width;
+  `,
+  'caret-start': css`
+    margin-left: 0;
+    margin-right: $caret-spacing;
+    border-top-width: $caret-width;
+    border-top-color: transparent;
+    border-right-width: $caret-width;
+    border-bottom-width: $caret-width;
+    border-bottom-color: transparent;
+  `,
+});
+
+const Caret = forwardRef<ViewRef, CaretProps>((props, ref) => {
+  const { color, direction = 'down', style, ...elementProps } = props;
+
+  const context = useContext(TextStyleContext);
+
+  const classes = getStyles(styles, ['caret', `caret-${direction}`]);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[
+        classes,
+        getBorderColorStyle(color || getColor(context), direction),
+        style,
+      ]}
+    />
+  );
+});
+
+Caret.displayName = 'Caret';
+
+export default Caret;

package/src/components/{Heading.js → Heading.tsx}

@@ -1,55 +1,49 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from '../style/StyleSheet';
-import css from '../style/css';
-import Text from './Text';
-import { FONT_SIZES } from '../theme/proxies';
-import { getStyles, each } from '../utils';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  size: PropTypes.oneOf(Object.keys(FONT_SIZES).map((k) => Number(k)))
-    .isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  heading: css`
-    margin-top: 0; // 1
-    margin-bottom: $headings-margin-bottom;
-    font-family: $headings-font-family;
-    font-style: $headings-font-style;
-    font-weight: $headings-font-weight;
-    color: $headings-color;
-  `,
-  ...each(FONT_SIZES, (size, value) => ({
-    [`.h${size}`]: css`
-      font-size: ${value};
-      line-height: ${value} * $headings-line-height;
-    `,
-  })),
-});
-
-const Heading = React.forwardRef((props, ref) => {
-  const { children, size, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['heading', `.h${size}`]);
-
-  return (
-    <Text
-      {...elementProps}
-      ref={ref}
-      role="heading"
-      aria-level={size}
-      style={[classes, style]}
-    >
-      {children}
-    </Text>
-  );
-});
-
-Heading.displayName = 'Heading';
-Heading.propTypes = propTypes;
-
-export default Heading;
+import React from 'react';
+import StyleSheet from '../style/StyleSheet';
+import css from '../style/css';
+import Text, { TextProps, TextRef } from './Text';
+import { FONT_SIZES } from '../theme/proxies';
+import { getStyles, each } from '../utils';
+
+export interface HeadingProps extends TextProps {
+  size: keyof typeof FONT_SIZES;
+}
+
+const styles = StyleSheet.create({
+  heading: css`
+    margin-top: 0; // 1
+    margin-bottom: $headings-margin-bottom;
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    color: $headings-color;
+  `,
+  ...each(FONT_SIZES, (size, value) => ({
+    [`.h${size}`]: css`
+      font-size: ${value};
+      line-height: ${value} * $headings-line-height;
+    `,
+  })),
+});
+
+const Heading = React.forwardRef<TextRef, HeadingProps>((props, ref) => {
+  const { children, size, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['heading', `.h${size}`]);
+
+  return (
+    <Text
+      {...elementProps}
+      ref={ref}
+      role="heading"
+      aria-level={size}
+      style={[classes, style]}
+    >
+      {children}
+    </Text>
+  );
+});
+
+Heading.displayName = 'Heading';
+
+export default Heading;

package/src/components/Image.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Image as BaseImage, ImageProps as BaseImageProps } from 'react-native';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import type { ExtendedImageStyle, StyleProp, StyleName } from '../types';
+
+export type ImageRef = BaseImage;
+
+export interface ImageProps extends Omit<BaseImageProps, 'style'> {
+  style?: StyleProp<ExtendedImageStyle>;
+  styleName?: StyleName;
+}
+
+const Image = React.forwardRef<BaseImage, ImageProps>((props, ref) => {
+  const { style, styleName, ...elementProps } = props;
+
+  const media = useMedia();
+  const resolveStyle = useStyle(style, styleName);
+
+  return (
+    <BaseImage
+      {...elementProps}
+      ref={ref}
+      style={resolveStyle({ media }) as BaseImageProps['style']}
+    />
+  );
+});
+
+Image.displayName = 'Image';
+
+export default Image;

package/src/components/ImageBackground.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  ImageBackground as BaseImageBackground,
+  ImageBackgroundProps as BaseImageBackgroundProps,
+} from 'react-native';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import type {
+  ExtendedViewStyle,
+  ExtendedImageStyle,
+  StyleProp,
+  StyleName,
+} from '../types';
+
+export type ImageBackgroundRef = BaseImageBackground;
+
+export interface ImageBackgroundProps
+  extends Omit<BaseImageBackgroundProps, 'style' | 'imageStyle'> {
+  style?: StyleProp<ExtendedViewStyle>;
+  imageStyle?: StyleProp<ExtendedImageStyle>;
+  styleName?: StyleName;
+}
+
+const ImageBackground = React.forwardRef<
+  ImageBackgroundRef,
+  ImageBackgroundProps
+>((props, ref) => {
+  const { style, imageStyle, styleName, ...elementProps } = props;
+
+  const media = useMedia();
+  const resolveStyle = useStyle(style, styleName);
+  const resolveImageStyle = useStyle(imageStyle);
+
+  return (
+    <BaseImageBackground
+      {...elementProps}
+      ref={ref}
+      style={resolveStyle({ media })}
+      imageStyle={
+        resolveImageStyle({ media }) as BaseImageBackgroundProps['imageStyle']
+      }
+    />
+  );
+});
+
+ImageBackground.displayName = 'ImageBackground';
+
+export default ImageBackground;

package/src/components/{Label.js → Label.tsx}

@@ -1,36 +1,34 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import View from './View';
-import { concatRefs } from '../utils';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  htmlFor: PropTypes.string,
-};
-
-const Label = React.forwardRef((props, ref) => {
-  const { children, htmlFor, ...elementProps } = props;
-
-  // Ref: https://github.com/necolas/react-native-web/issues/1651
-  const forRef = React.useCallback((node) => {
-    if (Platform.OS !== 'web' || !htmlFor || !node) {
-      return;
-    }
-
-    node.setAttribute('for', htmlFor);
-  }, []);
-
-  const role = Platform.OS === 'web' ? 'label' : null;
-
-  return (
-    <View {...elementProps} ref={concatRefs(forRef, ref)} role={role}>
-      {children}
-    </View>
-  );
-});
-
-Label.displayName = 'Label';
-Label.propTypes = propTypes;
-
-export default Label;
+import React from 'react';
+import { Platform } from 'react-native';
+import View, { ViewProps, ViewRef } from './View';
+import { concatRefs } from '../utils';
+
+export interface LabelProps extends ViewProps {
+  htmlFor?: string;
+}
+
+const Label = React.forwardRef<ViewRef, LabelProps>((props, ref) => {
+  const { children, htmlFor, ...elementProps } = props;
+
+  // Ref: https://github.com/necolas/react-native-web/issues/1651
+  const forRef = React.useCallback((node: HTMLElement | null) => {
+    if (Platform.OS !== 'web' || !htmlFor || !node) {
+      return;
+    }
+
+    node.setAttribute('for', htmlFor);
+  }, []);
+
+  const role = Platform.OS === 'web' ? 'label' : undefined;
+
+  return (
+    // @ts-expect-error web only role
+    <View {...elementProps} ref={concatRefs(forRef, ref)} role={role}>
+      {children}
+    </View>
+  );
+});
+
+Label.displayName = 'Label';
+
+export default Label;