@progress/kendo-react-labels
Version:
React Labels package provides components for labelling form editors. KendoReact Labels package
86 lines (85 loc) • 2.28 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 a from "react";
import e from "prop-types";
import { classNames as g, uFloatingLabel as N } from "@progress/kendo-react-common";
import { useLocalization as B } from "@progress/kendo-react-intl";
import { labelsOptional as y, messages as D } from "./messages/index.mjs";
const I = (l) => {
const [s, i] = a.useState({
focused: !1
}), h = (v) => {
i({ focused: !0 });
}, E = (v) => {
i({ focused: !1 });
}, {
label: o,
editorId: n,
className: F,
labelClassName: L,
editorValue: r,
editorPlaceholder: C,
editorValid: S,
editorDisabled: c,
style: V,
id: d,
optional: z,
unstyled: m,
...O
} = l, P = B(), b = z ? P.toLanguageString(y, D[y]) : "", u = b && /* @__PURE__ */ a.createElement("span", { className: "k-label-optional" }, b), p = m && m.uFloatingLabel, t = !C && !r && r !== 0, T = g(
N.wrapper({
c: p,
focused: s.focused,
empty: t,
notEmpty: !t,
disabled: c,
isRtl: l.dir === "rtl"
}),
F
), f = g(
N.label({
c: p,
focused: s.focused,
empty: t,
notEmpty: !t,
invalid: S === !1,
disabled: c
}),
L
);
return /* @__PURE__ */ a.createElement(
"span",
{
...O,
id: l.id,
className: T,
onFocus: h,
onBlur: E,
style: V,
dir: l.dir
},
l.children,
o ? n ? /* @__PURE__ */ a.createElement("label", { id: d, htmlFor: n, className: f }, o, u) : /* @__PURE__ */ a.createElement("span", { id: d, className: f }, o, u) : null
);
};
I.propTypes = {
label: e.node,
editorId: e.string,
editorValue: e.oneOfType([e.string, e.bool, e.number]),
editorPlaceholder: e.string,
editorValid: e.bool,
editorDisabled: e.bool,
id: e.string,
style: e.object,
className: e.string,
labelClassName: e.string,
optional: e.bool
};
export {
I as FloatingLabel
};