bootstrap-rn 0.3.2 → 0.3.4

package/src/hooks/useBackground.ts

@@ -0,0 +1,118 @@
+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 BackgroundStyle = BaseStyle & {
+  backgroundSize?: 'contain' | 'cover' | string | 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 = <T>(value: T) =>
+  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,
+  };
+}

package/src/hooks/useControlledState.ts

@@ -0,0 +1,33 @@
+import { useState, Dispatch, SetStateAction } from 'react';
+
+type ControlledState<T> = [T, Dispatch<SetStateAction<T>>];
+
+export default function useControlledState<T>(
+  defaultValue: T,
+  controlledValue: T | undefined,
+  handleChange: (value: T) => void = () => {},
+): ControlledState<T> {
+  const [stateValue, setStateValue] = useState<T>(defaultValue);
+
+  const isControlled =
+    controlledValue !== undefined && controlledValue !== null;
+
+  const value = isControlled ? controlledValue : stateValue;
+
+  const setValue: Dispatch<SetStateAction<T>> = (next: SetStateAction<T>) => {
+    const nextValue =
+      typeof next === 'function' ? (next as (prevValue: T) => T)(value) : next;
+
+    if (value === nextValue) {
+      return;
+    }
+
+    if (!isControlled) {
+      setStateValue(next);
+    }
+
+    handleChange(nextValue);
+  };
+
+  return [value, setValue];
+}

package/src/hooks/{useFixedElement.js → useFixedElement.ts}

@@ -1,9 +1,10 @@
-import { useContext, useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import Context from '../Context';
+import useForcedContext from './useForcedContext';
 
 export default function useFixedElement() {
-  const context = useContext(Context);
-  const ref = useRef();
+  const context = useForcedContext(Context);
+  const ref = useRef(null);
 
   useEffect(() => {
     const link = context.addFixedElement(ref);
@@ -11,7 +12,7 @@ export default function useFixedElement() {
     return () => {
       link.remove();
     };
-  }, []);
+  }, [context]);
 
   return ref;
 }

package/src/hooks/useForcedContext.ts

@@ -0,0 +1,10 @@
+import { useContext, Context } from 'react';
+import invariant from 'tiny-invariant';
+
+export default function useForcedContext<T>(ForcedContext: Context<T>) {
+  const context = useContext(ForcedContext);
+
+  invariant(context, `Failed to get context "${ForcedContext.displayName}".`);
+
+  return context;
+}

package/src/hooks/useIdentifier.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import Context from '../Context';
+import useForcedContext from './useForcedContext';
+
+export default function useIdentifier(prefix: string): string {
+  const context = useForcedContext(Context);
+
+  const ref = useRef<string | null>(null);
+
+  if (!ref.current) {
+    ref.current = context.generateKey(prefix);
+  }
+
+  return ref.current;
+}

package/src/hooks/useInteractionState.ts

@@ -0,0 +1,81 @@
+import { useState, useMemo } from 'react';
+import type {
+  TextInputFocusEventData,
+  NativeSyntheticEvent,
+  MouseEvent,
+  GestureResponderEvent,
+  TargetedEvent,
+} from 'react-native';
+import { useFocusRing } from '@react-native-aria/focus';
+
+type InteractionProps = {
+  onFocus?:
+    | null
+    | ((event: NativeSyntheticEvent<TargetedEvent>) => void)
+    | undefined;
+  onBlur?:
+    | null
+    | ((event: NativeSyntheticEvent<TargetedEvent>) => void)
+    | undefined;
+  onHoverIn?: null | ((event: MouseEvent) => void) | undefined;
+  onHoverOut?: null | ((event: MouseEvent) => void) | undefined;
+  onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined;
+  onPressOut?: null | ((event: GestureResponderEvent) => void) | undefined;
+  autoFocus?: boolean;
+};
+
+export default function useInteractionState({
+  onFocus,
+  onBlur,
+  onHoverIn,
+  onHoverOut,
+  onPressIn,
+  onPressOut,
+  autoFocus,
+}: InteractionProps) {
+  const [active, setActive] = useState(false);
+  const [hover, setHovered] = useState(false);
+
+  // @ts-expect-error definition is on @react-aria/focus but not on @react-native-aria/focus
+  const focusRingProps = useFocusRing({ autoFocus }) as unresolved;
+
+  const {
+    isFocused: focus,
+    isFocusVisible: focusVisible,
+    focusProps,
+  } = focusRingProps;
+
+  const interactionProps = useMemo(
+    () => ({
+      onHoverIn(event: MouseEvent) {
+        setHovered(true);
+        if (onHoverIn) onHoverIn(event);
+      },
+      onHoverOut(event: MouseEvent) {
+        setHovered(false);
+        if (onHoverOut) onHoverOut(event);
+      },
+      onFocus(event: NativeSyntheticEvent<TextInputFocusEventData>) {
+        focusProps.onFocus(event);
+        if (onFocus) onFocus(event);
+      },
+      onBlur(event: NativeSyntheticEvent<TextInputFocusEventData>) {
+        focusProps.onBlur(event);
+        if (onBlur) onBlur(event);
+      },
+      onPressIn(event: GestureResponderEvent) {
+        setActive(true);
+        if (onPressIn) onPressIn(event);
+      },
+      onPressOut(event: GestureResponderEvent) {
+        setActive(false);
+        if (onPressOut) onPressOut(event);
+      },
+    }),
+    [onFocus, onBlur, onHoverIn, onHoverOut, onPressIn, onPressOut, focusProps],
+  );
+
+  const interaction = { hover, focus, focusVisible, active };
+
+  return { interaction, interactionProps };
+}

package/src/hooks/{useList.js → useList.tsx}

@@ -1,15 +1,19 @@
 import React from 'react';
 import ListContext from '../components/helpers/ListContext';
 
-const wrapChildren = (children, cache) =>
+type Cache = {
+  count: number;
+};
+
+const wrapChildren = (children: React.ReactNode, cache: Cache) =>
   React.Children.map(children, (child) => {
     if (child === null) {
       return null;
     }
 
-    if (child.type === React.Fragment) {
+    if (React.isValidElement(child) && child.type === React.Fragment) {
       return (
-        <React.Fragment key={child.key}>
+        <React.Fragment key={child.key as React.Key}>
           {wrapChildren(child.props.children, cache)}
         </React.Fragment>
       );
@@ -24,7 +28,7 @@ const wrapChildren = (children, cache) =>
       return (
         <ListContext.Provider
           value={{
-            nth(value) {
+            nth(value: number) {
               return pos === value;
             },
             get first() {
@@ -37,7 +41,7 @@ const wrapChildren = (children, cache) =>
               return cache.count;
             },
           }}
-          key={child.key}
+          key={child.key as React.Key}
         >
           {child}
         </ListContext.Provider>
@@ -47,6 +51,6 @@ const wrapChildren = (children, cache) =>
     return null;
   });
 
-export default function useList(children) {
+export default function useList(children: React.ReactNode) {
   return wrapChildren(children, { count: 0 });
 }

package/src/hooks/{useMedia.js → useMedia.ts}

@@ -1,9 +1,10 @@
-import { useContext } from 'react';
 import Context from '../Context';
 import StyleSheet from '../style/StyleSheet';
+import useForcedContext from './useForcedContext';
+import type { MediaHandler } from '../types';
 
 export default function useMedia() {
-  const context = useContext(Context);
+  const context = useForcedContext(Context);
 
   const viewport = context.getViewport();
   const breakpoints = StyleSheet.value('grid-breakpoints');
@@ -23,5 +24,5 @@ export default function useMedia() {
     between(lower, upper) {
       return this.up(lower) && this.down(upper);
     },
-  };
+  } as MediaHandler;
 }

package/src/hooks/useModifier.ts

@@ -0,0 +1,21 @@
+import Context, { Modifiers } from '../Context';
+import { concatRefs } from '../utils';
+import useForcedContext from './useForcedContext';
+
+export default function useModifier<R, T>(
+  name: keyof Modifiers,
+  props: T,
+  ref: React.Ref<R>,
+): [Omit<T, 'ref'>, React.Ref<R>] {
+  const context = useForcedContext(Context);
+
+  const useModifierHook = context.modifiers[name];
+
+  if (!useModifierHook) {
+    return [props, ref];
+  }
+
+  const { ref: modifierRef, ...modifierProps } = useModifierHook(props, ref);
+
+  return [modifierProps, modifierRef ? concatRefs(modifierRef, ref) : ref];
+}

package/src/hooks/{useScrollbarEffects.js → useScrollbarEffects.ts}

@@ -1,82 +1,92 @@
-import { useRef, useMemo } from 'react';
-import { Platform, findNodeHandle } from 'react-native';
-
-const computeScrollbarWidth = () => {
-  const documentWidth = document.documentElement.clientWidth;
-  return Math.abs(window.innerWidth - documentWidth);
-};
-
-export default function useScrollbarEffects(elements) {
-  if (Platform.OS !== 'web') {
-    return useMemo(
-      () => ({
-        hide() {},
-        show() {},
-      }),
-      [],
-    );
-  }
-
-  const state = useRef({
-    counter: 0,
-    elements: [],
-    originalWidths: [],
-    originalBodyOverflow: '',
-  });
-
-  return useMemo(
-    () => ({
-      hide() {
-        state.current.counter += 1;
-
-        if (state.current.counter !== 1) {
-          return;
-        }
-
-        const rect = document.body.getBoundingClientRect();
-        const isBodyOverflowing = rect.left + rect.right < window.innerWidth;
-
-        // Set body and fixed elements padding adjustments.
-        const fixedElements = elements
-          .filter((ref) => ref.current)
-          .map((ref) => findNodeHandle(ref.current));
-        state.current.elements = [document.body, ...fixedElements];
-
-        state.current.originalWidths = state.current.elements.map(
-          (el) => el.style.width || '',
-        );
-
-        state.current.originalBodyOverflow = document.body.style.overflow || '';
-
-        if (isBodyOverflowing) {
-          const scrollbarWidth = computeScrollbarWidth();
-
-          state.current.elements.forEach((el) => {
-            // eslint-disable-next-line no-param-reassign
-            el.style.width = `calc(100% - ${scrollbarWidth}px)`;
-          });
-        }
-
-        // Add "overflow: hidden" to body element.
-        document.body.style.overflow = 'hidden';
-      },
-      show() {
-        state.current.counter -= 1;
-
-        if (state.current.counter !== 0) {
-          return;
-        }
-
-        // Remove "overflow: hidden" from body element.
-        document.body.style.overflow = state.current.originalBodyOverflow;
-
-        // Reset body padding adjustments.
-        state.current.elements.forEach((el, key) => {
-          // eslint-disable-next-line no-param-reassign
-          el.style.width = state.current.originalWidths[key] || '';
-        });
-      },
-    }),
-    [],
-  );
-}
+import { useRef, useMemo, RefObject } from 'react';
+import { Platform, findNodeHandle } from 'react-native';
+import type { ViewRef } from '../components/View';
+
+type ScrollbarEffectsState = {
+  counter: number;
+  elements: HTMLElement[];
+  originalWidths: string[];
+  originalBodyOverflow: string;
+};
+
+const computeScrollbarWidth = () => {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+};
+
+export default function useScrollbarEffects(elements: RefObject<ViewRef>[]) {
+  if (Platform.OS !== 'web') {
+    return useMemo(
+      () => ({
+        hide() {},
+        show() {},
+      }),
+      [],
+    );
+  }
+
+  const state = useRef<ScrollbarEffectsState>({
+    counter: 0,
+    elements: [],
+    originalWidths: [],
+    originalBodyOverflow: '',
+  });
+
+  return useMemo(
+    () => ({
+      hide() {
+        state.current.counter += 1;
+
+        if (state.current.counter !== 1) {
+          return;
+        }
+
+        const rect = document.body.getBoundingClientRect();
+        const isBodyOverflowing = rect.left + rect.right < window.innerWidth;
+
+        // Set body and fixed elements padding adjustments.
+        const fixedElements = elements
+          .filter((ref) => ref.current)
+          .map((ref) => findNodeHandle(ref.current));
+
+        // @ts-expect-error fixedElements should be of type HTMLElement[]
+        state.current.elements = [document.body, ...fixedElements];
+
+        state.current.originalWidths = state.current.elements.map(
+          (el) => el.style.width || '',
+        );
+
+        state.current.originalBodyOverflow = document.body.style.overflow || '';
+
+        if (isBodyOverflowing) {
+          const scrollbarWidth = computeScrollbarWidth();
+
+          state.current.elements.forEach((el) => {
+            // eslint-disable-next-line no-param-reassign
+            el.style.width = `calc(100% - ${scrollbarWidth}px)`;
+          });
+        }
+
+        // Add "overflow: hidden" to body element.
+        document.body.style.overflow = 'hidden';
+      },
+      show() {
+        state.current.counter -= 1;
+
+        if (state.current.counter !== 0) {
+          return;
+        }
+
+        // Remove "overflow: hidden" from body element.
+        document.body.style.overflow = state.current.originalBodyOverflow;
+
+        // Reset body padding adjustments.
+        state.current.elements.forEach((el, key) => {
+          // eslint-disable-next-line no-param-reassign
+          el.style.width = state.current.originalWidths[key] || '';
+        });
+      },
+    }),
+    [],
+  );
+}

package/src/hooks/{useStyle.js → useStyle.ts}

@@ -1,19 +1,32 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { BOOTSTRAP_RN_STYLE } from '../style/createStyle';
 import Context from '../Context';
+import type {
+  StyleProp,
+  StyleName,
+  InteractionState,
+  ExtendedStyleType,
+  BaseStyle,
+} from '../types';
+import useForcedContext from './useForcedContext';
 
-const normalize = (style) => {
+type FalsyValue = false | undefined | null | '' | 0;
+
+const normalize = <T>(style: T | T[]): T[] => {
   if (!Array.isArray(style)) {
     return [style];
   }
 
   return style
-    .filter((val) => !!val)
+    .filter((val: T | FalsyValue): val is T => !!val)
     .reduce((res, val) => [...res, ...normalize(val)], []);
 };
 
-export default function useStyle(style, styleName) {
-  const { utilities: utilitiesStyles } = useContext(Context);
+export default function useStyle<T extends BaseStyle>(
+  style: StyleProp<ExtendedStyleType<T>>,
+  styleName?: StyleName,
+) {
+  const { utilities: utilitiesStyles } = useForcedContext(Context);
 
   const utilities = useMemo(() => {
     if (!styleName) {
@@ -36,23 +49,25 @@ export default function useStyle(style, styleName) {
 
   const styles = normalize(utilities ? [style, ...utilities] : style);
 
-  return (state) => {
-    const basicStyles = [];
-    const interactionStyles = [];
+  return (state: InteractionState) => {
+    const basicStyles: T[] = [];
+    const interactionStyles: T[] = [];
 
     styles.forEach((value) => {
+      // @ts-expect-error $$typeof is defined on InteractionStyle<T> but somehow leads to this error.
       if (value && value.$$typeof === BOOTSTRAP_RN_STYLE) {
         // Style is a bootstrap style that contains basic and interaction styles.
+        // @ts-expect-error $$typeof is defined on InteractionStyle<T> but somehow leads to this error.
         const [resolvedBasicStyles, resolvedInteractionStyles] = value(state);
 
-        basicStyles.push(...resolvedBasicStyles);
-        interactionStyles.push(...resolvedInteractionStyles);
+        basicStyles.push(...(resolvedBasicStyles as T[]));
+        interactionStyles.push(...(resolvedInteractionStyles as T[]));
       } else if (typeof value === 'function') {
         // Style is some other custom function type style.
-        basicStyles.push(value(state));
+        basicStyles.push(value(state) as T);
       } else {
         // Style is basic object style.
-        basicStyles.push(value);
+        basicStyles.push(value as T);
       }
     });