خطافات
هذه هي hook المصدرة علنًا وموضوعات متعلقة بالسحب/قائمة التمرير.
useFlexLayoutControl
هذه هي hook للتحكم في حاوية التحلل المحددة. زيادة المرونةتستخدم عندما تحتاج إلى طي أو فتح الحاوية نفسها مثل التحكم في الرأس أو شريط الأدوات أو تخطيط حسب المسار.
| Param | Type | Default | الوصف |
|---|---|---|---|
layoutName مطلوب | string | - | 대상 flex container가 포함된 decomposition layout 이름입니다. |
containerName مطلوب | string | - | flex-grow로 접고 펼칠 decomposition container 이름입니다. |
pathname مطلوب | string | - | route 변경 시 현재 main-axis 노출 비율을 보존하고 새 route에 동기화하는 데 사용합니다. |
hideContainer مطلوب | boolean | - | 외부 route/layout 조건으로 대상 container가 숨겨지는 상태입니다. true면 scroll 기반 자동 제어가 비활성화됩니다. |
enableScrollHideOnScroll مطلوب | 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 | - | الوصف |
|---|---|---|---|
contentRef | RefObject<HTMLDivElement | null> | - | 실제 content size를 측정할 wrapper에 연결하는 ref입니다. |
createContainerSizeState
useFlexLayoutControlيتم إنشاؤه عند استخدام حالة حجم الحاوية المقاسة من الخارج. يمكنك الوصول إلى نفس الحالة من خلال flex-layout دون استيرادها مباشرة. @byeolnaerim/global-rx-state.
| Param | Type | Default | الوصف |
|---|---|---|---|
containerSizeKeyName مطلوب | string | - | useFlexLayoutControl에 전달한 containerSizeKeyName과 같은 값을 사용합니다. |
containerSizeStorageOptions | RxStateStorageOptions | - | useFlexLayoutControl에 전달한 storage option과 같은 값을 사용합니다. |
| Return | Type | - | الوصف |
|---|---|---|---|
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 | - | الوصف |
|---|---|---|---|
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 | - | الوصف |
|---|---|---|---|
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 | - | الوصف |
|---|---|---|---|
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 } .