Drag Box

SplitScreen에 drop할 수 있는 드래그 시작 요소를 만들고, 필요하면 순수 Drag & Drop source로도 사용합니다.

기본 사용

FlexLayoutSplitScreenDragBox의 children은 사용자가 잡는 UI이고, targetComponent는 drop 후 split screen에 들어갈 실제 화면입니다.

tsx

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

navigationTitle은 라벨 데이터만 전달합니다.

DragBox의 navigationTitle은 drop된 화면의 라벨 데이터입니다. DragBox는 navigationTitleComponent 같은 타이틀 렌더러를 보관하지 않으며, 실제 타이틀 디자인은 drop 대상 FlexLayoutSplitScreen의 navigationTitleComponent가 결정합니다.

화면 데이터와 타이틀 디자인 분리

같은 DragBox를 서로 다른 Split Screen에 drop하면 navigationTitle 값은 동일하지만 각 Split Screen의 타이틀 래퍼 디자인을 따를 수 있습니다.

Escape로 drag 취소

드래그 중 Escape를 누르면 현재 drag를 취소합니다. clone과 pending drag state를 정리하고 isDragging false / isDrop false를 전파하므로 Split Screen의 분할 안내도 즉시 사라지며 dropEndCallback이나 화면 분할이 실행되지 않습니다.

Next.js URL 렌더링

Next.js 전용 진입점에서 import하면 targetComponent 대신 url만 전달할 수 있습니다. iframe은 기본 false이며, false일 때 생성된 registry와 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>

문서 바깥 drop

dropDocumentOutsideOption을 주면 document 바깥으로 drop될 때 새 창/탭을 여는 동작을 구성할 수 있습니다.

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를 대상으로 삼을 때 사용합니다.