bootstrap-rn 0.3.6 → 0.4.0

package/src/hooks/{useBackground.ts → useBackground.tsx}

@@ -1,118 +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 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,
-  };
-}
+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
+    | { 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,
+  };
+}

package/src/hooks/useList.tsx

@@ -1,56 +1,59 @@
-import React from 'react';
-import ListContext from '../components/helpers/ListContext';
-
-type Cache = {
-  count: number;
-};
-
-const wrapChildren = (children: React.ReactNode, cache: Cache) =>
-  React.Children.map(children, (child) => {
-    if (child === null) {
-      return null;
-    }
-
-    if (React.isValidElement(child) && child.type === React.Fragment) {
-      return (
-        <React.Fragment key={child.key as React.Key}>
-          {wrapChildren(child.props.children, cache)}
-        </React.Fragment>
-      );
-    }
-
-    if (React.isValidElement(child) && typeof child === 'object') {
-      // eslint-disable-next-line no-param-reassign
-      cache.count += 1;
-
-      const pos = cache.count;
-
-      return (
-        <ListContext.Provider
-          value={{
-            nth(value: number) {
-              return pos === value;
-            },
-            get first() {
-              return pos === 1;
-            },
-            get last() {
-              return pos === cache.count;
-            },
-            get length() {
-              return cache.count;
-            },
-          }}
-          key={child.key as React.Key}
-        >
-          {child}
-        </ListContext.Provider>
-      );
-    }
-
-    return null;
-  });
-
-export default function useList(children: React.ReactNode) {
-  return wrapChildren(children, { count: 0 });
-}
+import React from 'react';
+import ListContext from '../components/helpers/ListContext';
+
+type Cache = {
+  count: number;
+};
+
+const wrapChildren = (children: React.ReactNode, cache: Cache) =>
+  React.Children.map(children, (child) => {
+    if (child === null) {
+      return null;
+    }
+
+    if (React.isValidElement(child) && child.type === React.Fragment) {
+      // @ts-expect-error Type React.Fragment has a children prop.
+      const element = child.props.children;
+
+      return (
+        <React.Fragment key={child.key}>
+          {wrapChildren(element, cache)}
+        </React.Fragment>
+      );
+    }
+
+    if (React.isValidElement(child) && typeof child === 'object') {
+      // eslint-disable-next-line no-param-reassign
+      cache.count += 1;
+
+      const pos = cache.count;
+
+      return (
+        <ListContext.Provider
+          value={{
+            nth(value: number) {
+              return pos === value;
+            },
+            get first() {
+              return pos === 1;
+            },
+            get last() {
+              return pos === cache.count;
+            },
+            get length() {
+              return cache.count;
+            },
+          }}
+          key={child.key as React.Key}
+        >
+          {child}
+        </ListContext.Provider>
+      );
+    }
+
+    return null;
+  });
+
+export default function useList(children?: React.ReactNode) {
+  return wrapChildren(children, { count: 0 });
+}

package/src/hooks/useScrollbarEffects.ts

@@ -1,92 +1,94 @@
-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] || '';
-        });
-      },
-    }),
-    [],
-  );
-}
+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 | null>[],
+) {
+  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] || '';
+        });
+      },
+    }),
+    [],
+  );
+}