bootstrap-rn 0.4.8 → 0.4.10

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

@@ -1,34 +1,32 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-
-export interface ButtonToolbarProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.btn-toolbar': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  `,
-});
-
-const ButtonToolbar = React.forwardRef<ViewRef, ButtonToolbarProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const classes = getStyles(styles, ['.btn-toolbar']);
-
-    return (
-      <View {...elementProps} ref={ref} role="toolbar" style={[classes, style]}>
-        {children}
-      </View>
-    );
-  },
-);
-
-ButtonToolbar.displayName = 'ButtonToolbar';
-
-export default ButtonToolbar;
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+export interface ButtonToolbarProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.btn-toolbar': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  `,
+});
+
+function ButtonToolbar(
+  props: ButtonToolbarProps & React.RefAttributes<ViewRef>,
+) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.btn-toolbar']);
+
+  return (
+    <View {...elementProps} ref={ref} role="toolbar" style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default ButtonToolbar;

package/src/components/buttons/Button.tsx

@@ -304,8 +304,9 @@ const hasSize = (
   return group.size === value;
 };
 
-const Button = React.forwardRef<PressableRef, ButtonProps>((props, ref) => {
+function Button(props: ButtonProps & React.RefAttributes<PressableRef>) {
   const {
+    ref,
     children,
     color = 'primary',
     size,
@@ -372,9 +373,7 @@ const Button = React.forwardRef<PressableRef, ButtonProps>((props, ref) => {
       {children}
     </Pressable>
   );
-});
-
-Button.displayName = 'Button';
+}
 
 export default Object.assign(Button, {
   useToggle: useToggleButton,

package/src/components/card/Card.tsx

@@ -1,46 +1,44 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-import CardBody from './CardBody';
-import CardHeader from './CardHeader';
-import CardFooter from './CardFooter';
-
-export interface CardProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.card': css`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    height: $card-height;
-    // word-wrap: break-word;
-    background-color: $card-bg;
-    // background-clip: border-box;
-    border: $card-border-width solid $card-border-color;
-    border-radius: $card-border-radius;
-    // @include box-shadow($card-box-shadow);
-  `,
-});
-
-const Card = React.forwardRef<ViewRef, CardProps>((props, ref) => {
-  const { children, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.card']);
-
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      {children}
-    </View>
-  );
-});
-
-Card.displayName = 'Card';
-
-export default Object.assign(Card, {
-  Header: CardHeader,
-  Body: CardBody,
-  Footer: CardFooter,
-});
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import CardBody from './CardBody';
+import CardHeader from './CardHeader';
+import CardFooter from './CardFooter';
+
+export interface CardProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.card': css`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: $card-height;
+    // word-wrap: break-word;
+    background-color: $card-bg;
+    // background-clip: border-box;
+    border: $card-border-width solid $card-border-color;
+    border-radius: $card-border-radius;
+    // @include box-shadow($card-box-shadow);
+  `,
+});
+
+function Card(props: CardProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.card']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default Object.assign(Card, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter,
+});

package/src/components/card/CardBody.tsx

@@ -1,40 +1,38 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-
-export interface CardBodyProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.card-body': css`
-    // flex: 1 1 auto;
-    padding: $card-spacer-y $card-spacer-x;
-  `,
-  '.card-body --text': css`
-    color: $card-color;
-  `,
-});
-
-const CardBody = React.forwardRef<ViewRef, ViewProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.card-body']);
-
-  const textClasses = getStyles(styles, [`.card-body --text`]);
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </View>
-  );
-});
-
-CardBody.displayName = 'CardBody';
-
-export default CardBody;
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+export interface CardBodyProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.card-body': css`
+    // flex: 1 1 auto;
+    padding: $card-spacer-y $card-spacer-x;
+  `,
+  '.card-body --text': css`
+    color: $card-color;
+  `,
+});
+
+function CardBody(props: ViewProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.card-body']);
+
+  const textClasses = getStyles(styles, [`.card-body --text`]);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export default CardBody;

package/src/components/card/CardFooter.tsx

@@ -1,44 +1,42 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-
-export interface CardFooterProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.card-footer': css`
-    padding: $card-cap-padding-y $card-cap-padding-x;
-    background-color: $card-cap-bg;
-    border-top-width: $card-border-width;
-    border-style: solid;
-    border-color: $card-border-color;
-    border-radius: 0 0 $card-inner-border-radius $card-inner-border-radius;
-  `,
-  '.card-footer --text': css`
-    color: $card-cap-color;
-  `,
-});
-
-const CardFooter = React.forwardRef<ViewRef, CardFooterProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.card-footer']);
-
-  const textClasses = getStyles(styles, ['.card-footer --text']);
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </View>
-  );
-});
-
-CardFooter.displayName = 'CardFooter';
-
-export default CardFooter;
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+export interface CardFooterProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.card-footer': css`
+    padding: $card-cap-padding-y $card-cap-padding-x;
+    background-color: $card-cap-bg;
+    border-top-width: $card-border-width;
+    border-style: solid;
+    border-color: $card-border-color;
+    border-radius: 0 0 $card-inner-border-radius $card-inner-border-radius;
+  `,
+  '.card-footer --text': css`
+    color: $card-cap-color;
+  `,
+});
+
+function CardFooter(props: CardFooterProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.card-footer']);
+
+  const textClasses = getStyles(styles, ['.card-footer --text']);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export default CardFooter;

package/src/components/card/CardHeader.tsx

@@ -1,45 +1,43 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-
-export interface CardHeaderProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.card-header': css`
-    padding: $card-cap-padding-y $card-cap-padding-x;
-    background-color: $card-cap-bg;
-    border-bottom-width: $card-border-width;
-    border-style: solid;
-    border-color: $card-border-color;
-    border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
-  `,
-  '.card-header --text': css`
-    margin-bottom: 0; // Removes the default margin-bottom of <hN>
-    color: $card-cap-color;
-  `,
-});
-
-const CardHeader = React.forwardRef<ViewRef, CardHeaderProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.card-header']);
-
-  const textClasses = getStyles(styles, ['.card-header --text']);
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </View>
-  );
-});
-
-CardHeader.displayName = 'CardHeader';
-
-export default CardHeader;
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+export interface CardHeaderProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.card-header': css`
+    padding: $card-cap-padding-y $card-cap-padding-x;
+    background-color: $card-cap-bg;
+    border-bottom-width: $card-border-width;
+    border-style: solid;
+    border-color: $card-border-color;
+    border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
+  `,
+  '.card-header --text': css`
+    margin-bottom: 0; // Removes the default margin-bottom of <hN>
+    color: $card-cap-color;
+  `,
+});
+
+function CardHeader(props: CardHeaderProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.card-header']);
+
+  const textClasses = getStyles(styles, ['.card-header --text']);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export default CardHeader;

package/src/components/close/CloseButton.tsx

@@ -84,59 +84,58 @@ const styles = StyleSheet.create({
   `,
 });
 
-const CloseButton = React.forwardRef<PressableRef, CloseButtonProps>(
-  (props, ref) => {
-    const {
-      hitSlop = 12,
-      disabled = false,
-      style,
-      textStyle,
-      styleName,
-      ...elementProps
-    } = props;
-
-    const media = useMedia();
-
-    const modal = useContext(ModalContext);
-    const offcanvas = useContext(OffcanvasContext);
-
-    const classes = getStyles(styles, [
-      '.btn-close',
-      disabled && '.btn-close.disabled',
-      // Modal styles
-      modal && '.modal-header .btn-close',
-      // Offcanvas styles
-      offcanvas && '.offcanvas-header .btn-close',
-    ]);
-    const textClasses = getStyles(styles, ['.btn-close --text']);
-
-    const resolveStyle = useStyle([classes, style], styleName);
-
-    const { interaction, interactionProps } = useInteractionState(elementProps);
-
-    const background = useBackground(
-      resolveStyle({
-        media,
-        interaction,
-      }),
-    );
-
-    return (
-      <Pressable
-        {...elementProps}
-        {...interactionProps}
-        ref={ref}
-        hitSlop={hitSlop}
-        disabled={disabled}
-        style={background.style}
-        textStyle={[textClasses, textStyle]}
-      >
-        {background.element}
-      </Pressable>
-    );
-  },
-);
-
-CloseButton.displayName = 'CloseButton';
+function CloseButton(
+  props: CloseButtonProps & React.RefAttributes<PressableRef>,
+) {
+  const {
+    ref,
+    hitSlop = 12,
+    disabled = false,
+    style,
+    textStyle,
+    styleName,
+    ...elementProps
+  } = props;
+
+  const media = useMedia();
+
+  const modal = useContext(ModalContext);
+  const offcanvas = useContext(OffcanvasContext);
+
+  const classes = getStyles(styles, [
+    '.btn-close',
+    disabled && '.btn-close.disabled',
+    // Modal styles
+    modal && '.modal-header .btn-close',
+    // Offcanvas styles
+    offcanvas && '.offcanvas-header .btn-close',
+  ]);
+  const textClasses = getStyles(styles, ['.btn-close --text']);
+
+  const resolveStyle = useStyle([classes, style], styleName);
+
+  const { interaction, interactionProps } = useInteractionState(elementProps);
+
+  const background = useBackground(
+    resolveStyle({
+      media,
+      interaction,
+    }),
+  );
+
+  return (
+    <Pressable
+      {...elementProps}
+      {...interactionProps}
+      ref={ref}
+      hitSlop={hitSlop}
+      disabled={disabled}
+      style={background.style}
+      textStyle={[textClasses, textStyle]}
+    >
+      {background.element}
+    </Pressable>
+  );
+}
 
 export default CloseButton;

package/src/components/collapse/Collapse.tsx

@@ -1,31 +1,29 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import useForcedContext from '../../hooks/useForcedContext';
-import CollapseContext from './CollapseContext';
-import CollapseProvider from './CollapseProvider';
-import useToggleCollapse from './useToggleCollapse';
-
-export interface CollapseProps extends ViewProps {}
-
-const Collapse = React.forwardRef<ViewRef, CollapseProps>((props, ref) => {
-  const { children, ...elementProps } = props;
-
-  const { identifier, visible } = useForcedContext(CollapseContext);
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <View {...elementProps} ref={ref} id={identifier}>
-      {children}
-    </View>
-  );
-});
-
-Collapse.displayName = 'Collapse';
-
-export default Object.assign(Collapse, {
-  Provider: CollapseProvider,
-  useToggle: useToggleCollapse,
-});
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import useForcedContext from '../../hooks/useForcedContext';
+import CollapseContext from './CollapseContext';
+import CollapseProvider from './CollapseProvider';
+import useToggleCollapse from './useToggleCollapse';
+
+export interface CollapseProps extends ViewProps {}
+
+function Collapse(props: CollapseProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, ...elementProps } = props;
+
+  const { identifier, visible } = useForcedContext(CollapseContext);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <View {...elementProps} ref={ref} id={identifier}>
+      {children}
+    </View>
+  );
+}
+
+export default Object.assign(Collapse, {
+  Provider: CollapseProvider,
+  useToggle: useToggleCollapse,
+});