@procivis/one-react-native-components 0.1.63

package/src/utils/date.ts

@@ -0,0 +1,49 @@
+// Date & Time formatted as specified in SW-610
+
+import { NativeModules } from 'react-native';
+
+// OS locale
+const systemLocale: string = NativeModules.I18nManager?.localeIdentifier
+  ?.replace(/_/g, '-')
+  .split('#')[0]
+  .replace(/-$/, '');
+
+/**
+ * Date only format
+ */
+export const formatDate = (date: Date, locale?: string, options?: Intl.DateTimeFormatOptions) => {
+  try {
+    return date.toLocaleDateString(locale || systemLocale, options);
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Time only format
+ */
+export const formatTime = (date: Date, locale?: string) => {
+  try {
+    return date.toLocaleTimeString(locale || systemLocale, { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Date and time format
+ */
+export const formatDateTime = (date: Date, locale?: string) => {
+  try {
+    return date.toLocaleString(locale || systemLocale, {
+      hour: '2-digit',
+      minute: '2-digit',
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour12: locale === 'en-US',
+    });
+  } catch {
+    return undefined;
+  }
+};

package/src/utils/hooks/header/on-scroll-header-state.tsx

@@ -0,0 +1,16 @@
+import { useCallback, useState } from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+export const useOnScrollHeaderState = (offset = 30) => {
+  const [titleVisible, setTitleVisible] = useState(false);
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const scrollOffset = event.nativeEvent.contentOffset.y;
+      setTitleVisible(scrollOffset > offset);
+    },
+    [offset],
+  );
+
+  return { onScroll, titleVisible };
+};

package/src/utils/hooks/index.ts

@@ -0,0 +1,5 @@
+import { useOnScrollHeaderState } from './header/on-scroll-header-state';
+import { useListContentInset } from './list/list-content-inset';
+
+export { useOnScrollHeaderState };
+export { useListContentInset };

package/src/utils/hooks/list/list-content-inset.ts

@@ -0,0 +1,24 @@
+import { Platform, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+type ListContentInsetProps = {
+  additionalBottomPadding?: number;
+  headerHeight?: number;
+  modalPresentation?: boolean;
+};
+
+export const useListContentInset = (
+  { additionalBottomPadding = 54, headerHeight = 48, modalPresentation = false }: ListContentInsetProps = {
+    additionalBottomPadding: 54,
+    headerHeight: 48,
+    modalPresentation: false,
+  },
+) => {
+  const { top, bottom } = useSafeAreaInsets();
+  const topSafeAreaInset = !modalPresentation || Platform.OS === 'android' ? top : 0;
+  const contentInsetsStyle: ViewStyle = {
+    paddingBottom: bottom + additionalBottomPadding,
+    paddingTop: topSafeAreaInset + headerHeight,
+  };
+  return contentInsetsStyle;
+};

package/src/utils/index.ts

@@ -0,0 +1,19 @@
+import ContrastingStatusBar from './contrasting-status-bar';
+import { formatDate, formatDateTime, formatTime } from './date';
+import { useBlockOSBackNavigation } from './navigation';
+import { useForwardedRef } from './ref';
+import { concatTestID } from './testID';
+import { useMemoAsync } from './useMemoAsync';
+
+export {
+  concatTestID,
+  ContrastingStatusBar,
+  formatDate,
+  formatDateTime,
+  formatTime,
+  useBlockOSBackNavigation,
+  useForwardedRef,
+  useMemoAsync,
+};
+
+export * from './hooks';

package/src/utils/navigation.ts

@@ -0,0 +1,37 @@
+import { NavigationProp, useIsFocused, useNavigation } from '@react-navigation/native';
+import { useEffect } from 'react';
+import { BackHandler } from 'react-native';
+
+/**
+ * Prevent OS back navigation
+ * * iOS: block back swipe gesture
+ * * Android: block back button from system task bar
+ * @param block Whether to prevent the default behavior (default: true)
+ * @param onAndroidBack (Android only) Custom callback triggered when OS back button is pressed while blocked
+ *   * return `false` to allow back navigation, return `true` to block back navigation
+ */
+export const useBlockOSBackNavigation = (block: boolean = true, onAndroidBack?: () => boolean) => {
+  const navigation = useNavigation<NavigationProp<{}>>();
+  const isFocused = useIsFocused();
+
+  // iOS: block back swipe (via screen options)
+  useEffect(() => {
+    if (block) {
+      navigation.setOptions({ gestureEnabled: false });
+      return () => navigation.setOptions({ gestureEnabled: true });
+    }
+    return undefined;
+  }, [block, navigation]);
+
+  // Anroid: block system back button
+  useEffect(() => {
+    if (block && isFocused) {
+      const handler = () => {
+        return onAndroidBack?.() ?? true;
+      };
+      BackHandler.addEventListener('hardwareBackPress', handler);
+      return () => BackHandler.removeEventListener('hardwareBackPress', handler);
+    }
+    return undefined;
+  }, [block, isFocused, onAndroidBack]);
+};

package/src/utils/ref.ts

@@ -0,0 +1,39 @@
+import React, { useMemo, useRef } from 'react';
+
+const isWritable = <T extends Object>(obj: T, key: keyof T) => {
+  const desc =
+    Object.getOwnPropertyDescriptor(obj, key) || Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), key) || {};
+  return Boolean(desc.writable);
+};
+
+/**
+ * Transforms a forwarded ref to a locally usable reference object
+ * @example
+ * const Component = forwardRef<RefComponent, Props>((props, ref) => {
+ *    const [forwardedRef, refObject] = useForwardedRef(ref);
+ *    const onAction = useCallback(() => doSomething(refObject.current), [refObject]);
+ *    return <RefComponent ref={forwardedRef} {...props} />;
+ * }
+ */
+export const useForwardedRef = <Component extends React.Component<any> | React.ComponentClass<any>>(
+  passedRef?: React.Ref<Component>,
+) => {
+  const localRef = useRef<Component>(null);
+  return useMemo<[React.Ref<Component>, React.RefObject<Component>]>(() => {
+    const ref: React.MutableRefObject<Component | null> = localRef;
+    const forwardedRef: React.Ref<Component> = (instance: Component | null) => {
+      ref.current = instance;
+      if (passedRef) {
+        if (passedRef instanceof Function) {
+          passedRef(instance);
+        } else if (isWritable(passedRef, 'current')) {
+          try {
+            (passedRef as any).current = instance;
+          } catch (e) {}
+        }
+      }
+    };
+
+    return [forwardedRef, ref as React.RefObject<Component>];
+  }, [passedRef]);
+};

package/src/utils/testID.test.ts

@@ -0,0 +1,20 @@
+import { concatTestID } from './testID';
+
+describe('concatTestID', () => {
+  it('concatenates testID parts', () => {
+    expect(concatTestID('A')).toBe('A');
+    expect(concatTestID('A', 'B')).toBe('A.B');
+    expect(concatTestID('A', 'B', 'C')).toBe('A.B.C');
+  });
+
+  it('recognizes missing parts', () => {
+    expect(concatTestID('')).toBe(undefined);
+    expect(concatTestID(undefined)).toBe(undefined);
+    expect(concatTestID('', 'something')).toBe(undefined);
+    expect(concatTestID(undefined, 'something')).toBe(undefined);
+    expect(concatTestID('something', '')).toBe(undefined);
+    expect(concatTestID('something', undefined)).toBe(undefined);
+    expect(concatTestID('something', '', 'somethingElse')).toBe(undefined);
+    expect(concatTestID('something', undefined, 'somethingElse')).toBe(undefined);
+  });
+});

package/src/utils/testID.ts

@@ -0,0 +1,9 @@
+/**
+ * Create `testID` prop by concatenating parts
+ * @returns {string} concatenated identifier or undefined if one part is missing
+ */
+export function concatTestID(part1: string, ...args: Array<string>): string;
+export function concatTestID(part1: string | undefined, ...args: Array<string | undefined>): string | undefined;
+export function concatTestID(part1: string | undefined, ...args: Array<string | undefined>): string | undefined {
+  return args.reduce((aggr, part) => (aggr && part ? `${aggr}.${part}` : undefined), part1 || undefined);
+}

package/src/utils/useMemoAsync.ts

@@ -0,0 +1,50 @@
+import { DependencyList, useEffect, useState } from 'react';
+
+interface FactoryFn<Value> {
+  /**
+   * Custom factory function
+   * @param abortSignal Signaled when the deps change and the factory function need to be called again or when the parent component unmounts
+   * @returns Result to be returned from the {@link useMemoAsync}
+   */
+  (abortSignal: AbortSignal): Value | Promise<Value>;
+}
+
+/**
+ * Utility hook that can be used the same way as `useMemo` when the initializer needs to be async
+ * @param factory Factory function to produce a value
+ * @param deps Hook dependency list (to trigger an update)
+ * @param initialValue Initial value before factory finishes producing a value (default = `undefined`)
+ * @param fallbackValue Used when factory fails to produce a value (default = `initialValue`)
+ * @returns Result from the {@link factory}, {@link initialValue} or {@link fallbackValue}
+ */
+export function useMemoAsync<Value, FallbackValue = Value | undefined>(
+  factory: FactoryFn<Value>,
+  deps: DependencyList,
+  initialValue: FallbackValue,
+  fallbackValue?: FallbackValue,
+): Value | FallbackValue;
+export function useMemoAsync<Value>(factory: FactoryFn<Value>, deps: DependencyList): Value | undefined;
+
+export function useMemoAsync<Value, FallbackValue = Value | undefined>(
+  factory: FactoryFn<Value>,
+  deps: DependencyList,
+  initialValue?: FallbackValue,
+  fallbackValue?: FallbackValue,
+): Value | FallbackValue | undefined {
+  const [value, setValue] = useState<Value | FallbackValue | undefined>(initialValue);
+  useEffect(() => {
+    const abortCtrl = new AbortController();
+    const update = async () => {
+      try {
+        const result = await factory(abortCtrl.signal);
+        if (!abortCtrl.signal.aborted) setValue(result);
+      } catch (e) {
+        if (!abortCtrl.signal.aborted) setValue(fallbackValue ?? initialValue);
+      }
+    };
+    update();
+    return () => abortCtrl.abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+  return value;
+}