@ethora/chat-component-rn 26.7.3 → 26.7.4

package/src/components/Modals/ProfileHeader/ProfileHeader.tsx

@@ -0,0 +1,615 @@
+/** @format */
+
+import React from 'react';
+import {
+  Animated,
+  Image,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BackIcon } from '../../../assets/icons';
+import { getAvatarTextColor } from '../../../helpers/getAvatarColor';
+
+/** Height of the expanded photo hero. */
+export const HERO_HEIGHT = 320;
+/** Back / "…" row, directly below the status-bar inset. */
+export const TOP_BAR_BUTTONS = 60;
+/**
+ * Avatar + name row underneath it, revealed as the header collapses.
+ * Taller than the 48pt avatar it holds, so the row breathes: the extra
+ * height splits evenly above and below (the row centres its content),
+ * putting real space between the avatar and both the buttons above and
+ * the content below.
+ */
+export const TOP_BAR_NAME = 92;
+/** Content band of the collapsed bar, below the status-bar inset. */
+export const TOP_BAR_BAND = TOP_BAR_BUTTONS + TOP_BAR_NAME;
+/** How far above the fully-collapsed point the bar starts fading in. */
+const COLLAPSE_RAMP = 48;
+/**
+ * Blur strength once the header is fully collapsed. The design's collapsed
+ * bar is frosted heavily — the picture is a mood, not a subject — so this
+ * sits near the top of expo-blur's 0-100 range, with a dim over it to keep
+ * the white text and the sharp round avatar reading against it.
+ */
+const BLUR_INTENSITY = 92;
+/** Darkening applied on top of the blur (and used alone without it). */
+const FROST_DIM = 'rgba(0,0,0,0.28)';
+/** Height of the readability gradient under the name and buttons. */
+const SCRIM_HEIGHT = 220;
+/** Bands the gradient is built from — enough that no step is visible. */
+const SCRIM_BANDS = 16;
+/** Darkest the gradient gets, at the very bottom of the hero. */
+const SCRIM_MAX_ALPHA = 0.45;
+
+/**
+ * How far above the hero its backdrop reaches. Over-scrolling downwards
+ * exposes that band, and the picture grows into it (anchored at its own
+ * bottom edge) rather than a second copy being painted there.
+ */
+const OVERSCROLL_REACH = 400;
+
+// expo-blur is an OPTIONAL peer. Having the JS package is not enough — the
+// native view has to be in the binary too, and an app that installed the
+// package without rebuilding renders a red "Unimplemented component:
+// ExpoBlurView" box instead of a blur. `requireNativeModule` throws when
+// that native half is missing, which is the only reliable way to tell the
+// two apart, so probe it once and fall back to a plain dim otherwise.
+let BlurView: any = null;
+try {
+  const { requireNativeModule } = require('expo-modules-core');
+  requireNativeModule('ExpoBlur');
+  BlurView = require('expo-blur').BlurView ?? null;
+} catch {
+  BlurView = null;
+}
+
+/** True when the frosted-glass layer is the real thing, not the dim. */
+export const hasNativeBlur = () => !!BlurView;
+
+/**
+ * Bottom-up darkening so white text stays readable over a photo.
+ *
+ * A single flat overlay (what this was) has a hard top edge that reads as
+ * "the bottom half of the picture is dark". There is no gradient
+ * dependency in this package, so it is stacked out of thin bands whose
+ * alpha ramps quadratically — at 16 bands over 220 pt the steps are below
+ * what the eye picks up on a photo.
+ */
+const ScrimGradient: React.FC = () => (
+  <View pointerEvents="none" style={styles.scrim}>
+    {Array.from({ length: SCRIM_BANDS }, (_, i) => (
+      <View
+        key={i}
+        style={{
+          height: SCRIM_HEIGHT / SCRIM_BANDS,
+          backgroundColor: `rgba(0,0,0,${(
+            SCRIM_MAX_ALPHA * ((i + 1) / SCRIM_BANDS) ** 2
+          ).toFixed(3)})`,
+        }}
+      />
+    ))}
+  </View>
+);
+
+const FrostLayer: React.FC<{ tint?: 'dark' | 'light' }> = ({ tint = 'dark' }) =>
+  BlurView ? (
+    <>
+      <BlurView
+        intensity={BLUR_INTENSITY}
+        tint={tint}
+        style={StyleSheet.absoluteFill}
+      />
+      <View style={[StyleSheet.absoluteFill, styles.frostDim]} />
+    </>
+  ) : (
+    <View style={[StyleSheet.absoluteFill, styles.frostFallback]} />
+  );
+
+export interface HeroAction {
+  key: string;
+  label: string;
+  /** Rendered inside a circle tinted for the current background. */
+  icon: (color: string) => React.ReactNode;
+  onPress: () => void;
+}
+
+interface CommonProps {
+  title: string;
+  subtitle?: string;
+  imageUri?: string | null;
+  /** Background when the chat has no picture — one flat colour, no scrims. */
+  fallbackColor: string;
+  /** Two uppercase letters shown on that background. */
+  initials: string;
+  scrollY: Animated.Value;
+  /** Prefixes every testID, so each screen's tests address their own. */
+  testIDPrefix?: string;
+}
+
+/** Everything the screen needs to line its scroll content up with the bar. */
+export const useHeaderMetrics = () => {
+  const insets = useSafeAreaInsets();
+  const barHeight = insets.top + TOP_BAR_BAND;
+  return {
+    insets,
+    barHeight,
+    /** Scroll distance between the expanded hero and the collapsed bar. */
+    collapseDistance: Math.max(HERO_HEIGHT - barHeight, 1),
+  };
+};
+
+const useCollapse = (scrollY: Animated.Value, collapseDistance: number) =>
+  scrollY.interpolate({
+    inputRange: [
+      Math.max(collapseDistance - COLLAPSE_RAMP, 0),
+      collapseDistance,
+    ],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
+/**
+ * The chat picture, blown up to a full-bleed hero with the name, member
+ * count and the round action buttons on top of it.
+ *
+ * It lives INSIDE the ScrollView (rather than behind it) so the action
+ * buttons stay tappable — an absolutely-positioned hero would sit under a
+ * full-screen scroll surface that swallows every touch. Parallax is done
+ * on the inner image instead: the wrapper keeps its layout height while
+ * the picture drifts at ~⅓ of the scroll speed, and over-scrolling
+ * upwards scales it up the way iOS profile headers do.
+ */
+export const ProfileHero: React.FC<
+  CommonProps & {
+    actions: HeroAction[];
+    /** Rendered to the right of the name (the profile's Leave button). */
+    titleAccessory?: React.ReactNode;
+    titleStyle?: StyleProp<TextStyle>;
+    subtitleStyle?: StyleProp<TextStyle>;
+  }
+> = ({
+  title,
+  subtitle,
+  imageUri,
+  fallbackColor,
+  initials,
+  scrollY,
+  actions,
+  titleAccessory,
+  titleStyle,
+  subtitleStyle,
+  testIDPrefix = 'chat-profile',
+}) => {
+  const { collapseDistance } = useHeaderMetrics();
+  const parallax = scrollY.interpolate({
+    inputRange: [0, HERO_HEIGHT],
+    outputRange: [0, HERO_HEIGHT * 0.35],
+    // Clamped on the left: with `extend` an over-scroll pulled the picture
+    // UP off its own bottom edge, exposing a band of the backdrop colour
+    // under it. Pulling down is the scale's job alone.
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const scale = scrollY.interpolate({
+    inputRange: [-HERO_HEIGHT, 0],
+    outputRange: [2, 1],
+    extrapolateRight: 'clamp',
+  });
+  // The name and buttons are gone well before the collapsed bar arrives,
+  // so the two never overlap mid-scroll.
+  const contentOpacity = scrollY.interpolate({
+    inputRange: [0, HERO_HEIGHT * 0.4],
+    outputRange: [1, 0],
+    extrapolate: 'clamp',
+  });
+  const collapsed = useCollapse(scrollY, collapseDistance);
+
+  // On a photo everything is white over a bottom scrim. On the flat
+  // fallback colour there is no scrim at all — that double-tone banding
+  // was two stacked scrims showing their seam — so the text takes
+  // whichever of black/white reads on that colour.
+  const onPhoto = !!imageUri;
+  const contentColor = onPhoto ? '#FFFFFF' : getAvatarTextColor(fallbackColor);
+  // The glyphs inside the circles are always white — several of the SDK's
+  // icons paint white regardless of their `color` prop, so tinting the
+  // rest to match the title left a mix of black and white glyphs in one
+  // row. The circle darkens instead, which keeps them readable on a light
+  // fill as well as on a photo.
+  const iconColor = '#FFFFFF';
+  const circleTint = onPhoto
+    ? 'rgba(255,255,255,0.22)'
+    : contentColor === '#FFFFFF'
+      ? 'rgba(255,255,255,0.22)'
+      : 'rgba(0,0,0,0.22)';
+
+  return (
+    <View style={[styles.hero, { backgroundColor: fallbackColor }]}>
+      <View style={[styles.backdropClip, { backgroundColor: fallbackColor }]}>
+        <Animated.View
+          style={[
+            styles.backdrop,
+            {
+              transform: [
+                { translateY: parallax },
+                // Scale about the bottom edge (translate → scale →
+                // translate back, RN has no transform-origin) so pulling
+                // down grows the picture upwards into the exposed band by
+                // exactly the amount that band opened.
+                { translateY: HERO_HEIGHT / 2 },
+                { scale },
+                { translateY: -HERO_HEIGHT / 2 },
+              ],
+            },
+          ]}
+        >
+          {onPhoto ? (
+            <Image
+              testID={`${testIDPrefix}-hero-image`}
+              source={{ uri: imageUri as string }}
+              style={StyleSheet.absoluteFill}
+              resizeMode="cover"
+            />
+          ) : (
+            <View style={styles.initialsWrap}>
+              <Text
+                testID={`${testIDPrefix}-hero-initials`}
+                style={[styles.heroInitials, { color: contentColor }]}
+              >
+                {initials}
+              </Text>
+            </View>
+          )}
+        </Animated.View>
+
+        {/* Frosts the picture as the header collapses — the same layer the
+          * collapsed bar sits on, so the transition reads as one motion.
+          * Only over a photo: there is nothing to blur on a flat colour,
+          * and the dim fallback would just darken it into a second shade
+          * of itself. */}
+        {onPhoto && (
+          <Animated.View
+            testID={`${testIDPrefix}-hero-blur`}
+            pointerEvents="none"
+            style={[StyleSheet.absoluteFill, { opacity: collapsed }]}
+          >
+            <FrostLayer />
+          </Animated.View>
+        )}
+
+        {onPhoto && <ScrimGradient />}
+      </View>
+
+      <Animated.View style={[styles.heroContent, { opacity: contentOpacity }]}>
+        <View style={styles.titleRow}>
+          <Text
+            numberOfLines={2}
+            style={[
+              styles.heroTitle,
+              styles.titleText,
+              { color: contentColor },
+              titleStyle,
+            ]}
+          >
+            {title}
+          </Text>
+          {titleAccessory}
+        </View>
+        {!!subtitle && (
+          <Text
+            style={[
+              styles.heroSubtitle,
+              { color: contentColor, opacity: 0.85 },
+              subtitleStyle,
+            ]}
+          >
+            {subtitle}
+          </Text>
+        )}
+        {actions.length > 0 && (
+          <View style={styles.actionsRow}>
+            {actions.map((action) => (
+              <TouchableOpacity
+                key={action.key}
+                testID={`${testIDPrefix}-action-${action.key}`}
+                activeOpacity={0.7}
+                style={styles.action}
+                onPress={action.onPress}
+              >
+                <View
+                  style={[styles.actionCircle, { backgroundColor: circleTint }]}
+                >
+                  {action.icon(iconColor)}
+                </View>
+                <Text style={[styles.actionLabel, { color: contentColor }]}>
+                  {action.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+      </Animated.View>
+    </View>
+  );
+};
+
+/**
+ * The bar pinned over the hero: back button and the "…" menu are always
+ * there, while the frosted picture, small avatar and name fade in as the
+ * hero scrolls away — the collapsed state from the design's third screen.
+ */
+export const ProfileTopBar: React.FC<
+  CommonProps & {
+    onBack: () => void;
+    menu?: React.ReactNode;
+    titleStyle?: StyleProp<TextStyle>;
+  }
+> = ({
+  title,
+  subtitle,
+  imageUri,
+  fallbackColor,
+  initials,
+  scrollY,
+  onBack,
+  menu,
+  titleStyle,
+  testIDPrefix = 'chat-profile',
+}) => {
+  const { insets, barHeight, collapseDistance } = useHeaderMetrics();
+  const collapsed = useCollapse(scrollY, collapseDistance);
+  const rise = collapsed.interpolate({
+    inputRange: [0, 1],
+    outputRange: [10, 0],
+  });
+  const onPhoto = !!imageUri;
+  const contentColor = onPhoto ? '#FFFFFF' : getAvatarTextColor(fallbackColor);
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.topBar, { height: barHeight, paddingTop: insets.top }]}
+    >
+      {/* Background layer: the same picture, cropped to the bar and frosted,
+        * so nothing flips colour mid-scroll. */}
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          StyleSheet.absoluteFill,
+          { backgroundColor: fallbackColor, opacity: collapsed },
+        ]}
+      >
+        {onPhoto && (
+          <>
+            <Image
+              source={{ uri: imageUri as string }}
+              style={StyleSheet.absoluteFill}
+              resizeMode="cover"
+            />
+            <FrostLayer />
+          </>
+        )}
+      </Animated.View>
+
+      <View style={styles.topBarButtons}>
+        <TouchableOpacity
+          testID={`${testIDPrefix}-back`}
+          activeOpacity={0.7}
+          onPress={onBack}
+          style={styles.roundButton}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+        >
+          <BackIcon color="#FFFFFF" />
+        </TouchableOpacity>
+        <View style={styles.topBarRight}>{menu}</View>
+      </View>
+
+      {/* Avatar + name on their own row, as in the design's collapsed
+        * screen. It only appears once the hero has scrolled away, so it
+        * never competes with the big title over the picture. */}
+      <Animated.View
+        testID={`${testIDPrefix}-collapsed-title`}
+        pointerEvents="none"
+        style={[
+          styles.collapsedTitle,
+          { opacity: collapsed, transform: [{ translateY: rise }] },
+        ]}
+      >
+        <View style={styles.collapsedAvatar}>
+          {onPhoto ? (
+            <Image
+              source={{ uri: imageUri as string }}
+              style={styles.collapsedAvatarImage}
+            />
+          ) : (
+            <View
+              style={[
+                styles.collapsedAvatarImage,
+                styles.initialsWrap,
+                { backgroundColor: fallbackColor },
+              ]}
+            >
+              <Text style={[styles.collapsedInitials, { color: contentColor }]}>
+                {initials}
+              </Text>
+            </View>
+          )}
+        </View>
+        <View style={styles.collapsedText}>
+          <Text numberOfLines={1} style={[styles.collapsedName, titleStyle]}>
+            {title}
+          </Text>
+          {!!subtitle && (
+            <Text numberOfLines={1} style={styles.collapsedSubtitle}>
+              {subtitle}
+            </Text>
+          )}
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  hero: {
+    width: '100%',
+    height: HERO_HEIGHT,
+    justifyContent: 'flex-end',
+  },
+  // Reaches above the hero and clips its own contents, so the picture can
+  // grow up into the over-scroll band without spilling over the cards
+  // below when it parallaxes down.
+  backdropClip: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: HERO_HEIGHT + OVERSCROLL_REACH,
+    overflow: 'hidden',
+  },
+  backdrop: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: HERO_HEIGHT,
+  },
+  initialsWrap: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  heroInitials: {
+    fontSize: 64,
+    fontWeight: '600',
+    // Sit in the upper half so the name below never collides with it.
+    marginBottom: 120,
+  },
+  frostDim: {
+    backgroundColor: FROST_DIM,
+  },
+  frostFallback: {
+    backgroundColor: 'rgba(0,0,0,0.35)',
+  },
+  // Only over a photo: keeps white text readable without tinting the flat
+  // fallback colour.
+  scrim: {
+    ...StyleSheet.absoluteFill,
+    top: undefined,
+    height: SCRIM_HEIGHT,
+    justifyContent: 'flex-end',
+  },
+  heroContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+  },
+  // The accessory (the profile's Leave button) is pushed to the far right;
+  // the name takes what is left of the row.
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  titleText: {
+    flexShrink: 1,
+  },
+  heroTitle: {
+    fontSize: 26,
+    fontWeight: '600',
+  },
+  heroSubtitle: {
+    fontSize: 14,
+    marginTop: 2,
+  },
+  // Centred: Search / Leave / Report.
+  actionsRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 20,
+    gap: 16,
+  },
+  action: {
+    alignItems: 'center',
+    width: 64,
+  },
+  actionCircle: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionLabel: {
+    fontSize: 12,
+    marginTop: 6,
+  },
+  topBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+  },
+  topBarButtons: {
+    height: TOP_BAR_BUTTONS,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingBottom: 4,
+    // 20 = the collapsed row's 16pt inset + half the difference between
+    // the 48pt avatar and these 40pt buttons, so a button's centre line
+    // matches the avatar's once the header is collapsed.
+    paddingHorizontal: 20,
+  },
+  roundButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.28)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  topBarRight: {
+    marginLeft: 'auto',
+  },
+  collapsedTitle: {
+    height: TOP_BAR_NAME,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    gap: 12,
+  },
+  collapsedAvatar: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255,255,255,0.2)',
+  },
+  collapsedAvatarImage: {
+    width: '100%',
+    height: '100%',
+  },
+  collapsedInitials: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  collapsedText: {
+    flex: 1,
+  },
+  collapsedName: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '600',
+  },
+  collapsedSubtitle: {
+    color: 'rgba(255,255,255,0.8)',
+    fontSize: 13,
+    marginTop: 1,
+  },
+});