@progress/kendo-react-buttons
Version:
All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package
132 lines (131 loc) • 3.59 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 e from "react";
import t from "prop-types";
import { useUnstyled as q, classNames as c, uButton as i, svgIconPropType as D, IconWrap as F } from "@progress/kendo-react-common";
function G({ imageUrl: a, name: d, iconClass: o, svgIcon: n, imageAlt: u, buttonClasses: s }) {
return a ? /* @__PURE__ */ e.createElement(
"img",
{
role: "presentation",
className: c(i.icon({ c: s })),
alt: u,
src: a
}
) : d || n ? /* @__PURE__ */ e.createElement(F, { className: c(i.icon({ c: s })), name: d, icon: n }) : o ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: c(i.icon({ c: s }), o) }) : null;
}
const M = e.forwardRef((a, d) => {
const {
children: o,
togglable: n,
dir: u,
disabled: s,
selected: r,
icon: v,
iconClass: h,
svgIcon: y,
imageUrl: b,
imageAlt: z,
className: A,
startIcon: C,
endIcon: E,
onClick: N,
size: O = p.size,
rounded: T = p.rounded,
fillMode: w = p.fillMode,
themeColor: x = p.themeColor,
...P
} = a, S = () => {
n && r === void 0 && (m.current = !l, R(!l));
}, U = (g) => {
S(), N && N.call(void 0, g);
}, m = e.useRef(), I = e.useRef(null), [l, R] = e.useState(n === !0 && r === !0), H = y !== void 0 || v !== void 0 || h !== void 0 || b !== void 0, K = o !== void 0, W = q(), k = a.unstyled || W, f = k && k.uButton;
e.useImperativeHandle(d, () => ({
element: I.current,
selected: m.current !== void 0 ? m.current : l
})), e.useMemo(() => {
n && r !== void 0 && r !== l && R(r);
}, [n, r]), e.useEffect(() => {
m.current = void 0;
}, [l]);
const j = G({
name: v,
svgIcon: y,
iconClass: h,
imageUrl: b,
imageAlt: z,
buttonClasses: f
}), B = (g) => e.cloneElement(g, { className: c(i.icon({ c: f })) });
return /* @__PURE__ */ e.createElement(
"button",
{
ref: I,
"aria-pressed": n ? l : void 0,
...P,
dir: u,
disabled: s,
onClick: U,
className: c(
i.wrapper({
c: f,
isRtl: u === "rtl",
selected: l,
disabled: s,
size: O,
fillMode: w,
rounded: T,
themeColor: x,
iconButton: !K && H
}),
A
)
},
C && B(C),
j,
o && /* @__PURE__ */ e.createElement("span", { className: c(i.text({ c: f })) }, o),
E && B(E)
);
}), p = {
togglable: !1,
size: "medium",
rounded: "medium",
fillMode: "solid",
themeColor: "base"
};
M.displayName = "KendoReactButton";
M.propTypes = {
children: t.node,
selected: t.bool,
togglable: t.bool,
icon: t.string,
svgIcon: D,
iconClass: t.string,
imageUrl: t.string,
imageAlt: t.string,
size: t.oneOf([null, "small", "medium", "large"]),
rounded: t.oneOf([null, "small", "medium", "large", "full"]),
fillMode: t.oneOf([null, "flat", "link", "outline", "solid", "clear"]),
// eslint-disable-next-line max-len
themeColor: t.oneOf([
null,
"base",
"primary",
"secondary",
"tertiary",
"info",
"success",
"warning",
"error",
"dark",
"light",
"inverse"
])
};
export {
M as Button
};