UNPKG

2.57 kBTypeScriptView Raw
1import * as React from "react";
2import { Intent, Props } from "../../common";
3export declare const HandleType: {
4 /** A full handle appears as a small square. */
5 FULL: "full";
6 /** A start handle appears as the left or top half of a square. */
7 START: "start";
8 /** An end handle appears as the right or bottom half of a square. */
9 END: "end";
10};
11export declare type HandleType = typeof HandleType[keyof typeof HandleType];
12export declare const HandleInteractionKind: {
13 /** Locked handles prevent other handles from being dragged past then. */
14 LOCK: "lock";
15 /** Push handles move overlapping handles with them as they are dragged. */
16 PUSH: "push";
17 /**
18 * Handles marked "none" are not interactive and do not appear in the UI.
19 * They serve only to break the track into subsections that can be colored separately.
20 */
21 NONE: "none";
22};
23export declare type HandleInteractionKind = typeof HandleInteractionKind[keyof typeof HandleInteractionKind];
24export declare type HandleHtmlProps = Pick<React.HTMLProps<HTMLSpanElement>, "aria-label" | "aria-labelledby">;
25export declare type HandleProps = IHandleProps;
26/** @deprecated use HandleProps */
27export interface IHandleProps extends Props {
28 /** Numeric value of this handle. */
29 value: number;
30 /** Intent for the track segment immediately after this handle, taking priority over `intentBefore`. */
31 intentAfter?: Intent;
32 /** Intent for the track segment immediately before this handle. */
33 intentBefore?: Intent;
34 /** Style to use for the track segment immediately after this handle, taking priority over `trackStyleBefore`. */
35 trackStyleAfter?: React.CSSProperties;
36 /** Style to use for the track segment immediately before this handle */
37 trackStyleBefore?: React.CSSProperties;
38 /**
39 * How this handle interacts with other handles.
40 *
41 * @default "lock"
42 */
43 interactionKind?: HandleInteractionKind;
44 /**
45 * Callback invoked when this handle's value is changed due to a drag
46 * interaction. Note that "push" interactions can cause multiple handles to
47 * update at the same time.
48 */
49 onChange?: (newValue: number) => void;
50 /** Callback invoked when this handle is released (the end of a drag interaction). */
51 onRelease?: (newValue: number) => void;
52 /**
53 * Handle appearance type.
54 *
55 * @default "full"
56 */
57 type?: HandleType;
58 /**
59 * A limited subset of HTML props to apply to the rendered `<span>` element.
60 */
61 htmlProps?: HandleHtmlProps;
62}