@enact/sandstone/Slider/Slider.d.ts

Large-screen/TV support library for Enact, containing a variety of UI components.

// Type definitions for sandstone/Slider

import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { SliderDecoratorProps as ui_Slider_SliderDecoratorProps } from "@enact/ui/Slider";
import * as React from "react";
import { SliderBaseProps as ui_Slider_SliderBaseProps } from "@enact/ui/Slider";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface SliderBaseProps
  extends Omit<ui_Slider_SliderBaseProps, "progressBarComponent"> {
  /**
 * Activates the component when selected so that it may be manipulated via the directional
input keys.
 */
  activateOnSelect?: boolean;
  /**
   * Sets the knob to selected state and allows it to move via 5-way controls.
   */
  active?: boolean;
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `slider`  - The root component class
 */
  css?: object;
  /**
   * Disables component and does not generate events.
   */
  disabled?: boolean;
  /**
 * Indicates that the slider has gained focus and if the tooltip is present, it will be
shown.
 */
  focused?: boolean;
  /**
 * Controls the keydown frequency with which the acceleration will "freeze".
While frozen, the value of the slider is not changed via arrow key.
 * 
 * To customize the key acceleration speed, pass an array for   .
Each number represents a number of an event for sampling.
For example, 1 means to process all events while 3 means to process one of the three events.
If the number is large, the slider value changes slowly.
Example for accelerating:
 * ```
keyFrequency={[3, 3, 3, 2, 2, 2, 1]}
```
 */
  keyFrequency?: number[];
  /**
 * The amount to increment or decrement the position of the knob via 5-way controls.
 * 
 * It must evenly divide into the range designated by  `min`  and  `max` . If not specified,
 `step`  is used for the default value.
 */
  knobStep?: number;
  /**
 * The maximum value of the slider.
 * 
 * The range between  `min`  and  `max`  should be evenly divisible by
  .
 */
  max?: number;
  /**
 * The minimum value of the slider.
 * 
 * The range between  `min`  and  `max`  should be evenly divisible by
  .
 */
  min?: number;
  /**
   * Disable wheel event.
   */
  noWheel?: boolean;
  /**
   * The handler when the knob is activated or deactivated by selecting it via 5-way
   */
  onActivate?: Function;
  /**
 * Called when a key is pressed down while the slider is focused.
 * 
 * When a directional key is pressed down and the knob is active (either by first
pressing enter or when  `activateOnSelect`  is disabled), the Slider will increment or
decrement the current value and emit an  `onChange`  event. This default behavior can be
prevented by calling  `preventDefault()`  on the event passed to this callback.
 */
  onKeyDown?: Function;
  /**
 * Called when a key is released while the slider is focused.
 * 
 * When the enter key is released and  `activateOnSelect`  is enabled, the slider will be
activated to enable incrementing or decrementing the value via directional keys. This
default behavior can be prevented by calling  `preventDefault()`  on the event passed to
this callback.
 */
  onKeyUp?: Function;
  /**
   * Displays an anchor at  `progressAnchor` .
   */
  showAnchor?: boolean;
  /**
   * The amount to increment or decrement the value.
   *
   * It must evenly divide into the range designated by  `min`  and  `max` .
   */
  step?: number;
  /**
 * Enables the built-in tooltip
 * 
 * To customize the tooltip, pass either a custom tooltip component or an instance of
   with additional props configured.
 * ```
<Slider
  tooltip={
    <SliderTooltip percent side="after" />
  }
/>
```
 
 * The tooltip may also be passed as a child via the  `"tooltip"`  slot. See
   for more information on how slots can be used.
 * ```
<Slider>
  <SliderTooltip percent side="after" />
</Slider>
```
 
 * If a custom tooltip is provided, it will receive the following props:
 * *  `children`  - The  `value`  prop from the slider
 * *  `visible`  -  `true`  if the tooltip should be displayed
 * *  `orientation`  - The value of the  `orientation`  prop from the slider
 * *  `proportion`  - A number between 0 and 1 representing the proportion of the  `value`  in
terms of  `min`  and  `max`
 */
  tooltip?: boolean | JSX.Element | Function;
  /**
   * The value of the slider.
   *
   * Defaults to the value of  `min` .
   */
  value?: number;
  /**
 * The interval (in milliseconds) between valid wheel events.
 * 
 * For example, 200 means to ignore wheel events occurred within 200ms
of the last processed wheel event while 0 means to process all wheel events.
If the number is large, the slider value changes slowly.
 */
  wheelInterval?: number;
}
/**
 * Range-selection input component.
 */

export class SliderBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SliderBaseProps>
> {}

export interface SliderDecoratorProps
  extends Merge<
    Merge<
      Merge<
        Merge<
          ui_Changeable_ChangeableProps,
          spotlight_Spottable_SpottableProps
        >,
        sandstone_Skinnable_SkinnableProps
      >,
      ui_Slottable_SlottableProps
    >,
    ui_Slider_SliderDecoratorProps
  > {}
export function SliderDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & SliderDecoratorProps>;

export interface SliderProps extends SliderDecoratorProps {
  /**
 * Overrides the  `aria-valuetext`  for the slider.
 * 
 * By default,  `aria-valuetext`  is set to the current value. This should only be used when
the parent controls the value of the slider directly through the props.
 */
  "aria-valuetext"?: string | number;
}
/**
 * Slider input with Sandstone styling,   ,
   and   
applied.
 * 
 * By default,  `Slider`  maintains the state of its  `value`  property. Supply the  `defaultValue` 
property to control its initial value. If you wish to directly control updates to the
component, supply a value to  `value`  at creation time and update it in response to  `onChange` 
events.
 */

export class Slider extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SliderProps>
> {}

export interface SliderTooltipProps {}
/**
 * A    specifically adapted for use with
   or
  .
 */

export class SliderTooltip extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SliderTooltipProps>
> {}

export default Slider;