bootstrap-rn 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-rn",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Bootstrap RN provides Bootstrap components for React Native.",
   "author": "Markus Wetzel <markuswetzel@gmx.net>",
   "license": "MIT",

package/src/components/Image.tsx

@@ -11,7 +11,7 @@ export interface ImageProps extends Omit<BaseImageProps, 'style'> {
   styleName?: StyleName;
 }
 
-const Image = React.forwardRef<BaseImage, ImageProps>((props, ref) => {
+const Image = React.forwardRef<ImageRef, ImageProps>((props, ref) => {
   const { style, styleName, ...elementProps } = props;
 
   const media = useMedia();

package/src/components/forms/Picker.tsx

@@ -1,191 +1,191 @@
-import React, { useState, useMemo } from 'react';
-import { Platform, NativeSyntheticEvent, TargetedEvent } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import useMedia from '../../hooks/useMedia';
-import { getStyles, each } from '../../utils';
-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 PickerItem from './PickerItem';
-import PickerContext from './PickerContext';
-import type {
-  FormValidationState,
-  ThemeVariables,
-  UseFormFieldProps,
-} from '../../types';
-import type { PressableProps, PressableRef } from '../Pressable';
-
-export interface MenuComponentProps {
-  children: React.ReactElement | React.ReactElement[];
-  selectedValue?: boolean | number | string | object;
-  onValueChange: (value?: boolean | number | string | object) => void;
-  onClose: () => void;
-}
-
-export interface PickerProps extends UseFormFieldProps, PressableProps {
-  children: React.ReactElement | React.ReactElement[];
-  selectedValue?: boolean | number | string | object;
-  onValueChange?: (value?: boolean | number | string | object) => void;
-  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
-  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
-  placeholder?: string;
-  placeholderTextColor?: string;
-  size?: 'sm' | 'lg';
-  disabled?: boolean;
-  valid?: boolean;
-  invalid?: boolean;
-  useNativeComponent?: boolean;
-  autoFocus?: boolean;
-  MenuComponent?: React.FC<MenuComponentProps>;
-}
-
-const styles = StyleSheet.create({
-  select: css`
-    opacity: 1;
-  `,
-  '.form-select': css`
-    width: 100%;
-    padding: $form-select-padding-y $form-select-indicator-padding
-      $form-select-padding-y $form-select-padding-x;
-    font-family: $form-select-font-family;
-    font-size: $form-select-font-size;
-    font-weight: $form-select-font-weight;
-    line-height: $form-select-font-size * $form-select-line-height;
-    color: $form-select-color;
-    background-color: $form-select-bg;
-    background-image: ${(t: ThemeVariables) =>
-      escapeSvg(t['form-select-indicator'])};
-    background-repeat: no-repeat;
-    background-position: $form-select-bg-position;
-    background-size: $form-select-bg-size;
-    border: $form-select-border-width solid $form-select-border-color;
-    border-radius: $form-select-border-radius;
-    @include platform(web) {
-      appearance: none;
-    }
-
-    &:focus {
-      border-color: $form-select-focus-border-color;
-      @include platform(web) {
-        outline-width: 0;
-        box-shadow: $form-select-focus-box-shadow;
-      }
-    }
-  `,
-  '.form-select.disabled': css`
-    color: $form-select-disabled-color;
-    background-color: $form-select-disabled-bg;
-    border-color: $form-select-disabled-border-color;
-  `,
-  '.form-select-sm': css`
-    padding-top: $form-select-padding-y-sm;
-    padding-bottom: $form-select-padding-y-sm;
-    padding-left: $form-select-padding-x-sm;
-    font-size: $form-select-font-size-sm;
-    border-radius: $form-select-border-radius-sm;
-  `,
-  '.form-select-lg': css`
-    padding-top: $form-select-padding-y-lg;
-    padding-bottom: $form-select-padding-y-lg;
-    padding-left: $form-select-padding-x-lg;
-    font-size: $form-select-font-size-lg;
-    border-radius: $form-select-border-radius-lg;
-  `,
-  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
-    [`.form-select:${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 Picker = React.forwardRef<PressableRef, PickerProps>((props, ref) => {
-  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
-
-  const {
-    children,
-    onFocus = () => {},
-    onBlur = () => {},
-    placeholderTextColor = StyleSheet.value('input-placeholder-color'),
-    size,
-    disabled = false,
-    valid = false,
-    invalid = false,
-    useNativeComponent = false,
-    autoFocus = false,
-    style,
-    styleName,
-    ...elementProps
-  } = modifierProps;
-
-  const media = useMedia();
-  const [focused, setFocused] = useState(autoFocus);
-
-  const classes = getStyles(styles, [
-    'select',
-    '.form-select',
-    disabled && '.form-select.disabled',
-    size === 'sm' && '.form-select-sm',
-    size === 'lg' && '.form-select-lg',
-    valid && '.form-select:valid',
-    invalid && '.form-select:invalid',
-  ]);
-
-  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={modifierRef}
-        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>
-  );
-});
-
-Picker.displayName = 'Picker';
-
-export default Object.assign(Picker, {
-  Item: PickerItem,
-});
+import React, { useState, useMemo } from 'react';
+import { Platform, NativeSyntheticEvent, TargetedEvent } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import useMedia from '../../hooks/useMedia';
+import { getStyles, each } from '../../utils';
+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 PickerItem from './PickerItem';
+import PickerContext from './PickerContext';
+import type {
+  FormValidationState,
+  ThemeVariables,
+  UseFormFieldProps,
+} from '../../types';
+import type { PressableProps, PressableRef } from '../Pressable';
+
+export interface MenuComponentProps {
+  children: React.ReactElement | React.ReactElement[];
+  selectedValue?: string | null | undefined;
+  onValueChange: (value: string) => void;
+  onClose: () => void;
+}
+
+export interface PickerProps extends UseFormFieldProps, PressableProps {
+  children: React.ReactElement | React.ReactElement[];
+  selectedValue?: string | null | undefined;
+  onValueChange?: (value: string) => void;
+  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  placeholder?: string;
+  placeholderTextColor?: string;
+  size?: 'sm' | 'lg';
+  disabled?: boolean;
+  valid?: boolean;
+  invalid?: boolean;
+  useNativeComponent?: boolean;
+  autoFocus?: boolean;
+  MenuComponent?: React.FC<MenuComponentProps>;
+}
+
+const styles = StyleSheet.create({
+  select: css`
+    opacity: 1;
+  `,
+  '.form-select': css`
+    width: 100%;
+    padding: $form-select-padding-y $form-select-indicator-padding
+      $form-select-padding-y $form-select-padding-x;
+    font-family: $form-select-font-family;
+    font-size: $form-select-font-size;
+    font-weight: $form-select-font-weight;
+    line-height: $form-select-font-size * $form-select-line-height;
+    color: $form-select-color;
+    background-color: $form-select-bg;
+    background-image: ${(t: ThemeVariables) =>
+      escapeSvg(t['form-select-indicator'])};
+    background-repeat: no-repeat;
+    background-position: $form-select-bg-position;
+    background-size: $form-select-bg-size;
+    border: $form-select-border-width solid $form-select-border-color;
+    border-radius: $form-select-border-radius;
+    @include platform(web) {
+      appearance: none;
+    }
+
+    &:focus {
+      border-color: $form-select-focus-border-color;
+      @include platform(web) {
+        outline-width: 0;
+        box-shadow: $form-select-focus-box-shadow;
+      }
+    }
+  `,
+  '.form-select.disabled': css`
+    color: $form-select-disabled-color;
+    background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
+  `,
+  '.form-select-sm': css`
+    padding-top: $form-select-padding-y-sm;
+    padding-bottom: $form-select-padding-y-sm;
+    padding-left: $form-select-padding-x-sm;
+    font-size: $form-select-font-size-sm;
+    border-radius: $form-select-border-radius-sm;
+  `,
+  '.form-select-lg': css`
+    padding-top: $form-select-padding-y-lg;
+    padding-bottom: $form-select-padding-y-lg;
+    padding-left: $form-select-padding-x-lg;
+    font-size: $form-select-font-size-lg;
+    border-radius: $form-select-border-radius-lg;
+  `,
+  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
+    [`.form-select:${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 Picker = React.forwardRef<PressableRef, PickerProps>((props, ref) => {
+  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
+
+  const {
+    children,
+    onFocus = () => {},
+    onBlur = () => {},
+    placeholderTextColor = StyleSheet.value('input-placeholder-color'),
+    size,
+    disabled = false,
+    valid = false,
+    invalid = false,
+    useNativeComponent = false,
+    autoFocus = false,
+    style,
+    styleName,
+    ...elementProps
+  } = modifierProps;
+
+  const media = useMedia();
+  const [focused, setFocused] = useState(autoFocus);
+
+  const classes = getStyles(styles, [
+    'select',
+    '.form-select',
+    disabled && '.form-select.disabled',
+    size === 'sm' && '.form-select-sm',
+    size === 'lg' && '.form-select-lg',
+    valid && '.form-select:valid',
+    invalid && '.form-select:invalid',
+  ]);
+
+  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={modifierRef}
+        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>
+  );
+});
+
+Picker.displayName = 'Picker';
+
+export default Object.assign(Picker, {
+  Item: PickerItem,
+});

package/src/components/forms/PickerItem.tsx

@@ -1,32 +1,32 @@
-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 type { ViewProps, ViewRef } from '../View';
-
-export interface PickerItemProps extends ViewProps {
-  label: string;
-  value?: boolean | number | string | object;
-  disabled?: boolean;
-}
-
-const PickerItem = React.forwardRef<ViewRef, PickerItemProps>((props, ref) => {
-  const { 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} />
-  );
-});
-
-PickerItem.displayName = 'PickerItem';
-
-export default PickerItem;
+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 type { ViewProps, ViewRef } from '../View';
+
+export interface PickerItemProps extends ViewProps {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+const PickerItem = React.forwardRef<ViewRef, PickerItemProps>((props, ref) => {
+  const { 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} />
+  );
+});
+
+PickerItem.displayName = 'PickerItem';
+
+export default PickerItem;

package/src/components/forms/Radio.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import type { PressableRef } from '../Pressable';
-import useForcedContext from '../../hooks/useForcedContext';
-import FormCheckInput, { FormCheckInputProps } from './FormCheckInput';
-import RadioGroup from './RadioGroup';
-import RadioContext from './RadioContext';
-
-export interface RadioProps
-  extends Omit<FormCheckInputProps, 'value' | 'type'> {
-  value?: boolean | number | string | object;
-}
-
-const Radio = React.forwardRef<PressableRef, RadioProps>((props, ref) => {
-  const { value, ...elementProps } = props;
-
-  const { selectedValue, onValueChange, disabled } =
-    useForcedContext(RadioContext);
-
-  return (
-    <FormCheckInput
-      {...elementProps}
-      ref={ref}
-      type="radio"
-      value={value === selectedValue}
-      onValueChange={() => {
-        onValueChange(value);
-      }}
-      disabled={disabled}
-    />
-  );
-});
-
-Radio.displayName = 'Radio';
-
-export default Object.assign(Radio, {
-  Group: RadioGroup,
-});
+import React from 'react';
+import type { PressableRef } from '../Pressable';
+import useForcedContext from '../../hooks/useForcedContext';
+import FormCheckInput, { FormCheckInputProps } from './FormCheckInput';
+import RadioGroup from './RadioGroup';
+import RadioContext from './RadioContext';
+
+export interface RadioProps
+  extends Omit<FormCheckInputProps, 'value' | 'type'> {
+  value: boolean | number | string | object | null;
+}
+
+const Radio = React.forwardRef<PressableRef, RadioProps>((props, ref) => {
+  const { value, ...elementProps } = props;
+
+  const { selectedValue, onValueChange, disabled } =
+    useForcedContext(RadioContext);
+
+  return (
+    <FormCheckInput
+      {...elementProps}
+      ref={ref}
+      type="radio"
+      value={value === selectedValue}
+      onValueChange={() => {
+        onValueChange(value);
+      }}
+      disabled={disabled}
+    />
+  );
+});
+
+Radio.displayName = 'Radio';
+
+export default Object.assign(Radio, {
+  Group: RadioGroup,
+});

package/src/components/forms/RadioContext.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-
-type RadioContextType = {
-  selectedValue?: boolean | number | string | object;
-  onValueChange: (value?: boolean | number | string | object) => 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/RadioGroup.tsx

@@ -1,40 +1,42 @@
-import React, { useMemo } from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import RadioContext from './RadioContext';
-
-export interface RadioGroupProps extends ViewProps {
-  selectedValue?: boolean | number | string | object;
-  onValueChange?: (value?: boolean | number | string | object) => void;
-  disabled?: boolean;
-}
-
-const RadioGroup = React.forwardRef<ViewRef, RadioGroupProps>((props, ref) => {
-  const {
-    children,
-    selectedValue,
-    onValueChange = () => {},
-    disabled = false,
-    ...elementProps
-  } = props;
-
-  const contextValue = useMemo(
-    () => ({
-      selectedValue,
-      onValueChange,
-      disabled,
-    }),
-    [selectedValue, onValueChange, disabled],
-  );
-
-  return (
-    <View {...elementProps} ref={ref} role="radiogroup">
-      <RadioContext.Provider value={contextValue}>
-        {children}
-      </RadioContext.Provider>
-    </View>
-  );
-});
-
-RadioGroup.displayName = 'RadioGroup';
-
-export default RadioGroup;
+import React, { useMemo } from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import RadioContext from './RadioContext';
+
+export interface RadioGroupProps extends ViewProps {
+  selectedValue?: boolean | number | string | object | null | undefined;
+  // We cannot determine the type used for value in Radio components.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onValueChange?: (value: any) => void;
+  disabled?: boolean;
+}
+
+const RadioGroup = React.forwardRef<ViewRef, RadioGroupProps>((props, ref) => {
+  const {
+    children,
+    selectedValue,
+    onValueChange = () => {},
+    disabled = false,
+    ...elementProps
+  } = props;
+
+  const contextValue = useMemo(
+    () => ({
+      selectedValue,
+      onValueChange,
+      disabled,
+    }),
+    [selectedValue, onValueChange, disabled],
+  );
+
+  return (
+    <View {...elementProps} ref={ref} role="radiogroup">
+      <RadioContext.Provider value={contextValue}>
+        {children}
+      </RadioContext.Provider>
+    </View>
+  );
+});
+
+RadioGroup.displayName = 'RadioGroup';
+
+export default RadioGroup;