@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
34 lines • 1.75 kB
TypeScript
import React from 'react';
import type { Action, DragHandleInteractionState, StateTransitionCallbacks, UseDragHandleInteractionStateProps } from './interfaces';
export { UseDragHandleInteractionStateProps };
export declare function calculateNextState<T = void>(state: DragHandleInteractionState<T>, action: Action<T>): DragHandleInteractionState<T>;
export declare function getCallbacksForTransition<T = void>(prevState: DragHandleInteractionState<T>, nextState: DragHandleInteractionState<T>): StateTransitionCallbacks<T>[];
/**
* Manages interaction states for drag handle components.
*
* The hook implements a state machine for drag handles that supports:
* - Pointer-based drag-and-drop (DnD) interactions
* - Keyboard-based universal access pattern (UAP) interactions
* - State transitions with appropriate callbacks
* - Metadata passing between states
*
* States:
* - null: Idle state with no active interaction
* - dnd-start: Initial pointer down, beginning of potential drag
* - dnd-active: Active dragging with pointer movement
* - dnd-end: Completed drag operation
* - uap-action-start: Keyboard/accessibility action initiated
* - uap-action-end: Keyboard/accessibility action completed
*/
export default function useDragHandleInteractionState<T = void>(props?: UseDragHandleInteractionStateProps<T>, options?: {
debug: boolean;
}): {
interaction: DragHandleInteractionState<T>;
processPointerDown: (event: PointerEvent, metadata?: T) => void;
processPointerMove: (event: PointerEvent) => void;
processPointerUp: (event: PointerEvent) => void;
processPointerCancel: () => void;
processKeyDown: (event: React.KeyboardEvent<Element>, metadata?: T) => void;
processFocus: () => void;
processBlur: () => void;
};