@cerberus-design/react
Version:
The Cerberus Design React component library.
215 lines (213 loc) • 6.48 kB
JavaScript
import {
Text
} from "./chunk-VPD3PPBW.js";
import {
Dialog
} from "./chunk-OZTYYWIX.js";
import {
DialogDescription,
DialogHeading,
DialogProvider
} from "./chunk-IRJITAGE.js";
import {
Button
} from "./chunk-JIEN2PM7.js";
import {
Avatar
} from "./chunk-AOLWIMWV.js";
import {
Show
} from "./chunk-NUXMADXV.js";
import {
FieldLabel,
FieldRoot,
Input
} from "./chunk-5L5PT37R.js";
import {
useCerberusContext
} from "./chunk-GITT5645.js";
// src/context/prompt-modal.tsx
import {
createContext,
useCallback,
useContext,
useMemo,
useRef,
useState
} from "react";
import { DialogCloseTrigger } from "@ark-ui/react/dialog";
import { HStack, VStack } from "styled-system/jsx";
import { css } from "styled-system/css";
import { hstack } from "styled-system/patterns";
import { jsx, jsxs } from "react/jsx-runtime";
var PromptModalContext = createContext(null);
function PromptModal(props) {
const resolveRef = useRef(null);
const [open, setOpen] = useState(false);
const [content, setContent] = useState(null);
const [inputValue, setInputValue] = useState("");
const { icons } = useCerberusContext();
const { promptModal: PromptIcon } = icons;
const isValid = useMemo(
() => inputValue === content?.key,
[inputValue, content]
);
const palette = useMemo(
() => content?.kind === "destructive" ? "danger" : "action",
[content]
);
const handleChange = useCallback((e) => {
setInputValue(e.currentTarget.value);
}, []);
const handleChoice = useCallback(
(e) => {
const target = e.currentTarget;
if (target.value === "true") {
resolveRef.current?.(inputValue);
}
setOpen(false);
},
[inputValue, setOpen]
);
const handleShow = useCallback(
(options) => {
return new Promise((resolve) => {
setContent({ ...options, kind: options.kind || "non-destructive" });
setOpen(true);
resolveRef.current = resolve;
});
},
[setOpen]
);
const value = useMemo(
() => ({
show: handleShow
}),
[handleShow]
);
return /* @__PURE__ */ jsxs(PromptModalContext.Provider, { value, children: [
props.children,
/* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsx(
Dialog,
{
size: "sm",
style: {
"--dialog-content-min-h": "auto"
},
children: /* @__PURE__ */ jsxs(
VStack,
{
alignItems: "flex-start",
h: "full",
justify: "space-between",
w: "full",
children: [
/* @__PURE__ */ jsx(
HStack,
{
alignSelf: "center",
justify: "center",
paddingBlockEnd: "md",
w: "full",
children: /* @__PURE__ */ jsx(
Show,
{
when: palette === "danger",
fallback: /* @__PURE__ */ jsx(
Avatar,
{
gradient: "charon-light",
fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
}
),
children: /* @__PURE__ */ jsx(
Avatar,
{
gradient: "hades-dark",
fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
}
)
}
)
}
),
/* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
/* @__PURE__ */ jsx(DialogDescription, { children: content?.description }),
/* @__PURE__ */ jsx(
VStack,
{
alignItems: "flex-start",
marginBlockStart: "md",
marginBlockEnd: "lg",
w: "full",
children: /* @__PURE__ */ jsxs(FieldRoot, { invalid: !isValid, children: [
/* @__PURE__ */ jsxs(
FieldLabel,
{
className: hstack({
gap: "xs",
justify: "flex-start",
marginBlockEnd: "xs",
textStyle: "label-md",
w: "initial"
}),
children: [
"Type",
/* @__PURE__ */ jsx(Text, { as: "strong", textTransform: "uppercase", children: content?.key }),
"to confirm"
]
}
),
/* @__PURE__ */ jsx(Input, { name: "confirm", onChange: handleChange, type: "text" })
] })
}
),
/* @__PURE__ */ jsxs(HStack, { gap: "md", justify: "stretch", w: "full", children: [
/* @__PURE__ */ jsx(
Button,
{
autoFocus: true,
className: css({
w: "1/2"
}),
disabled: !isValid,
name: "confirm",
onClick: handleChoice,
palette,
value: "true",
children: content?.actionText
}
),
/* @__PURE__ */ jsx(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
Button,
{
className: css({
w: "1/2"
}),
name: "cancel",
onClick: handleChoice,
usage: "outlined",
value: "false",
children: content?.cancelText
}
) })
] })
]
}
)
}
) })
] });
}
function usePromptModal() {
const context = useContext(PromptModalContext);
if (context === null) {
throw new Error("usePromptModal must be used within a PromptModal Provider");
}
return context;
}
export {
PromptModal,
usePromptModal
};
//# sourceMappingURL=chunk-UZZ26IWW.js.map