All files / packages/ui/src/utils usePreviewScreenBehavior.ts

100% Statements 13/13
100% Branches 0/0
100% Functions 4/4
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75                                  1x                                                       1x               6x         6x   6x   6x 6x 6x   6x 6x 6x       6x    
import { useEffect } from "react";
import { TextStyle, ViewStyle } from "react-native";
 
import { useFocusEffect } from "@react-navigation/native";
 
import { Theme } from "@repo/ui/themes/types";
import { textStyles } from "@repo/ui/themes/typography";
 
import { FAB_SUBMIT_GAP, useFabAnchor } from "./useFabAnchor";
 
export interface PreviewScreenStyles {
  container: ViewStyle;
  content: ViewStyle;
  highlightText: TextStyle;
  buttonText: TextStyle;
}
 
export const previewScreenStyles = (theme: Theme): PreviewScreenStyles => ({
  container: {
    flex: 1,
    paddingTop: theme.metrics.spacing[6],
  },
  content: {
    paddingHorizontal: theme.metrics.spacing[4],
    gap: theme.metrics.spacing[6.5],
    paddingBottom: theme.metrics.spacing[6],
  },
  highlightText: {
    ...textStyles.content.semiBold,
    color: theme.colors.text.onBehalf,
  },
  buttonText: {
    ...textStyles.content.semiBold,
    fontSize: theme.metrics.textSize[16],
    fontWeight: theme.metrics.fontWeight.semiBold,
  },
});
 
export interface PreviewRuntimeActions {
  onSubmitSuccess?: () => void;
  onSubmitError?: (error?: unknown) => void;
  onSubmittingChange?: (isSubmitting: boolean) => void;
  setFabOffset?: (offset: number) => void;
}
 
export const usePreviewScreenBehavior = (
  runtimeActions: PreviewRuntimeActions,
  isSubmitting: boolean,
  setSubmitting: (isSubmitting: boolean) => void,
): {
  submitRef: ReturnType<typeof useFabAnchor>["ref"];
  onSubmitLayout: ReturnType<typeof useFabAnchor>["onLayout"];
} => {
  const { onSubmittingChange, setFabOffset } = runtimeActions;
  const {
    ref: submitRef,
    onLayout: onSubmitLayout,
    remeasure,
  } = useFabAnchor(setFabOffset, FAB_SUBMIT_GAP);
 
  useFocusEffect(remeasure);
 
  useEffect(() => {
    setSubmitting(isSubmitting);
    onSubmittingChange?.(isSubmitting);
 
    return () => {
      setSubmitting(false);
      onSubmittingChange?.(false);
    };
  }, [isSubmitting, setSubmitting, onSubmittingChange]);
 
  return { submitRef, onSubmitLayout };
};