ドキュメント
アプリを開く

Platform UI bridge

useAppContext().ui は app-owned UI から host-owned presentation を依頼する primitive です。Business workflow ではありません。

API効果
toast(message, options?)Info、success、warning、error notice。
confirm(options)Host confirmation decision の promise。
navigate(to)Host router で移動。
openArtifact(kind, context?)同じ app lane の現在の renderer で artifact を開きます。
closeArtifact()存在する active artifact host を閉じます。
openImageLightbox(images, startIndex?)Caption と source attribution 対応の共通 image viewer。
TSX
import { useAppContext, useAppFetch } from '@sota/platform';

export function DeleteReportButton({ reportId }: { reportId: string }) {
  const appFetch = useAppFetch();
  const { ui } = useAppContext();

  async function remove() {
    const confirmed = await ui.confirm({
      title: 'Delete report?',
      description: 'This cannot be undone.',
      confirmLabel: 'Delete',
      destructive: true,
    });
    if (!confirmed) return;
    const response = await appFetch('/reports/' + encodeURIComponent(reportId), {
      method: 'DELETE',
    });
    ui.toast(response.ok ? 'Report deleted' : 'Delete failed', {
      kind: response.ok ? 'success' : 'error',
    });
  }

  return <button type="button" onClick={remove}>Delete</button>;
}
TSX
import { useAppContext } from '@sota/platform';

export function PreviewButton({ previewUrl }: { previewUrl: string }) {
  const { ui } = useAppContext();
  return <button type="button" onClick={() => ui.openImageLightbox([{
    url: previewUrl,
    alt: 'Report preview',
    caption: 'Page 1',
    sourceTitle: 'Quarterly report',
    sourceUrl: 'https://reports.example.com/q3',
  }], 0)}>Preview</button>;
}

現在の host が action を実行できない場合は安全な no-op になり得ます。Business state の authority は app backend に置きます。

目次

Esc

全章のタイトルと本文を検索します。