react-native-focal/dist/index.d.ts

Humble kit to professionally handle the focus/blur experience for controlled components.

/// <reference types="react" />
import * as react from 'react';
import react__default from 'react';
import { ViewProps } from 'react-native';

declare type Props = ViewProps & {
    children: react__default.ReactNode;
    onPress?: () => void;
};
declare const Container: ({ children, onPress, ...props }: Props) => JSX.Element;

declare type TControllerProps<C> = {
    /**
     * Prop responsible to categorize the controlled component as a focusable one or not. Focusable component as `TextInput`, non focusable component as `Button`.
     */
    isFocusable?: boolean;
    /**
     * Prop responsible for a customized handling of the `onBlur` action, expects a `boolean` as a return. `true` to remove the focus, `false` to keep in focus.
     */
    onBlur?: (node: C) => boolean;
    /**
     * Prop responsible for a customized handling of the `onFocus` action.
     */
    onFocus?: (node?: C) => void;
};
declare type TProps<C> = ViewProps & TControllerProps<C> & {
    children: any;
};
declare function Controller<C>({ children, isFocusable, onBlur, onFocus, ...props }: TProps<C>): JSX.Element;

declare type TComponent = {
    node: any;
    onBlur: (node: any) => boolean;
};
/**
 * Ref containing the list of all the nodes within all the providers.
 */
declare const focuses: react.RefObject<{
    [key: string]: TComponent;
} & {
    focused?: string | undefined;
}>;
/**
 * Method responsible for resetting the focal object ref to an empty object.
 */
declare const resetFocuses: () => void;
/**
 * Gracefully `blur` the focused node via the `onBlur` method specified in the `Controller` props if it can be `blur`red.
 * @param force {boolean} flag to indicate whether to force removing the focused component logically or not.
 */
declare const blur: (force?: boolean | undefined) => void;
/**
 * Method responsible for retrieving the focused component value within the ref.
 */
declare const getFocused: () => TComponent;
/**
 * Method responsible for retrieving the focused component id within the ref.
 */
declare const getFocusedId: () => string | null;
/**
 * Method responsible for retrieving the number of actual nodes in the focal object.
 */
declare const getLength: () => number;
/**
 * Method responsible for retrieving a certain node within the focal object via index if valid.
 */
declare const getByIndex: (index: number) => unknown;
/**
 * Ref containing the list of all the nodes within all the providers.
 */
declare const handlers: react.RefObject<{
    [x: string]: react.Ref<unknown>;
}>;
/**
 * Method responsible for subscribing the handler within the handlers ref object.
 */
declare const subscribeHandler: (id: string, ref: any) => void;
/**
 * Method responsible for unsubscribing the handler from the handlers ref object.
 */
declare const unsubscribeHandler: (id: string) => void;
/**
 * Method responsible for resetting the focal object ref to an empty object.
 */
declare const resetHandlers: () => void;
/**
 * Method responsible for retrieving the handlers list.
 */
declare const getHandlers: () => react.Ref<unknown>[];

export { Container, Controller, blur, focuses, getByIndex, getFocused, getFocusedId, getHandlers, getLength, handlers, resetFocuses, resetHandlers, subscribeHandler, unsubscribeHandler };