@blocklet/payment-react
Version:
Reusable react components for payment kit v2
78 lines (77 loc) • 2.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = LoadingButton;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
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__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
size: 16,
...loadingProps,
sx: {
color: "inherit",
...(loadingProps?.sx || {})
}
});
const indicator = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
sx: getPositionStyles(loadingPosition),
children: loadingIndicator || defaultIndicator
});
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
sx: {
visibility: loading && loadingOnly ? "hidden" : "visible"
},
children
}), loading && loadingPosition === "center" && indicator, loading && loadingPosition === "end" && indicator]
});
}
LoadingButton.displayName = "LoadingButton";