bootstrap-rn 0.4.8 → 0.4.10

package/src/components/dropdown/DropdownMenu.tsx

@@ -117,127 +117,124 @@ const getAlign = (
   return startIndex > endIndex ? 'start' : 'end';
 };
 
-const DropdownMenu = React.forwardRef<ViewRef, DropdownMenuProps>(
-  (props, ref) => {
-    const {
-      children,
-      start = true,
-      end = false,
-      style,
-      textStyle,
-      ...elementProps
-    } = props;
-
-    const navbar = useContext(NavbarContext);
-    const media = useMedia();
-
-    const dropdown = useForcedContext(DropdownContext);
-
-    const {
-      identifier,
-      visible,
-      setVisible,
-      setAlign,
-      direction,
-      display,
-      content,
-    } = dropdown;
-
-    // Workaround for setting start / end on DropdownMenu and not on Dropdown.
-    const align = getAlign(media, start, end);
-
-    useLayoutEffect(() => {
-      setAlign(align);
-    }, [align]);
-
-    if (!visible || !align) {
-      return null;
-    }
-
-    const isStatic = Platform.OS === 'web' && display === 'static';
-    const isCollapsedNavbar =
-      navbar &&
-      !(navbar.expand && (navbar.expand === true || media.up(navbar.expand)));
-    const hasStaticStyle = isStatic && !isCollapsedNavbar;
-
-    const classes = getStyles(styles, [
-      '.dropdown-menu',
-      // Non-Popper styles
-      hasStaticStyle && '.dropdown-menu[data-bs-popper]',
-      hasStaticStyle &&
-        start &&
-        `.dropdown-menu${
-          start === true ? '' : `-${start}`
-        }-start[data-bs-popper]`,
-      hasStaticStyle &&
-        end &&
-        `.dropdown-menu${end === true ? '' : `-${end}`}-end[data-bs-popper]`,
-      hasStaticStyle &&
-        direction === 'up' &&
-        '.dropup .dropdown-menu[data-bs-popper]',
-      hasStaticStyle &&
-        direction === 'end' &&
-        '.dropend .dropdown-menu[data-bs-popper]',
-      hasStaticStyle &&
-        direction === 'start' &&
-        '.dropstart .dropdown-menu[data-bs-popper]',
-      // Navbar styles
-      navbar && '.navbar-nav .dropdown-menu',
-      navbar &&
-        navbar.expand &&
-        `.navbar-expand${
-          navbar.expand === true ? '' : `-${navbar.expand}`
-        } .navbar-nav .dropdown-menu`,
-    ]);
-    const textClasses = getStyles(styles, ['.dropdown-menu --text']);
-
-    if (isStatic || isCollapsedNavbar) {
-      return (
-        <>
-          {!isCollapsedNavbar && (
-            <BackdropHandler
-              onClose={() => {
-                setVisible(false);
-              }}
-            />
-          )}
-          <View
-            {...elementProps}
-            ref={concatRefs(content.ref, ref)}
-            aria-labelledby={identifier}
-            style={[classes, style]}
-            textStyle={[textClasses, textStyle]}
-          >
-            {children}
-          </View>
-        </>
-      );
-    }
+function DropdownMenu(props: DropdownMenuProps & React.RefAttributes<ViewRef>) {
+  const {
+    ref,
+    children,
+    start = true,
+    end = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const navbar = useContext(NavbarContext);
+  const media = useMedia();
+
+  const dropdown = useForcedContext(DropdownContext);
+
+  const {
+    identifier,
+    visible,
+    setVisible,
+    setAlign,
+    direction,
+    display,
+    content,
+  } = dropdown;
+
+  // Workaround for setting start / end on DropdownMenu and not on Dropdown.
+  const align = getAlign(media, start, end);
+
+  useLayoutEffect(() => {
+    setAlign(align);
+  }, [align]);
+
+  if (!visible || !align) {
+    return null;
+  }
 
+  const isStatic = Platform.OS === 'web' && display === 'static';
+  const isCollapsedNavbar =
+    navbar &&
+    !(navbar.expand && (navbar.expand === true || media.up(navbar.expand)));
+  const hasStaticStyle = isStatic && !isCollapsedNavbar;
+
+  const classes = getStyles(styles, [
+    '.dropdown-menu',
+    // Non-Popper styles
+    hasStaticStyle && '.dropdown-menu[data-bs-popper]',
+    hasStaticStyle &&
+      start &&
+      `.dropdown-menu${
+        start === true ? '' : `-${start}`
+      }-start[data-bs-popper]`,
+    hasStaticStyle &&
+      end &&
+      `.dropdown-menu${end === true ? '' : `-${end}`}-end[data-bs-popper]`,
+    hasStaticStyle &&
+      direction === 'up' &&
+      '.dropup .dropdown-menu[data-bs-popper]',
+    hasStaticStyle &&
+      direction === 'end' &&
+      '.dropend .dropdown-menu[data-bs-popper]',
+    hasStaticStyle &&
+      direction === 'start' &&
+      '.dropstart .dropdown-menu[data-bs-popper]',
+    // Navbar styles
+    navbar && '.navbar-nav .dropdown-menu',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .navbar-nav .dropdown-menu`,
+  ]);
+  const textClasses = getStyles(styles, ['.dropdown-menu --text']);
+
+  if (isStatic || isCollapsedNavbar) {
     return (
-      <Portal name={identifier}>
-        <BackdropHandler
-          onClose={() => {
-            setVisible(false);
-          }}
-        />
+      <>
+        {!isCollapsedNavbar && (
+          <BackdropHandler
+            onClose={() => {
+              setVisible(false);
+            }}
+          />
+        )}
         <View
           {...elementProps}
-          {...content.getProps(elementProps)}
-          ref={concatRefs(ref, content.ref)}
+          ref={concatRefs(content.ref, ref)}
           aria-labelledby={identifier}
-          style={[classes, content.style, style]}
+          style={[classes, style]}
           textStyle={[textClasses, textStyle]}
         >
-          <DropdownContext.Provider value={dropdown}>
-            {children}
-          </DropdownContext.Provider>
+          {children}
         </View>
-      </Portal>
+      </>
     );
-  },
-);
+  }
 
-DropdownMenu.displayName = 'DropdownMenu';
+  return (
+    <Portal name={identifier}>
+      <BackdropHandler
+        onClose={() => {
+          setVisible(false);
+        }}
+      />
+      <View
+        {...elementProps}
+        {...content.getProps(elementProps)}
+        ref={concatRefs(ref, content.ref)}
+        aria-labelledby={identifier}
+        style={[classes, content.style, style]}
+        textStyle={[textClasses, textStyle]}
+      >
+        <DropdownContext.Provider value={dropdown}>
+          {children}
+        </DropdownContext.Provider>
+      </View>
+    </Portal>
+  );
+}
 
 export default DropdownMenu;

package/src/components/dropdown/useToggleDropdown.ts

@@ -6,14 +6,13 @@ import { CaretProps } from '../Caret';
 import type { PressableRef } from '../Pressable';
 
 export interface UseToggleDropdownProps {
-  ref?: React.RefObject<PressableRef | null>;
   onPress?: null | ((event: GestureResponderEvent) => void);
   caret?: boolean | CaretProps;
 }
 
-export default function useToggleDropdown<T>(
-  props: UseToggleDropdownProps & T,
-) {
+export default function useToggleDropdown<
+  T extends { ref?: React.Ref<PressableRef> },
+>(props: UseToggleDropdownProps & T) {
   const context = useForcedContext(DropdownContext);
 
   const { ref, caret, ...restProps } = props;

package/src/components/forms/Checkbox.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
-import type { PressableRef } from '../Pressable';
-import FormCheckInput, { FormCheckInputProps } from './FormCheckInput';
-
-export interface CheckboxProps extends Omit<FormCheckInputProps, 'type'> {}
-
-const Checkbox = React.forwardRef<PressableRef, CheckboxProps>((props, ref) => {
-  const { ...elementProps } = props;
-
-  return <FormCheckInput {...elementProps} ref={ref} type="checkbox" />;
-});
-
-Checkbox.displayName = 'Checkbox';
-
-export default Checkbox;
+import React from 'react';
+import type { PressableRef } from '../Pressable';
+import FormCheckInput, { FormCheckInputProps } from './FormCheckInput';
+
+export interface CheckboxProps extends Omit<FormCheckInputProps, 'type'> {}
+
+function Checkbox(props: CheckboxProps & React.RefAttributes<PressableRef>) {
+  const { ref, ...elementProps } = props;
+
+  return <FormCheckInput {...elementProps} ref={ref} type="checkbox" />;
+}
+
+export default Checkbox;

package/src/components/forms/Feedback.tsx

@@ -1,40 +1,38 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Text, { TextProps, TextRef } from '../Text';
-import { each, getStyles } from '../../utils';
-import { FORM_VALIDATION_STATES } from '../../theme/proxies';
-import type { FormValidationState, ThemeVariables } from '../../types';
-
-export interface FeedbackProps extends TextProps {
-  type?: keyof typeof FORM_VALIDATION_STATES;
-}
-
-const styles = StyleSheet.create({
-  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
-    [`.${state}-feedback`]: css`
-      // display: none;
-      width: 100%;
-      margin-top: $form-feedback-margin-top;
-      font-size: $form-feedback-font-size;
-      font-style: $form-feedback-font-style;
-      color: ${(t: ThemeVariables) => data(t).color};
-    `,
-  })),
-});
-
-const Feedback = React.forwardRef<TextRef, FeedbackProps>((props, ref) => {
-  const { children, type, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, [`.${type}-feedback`]);
-
-  return (
-    <Text {...elementProps} ref={ref} style={[classes, style]}>
-      {children}
-    </Text>
-  );
-});
-
-Feedback.displayName = 'Feedback';
-
-export default Feedback;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Text, { TextProps, TextRef } from '../Text';
+import { each, getStyles } from '../../utils';
+import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+import type { FormValidationState, ThemeVariables } from '../../types';
+
+export interface FeedbackProps extends TextProps {
+  type?: keyof typeof FORM_VALIDATION_STATES;
+}
+
+const styles = StyleSheet.create({
+  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
+    [`.${state}-feedback`]: css`
+      // display: none;
+      width: 100%;
+      margin-top: $form-feedback-margin-top;
+      font-size: $form-feedback-font-size;
+      font-style: $form-feedback-font-style;
+      color: ${(t: ThemeVariables) => data(t).color};
+    `,
+  })),
+});
+
+function Feedback(props: FeedbackProps & React.RefAttributes<TextRef>) {
+  const { ref, children, type, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, [`.${type}-feedback`]);
+
+  return (
+    <Text {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export default Feedback;

package/src/components/forms/FormCheck.tsx

@@ -1,69 +1,68 @@
-import React, { useMemo } from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { getStyles } from '../../utils';
-import FormCheckContext from './FormCheckContext';
-import FormCheckLabel from './FormCheckLabel';
-
-export interface FormCheckProps extends ViewProps {
-  reverse?: boolean;
-  disabled?: boolean;
-  valid?: boolean;
-  invalid?: boolean;
-}
-
-const styles = StyleSheet.create({
-  '.form-check': css`
-    // display: block;
-    flex-direction: row; // added for bootstrap-rn
-    min-height: $form-check-min-height;
-    // padding-left: $form-check-padding-start;
-    margin-bottom: $form-check-margin-bottom;
-  `,
-  '.form-check-reverse': css`
-    flex-direction: row-reverse; // added for bootstrap-rn
-    // padding-right: $form-check-padding-start;
-    // padding-left: 0;
-    // text-align: right;
-  `,
-  '.form-switch.form-check': css`
-    // padding-left: $form-switch-padding-start;
-  `,
-});
-
-const FormCheck = React.forwardRef<ViewRef, FormCheckProps>((props, ref) => {
-  const {
-    children,
-    reverse = false,
-    disabled = false,
-    valid = false,
-    invalid = false,
-    style,
-    ...elementProps
-  } = props;
-
-  const classes = getStyles(styles, [
-    '.form-check',
-    reverse && '.form-check-reverse',
-  ]);
-
-  const contextValue = useMemo(
-    () => ({ reverse, disabled, valid, invalid }),
-    [reverse, disabled, valid, invalid],
-  );
-
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      <FormCheckContext.Provider value={contextValue}>
-        {children}
-      </FormCheckContext.Provider>
-    </View>
-  );
-});
-
-FormCheck.displayName = 'FormCheck';
-
-export default Object.assign(FormCheck, {
-  Label: FormCheckLabel,
-});
+import React, { useMemo } from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { getStyles } from '../../utils';
+import FormCheckContext from './FormCheckContext';
+import FormCheckLabel from './FormCheckLabel';
+
+export interface FormCheckProps extends ViewProps {
+  reverse?: boolean;
+  disabled?: boolean;
+  valid?: boolean;
+  invalid?: boolean;
+}
+
+const styles = StyleSheet.create({
+  '.form-check': css`
+    // display: block;
+    flex-direction: row; // added for bootstrap-rn
+    min-height: $form-check-min-height;
+    // padding-left: $form-check-padding-start;
+    margin-bottom: $form-check-margin-bottom;
+  `,
+  '.form-check-reverse': css`
+    flex-direction: row-reverse; // added for bootstrap-rn
+    // padding-right: $form-check-padding-start;
+    // padding-left: 0;
+    // text-align: right;
+  `,
+  '.form-switch.form-check': css`
+    // padding-left: $form-switch-padding-start;
+  `,
+});
+
+function FormCheck(props: FormCheckProps & React.RefAttributes<ViewRef>) {
+  const {
+    ref,
+    children,
+    reverse = false,
+    disabled = false,
+    valid = false,
+    invalid = false,
+    style,
+    ...elementProps
+  } = props;
+
+  const classes = getStyles(styles, [
+    '.form-check',
+    reverse && '.form-check-reverse',
+  ]);
+
+  const contextValue = useMemo(
+    () => ({ reverse, disabled, valid, invalid }),
+    [reverse, disabled, valid, invalid],
+  );
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <FormCheckContext.Provider value={contextValue}>
+        {children}
+      </FormCheckContext.Provider>
+    </View>
+  );
+}
+
+export default Object.assign(FormCheck, {
+  Label: FormCheckLabel,
+});

package/src/components/forms/FormCheckInput.tsx

@@ -176,93 +176,86 @@ const styles = StyleSheet.create({
   `,
 });
 
-const FormCheckInput = React.forwardRef<PressableRef, FormCheckInputProps>(
-  (props, ref) => {
-    const [modifierProps, modifierRef] = useModifier(
-      'useFormField',
-      props,
-      ref,
-    );
+function FormCheckInput(
+  props: FormCheckInputProps & React.RefAttributes<PressableRef>,
+) {
+  const modifierProps = useModifier('useFormField', props);
 
-    const context = useContext(FormCheckContext);
+  const context = useContext(FormCheckContext);
 
-    const {
-      type,
-      value,
-      onFocus = () => {},
-      onBlur = () => {},
-      disabled = context ? context.disabled : false,
-      valid = context ? context.valid : false,
-      invalid = context ? context.invalid : false,
-      useNativeComponent = false,
-      autoFocus = false,
-      style,
-      ...elementProps
-    } = modifierProps;
+  const {
+    ref,
+    type,
+    value,
+    onFocus = () => {},
+    onBlur = () => {},
+    disabled = context ? context.disabled : false,
+    valid = context ? context.valid : false,
+    invalid = context ? context.invalid : false,
+    useNativeComponent = false,
+    autoFocus = false,
+    style,
+    ...elementProps
+  } = modifierProps;
 
-    const media = useMedia();
-    const [focused, setFocused] = useState(autoFocus);
+  const media = useMedia();
+  const [focused, setFocused] = useState(autoFocus);
 
-    const classes = getStyles(styles, [
-      context && '.form-check .form-check-input',
-      context?.reverse && '.form-check-reverse .form-check-input',
-      '.form-check-input',
-      type === 'checkbox' && '.form-check-input[type="checkbox"]',
-      type === 'radio' && '.form-check-input[type="radio"]',
-      value && '.form-check-input:checked',
-      type === 'checkbox' &&
-        value &&
-        '.form-check-input[type="checkbox"]:checked',
-      type === 'radio' && value && '.form-check-input[type="radio"]:checked',
-      disabled && '.form-check-input:disabled',
-      // validation
-      valid && '.form-check-input:valid',
-      valid && value && '.form-check-input:valid:checked',
-      invalid && '.form-check-input:invalid',
-      invalid && value && '.form-check-input:invalid:checked',
-      // switch
-      context &&
-        type === 'switch' &&
-        '.form-switch.form-check .form-check-input',
-      context?.reverse &&
-        type === 'switch' &&
-        '.form-switch.form-check-reverse .form-check-input',
-      type === 'switch' && '.form-switch .form-check-input',
-      type === 'switch' && value && '.form-switch .form-check-input:checked',
-    ]);
+  const classes = getStyles(styles, [
+    context && '.form-check .form-check-input',
+    context?.reverse && '.form-check-reverse .form-check-input',
+    '.form-check-input',
+    type === 'checkbox' && '.form-check-input[type="checkbox"]',
+    type === 'radio' && '.form-check-input[type="radio"]',
+    value && '.form-check-input:checked',
+    type === 'checkbox' &&
+      value &&
+      '.form-check-input[type="checkbox"]:checked',
+    type === 'radio' && value && '.form-check-input[type="radio"]:checked',
+    disabled && '.form-check-input:disabled',
+    // validation
+    valid && '.form-check-input:valid',
+    valid && value && '.form-check-input:valid:checked',
+    invalid && '.form-check-input:invalid',
+    invalid && value && '.form-check-input:invalid:checked',
+    // switch
+    context && type === 'switch' && '.form-switch.form-check .form-check-input',
+    context?.reverse &&
+      type === 'switch' &&
+      '.form-switch.form-check-reverse .form-check-input',
+    type === 'switch' && '.form-switch .form-check-input',
+    type === 'switch' && value && '.form-switch .form-check-input:checked',
+  ]);
 
-    const resolveStyle = useStyle([classes, style]);
+  const resolveStyle = useStyle([classes, style]);
 
-    const BaseFormCheckInput =
-      Platform.OS === 'web' && !useNativeComponent
-        ? FormCheckInputWeb
-        : FormCheckInputNative;
+  const BaseFormCheckInput =
+    Platform.OS === 'web' && !useNativeComponent
+      ? FormCheckInputWeb
+      : FormCheckInputNative;
 
-    return (
-      <BaseFormCheckInput
-        {...elementProps}
-        ref={modifierRef}
-        type={type}
-        value={value}
-        onFocus={() => {
-          setFocused(true);
-          onFocus();
-        }}
-        onBlur={() => {
-          setFocused(false);
-          onBlur();
-        }}
-        disabled={disabled}
-        autoFocus={autoFocus}
-        style={resolveStyle({
-          media,
-          interaction: { focus: focused, focusVisible: focused },
-        })}
-      />
-    );
-  },
-);
-
-FormCheckInput.displayName = 'FormCheckInput';
+  return (
+    <BaseFormCheckInput
+      {...elementProps}
+      ref={ref}
+      type={type}
+      value={value}
+      onFocus={() => {
+        setFocused(true);
+        onFocus();
+      }}
+      onBlur={() => {
+        setFocused(false);
+        onBlur();
+      }}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      style={resolveStyle({
+        media,
+        interaction: { focus: focused, focusVisible: focused },
+      })}
+    />
+  );
+}
 
 export default FormCheckInput;