@brdgapp/ui 0.1.2 → 1.0.0

package/src/network-people-helper/person-menu.tsx

@@ -1,211 +0,0 @@
-"use client"
-
-import { useEffect, useLayoutEffect, useRef, useState } from "react"
-import { createPortal } from "react-dom"
-import { CheckIcon, CopyIcon, LinkIcon, MoreIcon, UserIcon, UserPlusIcon } from "./icons"
-import type { BridgeClientConfig } from "../provider"
-import type { NetworkContact, NetworkPersonAction } from "./types"
-
-function introUrl(inboxUrl: string, email: string): string {
-  const url = new URL(inboxUrl)
-  url.searchParams.set("action", "make-intro")
-  url.searchParams.set("n1", email)
-  return url.toString()
-}
-
-export function PersonMenu({
-  contact,
-  customActions,
-  config,
-}: {
-  contact: NetworkContact
-  customActions: NetworkPersonAction[]
-  config: BridgeClientConfig
-}) {
-  const [open, setOpen] = useState(false)
-  const [copied, setCopied] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const [position, setPosition] = useState<{ top: number; left: number } | null>(null)
-  const profileUrl = contact.username ? config.profileUrlForUsername(contact.username) : null
-  const makeIntro = contact.email ? introUrl(config.introInboxUrl, contact.email) : null
-  const hasActions = customActions.length > 0 || Boolean(makeIntro || contact.shareLink || profileUrl)
-
-  useLayoutEffect(() => {
-    if (!open || !buttonRef.current) return
-    function place() {
-      const rect = buttonRef.current?.getBoundingClientRect()
-      if (!rect) return
-      const width = 248
-      const left = Math.max(8, Math.min(rect.right - width, window.innerWidth - width - 8))
-      const estimatedHeight = menuRef.current?.offsetHeight ?? 180
-      const below = rect.bottom + 6
-      const top = below + estimatedHeight > window.innerHeight - 8 ? Math.max(8, rect.top - estimatedHeight - 6) : below
-      setPosition({ top, left })
-    }
-    place()
-    window.addEventListener("resize", place)
-    window.addEventListener("scroll", place, true)
-    return () => {
-      window.removeEventListener("resize", place)
-      window.removeEventListener("scroll", place, true)
-    }
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    function onPointer(event: MouseEvent) {
-      const target = event.target
-      if (!(target instanceof Node)) return
-      if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) return
-      setOpen(false)
-      setCopied(false)
-    }
-    function onKey(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        setOpen(false)
-        setCopied(false)
-      }
-    }
-    document.addEventListener("mousedown", onPointer)
-    document.addEventListener("keydown", onKey)
-    return () => {
-      document.removeEventListener("mousedown", onPointer)
-      document.removeEventListener("keydown", onKey)
-    }
-  }, [open])
-
-  if (!hasActions) return null
-
-  async function copyIntroLink() {
-    if (!contact.shareLink) return
-    try {
-      await navigator.clipboard.writeText(contact.shareLink)
-      setCopied(true)
-      window.setTimeout(() => {
-        setCopied(false)
-        setOpen(false)
-      }, 1200)
-    } catch {
-      // Clipboard can fail in restricted contexts.
-    }
-  }
-
-  const menu = open ? (
-    <div
-      ref={menuRef}
-      className="bridge-network-helper__person-menu-content"
-      style={position ? { top: position.top, left: position.left } : { visibility: "hidden" }}
-      role="menu"
-      onClick={(event) => event.stopPropagation()}
-    >
-      {customActions.map((action) => (
-        <button
-          key={action.id}
-          type="button"
-          role="menuitem"
-          className={
-            action.description
-              ? "bridge-network-helper__person-menu-item has-description"
-              : "bridge-network-helper__person-menu-item"
-          }
-          onClick={() => {
-            setOpen(false)
-            action.onSelect(contact)
-          }}
-        >
-          {action.icon ? <span className="bridge-network-helper__person-menu-icon">{action.icon}</span> : null}
-          <span>
-            <span className="bridge-network-helper__person-menu-label">{action.label}</span>
-            {action.description ? (
-              <span className="bridge-network-helper__person-menu-description">{action.description}</span>
-            ) : null}
-          </span>
-        </button>
-      ))}
-      {makeIntro ? (
-        <a className="bridge-network-helper__person-menu-item" role="menuitem" href={makeIntro} target="_blank" rel="noopener noreferrer">
-          <UserPlusIcon className="bridge-network-helper__person-menu-icon" />
-          Make intro
-        </a>
-      ) : null}
-      {contact.shareLink ? (
-        <button
-          type="button"
-          role="menuitem"
-          className="bridge-network-helper__person-menu-item"
-          onClick={() => {
-            if (!copied) void copyIntroLink()
-          }}
-        >
-          {copied ? (
-            <CheckIcon className="bridge-network-helper__person-menu-icon is-copied" />
-          ) : (
-            <LinkIcon className="bridge-network-helper__person-menu-icon" />
-          )}
-          {copied ? "Copied" : "Copy intro link"}
-        </button>
-      ) : null}
-      {profileUrl ? (
-        <a className="bridge-network-helper__person-menu-item" role="menuitem" href={profileUrl} target="_blank" rel="noopener noreferrer">
-          <UserIcon className="bridge-network-helper__person-menu-icon" />
-          View Bridge profile
-        </a>
-      ) : null}
-    </div>
-  ) : null
-
-  return (
-    <>
-      <button
-        ref={buttonRef}
-        type="button"
-        className="bridge-network-helper__person-menu"
-        aria-label={`More options for ${contact.name}`}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        data-state={open ? "open" : "closed"}
-        onClick={(event) => {
-          event.stopPropagation()
-          setOpen((current) => !current)
-          setCopied(false)
-        }}
-      >
-        <MoreIcon />
-      </button>
-      {menu && typeof document !== "undefined" ? createPortal(menu, document.body) : null}
-    </>
-  )
-}
-
-export function ShareLinkCopyControl({ shareLink }: { shareLink: string }) {
-  const [copied, setCopied] = useState(false)
-  const display = shareLink.replace(/^https?:\/\//i, "")
-
-  async function handleCopy() {
-    try {
-      await navigator.clipboard.writeText(shareLink)
-      setCopied(true)
-      window.setTimeout(() => setCopied(false), 1600)
-    } catch {
-      // Clipboard can fail in restricted contexts.
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      className="bridge-network-helper__share-link"
-      onClick={handleCopy}
-      title={copied ? "Copied" : "Copy Introlink"}
-      aria-label={copied ? "Introlink copied" : `Copy Introlink ${display}`}
-    >
-      <span className="bridge-network-helper__share-link-text">{display}</span>
-      {copied ? (
-        <CheckIcon className="bridge-network-helper__share-link-icon is-copied" />
-      ) : (
-        <CopyIcon className="bridge-network-helper__share-link-icon" />
-      )}
-    </button>
-  )
-}