@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/components/MessageReply.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageReply.js","sourceRoot":"","sources":["../../src/components/MessageReply.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MessageReply.js","names":["React","useMemo","Image","Pressable","StyleSheet","Text","View","multiplyAlpha","useTheme","useThemedStyles","getNameColor","isSameUser","BOX_ALPHA","BOX_ALPHA_ON_WHITE_LINE","createStyles","theme","create","container","flexDirection","alignItems","marginTop","marginHorizontal","marginBottom","borderLeftWidth","borderTopLeftRadius","radii","replyQuote","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","paddingLeft","paddingRight","paddingTop","paddingBottom","overflow","image","width","height","borderRadius","marginRight","marginLeft","content","flexShrink","username","fontSize","typography","replyName","lineHeight","fontWeight","text","replyText","textLeft","color","colors","incomingText","textRight","outgoingText","MessageReply","t0","$","_c","replyMessage","currentMessage","position","containerStyle","containerStyleLeft","containerStyleRight","textStyle","textStyleLeft","textStyleRight","imageStyle","onPress","styles","t1","user","isCurrentUser","t2","name","t3","displayName","t4","_id","nameColors","length","incomingReplyLine","outgoingReplyLine","accent","nameColor","incomingReplyName","outgoingReplyName","boxAlpha","toUpperCase","t5","handlePress","t6","t7","t8","borderLeftColor","backgroundColor","t9","t10","containerStyles","t11","t12","t13","usernameStyles","hasText","t14","t15","t16","textStyles","t17","uri","t18","t19","t20","t21","t22"],"sources":["../../src/components/MessageReply.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport {\n  Image,\n  ImageStyle,\n  Pressable,\n  StyleProp,\n  StyleSheet,\n  Text,\n  TextStyle,\n  View,\n  ViewStyle,\n} from 'react-native'\n\nimport { multiplyAlpha } from '../colorUtils'\nimport { useTheme, useThemedStyles } from '../hooks/useTheme'\nimport { IMessage, ReplyMessage } from '../Models'\nimport { ChatTheme, getNameColor } from '../Theme'\nimport { isSameUser } from '../utils'\n\nexport interface MessageReplyProps<TMessage extends IMessage = IMessage> {\n  /** The reply message to display */\n  replyMessage: ReplyMessage\n  /** The current message containing the reply */\n  currentMessage: TMessage\n  /** Position of the bubble (left or right) */\n  position: 'left' | 'right'\n  /** Container style for the reply */\n  containerStyle?: StyleProp<ViewStyle>\n  /** Container style for left position */\n  containerStyleLeft?: StyleProp<ViewStyle>\n  /** Container style for right position */\n  containerStyleRight?: StyleProp<ViewStyle>\n  /** Text style for the reply */\n  textStyle?: StyleProp<TextStyle>\n  /** Text style for left position */\n  textStyleLeft?: StyleProp<TextStyle>\n  /** Text style for right position */\n  textStyleRight?: StyleProp<TextStyle>\n  /** Image style for the reply */\n  imageStyle?: StyleProp<ImageStyle>\n  /** Called with the quote and the message that carries it. */\n  onPress?: (replyMessage: ReplyMessage, message: TMessage) => void\n}\n\n// The quote box is its accent at 10% (12% on a dark outgoing bubble).\nconst BOX_ALPHA = 0.1\nconst BOX_ALPHA_ON_WHITE_LINE = 0.12\n\nconst createStyles = (theme: ChatTheme) => StyleSheet.create({\n  // A rounded box with a 3pt accent bar down its left edge, 8 in from the bubble's edges.\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginTop: 6,\n    marginHorizontal: 6,\n    marginBottom: 1,\n    borderLeftWidth: 3,\n    borderTopLeftRadius: theme.radii.replyQuote,\n    borderBottomLeftRadius: theme.radii.replyQuote,\n    borderTopRightRadius: theme.radii.replyQuote * 2,\n    borderBottomRightRadius: theme.radii.replyQuote,\n    paddingLeft: 8,\n    paddingRight: 8,\n    paddingTop: 3,\n    paddingBottom: 4,\n    overflow: 'hidden',\n  },\n  // A 35pt square, radius 4, with the text moved over by its width + 3.\n  image: {\n    width: 35,\n    height: 35,\n    borderRadius: 4,\n    marginRight: 6,\n    marginLeft: -2,\n  },\n  content: {\n    flexShrink: 1,\n  },\n  username: {\n    fontSize: theme.typography.replyName.fontSize,\n    lineHeight: theme.typography.replyName.lineHeight,\n    fontWeight: theme.typography.replyName.fontWeight,\n  },\n  text: {\n    fontSize: theme.typography.replyText.fontSize,\n    lineHeight: theme.typography.replyText.lineHeight,\n    fontWeight: theme.typography.replyText.fontWeight,\n  },\n  textLeft: {\n    color: theme.colors.incomingText,\n  },\n  textRight: {\n    color: theme.colors.outgoingText,\n  },\n})\n\nexport function MessageReply<TMessage extends IMessage = IMessage> ({\n  replyMessage,\n  currentMessage,\n  position,\n  containerStyle,\n  containerStyleLeft,\n  containerStyleRight,\n  textStyle,\n  textStyleLeft,\n  textStyleRight,\n  imageStyle,\n  onPress,\n}: MessageReplyProps<TMessage>) {\n  const theme = useTheme()\n  const styles = useThemedStyles(createStyles)\n\n  const isCurrentUser = useMemo(\n    () => isSameUser(currentMessage, { user: replyMessage.user } as TMessage),\n    [currentMessage, replyMessage.user]\n  )\n\n  const displayName = useMemo(() => {\n    if (isCurrentUser)\n      return 'You'\n\n    return replyMessage.user?.name || 'Unknown'\n  }, [isCurrentUser, replyMessage.user?.name])\n\n  // Incoming quotes take the quoted author's own color; outgoing ones the bubble's.\n  const accent = position === 'left'\n    ? (theme.nameColors.length ? getNameColor(theme, replyMessage.user?._id) : theme.colors.incomingReplyLine)\n    : theme.colors.outgoingReplyLine\n  const nameColor = position === 'left'\n    ? (theme.nameColors.length ? accent : theme.colors.incomingReplyName)\n    : theme.colors.outgoingReplyName\n  const boxAlpha = position === 'right' && accent.toUpperCase() === '#FFFFFF' ? BOX_ALPHA_ON_WHITE_LINE : BOX_ALPHA\n\n  const handlePress = () => {\n    onPress?.(replyMessage, currentMessage)\n  }\n\n  const containerStyles = [\n    styles.container,\n    { borderLeftColor: accent, backgroundColor: multiplyAlpha(accent, boxAlpha) },\n    containerStyle,\n    position === 'left' ? containerStyleLeft : containerStyleRight,\n  ]\n\n  const usernameStyles = [\n    styles.username,\n    { color: nameColor },\n    textStyle,\n    position === 'left' ? textStyleLeft : textStyleRight,\n  ]\n\n  const hasText = !!replyMessage.text\n  const textStyles = [\n    styles.text,\n    position === 'left' ? styles.textLeft : styles.textRight,\n    textStyle,\n    position === 'left' ? textStyleLeft : textStyleRight,\n  ]\n\n  return (\n    <Pressable onPress={handlePress}>\n      <View style={containerStyles}>\n        {replyMessage.image && (\n          <Image\n            source={{ uri: replyMessage.image }}\n            style={[styles.image, imageStyle]}\n          />\n        )}\n        <View style={styles.content}>\n          <Text style={usernameStyles} numberOfLines={1}>\n            {displayName}\n          </Text>\n          {hasText && (\n            <Text style={textStyles} numberOfLines={1}>\n              {replyMessage.text}\n            </Text>\n          )}\n        </View>\n      </View>\n    </Pressable>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/components/MessageStatus.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * The box the status takes beside the time: a 12pt check with the half-check 4pt to
+ * its right.
+ */
+export declare const STATUS_WIDTH = 16;
+export type MessageStatusKind = 'pending' | 'sent' | 'read' | 'failed';
+export interface MessageStatusProps {
+    status: MessageStatusKind;
+    color: string;
+    /** Badge color for `failed`. */
+    errorColor: string;
+}
+export declare const STATUS_FADE_MS = 150;
+export declare const STATUS_MOVE_MS = 220;
+/**
+ * A message's delivery state, drawn beside the time: a spinning clock while
+ * sending, one check once sent, two once read, a red badge if sending failed. A change
+ * animates. The `icons` registry still wins for `clock`, `check` and
+ * `checkAll`.
+ */
+export declare const MessageStatus: ({ status, color, errorColor }: MessageStatusProps) => React.JSX.Element;
+//# sourceMappingURL=MessageStatus.d.ts.map

package/lib/components/MessageStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatus.d.ts","sourceRoot":"","sources":["../../src/components/MessageStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAA;AAoBxF;;;GAGG;AACH,eAAO,MAAM,YAAY,KAAK,CAAA;AAQ9B,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEtE,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,iBAAiB,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,UAAU,EAAE,MAAM,CAAA;CACnB;AAQD,eAAO,MAAM,cAAc,MAAM,CAAA;AACjC,eAAO,MAAM,cAAc,MAAM,CAAA;AA0EjC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,sBA0E9E,CAAA"}

package/lib/components/MessageStatus.js

@@ -0,0 +1,499 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useIcons } from '../hooks/useIcons';
+import { getSvg } from '../optional';
+import { Icon } from './Icon';
+import { PendingClock, Ticks } from './Ticks';
+const svg = getSvg();
+const Svg = svg ? svg.default ?? svg.Svg : null;
+const Path = svg?.Path;
+
+/**
+ * The box the status takes beside the time: a 12pt check with the half-check 4pt to
+ * its right.
+ */
+export const STATUS_WIDTH = 16;
+const STATUS_HEIGHT = 12;
+
+// The checks are thin, round-capped strokes; the read state adds a second check whose
+// short arm hides behind the first one's long arm.
+const CHECK = 'M1.6 6.7 L4.5 9.5 L10.4 2.9';
+const HALF_CHECK = 'M7.9 8.2 L9.2 9.5 L15.1 2.9';
+/*
+ * A status change cross-fades over 150ms, the old glyph shrinking to half size as it fades and
+ * the new one growing from half. Sent -> read is the "move check" instead, 220ms: the check
+ * slides 4 left into place and the half-check grows in beside it. Both run on the default
+ * cubic-bezier (0.25, 0.1, 0.25, 1).
+ */
+export const STATUS_FADE_MS = 150;
+export const STATUS_MOVE_MS = 220;
+/** A lone "sent" check sits where the read state's half-check ends. */
+const CHECK_SHIFT = 4;
+const EASE_DEFAULT = Easing.bezier(0.25, 0.1, 0.25, 1);
+const CheckLayer = t0 => {
+  const $ = _c(3);
+  const {
+    d,
+    color
+  } = t0;
+  let t1;
+  if ($[0] !== color || $[1] !== d) {
+    t1 = <Svg width={STATUS_WIDTH} height={STATUS_HEIGHT} viewBox="0 0 16 12" fill="none"><Path d={d} stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" /></Svg>;
+    $[0] = color;
+    $[1] = d;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+
+// The checks at rest: plain views, no worklet. Every own message on screen draws one.
+const sentCheckStyle = {
+  transform: [{
+    translateX: CHECK_SHIFT
+  }]
+};
+const StaticChecks = t0 => {
+  const $ = _c(13);
+  const {
+    isRead,
+    color
+  } = t0;
+  const t1 = !isRead && sentCheckStyle;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = [StyleSheet.absoluteFill, t1];
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== color) {
+    t3 = <CheckLayer d={CHECK} color={color} />;
+    $[2] = color;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== t2 || $[5] !== t3) {
+    t4 = <View style={t2}>{t3}</View>;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== color || $[8] !== isRead) {
+    t5 = isRead && <View style={StyleSheet.absoluteFill}><CheckLayer d={HALF_CHECK} color={color} /></View>;
+    $[7] = color;
+    $[8] = isRead;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== t4 || $[11] !== t5) {
+    t6 = <View style={styles.checks}>{t4}{t5}</View>;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  return t6;
+};
+
+/** The two checks moving from sent to read, `move` 0 -> 1. Mounted only for that move. */
+const AnimatedChecks = t0 => {
+  const $ = _c(17);
+  const {
+    color,
+    move
+  } = t0;
+  const checkStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: CHECK_SHIFT * (1 - move.value)
+    }]
+  }));
+  const halfStyle = useAnimatedStyle(() => ({
+    opacity: move.value > 0 ? 1 : 0,
+    transform: [{
+      scale: 0.5 + 0.5 * move.value
+    }]
+  }));
+  let t1;
+  if ($[0] !== checkStyle) {
+    t1 = [StyleSheet.absoluteFill, checkStyle];
+    $[0] = checkStyle;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== color) {
+    t2 = <CheckLayer d={CHECK} color={color} />;
+    $[2] = color;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = <Animated.View style={t1}>{t2}</Animated.View>;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== halfStyle) {
+    t4 = [StyleSheet.absoluteFill, halfStyle];
+    $[7] = halfStyle;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== color) {
+    t5 = <CheckLayer d={HALF_CHECK} color={color} />;
+    $[9] = color;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== t4 || $[12] !== t5) {
+    t6 = <Animated.View style={t4}>{t5}</Animated.View>;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t3 || $[15] !== t6) {
+    t7 = <View style={styles.checks}>{t3}{t6}</View>;
+    $[14] = t3;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  return t7;
+};
+const FadeLayer = t0 => {
+  const $ = _c(5);
+  const {
+    progress,
+    isOut,
+    children
+  } = t0;
+  const style = useAnimatedStyle(() => {
+    const p = isOut ? 1 - progress.value : progress.value;
+    return {
+      opacity: p,
+      transform: [{
+        scale: 0.5 + 0.5 * p
+      }]
+    };
+  });
+  let t1;
+  if ($[0] !== style) {
+    t1 = [styles.layer, style];
+    $[0] = style;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== children || $[3] !== t1) {
+    t2 = <Animated.View style={t1}>{children}</Animated.View>;
+    $[2] = children;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+};
+
+/** The outgoing and incoming glyphs of one change, animated from their own mount. */
+const CrossFade = t0 => {
+  const $ = _c(13);
+  const {
+    from,
+    to,
+    onDone
+  } = t0;
+  const progress = useSharedValue(0);
+  let t1;
+  let t2;
+  if ($[0] !== onDone || $[1] !== progress) {
+    t1 = () => {
+      progress.value = withTiming(1, {
+        duration: STATUS_FADE_MS,
+        easing: EASE_DEFAULT
+      }, finished => {
+        if (finished) {
+          runOnJS(onDone)();
+        }
+      });
+    };
+    t2 = [progress, onDone];
+    $[0] = onDone;
+    $[1] = progress;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[4] !== from || $[5] !== progress) {
+    t3 = <FadeLayer progress={progress} isOut={true}>{from}</FadeLayer>;
+    $[4] = from;
+    $[5] = progress;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== progress || $[8] !== to) {
+    t4 = <FadeLayer progress={progress} isOut={false}>{to}</FadeLayer>;
+    $[7] = progress;
+    $[8] = to;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== t3 || $[11] !== t4) {
+    t5 = <>{t3}{t4}</>;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+};
+
+/**
+ * A message's delivery state, drawn beside the time: a spinning clock while
+ * sending, one check once sent, two once read, a red badge if sending failed. A change
+ * animates. The `icons` registry still wins for `clock`, `check` and
+ * `checkAll`.
+ */
+export const MessageStatus = t0 => {
+  const $ = _c(31);
+  const {
+    status,
+    color,
+    errorColor
+  } = t0;
+  const icons = useIcons();
+  const [previous, setPrevious] = useState(null);
+  const [current, setCurrent] = useState(status);
+  const progress = useSharedValue(1);
+  const isMounted = useRef(false);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => setPrevious(null);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const clearPrevious = t1;
+  if (status !== current) {
+    setPrevious(current);
+    setCurrent(status);
+  }
+  const isSvgChecks = !!(Svg && Path) && !icons.check && !icons.checkAll;
+  const isMove = isSvgChecks && previous === "sent" && current === "read";
+  const isMoveRef = useRef(isMove);
+  let t2;
+  if ($[1] !== isMove) {
+    t2 = () => {
+      isMoveRef.current = isMove;
+    };
+    $[1] = isMove;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  useLayoutEffect(t2);
+  let t3;
+  if ($[3] !== progress) {
+    t3 = () => {
+      if (!isMounted.current) {
+        isMounted.current = true;
+        return;
+      }
+      if (!isMoveRef.current) {
+        return;
+      }
+      progress.set(0);
+      progress.set(withTiming(1, {
+        duration: STATUS_MOVE_MS,
+        easing: EASE_DEFAULT
+      }, finished => {
+        if (finished) {
+          runOnJS(setPrevious)(null);
+        }
+      }));
+    };
+    $[3] = progress;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== current || $[6] !== progress) {
+    t4 = [current, progress];
+    $[5] = current;
+    $[6] = progress;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[8] !== color || $[9] !== errorColor || $[10] !== icons) {
+    t5 = (kind, move) => {
+      if (kind === "failed") {
+        return <View testID="message-status-error-badge" style={[styles.error, {
+          backgroundColor: errorColor
+        }]}><Text style={styles.errorText} allowFontScaling={false}>!</Text></View>;
+      }
+      if (kind === "pending") {
+        return icons.clock ? <Icon name="clock" color={color} size={11} fallback={null} /> : <PendingClock color={color} />;
+      }
+      if (icons.check || icons.checkAll) {
+        return <Icon name={kind === "read" ? "checkAll" : "check"} color={color} size={14} fallback={null} />;
+      }
+      if (Svg && Path) {
+        return move ? <AnimatedChecks color={color} move={move} /> : <StaticChecks isRead={kind === "read"} color={color} />;
+      }
+      return <Ticks double={kind === "read"} color={color} />;
+    };
+    $[8] = color;
+    $[9] = errorColor;
+    $[10] = icons;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const glyphFor = t5;
+  let content;
+  if (isMove) {
+    let t6;
+    if ($[12] !== glyphFor || $[13] !== progress) {
+      t6 = glyphFor("read", progress);
+      $[12] = glyphFor;
+      $[13] = progress;
+      $[14] = t6;
+    } else {
+      t6 = $[14];
+    }
+    content = t6;
+  } else {
+    if (previous != null && previous !== current) {
+      const t6 = `${previous}>${current}`;
+      let t7;
+      if ($[15] !== glyphFor || $[16] !== previous) {
+        t7 = glyphFor(previous);
+        $[15] = glyphFor;
+        $[16] = previous;
+        $[17] = t7;
+      } else {
+        t7 = $[17];
+      }
+      let t8;
+      if ($[18] !== current || $[19] !== glyphFor) {
+        t8 = glyphFor(current);
+        $[18] = current;
+        $[19] = glyphFor;
+        $[20] = t8;
+      } else {
+        t8 = $[20];
+      }
+      let t9;
+      if ($[21] !== t6 || $[22] !== t7 || $[23] !== t8) {
+        t9 = <CrossFade key={t6} from={t7} to={t8} onDone={clearPrevious} />;
+        $[21] = t6;
+        $[22] = t7;
+        $[23] = t8;
+        $[24] = t9;
+      } else {
+        t9 = $[24];
+      }
+      content = t9;
+    } else {
+      let t6;
+      if ($[25] !== current || $[26] !== glyphFor) {
+        t6 = glyphFor(current);
+        $[25] = current;
+        $[26] = glyphFor;
+        $[27] = t6;
+      } else {
+        t6 = $[27];
+      }
+      content = t6;
+    }
+  }
+  const t6 = `message-status-${status}`;
+  let t7;
+  if ($[28] !== content || $[29] !== t6) {
+    t7 = <View testID={t6} style={styles.box}>{content}</View>;
+    $[28] = content;
+    $[29] = t6;
+    $[30] = t7;
+  } else {
+    t7 = $[30];
+  }
+  return t7;
+};
+const styles = StyleSheet.create({
+  // Right-aligned, so a single check sits where the read state's half-check would.
+  box: {
+    width: STATUS_WIDTH,
+    height: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  checks: {
+    width: STATUS_WIDTH,
+    height: STATUS_HEIGHT
+  },
+  layer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'flex-end'
+  },
+  error: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  errorText: {
+    color: '#FFFFFF',
+    fontSize: 10,
+    lineHeight: 12,
+    fontWeight: '700'
+  }
+});
+//# sourceMappingURL=MessageStatus.js.map

package/lib/components/MessageStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatus.js","names":["React","useCallback","useEffect","useLayoutEffect","useRef","useState","StyleSheet","Text","View","Animated","Easing","runOnJS","useAnimatedStyle","useSharedValue","withTiming","useIcons","getSvg","Icon","PendingClock","Ticks","svg","Svg","default","Path","STATUS_WIDTH","STATUS_HEIGHT","CHECK","HALF_CHECK","STATUS_FADE_MS","STATUS_MOVE_MS","CHECK_SHIFT","EASE_DEFAULT","bezier","CheckLayer","t0","$","_c","d","color","t1","sentCheckStyle","transform","translateX","StaticChecks","isRead","t2","absoluteFill","t3","t4","t5","t6","styles","checks","AnimatedChecks","move","checkStyle","value","halfStyle","opacity","scale","t7","FadeLayer","progress","isOut","children","style","p","layer","CrossFade","from","to","onDone","duration","easing","finished","MessageStatus","status","errorColor","icons","previous","setPrevious","current","setCurrent","isMounted","Symbol","for","clearPrevious","isSvgChecks","check","checkAll","isMove","isMoveRef","set","kind","error","backgroundColor","errorText","clock","glyphFor","content","t8","t9","box","create","width","height","flexDirection","alignItems","justifyContent","position","right","top","bottom","borderRadius","fontSize","lineHeight","fontWeight"],"sources":["../../src/components/MessageStatus.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { StyleSheet, Text, View } from 'react-native'\nimport Animated, {\n  Easing,\n  SharedValue,\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { useIcons } from '../hooks/useIcons'\nimport { getSvg } from '../optional'\nimport { Icon } from './Icon'\nimport { PendingClock, Ticks } from './Ticks'\n\nconst svg = getSvg()\nconst Svg: any = svg ? svg.default ?? svg.Svg : null\nconst Path: any = svg?.Path\n\n/**\n * The box the status takes beside the time: a 12pt check with the half-check 4pt to\n * its right.\n */\nexport const STATUS_WIDTH = 16\nconst STATUS_HEIGHT = 12\n\n// The checks are thin, round-capped strokes; the read state adds a second check whose\n// short arm hides behind the first one's long arm.\nconst CHECK = 'M1.6 6.7 L4.5 9.5 L10.4 2.9'\nconst HALF_CHECK = 'M7.9 8.2 L9.2 9.5 L15.1 2.9'\n\nexport type MessageStatusKind = 'pending' | 'sent' | 'read' | 'failed'\n\nexport interface MessageStatusProps {\n  status: MessageStatusKind\n  color: string\n  /** Badge color for `failed`. */\n  errorColor: string\n}\n\n/*\n * A status change cross-fades over 150ms, the old glyph shrinking to half size as it fades and\n * the new one growing from half. Sent -> read is the \"move check\" instead, 220ms: the check\n * slides 4 left into place and the half-check grows in beside it. Both run on the default\n * cubic-bezier (0.25, 0.1, 0.25, 1).\n */\nexport const STATUS_FADE_MS = 150\nexport const STATUS_MOVE_MS = 220\n/** A lone \"sent\" check sits where the read state's half-check ends. */\nconst CHECK_SHIFT = 4\nconst EASE_DEFAULT = Easing.bezier(0.25, 0.1, 0.25, 1)\n\nconst CheckLayer = ({ d, color }: { d: string, color: string }) => (\n  <Svg width={STATUS_WIDTH} height={STATUS_HEIGHT} viewBox='0 0 16 12' fill='none'>\n    <Path d={d} stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />\n  </Svg>\n)\n\n// The checks at rest: plain views, no worklet. Every own message on screen draws one.\nconst sentCheckStyle = { transform: [{ translateX: CHECK_SHIFT }] }\n\nconst StaticChecks = ({ isRead, color }: { isRead: boolean, color: string }) => (\n  <View style={styles.checks}>\n    <View style={[StyleSheet.absoluteFill, !isRead && sentCheckStyle]}>\n      <CheckLayer d={CHECK} color={color} />\n    </View>\n    {isRead && (\n      <View style={StyleSheet.absoluteFill}>\n        <CheckLayer d={HALF_CHECK} color={color} />\n      </View>\n    )}\n  </View>\n)\n\n/** The two checks moving from sent to read, `move` 0 -> 1. Mounted only for that move. */\nconst AnimatedChecks = ({ color, move }: { color: string, move: SharedValue<number> }) => {\n  const checkStyle = useAnimatedStyle(() => ({\n    transform: [{ translateX: CHECK_SHIFT * (1 - move.value) }],\n  }))\n  const halfStyle = useAnimatedStyle(() => ({\n    opacity: move.value > 0 ? 1 : 0,\n    transform: [{ scale: 0.5 + 0.5 * move.value }],\n  }))\n\n  return (\n    <View style={styles.checks}>\n      <Animated.View style={[StyleSheet.absoluteFill, checkStyle]}>\n        <CheckLayer d={CHECK} color={color} />\n      </Animated.View>\n      <Animated.View style={[StyleSheet.absoluteFill, halfStyle]}>\n        <CheckLayer d={HALF_CHECK} color={color} />\n      </Animated.View>\n    </View>\n  )\n}\n\nconst FadeLayer = ({ progress, isOut, children }: { progress: SharedValue<number>, isOut: boolean, children: React.ReactNode }) => {\n  const style = useAnimatedStyle(() => {\n    const p = isOut ? 1 - progress.value : progress.value\n    return { opacity: p, transform: [{ scale: 0.5 + 0.5 * p }] }\n  })\n  return <Animated.View style={[styles.layer, style]}>{children}</Animated.View>\n}\n\n/** The outgoing and incoming glyphs of one change, animated from their own mount. */\nconst CrossFade = ({ from, to, onDone }: { from: React.ReactNode, to: React.ReactNode, onDone: () => void }) => {\n  const progress = useSharedValue(0)\n  useEffect(() => {\n    progress.value = withTiming(1, { duration: STATUS_FADE_MS, easing: EASE_DEFAULT }, finished => {\n      if (finished)\n        runOnJS(onDone)()\n    })\n  }, [progress, onDone])\n  return (\n    <>\n      <FadeLayer progress={progress} isOut>{from}</FadeLayer>\n      <FadeLayer progress={progress} isOut={false}>{to}</FadeLayer>\n    </>\n  )\n}\n\n/**\n * A message's delivery state, drawn beside the time: a spinning clock while\n * sending, one check once sent, two once read, a red badge if sending failed. A change\n * animates. The `icons` registry still wins for `clock`, `check` and\n * `checkAll`.\n */\nexport const MessageStatus = ({ status, color, errorColor }: MessageStatusProps) => {\n  const icons = useIcons()\n  const [previous, setPrevious] = useState<MessageStatusKind | null>(null)\n  const [current, setCurrent] = useState(status)\n  const progress = useSharedValue(1)\n  const isMounted = useRef(false)\n  const clearPrevious = useCallback(() => setPrevious(null), [])\n\n  // The outgoing glyph stays drawn until the transition has finished.\n  if (status !== current) {\n    setPrevious(current)\n    setCurrent(status)\n  }\n\n  const isSvgChecks = !!(Svg && Path) && !icons.check && !icons.checkAll\n  const isMove = isSvgChecks && previous === 'sent' && current === 'read'\n  // Read by the effect below, which runs once per status change; `isMove` is derived from the\n  // same change, and clearing `previous` afterwards must not start it again.\n  const isMoveRef = useRef(isMove)\n  useLayoutEffect(() => {\n    isMoveRef.current = isMove\n  })\n\n  useEffect(() => {\n    if (!isMounted.current) {\n      isMounted.current = true\n      return\n    }\n\n    if (!isMoveRef.current)\n      return\n    progress.set(0)\n    progress.set(withTiming(1, { duration: STATUS_MOVE_MS, easing: EASE_DEFAULT }, finished => {\n      if (finished)\n        runOnJS(setPrevious)(null)\n    }))\n  }, [current, progress])\n\n  const glyphFor = (kind: MessageStatusKind, move?: SharedValue<number>): React.ReactNode => {\n    if (kind === 'failed')\n      // A 14pt red badge with a white exclamation mark.\n      return (\n        <View testID='message-status-error-badge' style={[styles.error, { backgroundColor: errorColor }]}>\n          <Text style={styles.errorText} allowFontScaling={false}>!</Text>\n        </View>\n      )\n    if (kind === 'pending')\n      return icons.clock\n        ? <Icon name='clock' color={color} size={11} fallback={null} />\n        : <PendingClock color={color} />\n    if (icons.check || icons.checkAll)\n      return <Icon name={kind === 'read' ? 'checkAll' : 'check'} color={color} size={14} fallback={null} />\n    if (Svg && Path)\n      return move\n        ? <AnimatedChecks color={color} move={move} />\n        : <StaticChecks isRead={kind === 'read'} color={color} />\n    return <Ticks double={kind === 'read'} color={color} />\n  }\n\n  let content: React.ReactNode\n  if (isMove)\n    content = glyphFor('read', progress)\n  else if (previous != null && previous !== current)\n    content = (\n      <CrossFade key={`${previous}>${current}`} from={glyphFor(previous)} to={glyphFor(current)} onDone={clearPrevious} />\n    )\n  else\n    content = glyphFor(current)\n\n  return (\n    <View testID={`message-status-${status}`} style={styles.box}>\n      {content}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  // Right-aligned, so a single check sits where the read state's half-check would.\n  box: {\n    width: STATUS_WIDTH,\n    height: 14,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  checks: {\n    width: STATUS_WIDTH,\n    height: STATUS_HEIGHT,\n  },\n  layer: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    bottom: 0,\n    justifyContent: 'center',\n    alignItems: 'flex-end',\n  },\n  error: {\n    width: 14,\n    height: 14,\n    borderRadius: 7,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  errorText: {\n    color: '#FFFFFF',\n    fontSize: 10,\n    lineHeight: 12,\n    fontWeight: '700',\n  },\n})\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACxF,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,OAAOC,QAAQ,IACbC,MAAM,EAENC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAEhC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,MAAM,QAAQ,aAAa;AACpC,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,YAAY,EAAEC,KAAK,QAAQ,SAAS;AAE7C,MAAMC,GAAG,GAAGJ,MAAM,CAAC,CAAC;AACpB,MAAMK,GAAQ,GAAGD,GAAG,GAAGA,GAAG,CAACE,OAAO,IAAIF,GAAG,CAACC,GAAG,GAAG,IAAI;AACpD,MAAME,IAAS,GAAGH,GAAG,EAAEG,IAAI;;AAE3B;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,aAAa,GAAG,EAAE;;AAExB;AACA;AACA,MAAMC,KAAK,GAAG,6BAA6B;AAC3C,MAAMC,UAAU,GAAG,6BAA6B;AAWhD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAG,GAAG;AACjC,OAAO,MAAMC,cAAc,GAAG,GAAG;AACjC;AACA,MAAMC,WAAW,GAAG,CAAC;AACrB,MAAMC,YAAY,GAAGrB,MAAM,CAACsB,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;AAEtD,MAAMC,UAAU,GAAGC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAAC,CAAA;IAAAC;EAAA,IAAAJ,EAA0C;EAAA,IAAAK,EAAA;EAAA,IAAAJ,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAE,CAAA;IAC5DE,EAAA,IAAC,GAAG,CAAQf,KAAY,CAAZA,aAAW,CAAC,CAAUC,MAAa,CAAbA,cAAY,CAAC,CAAU,OAAW,CAAX,WAAW,CAAM,IAAM,CAAN,MAAM,CAC9E,CAAC,IAAI,CAAIY,CAAC,CAADA,EAAA,CAAC,CAAUC,MAAK,CAALA,MAAI,CAAC,CAAe,WAAG,CAAH,IAAE,CAAC,CAAgB,aAAO,CAAP,OAAO,CAAgB,cAAO,CAAP,OAAO,GAC3F,EAFC,GAAG,CAEE;IAAAH,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAAE,CAAA;IAAAF,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,OAFNI,EAEM;AAAA,CACP;;AAED;AACA,MAAMC,cAAc,GAAG;EAAEC,SAAS,EAAE,CAAC;IAAEC,UAAU,EAAEZ;EAAY,CAAC;AAAE,CAAC;AAEnE,MAAMa,YAAY,GAAGT,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAAQ,MAAA;IAAAN;EAAA,IAAAJ,EAAqD;EAEhC,MAAAK,EAAA,IAACK,MAAwB,IAAzBJ,cAAyB;EAAA,IAAAK,EAAA;EAAA,IAAAV,CAAA,QAAAI,EAAA;IAAnDM,EAAA,IAACvC,UAAU,CAAAwC,YAAa,EAAEP,EAAyB,CAAC;IAAAJ,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAA,IAAAY,EAAA;EAAA,IAAAZ,CAAA,QAAAG,KAAA;IAC/DS,EAAA,IAAC,UAAU,CAAIrB,CAAK,CAALA,MAAI,CAAC,CAASY,KAAK,CAALA,MAAI,CAAC,GAAI;IAAAH,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAU,EAAA,IAAAV,CAAA,QAAAY,EAAA;IADxCC,EAAA,IAAC,IAAI,CAAQ,KAAoD,CAApD,CAAAH,EAAmD,CAAC,CAC/D,CAAAE,EAAqC,CACvC,EAFC,IAAI,CAEE;IAAAZ,CAAA,MAAAU,EAAA;IAAAV,CAAA,MAAAY,EAAA;IAAAZ,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAAA,IAAAc,EAAA;EAAA,IAAAd,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAS,MAAA;IACNK,EAAA,GAAAL,MAIA,IAHC,CAAC,IAAI,CAAQ,KAAuB,CAAvB,CAAAtC,UAAU,CAAAwC,YAAY,CAAC,CAClC,CAAC,UAAU,CAAInB,CAAU,CAAVA,WAAS,CAAC,CAASW,KAAK,CAALA,MAAI,CAAC,GACzC,EAFC,IAAI,CAGN;IAAAH,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAAS,MAAA;IAAAT,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAAA,IAAAe,EAAA;EAAA,IAAAf,CAAA,SAAAa,EAAA,IAAAb,CAAA,SAAAc,EAAA;IARHC,EAAA,IAAC,IAAI,CAAQ,KAAa,CAAb,CAAAC,MAAM,CAAAC,MAAM,CAAC,CACxB,CAAAJ,EAEM,CACL,CAAAC,EAID,CACF,EATC,IAAI,CASE;IAAAd,CAAA,OAAAa,EAAA;IAAAb,CAAA,OAAAc,EAAA;IAAAd,CAAA,OAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,OATPe,EASO;AAAA,CACR;;AAED;AACA,MAAMG,cAAc,GAAGnB,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAAE,KAAA;IAAAgB;EAAA,IAAApB,EAA6D;EACnF,MAAAqB,UAAA,GAAmB3C,gBAAgB,CAAC,OAAO;IAAA6B,SAAA,EAC9B,CAAC;MAAAC,UAAA,EAAcZ,WAAW,IAAI,CAAC,GAAGwB,IAAI,CAAAE,KAAM;IAAE,CAAC;EAC5D,CAAC,CAAC,CAAC;EACH,MAAAC,SAAA,GAAkB7C,gBAAgB,CAAC,OAAO;IAAA8C,OAAA,EAC/BJ,IAAI,CAAAE,KAAM,GAAG,CAAS,GAAtB,CAAsB,GAAtB,CAAsB;IAAAf,SAAA,EACpB,CAAC;MAAAkB,KAAA,EAAS,GAAG,GAAG,GAAG,GAAGL,IAAI,CAAAE;IAAO,CAAC;EAC/C,CAAC,CAAC,CAAC;EAAA,IAAAjB,EAAA;EAAA,IAAAJ,CAAA,QAAAoB,UAAA;IAIuBhB,EAAA,IAACjC,UAAU,CAAAwC,YAAa,EAAES,UAAU,CAAC;IAAApB,CAAA,MAAAoB,UAAA;IAAApB,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,IAAAU,EAAA;EAAA,IAAAV,CAAA,QAAAG,KAAA;IACzDO,EAAA,IAAC,UAAU,CAAInB,CAAK,CAALA,MAAI,CAAC,CAASY,KAAK,CAALA,MAAI,CAAC,GAAI;IAAAH,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAA,IAAAY,EAAA;EAAA,IAAAZ,CAAA,QAAAI,EAAA,IAAAJ,CAAA,QAAAU,EAAA;IADxCE,EAAA,kBAAsB,KAAqC,CAArC,CAAAR,EAAoC,CAAC,CACzD,CAAAM,EAAqC,CACvC,gBAAgB;IAAAV,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAU,EAAA;IAAAV,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAsB,SAAA;IACMT,EAAA,IAAC1C,UAAU,CAAAwC,YAAa,EAAEW,SAAS,CAAC;IAAAtB,CAAA,MAAAsB,SAAA;IAAAtB,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAAA,IAAAc,EAAA;EAAA,IAAAd,CAAA,QAAAG,KAAA;IACxDW,EAAA,IAAC,UAAU,CAAItB,CAAU,CAAVA,WAAS,CAAC,CAASW,KAAK,CAALA,MAAI,CAAC,GAAI;IAAAH,CAAA,MAAAG,KAAA;IAAAH,CAAA,OAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAAA,IAAAe,EAAA;EAAA,IAAAf,CAAA,SAAAa,EAAA,IAAAb,CAAA,SAAAc,EAAA;IAD7CC,EAAA,kBAAsB,KAAoC,CAApC,CAAAF,EAAmC,CAAC,CACxD,CAAAC,EAA0C,CAC5C,gBAAgB;IAAAd,CAAA,OAAAa,EAAA;IAAAb,CAAA,OAAAc,EAAA;IAAAd,CAAA,OAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,IAAAyB,EAAA;EAAA,IAAAzB,CAAA,SAAAY,EAAA,IAAAZ,CAAA,SAAAe,EAAA;IANlBU,EAAA,IAAC,IAAI,CAAQ,KAAa,CAAb,CAAAT,MAAM,CAAAC,MAAM,CAAC,CACxB,CAAAL,EAEe,CACf,CAAAG,EAEe,CACjB,EAPC,IAAI,CAOE;IAAAf,CAAA,OAAAY,EAAA;IAAAZ,CAAA,OAAAe,EAAA;IAAAf,CAAA,OAAAyB,EAAA;EAAA;IAAAA,EAAA,GAAAzB,CAAA;EAAA;EAAA,OAPPyB,EAOO;AAAA,CAEV;AAED,MAAMC,SAAS,GAAG3B,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAA0B,QAAA;IAAAC,KAAA;IAAAC;EAAA,IAAA9B,EAA2G;EAC5H,MAAA+B,KAAA,GAAcrD,gBAAgB,CAAC;IAC7B,MAAAsD,CAAA,GAAUH,KAAK,GAAG,CAAC,GAAGD,QAAQ,CAAAN,KAAuB,GAAdM,QAAQ,CAAAN,KAAM;IAAA,OAC9C;MAAAE,OAAA,EAAWQ,CAAC;MAAAzB,SAAA,EAAa,CAAC;QAAAkB,KAAA,EAAS,GAAG,GAAG,GAAG,GAAGO;MAAE,CAAC;IAAE,CAAC;EAAA,CAC7D,CAAC;EAAA,IAAA3B,EAAA;EAAA,IAAAJ,CAAA,QAAA8B,KAAA;IAC2B1B,EAAA,IAACY,MAAM,CAAAgB,KAAM,EAAEF,KAAK,CAAC;IAAA9B,CAAA,MAAA8B,KAAA;IAAA9B,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,IAAAU,EAAA;EAAA,IAAAV,CAAA,QAAA6B,QAAA,IAAA7B,CAAA,QAAAI,EAAA;IAA3CM,EAAA,kBAAsB,KAAqB,CAArB,CAAAN,EAAoB,CAAC,CAAGyB,SAAO,CAAE,gBAAgB;IAAA7B,CAAA,MAAA6B,QAAA;IAAA7B,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAA,OAAvEU,EAAuE;AAAA,CAC/E;;AAED;AACA,MAAMuB,SAAS,GAAGlC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAAiC,IAAA;IAAAC,EAAA;IAAAC;EAAA,IAAArC,EAAwF;EACzG,MAAA4B,QAAA,GAAiBjD,cAAc,CAAC,CAAC,CAAC;EAAA,IAAA0B,EAAA;EAAA,IAAAM,EAAA;EAAA,IAAAV,CAAA,QAAAoC,MAAA,IAAApC,CAAA,QAAA2B,QAAA;IACxBvB,EAAA,GAAAA,CAAA;MACRuB,QAAQ,CAAAN,KAAA,GAAS1C,UAAU,CAAC,CAAC,EAAE;QAAA0D,QAAA,EAAY5C,cAAc;QAAA6C,MAAA,EAAU1C;MAAa,CAAC,EAAE2C,QAAA;QACjF,IAAIA,QAAQ;UACV/D,OAAO,CAAC4D,MAAM,CAAC,CAAC,CAAC;QAAA;MAAA,CACpB,CAHa;IAAA,CAIf;IAAE1B,EAAA,IAACiB,QAAQ,EAAES,MAAM,CAAC;IAAApC,CAAA,MAAAoC,MAAA;IAAApC,CAAA,MAAA2B,QAAA;IAAA3B,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAU,EAAA;EAAA;IAAAN,EAAA,GAAAJ,CAAA;IAAAU,EAAA,GAAAV,CAAA;EAAA;EALrBjC,SAAS,CAACqC,EAKT,EAAEM,EAAkB,CAAC;EAAA,IAAAE,EAAA;EAAA,IAAAZ,CAAA,QAAAkC,IAAA,IAAAlC,CAAA,QAAA2B,QAAA;IAGlBf,EAAA,IAAC,SAAS,CAAWe,QAAQ,CAARA,SAAO,CAAC,CAAE,KAAK,CAAL,KAAI,CAAC,CAAEO,KAAG,CAAE,EAA1C,SAAS,CAA6C;IAAAlC,CAAA,MAAAkC,IAAA;IAAAlC,CAAA,MAAA2B,QAAA;IAAA3B,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAA2B,QAAA,IAAA3B,CAAA,QAAAmC,EAAA;IACvDtB,EAAA,IAAC,SAAS,CAAWc,QAAQ,CAARA,SAAO,CAAC,CAAS,KAAK,CAAL,MAAI,CAAC,CAAGQ,GAAC,CAAE,EAAhD,SAAS,CAAmD;IAAAnC,CAAA,MAAA2B,QAAA;IAAA3B,CAAA,MAAAmC,EAAA;IAAAnC,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAAA,IAAAc,EAAA;EAAA,IAAAd,CAAA,SAAAY,EAAA,IAAAZ,CAAA,SAAAa,EAAA;IAF/DC,EAAA,KACE,CAAAF,EAAsD,CACtD,CAAAC,EAA4D,CAAC,GAC5D;IAAAb,CAAA,OAAAY,EAAA;IAAAZ,CAAA,OAAAa,EAAA;IAAAb,CAAA,OAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAAA,OAHHc,EAGG;AAAA,CAEN;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM0B,aAAa,GAAGzC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAAwC,MAAA;IAAAtC,KAAA;IAAAuC;EAAA,IAAA3C,EAAiD;EAC7E,MAAA4C,KAAA,GAAc/D,QAAQ,CAAC,CAAC;EACxB,OAAAgE,QAAA,EAAAC,WAAA,IAAgC3E,QAAQ,CAA2B,IAAI,CAAC;EACxE,OAAA4E,OAAA,EAAAC,UAAA,IAA8B7E,QAAQ,CAACuE,MAAM,CAAC;EAC9C,MAAAd,QAAA,GAAiBjD,cAAc,CAAC,CAAC,CAAC;EAClC,MAAAsE,SAAA,GAAkB/E,MAAM,CAAC,KAAK,CAAC;EAAA,IAAAmC,EAAA;EAAA,IAAAJ,CAAA,QAAAiD,MAAA,CAAAC,GAAA;IACG9C,EAAA,GAAAA,CAAA,KAAMyC,WAAW,CAAC,IAAI,CAAC;IAAA7C,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAzD,MAAAmD,aAAA,GAAsB/C,EAAwC;EAG9D,IAAIqC,MAAM,KAAKK,OAAO;IACpBD,WAAW,CAACC,OAAO,CAAC;IACpBC,UAAU,CAACN,MAAM,CAAC;EAAA;EAGpB,MAAAW,WAAA,GAAoB,CAAC,EAAElE,GAAW,IAAXE,IAAW,CAAiB,IAA/B,CAAoBuD,KAAK,CAAAU,KAAyB,IAAlD,CAAoCV,KAAK,CAAAW,QAAS;EACtE,MAAAC,MAAA,GAAeH,WAAkC,IAAnBR,QAAQ,KAAK,MAA4B,IAAlBE,OAAO,KAAK,MAAM;EAGvE,MAAAU,SAAA,GAAkBvF,MAAM,CAACsF,MAAM,CAAC;EAAA,IAAA7C,EAAA;EAAA,IAAAV,CAAA,QAAAuD,MAAA;IAChB7C,EAAA,GAAAA,CAAA;MACd8C,SAAS,CAAAV,OAAA,GAAWS,MAAH;IAAA,CAClB;IAAAvD,CAAA,MAAAuD,MAAA;IAAAvD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAFDhC,eAAe,CAAC0C,EAEf,CAAC;EAAA,IAAAE,EAAA;EAAA,IAAAZ,CAAA,QAAA2B,QAAA;IAEQf,EAAA,GAAAA,CAAA;MACR,IAAI,CAACoC,SAAS,CAAAF,OAAQ;QACpBE,SAAS,CAAAF,OAAA,GAAW,IAAH;QAAA;MAAA;MAInB,IAAI,CAACU,SAAS,CAAAV,OAAQ;QAAA;MAAA;MAEtBnB,QAAQ,CAAA8B,GAAI,CAAC,CAAC,CAAC;MACf9B,QAAQ,CAAA8B,GAAI,CAAC9E,UAAU,CAAC,CAAC,EAAE;QAAA0D,QAAA,EAAY3C,cAAc;QAAA4C,MAAA,EAAU1C;MAAa,CAAC,EAAE2C,QAAA;QAC7E,IAAIA,QAAQ;UACV/D,OAAO,CAACqE,WAAW,CAAC,CAAC,IAAI,CAAC;QAAA;MAAA,CAC7B,CAAC,CAAC;IAAA,CACJ;IAAA7C,CAAA,MAAA2B,QAAA;IAAA3B,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAA8C,OAAA,IAAA9C,CAAA,QAAA2B,QAAA;IAAEd,EAAA,IAACiC,OAAO,EAAEnB,QAAQ,CAAC;IAAA3B,CAAA,MAAA8C,OAAA;IAAA9C,CAAA,MAAA2B,QAAA;IAAA3B,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAbtBjC,SAAS,CAAC6C,EAaT,EAAEC,EAAmB,CAAC;EAAA,IAAAC,EAAA;EAAA,IAAAd,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAA0C,UAAA,IAAA1C,CAAA,SAAA2C,KAAA;IAEN7B,EAAA,GAAAA,CAAA4C,IAAA,EAAAvC,IAAA;MACf,IAAIuC,IAAI,KAAK,QAAQ;QAAA,OAGjB,CAAC,IAAI,CAAQ,MAA4B,CAA5B,4BAA4B,CAAQ,KAA+C,CAA/C,EAAC1C,MAAM,CAAA2C,KAAM,EAAE;UAAAC,eAAA,EAAmBlB;QAAW,CAAC,EAAC,CAC9F,CAAC,IAAI,CAAQ,KAAgB,CAAhB,CAAA1B,MAAM,CAAA6C,SAAS,CAAC,CAAoB,gBAAK,CAAL,MAAI,CAAC,CAAE,CAAC,EAAxD,IAAI,CACP,EAFC,IAAI,CAEE;MAAA;MAEX,IAAIH,IAAI,KAAK,SAAS;QAAA,OACbf,KAAK,CAAAmB,KAEsB,GAD9B,CAAC,IAAI,CAAM,IAAO,CAAP,OAAO,CAAQ3D,KAAK,CAALA,MAAI,CAAC,CAAQ,IAAE,CAAF,GAAC,CAAC,CAAY,QAAI,CAAJ,KAAG,CAAC,GAC3B,GAA9B,CAAC,YAAY,CAAQA,KAAK,CAALA,MAAI,CAAC,GAAI;MAAA;MACpC,IAAIwC,KAAK,CAAAU,KAAwB,IAAdV,KAAK,CAAAW,QAAS;QAAA,OACxB,CAAC,IAAI,CAAO,IAAsC,CAAtC,CAAAI,IAAI,KAAK,MAA6B,GAAtC,UAAsC,GAAtC,OAAqC,CAAC,CAASvD,KAAK,CAALA,MAAI,CAAC,CAAQ,IAAE,CAAF,GAAC,CAAC,CAAY,QAAI,CAAJ,KAAG,CAAC,GAAI;MAAA;MACvG,IAAIjB,GAAW,IAAXE,IAAW;QAAA,OACN+B,IAAI,GACP,CAAC,cAAc,CAAQhB,KAAK,CAALA,MAAI,CAAC,CAAQgB,IAAI,CAAJA,KAAG,CAAC,GACe,GAAvD,CAAC,YAAY,CAAS,MAAe,CAAf,CAAAuC,IAAI,KAAK,MAAK,CAAC,CAASvD,KAAK,CAALA,MAAI,CAAC,GAAI;MAAA;MAAA,OACtD,CAAC,KAAK,CAAS,MAAe,CAAf,CAAAuD,IAAI,KAAK,MAAK,CAAC,CAASvD,KAAK,CAALA,MAAI,CAAC,GAAI;IAAA,CACxD;IAAAH,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAA0C,UAAA;IAAA1C,CAAA,OAAA2C,KAAA;IAAA3C,CAAA,OAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAnBD,MAAA+D,QAAA,GAAiBjD,EAmBhB;EAEGkD,GAAA,CAAAA,OAAA;EACJ,IAAIT,MAAM;IAAA,IAAAxC,EAAA;IAAA,IAAAf,CAAA,SAAA+D,QAAA,IAAA/D,CAAA,SAAA2B,QAAA;MACEZ,EAAA,GAAAgD,QAAQ,CAAC,MAAM,EAAEpC,QAAQ,CAAC;MAAA3B,CAAA,OAAA+D,QAAA;MAAA/D,CAAA,OAAA2B,QAAA;MAAA3B,CAAA,OAAAe,EAAA;IAAA;MAAAA,EAAA,GAAAf,CAAA;IAAA;IAApCgE,OAAA,CAAAA,CAAA,CAAUA,EAA0B;EAA7B;IACJ,IAAIpB,QAAQ,IAAI,IAA4B,IAApBA,QAAQ,KAAKE,OAAO;MAE7B,MAAA/B,EAAA,MAAG6B,QAAQ,IAAIE,OAAO,EAAE;MAAA,IAAArB,EAAA;MAAA,IAAAzB,CAAA,SAAA+D,QAAA,IAAA/D,CAAA,SAAA4C,QAAA;QAAQnB,EAAA,GAAAsC,QAAQ,CAACnB,QAAQ,CAAC;QAAA5C,CAAA,OAAA+D,QAAA;QAAA/D,CAAA,OAAA4C,QAAA;QAAA5C,CAAA,OAAAyB,EAAA;MAAA;QAAAA,EAAA,GAAAzB,CAAA;MAAA;MAAA,IAAAiE,EAAA;MAAA,IAAAjE,CAAA,SAAA8C,OAAA,IAAA9C,CAAA,SAAA+D,QAAA;QAAME,EAAA,GAAAF,QAAQ,CAACjB,OAAO,CAAC;QAAA9C,CAAA,OAAA8C,OAAA;QAAA9C,CAAA,OAAA+D,QAAA;QAAA/D,CAAA,OAAAiE,EAAA;MAAA;QAAAA,EAAA,GAAAjE,CAAA;MAAA;MAAA,IAAAkE,EAAA;MAAA,IAAAlE,CAAA,SAAAe,EAAA,IAAAf,CAAA,SAAAyB,EAAA,IAAAzB,CAAA,SAAAiE,EAAA;QAAzFC,EAAA,IAAC,SAAS,CAAM,GAAwB,CAAxB,CAAAnD,EAAuB,CAAC,CAAQ,IAAkB,CAAlB,CAAAU,EAAiB,CAAC,CAAM,EAAiB,CAAjB,CAAAwC,EAAgB,CAAC,CAAUd,MAAa,CAAbA,cAAY,CAAC,GAAI;QAAAnD,CAAA,OAAAe,EAAA;QAAAf,CAAA,OAAAyB,EAAA;QAAAzB,CAAA,OAAAiE,EAAA;QAAAjE,CAAA,OAAAkE,EAAA;MAAA;QAAAA,EAAA,GAAAlE,CAAA;MAAA;MADtHgE,OAAA,CAAAA,CAAA,CACEA,EAAoH;IAD/G;MAAA,IAAAjD,EAAA;MAAA,IAAAf,CAAA,SAAA8C,OAAA,IAAA9C,CAAA,SAAA+D,QAAA;QAIGhD,EAAA,GAAAgD,QAAQ,CAACjB,OAAO,CAAC;QAAA9C,CAAA,OAAA8C,OAAA;QAAA9C,CAAA,OAAA+D,QAAA;QAAA/D,CAAA,OAAAe,EAAA;MAAA;QAAAA,EAAA,GAAAf,CAAA;MAAA;MAA3BgE,OAAA,CAAAA,CAAA,CAAUA,EAAiB;IAApB;EAAoB;EAGb,MAAAjD,EAAA,qBAAkB0B,MAAM,EAAE;EAAA,IAAAhB,EAAA;EAAA,IAAAzB,CAAA,SAAAgE,OAAA,IAAAhE,CAAA,SAAAe,EAAA;IAAxCU,EAAA,IAAC,IAAI,CAAS,MAA0B,CAA1B,CAAAV,EAAyB,CAAC,CAAS,KAAU,CAAV,CAAAC,MAAM,CAAAmD,GAAG,CAAC,CACxDH,QAAM,CACT,EAFC,IAAI,CAEE;IAAAhE,CAAA,OAAAgE,OAAA;IAAAhE,CAAA,OAAAe,EAAA;IAAAf,CAAA,OAAAyB,EAAA;EAAA;IAAAA,EAAA,GAAAzB,CAAA;EAAA;EAAA,OAFPyB,EAEO;AAAA,CAEV;AAED,MAAMT,MAAM,GAAG7C,UAAU,CAACiG,MAAM,CAAC;EAC/B;EACAD,GAAG,EAAE;IACHE,KAAK,EAAEhF,YAAY;IACnBiF,MAAM,EAAE,EAAE;IACVC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDxD,MAAM,EAAE;IACNoD,KAAK,EAAEhF,YAAY;IACnBiF,MAAM,EAAEhF;EACV,CAAC;EACD0C,KAAK,EAAE;IACL0C,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,CAAC;IACRC,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE,CAAC;IACTJ,cAAc,EAAE,QAAQ;IACxBD,UAAU,EAAE;EACd,CAAC;EACDb,KAAK,EAAE;IACLU,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVQ,YAAY,EAAE,CAAC;IACfN,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDZ,SAAS,EAAE;IACT1D,KAAK,EAAE,SAAS;IAChB4E,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/NoteIndicators.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ZoomIn, ZoomOut } from 'react-native-reanimated';
+/** Cross-scales the unread dot and the playing bars over 150ms. */
+export declare const INDICATOR_MS = 150;
+/**
+ * `entering` for an indicator that appears in place: none on the first render,
+ * so a row does not animate as it scrolls into view.
+ */
+export declare const useEnteringAfterMount: () => ZoomIn | undefined;
+export declare const indicatorExiting: ZoomOut;
+/**
+ * The unread dot beside a note's length. It shrinks away when the note
+ * is played rather than vanishing.
+ */
+export declare function UnreadDot({ isVisible, color, size }: {
+    isVisible: boolean;
+    color: string;
+    size?: number;
+}): React.JSX.Element | null;
+/** The playing bars that replace the unread dot once a round note is heard. */
+export declare function PlayingBars({ isAnimating, color }: {
+    isAnimating: boolean;
+    color: string;
+}): React.JSX.Element;
+//# sourceMappingURL=NoteIndicators.d.ts.map

package/lib/components/NoteIndicators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoteIndicators.d.ts","sourceRoot":"","sources":["../../src/components/NoteIndicators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAiB,EAGf,MAAM,EACN,OAAO,EAOR,MAAM,yBAAyB,CAAA;AAEhC,mEAAmE;AACnE,eAAO,MAAM,YAAY,MAAM,CAAA;AAE/B;;;GAGG;AACH,eAAO,MAAM,qBAAqB,0BAQjC,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAiC,CAAA;AAE9D;;;GAGG;AACH,wBAAgB,SAAS,CAAE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAQ,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,4BAY9G;AA+CD,+EAA+E;AAC/E,wBAAgB,WAAW,CAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE;IAAE,WAAW,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,qBAU3F"}