1 | import type { CSSProperties, HTMLProps } from "react";
|
2 | import type { Intent, Props } from "../../common";
|
3 | export 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 | };
|
11 | export type HandleType = (typeof HandleType)[keyof typeof HandleType];
|
12 | export 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 | };
|
23 | export type HandleInteractionKind = (typeof HandleInteractionKind)[keyof typeof HandleInteractionKind];
|
24 | export type HandleHtmlProps = Pick<HTMLProps<HTMLSpanElement>, "aria-label" | "aria-labelledby">;
|
25 | export interface HandleProps extends Props {
|
26 | /** Numeric value of this handle. */
|
27 | value: number;
|
28 | /** Intent for the track segment immediately after this handle, taking priority over `intentBefore`. */
|
29 | intentAfter?: Intent;
|
30 | /** Intent for the track segment immediately before this handle. */
|
31 | intentBefore?: Intent;
|
32 | /** Style to use for the track segment immediately after this handle, taking priority over `trackStyleBefore`. */
|
33 | trackStyleAfter?: CSSProperties;
|
34 | /** Style to use for the track segment immediately before this handle */
|
35 | trackStyleBefore?: CSSProperties;
|
36 | /**
|
37 | * How this handle interacts with other handles.
|
38 | *
|
39 | * @default "lock"
|
40 | */
|
41 | interactionKind?: HandleInteractionKind;
|
42 | /**
|
43 | * Callback invoked when this handle's value is changed due to a drag
|
44 | * interaction. Note that "push" interactions can cause multiple handles to
|
45 | * update at the same time.
|
46 | */
|
47 | onChange?: (newValue: number) => void;
|
48 | /** Callback invoked when this handle is released (the end of a drag interaction). */
|
49 | onRelease?: (newValue: number) => void;
|
50 | /**
|
51 | * Handle appearance type.
|
52 | *
|
53 | * @default "full"
|
54 | */
|
55 | type?: HandleType;
|
56 | /**
|
57 | * A limited subset of HTML props to apply to the rendered `<span>` element.
|
58 | */
|
59 | htmlProps?: HandleHtmlProps;
|
60 | }
|