@gechiui/components/build/modal/index.js

UI components for GeChiUI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Modal;

var _element = require("@gechiui/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _compose = require("@gechiui/compose");

var _deprecated = _interopRequireDefault(require("@gechiui/deprecated"));

var _keycodes = require("@gechiui/keycodes");

var _i18n = require("@gechiui/i18n");

var _icons = require("@gechiui/icons");

var ariaHelper = _interopRequireWildcard(require("./aria-helper"));

var _button = _interopRequireDefault(require("../button"));

var _styleProvider = _interopRequireDefault(require("../style-provider"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
// Used to count the number of open modals.
let openModalCount = 0;

function Modal(_ref) {
  let {
    bodyOpenClassName = 'modal-open',
    role = 'dialog',
    title = null,
    focusOnMount = true,
    shouldCloseOnEsc = true,
    shouldCloseOnClickOutside = true,
    isDismissable,
    // Deprecated
    isDismissible = isDismissable || true,

    /* accessibility */
    aria = {
      labelledby: null,
      describedby: null
    },
    onRequestClose,
    icon,
    closeButtonLabel,
    children,
    style,
    overlayClassName,
    className,
    contentLabel,
    onKeyDown,
    isFullScreen = false
  } = _ref;
  const ref = (0, _element.useRef)();
  const instanceId = (0, _compose.useInstanceId)(Modal);
  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;
  const focusOnMountRef = (0, _compose.useFocusOnMount)(focusOnMount);
  const constrainedTabbingRef = (0, _compose.useConstrainedTabbing)();
  const focusReturnRef = (0, _compose.useFocusReturn)();
  const focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onRequestClose);
  (0, _element.useEffect)(() => {
    openModalCount++;

    if (openModalCount === 1) {
      ariaHelper.hideApp(ref.current);
      document.body.classList.add(bodyOpenClassName);
    }

    return () => {
      openModalCount--;

      if (openModalCount === 0) {
        document.body.classList.remove(bodyOpenClassName);
        ariaHelper.showApp();
      }
    };
  }, []);

  if (isDismissable) {
    (0, _deprecated.default)('isDismissable prop of the Modal component', {
      since: '5.4',
      alternative: 'isDismissible prop (renamed) of the Modal component'
    });
  }

  function handleEscapeKeyDown(event) {
    if (shouldCloseOnEsc && event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented) {
      event.preventDefault();

      if (onRequestClose) {
        onRequestClose(event);
      }
    }
  }

  return (0, _element.createPortal)( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
  (0, _element.createElement)("div", {
    ref: ref,
    className: (0, _classnames.default)('components-modal__screen-overlay', overlayClassName),
    onKeyDown: handleEscapeKeyDown
  }, (0, _element.createElement)(_styleProvider.default, {
    document: document
  }, (0, _element.createElement)("div", (0, _extends2.default)({
    className: (0, _classnames.default)('components-modal__frame', className, {
      'is-full-screen': isFullScreen
    }),
    style: style,
    ref: (0, _compose.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMountRef]),
    role: role,
    "aria-label": contentLabel,
    "aria-labelledby": contentLabel ? null : headingId,
    "aria-describedby": aria.describedby,
    tabIndex: "-1"
  }, shouldCloseOnClickOutside ? focusOutsideProps : {}, {
    onKeyDown: onKeyDown
  }), (0, _element.createElement)("div", {
    className: 'components-modal__content',
    role: "document"
  }, (0, _element.createElement)("div", {
    className: "components-modal__header"
  }, (0, _element.createElement)("div", {
    className: "components-modal__header-heading-container"
  }, icon && (0, _element.createElement)("span", {
    className: "components-modal__icon-container",
    "aria-hidden": true
  }, icon), title && (0, _element.createElement)("h1", {
    id: headingId,
    className: "components-modal__header-heading"
  }, title)), isDismissible && (0, _element.createElement)(_button.default, {
    onClick: onRequestClose,
    icon: _icons.closeSmall,
    label: closeButtonLabel || (0, _i18n.__)('关闭对话框')
  })), children)))), document.body);
}
//# sourceMappingURL=index.js.map