rn-custom-ui 1.0.0

package/src/customHooks/useMutation.ts

@@ -0,0 +1,97 @@
+import { useCallback, useRef, useState } from 'react';
+
+import {
+  getStatusFlags,
+  isAbortError,
+  normalizeApiError,
+  useAbortControllerRef,
+  useIsMounted,
+} from './internal';
+import type { ApiStatus, UseMutationOptions } from './types';
+
+export const useMutation = <TData, TVariables = void, TError = unknown>(
+  mutationFn: (variables: TVariables, signal?: AbortSignal) => Promise<TData>,
+  options: UseMutationOptions<TData, TVariables, TError> = {}
+) => {
+  const [data, setData] = useState<TData | null>(null);
+  const [error, setError] = useState<TError | null>(null);
+  const [status, setStatus] = useState<ApiStatus>('idle');
+  const [variables, setVariables] = useState<TVariables | null>(null);
+
+  const mutationRef = useRef(mutationFn);
+  const callbacksRef = useRef(options);
+  const isMountedRef = useIsMounted();
+  const { abort, create } = useAbortControllerRef();
+
+  mutationRef.current = mutationFn;
+  callbacksRef.current = options;
+
+  const mutateAsync = useCallback(
+    async (nextVariables: TVariables) => {
+      const controller = create();
+
+      setStatus('loading');
+      setError(null);
+      setVariables(nextVariables);
+
+      try {
+        const result = await mutationRef.current(
+          nextVariables,
+          controller.signal
+        );
+
+        if (controller.signal.aborted || !isMountedRef.current) {
+          return result;
+        }
+
+        setData(result);
+        setStatus('success');
+        callbacksRef.current.onSuccess?.(result, nextVariables);
+        callbacksRef.current.onSettled?.(result, null, nextVariables);
+        return result;
+      } catch (unknownError) {
+        if (isAbortError(unknownError)) {
+          return null as TData;
+        }
+
+        const parsedError = normalizeApiError<TError>(unknownError);
+
+        if (!isMountedRef.current) {
+          throw parsedError;
+        }
+
+        setError(parsedError);
+        setStatus('error');
+        callbacksRef.current.onError?.(parsedError, nextVariables);
+        callbacksRef.current.onSettled?.(null, parsedError, nextVariables);
+        throw parsedError;
+      }
+    },
+    [create, isMountedRef]
+  );
+
+  const mutate = useCallback(
+    (nextVariables: TVariables) => {
+      mutateAsync(nextVariables).catch(() => {});
+    },
+    [mutateAsync]
+  );
+
+  const reset = useCallback(() => {
+    abort();
+    setData(null);
+    setError(null);
+    setVariables(null);
+    setStatus('idle');
+  }, [abort]);
+
+  return {
+    data,
+    error,
+    variables,
+    ...getStatusFlags(status),
+    mutate,
+    mutateAsync,
+    reset,
+  };
+};

package/src/customHooks/usePaginatedApi.ts

@@ -0,0 +1,168 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  getStatusFlags,
+  isAbortError,
+  normalizeApiError,
+  useAbortControllerRef,
+  useDependencyKey,
+  useIsMounted,
+} from './internal';
+import type {
+  ApiStatus,
+  PaginatedFetcher,
+  PaginatedResponse,
+  UsePaginatedApiOptions,
+} from './types';
+
+export const usePaginatedApi = <TItem, TError = unknown>(
+  fetcher: PaginatedFetcher<TItem>,
+  options: UsePaginatedApiOptions<TItem, TError> = {}
+) => {
+  const {
+    enabled = true,
+    initialPage = 1,
+    deps = [],
+    onSuccess,
+    onError,
+  } = options;
+
+  const [items, setItems] = useState<TItem[]>([]);
+  const [page, setPage] = useState(initialPage);
+  const [hasMore, setHasMore] = useState(true);
+  const [total, setTotal] = useState<number | undefined>(undefined);
+  const [error, setError] = useState<TError | null>(null);
+  const [status, setStatus] = useState<ApiStatus>(enabled ? 'loading' : 'idle');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+  const fetcherRef = useRef(fetcher);
+  const callbacksRef = useRef({ onSuccess, onError });
+  const isMountedRef = useIsMounted();
+  const { abort, create } = useAbortControllerRef();
+  const depsKey = useDependencyKey(deps);
+
+  fetcherRef.current = fetcher;
+  callbacksRef.current = { onSuccess, onError };
+
+  const applyResponse = useCallback(
+    (
+      response: PaginatedResponse<TItem>,
+      targetPage: number,
+      replace: boolean
+    ) => {
+      setItems((current) =>
+        replace ? response.items : [...current, ...response.items]
+      );
+      setHasMore(response.hasMore);
+      setTotal(response.total);
+      setPage(targetPage);
+      setStatus('success');
+      callbacksRef.current.onSuccess?.(response, targetPage);
+    },
+    []
+  );
+
+  const fetchPage = useCallback(
+    async (targetPage: number, replace: boolean) => {
+      const controller = create();
+
+      try {
+        const response = await fetcherRef.current(
+          targetPage,
+          controller.signal
+        );
+
+        if (controller.signal.aborted || !isMountedRef.current) {
+          return response;
+        }
+
+        applyResponse(response, targetPage, replace);
+        setError(null);
+        return response;
+      } catch (unknownError) {
+        if (isAbortError(unknownError)) {
+          return null;
+        }
+
+        const parsedError = normalizeApiError<TError>(unknownError);
+
+        if (!isMountedRef.current) {
+          throw parsedError;
+        }
+
+        setError(parsedError);
+        setStatus('error');
+        callbacksRef.current.onError?.(parsedError, targetPage);
+        throw parsedError;
+      }
+    },
+    [applyResponse, create, isMountedRef]
+  );
+
+  const refresh = useCallback(async () => {
+    setIsRefreshing(true);
+    setStatus('loading');
+
+    try {
+      await fetchPage(initialPage, true);
+    } finally {
+      if (isMountedRef.current) {
+        setIsRefreshing(false);
+      }
+    }
+  }, [fetchPage, initialPage, isMountedRef]);
+
+  const loadMore = useCallback(async () => {
+    if (!hasMore || isLoadingMore || status === 'loading') {
+      return null;
+    }
+
+    setIsLoadingMore(true);
+
+    try {
+      return await fetchPage(page + 1, false);
+    } finally {
+      if (isMountedRef.current) {
+        setIsLoadingMore(false);
+      }
+    }
+  }, [fetchPage, hasMore, isLoadingMore, isMountedRef, page, status]);
+
+  const reset = useCallback(() => {
+    abort();
+    setItems([]);
+    setPage(initialPage);
+    setHasMore(true);
+    setTotal(undefined);
+    setError(null);
+    setStatus('idle');
+    setIsRefreshing(false);
+    setIsLoadingMore(false);
+  }, [abort, initialPage]);
+
+  useEffect(() => {
+    if (!enabled) {
+      abort();
+      setStatus('idle');
+      return;
+    }
+
+    setStatus('loading');
+    fetchPage(initialPage, true).catch(() => undefined);
+  }, [abort, depsKey, enabled, fetchPage, initialPage]);
+
+  return {
+    items,
+    page,
+    hasMore,
+    total,
+    error,
+    isRefreshing,
+    isLoadingMore,
+    ...getStatusFlags(status),
+    refresh,
+    loadMore,
+    reset,
+  };
+};

package/src/customHooks/usePollingApi.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+import { AppState } from 'react-native';
+
+import { useApi } from './useApi';
+import type { ApiFetcher, UsePollingApiOptions } from './types';
+
+export const usePollingApi = <TData, TError = unknown>(
+  fetcher: ApiFetcher<TData>,
+  options: UsePollingApiOptions<TData, TError>
+) => {
+  const {
+    intervalMs,
+    pollWhenHidden = false,
+    pauseOnError = true,
+    enabled = true,
+    ...apiOptions
+  } = options;
+
+  const api = useApi<TData, TError>(fetcher, {
+    ...apiOptions,
+    enabled,
+  });
+
+  const apiRef = useRef(api);
+  apiRef.current = api;
+
+  useEffect(() => {
+    if (!enabled || intervalMs <= 0) {
+      return;
+    }
+
+    if (pauseOnError && api.isError) {
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      if (!pollWhenHidden && AppState.currentState !== 'active') {
+        return;
+      }
+
+      apiRef.current.refetch().catch(() => {});
+    }, intervalMs);
+
+    return () => clearInterval(intervalId);
+  }, [api.isError, enabled, intervalMs, pauseOnError, pollWhenHidden]);
+
+  return api;
+};

package/src/index.tsx

@@ -0,0 +1,63 @@
+export { multiply } from './multiply';
+export * from './customFunctions';
+export * from './customHooks';
+export {
+  default as CustomButton,
+  type ButtonContentAlign,
+  type ButtonSize,
+  type ButtonVariant,
+  type CustomButtonProps,
+  type IconOnlyShape,
+} from './components/customButton';
+export {
+  default as CustomDropDown,
+  type CustomDropDownProps,
+  type DropDownItemImageAlign,
+  type DropDownListItem,
+  type DropDownMode,
+  type DropDownOption,
+} from './components/customDropDown';
+export {
+  default as CustomCheckbox,
+  type CheckboxLabelPosition,
+  type CheckboxShape,
+  type CheckboxSize,
+  type CheckboxVariant,
+  type CustomCheckboxProps,
+} from './components/CustomCheckbox';
+export {
+  default as CustomList,
+  defaultKeyExtractor,
+  getFlashList,
+  isFlashListAvailable,
+  type CustomListProps,
+  type ListEngine,
+} from './components/customList';
+export {
+  default as CustomNumberPad,
+  applyNumberPadKey,
+  useNumberPadInput,
+  NUMBER_PAD_ROWS,
+  type CustomNumberPadProps,
+  type NumberPadBottomLeftKey,
+  type NumberPadKeyConfig,
+  type NumberPadKeyType,
+  type NumberPadSize,
+  type NumberPadVariant,
+  type UseNumberPadInputOptions,
+} from './components/customNumberPad';
+export {
+  default as CustomModal,
+  useCustomModal,
+  type CustomModalProps,
+  type ModalAction,
+  type ModalPresentation,
+} from './components/customModal';
+export {
+  default as CustomSlideTabs,
+  type CustomSlideTabsProps,
+  type SlideTabItem,
+  type SlideTabSceneState,
+  type SlideTabFetcher,
+  type SlideTabIconComponent,
+} from './components/customSlideTabs';

package/src/multiply.tsx

@@ -0,0 +1,3 @@
+export function multiply(a: number, b: number): number {
+  return a * b;
+}