@toolpad/core/esm/useDialogs/useDialogs.js

Dashboard framework powered by Material UI.

'use client';

import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import TextField from '@mui/material/TextField';
import DialogContentText from '@mui/material/DialogContentText';
import { useNonNullableContext } from '@toolpad/utils/react';
import invariant from 'invariant';
import * as React from 'react';
import { DialogsContext } from "./DialogsContext.js";
import { WindowContext } from "../shared/context.js";
import { useLocaleText } from "../AppProvider/LocalizationProvider.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultLocaleText = {
  alert: 'Alert',
  confirm: 'Confirm',
  cancel: 'Cancel',
  ok: 'Ok'
};

/**
 * The props that are passed to a dialog component.
 */

function useDialogLoadingButton(onClose) {
  const [loading, setLoading] = React.useState(false);
  const handleClick = async () => {
    try {
      setLoading(true);
      await onClose();
    } finally {
      setLoading(false);
    }
  };
  return {
    onClick: handleClick,
    loading
  };
}
export function AlertDialog({
  open,
  payload,
  onClose
}) {
  const appWindowContext = React.useContext(WindowContext);
  const globalLocaleText = useLocaleText();
  const localeText = {
    ...defaultLocaleText,
    ...globalLocaleText
  };
  const okButtonProps = useDialogLoadingButton(() => onClose());
  return /*#__PURE__*/_jsxs(Dialog, {
    maxWidth: "xs",
    fullWidth: true,
    open: open,
    onClose: () => onClose(),
    container: appWindowContext?.document.body,
    children: [/*#__PURE__*/_jsx(DialogTitle, {
      children: payload.title ?? localeText.alert
    }), /*#__PURE__*/_jsx(DialogContent, {
      children: payload.msg
    }), /*#__PURE__*/_jsx(DialogActions, {
      children: /*#__PURE__*/_jsx(Button, {
        disabled: !open,
        ...okButtonProps,
        children: payload.okText ?? localeText.ok
      })
    })]
  });
}
export function ConfirmDialog({
  open,
  payload,
  onClose
}) {
  const appWindowContext = React.useContext(WindowContext);
  const globalLocaleText = useLocaleText();
  const localeText = {
    ...defaultLocaleText,
    ...globalLocaleText
  };
  const cancelButtonProps = useDialogLoadingButton(() => onClose(false));
  const okButtonProps = useDialogLoadingButton(() => onClose(true));
  return /*#__PURE__*/_jsxs(Dialog, {
    maxWidth: "xs",
    fullWidth: true,
    open: open,
    onClose: () => onClose(false),
    container: appWindowContext?.document.body,
    children: [/*#__PURE__*/_jsx(DialogTitle, {
      children: payload.title ?? localeText.confirm
    }), /*#__PURE__*/_jsx(DialogContent, {
      children: payload.msg
    }), /*#__PURE__*/_jsxs(DialogActions, {
      children: [/*#__PURE__*/_jsx(Button, {
        autoFocus: true,
        disabled: !open,
        ...cancelButtonProps,
        children: payload.cancelText ?? localeText.cancel
      }), /*#__PURE__*/_jsx(Button, {
        color: payload.severity,
        disabled: !open,
        ...okButtonProps,
        children: payload.okText ?? localeText.ok
      })]
    })]
  });
}
export function PromptDialog({
  open,
  payload,
  onClose
}) {
  const appWindowContext = React.useContext(WindowContext);
  const globalLocaleText = useLocaleText();
  const localeText = {
    ...defaultLocaleText,
    ...globalLocaleText
  };
  const [input, setInput] = React.useState('');
  const cancelButtonProps = useDialogLoadingButton(() => onClose(null));
  const [loading, setLoading] = React.useState(false);
  const name = 'input';
  return /*#__PURE__*/_jsxs(Dialog, {
    maxWidth: "xs",
    fullWidth: true,
    open: open,
    onClose: () => onClose(null),
    PaperProps: {
      component: 'form',
      onSubmit: async event => {
        event.preventDefault();
        try {
          setLoading(true);
          const formData = new FormData(event.currentTarget);
          const value = formData.get(name) ?? '';
          invariant(typeof value === 'string', 'Value must come from a text input');
          await onClose(value);
        } finally {
          setLoading(false);
        }
      }
    },
    container: appWindowContext?.document.body,
    children: [/*#__PURE__*/_jsx(DialogTitle, {
      children: payload.title ?? localeText.confirm
    }), /*#__PURE__*/_jsxs(DialogContent, {
      children: [/*#__PURE__*/_jsxs(DialogContentText, {
        children: [payload.msg, " "]
      }), /*#__PURE__*/_jsx(TextField, {
        autoFocus: true,
        required: true,
        margin: "dense",
        id: "name",
        name: name,
        type: "text",
        fullWidth: true,
        variant: "standard",
        value: input,
        onChange: event => setInput(event.target.value)
      })]
    }), /*#__PURE__*/_jsxs(DialogActions, {
      children: [/*#__PURE__*/_jsx(Button, {
        disabled: !open,
        ...cancelButtonProps,
        children: payload.cancelText ?? localeText.cancel
      }), /*#__PURE__*/_jsx(Button, {
        disabled: !open,
        loading: loading,
        type: "submit",
        children: payload.okText ?? localeText.ok
      })]
    })]
  });
}
export function useDialogs() {
  const {
    open,
    close
  } = useNonNullableContext(DialogsContext);
  const alert = React.useCallback((msg, {
    onClose,
    ...options
  } = {}) => open(AlertDialog, {
    ...options,
    msg
  }, {
    onClose
  }), [open]);
  const confirm = React.useCallback((msg, {
    onClose,
    ...options
  } = {}) => open(ConfirmDialog, {
    ...options,
    msg
  }, {
    onClose
  }), [open]);
  const prompt = React.useCallback((msg, {
    onClose,
    ...options
  } = {}) => open(PromptDialog, {
    ...options,
    msg
  }, {
    onClose
  }), [open]);
  return React.useMemo(() => ({
    alert,
    confirm,
    prompt,
    open,
    close
  }), [alert, close, confirm, open, prompt]);
}