mirror of
https://github.com/zoriya/v10.git
synced 2026-08-14 18:04:49 +00:00
36 lines
1.8 KiB
TypeScript
36 lines
1.8 KiB
TypeScript
import { SliderOptions, SliderRootProps, SliderRootStyle, SliderThumbProps } from "@videojs/core/dom";
|
||
import { SliderInput, SliderState } from "@videojs/core";
|
||
//#region src/ui/hooks/use-slider.d.ts
|
||
interface UseSliderOptions<State extends SliderState = SliderState> extends Pick<SliderOptions, 'getPercent' | 'getStepPercent' | 'getLargeStepPercent' | 'changeThrottle' | 'onValueChange' | 'onValueCommit' | 'onDragStart' | 'onDragEnd'> {
|
||
computeState: (input: SliderInput) => State;
|
||
orientation?: 'horizontal' | 'vertical' | undefined;
|
||
disabled?: boolean | undefined;
|
||
/** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */
|
||
adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;
|
||
/** Compute CSS variable map from the (possibly alignment-adjusted) state. */
|
||
getCSSVars: (state: State) => Record<string, string>;
|
||
}
|
||
interface UseSliderReturnValue<State extends SliderState = SliderState> {
|
||
state: State;
|
||
cssVars: Record<string, string>;
|
||
rootRef: React.RefCallback<HTMLElement>;
|
||
thumbRef: React.RefCallback<HTMLElement>;
|
||
rootProps: SliderRootProps;
|
||
rootStyle: SliderRootStyle;
|
||
thumbProps: SliderThumbProps;
|
||
}
|
||
/**
|
||
* Manages slider input lifecycle for React.
|
||
*
|
||
* Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its
|
||
* input state via `useSnapshot`. Returns split props for the root
|
||
* (pointer events) and thumb (keyboard/focus) elements.
|
||
*/
|
||
declare function useSlider<State extends SliderState = SliderState>(options: UseSliderOptions<State>): UseSliderReturnValue<State>;
|
||
declare namespace useSlider {
|
||
type Options = UseSliderOptions;
|
||
type ReturnValue = UseSliderReturnValue;
|
||
}
|
||
//#endregion
|
||
export { UseSliderOptions, UseSliderReturnValue, useSlider };
|
||
//# sourceMappingURL=use-slider.d.ts.map
|