@enact/sandstone/Picker/Picker.d.ts

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

// Type definitions for sandstone/Picker

import * as React from "react";
import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
import { MarqueeControllerProps as sandstone_Marquee_MarqueeControllerProps } from "@enact/sandstone/Marquee";

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 PickerBaseProps {
  /**
   * Picker value list.
   */
  children: React.ReactNode;
  /**
   * The  `aria-valuetext`  for the picker.
   *
   * By default,  `aria-valuetext`  is set to the current selected child text.
   */
  "aria-valuetext"?: string;
  /**
 * Determines which key to adjust the picker's value for the joined horizontal one.
 * *  `'enter'`  allows the user to use the enter key to adjust the picker's value
 * *  `'arrow'`  allows the user to use the left or right keys to adjust the picker's value.
 * 
 * The default value for joined horizontal picker is  `'enter'` .
If    is  `'vertical'`  or
   is undefined or is  `false` , this prop is ignored.
 */
  changedBy?: "enter" | "arrow";
  /**
 * 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:
 * *  `title`  - The title component class
 * *  `inlineTitle`  - The title component class when  `inlineTitle`  is true
 */
  css?: object;
  /**
 * The voice control labels for the  `children` .
 * 
 * By default,  `data-webos-voice-labels-ext`  is generated from  `children` . However, if
 `children`  is not an array of numbers or strings,  `data-webos-voice-labels-ext`  should be
set to an array of labels.
 */
  "data-webos-voice-labels-ext"?: number[] | string[];
  /**
 * A custom icon for the decrementer.
 * 
 * All strings supported by    are supported. Without a
custom icon, the default is used, and is automatically changed when the
   is changed.
 */
  decrementIcon?: string;
  /**
   * Disables the picker.
   */
  disabled?: boolean;
  /**
 * A custom icon for the incrementer.
 * 
 * All strings supported by    are supported. Without a
custom icon, the default is used, and is automatically changed when the
   is changed.
 */
  incrementIcon?: string;
  /**
   * Applies inline styling to the title.
   */
  inlineTitle?: boolean;
  /**
 * Allows the user to use the arrow keys or enter key to adjust the picker's value.
 * 
 * Key presses are captured in the directions of the increment and decrement buttons but
others are unaffected. A non-joined Picker allows navigation in any direction, but
requires individual ENTER presses on the incrementer and decrementer buttons. Pointer
interaction is the same for both formats.
 */
  joined?: boolean;
  /**
 * Disables marqueeing of items.
 * 
 * By default, each picker item is wrapped by a
  . When this is set, the items will
not be wrapped.
 */
  marqueeDisabled?: boolean;
  /**
   * Disables transition animation.
   */
  noAnimation?: boolean;
  /**
   * Called when the  `value`  changes.
   */
  onChange?: Function;
  /**
   * Orientation of the picker.
   *
   * Controls whether the buttons are arranged horizontally or vertically around the value.
   */
  orientation?: "horizontal" | "vertical";
  /**
 * When  `true` , the picker buttons operate in the reverse direction such that pressing
up/left decrements the value and down/right increments the value. This is more natural
for vertical lists of text options where "up" implies a spatial change rather than
incrementing the value.
 * 
 * If this prop is omitted, it will be determined by  `orientation` .
For example, if  `orientation`  is  `vertical` ,  `reverse`  is  `true` .
Conversely, if  `orientation`  is  `horizontal` ,  `reverse`  is  `false` .
 */
  reverse?: boolean;
  /**
   * The primary text of the  `Picker` .
   *
   * The screen readers read out the title text when the  `joined`  prop is false
   */
  title?: string;
  /**
 * The type of picker. It determines the aria-label for the next and previous buttons.
 * 
 * Depending on the  `type` ,  `joined` ,  `decrementAriaLabel` , and  `incrementAriaLabel` ,
the screen readers read out differently when Spotlight is on the next button, the previous button,
or the picker itself.
 * 
 * For example, if Spotlight is on the next button, the  `joined`  prop is false,
and aria label props( `decrementAriaLabel`  and  `incrementAriaLabel` ) are not defined,
then the screen readers read out as follows.
 `'string'`  type:  `'next item'` 
 `'number'`  type:  `'press ok button to increase the value'`
 */
  type?: "number" | "string";
  /**
   * Index of the selected child.
   */
  value?: number;
  /**
 * The width of the picker.
 * 
 * A number can be used to set the minimum number of characters to be shown. Setting a
number to less than the number of characters in the longest value will cause the width to
grow for the longer values.
 * 
 * A string can be used to select from pre-defined widths:
 * *  `'small'`  - numeric values
 * *  `'medium'`  - single or short words
 * *  `'large'`  - maximum-sized pickers taking full width of its parent
 * 
 * By default, the picker will size according to the longest valid value.
 */
  width?: "small" | "medium" | "large" | number;
  /**
 * Allows picker to continue from the start of the list after it reaches the end and
vice-versa.
 */
  wrap?: boolean;
}
/**
 * The base  `Picker`  component.
 *
 * This version is not   .
 */

export class PickerBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PickerBaseProps>
> {}

export interface PickerProps
  extends Merge<
    Merge<PickerBaseProps, ui_Changeable_ChangeableProps>,
    sandstone_Marquee_MarqueeControllerProps
  > {
  /**
   * Default index of the selected child.
   *
   * _Note_ : Changing  `defaultValue`  after initial render has no effect.
   */
  defaultValue?: number;
}
/**
 * A Picker component that allows selecting values from a list of values.
 * 
 * By default,  `Picker`  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 Picker extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PickerProps>
> {}

export default Picker;