@awsui/components-react/progress-bar/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest } from "tslib";
import React from 'react';
import clsx from 'clsx';
import Box from '../box';
import styles from './styles.css.js';
import { getBaseProps } from '../internal/base-component';
import { warnOnce } from '../internal/logging';
import { fireNonCancelableEvent } from '../internal/events';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import { Progress, ResultState, SmallText } from './internal';
import { useTelemetry } from '../internal/hooks/use-telemetry';
export default function ProgressBar(_a) {
    var _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.status, status = _c === void 0 ? 'in-progress' : _c, _d = _a.variant, variant = _d === void 0 ? 'standalone' : _d, resultButtonText = _a.resultButtonText, label = _a.label, description = _a.description, additionalInfo = _a.additionalInfo, resultText = _a.resultText, onResultButtonClick = _a.onResultButtonClick, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
    useTelemetry('ProgressBar');
    var baseProps = getBaseProps(rest);
    var generatedName = useUniqueId('awsui-progress-bar-');
    var labelId = generatedName + "-label";
    var isInFlash = variant === 'flash';
    var isInProgressState = status === 'in-progress';
    var isInKeyValue = variant === 'key-value';
    var labelColor = isInKeyValue ? 'text-label' : isInFlash ? 'inherit' : undefined;
    if (isInFlash && resultButtonText) {
        warnOnce('ProgressBar', 'The `resultButtonText` is ignored if you set `variant="flash"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.');
    }
    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, variant && styles[variant]) }),
        React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
            React.createElement(Box, { className: styles['word-wrap'], margin: isInKeyValue ? { bottom: 'xxxs' } : undefined, color: labelColor, fontWeight: isInFlash ? 'bold' : undefined, id: labelId }, label),
            description && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, description),
            isInProgressState ? (React.createElement(Progress, { value: value, labelId: labelId, isInFlash: isInFlash })) : (React.createElement(ResultState, { labelId: labelId, resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: function () {
                    fireNonCancelableEvent(onResultButtonClick);
                } })),
            additionalInfo && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, additionalInfo))));
}