bootstrap-rn 0.4.8 → 0.4.9

package/src/components/Label.tsx

@@ -1,34 +1,32 @@
-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;
+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;
+}
+
+function Label(props: LabelProps & React.RefAttributes<ViewRef>) {
+  const { ref, 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>
+  );
+}
+
+export default Label;

package/src/components/Link.tsx

@@ -1,101 +1,104 @@
-import React from 'react';
-import type { MouseEvent } from 'react-native';
-import StyleSheet from '../style/StyleSheet';
-import css from '../style/css';
-import Text, { TextProps, TextRef } from './Text';
-import { getStyles } from '../utils';
-import useModifier from '../hooks/useModifier';
-import useAction, { UseActionProps } from '../hooks/useAction';
-import useMedia from '../hooks/useMedia';
-import useStyle from '../hooks/useStyle';
-import useInteractionState from '../hooks/useInteractionState';
-import { getRole } from './Pressable';
-import { UseActionableProps } from '../types';
-
-// We need to omit onPress here, because onPress can be null on UseActionableProps, but cannot be null on TextProps.
-export interface LinkProps
-  extends Omit<UseActionProps, 'onPress'>,
-    Omit<UseActionableProps, 'onPress'>,
-    TextProps {
-  onMouseEnter?: (event?: MouseEvent) => void;
-  onMouseLeave?: (event?: MouseEvent) => void;
-}
-
-const styles = StyleSheet.create({
-  link: css`
-    color: $link-color;
-    text-decoration-color: $link-color; // added for bootstrap-rn
-    text-decoration-line: $link-decoration;
-
-    &:hover {
-      color: $link-hover-color;
-      text-decoration-color: $link-hover-color; // added for bootstrap-rn
-      text-decoration-line: $link-hover-decoration;
-    }
-  `,
-});
-
-const Link = React.forwardRef<TextRef, LinkProps>((props, ref) => {
-  const [modifierProps, modifierRef] = useModifier('useActionable', props, ref);
-  const [actionProps, actionRef] = useAction(modifierProps, modifierRef);
-
-  const {
-    children,
-    // Filter hover handlers, because Text component does not have hover
-    // handlers. Instead we use mouse enter/leave handlers.
-    // @ts-expect-error see comment above
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onHoverIn,
-    // @ts-expect-error see comment above
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onHoverOut,
-    onMouseEnter: handleMouseEnter = () => {},
-    onMouseLeave: handleMouseLeave = () => {},
-    style,
-    ...elementProps
-  } = actionProps;
-
-  const media = useMedia();
-
-  const classes = getStyles(styles, ['link']);
-
-  const resolveStyle = useStyle([classes, style]);
-
-  const {
-    interaction,
-    interactionProps: {
-      onHoverIn: handleMouseEnterInteraction,
-      onHoverOut: handleMouseLeaveInteraction,
-      ...interactionProps
-    },
-  } = useInteractionState(elementProps);
-
-  return (
-    <Text
-      {...elementProps}
-      {...interactionProps}
-      // @ts-expect-error web only event
-      onMouseEnter={(event: MouseEvent) => {
-        handleMouseEnter(event);
-        handleMouseEnterInteraction(event);
-      }}
-      onMouseLeave={(event: MouseEvent) => {
-        handleMouseLeave(event);
-        handleMouseLeaveInteraction(event);
-      }}
-      ref={actionRef}
-      role={getRole(actionProps)}
-      accessible
-      style={resolveStyle({
-        media,
-        interaction,
-      })}
-    >
-      {children}
-    </Text>
-  );
-});
-
-Link.displayName = 'Link';
-
-export default Link;
+import React from 'react';
+import type { MouseEvent } from 'react-native';
+import StyleSheet from '../style/StyleSheet';
+import css from '../style/css';
+import Text, { TextProps, TextRef } from './Text';
+import { getStyles } from '../utils';
+import useModifier from '../hooks/useModifier';
+import useAction, { UseActionProps } from '../hooks/useAction';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import useInteractionState from '../hooks/useInteractionState';
+import { getRole } from './Pressable';
+import { UseActionableProps } from '../types';
+
+// We need to omit onPress here, because onPress can be null on UseActionableProps, but cannot be null on TextProps.
+export interface LinkProps
+  extends
+    Omit<UseActionProps, 'onPress'>,
+    Omit<UseActionableProps, 'onPress'>,
+    TextProps {
+  onMouseEnter?: (event?: MouseEvent) => void;
+  onMouseLeave?: (event?: MouseEvent) => void;
+}
+
+const styles = StyleSheet.create({
+  link: css`
+    color: $link-color;
+    text-decoration-color: $link-color; // added for bootstrap-rn
+    text-decoration-line: $link-decoration;
+
+    &:hover {
+      color: $link-hover-color;
+      text-decoration-color: $link-hover-color; // added for bootstrap-rn
+      text-decoration-line: $link-hover-decoration;
+    }
+  `,
+});
+
+function Link({ ref, ...props }: LinkProps & React.RefAttributes<TextRef>) {
+  const [modifierProps, modifierRef] = useModifier(
+    'useActionable',
+    props,
+    ref ?? null,
+  );
+  const [actionProps, actionRef] = useAction(modifierProps, modifierRef);
+
+  const {
+    children,
+    // Filter hover handlers, because Text component does not have hover
+    // handlers. Instead we use mouse enter/leave handlers.
+    // @ts-expect-error see comment above
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onHoverIn,
+    // @ts-expect-error see comment above
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onHoverOut,
+    onMouseEnter: handleMouseEnter = () => {},
+    onMouseLeave: handleMouseLeave = () => {},
+    style,
+    ...elementProps
+  } = actionProps;
+
+  const media = useMedia();
+
+  const classes = getStyles(styles, ['link']);
+
+  const resolveStyle = useStyle([classes, style]);
+
+  const {
+    interaction,
+    interactionProps: {
+      onHoverIn: handleMouseEnterInteraction,
+      onHoverOut: handleMouseLeaveInteraction,
+      ...interactionProps
+    },
+  } = useInteractionState(elementProps);
+
+  return (
+    <Text
+      {...elementProps}
+      {...interactionProps}
+      // @ts-expect-error web only event
+      onMouseEnter={(event: MouseEvent) => {
+        handleMouseEnter(event);
+        handleMouseEnterInteraction(event);
+      }}
+      onMouseLeave={(event: MouseEvent) => {
+        handleMouseLeave(event);
+        handleMouseLeaveInteraction(event);
+      }}
+      ref={actionRef}
+      role={getRole(actionProps)}
+      accessible
+      style={resolveStyle({
+        media,
+        interaction,
+      })}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export default Link;

package/src/components/Pressable.tsx

@@ -1,167 +1,167 @@
-import React, { useContext, useMemo } from 'react';
-import {
-  Text,
-  I18nManager,
-  Pressable as BasePressable,
-  PressableProps as BasePressableProps,
-  View as BaseView,
-} from 'react-native';
-import TextStyleContext from '../style/TextStyleContext';
-import useModifier from '../hooks/useModifier';
-import useAction, { UseActionProps } from '../hooks/useAction';
-import useMedia from '../hooks/useMedia';
-import useStyle from '../hooks/useStyle';
-import useInteractionState from '../hooks/useInteractionState';
-import Caret, { CaretProps } from './Caret';
-import type {
-  ExtendedViewStyle,
-  ExtendedTextStyle,
-  StyleProp,
-  StyleName,
-  UseActionableProps,
-} from '../types';
-
-export type PressableRef = BaseView;
-
-type CaretTypes = boolean | CaretProps;
-
-export interface PressableProps
-  extends UseActionProps,
-    UseActionableProps,
-    Omit<BasePressableProps, 'children' | 'style'> {
-  children?: React.ReactNode;
-  caret?: CaretTypes;
-  active?: boolean;
-  style?: StyleProp<ExtendedViewStyle>;
-  activeStyle?: StyleProp<ExtendedViewStyle>;
-  textStyle?: StyleProp<ExtendedTextStyle>;
-  activeTextStyle?: StyleProp<ExtendedTextStyle>;
-  styleName?: StyleName;
-}
-
-// One of the following should be set for aria support:
-// 1) role
-// 2) aria-label + aria-hint
-// 3) accessibilityActions + onAccessibilityAction
-export const getRole = (
-  props: Pick<PressableProps, 'role' | 'accessibilityActions' | 'aria-label'>,
-) => {
-  const { role, accessibilityActions } = props;
-
-  if (role) {
-    return role;
-  }
-
-  if (props['aria-label'] || accessibilityActions) {
-    return undefined;
-  }
-
-  return 'button';
-};
-
-const applyCaret = (
-  children: React.ReactNode,
-  caret?: CaretTypes,
-): React.ReactNode => {
-  if (!caret) {
-    return children;
-  }
-
-  const options = caret === true ? {} : caret;
-
-  const element = <Caret color={options.color} direction={options.direction} />;
-  const space = <Text> </Text>;
-
-  const isLeftCaret =
-    options.direction === (I18nManager.isRTL ? 'end' : 'start');
-
-  if (isLeftCaret) {
-    return (
-      <>
-        {element}
-        {space}
-        {children}
-      </>
-    );
-  }
-
-  return (
-    <>
-      {children}
-      {space}
-      {element}
-    </>
-  );
-};
-
-const Pressable = React.forwardRef<PressableRef, PressableProps>(
-  (props, ref) => {
-    const [modifierProps, modifierRef] = useModifier(
-      'useActionable',
-      props,
-      ref,
-    );
-    const [actionProps, actionRef] = useAction(modifierProps, modifierRef);
-
-    const {
-      children,
-      caret = false,
-      active = false,
-      style,
-      activeStyle,
-      textStyle,
-      activeTextStyle,
-      styleName,
-      ...elementProps
-    } = actionProps;
-
-    const media = useMedia();
-    const context = useContext(TextStyleContext);
-
-    const resolveStyle = useStyle(style, styleName);
-    const resolveActiveStyle = useStyle(active && activeStyle);
-    const resolveTextStyle = useStyle([context && context.style, textStyle]);
-    const resolveActiveTextStyle = useStyle(active && activeTextStyle);
-
-    const { interaction, interactionProps } = useInteractionState(elementProps);
-
-    const hasTextStyle = (context && context.style) || textStyle;
-    const wrappedChildren = applyCaret(children, caret);
-
-    const contextValue = useMemo(
-      () => ({
-        style: [
-          resolveTextStyle({ media, interaction }),
-          resolveActiveTextStyle({ media, interaction }),
-        ],
-        hasAncestor: context && context.hasTextAncestor,
-      }),
-      [resolveTextStyle, resolveActiveTextStyle, media, interaction],
-    );
-
-    return (
-      <BasePressable
-        {...elementProps}
-        {...interactionProps}
-        ref={actionRef}
-        role={getRole(actionProps)}
-        style={[
-          resolveStyle({ media, interaction }),
-          resolveActiveStyle({ media, interaction }),
-        ]}
-      >
-        {hasTextStyle ? (
-          <TextStyleContext.Provider value={contextValue}>
-            {wrappedChildren}
-          </TextStyleContext.Provider>
-        ) : (
-          wrappedChildren
-        )}
-      </BasePressable>
-    );
-  },
-);
-
-Pressable.displayName = 'Pressable';
-
-export default Pressable;
+import React, { useContext, useMemo } from 'react';
+import {
+  Text,
+  I18nManager,
+  Pressable as BasePressable,
+  PressableProps as BasePressableProps,
+  View as BaseView,
+} from 'react-native';
+import TextStyleContext from '../style/TextStyleContext';
+import useModifier from '../hooks/useModifier';
+import useAction, { UseActionProps } from '../hooks/useAction';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import useInteractionState from '../hooks/useInteractionState';
+import Caret, { CaretProps } from './Caret';
+import type {
+  ExtendedViewStyle,
+  ExtendedTextStyle,
+  StyleProp,
+  StyleName,
+  UseActionableProps,
+} from '../types';
+
+export type PressableRef = BaseView;
+
+type CaretTypes = boolean | CaretProps;
+
+export interface PressableProps
+  extends
+    UseActionProps,
+    UseActionableProps,
+    Omit<BasePressableProps, 'children' | 'style'> {
+  children?: React.ReactNode;
+  caret?: CaretTypes;
+  active?: boolean;
+  style?: StyleProp<ExtendedViewStyle>;
+  activeStyle?: StyleProp<ExtendedViewStyle>;
+  textStyle?: StyleProp<ExtendedTextStyle>;
+  activeTextStyle?: StyleProp<ExtendedTextStyle>;
+  styleName?: StyleName;
+}
+
+// One of the following should be set for aria support:
+// 1) role
+// 2) aria-label + aria-hint
+// 3) accessibilityActions + onAccessibilityAction
+export const getRole = (
+  props: Pick<PressableProps, 'role' | 'accessibilityActions' | 'aria-label'>,
+) => {
+  const { role, accessibilityActions } = props;
+
+  if (role) {
+    return role;
+  }
+
+  if (props['aria-label'] || accessibilityActions) {
+    return undefined;
+  }
+
+  return 'button';
+};
+
+const applyCaret = (
+  children: React.ReactNode,
+  caret?: CaretTypes,
+): React.ReactNode => {
+  if (!caret) {
+    return children;
+  }
+
+  const options = caret === true ? {} : caret;
+
+  const element = <Caret color={options.color} direction={options.direction} />;
+  const space = <Text> </Text>;
+
+  const isLeftCaret =
+    options.direction === (I18nManager.isRTL ? 'end' : 'start');
+
+  if (isLeftCaret) {
+    return (
+      <>
+        {element}
+        {space}
+        {children}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {children}
+      {space}
+      {element}
+    </>
+  );
+};
+
+function Pressable(
+  allProps: PressableProps & React.RefAttributes<PressableRef>,
+) {
+  const { ref, ...props } = allProps;
+  const [modifierProps, modifierRef] = useModifier(
+    'useActionable',
+    props,
+    ref ?? null,
+  );
+  const [actionProps, actionRef] = useAction(modifierProps, modifierRef);
+
+  const {
+    children,
+    caret = false,
+    active = false,
+    style,
+    activeStyle,
+    textStyle,
+    activeTextStyle,
+    styleName,
+    ...elementProps
+  } = actionProps;
+
+  const media = useMedia();
+  const context = useContext(TextStyleContext);
+
+  const resolveStyle = useStyle(style, styleName);
+  const resolveActiveStyle = useStyle(active && activeStyle);
+  const resolveTextStyle = useStyle([context && context.style, textStyle]);
+  const resolveActiveTextStyle = useStyle(active && activeTextStyle);
+
+  const { interaction, interactionProps } = useInteractionState(elementProps);
+
+  const hasTextStyle = (context && context.style) || textStyle;
+  const wrappedChildren = applyCaret(children, caret);
+
+  const contextValue = useMemo(
+    () => ({
+      style: [
+        resolveTextStyle({ media, interaction }),
+        resolveActiveTextStyle({ media, interaction }),
+      ],
+      hasAncestor: context && context.hasTextAncestor,
+    }),
+    [resolveTextStyle, resolveActiveTextStyle, media, interaction],
+  );
+
+  return (
+    <BasePressable
+      {...elementProps}
+      {...interactionProps}
+      ref={actionRef}
+      role={getRole(actionProps)}
+      style={[
+        resolveStyle({ media, interaction }),
+        resolveActiveStyle({ media, interaction }),
+      ]}
+    >
+      {hasTextStyle ? (
+        <TextStyleContext.Provider value={contextValue}>
+          {wrappedChildren}
+        </TextStyleContext.Provider>
+      ) : (
+        wrappedChildren
+      )}
+    </BasePressable>
+  );
+}
+
+export default Pressable;