@enact/ui/Slider/Slider.d.ts

A collection of simplified unstyled cross-platform UI components for Enact

// Type definitions for ui/Slider

import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
import { TouchableProps as ui_Touchable_TouchableProps } from "@enact/ui/Touchable";
import * as React from "react";

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 KnobProps {
  /**
   * The orientation of the slider, either  `"horizontal"`  or  `"vertical"` .
   */
  orientation?: string;
  /**
 * A number between 0 and 1 representing the proportion of the  `value`  in terms of  `min` 
and  `max`  props of the slider.
 */
  proportion?: boolean;
  /**
 * Adds a tooltip to the knob using the provided component.
 * 
 * The following props are forwarded to the tooltip:
 * *  `children`  - The  `value`  prop from the slider
 * *  `orientation`  - The value of the  `orientation`  prop from the slider
 * *  `proportion`  - The value of the  `proportion`  prop from the knob
 * 
 * This prop accepts either a Component (e.g.  `MyTooltip` ) which will be instantiated with
the above props or a component instance (e.g.  `<MyTooltip customProp="value" />` ) which
will have its props merged with the above props.
 */
  tooltipComponent?: Function | JSX.Element;
  /**
   * The value of the slider.
   */
  value?: number;
}
/**
 * An unstyled, knob component to be used with a  `Slider` .
 */

export class Knob extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, KnobProps>
> {}

export interface SliderBaseProps {
  /**
 * The component used to render the progress bar within the slider.
 * 
 * The provided component will receive the following props from  `Slider`
 * *  backgroundProgress - The value of  `backgroundProgress`
 * *  orientation        - The value of  `orientation`
 * *  progress           - The  `value`  as a proportion between  `min`  and  `max`
 * *  progressAnchor     - The value of  `progressAnchor`
 * 
 * This prop accepts either a Component (e.g.  `MyProgress` ) which will be instantiated with
the above props or a component instance (e.g.  `<MyProgress customProp="value" />` ) which
will have its props merged with the above props.
 */
  progressBarComponent: React.ComponentType | JSX.Element;
  /**
   * Background progress, as a proportion between  `0`  and  `1` .
   */
  backgroundProgress?: number;
  /**
 * Called with a reference to the root component.
 * 
 * When using   , the  `ref`  prop is forwarded to this component
as  `componentRef` .
 */
  componentRef?: object | Function;
  /**
 * 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
 * *  `knob`        - The knob node
 * *  `horizontal`  - Applied when  `orientation`  prop is `"horizontal"``
 * *  `pressed`     - Applied when  `pressed`  prop is  `true`
 * *  `noFill`      - Applied when  `noFill`  prop is  `true`
 * *  `vertical`    - Applied when  `orientation`  prop is  `"vertical"`
 */
  css?: object;
  /**
   * Disables component and does not generate events.
   */
  disabled?: boolean;
  /**
 * Defines a custom knob component for the slider.
 * 
 * By default, Slider will use its own implementation,   .
 * 
 * The following props are forwarded to the knob:
 * *  `className`         - A  `knob`  class applied by the slider
 * *  `disabled`          - The value of  `disabled`
 * *  `orientation`       - The value of  `orientation`
 * *  `proportion`        - The  `value`  as a proportion between  `min`  and  `max`
 * *  `tooltipComponent`  - The value of  `tooltipComponent`
 * *  `value`             - The value of  `value`
 * 
 * This prop accepts either a Component (e.g.  `MyKnob` ) which will be instantiated with
the above props or a component instance (e.g.  `<MyKnob customProp="value" />` ) which
will have its props merged with the above props.
 */
  knobComponent?: React.ComponentType | JSX.Element;
  /**
 * 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;
  /**
   * Applies the style where the slider bar does not display filled.
   */
  noFill?: boolean;
  /**
   * The orientation of the slider.
   *
   * Allowed values include:
   * *  `'horizontal'`  - A left and right orientation
   * *  `'vertical'`  - An up and down orientation
   */
  orientation?: string;
  /**
   * Applies a pressed visual effect.
   */
  pressed?: boolean;
  /**
 * Sets the point, as a proportion between 0 and 1, from which the slider is filled.
 * 
 * Applies to both the slider's  `value`  and  `backgroundProgress` . In both cases,
setting the value of  `progressAnchor`  will cause the slider to fill from that point
down, when  `value`  or  `backgroundProgress`  is proportionally less than the anchor, or up,
when  `value`  or  `backgroundProgress`  is proportionally greater than the anchor, rather
than always from the start of the slider.
 */
  progressAnchor?: number;
  /**
   * The amount to increment or decrement the value.
   *
   * It must evenly divide into the range designated by  `min`  and  `max` .
   */
  step?: number;
  /**
 * Adds a tooltip to the slider using the provided component.
 * 
 * The following props are forwarded to the tooltip:
 * *  `children`     - The  `value`  prop from the slider
 * *  `orientation`  - The value of the  `orientation`  prop from the slider
 * *  `proportion`   - The  `value`  as a proportion between  `min`  and  `max`
 * 
 * This prop accepts either a Component (e.g.  `MyTooltip` ) which will be instantiated with
the above props or a component instance (e.g.  `<MyTooltip customProp="value" />` ) which
will have its props merged with the above props.
 */
  tooltipComponent?: React.ComponentType | JSX.Element;
  /**
   * The value of the slider.
   *
   * Defaults to the value of  `min` .
   */
  value?: number;
}
/**
 * An unstyled, sliding range-selection component.
 */

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

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

export interface SliderProps
  extends Omit<Merge<SliderBaseProps, SliderDecoratorProps>, "componentRef"> {
  /**
   * Called when the value is changed.
   */
  onChange?: Function;
}
/**
 * A minimally-styled slider component with touch and drag support.
 */

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

export default Slider;