bootstrap-rn 0.4.3 → 0.4.4

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

@@ -1,78 +1,79 @@
-import React from 'react';
-import {
-  // @ts-expect-error import is available
-  unstable_createElement as createElement,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
-import useBackground from '../../../hooks/useBackground';
-import type { PressableRef } from '../../Pressable';
-import type { FormCheckInputProps } from '../FormCheckInput';
-
-export interface FormCheckInputWebProps extends FormCheckInputProps {
-  style: ViewStyle[];
-}
-
-const styles = StyleSheet.create({
-  reboot: {
-    flexShrink: 0,
-    margin: 0,
-  },
-});
-
-type InputProps = {
-  style?: ViewStyle[];
-  type: 'checkbox' | 'radio';
-  checked: boolean;
-  onChange: () => void;
-  onFocus: () => void;
-  onBlur: () => void;
-  disabled: boolean;
-  id?: string;
-};
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ style, ...props }, ref) =>
-    createElement('input', { ...props, ref, style: [styles.reboot, style] }),
-);
-
-const FormCheckInputWeb = React.forwardRef<
-  PressableRef,
-  FormCheckInputWebProps
->((props, ref) => {
-  const {
-    type,
-    value,
-    onValueChange: handleValueChange,
-    onFocus = () => {},
-    onBlur = () => {},
-    disabled = false,
-    style,
-    id,
-    autoFocus,
-  } = props;
-
-  const inputBackground = useBackground(style);
-
-  return (
-    <Input
-      // @ts-expect-error We need to create a native ref here in the future.
-      ref={ref}
-      type={type === 'switch' ? 'checkbox' : type}
-      checked={value}
-      onChange={() => {
-        if (handleValueChange) handleValueChange(!value);
-      }}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      disabled={disabled}
-      style={inputBackground.style}
-      id={id}
-      autoFocus={autoFocus}
-    />
-  );
-});
-
-FormCheckInputWeb.displayName = 'FormCheckInputWeb';
-
-export default FormCheckInputWeb;
+import React from 'react';
+import {
+  // @ts-expect-error import is available
+  unstable_createElement as createElement,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import useBackground from '../../../hooks/useBackground';
+import type { PressableRef } from '../../Pressable';
+import type { FormCheckInputProps } from '../FormCheckInput';
+
+export interface FormCheckInputWebProps extends FormCheckInputProps {
+  style: ViewStyle[];
+}
+
+const styles = StyleSheet.create({
+  reboot: {
+    flexShrink: 0,
+    margin: 0,
+  },
+});
+
+type InputProps = {
+  style?: ViewStyle[];
+  type: 'checkbox' | 'radio';
+  checked: boolean;
+  onChange: () => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  disabled: boolean;
+  id?: string;
+};
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ style, ...props }, ref) =>
+    createElement('input', { ...props, ref, style: [styles.reboot, style] }),
+);
+
+const FormCheckInputWeb = React.forwardRef<
+  PressableRef,
+  FormCheckInputWebProps
+>((props, ref) => {
+  const {
+    type,
+    value,
+    onValueChange: handleValueChange,
+    onFocus = () => {},
+    onBlur = () => {},
+    disabled = false,
+    style,
+    id,
+    autoFocus,
+  } = props;
+
+  const inputBackground = useBackground(style);
+
+  return (
+    <Input
+      // @ts-expect-error We need to create a native ref here in the future.
+      ref={ref}
+      type={type === 'switch' ? 'checkbox' : type}
+      checked={value}
+      onChange={() => {
+        if (handleValueChange) handleValueChange(!value);
+      }}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      disabled={disabled}
+      // @ts-expect-error inputBackground.style should be a ViewStyle here.
+      style={inputBackground.style}
+      id={id}
+      autoFocus={autoFocus}
+    />
+  );
+});
+
+FormCheckInputWeb.displayName = 'FormCheckInputWeb';
+
+export default FormCheckInputWeb;

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

@@ -14,7 +14,6 @@ import Offcanvas from '../../offcanvas/Offcanvas';
 import useBackground from '../../../hooks/useBackground';
 import PickerNativeContext from './PickerNativeContext';
 import type { PickerProps, MenuComponentProps } from '../Picker';
-import type { BaseStyle } from '../../../types';
 import type { PickerItemProps } from '../PickerItem';
 
 export interface PickerNativeProps extends PickerProps {
@@ -50,7 +49,9 @@ const textStyleKeys = [
   'writingDirection',
 ];
 
-const extractTextStyles = (style: BaseStyle[]) => {
+const extractTextStyles = (
+  style: ReturnType<typeof useBackground>['style'],
+) => {
   const flattenedStyle = StyleUtils.flatten(style);
   const textStyles: { [key: string]: string } = {};
 

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

@@ -1,78 +1,85 @@
-import React, { useMemo, forwardRef } from 'react';
-import {
-  // @ts-expect-error web only import
-  Picker as BasePicker,
-  StyleSheet as StyleUtils,
-  TextStyle,
-} from 'react-native';
-import useBackground from '../../../hooks/useBackground';
-import PickerWebContext from './PickerWebContext';
-import type { PickerProps } from '../Picker';
-import type { PressableRef } from '../../Pressable';
-
-interface PickerWebProps extends PickerProps {
-  style: TextStyle[];
-}
-
-const PLACEHOLDER = '__PLACEHOLDER__';
-
-const getOptionStyle = (style: TextStyle[], showPlaceholder: boolean) => {
-  if (!showPlaceholder) {
-    return null;
-  }
-
-  const flattenedStyle = StyleUtils.flatten(style);
-
-  return flattenedStyle.color || null;
-};
-
-const PickerWeb = forwardRef<PressableRef, PickerWebProps>((props, ref) => {
-  const {
-    children,
-    selectedValue,
-    onValueChange = () => {},
-    onFocus = () => {},
-    onBlur = () => {},
-    placeholder,
-    placeholderTextColor,
-    disabled,
-    style,
-    ...elementProps
-  } = props;
-
-  const background = useBackground(style);
-
-  const showPlaceholder = selectedValue === undefined || selectedValue === null;
-
-  const contextValue = useMemo(
-    () => ({
-      optionColor: getOptionStyle(background.style, showPlaceholder),
-    }),
-    [background, showPlaceholder],
-  );
-
-  return (
-    <BasePicker
-      {...elementProps}
-      ref={ref}
-      selectedValue={showPlaceholder ? PLACEHOLDER : selectedValue}
-      onValueChange={onValueChange}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      disabled={disabled}
-      style={[
-        background.style,
-        showPlaceholder && { color: placeholderTextColor },
-      ]}
-    >
-      <option value={PLACEHOLDER} disabled hidden>
-        {placeholder}
-      </option>
-      <PickerWebContext.Provider value={contextValue}>
-        {children}
-      </PickerWebContext.Provider>
-    </BasePicker>
-  );
-});
-
-export default PickerWeb;
+import React, { useMemo, forwardRef } from 'react';
+import {
+  // @ts-expect-error web only import
+  Picker as BasePicker,
+  StyleSheet as StyleUtils,
+  TextStyle,
+} from 'react-native';
+import useBackground from '../../../hooks/useBackground';
+import PickerWebContext from './PickerWebContext';
+import type { PickerProps } from '../Picker';
+import type { PressableRef } from '../../Pressable';
+
+interface PickerWebProps extends PickerProps {
+  style: TextStyle[];
+}
+
+const PLACEHOLDER = '__PLACEHOLDER__';
+
+const getOptionStyle = (
+  style: ReturnType<typeof useBackground>['style'],
+  showPlaceholder: boolean,
+) => {
+  if (!showPlaceholder) {
+    return null;
+  }
+
+  const flattenedStyle = StyleUtils.flatten(style);
+
+  if ('color' in flattenedStyle && flattenedStyle.color !== undefined) {
+    return flattenedStyle.color;
+  }
+
+  return null;
+};
+
+const PickerWeb = forwardRef<PressableRef, PickerWebProps>((props, ref) => {
+  const {
+    children,
+    selectedValue,
+    onValueChange = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    placeholder,
+    placeholderTextColor,
+    disabled,
+    style,
+    ...elementProps
+  } = props;
+
+  const background = useBackground(style);
+
+  const showPlaceholder = selectedValue === undefined || selectedValue === null;
+
+  const contextValue = useMemo(
+    () => ({
+      optionColor: getOptionStyle(background.style, showPlaceholder),
+    }),
+    [background, showPlaceholder],
+  );
+
+  return (
+    <BasePicker
+      {...elementProps}
+      ref={ref}
+      selectedValue={showPlaceholder ? PLACEHOLDER : selectedValue}
+      onValueChange={onValueChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      disabled={disabled}
+      style={[
+        background.style,
+        showPlaceholder && { color: placeholderTextColor },
+      ]}
+    >
+      <option value={PLACEHOLDER} disabled hidden>
+        {placeholder}
+      </option>
+      <PickerWebContext.Provider value={contextValue}>
+        {children}
+      </PickerWebContext.Provider>
+    </BasePicker>
+  );
+});
+
+export default PickerWeb;

package/src/hooks/useBackground.tsx

@@ -1,123 +1,5 @@
-import { StyleSheet } from 'react-native';
-import type { BaseStyle } from '../types';
+import { Platform } from 'react-native';
+import useBackgroundWeb from './useBackgroundWeb';
+import useBackgroundNative from './useBackgroundNative';
 
-type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
-type PositionX = 'center' | 'left' | 'right';
-type PositionY = 'center' | 'top' | 'bottom';
-
-type BackgroundStyle = BaseStyle & {
-  backgroundSize?:
-    | 'contain'
-    | 'cover'
-    | string
-    | number
-    | { width: 'auto' | number; height: 'auto' | number };
-  backgroundPosition?: Position;
-  backgroundPositionX?:
-    | PositionX
-    | { position: PositionX; offset: string | number };
-  backgroundPositionY?:
-    | PositionY
-    | { position: PositionY; offset: string | number };
-};
-
-type PositionValue = {
-  positionX: PositionX;
-  offsetX: string | number;
-  positionY: PositionY;
-  offsetY: string | number;
-};
-
-const styles = StyleSheet.create({
-  reset: {
-    // Background repeat is not supported on native yet.
-    // @ts-expect-error web only style
-    backgroundRepeat: 'no-repeat',
-  },
-});
-
-const normalizeValue = (value: 'auto' | number | string) =>
-  typeof value === 'number' && value !== 0 ? `${value}px` : value;
-
-const resolveBackgroundSize = (style: BackgroundStyle) => {
-  const { backgroundSize } = style;
-
-  if (typeof backgroundSize !== 'object') {
-    return backgroundSize;
-  }
-
-  const { width = 'auto', height = 'auto' } = backgroundSize;
-
-  return `${normalizeValue(width)} ${normalizeValue(height)}`;
-};
-
-const resolveBackgroundPosition = (style: BackgroundStyle) => {
-  const { backgroundPosition, backgroundPositionX, backgroundPositionY } =
-    style;
-
-  if (!backgroundPosition && !backgroundPositionX && !backgroundPositionY) {
-    return null;
-  }
-
-  const value: PositionValue = {
-    positionX:
-      backgroundPosition === 'center' || backgroundPosition === 'right'
-        ? backgroundPosition
-        : 'left',
-    offsetX: 0,
-    positionY:
-      backgroundPosition === 'center' || backgroundPosition === 'bottom'
-        ? backgroundPosition
-        : 'top',
-    offsetY: 0,
-  };
-
-  if (backgroundPositionX) {
-    const { position: positionX = 'left', offset: offsetX = 0 } =
-      typeof backgroundPositionX === 'object'
-        ? backgroundPositionX
-        : { position: backgroundPositionX };
-
-    value.positionX = positionX;
-    value.offsetX = normalizeValue(offsetX);
-  }
-
-  if (backgroundPositionY) {
-    const { position: positionY = 'top', offset: offsetY = 0 } =
-      typeof backgroundPositionY === 'object'
-        ? backgroundPositionY
-        : { position: backgroundPositionY };
-
-    value.positionY = positionY;
-    value.offsetY = normalizeValue(offsetY);
-  }
-
-  const valueX = value.offsetX
-    ? `${value.positionX} ${value.offsetX}`
-    : value.positionX;
-  const valueY = value.offsetY
-    ? `${value.positionY} ${value.offsetY}`
-    : value.positionY;
-
-  return `${valueX} ${valueY}`;
-};
-
-export default function useBackground(style: BaseStyle[]) {
-  const flattenedStyle = StyleSheet.flatten(style);
-
-  const backgroundStyle: BaseStyle = {
-    // Transform background size
-    // @ts-expect-error web only style
-    backgroundSize: resolveBackgroundSize(flattenedStyle),
-    // Workaround, because some browsers do not support two-value syntax:
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x#browser_compatibility
-    backgroundPositionX: null,
-    backgroundPositionY: null,
-    backgroundPosition: resolveBackgroundPosition(flattenedStyle),
-  };
-
-  return {
-    style: [flattenedStyle, styles.reset, backgroundStyle],
-    element: null,
-  };
-}
+export default Platform.OS === 'web' ? useBackgroundWeb : useBackgroundNative;

package/src/hooks/{useBackground.native.tsx → useBackgroundNative.tsx}

@@ -156,7 +156,7 @@ const transforms = {
   },
 };
 
-export default function useBackground(style: BaseStyle[]) {
+export default function useBackgroundNative(style: BaseStyle[]) {
   const flattenedStyle = StyleSheet.flatten(style);
 
   const background: BackgroundResult = {

package/src/hooks/useBackgroundWeb.tsx

@@ -0,0 +1,123 @@
+import { StyleSheet } from 'react-native';
+import type { BaseStyle } from '../types';
+
+type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
+type PositionX = 'center' | 'left' | 'right';
+type PositionY = 'center' | 'top' | 'bottom';
+
+type BackgroundWebStyle = BaseStyle & {
+  backgroundSize?:
+    | 'contain'
+    | 'cover'
+    | string
+    | number
+    | { width: 'auto' | number; height: 'auto' | number };
+  backgroundPosition?: Position;
+  backgroundPositionX?:
+    | PositionX
+    | { position: PositionX; offset: string | number };
+  backgroundPositionY?:
+    | PositionY
+    | { position: PositionY; offset: string | number };
+};
+
+type PositionValue = {
+  positionX: PositionX;
+  offsetX: string | number;
+  positionY: PositionY;
+  offsetY: string | number;
+};
+
+const styles = StyleSheet.create({
+  reset: {
+    // Background repeat is not supported on native yet.
+    // @ts-expect-error web only style
+    backgroundRepeat: 'no-repeat',
+  },
+});
+
+const normalizeValue = (value: 'auto' | number | string) =>
+  typeof value === 'number' && value !== 0 ? `${value}px` : value;
+
+const resolveBackgroundSize = (style: BackgroundWebStyle) => {
+  const { backgroundSize } = style;
+
+  if (typeof backgroundSize !== 'object') {
+    return backgroundSize;
+  }
+
+  const { width = 'auto', height = 'auto' } = backgroundSize;
+
+  return `${normalizeValue(width)} ${normalizeValue(height)}`;
+};
+
+const resolveBackgroundPosition = (style: BackgroundWebStyle) => {
+  const { backgroundPosition, backgroundPositionX, backgroundPositionY } =
+    style;
+
+  if (!backgroundPosition && !backgroundPositionX && !backgroundPositionY) {
+    return null;
+  }
+
+  const value: PositionValue = {
+    positionX:
+      backgroundPosition === 'center' || backgroundPosition === 'right'
+        ? backgroundPosition
+        : 'left',
+    offsetX: 0,
+    positionY:
+      backgroundPosition === 'center' || backgroundPosition === 'bottom'
+        ? backgroundPosition
+        : 'top',
+    offsetY: 0,
+  };
+
+  if (backgroundPositionX) {
+    const { position: positionX = 'left', offset: offsetX = 0 } =
+      typeof backgroundPositionX === 'object'
+        ? backgroundPositionX
+        : { position: backgroundPositionX };
+
+    value.positionX = positionX;
+    value.offsetX = normalizeValue(offsetX);
+  }
+
+  if (backgroundPositionY) {
+    const { position: positionY = 'top', offset: offsetY = 0 } =
+      typeof backgroundPositionY === 'object'
+        ? backgroundPositionY
+        : { position: backgroundPositionY };
+
+    value.positionY = positionY;
+    value.offsetY = normalizeValue(offsetY);
+  }
+
+  const valueX = value.offsetX
+    ? `${value.positionX} ${value.offsetX}`
+    : value.positionX;
+  const valueY = value.offsetY
+    ? `${value.positionY} ${value.offsetY}`
+    : value.positionY;
+
+  return `${valueX} ${valueY}`;
+};
+
+export default function useBackgroundWeb(style: BaseStyle[]) {
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  const backgroundStyle: BaseStyle = {
+    // Transform background size
+    // @ts-expect-error web only style
+    backgroundSize: resolveBackgroundSize(flattenedStyle),
+    // Workaround, because some browsers do not support two-value syntax:
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x#browser_compatibility
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundPosition: resolveBackgroundPosition(flattenedStyle),
+  };
+
+  return {
+    style: [flattenedStyle, styles.reset, backgroundStyle],
+    element: null,
+  };
+}