@rtdui/dialogs/esm/Dialog.mjs

React dialogs base on Rtdui components

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef, isValidElement, cloneElement } from 'react';
import clsx from 'clsx';
import { CloseButton, TextInput, Button } from '@rtdui/core';
import { useInputState } from '@rtdui/hooks';

const Dialog = forwardRef((props, ref) => {
  const {
    dialogId,
    className,
    color = "info",
    withCloseButton = true,
    title,
    children,
    actions,
    onClose,
    fullScreen,
    mode = "dialog",
    confirmLabel = "OK",
    cancelLabel = "Cancel",
    closeLabel = "Close",
    defaultPrompt = "",
    slots,
    ...others
  } = props;
  const [promptValue, setPromptValue] = useInputState(defaultPrompt);
  return /* @__PURE__ */ jsx("div", { className: "modal modal-open", children: /* @__PURE__ */ jsxs(
    "div",
    {
      ref,
      className: clsx(
        "modal-box p-0",
        {
          "w-screen max-w-full h-screen max-h-screen rounded-none": fullScreen
        },
        className
      ),
      ...others,
      children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: clsx(
              "dialog-title bg-base-200 px-6 py-2 pr-4 flex items-center justify-between",
              slots?.dialogTitle
            ),
            children: [
              /* @__PURE__ */ jsx("h3", { className: clsx("font-bold", slots?.title), children: title }),
              withCloseButton && /* @__PURE__ */ jsx(CloseButton, { onClick: (e) => onClose?.() })
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: clsx(
              "dialog-content p-6 overflow-auto",
              slots?.dialogContent
            ),
            children: mode === "prompt" ? /* @__PURE__ */ jsx(
              TextInput,
              {
                label: children,
                value: promptValue,
                onChange: setPromptValue
              }
            ) : isValidElement(children) ? cloneElement(children, {
              onClose,
              dialogId
            }) : children
          }
        ),
        mode !== "dialog" && /* @__PURE__ */ jsxs("div", { className: clsx("modal-action px-6 pb-6", slots?.dialogAction), children: [
          mode !== "alert" && /* @__PURE__ */ jsx(
            Button,
            {
              className: clsx("btn-primary", slots?.okBtn),
              onClick: (e) => onClose?.(mode === "confirm" ? "ok" : promptValue),
              children: confirmLabel
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              className: clsx("", slots?.cancelBtn),
              onClick: (e) => onClose?.(),
              children: mode === "alert" ? closeLabel : cancelLabel
            }
          )
        ] })
      ]
    }
  ) });
});
Dialog.displayName = "@rtdui/Dialog";

export { Dialog };
//# sourceMappingURL=Dialog.mjs.map