Hooks

Đây là hook điều khiển một container phân rã cụ thể.

Sử dụng khi bạn cần gập hoặc mở container như điều khiển layout theo header, toolbar, hoặc route. flex-growcreateContainerSizeState

Param	Type	Default	Mô tả
layoutName bắt buộc	string	-	대상 flex container가 포함된 decomposition layout 이름입니다.
containerName bắt buộc	string	-	flex-grow로 접고 펼칠 decomposition container 이름입니다.
pathname bắt buộc	string	-	route 변경 시 현재 main-axis 노출 비율을 보존하고 새 route에 동기화하는 데 사용합니다.
hideContainer bắt buộc	boolean	-	외부 route/layout 조건으로 대상 container가 숨겨지는 상태입니다. true면 scroll 기반 자동 제어가 비활성화됩니다.
enableScrollHideOnScroll bắt buộc	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	-	Mô tả
contentRef	RefObject<HTMLDivElement \| null>	-	실제 content size를 측정할 wrapper에 연결하는 ref입니다.

useFlexLayoutControl@byeolnaerim/global-rx-state Các hook chia / kéoCác hook điều khiển bố cục

Param	Type	Default	Mô tả
containerSizeKeyName bắt buộc	string	-	useFlexLayoutControl에 전달한 containerSizeKeyName과 같은 값을 사용합니다.
containerSizeStorageOptions	RxStateStorageOptions	-	useFlexLayoutControl에 전달한 storage option과 같은 값을 사용합니다.

Return	Type	-	Mô tả
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입니다.

API	Signature	-	Mô tả
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 더블클릭 여부만 감지합니다.

API	Signature	-	Mô tả
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입니다.

API	Signature	-	Mô tả
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 } hình thức.