bootstrap-rn 0.4.7 → 0.4.9

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,
+});

package/src/components/breadcrumb/BreadcrumbItem.tsx

@@ -1,81 +1,80 @@
-import React from 'react';
-import { Platform, I18nManager } from 'react-native';
-import View, { ViewProps, ViewRef } from '../View';
-import Text from '../Text';
-import useForcedContext from '../../hooks/useForcedContext';
-import ListContext from '../helpers/ListContext';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles, optional } from '../../utils';
-import { ExtendedTextStyle, StyleProp } from '../../types';
-
-export interface BreadcrumbItemProps extends ViewProps {
-  active?: boolean;
-  dividerStyle?: StyleProp<ExtendedTextStyle>;
-}
-
-const styles = StyleSheet.create({
-  '.breadcrumb-item + .breadcrumb-item': css`
-    flex-direction: row; // added for bootstrap-rn
-    padding-left: $breadcrumb-item-padding-x;
-  `,
-  '.breadcrumb-item + .breadcrumb-item::before': css`
-    // float: left; // Suppress inline spacings and underlining of the separator
-    padding-right: $breadcrumb-item-padding-x;
-    color: $breadcrumb-divider-color;
-  `,
-  '.breadcrumb-item.active --text': css`
-    color: $breadcrumb-active-color;
-  `,
-});
-
-const BreadcrumbItem = React.forwardRef<ViewRef, BreadcrumbItemProps>(
-  (props, ref) => {
-    const {
-      children,
-      active = false,
-      style,
-      dividerStyle,
-      textStyle,
-      ...elementProps
-    } = props;
-
-    const { first } = useForcedContext(ListContext);
-
-    const classes = getStyles(styles, [
-      !first && '.breadcrumb-item + .breadcrumb-item',
-    ]);
-    const textClasses = getStyles(styles, [
-      active && '.breadcrumb-item.active --text',
-    ]);
-    const dividerClasses = getStyles(styles, [
-      '.breadcrumb-item + .breadcrumb-item::before',
-    ]);
-
-    const role = Platform.OS === 'web' ? 'listitem' : undefined;
-
-    return (
-      <View
-        {...elementProps}
-        ref={ref}
-        role={role}
-        {...optional(active, { 'aria-current': 'page' })}
-        style={[classes, style]}
-        textStyle={[textClasses, textStyle]}
-      >
-        {!first && (
-          <Text style={[dividerClasses, dividerStyle]}>
-            {I18nManager.isRTL
-              ? StyleSheet.value('breadcrumb-divider-flipped')
-              : StyleSheet.value('breadcrumb-divider')}
-          </Text>
-        )}
-        {children}
-      </View>
-    );
-  },
-);
-
-BreadcrumbItem.displayName = 'BreadcrumbItem';
-
-export default BreadcrumbItem;
+import React from 'react';
+import { Platform, I18nManager } from 'react-native';
+import View, { ViewProps, ViewRef } from '../View';
+import Text from '../Text';
+import useForcedContext from '../../hooks/useForcedContext';
+import ListContext from '../helpers/ListContext';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles, optional } from '../../utils';
+import { ExtendedTextStyle, StyleProp } from '../../types';
+
+export interface BreadcrumbItemProps extends ViewProps {
+  active?: boolean;
+  dividerStyle?: StyleProp<ExtendedTextStyle>;
+}
+
+const styles = StyleSheet.create({
+  '.breadcrumb-item + .breadcrumb-item': css`
+    flex-direction: row; // added for bootstrap-rn
+    padding-left: $breadcrumb-item-padding-x;
+  `,
+  '.breadcrumb-item + .breadcrumb-item::before': css`
+    // float: left; // Suppress inline spacings and underlining of the separator
+    padding-right: $breadcrumb-item-padding-x;
+    color: $breadcrumb-divider-color;
+  `,
+  '.breadcrumb-item.active --text': css`
+    color: $breadcrumb-active-color;
+  `,
+});
+
+function BreadcrumbItem(
+  props: BreadcrumbItemProps & React.RefAttributes<ViewRef>,
+) {
+  const {
+    ref,
+    children,
+    active = false,
+    style,
+    dividerStyle,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const { first } = useForcedContext(ListContext);
+
+  const classes = getStyles(styles, [
+    !first && '.breadcrumb-item + .breadcrumb-item',
+  ]);
+  const textClasses = getStyles(styles, [
+    active && '.breadcrumb-item.active --text',
+  ]);
+  const dividerClasses = getStyles(styles, [
+    '.breadcrumb-item + .breadcrumb-item::before',
+  ]);
+
+  const role = Platform.OS === 'web' ? 'listitem' : undefined;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      {...optional(active, { 'aria-current': 'page' })}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {!first && (
+        <Text style={[dividerClasses, dividerStyle]}>
+          {I18nManager.isRTL
+            ? StyleSheet.value('breadcrumb-divider-flipped')
+            : StyleSheet.value('breadcrumb-divider')}
+        </Text>
+      )}
+      {children}
+    </View>
+  );
+}
+
+export default BreadcrumbItem;

package/src/components/button-group/ButtonGroup.tsx

@@ -1,46 +1,42 @@
-import React, { useMemo } 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 ButtonGroupContext from './ButtonGroupContext';
-import useList from '../../hooks/useList';
-
-export interface ButtonGroupProps extends ViewProps {
-  size?: 'lg' | 'sm';
-}
-
-const styles = StyleSheet.create({
-  '.btn-group': css`
-    flex-direction: row; // added for bootstrap-rn
-    border-radius: $btn-border-radius;
-  `,
-});
-
-const ButtonGroup = React.forwardRef<ViewRef, ButtonGroupProps>(
-  (props, ref) => {
-    const { children, size, style, ...elementProps } = props;
-
-    const list = useList(children);
-
-    const classes = getStyles(styles, ['.btn-group']);
-
-    // Accessiblity role tabpanel is only supported on web.
-    const role = Platform.OS === 'web' ? 'group' : undefined;
-
-    const contextValue = useMemo(() => ({ size }), [size]);
-
-    return (
-      <View {...elementProps} ref={ref} role={role} style={[classes, style]}>
-        <ButtonGroupContext.Provider value={contextValue}>
-          {list}
-        </ButtonGroupContext.Provider>
-      </View>
-    );
-  },
-);
-
-ButtonGroup.displayName = 'ButtonGroup';
-
-export default ButtonGroup;
+import React, { useMemo } 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 ButtonGroupContext from './ButtonGroupContext';
+import useList from '../../hooks/useList';
+
+export interface ButtonGroupProps extends ViewProps {
+  size?: 'lg' | 'sm';
+}
+
+const styles = StyleSheet.create({
+  '.btn-group': css`
+    flex-direction: row; // added for bootstrap-rn
+    border-radius: $btn-border-radius;
+  `,
+});
+
+function ButtonGroup(props: ButtonGroupProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, size, style, ...elementProps } = props;
+
+  const list = useList(children);
+
+  const classes = getStyles(styles, ['.btn-group']);
+
+  // Accessiblity role tabpanel is only supported on web.
+  const role = Platform.OS === 'web' ? 'group' : undefined;
+
+  const contextValue = useMemo(() => ({ size }), [size]);
+
+  return (
+    <View {...elementProps} ref={ref} role={role} style={[classes, style]}>
+      <ButtonGroupContext.Provider value={contextValue}>
+        {list}
+      </ButtonGroupContext.Provider>
+    </View>
+  );
+}
+
+export default ButtonGroup;