@linktr.ee/messaging-react 2.1.0 → 2.2.0-rc-1778753733

package/src/components/MessageAttachment/Image/index.tsx

@@ -0,0 +1,257 @@
+import React from 'react'
+
+import Bubble from '../_shared/Bubble'
+import DismissButton from '../_shared/DismissButton'
+import ImageViewer, {
+  type ImageViewerItem,
+} from '../_shared/ImageViewer'
+import MediaStackGrid, {
+  type MediaStackTile,
+} from '../_shared/MediaStackGrid'
+import { useViewer } from '../_shared/useViewer'
+import {
+  bubbleVariantForState,
+  type ImageItem,
+  type ImageLoadingMode,
+  type MessageAttachmentBaseProps,
+  type MessageAttachmentState,
+} from '../types'
+
+export interface ImageAttachmentSharedProps extends MessageAttachmentBaseProps {
+  /** Single image — convenience for the most common case. */
+  src?: string
+  alt?: string
+  /** Filename surfaced in the viewer toolbar + download default name. */
+  filename?: string
+  /**
+   * Stacked images. Takes precedence over `src` when set. Renders a
+   * 1 / 2 / 3 / 4-tile grid (5+ collapse into a `+N` overflow tile).
+   * Sent + Received only — the composer surface intentionally accepts
+   * a single attachment at a time.
+   */
+  items?: ImageItem[]
+  /**
+   * Native lazy-load hint forwarded to every `<img>` rendered on the
+   * bubble surface (Composer thumbnail, single + stacked tiles, and
+   * the `+N` overflow tile). Defaults to `'lazy'` — chat surfaces
+   * usually scroll a long history, and lazy loading prevents every
+   * historical image from being fetched on mount. Set `'eager'` for
+   * above-the-fold hero attachments. Per-tile overrides live on
+   * `ImageItem.loading`. The opened `ImageViewer` always eager-loads
+   * the active image regardless of this value.
+   */
+  loading?: ImageLoadingMode
+  /**
+   * Forwarded to the Image viewer trigger. When omitted the click
+   * still opens the built-in viewer — supply this for analytics, or
+   * return `false` to intercept the open (e.g. switch to a route-
+   * based gallery / confirmation modal). Any other return value
+   * (including `void`/`undefined`) lets the built-in viewer open.
+   * For stacked attachments the `index` argument identifies the tile.
+   */
+  onClick?: (index: number) => boolean | void
+}
+
+const tileFromItem = (
+  item: ImageItem,
+  index: number,
+  totalCount: number,
+  fallbackLoading: ImageLoadingMode
+): MediaStackTile => ({
+  ariaLabel: `Open image ${index + 1} of ${totalCount}`,
+  content: (
+    <img
+      src={item.src}
+      alt={item.alt ?? ''}
+      width={item.width}
+      height={item.height}
+      draggable={false}
+      loading={item.loading ?? fallbackLoading}
+      decoding="async"
+      className="absolute inset-0 size-full rounded-md object-cover"
+    />
+  ),
+})
+
+const resolveItems = ({
+  src,
+  alt,
+  items,
+}: {
+  src?: string
+  alt?: string
+  items?: ImageItem[]
+}): ImageItem[] => {
+  if (items && items.length > 0) return items
+  if (src) return [{ src, alt }]
+  return []
+}
+
+interface InternalImageRowProps extends ImageAttachmentSharedProps {
+  state: MessageAttachmentState
+  /**
+   * Renders a dismiss button on each tile (Composer only). When the
+   * stack has multiple tiles, the dismiss applies to the whole stack
+   * — that mirrors the mobile composer where attachments are removed
+   * as a single unit.
+   */
+  onDismiss?: () => void
+}
+
+const buildViewerItems = (
+  resolvedItems: ImageItem[],
+  filename?: string
+): ImageViewerItem[] =>
+  resolvedItems.map((item, index) => ({
+    src: item.src,
+    alt: item.alt,
+    filename:
+      filename && resolvedItems.length === 1
+        ? filename
+        : filename
+          ? `${filename} (${index + 1})`
+          : undefined,
+  }))
+
+/**
+ * Composer rendering — bare 280px-square image with a dismiss `×`
+ * overlay and `rounded-md` corners. Intentionally renders without the
+ * shared `Bubble` chrome (no border / no background / no padding) so
+ * the in-progress attachment looks like a draft preview, not a sent
+ * message. The composer surface only supports a single attachment at
+ * a time — `items` and `text` are ignored here.
+ */
+const ImageComposerInner: React.FC<{
+  src: string
+  alt?: string
+  filename?: string
+  loading?: ImageLoadingMode
+  onClick?: (index: number) => boolean | void
+  onDismiss?: () => void
+}> = ({ src, alt, filename, loading = 'lazy', onClick, onDismiss }) => {
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
+
+  return (
+    <div className="relative w-fit">
+      <button
+        type="button"
+        onClick={() => handleActivate(0)}
+        aria-label="Open image"
+        className="block size-[280px] cursor-zoom-in overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-black/40"
+      >
+        <img
+          src={src}
+          alt={alt ?? ''}
+          draggable={false}
+          loading={loading}
+          decoding="async"
+          className="size-full object-cover"
+        />
+      </button>
+      {onDismiss ? (
+        <div className="absolute right-2 top-2 z-10">
+          <DismissButton onClick={onDismiss} />
+        </div>
+      ) : null}
+
+      <ImageViewer
+        open={viewerOpen}
+        items={buildViewerItems([{ src, alt }], filename)}
+        initialIndex={viewerIndex}
+        onClose={closeViewer}
+      />
+    </div>
+  )
+}
+
+/**
+ * Sent / Received rendering — wrapped in the shared `Bubble` chrome,
+ * supports single or stacked items, and renders an optional caption
+ * below the media.
+ */
+const ImageBubbleRow: React.FC<InternalImageRowProps> = ({
+  state,
+  src,
+  alt,
+  filename,
+  items,
+  text,
+  groupPosition,
+  loading = 'lazy',
+  onClick,
+}) => {
+  const resolvedItems = resolveItems({ src, alt, items })
+  const variant = bubbleVariantForState(state)
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
+
+  if (resolvedItems.length === 0) {
+    return null
+  }
+
+  const tiles: MediaStackTile[] = resolvedItems.map((item, index) =>
+    tileFromItem(item, index, resolvedItems.length, loading)
+  )
+
+  return (
+    <Bubble
+      variant={variant}
+      text={text}
+      groupPosition={groupPosition}
+      data-testid="image-attachment"
+    >
+      <div className="relative">
+        <MediaStackGrid tiles={tiles} onTileActivate={handleActivate} />
+      </div>
+
+      <ImageViewer
+        open={viewerOpen}
+        items={buildViewerItems(resolvedItems, filename)}
+        initialIndex={viewerIndex}
+        onClose={closeViewer}
+      />
+    </Bubble>
+  )
+}
+
+/**
+ * Composer-only props. Single image (`src`) is required; stacked
+ * `items` and `text` captions are not supported in the composer state.
+ */
+export interface ImageComposerProps {
+  src: string
+  alt?: string
+  filename?: string
+  /**
+   * Native lazy-load hint forwarded to the composer thumbnail `<img>`.
+   * Defaults to `'lazy'`. See `ImageAttachmentSharedProps.loading` for
+   * the rationale.
+   */
+  loading?: ImageLoadingMode
+  onClick?: (index: number) => boolean | void
+  onDismiss?: () => void
+}
+
+export type ImageSentProps = ImageAttachmentSharedProps
+export type ImageReceivedProps = ImageAttachmentSharedProps
+
+const ImageComposer: React.FC<ImageComposerProps> = (props) => (
+  <ImageComposerInner {...props} />
+)
+const ImageSent: React.FC<ImageSentProps> = (props) => (
+  <ImageBubbleRow {...props} state="sent" />
+)
+const ImageReceived: React.FC<ImageReceivedProps> = (props) => (
+  <ImageBubbleRow {...props} state="received" />
+)
+
+const ImageAttachment = {
+  Composer: ImageComposer,
+  Sent: ImageSent,
+  Received: ImageReceived,
+}
+
+export default ImageAttachment