@react-awesome-query-builder/fluent/esm/widgets/core/FluentUIConfirm.js

User-friendly query builder for React. Fluent 8 widgets

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["confirmFn"];
import React, { createContext, useContext } from "react";
import { Dialog, DialogType, DialogFooter } from "@fluentui/react/lib/Dialog";
import { PrimaryButton, DefaultButton } from "@fluentui/react/lib/Button";
var FluentUIConfirmContext = /*#__PURE__*/createContext({
  showModal: function showModal() {
    return void 0;
  },
  closeModal: function closeModal() {
    return void 0;
  }
});
export var FluentUIConfirmProvider = function FluentUIConfirmProvider(_ref) {
  var children = _ref.children;
  var _React$useState = React.useState(null),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    Modal = _React$useState2[0],
    setModal = _React$useState2[1];
  var _React$useState3 = React.useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    modalOpened = _React$useState4[0],
    setModalOpened = _React$useState4[1];
  var showModal = function showModal(modal) {
    setModalOpened(true);
    setModal(modal);
  };
  var closeModal = function closeModal() {
    setModalOpened(false);
    setTimeout(function () {
      setModal(null);
    }, 300);
  };
  return /*#__PURE__*/React.createElement(FluentUIConfirmContext.Provider, {
    value: {
      showModal: showModal,
      closeModal: closeModal
    }
  }, children, Modal && /*#__PURE__*/React.createElement(Modal, {
    modalOpened: modalOpened
  }));
};
export var useFluentUIConfirm = function useFluentUIConfirm() {
  var context = useContext(FluentUIConfirmContext);
  if (!context) {
    throw new Error("useFluentUIConfirm must be used within a FluentUIConfirmProvider");
  }
  return context;
};
export var FluentUIUseConfirm = function FluentUIUseConfirm() {
  var _useFluentUIConfirm = useFluentUIConfirm(),
    showModal = _useFluentUIConfirm.showModal,
    closeModal = _useFluentUIConfirm.closeModal;
  var confirmFn = function confirmFn(_ref2) {
    var title = _ref2.title,
      okText = _ref2.okText,
      cancelText = _ref2.cancelText,
      onOk = _ref2.onOk;
    var onClickOk = function onClickOk() {
      closeModal();
      onOk === null || onOk === void 0 || onOk();
    };
    var onClickCancel = function onClickCancel() {
      closeModal();
    };
    showModal(function () {
      return function () {
        var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
          modalOpened = _ref3.modalOpened;
        return /*#__PURE__*/React.createElement(Dialog, {
          hidden: modalOpened === undefined ? false : !modalOpened,
          onDismiss: onClickCancel,
          dialogContentProps: {
            type: DialogType.normal,
            title: title !== null && title !== void 0 ? title : "Are you sure?",
            styles: {
              title: {
                fontSize: "1.5rem"
              },
              inner: {
                paddingBottom: 0,
                marginTop: "20px"
              }
            }
          }
        }, /*#__PURE__*/React.createElement(DialogFooter, null, /*#__PURE__*/React.createElement(PrimaryButton, {
          onClick: onClickOk,
          text: okText
        }), /*#__PURE__*/React.createElement(DefaultButton, {
          onClick: onClickCancel,
          text: cancelText
        })));
      };
    });
  };
  return confirmFn;
};
export var FluentUIConfirm = function FluentUIConfirm(_ref4) {
  var confirmFn = _ref4.confirmFn,
    renderOptions = _objectWithoutProperties(_ref4, _excluded);
  confirmFn === null || confirmFn === void 0 || confirmFn(renderOptions);
};