@braineet/ui/dist/cjs/components/modal/context.js

Braineet design system

"use strict";

exports.__esModule = true;
exports.useModalContext = exports.useModal = exports.ModalProvider = void 0;
var _react = _interopRequireDefault(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["modalRef", "modalInnerRef", "autoFocus", "cancelButtonProps", "cancelText", "closeOnOverlayClick", "closeOnEscape", "componentsProps", "defaultIsOpen", "icon", "isOpen", "noCancel", "noClose", "okButtonProps", "okLoading", "okText", "onCancel", "onClose", "onOk", "onOpen", "onToggle", "scrollBehavior", "standalone", "title", "truncateTitle", "variant", "width", "blockScrollOnMount", "children", "closeSrText"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var ModalContext = /*#__PURE__*/_react.default.createContext();
var useModal = exports.useModal = function useModal(initialMode) {
  if (initialMode === void 0) {
    initialMode = false;
  }
  var _React$useState = _react.default.useState(initialMode),
    modalOpen = _React$useState[0],
    setModalOpen = _React$useState[1];
  var onOpen = function onOpen() {
    return setModalOpen(true);
  };
  var onClose = function onClose() {
    return setModalOpen(false);
  };
  var onToggle = function onToggle() {
    return setModalOpen(!modalOpen);
  };
  return {
    isOpen: modalOpen,
    onOpen: onOpen,
    onClose: onClose,
    onToggle: onToggle
  };
};
var ModalProvider = exports.ModalProvider = function ModalProvider(_ref) {
  var modalRef = _ref.modalRef,
    modalInnerRef = _ref.modalInnerRef,
    autoFocus = _ref.autoFocus,
    cancelButtonProps = _ref.cancelButtonProps,
    cancelText = _ref.cancelText,
    closeOnOverlayClick = _ref.closeOnOverlayClick,
    closeOnEscape = _ref.closeOnEscape,
    componentsProps = _ref.componentsProps,
    defaultIsOpen = _ref.defaultIsOpen,
    icon = _ref.icon,
    isOpen = _ref.isOpen,
    noCancel = _ref.noCancel,
    noClose = _ref.noClose,
    okButtonProps = _ref.okButtonProps,
    okLoading = _ref.okLoading,
    okText = _ref.okText,
    onCancel = _ref.onCancel,
    onClose = _ref.onClose,
    onOk = _ref.onOk,
    onOpen = _ref.onOpen,
    onToggle = _ref.onToggle,
    scrollBehavior = _ref.scrollBehavior,
    standalone = _ref.standalone,
    title = _ref.title,
    truncateTitle = _ref.truncateTitle,
    variant = _ref.variant,
    width = _ref.width,
    blockScrollOnMount = _ref.blockScrollOnMount,
    children = _ref.children,
    closeSrText = _ref.closeSrText,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var bodyStyle = _react.default.useRef();
  var isControlled = isOpen !== undefined;
  var _React$useState2 = _react.default.useState(isControlled ? isOpen : defaultIsOpen),
    internalIsOpen = _React$useState2[0],
    setInternalIsOpen = _React$useState2[1];
  var _React$useState3 = _react.default.useState(function () {
      return "modal-" + Math.random().toString(36).slice(2, 11);
    }),
    modalID = _React$useState3[0],
    setModalID = _React$useState3[1];
  var labelID = modalID + "-label";
  _react.default.useEffect(function () {
    if (isControlled) {
      setInternalIsOpen(isOpen);
    }
    if (isOpen) {
      setModalID("modal-" + Math.random().toString(36).slice(2, 11));
    }
  }, [isControlled, isOpen]);
  var onEscape = _react.default.useCallback(function (e) {
    var evt = e || window.event;
    var isEscape = false;
    if ('key' in evt) {
      isEscape = evt.key === 'Escape' || evt.key === 'Esc';
    } else {
      isEscape = evt.keyCode === 27;
    }
    if (isEscape && closeOnEscape) {
      if (onClose) {
        onClose(e);
      }
    }
  }, [closeOnEscape, onClose]);
  var handleCancel = _react.default.useCallback(function (e) {
    if (onCancel) onCancel(e);
    onClose(e);
  }, [onCancel, onClose]);
  _react.default.useEffect(function () {
    if (internalIsOpen) {
      document.addEventListener('keydown', onEscape);
    }
    return function () {
      document.removeEventListener('keydown', onEscape);
    };
  }, [internalIsOpen, onEscape]);
  _react.default.useEffect(function () {
    var _document = document,
      body = _document.body;
    if (bodyStyle.current === undefined) {
      bodyStyle.current = body && body.getAttribute('style') ? body.getAttribute('style') : '';
    }
    if (blockScrollOnMount) {
      if (isOpen) {
        body.style.overflow = 'hidden';
        body.style.position = 'relative';
        body.style.height = '100%';
      } else if (bodyStyle.current !== undefined) {
        body.setAttribute('style', bodyStyle.current);
      }
    }
    if (bodyStyle.current !== undefined && body) {
      body.setAttribute('style', bodyStyle.current);
    }
  }, [isOpen, blockScrollOnMount]);
  var contextValue = _react.default.useMemo(function () {
    return {
      modalRef: modalRef,
      modalInnerRef: modalInnerRef,
      autoFocus: autoFocus,
      cancelButtonProps: cancelButtonProps,
      cancelText: cancelText,
      closeOnOverlayClick: closeOnOverlayClick,
      componentsProps: componentsProps,
      defaultIsOpen: defaultIsOpen,
      icon: icon,
      isOpen: internalIsOpen,
      noCancel: noCancel,
      noClose: noClose,
      okButtonProps: okButtonProps,
      okLoading: okLoading,
      okText: okText,
      onCancel: handleCancel,
      onClose: onClose,
      onOk: onOk,
      onOpen: onOpen,
      onToggle: onToggle,
      scrollBehavior: scrollBehavior,
      standalone: standalone,
      title: title,
      modalID: modalID,
      labelID: labelID,
      truncateTitle: truncateTitle,
      variant: variant,
      width: width,
      closeSrText: closeSrText
    };
  }, [autoFocus, cancelButtonProps, cancelText, closeOnOverlayClick, componentsProps, defaultIsOpen, icon, internalIsOpen, noCancel, noClose, okButtonProps, okLoading, okText, handleCancel, onClose, onOk, onOpen, onToggle, scrollBehavior, standalone, title, modalID, labelID, truncateTitle, variant, width, closeSrText]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContext.Provider, _extends({
    value: contextValue
  }, restProps, {
    children: internalIsOpen && children
  }));
};
ModalProvider.defaultProps = {
  variant: 'standard',
  onClose: function onClose() {},
  okText: 'Ok',
  cancelText: 'Cancel',
  defaultIsOpen: false,
  closeOnOverlayClick: true,
  closeOnEscape: true,
  scrollBehavior: 'outside',
  width: null,
  icon: '',
  componentsProps: {
    ModalContentInner: {}
  },
  autoFocus: true,
  truncateTitle: false,
  closeSrText: 'Close modal'
};
var useModalContext = exports.useModalContext = function useModalContext() {
  var context = _react.default.useContext(ModalContext);
  return context || {};
};