@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
58 lines • 4.34 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useMemo, useState } from 'react';
import clsx from 'clsx';
import { warnOnce } from '@awsui/component-toolkit/internal';
import { getBaseProps } from '../internal/base-component';
import { fireNonCancelableEvent } from '../internal/events';
import useBaseComponent from '../internal/hooks/use-base-component';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import { applyDisplayName } from '../internal/utils/apply-display-name';
import { joinStrings } from '../internal/utils/strings';
import { throttle } from '../internal/utils/throttle';
import InternalLiveRegion from '../live-region/internal';
import { Progress, ResultState, SmallText } from './internal';
import styles from './styles.css.js';
const ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements
export default function ProgressBar(_a) {
var { value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick } = _a, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
const { __internalRootRef } = useBaseComponent('ProgressBar', {
props: { variant },
});
const baseProps = getBaseProps(rest);
const generatedName = useUniqueId('awsui-progress-bar-');
const labelId = `${generatedName}-label`;
const isInFlash = variant === 'flash';
const isInProgressState = status === 'in-progress';
const descriptionId = useUniqueId('progressbar-description-');
const additionalInfoId = useUniqueId('progressbar-additional-info-');
const [announcedValue, setAnnouncedValue] = useState('');
const throttledAssertion = useMemo(() => {
return throttle((value) => {
setAnnouncedValue(`${value}%`);
}, ASSERTION_FREQUENCY);
}, []);
useEffect(() => {
throttledAssertion(value);
}, [throttledAssertion, value]);
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", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, variant && styles[variant]), ref: __internalRootRef }),
React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
React.createElement("div", { className: clsx(styles['word-wrap'], styles[`label-${variant}`]), id: labelId }, label),
description && (React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined, id: descriptionId }, description)),
React.createElement("div", null, isInProgressState ? (React.createElement(React.Fragment, null,
React.createElement(Progress, { value: value, ariaLabel: ariaLabel, ariaLabelledby: joinStrings(labelId, ariaLabelledby), ariaDescribedby: joinStrings(description ? descriptionId : undefined, additionalInfo ? additionalInfoId : undefined, ariaDescribedby), isInFlash: isInFlash }),
React.createElement(InternalLiveRegion, { hidden: true, tagName: "span", delay: 0 },
label,
label ? ': ' : null,
announcedValue))) : (React.createElement(InternalLiveRegion, { hidden: false, tagName: "span", delay: 0 },
React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: () => {
fireNonCancelableEvent(onResultButtonClick);
} }))))),
additionalInfo && (React.createElement(SmallText, { className: styles['additional-info'], color: isInFlash ? 'inherit' : undefined, id: additionalInfoId }, additionalInfo))));
}
applyDisplayName(ProgressBar, 'ProgressBar');
//# sourceMappingURL=index.js.map