@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
37 lines (36 loc) • 1.36 kB
JavaScript
import { HvLoading } from "../Loading/Loading.js";
import { useClasses } from "./LoadingContainer.styles.js";
import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/LoadingContainer/LoadingContainer.tsx
/**
* A component that wraps `children` with an `HvLoading` component and
* and an overlay background with opacity.
*
* @example
* <HvLoadingContainer label="Loading..." hidden={!isLoading}>
* <MyComponent>
* </HvLoadingContainer>
* */
var HvLoadingContainer = forwardRef(function HvLoadingContainer(props, ref) {
const { children, className, classes: classesProp, hidden, small, label, "aria-label": ariaLabelProp, opacity, ...others } = useDefaultProps("HvLoadingContainer", props);
const { classes, cx } = useClasses(classesProp);
const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
return /* @__PURE__ */ jsxs("div", {
ref,
className: cx(classes.root, className),
...others,
children: [/* @__PURE__ */ jsx(HvLoading, {
className: classes.loading,
role: "progressbar",
small,
label,
hidden,
"aria-label": ariaLabel,
style: mergeStyles(void 0, { "--opacity": opacity && `${opacity * 100}%` })
}), children]
});
});
//#endregion
export { HvLoadingContainer };