azure-devops-ui
Version:
React components for building web UI in Azure DevOps
22 lines (21 loc) • 1.28 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Spinner.css";
import * as React from "react";
import { announce } from '../../Core/Util/Accessibility';
import { css, getSafeId } from '../../Util';
import { SpinnerOrientation, SpinnerSize } from "./Spinner.Props";
export const Spinner = props => {
const { ariaLabel, ariaLive, className, id, label, orientation = SpinnerOrientation.column, size = SpinnerSize.medium } = props;
// Only do this on mount; the aria-live region will handle any updates to props
React.useEffect(() => {
if (ariaLive === "assertive" || ariaLive === "polite") {
announce(ariaLabel || label, ariaLive === "assertive");
}
}, []);
return (React.createElement("div", { "aria-label": ariaLabel, "aria-live": ariaLive, className: css(className, "bolt-spinner", orientation === SpinnerOrientation.column ? "flex-column text-center rhythm-vertical-8" : "flex-row flex-center rhythm-horizontal-8"), id: getSafeId(id) },
React.createElement("div", { className: css("bolt-spinner-circle", size) }),
label && React.createElement("div", { className: "bolt-spinner-label" }, label)));
};
// TODO: Remove if we fix Jest issue
Spinner.displayName = "Spinner";