UNPKG

@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
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