bootstrap-rn 0.4.6 → 0.4.7

package/src/components/forms/Input.tsx

@@ -1,220 +1,220 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import TextInput, { TextInputProps, TextInputRef } from '../TextInput';
-import { getStyles, each } from '../../utils';
-import useModifier from '../../hooks/useModifier';
-import { FORM_VALIDATION_STATES } from '../../theme/proxies';
-import type {
-  FormValidationState,
-  ThemeVariables,
-  UseFormFieldProps,
-} from '../../types';
-
-export interface InputProps extends UseFormFieldProps, TextInputProps {
-  size?: 'sm' | 'lg';
-  placeholderTextColor?: string;
-  multiline?: boolean;
-  disabled?: boolean;
-  valid?: boolean;
-  invalid?: boolean;
-  readOnly?: boolean;
-  selectTextOnFocus?: boolean;
-}
-
-// Known issues:
-//
-// line-height (iOS)
-// If a line height is defined on iOS the text will be displayed on the bottom
-// of the line. As a workaround the line height is only defined for multi line
-// inputs.
-//
-// multi line height (iOS)
-// A multi line input on iOS has only the height of a single line input. As a
-// workaround we added a height of $input-height-sm + 8rem for multi line
-// inputs on iOS.
-//
-// single line height (Android)
-// If no height is defined, Android sets a text line height of 28px auto-
-// matically, which leads to a larger height than min height for the default
-// and sm size. As a workaround we set a height for single line inputs.
-const styles = StyleSheet.create({
-  '.form-control': css`
-    // display: block;
-    width: 100%;
-    min-height: $input-height; // added for bootstrap-rn
-    padding: $input-padding-y $input-padding-x;
-    font-family: $input-font-family;
-    font-size: $input-font-size;
-    font-weight: $input-font-weight;
-    @include platform(web) {
-      line-height: $input-font-size * $input-line-height;
-    }
-    color: $input-color;
-    background-color: $input-bg;
-    // background-clip: padding-box;
-    border: $input-border-width solid $input-border-color;
-    @include platform(web) {
-      appearance: none; // Fix appearance for date inputs in Safari
-    }
-
-    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of "<select>"s in CSS.
-    border-radius: $input-border-radius;
-
-    // @include box-shadow($input-box-shadow);
-    // @include transition($input-transition);
-
-    // Customize the ":focus" state to imitate native WebKit styles.
-    &:focus {
-      color: $input-focus-color;
-      background-color: $input-focus-bg;
-      border-color: $input-focus-border-color;
-      @include platform(web) {
-        outline-width: 0; // outline: 0;
-        // @if $enable-shadows {
-        //   @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-        // } @else {
-        //   // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: $input-focus-box-shadow;
-        // }
-      }
-    }
-  `,
-  '.form-control.disabled': css`
-    background-color: $input-disabled-bg;
-    border-color: $input-disabled-border-color;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  `,
-  '.form-control-sm': css`
-    min-height: $input-height-sm;
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    font-size: $input-font-size-sm;
-    @include platform(web) {
-      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
-    }
-    border-radius: $input-border-radius-sm;
-  `,
-  '.form-control-lg': css`
-    min-height: $input-height-lg;
-    padding: $input-padding-y-lg $input-padding-x-lg;
-    font-size: $input-font-size-lg;
-    @include platform(web) {
-      line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn
-    }
-    border-radius: $input-border-radius-lg;
-  `,
-  '.form-control:not(textarea)': css`
-    @include platform(android) {
-      height: $input-height; // added for bootstrap-rn
-    }
-  `,
-  '.form-control-sm:not(textarea)': css`
-    @include platform(android) {
-      height: $input-height-sm; // added for bootstrap-rn
-    }
-  `,
-  '.form-control-lg:not(textarea)': css`
-    @include platform(android) {
-      height: $input-height-lg; // added for bootstrap-rn
-    }
-  `,
-  'textarea.form-control': css`
-    vertical-align: top; // added for bootstrap-rn
-    min-height: $input-height;
-
-    @include platform(ios) {
-      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
-    }
-    @include platform(native) {
-      line-height: $input-font-size * $input-line-height; // added for bootstrap-rn
-    }
-  `,
-  'textarea.form-control-sm': css`
-    min-height: $input-height-sm;
-
-    @include platform(ios) {
-      // TODO: Adjust ios height to sm size
-      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
-    }
-    @include platform(native) {
-      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
-    }
-  `,
-  'textarea.form-control-lg': css`
-    min-height: $input-height-lg;
-
-    @include platform(ios) {
-      // TODO: Adjust ios height to lg size
-      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
-    }
-    @include platform(native) {
-      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
-    }
-  `,
-  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
-    [`.form-control:${state}`]: css`
-      border-color: ${(t: ThemeVariables) => data(t).color};
-
-      &:focus {
-        border-color: ${(t: ThemeVariables) => data(t).color};
-        @include platform(web) {
-          box-shadow: 0 0 $input-btn-focus-blur $input-focus-width
-            rgba(
-              ${(t: ThemeVariables) => data(t).color},
-              $input-btn-focus-color-opacity
-            );
-        }
-      }
-    `,
-  })),
-});
-
-const Input = React.forwardRef<TextInputRef, InputProps>((props, ref) => {
-  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
-
-  const {
-    size,
-    placeholderTextColor = StyleSheet.value('input-placeholder-color'),
-    multiline = false,
-    disabled = false,
-    valid = false,
-    invalid = false,
-    readOnly = false,
-    selectTextOnFocus = false,
-    style,
-    ...elementProps
-  } = modifierProps;
-
-  const classes = getStyles(styles, [
-    '.form-control',
-    disabled && '.form-control.disabled',
-    size === 'sm' && '.form-control-sm',
-    size === 'lg' && '.form-control-lg',
-    !multiline && '.form-control:not(textarea)',
-    !multiline && size === 'sm' && '.form-control-sm:not(textarea)',
-    !multiline && size === 'lg' && '.form-control-lg:not(textarea)',
-    multiline && 'textarea.form-control',
-    multiline && size === 'sm' && 'textarea.form-control-sm',
-    multiline && size === 'lg' && 'textarea.form-control-lg',
-    valid && '.form-control:valid',
-    invalid && '.form-control:invalid',
-  ]);
-
-  return (
-    <TextInput
-      {...elementProps}
-      ref={modifierRef}
-      placeholderTextColor={placeholderTextColor}
-      multiline={multiline}
-      disabled={disabled}
-      readOnly={disabled ? true : readOnly}
-      selectTextOnFocus={disabled ? false : selectTextOnFocus}
-      style={[classes, style]}
-    />
-  );
-});
-
-Input.displayName = 'Input';
-
-export default Input;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import TextInput, { TextInputProps, TextInputRef } from '../TextInput';
+import { getStyles, each } from '../../utils';
+import useModifier from '../../hooks/useModifier';
+import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+import type {
+  FormValidationState,
+  ThemeVariables,
+  UseFormFieldProps,
+} from '../../types';
+
+export interface InputProps extends UseFormFieldProps, TextInputProps {
+  size?: 'sm' | 'lg';
+  placeholderTextColor?: string;
+  multiline?: boolean;
+  disabled?: boolean;
+  valid?: boolean;
+  invalid?: boolean;
+  readOnly?: boolean;
+  selectTextOnFocus?: boolean;
+}
+
+// Known issues:
+//
+// line-height (iOS)
+// If a line height is defined on iOS the text will be displayed on the bottom
+// of the line. As a workaround the line height is only defined for multi line
+// inputs.
+//
+// multi line height (iOS)
+// A multi line input on iOS has only the height of a single line input. As a
+// workaround we added a height of $input-height-sm + 8rem for multi line
+// inputs on iOS.
+//
+// single line height (Android)
+// If no height is defined, Android sets a text line height of 28px auto-
+// matically, which leads to a larger height than min height for the default
+// and sm size. As a workaround we set a height for single line inputs.
+const styles = StyleSheet.create({
+  '.form-control': css`
+    // display: block;
+    width: 100%;
+    min-height: $input-height; // added for bootstrap-rn
+    padding: $input-padding-y $input-padding-x;
+    font-family: $input-font-family;
+    font-size: $input-font-size;
+    font-weight: $input-font-weight;
+    @include platform(web) {
+      line-height: $input-font-size * $input-line-height;
+    }
+    color: $input-color;
+    background-color: $input-bg;
+    // background-clip: padding-box;
+    border: $input-border-width solid $input-border-color;
+    @include platform(web) {
+      appearance: none; // Fix appearance for date inputs in Safari
+    }
+
+    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of "<select>"s in CSS.
+    border-radius: $input-border-radius;
+
+    // @include box-shadow($input-box-shadow);
+    // @include transition($input-transition);
+
+    // Customize the ":focus" state to imitate native WebKit styles.
+    &:focus {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      @include platform(web) {
+        outline-style: none; // outline: 0;
+        // @if $enable-shadows {
+        //   @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+        // } @else {
+        //   // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $input-focus-box-shadow;
+        // }
+      }
+    }
+  `,
+  '.form-control.disabled': css`
+    background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  `,
+  '.form-control-sm': css`
+    min-height: $input-height-sm;
+    padding: $input-padding-y-sm $input-padding-x-sm;
+    font-size: $input-font-size-sm;
+    @include platform(web) {
+      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
+    }
+    border-radius: $input-border-radius-sm;
+  `,
+  '.form-control-lg': css`
+    min-height: $input-height-lg;
+    padding: $input-padding-y-lg $input-padding-x-lg;
+    font-size: $input-font-size-lg;
+    @include platform(web) {
+      line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn
+    }
+    border-radius: $input-border-radius-lg;
+  `,
+  '.form-control:not(textarea)': css`
+    @include platform(android) {
+      height: $input-height; // added for bootstrap-rn
+    }
+  `,
+  '.form-control-sm:not(textarea)': css`
+    @include platform(android) {
+      height: $input-height-sm; // added for bootstrap-rn
+    }
+  `,
+  '.form-control-lg:not(textarea)': css`
+    @include platform(android) {
+      height: $input-height-lg; // added for bootstrap-rn
+    }
+  `,
+  'textarea.form-control': css`
+    vertical-align: top; // added for bootstrap-rn
+    min-height: $input-height;
+
+    @include platform(ios) {
+      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
+    }
+    @include platform(native) {
+      line-height: $input-font-size * $input-line-height; // added for bootstrap-rn
+    }
+  `,
+  'textarea.form-control-sm': css`
+    min-height: $input-height-sm;
+
+    @include platform(ios) {
+      // TODO: Adjust ios height to sm size
+      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
+    }
+    @include platform(native) {
+      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
+    }
+  `,
+  'textarea.form-control-lg': css`
+    min-height: $input-height-lg;
+
+    @include platform(ios) {
+      // TODO: Adjust ios height to lg size
+      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
+    }
+    @include platform(native) {
+      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
+    }
+  `,
+  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
+    [`.form-control:${state}`]: css`
+      border-color: ${(t: ThemeVariables) => data(t).color};
+
+      &:focus {
+        border-color: ${(t: ThemeVariables) => data(t).color};
+        @include platform(web) {
+          box-shadow: 0 0 $input-btn-focus-blur $input-focus-width
+            rgba(
+              ${(t: ThemeVariables) => data(t).color},
+              $input-btn-focus-color-opacity
+            );
+        }
+      }
+    `,
+  })),
+});
+
+const Input = React.forwardRef<TextInputRef, InputProps>((props, ref) => {
+  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
+
+  const {
+    size,
+    placeholderTextColor = StyleSheet.value('input-placeholder-color'),
+    multiline = false,
+    disabled = false,
+    valid = false,
+    invalid = false,
+    readOnly = false,
+    selectTextOnFocus = false,
+    style,
+    ...elementProps
+  } = modifierProps;
+
+  const classes = getStyles(styles, [
+    '.form-control',
+    disabled && '.form-control.disabled',
+    size === 'sm' && '.form-control-sm',
+    size === 'lg' && '.form-control-lg',
+    !multiline && '.form-control:not(textarea)',
+    !multiline && size === 'sm' && '.form-control-sm:not(textarea)',
+    !multiline && size === 'lg' && '.form-control-lg:not(textarea)',
+    multiline && 'textarea.form-control',
+    multiline && size === 'sm' && 'textarea.form-control-sm',
+    multiline && size === 'lg' && 'textarea.form-control-lg',
+    valid && '.form-control:valid',
+    invalid && '.form-control:invalid',
+  ]);
+
+  return (
+    <TextInput
+      {...elementProps}
+      ref={modifierRef}
+      placeholderTextColor={placeholderTextColor}
+      multiline={multiline}
+      disabled={disabled}
+      readOnly={disabled ? true : readOnly}
+      selectTextOnFocus={disabled ? false : selectTextOnFocus}
+      style={[classes, style]}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+
+export default Input;

package/src/components/forms/internals/PickerNative.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useMemo } from 'react';
 import {
   TextStyle,
-  TextInputFocusEventData,
-  NativeSyntheticEvent,
-  TargetedEvent,
+  FocusEvent,
+  BlurEvent,
   StyleSheet as StyleUtils,
 } from 'react-native';
 import StyleSheet from '../../../style/StyleSheet';
@@ -97,7 +96,7 @@ function DefaultMenuComponent({
   );
 
   return (
-    <Offcanvas placement="bottom" visible onToggle={handleClose}>
+    <Offcanvas placement="bottom" visible onClose={handleClose}>
       <Offcanvas.Body contentContainerStyle={styles.menu}>
         <PickerNativeContext.Provider value={contextValue}>
           {children}
@@ -141,12 +140,12 @@ const PickerNative = React.forwardRef<PressableRef, PickerNativeProps>(
       setVisible(false);
     };
 
-    const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {
-      onFocus(event as NativeSyntheticEvent<TextInputFocusEventData>);
+    const handleFocus = (event: FocusEvent) => {
+      onFocus(event);
     };
 
-    const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {
-      onBlur(event as NativeSyntheticEvent<TextInputFocusEventData>);
+    const handleBlur = (event: BlurEvent) => {
+      onBlur(event);
     };
 
     return (
@@ -158,10 +157,10 @@ const PickerNative = React.forwardRef<PressableRef, PickerNativeProps>(
           onPress={() => {
             setVisible(true);
           }}
-          onFocus={(event: NativeSyntheticEvent<TargetedEvent>) => {
+          onFocus={(event: FocusEvent) => {
             handleFocus(event);
           }}
-          onBlur={(event: NativeSyntheticEvent<TargetedEvent>) => {
+          onBlur={(event: BlurEvent) => {
             handleBlur(event);
           }}
           disabled={disabled}

package/src/components/helpers/BackdropHandler.tsx

@@ -1,126 +1,14 @@
-import React, { useEffect, useMemo, RefObject } from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
+import React from 'react';
+import { StyleSheet } from 'react-native';
 import Pressable from '../Pressable';
-import { ViewRef } from '../View';
-
-type BackdropType = boolean | 'static';
-type AutoCloseType = boolean | string;
-
-const styles = StyleSheet.create({
-  handler: css`
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    position: absolute;
-    flex-grow: 1;
-  `,
-});
-
-const initialState = {
-  waitingForMouseUp: false,
-  ignoreBackdropClick: false,
-};
 
 interface BackdropHandlerProps {
-  toggleRef?: RefObject<ViewRef | null>;
-  dialogRef: RefObject<ViewRef | null>;
   onClose?: () => void;
-  autoClose?: AutoCloseType;
-  backdrop?: BackdropType;
+  backdrop?: boolean | 'static';
 }
 
 function BackdropHandler(props: BackdropHandlerProps) {
-  const {
-    toggleRef,
-    dialogRef,
-    onClose: handleClose,
-    backdrop = true,
-    autoClose = 'outside',
-  } = props;
-
-  if (Platform.OS === 'web') {
-    const state = useMemo(() => initialState, []);
-
-    useEffect(() => {
-      const toggle = toggleRef
-        ? // @ts-expect-error web only method for converting to HTMLElement
-          (toggleRef.current as HTMLElement)
-        : undefined;
-      // @ts-expect-error web only method for converting to HTMLElement
-      const dialog = dialogRef.current as HTMLElement;
-
-      const handleDialogMouseDown = () => {
-        state.waitingForMouseUp = true;
-      };
-
-      // Workaround for chrome, because chrome does not fire onMouseDown event
-      // for dialog when clicking on the <select> menu.
-      const handleDialogMouseUp = () => {
-        state.ignoreBackdropClick = true;
-      };
-
-      const handleDocumentClick = ({ target }: MouseEvent) => {
-        const isDialogClick =
-          state.ignoreBackdropClick ||
-          (dialog && dialog.contains(target as Node));
-
-        if (backdrop === 'static' || autoClose === false) {
-          return;
-        }
-
-        // Click outside -> return if autoClose is inside.
-        if (!isDialogClick && autoClose === 'inside') {
-          return;
-        }
-
-        // Click inside / on dialog -> return if autoClose is outside.
-        if (isDialogClick) {
-          state.ignoreBackdropClick = false;
-
-          if (autoClose === 'outside') {
-            return;
-          }
-        }
-
-        // Click on toggle -> return always.
-        if (toggle && (target === toggle || toggle.contains(target as Node))) {
-          return;
-        }
-
-        handleClose?.();
-      };
-
-      const handleDocumentMouseUp = () => {
-        if (state.waitingForMouseUp) {
-          state.ignoreBackdropClick = true;
-        }
-
-        state.waitingForMouseUp = false;
-      };
-
-      if (dialog) {
-        dialog.addEventListener('mousedown', handleDialogMouseDown);
-        dialog.addEventListener('mouseup', handleDialogMouseUp);
-      }
-      // See https://github.com/necolas/react-native-web/issues/2115
-      document.addEventListener('click', handleDocumentClick, true);
-      document.addEventListener('mouseup', handleDocumentMouseUp, true);
-
-      return () => {
-        if (dialog) {
-          dialog.removeEventListener('mousedown', handleDialogMouseDown);
-          dialog.removeEventListener('mouseup', handleDialogMouseUp);
-        }
-        document.removeEventListener('click', handleDocumentClick, true);
-        document.removeEventListener('mouseup', handleDocumentMouseUp, true);
-      };
-    }, [backdrop, autoClose]);
-
-    return null;
-  }
+  const { onClose: handleClose, backdrop = true } = props;
 
   if (backdrop !== true) {
     return null;
@@ -128,7 +16,7 @@ function BackdropHandler(props: BackdropHandlerProps) {
 
   return (
     <Pressable
-      style={styles.handler}
+      style={[StyleSheet.absoluteFill, { flexGrow: 1 }]}
       onPress={() => {
         handleClose?.();
       }}
@@ -138,6 +26,4 @@ function BackdropHandler(props: BackdropHandlerProps) {
   );
 }
 
-BackdropHandler.displayName = 'BackdropHandler';
-
 export default BackdropHandler;

package/src/components/helpers/BackdropHandler.web.tsx

@@ -0,0 +1,6 @@
+// We handle everything in useOverlay for web, so this is a noop.
+function BackdropHandler() {
+  return null;
+}
+
+export default BackdropHandler;