Popover

Popover показывает содержимое рядом со своим триггером, поверх всего остального: подробности, небольшую форму, выбор цвета. Нажатие на триггер открывает и закрывает его; нажатие снаружи, Escape, кнопка «Назад» на Android и жест выхода VoiceOver закрывают его. Он размещается с одной из сторон триггера, переходит на другую сторону, если места не хватает, остаётся внутри безопасной области и следует за триггером при прокрутке. Собственного оформления у него нет: всплывающее окно и его содержимое принадлежат приложению.

import { mount, signal, Text, View } from "nsh";
import { Popover } from "nsh/base";
import { button, buttonText, desktop, Inspector, Log, PopIn, Segmented, Stage, ui, wide } from "./palette";

type Placement = "top" | "bottom" | "left" | "right";

function App() {
  const placement = signal<Placement>("bottom");
  const offset = signal(8);
  const events = signal<string[]>([]);
  const presses = signal(0);
  const placements = () => (
    <Segmented label="placement" options={["top", "bottom", "left", "right"] as Placement[]} value={placement()} onChange={(v) => placement.set(v)} />
  );
  const offsets = () => <Segmented label="offset" options={[0, 8, 16]} value={offset()} onChange={(v) => offset.set(v)} />;
  const popover = () => (
    <Popover
      placement={placement()}
      offset={offset()}
      margin={12}
      onOpenChange={({ open, reason }) => events.set([`${open ? "opened" : "closed"} · ${reason}`, ...events()].slice(0, 4))}
      trigger={
        <View {...button("accent")}>
          <Text style={buttonText("accent")}>Order #1024</Text>
        </View>
      }
    >
      {/* The panel grows out of the trigger's side each time it opens. */}
      <PopIn side={placement()} class="w-56 gap-2 rounded-xl p-4" style={ui().card}>
        <Text style={{ fontSize: 15, fontWeight: "600", color: ui().text }}>Shipped yesterday</Text>
        <Text style={{ fontSize: 13, color: ui().muted }}>Arriving Friday. The trigger, a press outside and Escape close this.</Text>
        <View style={{ flexDirection: "row", gap: 6, alignItems: "center" }}>
          <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: ui().up }} />
          <Text style={{ fontSize: 12, color: ui().up }}>In transit</Text>
        </View>
      </PopIn>
    </Popover>
  );
  const count = () => (
    <View
      onPress={() => presses.update((n) => n + 1)}
      {...button("secondary", { align: "center" })}
    >
      <Text style={buttonText()}>Count · pressed {presses()}×</Text>
    </View>
  );
  const log = () => <Log title="onOpenChange({ open, reason })" lines={events()} minHeight={92} />;

  return (
    <View style={{ flex: 1, backgroundColor: ui().page, padding: 20, paddingTop: 24, gap: 14 }}>
      <Text style={{ fontSize: 22, fontWeight: "700", color: ui().text }}>popover</Text>
      <Text style={{ color: ui().muted }}>
        {desktop
          ? "Open it, then click “Count” below: one click closes it and presses the button"
          : "Open it, then tap “Count” below: the tap only closes it"}
      </Text>

      {() =>
        wide() ? (
          <View style={{ flex: 1, flexDirection: "row", gap: 16 }}>
            <Stage gap={24}>
              <View style={{ height: 280, alignItems: "center", justifyContent: "center" }}>{popover()}</View>
              {count()}
            </Stage>
            <Inspector>
              {placements()}
              {offsets()}
              {log()}
            </Inspector>
          </View>
        ) : (
          <>
            <View style={{ flexDirection: "row", gap: 12 }}>
              <View style={{ flex: 3 }}>{placements()}</View>
              <View style={{ flex: 2 }}>{offsets()}</View>
            </View>
            <View style={{ flex: 1, minHeight: 200, alignItems: "center", justifyContent: "center" }}>{popover()}</View>
            {count()}
            {log()}
          </>
        )
      }
    </View>
  );
}

mount(App);

use nsh_base::{OpenChangeReason, PopoverEvent, popover};
use nsh_core::prelude::*;

fn details() -> impl IntoElement {
    popover()
        .offset(px(6.0))
        .margin(px(8.0))
        .trigger(view().px_3().py_2().rounded_md().bg(rgb(0xe5e7eb)).child(text("Details")))
        .on_open_change(|e: &PopoverEvent| {
            if let PopoverEvent::OpenChange(open, OpenChangeReason::PressOutside) = e {
                log::info!("closed by a press outside: {open}");
            }
        })
        .child(
            view()
                .w(px(240.0))
                .gap_1()
                .p_3()
                .rounded_lg()
                .bg(white())
                .shadow_lg()
                .child(text("Order #1024").font_weight(FontWeight::SEMIBOLD))
                .child(text("Shipped yesterday, arriving Friday.")),
        )
}

import { Text, View } from "nsh";
import { Popover } from "nsh/base";

function Details() {
  return (
    <Popover
      offset={6}
      margin={8}
      popupClass="w-60 gap-1 rounded-lg bg-white p-3 shadow-lg"
      trigger={
        <View class="rounded-md bg-gray-200 px-3 py-2">
          <Text>Details</Text>
        </View>
      }
    >
      <Text class="font-semibold">Order #1024</Text>
      <Text>Shipped yesterday, arriving Friday.</Text>
    </Popover>
  );
}

Popover берётся из nsh/base. Его содержимое создаётся заново при каждом открытии, поэтому состояние внутри него начинается с нуля.

#Состояние открытия

Без open popover хранит собственное состояние, начиная с defaultOpen. С open состоянием владеет приложение: меняйте его в onOpenChange({ open, reason }), который сообщает о каждом запросе на открытие или закрытие вместе с его причиной ("triggerPress", "pressOutside", "cancel").

const open = signal(false);

<Popover open={open()} onOpenChange={(e) => open.set(e.open)} trigger={<Text>Filters</Text>}>
  <FilterForm onApply={() => open.set(false)} />
</Popover>

closeOnEscape={false} оставляет popover открытым при Escape и «Назад» (onCancel всё равно их получает, чтобы сначала спросить); closeOnPressOutside={false} оставляет его открытым при нажатиях снаружи.

#Телефоны и десктопы

Popover привязан к своему триггеру на любом устройстве: то, что он показывает, относится к тому, что его открыло.

• На десктопах и в браузерах для десктопа нажатие снаружи закрывает его и передаётся дальше тому, что находится под указателем, поэтому один щелчок и закрывает popover, и нажимает кнопку, на которую пришёлся.
• На телефонах и планшетах нажатие снаружи только закрывает его: нажатие принимает прозрачная подложка, как у системных popover.

Для списка действий используйте Menu, который на телефонах превращается в sheet; для панели используйте Sheet.

#Появление и исчезновение

Popover появляется и исчезает вместе с вашими переходами. popupStartingClass задаёт вид всплывающего окна в первом кадре, а классы transition-* из popupClass приводят его к собственному виду: так выглядит его появление. popupEndingClass задаёт его вид после закрытия: popover остаётся и не принимает нажатий, пока выполняются эти переходы, затем исчезает, после чего вызывается onClose. Если его открыть снова во время исчезновения, он возвращается к своему виду из текущего состояния. popupStartingStyle и popupEndingStyle делают то же самое с помощью инлайновых стилей. Если пользователь просит уменьшить анимацию, popover появляется и исчезает мгновенно.

<Popover
  popupClass="rounded-lg bg-white p-3 shadow-lg transition-all duration-150 ease-out"
  popupStartingClass="opacity-0 scale-95"
  popupEndingClass="opacity-0 scale-95"
  onPosition={({ placement }) => side.set(placement)}
  trigger={<Text>Details</Text>}
>
  <OrderSummary />
</Popover>

onPosition({ placement, bounds, available }) сообщает, куда попало всплывающее окно: сторона триггера (другая, если у placement не хватило места), его рамка и свободное место с этой стороны, чтобы стрелка или анимация появления могли указывать на триггер.

#Свойства

#События

#Доступность

Триггер сообщает скринридерам, раскрыт ли popover. Escape и кнопка «Назад» закрывают его, как пользователи и ожидают от всплывающего окна. В TSX триггером служит переданный вами элемент, Button или ваше собственное представление: он сам принимает нажатия и состояние раскрытия, поэтому его собственные классы active: и activeStyle действуют, пока он нажат, и его собственный onPress тоже срабатывает.