@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
100 lines (99 loc) • 3.62 kB
JavaScript
"use client";
import { useMotionComponent } from "../../MotionProvider/index.mjs";
import { styles } from "./style.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/base-ui/Button/Button.tsx
const resolveSizeCls = (size) => {
if (size === "small") return styles.sizeSmall;
if (size === "large") return styles.sizeLarge;
return styles.sizeMiddle;
};
const resolveIconOnlySizeCls = (size) => {
if (size === "small") return styles.iconOnlySmall;
if (size === "large") return styles.iconOnlyLarge;
return styles.iconOnlyMiddle;
};
const resolveVariantCls = ({ danger, ghost, type }) => {
if (ghost) {
if (danger) return styles.ghostDanger;
if (type === "primary") return styles.ghostPrimary;
return styles.ghostDefault;
}
switch (type) {
case "primary": return danger ? styles.dangerSolid : styles.variantPrimary;
case "dashed": return danger ? cx(styles.variantDashed, styles.dangerOutlined) : styles.variantDashed;
case "text": return danger ? cx(styles.variantText, styles.dangerInline) : styles.variantText;
case "link": return danger ? cx(styles.variantLink, styles.dangerInline) : styles.variantLink;
default: return danger ? cx(styles.variantDefault, styles.dangerOutlined) : styles.variantDefault;
}
};
const hoverAnim = { y: -.5 };
const tapAnim = { scale: .96 };
const motionTransition = {
damping: 26,
mass: .6,
stiffness: 600,
type: "spring"
};
const Button = ({ block, children, className, classNames, danger = false, disabled, ghost = false, href, htmlType = "button", icon, iconPosition = "start", loading, onClick, ref, shape = "default", size = "middle", styles: userStyles, target, type = "default", ...rest }) => {
const Motion = useMotionComponent();
const isDisabled = disabled || loading;
const sizeCls = resolveSizeCls(size);
const variantCls = resolveVariantCls({
danger,
ghost,
type
});
const shapeCls = shape === "circle" ? styles.shapeCircle : shape === "round" ? styles.shapeRound : void 0;
const iconOnlySizeCls = !(children !== void 0 && children !== null && children !== false && children !== "") && !!(loading || icon) ? resolveIconOnlySizeCls(size) : void 0;
const composedClassName = cx(styles.base, sizeCls, variantCls, shapeCls, block && styles.block, iconPosition === "end" && styles.iconEnd, iconOnlySizeCls, className);
const inner = /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx("span", {
className: cx(styles.iconBox, classNames?.icon),
style: userStyles?.icon,
children: /* @__PURE__ */ jsx("span", { className: styles.spinner })
}) : icon ? /* @__PURE__ */ jsx("span", {
className: cx(styles.iconBox, classNames?.icon),
style: userStyles?.icon,
children: icon
}) : null, children] });
const motionGestures = isDisabled ? {} : {
transition: motionTransition,
whileHover: hoverAnim,
whileTap: tapAnim
};
if (href !== void 0) {
const handleAnchorClick = (e) => {
if (isDisabled) {
e.preventDefault();
return;
}
onClick?.(e);
};
return /* @__PURE__ */ jsx(Motion.a, {
"aria-disabled": isDisabled || void 0,
href: isDisabled ? void 0 : href,
target,
...rest,
className: composedClassName,
ref,
onClick: handleAnchorClick,
...motionGestures,
children: inner
});
}
return /* @__PURE__ */ jsx(Motion.button, {
type: htmlType,
...rest,
className: composedClassName,
disabled: isDisabled,
ref,
onClick,
...motionGestures,
children: inner
});
};
Button.displayName = "BaseButton";
//#endregion
export { Button as default };
//# sourceMappingURL=Button.mjs.map