bootstrap-rn 0.4.8 → 0.4.9

package/src/components/toasts/ToastHeader.tsx

@@ -1,59 +1,55 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { subtract } from '../../theme/functions';
-import { getStyles } from '../../utils';
-import type { ThemeVariables } from '../../types';
-
-export interface ToastHeaderProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.toast-header': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    align-items: center;
-    padding: $toast-padding-y $toast-padding-x;
-    background-color: $toast-header-background-color;
-    // background-clip: padding-box;
-    border-bottom-width: $toast-border-width;
-    border-style: solid;
-    border-color: $toast-header-border-color;
-    border-top-left-radius: ${subtract(
-      (t: ThemeVariables) => t['toast-border-radius'],
-      (t: ThemeVariables) => t['toast-border-width'],
-    )};
-    border-top-right-radius: ${subtract(
-      (t: ThemeVariables) => t['toast-border-radius'],
-      (t: ThemeVariables) => t['toast-border-width'],
-    )};
-  `,
-  '.toast-header --text': css`
-    color: $toast-header-color;
-  `,
-});
-
-const ToastHeader = React.forwardRef<ViewRef, ToastHeaderProps>(
-  (props, ref) => {
-    const { children, style, textStyle, ...elementProps } = props;
-
-    const classes = getStyles(styles, ['.toast-header']);
-
-    const textClasses = getStyles(styles, ['.toast-header --text']);
-
-    return (
-      <View
-        {...elementProps}
-        ref={ref}
-        style={[classes, style]}
-        textStyle={[textClasses, textStyle]}
-      >
-        {children}
-      </View>
-    );
-  },
-);
-
-ToastHeader.displayName = 'ToastHeader';
-
-export default ToastHeader;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { subtract } from '../../theme/functions';
+import { getStyles } from '../../utils';
+import type { ThemeVariables } from '../../types';
+
+export interface ToastHeaderProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.toast-header': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    align-items: center;
+    padding: $toast-padding-y $toast-padding-x;
+    background-color: $toast-header-background-color;
+    // background-clip: padding-box;
+    border-bottom-width: $toast-border-width;
+    border-style: solid;
+    border-color: $toast-header-border-color;
+    border-top-left-radius: ${subtract(
+      (t: ThemeVariables) => t['toast-border-radius'],
+      (t: ThemeVariables) => t['toast-border-width'],
+    )};
+    border-top-right-radius: ${subtract(
+      (t: ThemeVariables) => t['toast-border-radius'],
+      (t: ThemeVariables) => t['toast-border-width'],
+    )};
+  `,
+  '.toast-header --text': css`
+    color: $toast-header-color;
+  `,
+});
+
+function ToastHeader(props: ToastHeaderProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.toast-header']);
+
+  const textClasses = getStyles(styles, ['.toast-header --text']);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export default ToastHeader;

package/src/components/tooltip/Tooltip.tsx

@@ -32,8 +32,9 @@ const styles = StyleSheet.create({
   `,
 });
 
-const Tooltip = React.forwardRef<ViewRef, TooltipProps>((props, ref) => {
+function Tooltip(props: TooltipProps & React.RefAttributes<ViewRef>) {
   const {
+    ref,
     children,
     placement = 'top',
     floating,
@@ -69,9 +70,7 @@ const Tooltip = React.forwardRef<ViewRef, TooltipProps>((props, ref) => {
       </TooltipContext.Provider>
     </View>
   );
-});
-
-Tooltip.displayName = 'Tooltip';
+}
 
 export default Object.assign(Tooltip, {
   Arrow: TooltipArrow,

package/src/components/tooltip/TooltipArrow.tsx

@@ -103,34 +103,30 @@ const transformPlacement = (placement: OverlayPlacement) => {
   return placement;
 };
 
-const TooltipArrow = React.forwardRef<ViewRef, TooltipArrowProps>(
-  (props, ref) => {
-    const { style, ...elementProps } = props;
+function TooltipArrow(props: TooltipArrowProps & React.RefAttributes<ViewRef>) {
+  const { ref, style, ...elementProps } = props;
 
-    const context = useForcedContext(TooltipContext);
+  const context = useForcedContext(TooltipContext);
 
-    // For some reason the classes are named start/end, but they always define
-    // the overlay on the left/right placement, so it has no effect on RTL.
-    // Hint: RTL is already handled by the useOverlay hook.
-    const placement = transformPlacement(context.placement);
+  // For some reason the classes are named start/end, but they always define
+  // the overlay on the left/right placement, so it has no effect on RTL.
+  // Hint: RTL is already handled by the useOverlay hook.
+  const placement = transformPlacement(context.placement);
 
-    const classes = getStyles(styles, [
-      '.tooltip-arrow',
-      context.floating && `.bs-tooltip-${placement} .tooltip-arrow`,
-    ]);
-    const beforeClasses = getStyles(styles, [
-      '.tooltip-arrow::before',
-      context.floating && `.bs-tooltip-${placement} .tooltip-arrow::before`,
-    ]);
+  const classes = getStyles(styles, [
+    '.tooltip-arrow',
+    context.floating && `.bs-tooltip-${placement} .tooltip-arrow`,
+  ]);
+  const beforeClasses = getStyles(styles, [
+    '.tooltip-arrow::before',
+    context.floating && `.bs-tooltip-${placement} .tooltip-arrow::before`,
+  ]);
 
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        <View style={beforeClasses} />
-      </View>
-    );
-  },
-);
-
-TooltipArrow.displayName = 'TooltipArrow';
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <View style={beforeClasses} />
+    </View>
+  );
+}
 
 export default TooltipArrow;

package/src/components/tooltip/TooltipInner.tsx

@@ -1,41 +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 TooltipInnerProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.tooltip-inner': css`
-    max-width: $tooltip-max-width;
-    padding: $tooltip-padding-y $tooltip-padding-x;
-    background-color: $tooltip-bg;
-    border-radius: $tooltip-border-radius;
-  `,
-  '.tooltip-inner --text': css`
-    color: $tooltip-color;
-    text-align: center;
-  `,
-});
-
-const TooltipInner = React.forwardRef<ViewRef, TooltipInnerProps>(
-  (props, ref) => {
-    const { children, style, textStyle, ...elementProps } = props;
-
-    const classes = getStyles(styles, ['.tooltip-inner']);
-    const textClasses = getStyles(styles, ['.tooltip-inner --text']);
-
-    // composite component
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        <Text style={[textClasses, textStyle]}>{children}</Text>
-      </View>
-    );
-  },
-);
-
-TooltipInner.displayName = 'TooltipInner';
-
-export default TooltipInner;
+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 TooltipInnerProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.tooltip-inner': css`
+    max-width: $tooltip-max-width;
+    padding: $tooltip-padding-y $tooltip-padding-x;
+    background-color: $tooltip-bg;
+    border-radius: $tooltip-border-radius;
+  `,
+  '.tooltip-inner --text': css`
+    color: $tooltip-color;
+    text-align: center;
+  `,
+});
+
+function TooltipInner(props: TooltipInnerProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.tooltip-inner']);
+  const textClasses = getStyles(styles, ['.tooltip-inner --text']);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+}
+
+export default TooltipInner;

package/src/components/tooltip/injectTooltip.tsx

@@ -24,77 +24,78 @@ export interface InjectTooltipProps extends OverlayProps {
 export default function injectTooltip<Props>(
   Target: React.ComponentType<Props>,
 ) {
-  const OverlayTooltip = React.forwardRef<ViewRef, Props & InjectTooltipProps>(
-    (props, ref) => {
-      const {
-        tooltip: {
-          title,
-          trigger = 'hover focus',
-          placement = 'top',
-          ...tooltipProps
-        },
-        defaultVisible = false,
-        visible: controlledVisible,
-        onToggle = () => {},
-        ...elementProps
-      } = props;
+  function OverlayTooltip(
+    props: Props & InjectTooltipProps & React.RefAttributes<ViewRef>,
+  ) {
+    const {
+      ref,
+      tooltip: {
+        title,
+        trigger = 'hover focus',
+        placement = 'top',
+        ...tooltipProps
+      },
+      defaultVisible = false,
+      visible: controlledVisible,
+      onToggle = () => {},
+      ...elementProps
+    } = props;
 
-      const offset = normalizeNumber(StyleSheet.value('tooltip-arrow-height'));
+    const offset = normalizeNumber(StyleSheet.value('tooltip-arrow-height'));
 
-      const overlay = useOverlay({
-        defaultVisible,
-        controlledVisible,
-        onToggle,
-        offset,
-        align: 'center',
-        placement,
-        trigger,
-      });
+    const overlay = useOverlay({
+      defaultVisible,
+      controlledVisible,
+      onToggle,
+      offset,
+      align: 'center',
+      placement,
+      trigger,
+    });
 
-      if ('maxWidth' in overlay.content.style) {
-        // @ts-expect-error We remove maxWidth, because maxWidth is set as style on Tooltip component.
-        delete overlay.content.style.maxWidth;
-      }
+    if ('maxWidth' in overlay.content.style) {
+      // @ts-expect-error We remove maxWidth, because maxWidth is set as style on Tooltip component.
+      delete overlay.content.style.maxWidth;
+    }
 
-      return (
-        <>
-          <Target
-            {...(elementProps as Props)}
-            {...overlay.trigger.getProps(elementProps)}
-            ref={concatRefs(ref, overlay.trigger.ref)}
-            {...optional(overlay.visible, {
-              'aria-describedby': overlay.identifier,
-            })}
-          />
-          {overlay.visible && (
-            <Portal name={overlay.identifier}>
-              <BackdropHandler
-                onClose={() => {
-                  overlay.setVisible(false);
-                }}
+    return (
+      <>
+        <Target
+          {...(elementProps as Props)}
+          {...overlay.trigger.getProps(elementProps)}
+          ref={concatRefs(ref, overlay.trigger.ref)}
+          {...optional(overlay.visible, {
+            'aria-describedby': overlay.identifier,
+          })}
+        />
+        {overlay.visible && (
+          <Portal name={overlay.identifier}>
+            <BackdropHandler
+              onClose={() => {
+                overlay.setVisible(false);
+              }}
+            />
+            <Tooltip
+              {...tooltipProps}
+              {...overlay.content.getProps(tooltipProps)}
+              ref={overlay.content.ref}
+              id={overlay.identifier}
+              placement={overlay.placement}
+              style={overlay.content.style}
+              floating
+            >
+              <Tooltip.Arrow
+                {...overlay.arrow.getProps({})}
+                ref={overlay.arrow.ref}
+                style={overlay.arrow.style}
               />
-              <Tooltip
-                {...tooltipProps}
-                {...overlay.content.getProps(tooltipProps)}
-                ref={overlay.content.ref}
-                id={overlay.identifier}
-                placement={overlay.placement}
-                style={overlay.content.style}
-                floating
-              >
-                <Tooltip.Arrow
-                  {...overlay.arrow.getProps({})}
-                  ref={overlay.arrow.ref}
-                  style={overlay.arrow.style}
-                />
-                <Tooltip.Inner>{title}</Tooltip.Inner>
-              </Tooltip>
-            </Portal>
-          )}
-        </>
-      );
-    },
-  );
+              <Tooltip.Inner>{title}</Tooltip.Inner>
+            </Tooltip>
+          </Portal>
+        )}
+      </>
+    );
+  }
 
   OverlayTooltip.displayName = 'Overlay(Tooltip)';
 

package/src/components/type/Blockquote.tsx

@@ -1,45 +1,43 @@
-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 } from '../../utils';
-
-export interface BlockquoteProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  blockquote: css`
-    margin-bottom: $blockquote-margin-y;
-  `,
-  'blockquote --text': css`
-    font-size: $blockquote-font-size;
-  `,
-});
-
-const Blockquote = React.forwardRef<ViewRef, BlockquoteProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['blockquote']);
-
-  const textClasses = getStyles(styles, ['blockquote --text']);
-
-  // Accessiblity role blockquote is only supported on web.
-  const role = Platform.OS === 'web' ? 'blockquote' : undefined;
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      // @ts-expect-error web only role
-      role={role}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </View>
-  );
-});
-
-Blockquote.displayName = 'Blockquote';
-
-export default Blockquote;
+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 } from '../../utils';
+
+export interface BlockquoteProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  blockquote: css`
+    margin-bottom: $blockquote-margin-y;
+  `,
+  'blockquote --text': css`
+    font-size: $blockquote-font-size;
+  `,
+});
+
+function Blockquote(props: BlockquoteProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['blockquote']);
+
+  const textClasses = getStyles(styles, ['blockquote --text']);
+
+  // Accessiblity role blockquote is only supported on web.
+  const role = Platform.OS === 'web' ? 'blockquote' : undefined;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      // @ts-expect-error web only role
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export default Blockquote;

package/src/components/type/Code.tsx

@@ -1,39 +1,37 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Text, { TextProps, TextRef } from '../Text';
-import { getStyles } from '../../utils';
-
-export interface CodeProps extends TextProps {}
-
-const styles = StyleSheet.create({
-  code: css`
-    font-family: $font-family-code;
-    font-size: $code-font-size;
-    color: $code-color;
-    @include platform(web) {
-      word-wrap: break-word;
-    }
-  `,
-});
-
-const Code = React.forwardRef<TextRef, CodeProps>((props, ref) => {
-  const { children, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['code']);
-
-  // Accessiblity role code is only supported on web.
-  const role = Platform.OS === 'web' ? 'code' : undefined;
-
-  return (
-    // @ts-expect-error web only role
-    <Text {...elementProps} ref={ref} role={role} style={[classes, style]}>
-      {children}
-    </Text>
-  );
-});
-
-Code.displayName = 'Code';
-
-export default Code;
+import React from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Text, { TextProps, TextRef } from '../Text';
+import { getStyles } from '../../utils';
+
+export interface CodeProps extends TextProps {}
+
+const styles = StyleSheet.create({
+  code: css`
+    font-family: $font-family-code;
+    font-size: $code-font-size;
+    color: $code-color;
+    @include platform(web) {
+      word-wrap: break-word;
+    }
+  `,
+});
+
+function Code(props: CodeProps & React.RefAttributes<TextRef>) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['code']);
+
+  // Accessiblity role code is only supported on web.
+  const role = Platform.OS === 'web' ? 'code' : undefined;
+
+  return (
+    // @ts-expect-error web only role
+    <Text {...elementProps} ref={ref} role={role} style={[classes, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export default Code;

package/src/components/type/DisplayHeading.tsx

@@ -1,38 +1,38 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Heading from '../Heading';
-import { DISPLAY_FONT_SIZES } from '../../theme/proxies';
-import { getStyles, each } from '../../utils';
-import { TextProps, TextRef } from '../Text';
-
-export interface DisplayHeadingProps extends TextProps {
-  size: keyof typeof DISPLAY_FONT_SIZES;
-}
-
-const styles = StyleSheet.create({
-  ...each(DISPLAY_FONT_SIZES, (size, value) => ({
-    [`.display-${size}`]: css`
-      font-size: ${value};
-      line-height: ${value} * $headings-line-height;
-    `,
-  })),
-});
-
-const DisplayHeading = React.forwardRef<TextRef, DisplayHeadingProps>(
-  (props, ref) => {
-    const { children, size, style, ...elementProps } = props;
-
-    const classes = getStyles(styles, [`.display-${size}`]);
-
-    return (
-      <Heading {...elementProps} ref={ref} size={1} style={[classes, style]}>
-        {children}
-      </Heading>
-    );
-  },
-);
-
-DisplayHeading.displayName = 'Heading';
-
-export default DisplayHeading;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Heading from '../Heading';
+import { DISPLAY_FONT_SIZES } from '../../theme/proxies';
+import { getStyles, each } from '../../utils';
+import { TextProps, TextRef } from '../Text';
+
+export interface DisplayHeadingProps extends TextProps {
+  size: keyof typeof DISPLAY_FONT_SIZES;
+}
+
+const styles = StyleSheet.create({
+  ...each(DISPLAY_FONT_SIZES, (size, value) => ({
+    [`.display-${size}`]: css`
+      font-size: ${value};
+      line-height: ${value} * $headings-line-height;
+    `,
+  })),
+});
+
+function DisplayHeading(
+  props: DisplayHeadingProps & React.RefAttributes<TextRef>,
+) {
+  const { ref, children, size, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, [`.display-${size}`]);
+
+  return (
+    <Heading {...elementProps} ref={ref} size={1} style={[classes, style]}>
+      {children}
+    </Heading>
+  );
+}
+
+DisplayHeading.displayName = 'Heading';
+
+export default DisplayHeading;