UNPKG

2.48 kBTypeScriptView Raw
1import type { CSSProperties, HTMLProps } from "react";
2import type { 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 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 type HandleInteractionKind = (typeof HandleInteractionKind)[keyof typeof HandleInteractionKind];
24export type HandleHtmlProps = Pick<HTMLProps<HTMLSpanElement>, "aria-label" | "aria-labelledby">;
25export 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}