react-native-terra-ui 0.11.11 → 0.11.12

package/src/components/header/variants/LargeTitleHeader/index.tsx

@@ -1,28 +1,17 @@
-import { useCallback, useEffect, useState } from "react";
-import { type LayoutChangeEvent, Text, View } from "react-native";
+import { View } from "react-native";
 
-import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet } from "react-native-unistyles";
 
-import { resolveThemeColor } from "#utils/resolve-theme-color";
-import { FONT_WEIGHT_VALUE } from "#utils/typography";
 import { Portal } from "../../../portal";
 import { useHeaderBackground } from "../../../screen/parts/ScreenHeaderAppearance";
-import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "../../../screen/ScreenContext";
-import { Toolbar } from "../../../toolbar";
-import { HeaderDismissButton } from "../../header-buttons";
+import { SCREEN_HEADER_PORTAL_HOST } from "../../../screen/ScreenContext";
+import { useHeaderColor } from "../../hooks/use-header-color";
+import { useLargeTitleHeader } from "../../hooks/use-large-title-header";
 import { HeaderAccessory, HeaderAccessorySpacer } from "../../parts/HeaderAccessory";
-import { HeaderSurface } from "../../parts/HeaderSurface";
+import { HeaderBar } from "../../parts/HeaderBar";
 import type { HeaderAccessoryBehavior } from "../../types";
-import { isCustomTitle, isTextTitle } from "../../utils";
 import type { TitleHeaderProps } from "../TitleHeader";
-
-const AnimatedText = Animated.createAnimatedComponent(Text);
-
-/** Compact title offset (px) when the large title is fully expanded. */
-const COMPACT_TITLE_SLIDE_OFFSET = 8;
-/** Large title offset (px) when fully collapsed. */
-const LARGE_TITLE_SLIDE_OFFSET = 6;
+import { LargeTitleContent } from "./parts/LargeTitleContent";
 
 export interface LargeTitleHeaderProps extends TitleHeaderProps {
   /** Optional small line shown above the large title. */
@@ -34,7 +23,7 @@ export interface LargeTitleHeaderProps extends TitleHeaderProps {
   /**
    * How `accessory` moves while scrolling. `'sticky'` starts below the large title
    * and pins below the compact bar when scrolled up. A hidden large title always pins.
-   * @defaultValue 'pinned'
+   * @defaultValue 'sticky'
    */
   accessoryBehavior?: HeaderAccessoryBehavior;
   /**
@@ -44,98 +33,7 @@ export interface LargeTitleHeaderProps extends TitleHeaderProps {
   titleAlignment?: "center" | "left";
 }
 
-function LargeTitlePortalContent({
-  title,
-  overline,
-  subtitle,
-  hasAccessoryBelow,
-  onHeightChange,
-}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle"> & {
-  /** Reserve a gap before a sticky accessory below this block. */
-  hasAccessoryBelow: boolean;
-  /** Reports the large-title block's layout height in dp. */
-  onHeightChange?: (height: number) => void;
-}) {
-  const { theme } = useUnistyles();
-  const { scrollY } = useScreen();
-
-  const headerCollapseHeight = theme.layout.header.height;
-
-  const largeTitleAnimatedStyle = useAnimatedStyle(() => {
-    const height = headerCollapseHeight;
-    if (height <= 0) {
-      return { opacity: 1, transform: [{ translateY: 0 }] };
-    }
-
-    return {
-      opacity: interpolate(scrollY.value, [0, height], [1, 0], "clamp"),
-      transform: [
-        {
-          translateY: interpolate(scrollY.value, [0, height], [0, -LARGE_TITLE_SLIDE_OFFSET], "clamp"),
-        },
-      ],
-    };
-  });
-
-  // Layout height excludes the collapse transform.
-  const handleLayout = (event: LayoutChangeEvent) => onHeightChange?.(event.nativeEvent.layout.height);
-
-  return (
-    <Animated.View
-      style={[styles.portalContent(hasAccessoryBelow), largeTitleAnimatedStyle]}
-      onLayout={handleLayout}
-    >
-      {!!overline && (
-        <Text
-          style={styles.overline}
-          maxFontSizeMultiplier={theme.typography.variants["label-sm"].maxFontSizeMultiplier}
-        >
-          {overline}
-        </Text>
-      )}
-      {isTextTitle(title) ? (
-        <Text
-          style={styles.largeTitle}
-          maxFontSizeMultiplier={theme.typography.variants["headline-lg"].maxFontSizeMultiplier}
-        >
-          {title}
-        </Text>
-      ) : (
-        title
-      )}
-      {!!subtitle && (
-        <Text
-          style={styles.subtitle}
-          maxFontSizeMultiplier={theme.typography.variants["body-lg"].maxFontSizeMultiplier}
-        >
-          {subtitle}
-        </Text>
-      )}
-    </Animated.View>
-  );
-}
-
-/**
- * iOS-style collapsing large-title header. The large title is injected (via the
- * `Screen`'s portal) into the top of the scroll content, so it scrolls away
- * naturally; the compact title cross-fades over the theme header height.
- * The top safe area and bar overlay fade from transparent when expanded to
- * the header background when collapsed. The large-title content stays transparent.
- * Snapping is opt-in through the scroll container's snapToOffsets.
- *
- * Must be used inside a `Screen` with a `Screen.ScrollView` or `Screen.List`.
- *
- * @example
- * ```tsx
- * <Screen.Header>
- *   <Header.LargeTitle
- *     overline="Today"
- *     title="Meditate"
- *     subtitle="Good morning"
- *   />
- * </Screen.Header>
- * ```
- */
+/** Collapsing header. The expanded title lives in scroll content; the bar and accessory overlay it. */
 export function LargeTitleHeader({
   title,
   overline,
@@ -147,204 +45,61 @@ export function LargeTitleHeader({
   accessory,
   accessoryPadding = "x",
   accessoryBehavior = "sticky",
-  dismissAction = "none",
-  navigation,
-  onDismiss,
   titleAlignment = "center",
   isLargeTitleHidden = false,
   background,
   bg,
+  ...dismissProps
 }: LargeTitleHeaderProps) {
-  const { theme } = useUnistyles();
-
-  const { scrollY, background: screenBackground, setHeaderAccessoryHeight, contentTopPadding } = useScreen();
-  const colorToken = background ?? bg;
-  const bgColor =
-    (colorToken ? resolveThemeColor(colorToken, theme) : screenBackground) ?? theme.color["surface.canvas"];
-  const leadingContent = leadingActions !== undefined ? leadingActions : LeftToolbar;
-  const trailingContent = trailingActions !== undefined ? trailingActions : RightToolbar;
-
-  const isSticky = accessoryBehavior === "sticky" && !isLargeTitleHidden;
-  const hasStickyAccessory = isSticky && accessory != null;
-  // Sticky accessories reserve space below the large title; pinned ones add top padding.
-  const [stickyAccessoryHeight, setStickyAccessoryHeight] = useState(0);
-  const [largeTitleHeight, setLargeTitleHeight] = useState(0);
-  const isLargeTitleHiddenValue = useSharedValue(isLargeTitleHidden);
-
-  const handleAccessoryHeightChange = useCallback(
-    (height: number) => {
-      if (isSticky) setStickyAccessoryHeight(Math.max(0, Math.round(height)));
-      else setHeaderAccessoryHeight(height);
-    },
-    [isSticky, setHeaderAccessoryHeight]
-  );
-
-  const handleLargeTitleHeightChange = useCallback((height: number) => {
-    setLargeTitleHeight(Math.max(0, Math.round(height)));
-  }, []);
-
-  // Rest below the title, including the scroll container's top padding.
-  const stickyAccessoryOffset = Math.max(
-    0,
-    contentTopPadding + largeTitleHeight - theme.layout.header.height
-  );
-
-  // Zero translation places the accessory directly below the compact bar.
-  const stickyAccessoryStyle = useAnimatedStyle(() => {
-    if (isLargeTitleHiddenValue.value) {
-      return { transform: [{ translateY: 0 }] };
-    }
-    return {
-      transform: [{ translateY: Math.max(0, stickyAccessoryOffset - scrollY.value) }],
-    };
+  const color = useHeaderColor(background ?? bg);
+  const layout = useLargeTitleHeader({
+    hasAccessory: accessory != null,
+    accessoryBehavior,
+    isLargeTitleHidden,
   });
-  const headerCollapseHeight = theme.layout.header.height;
-  styles.useVariants({ titleAlignment });
-
-  // Follow the accessory's bottom edge while keeping the background anchored to the bar.
-  const stickySurfaceStyle = useAnimatedStyle(() => ({
-    height: headerCollapseHeight + stickyAccessoryHeight + Math.max(0, stickyAccessoryOffset - scrollY.value),
-  }));
-
-  // Blend the accessory's resting surface into the shared header background.
-  const accessorySurfaceStyle = useAnimatedStyle(() => ({
-    opacity:
-      stickyAccessoryOffset > 0 ? interpolate(scrollY.value, [0, stickyAccessoryOffset], [1, 0], "clamp") : 0,
-  }));
-
-  // Animate the header surface's opacity: 0 (expanded) → 1 (collapsed).
-  const surfaceOpacityStyle = useAnimatedStyle(() => {
-    if (isLargeTitleHiddenValue.value) {
-      return { opacity: 1 };
-    }
-    const height = hasStickyAccessory ? stickyAccessoryOffset : headerCollapseHeight;
-    if (height <= 0) {
-      return { opacity: hasStickyAccessory ? 1 : 0 };
-    }
-    return {
-      opacity: interpolate(scrollY.value, [0, height], [0, 1], "clamp"),
-    };
-  });
-
-  useHeaderBackground(bgColor, surfaceOpacityStyle);
-
-  const compactTitleAnimatedStyle = useAnimatedStyle(() => {
-    if (isLargeTitleHiddenValue.value) {
-      return { opacity: 1, transform: [{ translateY: 0 }] };
-    }
-
-    const height = headerCollapseHeight;
-    if (height <= 0) {
-      return {
-        opacity: 0,
-        transform: [{ translateY: COMPACT_TITLE_SLIDE_OFFSET }],
-      };
-    }
-
-    return {
-      opacity: interpolate(scrollY.value, [0, height], [0, 1], "clamp"),
-      transform: [
-        {
-          translateY: interpolate(scrollY.value, [0, height], [COMPACT_TITLE_SLIDE_OFFSET, 0], "clamp"),
-        },
-      ],
-    };
-  });
-
-  useEffect(() => {
-    isLargeTitleHiddenValue.value = isLargeTitleHidden;
-  }, [isLargeTitleHidden, isLargeTitleHiddenValue]);
-
-  const leading =
-    dismissAction === "back" ? (
-      <>
-        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
-        {leadingContent}
-      </>
-    ) : (
-      leadingContent
-    );
-
-  const trailing =
-    dismissAction === "close" ? (
-      <>
-        {trailingContent}
-        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
-      </>
-    ) : (
-      trailingContent
-    );
-
+  useHeaderBackground(color, layout.surfaceStyle);
   return (
-    // Let touches in the expanded header's empty space reach the scroll content.
-    <View style={styles.container(isSticky ? stickyAccessoryOffset : 0)} pointerEvents="box-none">
+    <View style={styles.container(layout.accessoryOffset)} pointerEvents="box-none">
       {!isLargeTitleHidden && (
         <Portal hostName={SCREEN_HEADER_PORTAL_HOST}>
-          <LargeTitlePortalContent
+          <LargeTitleContent
             title={title}
             overline={overline}
             subtitle={subtitle}
-            hasAccessoryBelow={hasStickyAccessory}
-            onHeightChange={isSticky ? handleLargeTitleHeightChange : undefined}
+            hasAccessoryBelow={layout.isSticky}
+            onHeightChange={layout.setLargeTitleHeight}
+            animatedStyle={layout.largeTitleStyle}
           />
-          {/* Reserve space for the accessory rendered in the overlay. */}
-          {isSticky && accessory != null && <HeaderAccessorySpacer height={stickyAccessoryHeight} />}
+          {layout.isSticky && <HeaderAccessorySpacer height={layout.reservedAccessoryHeight} />}
         </Portal>
       )}
-      {hasStickyAccessory && (
-        <Animated.View style={[styles.stickySurface, stickySurfaceStyle]} pointerEvents="none">
-          <HeaderSurface color={bgColor} animatedStyle={surfaceOpacityStyle} />
-        </Animated.View>
-      )}
-      {/* Share a background between the bar and a pinned accessory. */}
-      <View style={styles.barGroup}>
-        {!hasStickyAccessory && <HeaderSurface color={bgColor} animatedStyle={surfaceOpacityStyle} />}
-        <View style={styles.bar}>
-          {leading != null && <Toolbar>{leading}</Toolbar>}
-          {/* Text can never be the touch target, but custom content may be, so its
-              container passes touches through to it instead of swallowing them. */}
-          <Animated.View
-            style={[styles.titleContainer, compactTitleAnimatedStyle]}
-            pointerEvents={isCustomTitle(title) ? "box-none" : "none"}
-          >
-            {isTextTitle(title) ? (
-              <AnimatedText
-                style={styles.compactTitle}
-                maxFontSizeMultiplier={theme.typography.variants["title-md"].maxFontSizeMultiplier}
-              >
-                {title}
-              </AnimatedText>
-            ) : (
-              title
-            )}
-          </Animated.View>
-          {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
-        </View>
-        {accessory != null && !isSticky && (
-          <HeaderAccessory padding={accessoryPadding} onHeightChange={handleAccessoryHeightChange}>
-            {accessory}
-          </HeaderAccessory>
-        )}
-      </View>
-      {accessory != null && isSticky && (
-        <Animated.View style={[styles.stickyAccessory, stickyAccessoryStyle]}>
-          <HeaderSurface
-            color={screenBackground ?? theme.color["surface.canvas"]}
-            animatedStyle={accessorySurfaceStyle}
-            solid
-          />
-          <HeaderAccessory padding={accessoryPadding} onHeightChange={handleAccessoryHeightChange}>
-            {accessory}
-          </HeaderAccessory>
-        </Animated.View>
+      <HeaderBar
+        {...dismissProps}
+        title={title}
+        titleAlignment={titleAlignment}
+        color={color}
+        surfaceStyle={layout.surfaceStyle}
+        titleStyle={layout.compactTitleStyle}
+        leading={leadingActions !== undefined ? leadingActions : LeftToolbar}
+        trailing={trailingActions !== undefined ? trailingActions : RightToolbar}
+      />
+      {accessory != null && (
+        <HeaderAccessory
+          padding={accessoryPadding}
+          color={color}
+          surfaceStyle={layout.surfaceStyle}
+          style={layout.accessoryStyle}
+          onHeightChange={layout.setAccessoryHeight}
+        >
+          {accessory}
+        </HeaderAccessory>
       )}
     </View>
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
-  stickySurface: { position: "absolute", top: 0, left: 0, right: 0 },
-  // Include the translated accessory in the parent's touchable bounds.
+const styles = StyleSheet.create(() => ({
+  // Keep the translated accessory inside the overlay's touchable bounds.
   container: (accessoryOffset: number) => ({
     position: "absolute",
     top: 0,
@@ -353,84 +108,4 @@ const styles = StyleSheet.create((theme) => ({
     zIndex: 1000,
     paddingBottom: accessoryOffset,
   }),
-  // Normal flow places the accessory directly below the bar.
-  stickyAccessory: { position: "relative" },
-  // Anchors the absolutely positioned surface over the bar and the accessory both.
-  barGroup: { position: "relative" },
-  bar: {
-    height: theme.layout.header.height,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: theme.layout.screen.padding.x,
-    gap: theme.spacing["3"],
-    justifyContent: "space-between",
-  },
-  // A centered title is absolutely positioned, so it leaves the flex row. With
-  // no leading slot the trailing toolbar would be the only in-flow child and
-  // `space-between` would park it on the left — the auto margin pins it right.
-  trailing: {
-    justifyContent: "flex-end",
-    variants: {
-      titleAlignment: {
-        center: { marginLeft: "auto" },
-        left: {},
-      },
-    },
-  },
-  portalContent: (hasAccessoryBelow: boolean) => ({
-    gap: 2,
-    // Include the gap in the measured height used to position the accessory.
-    paddingBottom: hasAccessoryBelow ? theme.spacing["2"] : 0,
-    paddingHorizontal: theme.layout.screen.padding.x,
-  }),
-  overline: {
-    fontSize: theme.typography.variants["label-sm"].fontSize,
-    lineHeight: theme.typography.variants["label-sm"].lineHeight,
-    letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["label-sm"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
-  },
-  largeTitle: {
-    fontSize: theme.typography.variants["headline-lg"].fontSize,
-    lineHeight: theme.typography.variants["headline-lg"].lineHeight,
-    letterSpacing: theme.typography.variants["headline-lg"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["headline-lg"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
-  },
-  subtitle: {
-    fontSize: theme.typography.variants["body-lg"].fontSize,
-    lineHeight: theme.typography.variants["body-lg"].lineHeight,
-    letterSpacing: theme.typography.variants["body-lg"].letterSpacing,
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
-  },
-  compactTitle: {
-    fontSize: theme.typography.variants["title-md"].fontSize,
-    lineHeight: theme.typography.variants["title-md"].lineHeight,
-    letterSpacing: theme.typography.variants["title-md"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
-    variants: {
-      titleAlignment: {
-        center: { textAlign: "center" },
-        left: { textAlign: "left" },
-      },
-    },
-  },
-  titleContainer: {
-    flex: 1,
-    variants: {
-      titleAlignment: {
-        center: {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          alignItems: "center",
-        },
-        left: {
-          flex: 1,
-          alignItems: "flex-start",
-        },
-      },
-    },
-  },
 }));

package/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx

@@ -0,0 +1,88 @@
+import type { ComponentProps } from "react";
+import { type LayoutChangeEvent, Text } from "react-native";
+
+import Animated from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { isTextTitle } from "../../../utils";
+import type { LargeTitleHeaderProps } from "..";
+
+export function LargeTitleContent({
+  title,
+  overline,
+  subtitle,
+  hasAccessoryBelow,
+  onHeightChange,
+  animatedStyle,
+}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle"> & {
+  /** Reserve a gap before a sticky accessory below this block. */
+  hasAccessoryBelow: boolean;
+  /** Reports the large-title block's layout height in dp. */
+  onHeightChange?: (height: number) => void;
+  animatedStyle: ComponentProps<typeof Animated.View>["style"];
+}) {
+  const { theme } = useUnistyles();
+  // Layout height excludes the collapse transform.
+  const handleLayout = (event: LayoutChangeEvent) => onHeightChange?.(event.nativeEvent.layout.height);
+
+  return (
+    <Animated.View style={[styles.portalContent(hasAccessoryBelow), animatedStyle]} onLayout={handleLayout}>
+      {!!overline && (
+        <Text
+          style={styles.overline}
+          maxFontSizeMultiplier={theme.typography.variants["label-sm"].maxFontSizeMultiplier}
+        >
+          {overline}
+        </Text>
+      )}
+      {isTextTitle(title) ? (
+        <Text
+          style={styles.largeTitle}
+          maxFontSizeMultiplier={theme.typography.variants["headline-lg"].maxFontSizeMultiplier}
+        >
+          {title}
+        </Text>
+      ) : (
+        title
+      )}
+      {!!subtitle && (
+        <Text
+          style={styles.subtitle}
+          maxFontSizeMultiplier={theme.typography.variants["body-lg"].maxFontSizeMultiplier}
+        >
+          {subtitle}
+        </Text>
+      )}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  portalContent: (hasAccessoryBelow: boolean) => ({
+    gap: theme.spacing["1"] / 2,
+    // Include the gap in the measured height used to position the accessory.
+    paddingBottom: hasAccessoryBelow ? theme.spacing["2"] : 0,
+    paddingHorizontal: theme.layout.screen.padding.x,
+  }),
+  overline: {
+    fontSize: theme.typography.variants["label-sm"].fontSize,
+    lineHeight: theme.typography.variants["label-sm"].lineHeight,
+    letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["label-sm"].fontWeight],
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
+  },
+  largeTitle: {
+    fontSize: theme.typography.variants["headline-lg"].fontSize,
+    lineHeight: theme.typography.variants["headline-lg"].lineHeight,
+    letterSpacing: theme.typography.variants["headline-lg"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["headline-lg"].fontWeight],
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
+  },
+  subtitle: {
+    fontSize: theme.typography.variants["body-lg"].fontSize,
+    lineHeight: theme.typography.variants["body-lg"].lineHeight,
+    letterSpacing: theme.typography.variants["body-lg"].letterSpacing,
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
+  },
+}));