@enact/ui/ProgressBar/ProgressBar.d.ts

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

// Type definitions for ui/ProgressBar

import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
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;
  /**
   * The contents to be displayed with progress bar.
   */
  children?: React.ReactNode;
  /**
 * 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:
 * *  `progressBar`  - The root component class
 * *  `bar`          - The background node (the empty part of the progressBar)
 * *  `fill`         - The foreground of the progress bar ( `progress` )
 * *  `load`         - The  `backgroundProgress`  node
 * *  `horizontal`   - Applied when  `orientation`  is  `'horizontal'`
 * *  `vertical`     - Applied when  `orientation`  is  `'vertical'`
 * *  `radial`       - Applied when  `orientation`  is  `'radial'`
 */
  css?: object;
  /**
   * Sets the orientation of the slider.
   *
   * Allowed values include:
   * *  `'horizontal'`  - A left and right orientation
   * *  `'vertical'`  - An up and down orientation
   * *  `'radial'`  - A circular orientation
   */
  orientation?: string;
  /**
   * The proportion of the filled portion of the progress bar.
   * *  Valid values are between  `0`  and  `1` .
   */
  progress?: number;
  /**
 * Sets the point, as a proportion between 0 and 1, from which the progress bar is filled.
 * 
 * Applies to both the progress bar's  `value`  and  `backgroundProgress` . In both cases,
setting the value of  `progressAnchor`  will cause the progress bar 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 progress bar.
 */
  progressAnchor?: number;
}
/**
 * An unstyled progress bar component that can be customized by a theme or application.
 */

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

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

export interface ProgressBarProps
  extends Omit<
    Merge<ProgressBarBaseProps, ProgressBarDecoratorProps>,
    "componentRef"
  > {}
/**
 * An unstyled progress bar component that can be customized by a theme or application.
 */

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

export default ProgressBar;