react-native-tree-multi-select
Version:
A super-fast, customizable tree view component for React Native with multi-selection, checkboxes, and search filtering capabilities.
58 lines • 2.88 kB
TypeScript
/**
* ScrollToNodeHandler Component
*
* This component provides an imperative handle to scroll to a specified node within a tree view.
* The scrolling action is orchestrated via a two-step "milestone" mechanism that ensures the target
* node is both expanded in the tree and that the rendered list reflects this expansion before the scroll
* is performed.
*
* The two key milestones tracked by the `expandAndScrollToNodeQueue` state are:
* 1. EXPANDED: Indicates that the expansion logic for the target node has been initiated.
* 2. RENDERED: Indicates that the list has re-rendered with the expanded node included.
*
* When the `scrollToNodeID` method is called:
* - The scroll parameters (target node ID, animation preferences, view offset/position) are stored in a ref.
* - The target node's expansion is triggered via the `expandNodes` helper.
* - The `expandAndScrollToNodeQueue` state is updated to mark that expansion has begun.
*
* As the component re-renders (e.g., after the node expansion changes the rendered list):
* - A useEffect monitors changes to the list, and once it detects the expansion has occurred,
* it updates the queue to include the RENDERED milestone.
*
* A layout effect then waits for both conditions to be met:
* - The target node is confirmed to be in the expanded set.
* - The `expandAndScrollToNodeQueue` exactly matches the expected milestones ([EXPANDED, RENDERED]).
*
* Once both conditions are satisfied:
* - The index of the target node is determined within the latest flattened node list.
* - The flash list is scrolled to that index.
* - The queued scroll parameters and milestone queue are reset.
*
* This design ensures that the scroll action is performed only after the target node is fully present
* in the UI, thus preventing issues with attempting to scroll to an element that does not exist yet.
*/
import React from "react";
import { __FlattenedTreeNode__ } from "../types/treeView.types";
interface Props<ID> {
storeId: string;
flashListRef: React.MutableRefObject<any>;
flattenedFilteredNodes: __FlattenedTreeNode__<ID>[];
setInitialScrollIndex: React.Dispatch<React.SetStateAction<number>>;
initialScrollNodeID: ID | undefined;
}
export interface ScrollToNodeParams<ID> {
nodeId: ID;
expandScrolledNode?: boolean;
animated?: boolean;
viewOffset?: number;
viewPosition?: number;
}
export interface ScrollToNodeHandlerRef<ID> {
scrollToNodeID: (params: ScrollToNodeParams<ID>) => void;
}
declare function _innerScrollToNodeHandler<ID>(props: Props<ID>, ref: React.ForwardedRef<ScrollToNodeHandlerRef<ID>>): null;
export declare const ScrollToNodeHandler: <ID>(props: Props<ID> & {
ref?: React.ForwardedRef<ScrollToNodeHandlerRef<ID>>;
}) => ReturnType<typeof _innerScrollToNodeHandler>;
export {};
//# sourceMappingURL=ScrollToNodeHandler.d.ts.map