@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
42 lines • 1.48 kB
TypeScript
import { Direction as WrapperDirection, DirectionState as WrapperDirectionState, TriggerMode } from '../drag-handle-wrapper/interfaces';
export interface DragHandleProps {
variant?: DragHandleProps.Variant;
size?: DragHandleProps.Size;
ariaLabel?: string;
ariaLabelledBy?: string;
ariaDescribedby?: string;
ariaValue?: DragHandleProps.AriaValue;
active?: boolean;
disabled?: boolean;
className?: string;
onPointerDown?: React.PointerEventHandler;
onKeyDown?: React.KeyboardEventHandler;
onClick?: React.MouseEventHandler;
tooltipText?: string;
directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;
onDirectionClick?: (direction: DragHandleProps.Direction) => void;
triggerMode?: TriggerMode;
initialShowButtons?: boolean;
controlledShowButtons?: boolean;
/**
* Hide the UAP buttons when dragging is active.
*/
hideButtonsOnDrag?: boolean;
/**
* Max cursor movement (in pixels) that still counts as a press rather than
* a drag. Small threshold needed for usability.
*/
clickDragThreshold?: number;
ref?: React.RefObject<HTMLElement>;
}
export declare namespace DragHandleProps {
type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';
type Direction = WrapperDirection;
type DirectionState = WrapperDirectionState;
type Size = 'small' | 'normal';
interface AriaValue {
valueMin: number;
valueMax: number;
valueNow: number;
}
}