分割画面

ドラッグ＆ドロップ分割、センタータブの整列、タイトル/ガイド/More UIのカスタマイズを行ったSplit Screenで構成します。

基本SplitScreen

FlexLayoutSplitScreenは中央コンポーネントを基準にbefore/center/after領域をストアで管理します。DragBoxがこの画面上にドロップされると、位置に応じて行または列の分割が生成され、同じcenterに入った画面はタブのように管理されます。

tsx

<FlexLayoutSplitScreen
  layoutName="editor-split"
  containerName="editor-home"
  navigationTitle="Home"
>
  <HomeView />
</FlexLayoutSplitScreen>

navigationTitleとタイトルレンダリング

navigationTitleは画面のラベルデータであり、 navigationTitleComponentはSplit Screenが各ラベルを実際のタイトルUIとしてレンダリングする際に使用する共通ラッパーです。DragBoxはnavigationTitle文字列のみを渡し、navigationTitleComponentを持って移動しません。

到着したSplit Screenのデザインを使用します。

画面を別のSplit Screenに移動すると、タイトルラベルデータは保持されますが、レンダリングデザインは到着したSplit ScreenのnavigationTitleComponentに従います。

tsx

function SplitScreenTitle({ children }: { children?: React.ReactNode }) {
  return <strong className="split-title">{children}</strong>;
}

<FlexLayoutSplitScreen
  layoutName="editor-split"
  containerName="editor-home"
  navigationTitle="Home"
  navigationTitleComponent={<SplitScreenTitle />}
>
  <HomeView />
</FlexLayoutSplitScreen>

分割ガイドとMore UIのカスタマイズ

titleWrapperComponent

navigationTitleComponentとtitleCloseButtonComponentを一緒に包む共通ラッパーです。省略すると別のDOMラッパーは作成されません。

titleCloseButtonComponent

centerタブの閉じるUIを置き換えます。undefinedの場合はデフォルトのXボタンを使用し、nullの場合は閉じるボタンを隠します。

dropGuideComponent

分割可能な領域にドラッグしたときに表示される基本ガイドUIを置き換えます。省略すると基本ガイド文言が使用されます。

titleMoreButtonComponent

タイトル右の...トリガーのみを置き換えます。undefinedの場合は基本ボタンを使用し、nullの場合はMoreを隠します。

renderTitleMoreMenuItems

基本Moreメニューを保持しつつ、ユーザーメニュー項目を下に追加します。

renderTitleMoreMenu

基本メニュー内容をすべて置き換えます。Portal、位置計算、外クリック、Escape閉じるはライブラリが引き続き処理します。

tsx

<FlexLayoutSplitScreen
  layoutName="editor-split"
  containerName="editor-home"
  navigationTitle="Home"
  titleWrapperComponent={<div className="split-tab" />}
  titleCloseButtonComponent={<button type="button">Close</button>}
  dropGuideComponent={<div>Drop here</div>}
  titleMoreButtonComponent={<button type="button">Menu</button>}
  renderTitleMoreMenuItems={(context) => (
    <button
      type="button"
      onClick={() => {
        console.log(context.activeItem);
        context.closeMenu();
      }}
    >
      Custom action
    </button>
  )}
>
  <HomeView />
</FlexLayoutSplitScreen>

基本Moreメニューと拡張コンテキスト

基本Moreメニューは現在のタブを閉じる、他のタブをすべて閉じる、右のタブをすべて閉じる、現在の分割のタブをすべて閉じる、openUrlがある場合は新しいウィンドウで開くを提供します。

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

closeMenu(), closeCurrentTab(), closeOtherTabs(), closeTabsToRight(), closeAllTabs(), openInNewWindow()

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

メニューはdocument.bodyにReact Portalでレンダリングされます。triggerとmenuの実際のサイズを基準にviewport内に配置し、scroll/resize時に位置を再計算するため、Split Screen内部のオーバーフローに切れません。

centerタブタイトルの順序変更

同じSplit Screenのcenterタブタイトルをドラッグして順序を変更できます。対象タイトルの左半分に置くと前に、右半分に置くと後ろに移動し、アクティブタブはscreenKeyに基づいて保持されます。

タイトルのリオーダーと画面分割はドロップ領域が分離されます。

タイトル領域ではタブ整列のみを処理するため、分割ガイドは表示されません。タイトルを実際のSplit Screen領域にドラッグして外に出すと、既存の画面分割ドラッグ動作をそのまま使用できます。

Escapeでドラッグをキャンセル

DragBoxをドラッグ中にEscapeを押すと、現在のドラッグクローンと保留中のドラッグ状態を整理し、isDragging false / isDrop falseの状態を伝播します。分割ガイドUIは即座に消え、その後のmouse/touch終了でもドロップは実行されません。

Next.jsでURLを使って画面をドロップ

v1.0.0 Next.jsエントリ

FlexLayoutSplitScreen自体はそのまま分割画面を管理します。Next.jsでURLのみでpage.tsxをサーバーレンダリングしてドロップするには、@byeolnaerim/flex-layout/nextのDragBoxと生成されたFlexLayoutNextSplitScreenを使用してください。

tsx

import { FlexLayoutSplitScreenDragBox } from "@byeolnaerim/flex-layout/next";

<FlexLayoutSplitScreenDragBox
  url="/orders/1"
  containerName="order-1"
  navigationTitle="Order #1"
>
  <button type="button">Order #1</button>
</FlexLayoutSplitScreenDragBox>

状態ライフサイクルオプション

preserveStateOnUnmount

true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.

screenKey

split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.

非推奨のライフサイクルプロパティ

isResetOnChildrenChangeはもはやランタイム動作に使用されず、削除予定です。isRemoveStoreOnUnmountもpreserveStateOnUnmountに置き換えられ、互換性のための非推奨エイリアスのみが残っています。

リフレッシュとブラウザURLの復元

Next.js URLペインのpersistence

ブラウザのリフレッシュまで分割状態を復元するには、生成されたFlexLayoutNextSplitScreenにpersistenceを指定します。ReactElementを保存せず、再生成可能なNext URLペインのメタデータのみをストレージに保存します。

tsx

<FlexLayoutNextSplitScreen
  persistence={{
    storage: "auto",
    restoreOnReload: true,
    syncWithBrowserUrl: true,
  }}
>
  <FlexLayoutSplitScreen
    layoutName="editor-split"
    containerName="editor-home"
    navigationTitle="Home"
  >
    <HomeView />
  </FlexLayoutSplitScreen>
</FlexLayoutNextSplitScreen>