bootstrap-rn 0.4.8 → 0.4.9

package/src/components/list-group/ListGroupItemAction.tsx

@@ -1,193 +1,194 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Pressable, { PressableRef, PressableProps } from '../Pressable';
-import { getStyles, each } from '../../utils';
-import { THEME_COLORS } from '../../theme/proxies';
-import { shiftColor, shadeColor } from '../../theme/functions';
-import useModifier from '../../hooks/useModifier';
-import useForcedContext from '../../hooks/useForcedContext';
-import { styles as baseStyles } from './ListGroupItem';
-import ListContext from '../helpers/ListContext';
-import ListGroupContext from './ListGroupContext';
-import type { ThemeVariables, UseTabbableProps } from '../../types';
-
-export interface ListGroupItemActionProps
-  extends UseTabbableProps,
-    PressableProps {
-  color?: keyof typeof THEME_COLORS;
-}
-
-const actionStyles = StyleSheet.create({
-  '.list-group-item-action': css`
-    width: 100%; // For "<button>"s (anchors become 100% by default though)
-
-    // Hover state
-    &:hover {
-      z-index: 1; // Place hover/focus items above their siblings for proper border styling
-      background-color: $list-group-hover-bg;
-    }
-
-    &:focus {
-      z-index: 1; // Place hover/focus items above their siblings for proper border styling
-      background-color: $list-group-hover-bg;
-    }
-
-    &:active {
-      background-color: $list-group-action-active-bg;
-    }
-  `,
-  '.list-group-item-action --text': css`
-    color: $list-group-action-color;
-    // text-align: inherit; // For "<button>"s (anchors inherit)
-
-    // Hover state
-    &:hover {
-      color: $list-group-action-hover-color;
-      text-decoration: none;
-    }
-
-    &:focus {
-      color: $list-group-action-hover-color;
-      text-decoration: none;
-    }
-
-    &:active {
-      color: $list-group-action-active-color;
-    }
-  `,
-  ...each(THEME_COLORS, (state, value) => ({
-    [`.list-group-item-${state}-action`]: css`
-      &:hover {
-        background-color: ${shadeColor(
-          shiftColor(
-            value,
-            (t: ThemeVariables) => t['list-group-item-bg-scale'],
-          ),
-          0.1,
-        )};
-      }
-
-      &:focus {
-        background-color: ${shadeColor(
-          shiftColor(
-            value,
-            (t: ThemeVariables) => t['list-group-item-bg-scale'],
-          ),
-          0.1,
-        )};
-      }
-    `,
-    [`.list-group-item-${state}-action --text`]: css`
-      &:hover {
-        color: ${shiftColor(
-          value,
-          (t: ThemeVariables) => t['list-group-item-color-scale'],
-        )};
-      }
-
-      &:focus {
-        color: ${shiftColor(
-          value,
-          (t: ThemeVariables) => t['list-group-item-color-scale'],
-        )};
-      }
-    `,
-    [`.list-group-item-${state}-action.active`]: css`
-      background-color: ${shiftColor(
-        value,
-        (t: ThemeVariables) => t['list-group-item-color-scale'],
-      )};
-      border-color: ${shiftColor(
-        value,
-        (t: ThemeVariables) => t['list-group-item-color-scale'],
-      )};
-    `,
-    [`.list-group-item-${state}-action.active --text`]: css`
-      color: $white;
-    `,
-  })),
-});
-
-const ListGroupItemAction = React.forwardRef<
-  PressableRef,
-  ListGroupItemActionProps
->((props, ref) => {
-  const [modifierProps, modifierRef] = useModifier('useTabbable', props, ref);
-
-  const {
-    children,
-    color,
-    active = false,
-    disabled = false,
-    style,
-    activeStyle,
-    textStyle,
-    activeTextStyle,
-    ...elementProps
-  } = modifierProps;
-
-  const { first, last } = useForcedContext(ListContext);
-  const { flush } = useForcedContext(ListGroupContext);
-
-  const styles = { ...baseStyles, ...actionStyles };
-
-  const classes = getStyles(styles, [
-    '.list-group-item',
-    '.list-group-item-action',
-    first && '.list-group-item:first-child',
-    last && '.list-group-item:last-child',
-    disabled && '.list-group-item.disabled',
-    !first && '.list-group-item + .list-group-item',
-    !first && active && '.list-group-item + .list-group-item.active',
-    flush && '.list-group-item-flush',
-    flush && last && '.list-group-item-flush:last-child',
-    !first &&
-      flush &&
-      active &&
-      '.list-group-item-flush + .list-group-item-flush.active',
-    color && `.list-group-item-${color}`,
-    color && `.list-group-item-${color}-action`,
-  ]);
-
-  const activeClasses = getStyles(styles, [
-    '.list-group-item.active',
-    color && `.list-group-item-${color}-action.active`,
-  ]);
-
-  const textClasses = getStyles(styles, [
-    '.list-group-item --text',
-    '.list-group-item-action --text',
-    disabled && '.list-group-item.disabled --text',
-    color && `.list-group-item-${color} --text`,
-    color && `.list-group-item-${color}-action --text`,
-  ]);
-
-  const activeTextClasses = getStyles(styles, [
-    '.list-group-item.active --text',
-    color && `.list-group-item-${color}-action.active --text`,
-  ]);
-
-  const role = Platform.OS === 'web' ? 'listitem' : undefined;
-
-  return (
-    <Pressable
-      {...elementProps}
-      ref={modifierRef}
-      role={role}
-      active={active}
-      disabled={disabled}
-      style={[...classes, style]}
-      activeStyle={[...activeClasses, activeStyle]}
-      textStyle={[...textClasses, textStyle]}
-      activeTextStyle={[...activeTextClasses, activeTextStyle]}
-    >
-      {children}
-    </Pressable>
-  );
-});
-
-ListGroupItemAction.displayName = 'ListGroupItemAction';
-
-export default ListGroupItemAction;
+import React from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable, { PressableRef, PressableProps } from '../Pressable';
+import { getStyles, each } from '../../utils';
+import { THEME_COLORS } from '../../theme/proxies';
+import { shiftColor, shadeColor } from '../../theme/functions';
+import useModifier from '../../hooks/useModifier';
+import useForcedContext from '../../hooks/useForcedContext';
+import { styles as baseStyles } from './ListGroupItem';
+import ListContext from '../helpers/ListContext';
+import ListGroupContext from './ListGroupContext';
+import type { ThemeVariables, UseTabbableProps } from '../../types';
+
+export interface ListGroupItemActionProps
+  extends UseTabbableProps, PressableProps {
+  color?: keyof typeof THEME_COLORS;
+}
+
+const actionStyles = StyleSheet.create({
+  '.list-group-item-action': css`
+    width: 100%; // For "<button>"s (anchors become 100% by default though)
+
+    // Hover state
+    &:hover {
+      z-index: 1; // Place hover/focus items above their siblings for proper border styling
+      background-color: $list-group-hover-bg;
+    }
+
+    &:focus {
+      z-index: 1; // Place hover/focus items above their siblings for proper border styling
+      background-color: $list-group-hover-bg;
+    }
+
+    &:active {
+      background-color: $list-group-action-active-bg;
+    }
+  `,
+  '.list-group-item-action --text': css`
+    color: $list-group-action-color;
+    // text-align: inherit; // For "<button>"s (anchors inherit)
+
+    // Hover state
+    &:hover {
+      color: $list-group-action-hover-color;
+      text-decoration: none;
+    }
+
+    &:focus {
+      color: $list-group-action-hover-color;
+      text-decoration: none;
+    }
+
+    &:active {
+      color: $list-group-action-active-color;
+    }
+  `,
+  ...each(THEME_COLORS, (state, value) => ({
+    [`.list-group-item-${state}-action`]: css`
+      &:hover {
+        background-color: ${shadeColor(
+          shiftColor(
+            value,
+            (t: ThemeVariables) => t['list-group-item-bg-scale'],
+          ),
+          0.1,
+        )};
+      }
+
+      &:focus {
+        background-color: ${shadeColor(
+          shiftColor(
+            value,
+            (t: ThemeVariables) => t['list-group-item-bg-scale'],
+          ),
+          0.1,
+        )};
+      }
+    `,
+    [`.list-group-item-${state}-action --text`]: css`
+      &:hover {
+        color: ${shiftColor(
+          value,
+          (t: ThemeVariables) => t['list-group-item-color-scale'],
+        )};
+      }
+
+      &:focus {
+        color: ${shiftColor(
+          value,
+          (t: ThemeVariables) => t['list-group-item-color-scale'],
+        )};
+      }
+    `,
+    [`.list-group-item-${state}-action.active`]: css`
+      background-color: ${shiftColor(
+        value,
+        (t: ThemeVariables) => t['list-group-item-color-scale'],
+      )};
+      border-color: ${shiftColor(
+        value,
+        (t: ThemeVariables) => t['list-group-item-color-scale'],
+      )};
+    `,
+    [`.list-group-item-${state}-action.active --text`]: css`
+      color: $white;
+    `,
+  })),
+});
+
+function ListGroupItemAction({
+  ref,
+  ...props
+}: ListGroupItemActionProps & React.RefAttributes<PressableRef>) {
+  const [modifierProps, modifierRef] = useModifier(
+    'useTabbable',
+    props,
+    ref ?? null,
+  );
+
+  const {
+    children,
+    color,
+    active = false,
+    disabled = false,
+    style,
+    activeStyle,
+    textStyle,
+    activeTextStyle,
+    ...elementProps
+  } = modifierProps;
+
+  const { first, last } = useForcedContext(ListContext);
+  const { flush } = useForcedContext(ListGroupContext);
+
+  const styles = { ...baseStyles, ...actionStyles };
+
+  const classes = getStyles(styles, [
+    '.list-group-item',
+    '.list-group-item-action',
+    first && '.list-group-item:first-child',
+    last && '.list-group-item:last-child',
+    disabled && '.list-group-item.disabled',
+    !first && '.list-group-item + .list-group-item',
+    !first && active && '.list-group-item + .list-group-item.active',
+    flush && '.list-group-item-flush',
+    flush && last && '.list-group-item-flush:last-child',
+    !first &&
+      flush &&
+      active &&
+      '.list-group-item-flush + .list-group-item-flush.active',
+    color && `.list-group-item-${color}`,
+    color && `.list-group-item-${color}-action`,
+  ]);
+
+  const activeClasses = getStyles(styles, [
+    '.list-group-item.active',
+    color && `.list-group-item-${color}-action.active`,
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.list-group-item --text',
+    '.list-group-item-action --text',
+    disabled && '.list-group-item.disabled --text',
+    color && `.list-group-item-${color} --text`,
+    color && `.list-group-item-${color}-action --text`,
+  ]);
+
+  const activeTextClasses = getStyles(styles, [
+    '.list-group-item.active --text',
+    color && `.list-group-item-${color}-action.active --text`,
+  ]);
+
+  const role = Platform.OS === 'web' ? 'listitem' : undefined;
+
+  return (
+    <Pressable
+      {...elementProps}
+      ref={modifierRef}
+      role={role}
+      active={active}
+      disabled={disabled}
+      style={[...classes, style]}
+      activeStyle={[...activeClasses, activeStyle]}
+      textStyle={[...textClasses, textStyle]}
+      activeTextStyle={[...activeTextClasses, activeTextStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export default ListGroupItemAction;

package/src/components/modal/Modal.tsx

@@ -21,7 +21,7 @@ export interface ModalProps extends ScrollViewProps {
   backdrop?: boolean | 'static';
   scrollable?: boolean;
   centered?: boolean;
-  onClose: () => void;
+  onClose?: () => void;
   dialogStyle?: StyleProp<ExtendedViewStyle>;
   contentStyle?: StyleProp<ExtendedViewStyle>;
   dialogTextStyle?: StyleProp<ExtendedTextStyle>;
@@ -146,105 +146,100 @@ const styles = StyleSheet.create({
   `,
 });
 
-const Modal = React.forwardRef<ViewRef | ScrollViewRef, ModalProps>(
-  (props, ref) => {
-    const {
-      children,
-      visible,
-      size,
-      backdrop = true,
-      scrollable = false,
-      centered = false,
-      onClose: handleClose,
-      style,
-      contentContainerStyle,
-      dialogStyle,
-      contentStyle,
-      textStyle,
-      dialogTextStyle,
-      contentTextStyle,
-      ...elementProps
-    } = props;
-
-    const modalRef = useRef<ViewRef>(null);
-
-    const insets = useSafeAreaInsets();
-
-    const modal = useModal(scrollable);
-
-    const backdropClasses = getStyles(styles, ['.modal-backdrop']);
-    const classes = getStyles(styles, ['.modal']);
-    const dialogClasses = getStyles(styles, [
-      '.modal-dialog',
-      size === 'sm' && '.modal-sm',
-      size === 'lg' && '.modal-lg',
-      size === 'xl' && '.modal-xl',
-      scrollable && '.modal-dialog-scrollable',
-      centered && '.modal-dialog-centered',
-    ]);
-    const contentClasses = getStyles(styles, [
-      '.modal-content',
-      scrollable && '.modal-dialog-scrollable .modal-content',
-    ]);
-    const contentTextClasses = getStyles(styles, ['.modal-content --text']);
-
-    // If scrollable we use a ScrollView in ModalBody, so we can use a View here.
-    const FlexView = scrollable ? View : ScrollView;
-
-    const centeredStyle = centered && {
-      justifyContent: 'center' as JustifyContentValue,
-    };
-
-    if (!visible) {
-      return null;
-    }
-
-    return (
-      <Dialog
-        id={modal.identifier}
-        dialogRef={modalRef}
-        backgroundRef={modalRef}
-        onClose={handleClose}
-        backdrop={backdrop}
-        backdropElement={<View style={backdropClasses} />}
+function Modal(
+  props: ModalProps & React.RefAttributes<ViewRef | ScrollViewRef>,
+) {
+  const {
+    ref,
+    children,
+    visible,
+    size,
+    backdrop = true,
+    scrollable = false,
+    centered = false,
+    onClose: handleClose,
+    style,
+    contentContainerStyle,
+    dialogStyle,
+    contentStyle,
+    textStyle,
+    dialogTextStyle,
+    contentTextStyle,
+    ...elementProps
+  } = props;
+
+  const modalRef = useRef<ViewRef>(null);
+
+  const insets = useSafeAreaInsets();
+
+  const modal = useModal(scrollable);
+
+  const backdropClasses = getStyles(styles, ['.modal-backdrop']);
+  const classes = getStyles(styles, ['.modal']);
+  const dialogClasses = getStyles(styles, [
+    '.modal-dialog',
+    size === 'sm' && '.modal-sm',
+    size === 'lg' && '.modal-lg',
+    size === 'xl' && '.modal-xl',
+    scrollable && '.modal-dialog-scrollable',
+    centered && '.modal-dialog-centered',
+  ]);
+  const contentClasses = getStyles(styles, [
+    '.modal-content',
+    scrollable && '.modal-dialog-scrollable .modal-content',
+  ]);
+  const contentTextClasses = getStyles(styles, ['.modal-content --text']);
+
+  // If scrollable we use a ScrollView in ModalBody, so we can use a View here.
+  const FlexView = scrollable ? View : ScrollView;
+
+  const centeredStyle = centered && {
+    justifyContent: 'center' as JustifyContentValue,
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      id={modal.identifier}
+      dialogRef={modalRef}
+      backgroundRef={modalRef}
+      onClose={handleClose}
+      backdrop={backdrop}
+      backdropElement={<View style={backdropClasses} />}
+    >
+      <FlexView
+        {...elementProps}
+        ref={concatRefs(ref, modalRef)}
+        role="dialog"
+        aria-modal
+        aria-labelledby={`${modal.identifier}-title`}
+        tabIndex={-1}
+        style={[classes, insets, scrollable && centeredStyle, style]}
+        textStyle={textStyle}
+        contentContainerStyle={
+          scrollable
+            ? undefined
+            : [{ flexGrow: 1 }, centeredStyle, contentContainerStyle]
+        }
       >
-        <FlexView
-          {...elementProps}
-          // @ts-expect-error Type of ref depends on component.
-          ref={concatRefs(ref, modalRef)}
-          role="dialog"
-          aria-modal
-          aria-labelledby={`${modal.identifier}-title`}
-          tabIndex={-1}
-          style={[classes, insets, scrollable && centeredStyle, style]}
-          textStyle={textStyle}
-          contentContainerStyle={
-            scrollable
-              ? undefined
-              : [{ flexGrow: 1 }, centeredStyle, contentContainerStyle]
-          }
-        >
-          <BackdropHandler onClose={handleClose} backdrop={backdrop} />
+        <BackdropHandler onClose={handleClose} backdrop={backdrop} />
+        <View style={[dialogClasses, dialogStyle]} textStyle={dialogTextStyle}>
           <View
-            style={[dialogClasses, dialogStyle]}
-            textStyle={dialogTextStyle}
+            style={[contentClasses, contentStyle]}
+            textStyle={[contentTextClasses, contentTextStyle]}
           >
-            <View
-              style={[contentClasses, contentStyle]}
-              textStyle={[contentTextClasses, contentTextStyle]}
-            >
-              <ModalContext.Provider value={modal}>
-                {children}
-              </ModalContext.Provider>
-            </View>
+            <ModalContext.Provider value={modal}>
+              {children}
+            </ModalContext.Provider>
           </View>
-        </FlexView>
-      </Dialog>
-    );
-  },
-);
-
-Modal.displayName = 'Modal';
+        </View>
+      </FlexView>
+    </Dialog>
+  );
+}
 
 export default Object.assign(Modal, {
   Context: ModalContext,

package/src/components/modal/ModalBody.tsx

@@ -21,32 +21,31 @@ const styles = StyleSheet.create({
   `,
 });
 
-const ModalBody = React.forwardRef<ViewRef | ScrollViewRef, ModalBodyProps>(
-  (props, ref) => {
-    const { children, style, contentContainerStyle, ...elementProps } = props;
-
-    const { scrollable } = useForcedContext(ModalContext);
-
-    const classes = getStyles(styles, ['.modal-body']);
-
-    const FlexView = scrollable ? ScrollView : View;
-
-    return (
-      <FlexView
-        {...elementProps}
-        // @ts-expect-error Type of ref depends on component.
-        ref={ref}
-        style={scrollable ? style : [classes, style]}
-        contentContainerStyle={
-          scrollable ? [classes, contentContainerStyle] : undefined
-        }
-      >
-        {children}
-      </FlexView>
-    );
-  },
-);
-
-ModalBody.displayName = 'ModalBody';
+function ModalBody(
+  props: ModalBodyProps & React.RefAttributes<ViewRef | ScrollViewRef>,
+) {
+  const { ref, children, style, contentContainerStyle, ...elementProps } =
+    props;
+
+  const { scrollable } = useForcedContext(ModalContext);
+
+  const classes = getStyles(styles, ['.modal-body']);
+
+  const FlexView = scrollable ? ScrollView : View;
+
+  return (
+    <FlexView
+      {...elementProps}
+      // @ts-expect-error Type of ref depends on component.
+      ref={ref}
+      style={scrollable ? style : [classes, style]}
+      contentContainerStyle={
+        scrollable ? [classes, contentContainerStyle] : undefined
+      }
+    >
+      {children}
+    </FlexView>
+  );
+}
 
 export default ModalBody;