1 | /*
|
2 | * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
|
3 | *
|
4 | * Licensed under the Apache License, Version 2.0 (the "License");
|
5 | * you may not use this file except in compliance with the License.
|
6 | * You may obtain a copy of the License at
|
7 | *
|
8 | * http://www.apache.org/licenses/LICENSE-2.0
|
9 | *
|
10 | * Unless required by applicable law or agreed to in writing, software
|
11 | * distributed under the License is distributed on an "AS IS" BASIS,
|
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13 | * See the License for the specific language governing permissions and
|
14 | * limitations under the License.
|
15 | */
|
16 |
|
17 | import classNames from "classnames";
|
18 | import * as React from "react";
|
19 | import { polyfill } from "react-lifecycles-compat";
|
20 |
|
21 | import { AbstractPureComponent2, Classes } from "../../common";
|
22 | import { DISPLAYNAME_PREFIX, IntentProps, Props } from "../../common/props";
|
23 | import { clamp } from "../../common/utils";
|
24 |
|
25 | // eslint-disable-next-line deprecation/deprecation
|
26 | export type ProgressBarProps = IProgressBarProps;
|
27 | /** @deprecated use ProgressBarProps */
|
28 | export interface IProgressBarProps extends Props, IntentProps {
|
29 | /**
|
30 | * Whether the background should animate.
|
31 | *
|
32 | * @default true
|
33 | */
|
34 | animate?: boolean;
|
35 |
|
36 | /**
|
37 | * Whether the background should be striped.
|
38 | *
|
39 | * @default true
|
40 | */
|
41 | stripes?: boolean;
|
42 |
|
43 | /**
|
44 | * A value between 0 and 1 (inclusive) representing how far along the operation is.
|
45 | * Values below 0 or above 1 will be interpreted as 0 or 1, respectively.
|
46 | * Omitting this prop will result in an "indeterminate" progress meter that fills the entire bar.
|
47 | */
|
48 | value?: number;
|
49 | }
|
50 |
|
51 |
|
52 | export class ProgressBar extends AbstractPureComponent2<ProgressBarProps> {
|
53 | public static displayName = `${DISPLAYNAME_PREFIX}.ProgressBar`;
|
54 |
|
55 | public render() {
|
56 | const { animate = true, className, intent, stripes = true, value } = this.props;
|
57 | const classes = classNames(
|
58 | Classes.PROGRESS_BAR,
|
59 | Classes.intentClass(intent),
|
60 | { [Classes.PROGRESS_NO_ANIMATION]: !animate, [Classes.PROGRESS_NO_STRIPES]: !stripes },
|
61 | className,
|
62 | );
|
63 | const percent = value == null ? undefined : 100 * clamp(value, 0, 1);
|
64 | // don't set width if value is null (rely on default CSS value)
|
65 | const width = percent == null ? undefined : percent + "%";
|
66 |
|
67 | return (
|
68 | <div
|
69 | aria-valuemax={100}
|
70 | aria-valuemin={0}
|
71 | aria-valuenow={percent == null ? undefined : Math.round(percent)}
|
72 | className={classes}
|
73 | role="progressbar"
|
74 | >
|
75 | <div className={Classes.PROGRESS_METER} style={{ width }} />
|
76 | </div>
|
77 | );
|
78 | }
|
79 | }
|