@progress/kendo-react-indicators
Version:
React Indicators offer an interface to represent a visual indication for their UI elements. KendoReact Indicators package
82 lines (81 loc) • 2.58 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as r from "react";
import s from "prop-types";
import { classNames as g } from "@progress/kendo-react-common";
const c = {
pulsing: 2,
"infinite-spinner": 3,
"converging-spinner": 4
}, v = {
pulsing: "k-loader-pulsing-2",
"infinite-spinner": "k-loader-spinner-3",
"converging-spinner": "k-loader-spinner-4"
}, d = r.forwardRef((n, u) => {
const { className: t, style: p } = n, l = r.useRef(null), k = r.useCallback(() => {
l.current && l.current.focus();
}, []);
r.useImperativeHandle(
u,
() => ({
element: l.current,
focus: k
})
);
const o = r.useMemo(() => n.size || i.size, [n.size]), e = r.useMemo(() => n.themeColor || i.themeColor, [n.themeColor]), a = r.useMemo(() => n.type || i.type, [n.type]), y = r.useMemo(
() => g(
"k-loader",
{
"k-loader-sm": o === "small",
"k-loader-md": o === "medium",
"k-loader-lg": o === "large",
"k-loader-primary": e === "primary",
"k-loader-secondary": e === "secondary",
"k-loader-tertiary": e === "tertiary",
"k-loader-info": e === "info",
"k-loader-success": e === "success",
"k-loader-warning": e === "warning",
"k-loader-error": e === "error",
"k-loader-dark": e === "dark",
"k-loader-light": e === "light",
"k-loader-inverse": e === "inverse"
},
t,
v[a]
),
[o, e, t, a]
), m = new Array(c[a]);
return m.fill(0, 0, c[a]), /* @__PURE__ */ r.createElement("div", { className: y, style: p }, /* @__PURE__ */ r.createElement("div", { className: "k-loader-canvas" }, m.map((C, f) => /* @__PURE__ */ r.createElement("span", { key: f, className: "k-loader-segment" }))));
});
d.propTypes = {
className: s.string,
style: s.object,
type: s.oneOf(["pulsing", "infinite-spinner", "converging-spinner"]),
size: s.oneOf(["small", "medium", "large"]),
themeColor: s.oneOf([
"primary",
"secondary",
"tertiary",
"info",
"success",
"warning",
"error",
"dark",
"light",
"inverse"
])
};
const i = {
size: "medium",
themeColor: "primary",
type: "pulsing"
};
d.displayName = "KendoLoader";
export {
d as Loader
};