@toolpad/core/useDialogs/useDialogs.js

Dashboard framework powered by Material UI.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AlertDialog = AlertDialog;
exports.ConfirmDialog = ConfirmDialog;
exports.PromptDialog = PromptDialog;
exports.useDialogs = useDialogs;
var _Button = _interopRequireDefault(require("@mui/material/Button"));
var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
var _react = require("@toolpad/utils/react");
var _invariant = _interopRequireDefault(require("invariant"));
var React = _interopRequireWildcard(require("react"));
var _DialogsContext = require("./DialogsContext");
var _context = require("../shared/context");
var _LocalizationProvider = require("../AppProvider/LocalizationProvider");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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
  };
}
function AlertDialog({
  open,
  payload,
  onClose
}) {
  const appWindowContext = React.useContext(_context.WindowContext);
  const globalLocaleText = (0, _LocalizationProvider.useLocaleText)();
  const localeText = {
    ...defaultLocaleText,
    ...globalLocaleText
  };
  const okButtonProps = useDialogLoadingButton(() => onClose());
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
    maxWidth: "xs",
    fullWidth: true,
    open: open,
    onClose: () => onClose(),
    container: appWindowContext?.document.body,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
      children: payload.title ?? localeText.alert
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
      children: payload.msg
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogActions.default, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        disabled: !open,
        ...okButtonProps,
        children: payload.okText ?? localeText.ok
      })
    })]
  });
}
function ConfirmDialog({
  open,
  payload,
  onClose
}) {
  const appWindowContext = React.useContext(_context.WindowContext);
  const globalLocaleText = (0, _LocalizationProvider.useLocaleText)();
  const localeText = {
    ...defaultLocaleText,
    ...globalLocaleText
  };
  const cancelButtonProps = useDialogLoadingButton(() => onClose(false));
  const okButtonProps = useDialogLoadingButton(() => onClose(true));
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
    maxWidth: "xs",
    fullWidth: true,
    open: open,
    onClose: () => onClose(false),
    container: appWindowContext?.document.body,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
      children: payload.title ?? localeText.confirm
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
      children: payload.msg
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        autoFocus: true,
        disabled: !open,
        ...cancelButtonProps,
        children: payload.cancelText ?? localeText.cancel
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        color: payload.severity,
        disabled: !open,
        ...okButtonProps,
        children: payload.okText ?? localeText.ok
      })]
    })]
  });
}
function PromptDialog({
  open,
  payload,
  onClose
}) {
  const appWindowContext = React.useContext(_context.WindowContext);
  const globalLocaleText = (0, _LocalizationProvider.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__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
    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) ?? '';
          (0, _invariant.default)(typeof value === 'string', 'Value must come from a text input');
          await onClose(value);
        } finally {
          setLoading(false);
        }
      }
    },
    container: appWindowContext?.document.body,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
      children: payload.title ?? localeText.confirm
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogContent.default, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogContentText.default, {
        children: [payload.msg, " "]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
        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__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        disabled: !open,
        ...cancelButtonProps,
        children: payload.cancelText ?? localeText.cancel
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        disabled: !open,
        loading: loading,
        type: "submit",
        children: payload.okText ?? localeText.ok
      })]
    })]
  });
}
function useDialogs() {
  const {
    open,
    close
  } = (0, _react.useNonNullableContext)(_DialogsContext.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]);
}