react-native-terra-ui 0.5.1 → 0.7.0

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

@@ -1,25 +1,17 @@
-import { useEffect } from 'react';
-import { Text, View } from 'react-native';
+import { useEffect } from "react";
+import { Text, View } from "react-native";
 
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { resolveThemeColor } from '#utils/resolve-theme-color';
-import { FONT_WEIGHT_VALUE } from '#utils/typography';
-
-import { Portal } from '../../../portal';
-import {
-  SCREEN_HEADER_PORTAL_HOST,
-  useScreen,
-} from '../../../screen/ScreenContext';
-import { Toolbar } from '../../../toolbar';
-import { HeaderDismissButton } from '../../header-buttons';
-import { HeaderGradientOverlay } from '../../parts/HeaderGradientOverlay';
-import type { TitleHeaderProps } from '../TitleHeader';
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { Portal } from "../../../portal";
+import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "../../../screen/ScreenContext";
+import { Toolbar } from "../../../toolbar";
+import { HeaderDismissButton } from "../../header-buttons";
+import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
+import type { TitleHeaderProps } from "../TitleHeader";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -41,11 +33,8 @@ function LargeTitlePortalContent({
   title,
   overline,
   subtitle,
-  titleAlignment = 'center',
-}: Pick<
-  LargeTitleHeaderProps,
-  'title' | 'overline' | 'subtitle' | 'titleAlignment'
->) {
+  titleAlignment = "center",
+}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle" | "titleAlignment">) {
   const { theme } = useUnistyles();
   const { scrollY } = useScreen();
   styles.useVariants({ titleAlignment });
@@ -59,15 +48,10 @@ function LargeTitlePortalContent({
     }
 
     return {
-      opacity: interpolate(scrollY.value, [0, height], [1, 0], 'clamp'),
+      opacity: interpolate(scrollY.value, [0, height], [1, 0], "clamp"),
       transform: [
         {
-          translateY: interpolate(
-            scrollY.value,
-            [0, height],
-            [0, -LARGE_TITLE_SLIDE_OFFSET],
-            'clamp'
-          ),
+          translateY: interpolate(scrollY.value, [0, height], [0, -LARGE_TITLE_SLIDE_OFFSET], "clamp"),
         },
       ],
     };
@@ -78,27 +62,21 @@ function LargeTitlePortalContent({
       {!!overline && (
         <Text
           style={styles.overline}
-          maxFontSizeMultiplier={
-            theme.typography.variants['label-sm'].maxFontSizeMultiplier
-          }
+          maxFontSizeMultiplier={theme.typography.variants["label-sm"].maxFontSizeMultiplier}
         >
           {overline}
         </Text>
       )}
       <Text
         style={styles.largeTitle}
-        maxFontSizeMultiplier={
-          theme.typography.variants['headline-lg'].maxFontSizeMultiplier
-        }
+        maxFontSizeMultiplier={theme.typography.variants["headline-lg"].maxFontSizeMultiplier}
       >
         {title}
       </Text>
       {!!subtitle && (
         <Text
           style={styles.subtitle}
-          maxFontSizeMultiplier={
-            theme.typography.variants['body-lg'].maxFontSizeMultiplier
-          }
+          maxFontSizeMultiplier={theme.typography.variants["body-lg"].maxFontSizeMultiplier}
         >
           {subtitle}
         </Text>
@@ -133,23 +111,18 @@ export function LargeTitleHeader({
   subtitle,
   LeftToolbar,
   RightToolbar,
-  dismissAction = 'none',
+  dismissAction = "none",
   navigation,
   onDismiss,
-  titleAlignment = 'center',
+  titleAlignment = "center",
   isLargeTitleHidden = false,
-  bg = 'surface.default',
+  bg = "background",
 }: LargeTitleHeaderProps) {
   const { theme } = useUnistyles();
 
-  const bgColor =
-    resolveThemeColor(bg, theme) ??
-    (theme.color as unknown as Record<string, string | undefined>)[
-      'surface.default'
-    ] ??
-    '';
+  const bgColor = resolveThemeColor(bg, theme) ?? "";
 
-  const isTransparent = bgColor === 'transparent';
+  const isTransparent = bgColor === "transparent";
   const gradientColor = isTransparent ? theme.color.background : bgColor;
   const { scrollY } = useScreen();
   const isLargeTitleHiddenValue = useSharedValue(isLargeTitleHidden);
@@ -166,7 +139,7 @@ export function LargeTitleHeader({
       return { opacity: 0 };
     }
     return {
-      opacity: interpolate(scrollY.value, [0, height], [0, 1], 'clamp'),
+      opacity: interpolate(scrollY.value, [0, height], [0, 1], "clamp"),
     };
   });
 
@@ -184,15 +157,10 @@ export function LargeTitleHeader({
     }
 
     return {
-      opacity: interpolate(scrollY.value, [0, height], [0, 1], 'clamp'),
+      opacity: interpolate(scrollY.value, [0, height], [0, 1], "clamp"),
       transform: [
         {
-          translateY: interpolate(
-            scrollY.value,
-            [0, height],
-            [COMPACT_TITLE_SLIDE_OFFSET, 0],
-            'clamp'
-          ),
+          translateY: interpolate(scrollY.value, [0, height], [COMPACT_TITLE_SLIDE_OFFSET, 0], "clamp"),
         },
       ],
     };
@@ -203,13 +171,9 @@ export function LargeTitleHeader({
   }, [isLargeTitleHidden, isLargeTitleHiddenValue]);
 
   const leading =
-    dismissAction === 'back' ? (
+    dismissAction === "back" ? (
       <>
-        <HeaderDismissButton
-          dismissAction={dismissAction}
-          navigation={navigation}
-          onDismiss={onDismiss}
-        />
+        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
         {LeftToolbar}
       </>
     ) : (
@@ -217,14 +181,10 @@ export function LargeTitleHeader({
     );
 
   const trailing =
-    dismissAction === 'close' ? (
+    dismissAction === "close" ? (
       <>
         {RightToolbar}
-        <HeaderDismissButton
-          dismissAction={dismissAction}
-          navigation={navigation}
-          onDismiss={onDismiss}
-        />
+        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
       </>
     ) : (
       RightToolbar
@@ -242,33 +202,21 @@ export function LargeTitleHeader({
           />
         </Portal>
       )}
-      <Animated.View
-        style={[styles.safeArea(gradientColor), gradientOpacityStyle]}
-      />
+      <Animated.View style={[styles.safeArea(gradientColor), gradientOpacityStyle]} />
       <View style={styles.bar}>
-        <Animated.View
-          style={[styles.gradient, gradientOpacityStyle]}
-          pointerEvents="none"
-        >
+        <Animated.View style={[styles.gradient, gradientOpacityStyle]} pointerEvents="none">
           <HeaderGradientOverlay color={gradientColor} />
         </Animated.View>
         {leading != null && <Toolbar>{leading}</Toolbar>}
-        <Animated.View
-          style={[styles.titleContainer, compactTitleAnimatedStyle]}
-          pointerEvents="none"
-        >
+        <Animated.View style={[styles.titleContainer, compactTitleAnimatedStyle]} pointerEvents="none">
           <AnimatedText
             style={styles.compactTitle}
-            maxFontSizeMultiplier={
-              theme.typography.variants['title-md'].maxFontSizeMultiplier
-            }
+            maxFontSizeMultiplier={theme.typography.variants["title-md"].maxFontSizeMultiplier}
           >
             {title}
           </AnimatedText>
         </Animated.View>
-        {trailing != null && (
-          <Toolbar style={styles.trailing}>{trailing}</Toolbar>
-        )}
+        {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
       </View>
     </View>
   );
@@ -276,7 +224,7 @@ export function LargeTitleHeader({
 
 const styles = StyleSheet.create((theme, runtime) => ({
   container: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
@@ -286,94 +234,83 @@ const styles = StyleSheet.create((theme, runtime) => ({
     height: runtime.insets.top,
     backgroundColor: bgColor,
   }),
+  // Overhangs the bar by `HEADER_FADE_EXTENT` so the fade has room to finish
+  // below it — confined to the bar, the curve would be steep enough to read as a
+  // band. Nothing on the path clips and the overlay is `pointerEvents="none"`,
+  // so the spill costs neither layout nor touches.
   gradient: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0,
+    bottom: -HEADER_FADE_EXTENT,
   },
   bar: {
     height: theme.layout.header.height,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     paddingHorizontal: theme.layout.screen.margin.x,
-    gap: theme.spacing['3'],
-    justifyContent: 'space-between',
+    gap: theme.spacing["3"],
+    justifyContent: "space-between",
   },
   trailing: {
-    justifyContent: 'flex-end',
+    justifyContent: "flex-end",
   },
   portalContent: {
     gap: 2,
     minHeight: theme.layout.header.height,
     // paddingTop: theme.spacing['1'],
-    paddingBottom: theme.spacing['3'],
+    paddingBottom: theme.spacing["3"],
     paddingHorizontal: theme.layout.screen.margin.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.subtle'
-      ] ?? '',
+    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.subtle"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },
   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.default'
-      ] ?? '',
+    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.default"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },
   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.subtle'
-      ] ?? '',
+    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.subtle"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },
   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.default'
-      ] ?? '',
+    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.default"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },
@@ -382,14 +319,14 @@ const styles = StyleSheet.create((theme, runtime) => ({
     variants: {
       titleAlignment: {
         center: {
-          position: 'absolute',
+          position: "absolute",
           left: 0,
           right: 0,
-          alignItems: 'center',
+          alignItems: "center",
         },
         left: {
           flex: 1,
-          alignItems: 'flex-start',
+          alignItems: "flex-start",
         },
       },
     },

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

@@ -1,18 +1,14 @@
-import type { ReactNode } from 'react';
-import { Text, View } from 'react-native';
+import type { ReactNode } from "react";
+import { Text, View } from "react-native";
 
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import type { ColorToken } from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
-import { FONT_WEIGHT_VALUE } from '#utils/typography';
-
-import { Toolbar } from '../../../toolbar';
-import {
-  HeaderDismissButton,
-  type HeaderDismissProps,
-} from '../../header-buttons';
-import { HeaderGradientOverlay } from '../../parts/HeaderGradientOverlay';
+import type { ColorToken } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { Toolbar } from "../../../toolbar";
+import { HeaderDismissButton, type HeaderDismissProps } from "../../header-buttons";
+import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
 
 export interface TitleHeaderProps extends HeaderDismissProps {
   title?: string;
@@ -27,7 +23,7 @@ export interface TitleHeaderProps extends HeaderDismissProps {
    */
   RightToolbar?: ReactNode;
   /** Title placement within the bar. Defaults to `'center'`. */
-  titleAlignment?: 'center' | 'left';
+  titleAlignment?: "center" | "left";
   /** Background color token. Defaults to `surface.default`. */
   bg?: ColorToken;
 }
@@ -53,34 +49,26 @@ export function TitleHeader({
   title,
   LeftToolbar,
   RightToolbar,
-  dismissAction = 'none',
+  dismissAction = "none",
   navigation,
   onDismiss,
-  titleAlignment = 'center',
-  bg = 'surface.default',
+  titleAlignment = "center",
+  bg = "background",
 }: TitleHeaderProps) {
   const { theme } = useUnistyles();
 
   const bgColor =
     resolveThemeColor(bg, theme) ??
-    (theme.color as unknown as Record<string, string | undefined>)[
-      'surface.default'
-    ] ??
-    '';
-  const isTransparent = bgColor === 'transparent';
-  const gradientColor = isTransparent
-    ? theme.color['surface.default']
-    : bgColor;
+    (theme.color as unknown as Record<string, string | undefined>)["surface.default"] ??
+    "";
+  const isTransparent = bgColor === "transparent";
+  const gradientColor = isTransparent ? theme.color["surface.default"] : bgColor;
   styles.useVariants({ titleAlignment });
 
   const leading =
-    dismissAction === 'back' ? (
+    dismissAction === "back" ? (
       <>
-        <HeaderDismissButton
-          dismissAction={dismissAction}
-          navigation={navigation}
-          onDismiss={onDismiss}
-        />
+        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
         {LeftToolbar}
       </>
     ) : (
@@ -88,14 +76,10 @@ export function TitleHeader({
     );
 
   const trailing =
-    dismissAction === 'close' ? (
+    dismissAction === "close" ? (
       <>
         {RightToolbar}
-        <HeaderDismissButton
-          dismissAction={dismissAction}
-          navigation={navigation}
-          onDismiss={onDismiss}
-        />
+        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
       </>
     ) : (
       RightToolbar
@@ -111,9 +95,7 @@ export function TitleHeader({
         <View style={styles.titleContainer} pointerEvents="none">
           {!!title && <Text style={styles.title}>{title}</Text>}
         </View>
-        {trailing != null && (
-          <Toolbar style={styles.trailing}>{trailing}</Toolbar>
-        )}
+        {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
       </View>
     </View>
   );
@@ -121,7 +103,7 @@ export function TitleHeader({
 
 const styles = StyleSheet.create((theme, runtime) => ({
   container: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
@@ -129,56 +111,56 @@ const styles = StyleSheet.create((theme, runtime) => ({
   },
   safeArea: (isTransparent, bgColor) => ({
     height: runtime.insets.top,
-    backgroundColor: isTransparent ? 'transparent' : bgColor,
+    backgroundColor: isTransparent ? "transparent" : bgColor,
   }),
+  // Overhangs the bar by `HEADER_FADE_EXTENT` so the fade has room to finish
+  // below it — confined to the bar, the curve would be steep enough to read as a
+  // band. Nothing on the path clips and the overlay is `pointerEvents="none"`,
+  // so the spill costs neither layout nor touches.
   gradient: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0,
+    bottom: -HEADER_FADE_EXTENT,
   },
   bar: {
     height: theme.layout.header.height,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     paddingHorizontal: theme.layout.screen.margin.x,
-    gap: theme.spacing['3'],
-    justifyContent: 'space-between',
+    gap: theme.spacing["3"],
+    justifyContent: "space-between",
   },
   trailing: {
-    justifyContent: 'flex-end',
+    justifyContent: "flex-end",
   },
   titleContainer: {
     variants: {
       titleAlignment: {
         center: {
-          position: 'absolute',
+          position: "absolute",
           left: 0,
           right: 0,
-          alignItems: 'center',
+          alignItems: "center",
         },
         left: {
           flex: 1,
-          alignItems: 'flex-start',
+          alignItems: "flex-start",
         },
       },
     },
   },
   title: {
-    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.default'
-      ] ?? '',
+    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.default"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },