bootstrap-rn 0.4.8 → 0.4.9

package/src/components/ScrollView.tsx

@@ -1,75 +1,76 @@
-import React, { useContext, useMemo } from 'react';
-import {
-  ScrollView as BaseScrollView,
-  ScrollViewProps as BaseScrollViewProps,
-} from 'react-native';
-import TextStyleContext from '../style/TextStyleContext';
-import useMedia from '../hooks/useMedia';
-import useStyle from '../hooks/useStyle';
-import type {
-  StyleName,
-  StyleProp,
-  ExtendedTextStyle,
-  ExtendedViewStyle,
-} from '../types';
-
-export type ScrollViewRef = BaseScrollView;
-
-export interface ScrollViewProps
-  extends Omit<BaseScrollViewProps, 'style' | 'contentContainerStyle'> {
-  style?: StyleProp<ExtendedViewStyle>;
-  contentContainerStyle?: StyleProp<ExtendedViewStyle>;
-  textStyle?: StyleProp<ExtendedTextStyle>;
-  styleName?: StyleName;
-}
-
-const ScrollView = React.forwardRef<ScrollViewRef, ScrollViewProps>(
-  (props, ref) => {
-    const {
-      children,
-      contentContainerStyle,
-      style,
-      textStyle,
-      styleName,
-      ...elementProps
-    } = props;
-
-    const media = useMedia();
-    const context = useContext(TextStyleContext);
-
-    const resolveContentContainerStyle = useStyle(contentContainerStyle);
-    const resolveStyle = useStyle(style, styleName);
-    const resolveTextStyle = useStyle([context && context.style, textStyle]);
-
-    const hasTextStyle = (context && context.style) || textStyle;
-
-    const contextValue = useMemo(
-      () => ({
-        style: resolveTextStyle({ media }),
-        hasAncestor: context && context.hasTextAncestor,
-      }),
-      [resolveTextStyle, context, media],
-    );
-
-    return (
-      <BaseScrollView
-        {...elementProps}
-        ref={ref}
-        contentContainerStyle={resolveContentContainerStyle({ media })}
-        style={resolveStyle({ media })}
-      >
-        {hasTextStyle ? (
-          <TextStyleContext.Provider value={contextValue}>
-            {children}
-          </TextStyleContext.Provider>
-        ) : (
-          children
-        )}
-      </BaseScrollView>
-    );
-  },
-);
-
-ScrollView.displayName = 'ScrollView';
-
-export default ScrollView;
+import React, { useContext, useMemo } from 'react';
+import {
+  ScrollView as BaseScrollView,
+  ScrollViewProps as BaseScrollViewProps,
+} from 'react-native';
+import TextStyleContext from '../style/TextStyleContext';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import type {
+  StyleName,
+  StyleProp,
+  ExtendedTextStyle,
+  ExtendedViewStyle,
+} from '../types';
+
+export type ScrollViewRef = BaseScrollView;
+
+export interface ScrollViewProps extends Omit<
+  BaseScrollViewProps,
+  'style' | 'contentContainerStyle'
+> {
+  style?: StyleProp<ExtendedViewStyle>;
+  contentContainerStyle?: StyleProp<ExtendedViewStyle>;
+  textStyle?: StyleProp<ExtendedTextStyle>;
+  styleName?: StyleName;
+}
+
+function ScrollView(
+  props: ScrollViewProps & React.RefAttributes<ScrollViewRef>,
+) {
+  const {
+    ref,
+    children,
+    contentContainerStyle,
+    style,
+    textStyle,
+    styleName,
+    ...elementProps
+  } = props;
+
+  const media = useMedia();
+  const context = useContext(TextStyleContext);
+
+  const resolveContentContainerStyle = useStyle(contentContainerStyle);
+  const resolveStyle = useStyle(style, styleName);
+  const resolveTextStyle = useStyle([context && context.style, textStyle]);
+
+  const hasTextStyle = (context && context.style) || textStyle;
+
+  const contextValue = useMemo(
+    () => ({
+      style: resolveTextStyle({ media }),
+      hasAncestor: context && context.hasTextAncestor,
+    }),
+    [resolveTextStyle, context, media],
+  );
+
+  return (
+    <BaseScrollView
+      {...elementProps}
+      ref={ref}
+      contentContainerStyle={resolveContentContainerStyle({ media })}
+      style={resolveStyle({ media })}
+    >
+      {hasTextStyle ? (
+        <TextStyleContext.Provider value={contextValue}>
+          {children}
+        </TextStyleContext.Provider>
+      ) : (
+        children
+      )}
+    </BaseScrollView>
+  );
+}
+
+export default ScrollView;

package/src/components/Text.tsx

@@ -59,8 +59,9 @@ const getStyleName = (styleName?: StyleName, color?: ThemeColors) => {
   return styleName ? `text-${color} ${styleName}` : `text-${color}`;
 };
 
-const Text = React.forwardRef<TextRef, TextProps>((props, ref) => {
+function Text(props: TextProps & React.RefAttributes<TextRef>) {
   const {
+    ref,
     color, // will be deprecated soon
     bold = false,
     italic = false,
@@ -112,8 +113,6 @@ const Text = React.forwardRef<TextRef, TextProps>((props, ref) => {
       {element}
     </TextStyleContext.Provider>
   );
-});
-
-Text.displayName = 'Text';
+}
 
 export default Text;

package/src/components/TextInput.tsx

@@ -23,44 +23,41 @@ export interface TextInputProps extends Omit<BaseTextInputProps, 'style'> {
   rows?: number;
 }
 
-const TextInput = React.forwardRef<TextInputRef, TextInputProps>(
-  (props, ref) => {
-    const {
-      onFocus = () => {},
-      onBlur = () => {},
-      autoFocus = false,
-      style,
-      styleName,
-      ...elementProps
-    } = props;
-
-    const [focused, setFocused] = useState(autoFocus);
-
-    const media = useMedia();
-    const resolveStyle = useStyle(style, styleName);
-
-    return (
-      <BaseTextInput
-        {...elementProps}
-        ref={ref}
-        onFocus={(event) => {
-          setFocused(true);
-          onFocus(event);
-        }}
-        onBlur={(event) => {
-          setFocused(false);
-          onBlur(event);
-        }}
-        autoFocus={autoFocus}
-        style={resolveStyle({
-          media,
-          interaction: { focus: focused, focusVisible: focused },
-        })}
-      />
-    );
-  },
-);
-
-TextInput.displayName = 'TextInput';
+function TextInput(props: TextInputProps & React.RefAttributes<TextInputRef>) {
+  const {
+    ref,
+    onFocus = () => {},
+    onBlur = () => {},
+    autoFocus = false,
+    style,
+    styleName,
+    ...elementProps
+  } = props;
+
+  const [focused, setFocused] = useState(autoFocus);
+
+  const media = useMedia();
+  const resolveStyle = useStyle(style, styleName);
+
+  return (
+    <BaseTextInput
+      {...elementProps}
+      ref={ref}
+      onFocus={(event) => {
+        setFocused(true);
+        onFocus(event);
+      }}
+      onBlur={(event) => {
+        setFocused(false);
+        onBlur(event);
+      }}
+      autoFocus={autoFocus}
+      style={resolveStyle({
+        media,
+        interaction: { focus: focused, focusVisible: focused },
+      })}
+    />
+  );
+}
 
 export default TextInput;

package/src/components/View.tsx

@@ -18,8 +18,8 @@ export interface ViewProps extends Omit<BaseViewProps, 'style'> {
   styleName?: StyleName;
 }
 
-const View = React.forwardRef<ViewRef, ViewProps>((props, ref) => {
-  const { children, style, textStyle, styleName, ...elementProps } = props;
+function View(props: ViewProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, styleName, ...elementProps } = props;
 
   const media = useMedia();
   const context = useContext(TextStyleContext);
@@ -48,8 +48,6 @@ const View = React.forwardRef<ViewRef, ViewProps>((props, ref) => {
       )}
     </BaseView>
   );
-});
-
-View.displayName = 'View';
+}
 
 export default View;

package/src/components/alert/Alert.tsx

@@ -1,80 +1,79 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles, each } from '../../utils';
-import { THEME_COLORS } from '../../theme/proxies';
-import { shiftColor } from '../../theme/functions';
-import type { ThemeVariables } from '../../types';
-
-export interface AlertProps extends ViewProps {
-  color?: keyof typeof THEME_COLORS;
-  dismissible?: boolean;
-}
-
-const styles = StyleSheet.create({
-  '.alert': css`
-    position: relative;
-    padding: $alert-padding-y $alert-padding-x;
-    margin-bottom: $alert-margin-bottom;
-    background-color: transparent;
-    border: $alert-border-width solid transparent;
-    border-radius: $alert-border-radius;
-  `,
-  ...each(THEME_COLORS, (state, value) => ({
-    [`.alert-${state}`]: css`
-      background-color: ${shiftColor(
-        value,
-        (t: ThemeVariables) => t['alert-bg-scale'],
-      )};
-      border-color: ${shiftColor(
-        value,
-        (t: ThemeVariables) => t['alert-border-scale'],
-      )};
-    `,
-    [`.alert-${state} --text`]: css`
-      color: ${shiftColor(
-        value,
-        (t: ThemeVariables) => t['alert-color-scale'],
-      )};
-    `,
-  })),
-  /* '.alert-dismissible': {
-    // TODO
-  }, */
-});
-
-const Alert = React.forwardRef<ViewRef, AlertProps>((props, ref) => {
-  const {
-    children,
-    color = 'primary',
-    dismissible = false,
-    style,
-    textStyle,
-    ...elementProps
-  } = props;
-
-  const classes = getStyles(styles, [
-    '.alert',
-    `.alert-${color}`,
-    dismissible && '.alert-dismissible',
-  ]);
-
-  const textClasses = getStyles(styles, [`.alert-${color} --text`]);
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      role="alert"
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </View>
-  );
-});
-
-Alert.displayName = 'Alert';
-
-export default Alert;
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles, each } from '../../utils';
+import { THEME_COLORS } from '../../theme/proxies';
+import { shiftColor } from '../../theme/functions';
+import type { ThemeVariables } from '../../types';
+
+export interface AlertProps extends ViewProps {
+  color?: keyof typeof THEME_COLORS;
+  dismissible?: boolean;
+}
+
+const styles = StyleSheet.create({
+  '.alert': css`
+    position: relative;
+    padding: $alert-padding-y $alert-padding-x;
+    margin-bottom: $alert-margin-bottom;
+    background-color: transparent;
+    border: $alert-border-width solid transparent;
+    border-radius: $alert-border-radius;
+  `,
+  ...each(THEME_COLORS, (state, value) => ({
+    [`.alert-${state}`]: css`
+      background-color: ${shiftColor(
+        value,
+        (t: ThemeVariables) => t['alert-bg-scale'],
+      )};
+      border-color: ${shiftColor(
+        value,
+        (t: ThemeVariables) => t['alert-border-scale'],
+      )};
+    `,
+    [`.alert-${state} --text`]: css`
+      color: ${shiftColor(
+        value,
+        (t: ThemeVariables) => t['alert-color-scale'],
+      )};
+    `,
+  })),
+  /* '.alert-dismissible': {
+    // TODO
+  }, */
+});
+
+function Alert(props: AlertProps & React.RefAttributes<ViewRef>) {
+  const {
+    ref,
+    children,
+    color = 'primary',
+    dismissible = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const classes = getStyles(styles, [
+    '.alert',
+    `.alert-${color}`,
+    dismissible && '.alert-dismissible',
+  ]);
+
+  const textClasses = getStyles(styles, [`.alert-${color} --text`]);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role="alert"
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export default Alert;

package/src/components/badge/Badge.tsx

@@ -1,43 +1,41 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import Text from '../Text';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-
-export interface BadgeProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.badge': css`
-    // display: inline-block;
-    padding: $badge-padding-y $badge-padding-x;
-    border-radius: $badge-border-radius;
-    // @include gradient-bg();
-  `,
-  '.badge --text': css`
-    font-size: $badge-font-size;
-    font-weight: $badge-font-weight;
-    line-height: $badge-font-size * 1;
-    color: $badge-color;
-    text-align: center;
-    // white-space: nowrap;
-    vertical-align: middle; // baseline;
-  `,
-});
-
-const Badge = React.forwardRef<ViewRef, BadgeProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.badge']);
-  const textClasses = getStyles(styles, ['.badge --text']);
-
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      <Text style={[textClasses, textStyle]}>{children}</Text>
-    </View>
-  );
-});
-
-Badge.displayName = 'Badge';
-
-export default Badge;
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import Text from '../Text';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+export interface BadgeProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.badge': css`
+    // display: inline-block;
+    padding: $badge-padding-y $badge-padding-x;
+    border-radius: $badge-border-radius;
+    // @include gradient-bg();
+  `,
+  '.badge --text': css`
+    font-size: $badge-font-size;
+    font-weight: $badge-font-weight;
+    line-height: $badge-font-size * 1;
+    color: $badge-color;
+    text-align: center;
+    // white-space: nowrap;
+    vertical-align: middle; // baseline;
+  `,
+});
+
+function Badge(props: BadgeProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.badge']);
+  const textClasses = getStyles(styles, ['.badge --text']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+}
+
+export default Badge;

package/src/components/breadcrumb/Breadcrumb.tsx

@@ -1,56 +1,54 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import View, { ViewProps, ViewRef } from '../View';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-import useList from '../../hooks/useList';
-import BreadcrumbItem from './BreadcrumbItem';
-
-export interface BreadcrumbProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.breadcrumb': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    flex-wrap: wrap;
-    padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-    margin-bottom: $breadcrumb-margin-bottom;
-    // list-style: none;
-    background-color: $breadcrumb-bg;
-    border-radius: $breadcrumb-border-radius;
-  `,
-  '.breadcrumb --text': css`
-    font-size: $breadcrumb-font-size;
-    line-height: $breadcrumb-font-size * $line-height-base; // added for bootstrap-rn
-  `,
-});
-
-const Breadcrumb = React.forwardRef<ViewRef, BreadcrumbProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const list = useList(children);
-
-  const classes = getStyles(styles, ['.breadcrumb']);
-  const textClasses = getStyles(styles, ['.breadcrumb --text']);
-
-  const role = Platform.OS === 'web' ? 'list' : undefined;
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      role={role}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {list}
-    </View>
-  );
-});
-
-Breadcrumb.displayName = 'Breadcrumb';
-
-export default Object.assign(Breadcrumb, {
-  Item: BreadcrumbItem,
-});
+import React from 'react';
+import { Platform } from 'react-native';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import useList from '../../hooks/useList';
+import BreadcrumbItem from './BreadcrumbItem';
+
+export interface BreadcrumbProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.breadcrumb': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap;
+    padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+    margin-bottom: $breadcrumb-margin-bottom;
+    // list-style: none;
+    background-color: $breadcrumb-bg;
+    border-radius: $breadcrumb-border-radius;
+  `,
+  '.breadcrumb --text': css`
+    font-size: $breadcrumb-font-size;
+    line-height: $breadcrumb-font-size * $line-height-base; // added for bootstrap-rn
+  `,
+});
+
+function Breadcrumb(props: BreadcrumbProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const list = useList(children);
+
+  const classes = getStyles(styles, ['.breadcrumb']);
+  const textClasses = getStyles(styles, ['.breadcrumb --text']);
+
+  const role = Platform.OS === 'web' ? 'list' : undefined;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {list}
+    </View>
+  );
+}
+
+export default Object.assign(Breadcrumb, {
+  Item: BreadcrumbItem,
+});