@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
60 lines (59 loc) • 1.91 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { createStyles } from "@mantine/core";
import { Button } from "../button/Button.js";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { Stack } from "../stack/Stack.js";
import { useDialogState } from "../../state/components/dialog/useDialogState.js";
import { useComponentId } from "../../state/components/useId.js";
import { DialogComponent } from "./Dialog.js";
const Confirmation = ({
defaultOpened,
id: propId,
...props
}) => {
const id = useComponentId(propId);
const {
opened,
close
} = useDialogState(id, {
initialState: {
opened: props.opened ?? defaultOpened
}
});
return /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: Confirmation.displayName, children: /* @__PURE__ */ jsx(ConfirmationComponent, { opened, onClose: close, ...props }) });
};
Confirmation.displayName = "Confirmation";
const useStyles = createStyles((theme) => {
return {
confirmationButtons: {
marginTop: theme.spacing.lg
}
};
});
const ConfirmationComponent = ({
children,
confirmText = "Confirm",
cancelText = "Cancel",
onConfirm,
onClose,
...props
}) => {
const {
classes
} = useStyles();
if (!confirmText) {
throw new Error("confirmText cannot be empty");
}
return /* @__PURE__ */ jsxs(DialogComponent, { ...props, onClose, children: [
children,
/* @__PURE__ */ jsx("div", { className: classes.confirmationButtons, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", justify: "end", spacing: 12, children: [
cancelText && /* @__PURE__ */ jsx(Button, { preset: "tertiary", onClick: onClose, children: cancelText }),
/* @__PURE__ */ jsx(Button, { onClick: onConfirm, children: confirmText })
] }) })
] });
};
export {
Confirmation,
ConfirmationComponent
};
//# sourceMappingURL=Confirmation.js.map