declare type TimeoutID = ReturnType; declare type ResponderEvent = any; export declare type PressResponderConfig = Readonly<{ cancelable?: boolean; disabled?: boolean; delayLongPress?: number; delayPressIn?: number; delayPressOut?: number; onLongPress?: (event: ResponderEvent) => void; onPress?: (event: ResponderEvent) => void; onPressIn?: (event: ResponderEvent) => void; onPressOut?: (event: ResponderEvent) => void; }>; export declare type EventHandlers = Readonly<{ onContextMenu: (event: ResponderEvent) => void; onResponderGrant: (event: ResponderEvent) => void; onResponderMove: (event: ResponderEvent) => void; onResponderRelease: (event: ResponderEvent) => void; onResponderTerminate: (event: ResponderEvent) => void; onResponderTerminationRequest: (event: ResponderEvent) => boolean; onStartShouldSetResponder: (event: ResponderEvent) => boolean; }>; /** * Touchable states. */ declare enum States { NOT_RESPONDER = "NOT_RESPONDER", RESPONDER_INACTIVE_PRESS_IN = "RESPONDER_INACTIVE_PRESS_IN", RESPONDER_INACTIVE_PRESS_OUT = "RESPONDER_INACTIVE_PRESS_OUT", RESPONDER_ACTIVE_PRESS_IN = "RESPONDER_ACTIVE_PRESS_IN", RESPONDER_ACTIVE_PRESS_OUT = "RESPONDER_ACTIVE_PRESS_OUT", RESPONDER_ACTIVE_LONG_PRESS_IN = "RESPONDER_ACTIVE_LONG_PRESS_IN", RESPONDER_ACTIVE_LONG_PRESS_OUT = "RESPONDER_ACTIVE_LONG_PRESS_OUT", ERROR = "ERROR" } /** * Inputs to the state machine. */ declare enum Signals { DELAY = "DELAY", RESPONDER_GRANT = "RESPONDER_GRANT", RESPONDER_RELEASE = "RESPONDER_RELEASE", RESPONDER_TERMINATED = "RESPONDER_TERMINATED", ENTER_PRESS_RECT = "ENTER_PRESS_RECT", LEAVE_PRESS_RECT = "LEAVE_PRESS_RECT", LONG_PRESS_DETECTED = "LONG_PRESS_DETECTED" } /** * =========================== PressResponder Tutorial =========================== * * The `PressResponder` class helps you create press interactions by analyzing the * geometry of elements and observing when another responder (e.g. ScrollView) * has stolen the touch lock. It offers hooks for your component to provide * interaction feedback to the user: * * - When a press has activated (e.g. highlight an element) * - When a press has deactivated (e.g. un-highlight an element) * - When a press should trigger an action, meaning it activated and deactivated * while within the geometry of the element without the lock being stolen. * * A high quality interaction isn't as simple as you might think. There should * be a slight delay before activation. Moving your finger beyond an element's * bounds should trigger deactivation, but moving the same finger back within an * element's bounds should trigger reactivation. * * In order to use `PressResponder`, do the following: * * const pressResponder = new PressResponder(config); * * 2. Choose the rendered component who should collect the press events. On that * element, spread `pressability.getEventHandlers()` into its props. * * return ( * * ); * * 3. Reset `PressResponder` when your component unmounts. * * componentWillUnmount() { * this.state.pressResponder.reset(); * } * * ==================== Implementation Details ==================== * * `PressResponder` only assumes that there exists a `HitRect` node. The `PressRect` * is an abstract box that is extended beyond the `HitRect`. * * # Geometry * * ┌────────────────────────┐ * │ ┌──────────────────┐ │ - Presses start anywhere within `HitRect`. * │ │ ┌────────────┐ │ │ * │ │ │ VisualRect │ │ │ * │ │ └────────────┘ │ │ - When pressed down for sufficient amount of time * │ │ HitRect │ │ before letting up, `VisualRect` activates. * │ └──────────────────┘ │ * │ Out Region o │ * └────────────────────│───┘ * └────── When the press is released outside the `HitRect`, * the responder is NOT eligible for a "press". * * +-------------+ <---+ RESPONDER_RELEASE * |NOT_RESPONDER| * +-------------+ <---+ RESPONDER_TERMINATED * + * | RESPONDER_GRANT (HitRect) * v * +---------------------------+ DELAY +-------------------------+ T + DELAY +------------------------------+ * |RESPONDER_INACTIVE_PRESS_IN|+-------->|RESPONDER_ACTIVE_PRESS_IN| +------------> |RESPONDER_ACTIVE_LONG_PRESS_IN| * +---------------------------+ +-------------------------+ +------------------------------+ * + ^ + ^ + ^ * |LEAVE_ |ENTER_ |LEAVE_ |ENTER_ |LEAVE_ |ENTER_ * |PRESS_RECT |PRESS_RECT |PRESS_RECT |PRESS_RECT |PRESS_RECT |PRESS_RECT * | | | | | | * v + v + v + * +----------------------------+ DELAY +--------------------------+ +-------------------------------+ * |RESPONDER_INACTIVE_PRESS_OUT|+------->|RESPONDER_ACTIVE_PRESS_OUT| |RESPONDER_ACTIVE_LONG_PRESS_OUT| * +----------------------------+ +--------------------------+ +-------------------------------+ * * T + DELAY => LONG_PRESS_DELAY_MS + DELAY * */ export default class PressResponder { _dom: HTMLElement; _config: PressResponderConfig; _eventHandlers: EventHandlers; _longPressDelayTimeout: TimeoutID; _pressDelayTimeout: TimeoutID; _pressOutDelayTimeout: TimeoutID; _responder: any; _touchActivatePosition: Readonly<{ pageX: number; pageY: number; }>; _touchState: States; constructor(config: PressResponderConfig); configure(config: PressResponderConfig, dom?: HTMLElement): void; /** * Resets any pending timers. This should be called on unmount. */ reset(): void; /** * Returns a set of props to spread into the interactive element. */ getEventHandlers(): EventHandlers; _createEventHandlers(): EventHandlers; /** * Receives a state machine signal, performs side effects of the transition * and stores the new state. Validates the transition as well. */ _receiveSignal(signal: Signals, event: ResponderEvent): void; /** * Performs a transition between touchable states and identify any activations * or deactivations (and callback invocations). */ _performTransitionSideEffects(prevState: States, nextState: States, signal: Signals, event: ResponderEvent): void; _saveActivatePosition(event: ResponderEvent): void; _startHighlight(event: ResponderEvent): void; _endHighlight(event: ResponderEvent): void; _handleLongPress(event: ResponderEvent): void; _cancelLongPressDelayTimeout(): void; _cancelPressDelayTimeout(): void; _cancelPressOutDelayTimeout(): void; _isHighlight(state: States): boolean; } export {};