bootstrap-rn 0.4.10 → 0.4.12

package/src/components/collapse/Collapse.tsx

@@ -24,6 +24,7 @@ function Collapse(props: CollapseProps & React.RefAttributes<ViewRef>) {
 }
 
 export default Object.assign(Collapse, {
+  Context: CollapseContext,
   Provider: CollapseProvider,
   useToggle: useToggleCollapse,
 });

package/src/components/forms/FormCheckInput.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useState } from 'react';
-import { Platform } from 'react-native';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
 import { getStyles, each } from '../../utils';
@@ -10,8 +9,7 @@ import useModifier from '../../hooks/useModifier';
 import { FORM_VALIDATION_STATES } from '../../theme/proxies';
 import { escapeSvg } from '../../theme/functions';
 import FormCheckContext from './FormCheckContext';
-import FormCheckInputWeb from './internals/FormCheckInputWeb';
-import FormCheckInputNative from './internals/FormCheckInputNative';
+import BaseFormCheckInput from './internals/FormCheckInput';
 import type {
   ExtendedViewStyle,
   FormValidationState,
@@ -29,7 +27,6 @@ export interface FormCheckInputProps extends UseFormFieldProps {
   disabled?: boolean;
   valid?: boolean;
   invalid?: boolean;
-  useNativeComponent?: boolean;
   autoFocus?: boolean;
   hitSlop?: number;
   style?: StyleProp<ExtendedViewStyle>;
@@ -192,7 +189,6 @@ function FormCheckInput(
     disabled = context ? context.disabled : false,
     valid = context ? context.valid : false,
     invalid = context ? context.invalid : false,
-    useNativeComponent = false,
     autoFocus = false,
     style,
     ...elementProps
@@ -229,11 +225,6 @@ function FormCheckInput(
 
   const resolveStyle = useStyle([classes, style]);
 
-  const BaseFormCheckInput =
-    Platform.OS === 'web' && !useNativeComponent
-      ? FormCheckInputWeb
-      : FormCheckInputNative;
-
   return (
     <BaseFormCheckInput
       {...elementProps}

package/src/components/forms/Input.tsx

@@ -1,219 +1,219 @@
-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
-            );
-        }
-      }
-    `,
-  })),
-});
-
-function Input(props: InputProps & React.RefAttributes<TextInputRef>) {
-  const modifierProps = useModifier('useFormField', props);
-
-  const {
-    ref,
-    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={ref}
-      placeholderTextColor={placeholderTextColor}
-      multiline={multiline}
-      disabled={disabled}
-      readOnly={disabled ? true : readOnly}
-      selectTextOnFocus={disabled ? false : selectTextOnFocus}
-      style={[classes, style]}
-    />
-  );
-}
-
-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
+            );
+        }
+      }
+    `,
+  })),
+});
+
+function Input(props: InputProps & React.RefAttributes<TextInputRef>) {
+  const modifierProps = useModifier('useFormField', props);
+
+  const {
+    ref,
+    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={ref}
+      placeholderTextColor={placeholderTextColor}
+      multiline={multiline}
+      disabled={disabled}
+      readOnly={disabled ? true : readOnly}
+      selectTextOnFocus={disabled ? false : selectTextOnFocus}
+      style={[classes, style]}
+    />
+  );
+}
+
+export default Input;

package/src/components/forms/Picker.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useMemo } from 'react';
-import { Platform, NativeSyntheticEvent, TargetedEvent } from 'react-native';
+import React, { useState } from 'react';
+import { NativeSyntheticEvent, TargetedEvent } from 'react-native';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
 import useMedia from '../../hooks/useMedia';
@@ -8,10 +8,8 @@ import { FORM_VALIDATION_STATES } from '../../theme/proxies';
 import { escapeSvg } from '../../theme/functions';
 import useStyle from '../../hooks/useStyle';
 import useModifier from '../../hooks/useModifier';
-import PickerWeb from './internals/PickerWeb';
-import PickerNative from './internals/PickerNative';
+import BasePicker from './internals/Picker';
 import PickerItem, { PickerItemProps } from './PickerItem';
-import PickerContext from './PickerContext';
 import type {
   FormValidationState,
   ThemeVariables,
@@ -40,7 +38,6 @@ export interface PickerProps extends UseFormFieldProps, PressableProps {
   disabled?: boolean;
   valid?: boolean;
   invalid?: boolean;
-  useNativeComponent?: boolean;
   autoFocus?: boolean;
   MenuComponent?: React.FC<MenuComponentProps>;
 }
@@ -128,7 +125,6 @@ function Picker(props: PickerProps & React.RefAttributes<PressableRef>) {
     disabled = false,
     valid = false,
     invalid = false,
-    useNativeComponent = false,
     autoFocus = false,
     style,
     styleName,
@@ -150,40 +146,28 @@ function Picker(props: PickerProps & React.RefAttributes<PressableRef>) {
 
   const resolveStyle = useStyle([classes, style], styleName);
 
-  const BasePicker =
-    Platform.OS === 'web' && !useNativeComponent ? PickerWeb : PickerNative;
-
-  const contextValue = useMemo(
-    () => ({
-      useNativeComponent,
-    }),
-    [useNativeComponent],
-  );
-
   return (
-    <PickerContext.Provider value={contextValue}>
-      <BasePicker
-        {...elementProps}
-        ref={ref}
-        placeholderTextColor={placeholderTextColor}
-        onFocus={(event) => {
-          setFocused(true);
-          onFocus(event);
-        }}
-        onBlur={(event) => {
-          setFocused(false);
-          onBlur(event);
-        }}
-        disabled={disabled}
-        autoFocus={autoFocus}
-        style={resolveStyle({
-          media,
-          interaction: { focus: focused, focusVisible: focused },
-        })}
-      >
-        {children}
-      </BasePicker>
-    </PickerContext.Provider>
+    <BasePicker
+      {...elementProps}
+      ref={ref}
+      placeholderTextColor={placeholderTextColor}
+      onFocus={(event: NativeSyntheticEvent<TargetedEvent>) => {
+        setFocused(true);
+        onFocus(event);
+      }}
+      onBlur={(event: NativeSyntheticEvent<TargetedEvent>) => {
+        setFocused(false);
+        onBlur(event);
+      }}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      style={resolveStyle({
+        media,
+        interaction: { focus: focused, focusVisible: focused },
+      })}
+    >
+      {children}
+    </BasePicker>
   );
 }
 

package/src/components/forms/PickerItem.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import { Platform } from 'react-native';
-import PickerContext from './PickerContext';
-import useForcedContext from '../../hooks/useForcedContext';
-import PickerWebItem from './internals/PickerWebItem';
-import PickerNativeItem from './internals/PickerNativeItem';
+import BasePickerItem from './internals/PickerItem';
 import type { ViewProps, ViewRef } from '../View';
 
 export interface PickerItemProps extends ViewProps {
@@ -15,13 +11,6 @@ export interface PickerItemProps extends ViewProps {
 function PickerItem(props: PickerItemProps & React.RefAttributes<ViewRef>) {
   const { ref, label, value, disabled = false } = props;
 
-  const { useNativeComponent } = useForcedContext(PickerContext);
-
-  const BasePickerItem =
-    Platform.OS === 'web' && !useNativeComponent
-      ? PickerWebItem
-      : PickerNativeItem;
-
   return (
     <BasePickerItem ref={ref} label={label} value={value} disabled={disabled} />
   );

package/src/components/forms/Radio.tsx

@@ -33,5 +33,6 @@ function Radio(props: RadioProps & React.RefAttributes<PressableRef>) {
 }
 
 export default Object.assign(Radio, {
+  Context: RadioContext,
   Group: RadioGroup,
 });

package/src/components/forms/RadioContext.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-
-type RadioContextType = {
-  selectedValue?: boolean | number | string | object | null | undefined;
-  onValueChange: (value: boolean | number | string | object | null) => void;
-  disabled: boolean;
-};
-
-const RadioContext = React.createContext<RadioContextType | null>(null);
-
-RadioContext.displayName = 'RadioContext';
-
-export default RadioContext;
+import React from 'react';
+
+type RadioContextType = {
+  selectedValue?: boolean | number | string | object | null | undefined;
+  onValueChange: (value: boolean | number | string | object | null) => void;
+  disabled: boolean;
+};
+
+const RadioContext = React.createContext<RadioContextType | null>(null);
+
+RadioContext.displayName = 'RadioContext';
+
+export default RadioContext;

package/src/components/forms/internals/{FormCheckInputNative.tsx → FormCheckInput.tsx}

@@ -4,12 +4,12 @@ import Pressable, { PressableRef } from '../../Pressable';
 import useBackground from '../../../hooks/useBackground';
 import type { FormCheckInputProps } from '../FormCheckInput';
 
-export interface FormCheckInputNativeProps extends FormCheckInputProps {
+export interface BaseFormCheckInputProps extends FormCheckInputProps {
   style: ViewStyle[];
 }
 
-function FormCheckInputNative(
-  props: FormCheckInputNativeProps & React.RefAttributes<PressableRef>,
+function FormCheckInput(
+  props: BaseFormCheckInputProps & React.RefAttributes<PressableRef>,
 ) {
   const {
     ref,
@@ -46,4 +46,4 @@ function FormCheckInputNative(
   );
 }
 
-export default FormCheckInputNative;
+export default FormCheckInput;