ドラッグボックス

SplitScreenにドロップできるドラッグ開始要素を作成し、必要に応じて純粋なDrag & Dropソースとしても使用します。

基本使用

FlexLayoutSplitScreenDragBoxのchildrenはユーザーが持つUIで、 targetComponentはドロップ後にスプリットスクリーンに入る実際の画面です。

tsx

<FlexLayoutSplitScreenDragBox
  containerName="customer-detail"
  navigationTitle="Customer"
  targetComponent={<CustomerDetail />}
>
  <button type="button">Customer Detail</button>
</FlexLayoutSplitScreenDragBox>

navigationTitleはラベルデータのみを伝えます。

DragBoxのnavigationTitleはドロップされた画面のラベルデータです。DragBoxはnavigationTitleComponentのようなタイトルレンダラーを保持せず、実際のタイトルデザインはドロップ対象のFlexLayoutSplitScreenのnavigationTitleComponentが決定します。

画面データとタイトルデザインの分離

同じDragBoxを異なるSplit Screenにドロップすると、navigationTitleの値は同じですが、各Split Screenのタイトルラッパーデザインに従うことができます。

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

ドラッグ中にEscapeを押すと、現在のドラッグをキャンセルします。クローンと保留中のドラッグ状態を整理し、isDragging false / isDrop falseを伝播するため、Split Screenの分割ガイドも即座に消え、dropEndCallbackや画面分割が実行されません。

Next.js URLレンダリング

Next.js専用エントリポイントからインポートすると、targetComponentの代わりにurlのみを渡すことができます。iframeはデフォルトでfalseで、falseの場合は生成されたレジストリとProviderを通じてサーバーサイドレンダリングします。

tsx

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

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

tsx

<FlexLayoutSplitScreenDragBox
  url="https://example.com"
  iframe
  containerName="external"
  navigationTitle="External"
>
  <span>External</span>
</FlexLayoutSplitScreenDragBox>

ドキュメント外ドロップ

dropDocumentOutsideOptionを指定すると、ドキュメントの外にドロップされたときに新しいウィンドウ/タブを開く動作を構成できます。

tsx

<FlexLayoutSplitScreenDragBox
  containerName="order"
  navigationTitle="Order"
  targetComponent={<OrderView />}
  dropDocumentOutsideOption={{
    openUrl: "/orders/1",
    widthRatio: 0.7,
    heightRatio: 0.8,
    isNewTap: false,
  }}
>
  <span>Order #1</span>
</FlexLayoutSplitScreenDragBox>

よく使うprops

navigationTitle

drop 후 화면에 붙는 라벨 데이터입니다. 타이틀 UI 스타일은 수신하는 FlexLayoutSplitScreen이 담당합니다.

dropEndCallback

drop이 끝난 뒤 x, y, containerName을 받아 후처리합니다.

isBlockingActiveInput

input/textarea/select/contenteditable 등 active 입력 요소에서 drag 시작을 막을지 제어합니다. 기본값은 false입니다.

customData

드래그 중 함께 전달할 string/number/boolean 기반의 커스텀 데이터입니다.

scrollTargetRef

드래그 중 viewport edge auto-scroll 대신 특정 scroll container를 대상으로 삼을 때 사용합니다.