Hooks
공개 export되는 hook과 drag/list paging 관련 subject입니다.
useFlexLayoutControl
특정 decomposition container를 flex-grow로 제어하는 hook입니다. header, toolbar, route별 layout 제어처럼 container 자체를 접거나 펼쳐야 할 때 사용합니다.
| Param | Type | Default | Description |
|---|---|---|---|
layoutName required | string | - | 대상 flex container가 포함된 decomposition layout 이름입니다. |
containerName required | string | - | flex-grow로 접고 펼칠 decomposition container 이름입니다. |
pathname required | string | - | route 변경 시 현재 main-axis 노출 비율을 보존하고 새 route에 동기화하는 데 사용합니다. |
hideContainer required | boolean | - | 외부 route/layout 조건으로 대상 container가 숨겨지는 상태입니다. true면 scroll 기반 자동 제어가 비활성화됩니다. |
enableScrollHideOnScroll required | boolean | - | scroll 방향에 따라 대상 container를 자동으로 접거나 복원할지 여부입니다. |
containerSizeKeyName | string | `__${layoutName}_${containerName}Size` | 측정된 target container main-axis size를 저장할 global-rx-state key입니다. |
containerSizeStorageOptions | RxStateStorageOptions | - | container size state에 적용할 global-rx-state storage 옵션입니다. |
| Return | Type | - | Description |
|---|---|---|---|
contentRef | RefObject<HTMLDivElement | null> | - | 실제 content size를 측정할 wrapper에 연결하는 ref입니다. |
createContainerSizeState
useFlexLayoutControl이 측정한 container size state를 외부에서 사용할 때 생성합니다. 직접 @byeolnaerim/global-rx-state를 import하지 않고 flex-layout을 통해 같은 state에 접근할 수 있습니다.
| Param | Type | Default | Description |
|---|---|---|---|
containerSizeKeyName required | string | - | useFlexLayoutControl에 전달한 containerSizeKeyName과 같은 값을 사용합니다. |
containerSizeStorageOptions | RxStateStorageOptions | - | useFlexLayoutControl에 전달한 storage option과 같은 값을 사용합니다. |
| Return | Type | - | Description |
|---|---|---|---|
setContainerSize | (value: number) => void | - | container size state 값을 갱신하는 setter입니다. |
getContainerSize | () => number | - | 현재 container size state 값을 반환합니다. |
useContainerSize | () => number | - | React component에서 container size state를 구독합니다. |
containerSizeSubject | Subject<number> | - | container size 변경 stream입니다. |
containerSizeReady | Observable<boolean> | - | container size state 준비 상태 stream입니다. |
Layout control hooks
| API | Signature | - | Description |
|---|---|---|---|
useContainers | (layoutName: string) => HTMLElement[] | - | 해당 layoutName 아래의 container DOM 목록을 반환합니다. |
useLayoutName | (containerName: string) => string | undefined | - | containerName이 속한 layoutName을 store에서 찾아 반환합니다. |
useDecompositionLayout | ({ layoutName?, containerName }) => { layout, container, resizePanel } | - | 컨테이너 목록, 특정 컨테이너 DOM, 해당 resize panel DOM을 분해해 반환합니다. |
useContainerSize | (containerName: string) => { size?: { width; height } } | - | ResizeObserver로 특정 컨테이너 크기를 관찰합니다. |
useDoubleClickToggle | (containerName, opt) => { isOpen, isDoubleClick, setIsDoubleClick } | - | 해당 resize panel의 더블클릭을 감지해 open/close/toggle 명령을 실행합니다. |
useDoubleClick | (containerName) => { isDoubleClick, setIsDoubleClick } | - | resize panel 더블클릭 여부만 감지합니다. |
Split / drag hooks
| API | Signature | - | Description |
|---|---|---|---|
useFlexLayoutSplitScreen | ({ isSplitInitial, parentDirection?, directionInitial, selfContainerName, parentLayoutName, layoutName }) => object | - | split screen 내부 상태와 drop target component 배열, direction, boundary size, layoutRef를 관리합니다. |
useDragCapture | (targetRef) => DragStateType | undefined | - | 특정 DOM ref 위에서 drag 상태를 관찰합니다. |
useDragEvents | ({ isBlockingActiveInput? }) => { handleStart, handleMove, handleEnd } | - | DragBox가 사용하는 pointer/touch drag event handler를 생성합니다. |
useFolderEvent | () => FolderEventType | undefined | - | folderEventSubject를 React state로 구독합니다. |
setFolderEvent | (newValue: FolderEventType) => void | - | folderEventSubject에 새 이벤트를 발행합니다. |
dragStateSubject / dragState | Subject<DragStateType> | - | 현재 drag state stream입니다. dragState는 dragStateSubject alias입니다. |
resizeDragSubject | Subject<ResizeDragEvent> | - | resize drag event stream입니다. |
dropMovementEventSubject | Subject<DropMovementEventType> | - | split screen drop append/update/remove 이벤트 stream입니다. |
List paging hooks
| API | Signature | - | Description |
|---|---|---|---|
useListPagingForSentinel | <E>({ onReachTerminal? }) => { firstChildRef, lastChildRef } | - | 첫/마지막 sentinel 요소가 intersect될 때 onReachTerminal을 호출합니다. |
usePaginationViewNumber | ({ initPageNumber }) => { showCurrentPageNumber, showCurrentPageObserveTarget } | - | data-page-index가 붙은 페이지 요소를 관찰해 현재 보이는 페이지 번호를 계산합니다. |
usePagingHandler | <T>({ lastCallPageNumber, dataListRef }) => object | - | 페이지 jump, terminal reach, cached page scrollIntoView 흐름을 처리합니다. |
OnReachTerminalType은 { isFirst, isLast, observer } 형태입니다.