@awsui/components-react/progress-bar/internal.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 } from "tslib";
import React from 'react';
import clsx from 'clsx';
import Box from '../box';
import Button from '../button';
import StatusIndicator from '../status-indicator';
import styles from './styles.css.js';
var MAX_VALUE = 100;
var clamp = function (value, lowerLimit, upperLimit) {
    return Math.max(Math.min(value, upperLimit), lowerLimit);
};
export var Progress = function (_a) {
    var value = _a.value, isInFlash = _a.isInFlash, labelId = _a.labelId;
    var roundedValue = Math.round(value);
    var progressValue = clamp(roundedValue, 0, MAX_VALUE);
    return (React.createElement("div", { className: styles['progress-container'] },
        React.createElement("progress", { className: clsx(styles.progress, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: value, "aria-valuetext": progressValue + "%", "aria-labelledby": labelId }),
        React.createElement("span", { "aria-hidden": "true", className: styles['percentage-container'] },
            React.createElement(Box, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined }, progressValue + "%"))));
};
export var SmallText = function (_a) {
    var color = _a.color, children = _a.children;
    return (React.createElement(Box, { className: styles['word-wrap'], variant: "small", display: "block", color: color }, children));
};
var ResultButton = function (_a) {
    var onClick = _a.onClick, children = _a.children;
    return (React.createElement("div", { className: styles['result-button'] },
        React.createElement(Button, { formAction: "none", onClick: onClick }, children)));
};
export var ResultState = function (_a) {
    var isInFlash = _a.isInFlash, labelId = _a.labelId, resultText = _a.resultText, resultButtonText = _a.resultButtonText, status = _a.status, onClick = _a.onClick;
    var hasResultButton = !!resultButtonText;
    var ariaProps = {
        'aria-labelledby': labelId,
        'aria-live': 'polite',
        'aria-atomic': true
    };
    if (isInFlash) {
        return (React.createElement("div", __assign({}, ariaProps, { className: styles["result-container-" + status] }),
            React.createElement("span", { className: styles['result-text'] }, resultText)));
    }
    return (React.createElement("div", { className: styles["result-container-" + status] },
        React.createElement("span", __assign({}, ariaProps, { className: clsx(hasResultButton && styles['with-result-button']) }),
            React.createElement(StatusIndicator, { type: status === 'success' ? 'success' : 'error' },
                React.createElement("span", { className: styles['result-text'] }, resultText))),
        hasResultButton && React.createElement(ResultButton, { onClick: onClick }, resultButtonText)));
};