@oxy.so/bloom 2.10.0 → 2.12.0

package/lib/module/chat-people/ChannelPostCard.js

@@ -0,0 +1,268 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { Avatar } from "../avatar/Avatar.js";
+import { Button } from '../button';
+import { useInteractionState } from "../hooks/use-interaction-state.js";
+import { RiChat3Line } from "../icons/remix/RiChat3Line.js";
+import { RiEyeLine } from "../icons/remix/RiEyeLine.js";
+import { RiMore2Line } from "../icons/remix/RiMore2Line.js";
+import { RiPushpinFill } from "../icons/remix/RiPushpinFill.js";
+import { RiShareForwardLine } from "../icons/remix/RiShareForwardLine.js";
+import { RiVerifiedBadgeFill } from "../icons/remix/RiVerifiedBadgeFill.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { resolveChatPeoplePaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `ChannelPostCard`: one broadcast in a channel.
+ *
+ *   header    32 avatar · channel name (+ verified mark, + pin mark) · time
+ *   media     edge to edge inside the card's radius
+ *   body      the post
+ *   reactions the caller's row of chips
+ *   footer    views (eye) · forwards (arrow) on the left; "128 comments" and
+ *             share on the right
+ *
+ * COUNTS ARE STRINGS. "12.4K" is a locale decision and an abbreviation policy
+ * the app already made for its feed; a card that formats numbers itself would
+ * disagree with the list it sits in, in the one place a reader compares them
+ * side by side.
+ *
+ * The eye and the forward arrow are DECORATIVE — the counts beside them are
+ * text, so the glyph would announce a second time. The accessible names for
+ * both live in `labels`, on the row that holds each pair.
+ */
+
+const RADIUS = 16;
+function ChannelPostCardComponent({
+  channelName,
+  channelAvatar,
+  channelAvatarVariant,
+  verified = false,
+  time,
+  children,
+  media,
+  views,
+  forwards,
+  reactions,
+  comments,
+  onComments,
+  onShare,
+  shareLabel = 'Share',
+  onPress,
+  pinned = false,
+  onMore,
+  moreLabel = 'Post options',
+  labels,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveChatPeoplePaint(theme), [theme]);
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = useInteractionState();
+  const viewsLabel = labels?.views ?? (count => `${count} views`);
+  const forwardsLabel = labels?.forwards ?? (count => `${count} forwards`);
+  const header = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 10,
+      paddingRight: onMore === undefined ? 0 : 28
+    },
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      source: channelAvatar,
+      variant: channelAvatarVariant,
+      name: channelName,
+      size: 32
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-semibold",
+        numberOfLines: 1,
+        style: {
+          color: paint.text,
+          flexShrink: 1
+        },
+        testID: testID ? `${testID}-channel` : undefined,
+        children: channelName
+      }), verified ? /*#__PURE__*/_jsx(RiVerifiedBadgeFill, {
+        width: 14,
+        height: 14,
+        fill: paint.accent
+      }) : null, pinned ? /*#__PURE__*/_jsx(View, {
+        accessibilityLabel: labels?.pinned ?? 'Pinned',
+        testID: testID ? `${testID}-pinned` : undefined,
+        children: /*#__PURE__*/_jsx(RiPushpinFill, {
+          width: 13,
+          height: 13,
+          fill: paint.textTertiary
+        })
+      }) : null]
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-regular",
+      style: {
+        color: paint.textSecondary
+      },
+      testID: testID ? `${testID}-time` : undefined,
+      children: time
+    })]
+  });
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [header, media === undefined ? null : /*#__PURE__*/_jsx(View, {
+      style: {
+        borderRadius: RADIUS - 6,
+        overflow: 'hidden',
+        backgroundColor: paint.rowHighlight
+      },
+      testID: testID ? `${testID}-media` : undefined,
+      children: media
+    }), children === undefined ? null : typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-regular",
+      style: {
+        color: paint.text
+      },
+      children: children
+    }) : children, reactions]
+  });
+  const shell = {
+    gap: 10,
+    borderRadius: RADIUS,
+    paddingTop: 12,
+    paddingRight: 12,
+    paddingBottom: 12,
+    paddingLeft: 12
+  };
+  const footer = views === undefined && forwards === undefined && comments === undefined && onShare === undefined ? null : /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 14,
+      paddingTop: 8,
+      paddingRight: 12,
+      paddingBottom: 12,
+      paddingLeft: 12,
+      flexWrap: 'wrap'
+    },
+    children: [views === undefined ? null : /*#__PURE__*/_jsxs(View, {
+      accessibilityLabel: viewsLabel(views),
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4
+      },
+      testID: testID ? `${testID}-views` : undefined,
+      children: [/*#__PURE__*/_jsx(RiEyeLine, {
+        width: 14,
+        height: 14,
+        fill: paint.textSecondary
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-regular",
+        style: {
+          color: paint.textSecondary
+        },
+        children: views
+      })]
+    }), forwards === undefined ? null : /*#__PURE__*/_jsxs(View, {
+      accessibilityLabel: forwardsLabel(forwards),
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4
+      },
+      testID: testID ? `${testID}-forwards` : undefined,
+      children: [/*#__PURE__*/_jsx(RiShareForwardLine, {
+        width: 14,
+        height: 14,
+        fill: paint.textSecondary
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-regular",
+        style: {
+          color: paint.textSecondary
+        },
+        children: forwards
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1
+      }
+    }), comments === undefined ? null : /*#__PURE__*/_jsx(Button, {
+      variant: "text",
+      size: "small",
+      leadingIcon: RiChat3Line,
+      onPress: onComments,
+      testID: testID ? `${testID}-comments` : undefined,
+      children: comments
+    }), onShare === undefined ? null : /*#__PURE__*/_jsx(Button, {
+      variant: "text",
+      size: "small",
+      iconOnly: true,
+      leadingIcon: RiShareForwardLine,
+      accessibilityLabel: shareLabel,
+      onPress: onShare,
+      testID: testID ? `${testID}-share` : undefined
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      borderRadius: RADIUS,
+      borderWidth: 1,
+      borderColor: paint.border,
+      backgroundColor: hovered && onPress !== undefined ? paint.rowHighlight : paint.surfaceRaised
+    }, style],
+    testID: testID,
+    children: [onPress === undefined ? /*#__PURE__*/_jsx(View, {
+      style: shell,
+      children: body
+    }) : /*#__PURE__*/_jsx(Pressable, {
+      role: "button",
+      accessibilityLabel: `${channelName}, ${time}`,
+      onPress: onPress,
+      onHoverIn: onIn,
+      onHoverOut: onOut,
+      style: shell,
+      testID: testID ? `${testID}-open` : undefined,
+      children: body
+    }), footer, onMore === undefined ? null : /*#__PURE__*/_jsx(Pressable, {
+      role: "button",
+      accessibilityLabel: moreLabel,
+      onPress: onMore,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      style: {
+        position: 'absolute',
+        top: 12,
+        right: 10,
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      testID: testID ? `${testID}-more` : undefined,
+      children: /*#__PURE__*/_jsx(RiMore2Line, {
+        width: 16,
+        height: 16,
+        fill: paint.textSecondary
+      })
+    })]
+  });
+}
+export const ChannelPostCard = /*#__PURE__*/memo(ChannelPostCardComponent);
+ChannelPostCard.displayName = 'ChannelPostCard';
+//# sourceMappingURL=ChannelPostCard.js.map

package/lib/module/chat-people/ChannelPostCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","Pressable","View","Avatar","Button","useInteractionState","RiChat3Line","RiEyeLine","RiMore2Line","RiPushpinFill","RiShareForwardLine","RiVerifiedBadgeFill","useTheme","Text","resolveChatPeoplePaint","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","RADIUS","ChannelPostCardComponent","channelName","channelAvatar","channelAvatarVariant","verified","time","children","media","views","forwards","reactions","comments","onComments","onShare","shareLabel","onPress","pinned","onMore","moreLabel","labels","style","testID","theme","paint","state","hovered","onIn","onOut","viewsLabel","count","forwardsLabel","header","flexDirection","alignItems","gap","paddingRight","undefined","source","variant","name","size","flex","minWidth","numberOfLines","color","text","flexShrink","width","height","fill","accent","accessibilityLabel","textTertiary","textSecondary","body","borderRadius","overflow","backgroundColor","rowHighlight","shell","paddingTop","paddingBottom","paddingLeft","footer","flexWrap","leadingIcon","iconOnly","borderWidth","borderColor","border","surfaceRaised","role","onHoverIn","onHoverOut","hitSlop","top","bottom","left","right","position","justifyContent","ChannelPostCard","displayName"],"sourceRoot":"../../../src","sources":["chat-people/ChannelPostCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chat-people/ContactList.js

@@ -0,0 +1,182 @@
+"use strict";
+
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { ContactRow } from "./ContactRow.js";
+import { contactIndexLetters, contactSectionIndex, resolveChatPeoplePaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `ContactList`: contacts in A–Z sections, with the index rail.
+ *
+ *   heading   one letter, `caption-1-semibold` secondary, on the page fill;
+ *             PINNED while its own rows scroll under it
+ *   rail      the letters down the right edge, each a 16×16 press target with
+ *             a 6px hit slop, the active one in the accent
+ *
+ * STICKY IS `stickyHeaderIndices`, not CSS. react-native-web implements the
+ * same prop the native ScrollView does, so one spelling pins the heading on
+ * both platforms; `position: sticky` would pin it on web and do nothing at all
+ * on native, which is the shape of bug nothing in jest can see.
+ *
+ * The rail SCROLLS the list itself when it can (it measures each section's
+ * offset with `onLayout`) and always reports the letter through
+ * `onJumpToLetter`, so an app driving a virtualised list gets what it needs.
+ * A letter with no section does nothing: a rail showing the whole alphabet
+ * over six sections must not jump to whatever happens to be nearest.
+ */
+
+const RAIL_WIDTH = 22;
+function ContactListComponent({
+  sections,
+  showIndex,
+  indexLetters,
+  activeLetter,
+  onJumpToLetter,
+  formatJumpLabel,
+  onContactPress,
+  onContactSelectedChange,
+  onContactAction,
+  stickyHeaders = true,
+  height,
+  header,
+  footer,
+  emptyState,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveChatPeoplePaint(theme), [theme]);
+  const scroller = useRef(null);
+  const offsets = useRef(new Map());
+  const [, setMeasured] = useState(0);
+  const filled = sections.filter(section => section.contacts.length > 0);
+  const letters = contactIndexLetters(filled, indexLetters);
+  const railVisible = showIndex ?? filled.length > 1;
+  const jumpLabel = formatJumpLabel ?? (letter => `Jump to ${letter}`);
+  const onSectionLayout = useCallback((letter, event) => {
+    offsets.current.set(letter, event.nativeEvent.layout.y);
+    setMeasured(n => n + 1);
+  }, []);
+  const jump = useCallback(letter => {
+    if (contactSectionIndex(filled, letter) < 0) return;
+    const y = offsets.current.get(letter);
+    if (y !== undefined) scroller.current?.scrollTo({
+      y,
+      animated: true
+    });
+    onJumpToLetter?.(letter);
+  }, [filled, onJumpToLetter]);
+
+  // One flat child array so `stickyHeaderIndices` can name the headings by
+  // position. Building it inline and counting as we go is what keeps the two
+  // in step — a second pass over the same data is a second place to be wrong.
+  const children = [];
+  const stickyIndices = [];
+  if (header !== undefined) children.push(/*#__PURE__*/_jsx(View, {
+    children: header
+  }, "__header"));
+  for (const section of filled) {
+    stickyIndices.push(children.length);
+    children.push(/*#__PURE__*/_jsx(View, {
+      onLayout: event => onSectionLayout(section.letter, event),
+      style: {
+        backgroundColor: paint.surface,
+        paddingTop: 10,
+        paddingRight: 10,
+        paddingBottom: 4,
+        paddingLeft: 10
+      },
+      testID: testID ? `${testID}-heading-${section.letter}` : undefined,
+      children: /*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-semibold",
+        style: {
+          color: paint.textSecondary
+        },
+        children: section.letter
+      })
+    }, `heading-${section.letter}`));
+    for (const contact of section.contacts) {
+      children.push(/*#__PURE__*/_jsx(ContactRow, {
+        ...contact,
+        onPress: contact.onPress ?? (onContactPress === undefined ? undefined : () => onContactPress(contact.id)),
+        onSelectedChange: contact.onSelectedChange ?? (onContactSelectedChange === undefined ? undefined : next => onContactSelectedChange(contact.id, next)),
+        onAction: contact.onAction ?? (onContactAction === undefined ? undefined : () => onContactAction(contact.id)),
+        style: {
+          paddingRight: railVisible ? RAIL_WIDTH : 0
+        },
+        testID: testID ? `${testID}-contact-${contact.id}` : undefined
+      }, contact.id));
+    }
+  }
+  if (footer !== undefined) children.push(/*#__PURE__*/_jsx(View, {
+    children: footer
+  }, "__footer"));
+  if (filled.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [{
+        backgroundColor: paint.surface
+      }, style],
+      testID: testID,
+      children: [header, emptyState, footer]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      backgroundColor: paint.surface,
+      position: 'relative'
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      ref: scroller,
+      style: height === undefined ? undefined : {
+        height
+      },
+      stickyHeaderIndices: stickyHeaders ? stickyIndices : undefined,
+      testID: testID ? `${testID}-scroll` : undefined,
+      children: children
+    }), railVisible ? /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: 8,
+        bottom: 8,
+        right: 2,
+        width: RAIL_WIDTH,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 1
+      },
+      testID: testID ? `${testID}-rail` : undefined,
+      children: letters.map(letter => {
+        const active = letter === activeLetter;
+        return /*#__PURE__*/_jsx(Pressable, {
+          role: "button",
+          accessibilityLabel: jumpLabel(letter),
+          onPress: () => jump(letter),
+          hitSlop: {
+            top: 2,
+            bottom: 2,
+            left: 6,
+            right: 6
+          },
+          style: {
+            paddingTop: 1,
+            paddingBottom: 1
+          },
+          testID: testID ? `${testID}-jump-${letter}` : undefined,
+          children: /*#__PURE__*/_jsx(Text, {
+            variant: active ? 'caption-2-bold' : 'caption-2-medium',
+            style: {
+              color: active ? paint.railActive : paint.railText
+            },
+            children: letter
+          })
+        }, letter);
+      })
+    }) : null]
+  });
+}
+export const ContactList = /*#__PURE__*/memo(ContactListComponent);
+ContactList.displayName = 'ContactList';
+//# sourceMappingURL=ContactList.js.map

package/lib/module/chat-people/ContactList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useMemo","useRef","useState","Pressable","ScrollView","View","useTheme","Text","ContactRow","contactIndexLetters","contactSectionIndex","resolveChatPeoplePaint","jsx","_jsx","jsxs","_jsxs","RAIL_WIDTH","ContactListComponent","sections","showIndex","indexLetters","activeLetter","onJumpToLetter","formatJumpLabel","onContactPress","onContactSelectedChange","onContactAction","stickyHeaders","height","header","footer","emptyState","style","testID","theme","paint","scroller","offsets","Map","setMeasured","filled","filter","section","contacts","length","letters","railVisible","jumpLabel","letter","onSectionLayout","event","current","set","nativeEvent","layout","y","n","jump","get","undefined","scrollTo","animated","children","stickyIndices","push","onLayout","backgroundColor","surface","paddingTop","paddingRight","paddingBottom","paddingLeft","variant","color","textSecondary","contact","onPress","id","onSelectedChange","next","onAction","position","ref","stickyHeaderIndices","top","bottom","right","width","alignItems","justifyContent","gap","map","active","role","accessibilityLabel","hitSlop","left","railActive","railText","ContactList","displayName"],"sourceRoot":"../../../src","sources":["chat-people/ContactList.tsx"],"mappings":"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","ignoreList":[]}