@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
146 lines (145 loc) • 4.79 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import a from "prop-types";
import { StepperContext as te } from "./context/StepperContext.mjs";
import { focusFirstFocusableChild as ae, dispatchEvent as O, classNames as se, IconWrap as R, toIconName as oe } from "@progress/kendo-react-common";
import { useLocalization as ne } from "@progress/kendo-react-intl";
import { checkIcon as le, exclamationCircleIcon as ce } from "@progress/kendo-svg-icons";
import { DEFAULT_ANIMATION_DURATION as ie, NO_ANIMATION as re } from "./contants.mjs";
import { messages as me, optionalText as pe, stepAriaLabel as de } from "./messages/index.mjs";
const V = e.forwardRef((D, $) => {
const {
// content
children: z,
className: h,
current: b,
disabled: o,
focused: y,
icon: l,
svgIcon: k,
index: s,
isValid: t,
label: n,
optional: m,
style: S,
tabIndex: be = ue.tabIndex,
text: p,
...H
} = D, {
animationDuration: f,
isVertical: v,
item: _,
linear: w,
mode: A,
numOfSteps: c,
value: i,
onChange: I,
onFocus: N,
successIcon: B,
errorIcon: G,
successSVGIcon: P,
errorSVGIcon: U
} = e.useContext(te), d = e.useRef(null), F = e.useCallback(() => {
d.current && ae(d.current);
}, []), x = e.useCallback(
() => ({
element: d.current,
focus: F
}),
[F]
);
e.useImperativeHandle($, x);
const g = !w || s === i - 1 || s === i || s === i + 1, E = A === "labels" || !!l && !!n, W = ne(), L = (r) => W.toLanguageString(r, me[r]), j = L(pe), K = typeof f == "number" ? f : f !== !1 ? ie : re, q = e.useCallback(
(r) => {
I && !o && O(I, r, x(), { value: s });
},
[I, i, o]
), J = e.useCallback(
(r) => {
N && !o && O(N, r, x(), void 0);
},
[N, o]
), Q = e.useMemo(
() => se(
"k-step",
{
"k-step-first": s === 0,
"k-step-last": c && s === c - 1,
"k-step-done": s < i,
"k-step-current": b,
"k-step-optional": m,
"k-step-error": t !== void 0 && !t,
"k-step-success": t,
"k-disabled": o,
"k-focus": y
},
h
),
[s, c, i, b, m, o, y, t, h]
), X = e.useMemo(
() => ({
maxWidth: v ? void 0 : `calc(100% / ${c})`,
maxHeight: v ? `calc(100% / ${c})` : void 0,
pointerEvents: g ? void 0 : "none",
...S
}),
[v, c, S, g]
), M = t ? B : G, C = M ? /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-icon " + M, "aria-hidden": "true" }) : /* @__PURE__ */ e.createElement(
R,
{
className: "k-step-indicator-icon",
name: t ? "check-circle" : "exclamation-circle",
icon: t ? P || le : U || ce
}
), Y = /* @__PURE__ */ e.createElement(e.Fragment, null, A !== "labels" ? /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator", style: { transitionDuration: K + "ms" } }, l || k ? !E && t !== void 0 ? C : /* @__PURE__ */ e.createElement(
R,
{
className: "k-step-indicator-icon",
name: l && oe(l),
icon: k
}
) : t !== void 0 ? C : /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-text" }, p || s + 1)) : null), Z = (n || E || m) && /* @__PURE__ */ e.createElement("span", { className: "k-step-label" }, n && /* @__PURE__ */ e.createElement("span", { className: "k-step-text" }, n), E && t !== void 0 && C, m && /* @__PURE__ */ e.createElement("span", { className: "k-step-label-optional" }, j)), ee = /* @__PURE__ */ e.createElement(e.Fragment, null, Y, Z), T = L(de);
let u = n;
return u || (p ? u = `${T} ${p}` : (l || k) && (u = T)), /* @__PURE__ */ e.createElement("li", { ref: d, className: Q, style: X, ...H }, /* @__PURE__ */ e.createElement(
"a",
{
className: "k-step-link",
title: n || void 0,
onClick: q,
onFocus: J,
"aria-current": b ? "step" : void 0,
"aria-disabled": o || !g || void 0,
"aria-invalid": t !== void 0 && !t || void 0,
"aria-label": u
},
_ ? z : ee
));
});
V.propTypes = {
children: a.any,
className: a.string,
// content: PropTypes.any,
current: a.bool,
disabled: a.bool,
icon: a.string,
index: a.number,
isValid: a.bool,
label: a.string,
optional: a.bool,
style: a.object,
tabIndex: a.number,
text: a.string
};
const ue = {
tabIndex: 0
};
V.displayName = "KendoStep";
export {
V as Step
};