import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes } from "../../common" ; import { DISPLAYNAME_PREFIX , IntentProps , Props } from "../../common/props" ; import { clamp } from "../../common/utils" ; export type ProgressBarProps = IProgressBarProps ; deprecated export interface IProgressBarProps extends Props , IntentProps { default animate ? : boolean ; default stripes ? : boolean ; /**
     * A value between 0 and 1 (inclusive) representing how far along the operation is.
     * Values below 0 or above 1 will be interpreted as 0 or 1, respectively.
     * Omitting this prop will result in an "indeterminate" progress meter that fills the entire bar.
     */ value ? : number ; } @ polyfill export class ProgressBar extends AbstractPureComponent2 < ProgressBarProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.ProgressBar` ; public render ( ) { const { animate = true , className , intent , stripes = true , value } = this . props ; const classes = classNames ( Classes . PROGRESS_BAR , Classes . intentClass ( intent ) , { [ Classes . PROGRESS_NO_ANIMATION ] : ! animate , [ Classes . PROGRESS_NO_STRIPES ] : ! stripes } , className ) ; const percent = value == null ? undefined : 100 * clamp ( value , 0 , 1 ) ; const width = percent == null ? undefined : percent + "%" ; return ( < div aria - valuemax = { 100 } aria - valuemin = { 0 } aria - valuenow = { percent == null ? undefined : Math . round ( percent ) } className = { classes } role = "progressbar" > < div className = { Classes . PROGRESS_METER } style = { { width } } /> < /div>); } }