@blocklet/payment-react
Version:
Reusable react components for payment kit v2
66 lines (65 loc) • 1.83 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import {
Button,
CircularProgress,
Typography
} from "@mui/material";
export default function LoadingButton({
ref = void 0,
children,
loading = false,
loadingPosition = "start",
loadingIndicator = void 0,
loadingProps = {},
loadingOnly = false,
onClick,
sx,
...props
}) {
const handleClick = (e) => {
if (loading) {
return;
}
onClick?.(e);
};
const getPositionStyles = (position) => {
return {
color: "inherit",
...position === "start" && { mr: 1 },
...position === "end" && { ml: 1 },
...position === "center" && {
position: "absolute",
left: "50%",
transform: "translateY(-50%) translateX(-50%)",
top: "50%"
},
display: "inline-flex",
alignItems: "center"
};
};
const defaultIndicator = /* @__PURE__ */ jsx(CircularProgress, { size: 16, ...loadingProps, sx: { color: "inherit", ...loadingProps?.sx || {} } });
const indicator = /* @__PURE__ */ jsx(Typography, { sx: getPositionStyles(loadingPosition), children: loadingIndicator || defaultIndicator });
return /* @__PURE__ */ jsxs(
Button,
{
ref,
disabled: props.disabled || loading,
onClick: handleClick,
sx: {
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
...sx
},
...props,
children: [
loading && loadingPosition === "start" && indicator,
/* @__PURE__ */ jsx(Typography, { sx: { visibility: loading && loadingOnly ? "hidden" : "visible" }, children }),
loading && loadingPosition === "center" && indicator,
loading && loadingPosition === "end" && indicator
]
}
);
}
LoadingButton.displayName = "LoadingButton";