@enact/sandstone/ProgressBar/ProgressBar.d.ts

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

// Type definitions for sandstone/ProgressBar

import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
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 ProgressBarBaseProps {
  /**
   * The proportion of the loaded portion of the progress bar.
   * *  Valid values are between  `0`  and  `1` .
   */
  backgroundProgress?: number;
  /**
 * 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:
 * *  `progressBar`  - The root component class
 * *  `radial`  - Applied when  `orientation`  is  `'radial'`
 */
  css?: object;
  /**
   * Highlights the filled portion.
   */
  highlighted?: boolean;
  /**
   * The orientation of the slider.
   */
  orientation?: "horizontal" | "vertical" | "radial";
  /**
   * A number between  `0`  and  `1`  indicating the proportion of the filled portion of the bar.
   */
  progress?: number;
  /**
   * Displays an anchor at  `progressAnchor` .
   */
  showAnchor?: boolean;
  /**
 * Enables the built-in tooltip.
 * 
 * To customize the tooltip, pass either a custom tooltip component or an instance of
   with additional
props configured.
 * 
 * The provided component will receive the following props from  `ProgressBar` :
 * *  `orientation`   - The value of  `orientation`
 * *  `percent`       - Always  `true`  indicating the value should be presented as a percentage
rather than an absolute value
 * *  `progress`      - The  `value`  as a proportion between  `min`  and  `max`
 * *  `visible`       - Always  `true`  indicating that the tooltip should be visible
 * 
 * Usage:
 * ```
<ProgressBar
  tooltip={
    <ProgressBarTooltip position="after" />
  }
/>
```
 
 * The tooltip may also be passed as a child via the  `"tooltip"`  slot. See
   for more information on how slots can be used.
 * 
 * Usage:
 * ```
<ProgressBar>
  <ProgressBarTooltip position="after" />
</ProgressBar>
```
 */
  tooltip?: boolean | React.ComponentType | JSX.Element;
}
/**
 * Renders a sandstone-styled progress bar.
 */

export class ProgressBarBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ProgressBarBaseProps>
> {}

export interface ProgressBarTooltipProps {
  /**
 * 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:
 * *  `tooltip`  - The root component class
 */
  css?: object;
  /**
 * Sets the orientation of the tooltip based on the orientation of the bar.
 * 
 * 'vertical' sends the tooltip to one of the sides, 'horizontal' positions it above the
bar, 'radial' can position it on all sides.
 */
  orientation?: "horizontal" | "vertical" | "radial";
  /**
   * Displays the value as a percentage.
   */
  percent?: boolean;
  /**
 * Position of the tooltip with respect to the progress bar.
 * *  For  `orientation="horizontal"`  or  `orientation="radial"`  progress bars, the default value is  `'above'` .
 * *  For  `orientation="vertical"`  progress bars, the default value is  `'before'` .
 * 
 * When using  `'before'`  or  `'after'`  alone or in any of the below combinations,  `'before'` 
will position the tooltip on the side of the current locale's text directionality. In LTR
locales, it will be on the left; in RTL locales, it will be on the right. Similarly,
 `'after'`  will position the tooltip on the opposite side: the right side for LTR and
left for RTL.
 * 
 * Valid values when  `orientation="horizontal"`  or  `orientation="radial"`
 * _Value_ _Tooltip Direction_ `'above'` Above component, flowing to the nearest end `'above left'` Above component, flowing to the left `'above before'` Above component, flowing to the start of text `'above center'` Above component, flowing to the center `'above right'` Above component, flowing to the right `'above after'` Above component, flowing to the end of text `'below'` Below component, flowing to the nearest end `'below left'` Below component, flowing to the left `'below before'` Below component, flowing to the start of text `'below center'` Below component, flowing to the center `'below right'` Below component, flowing to the right `'below after'` Below component, flowing to the end of text 
 * Valid values when  `orientation="vertical"`  or  `orientation="radial"`
 * _Value_ _Tooltip Direction_ `'left'` Left of the component, contents middle aligned `'before'` Start of text side of the component, contents middle aligned `'right'` right of the component, contents middle aligned `'after'` End of text side of the component, contents middle aligned */
  position?:
    | "above"
    | "above before"
    | "above left"
    | "above after"
    | "above center"
    | "above right"
    | "below"
    | "below left"
    | "below before"
    | "below center"
    | "below right"
    | "below after"
    | "left"
    | "before"
    | "right"
    | "after";
  /**
   * The proportion of the filled part of the bar.
   * *  Should be a number between 0 and 1.
   */
  proportion?: number;
  /**
   * Visibility of the tooltip
   */
  visible?: boolean;
}
/**
 * A    specifically adapted for use with
   or
  .
 */

export class ProgressBarTooltip extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ProgressBarTooltipProps>
> {}

export interface ProgressBarDecoratorProps
  extends sandstone_Skinnable_SkinnableProps {}
export function ProgressBarDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & ProgressBarDecoratorProps>;

export interface ProgressBarProps
  extends Merge<ProgressBarBaseProps, ProgressBarDecoratorProps> {}
/**
 * The ready-to-use Sandstone-styled ProgressBar.
 */

export class ProgressBar extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ProgressBarProps>
> {}

export default ProgressBar;