@wordpress/block-library/build/navigation/edit/responsive-wrapper.js

Block library for the WordPress editor.

"use strict";

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

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

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

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

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

var _components = require("@wordpress/components");

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

var _blockEditor = require("@wordpress/block-editor");

var _overlayMenuIcon = _interopRequireDefault(require("./overlay-menu-icon"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function ResponsiveWrapper(_ref) {
  let {
    children,
    id,
    isOpen,
    isResponsive,
    onToggle,
    isHiddenByDefault,
    overlayBackgroundColor,
    overlayTextColor,
    hasIcon,
    icon
  } = _ref;

  if (!isResponsive) {
    return children;
  }

  const responsiveContainerClasses = (0, _classnames.default)('wp-block-navigation__responsive-container', {
    'has-text-color': !!overlayTextColor.color || !!(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.class),
    [(0, _blockEditor.getColorClassName)('color', overlayTextColor === null || overlayTextColor === void 0 ? void 0 : overlayTextColor.slug)]: !!(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.slug),
    'has-background': !!overlayBackgroundColor.color || (overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.class),
    [(0, _blockEditor.getColorClassName)('background-color', overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.slug)]: !!(overlayBackgroundColor !== null && overlayBackgroundColor !== void 0 && overlayBackgroundColor.slug),
    'is-menu-open': isOpen,
    'hidden-by-default': isHiddenByDefault
  });
  const styles = {
    color: !(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.slug) && (overlayTextColor === null || overlayTextColor === void 0 ? void 0 : overlayTextColor.color),
    backgroundColor: !(overlayBackgroundColor !== null && overlayBackgroundColor !== void 0 && overlayBackgroundColor.slug) && (overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.color) && overlayBackgroundColor.color
  };
  const openButtonClasses = (0, _classnames.default)('wp-block-navigation__responsive-container-open', {
    'always-shown': isHiddenByDefault
  });
  const modalId = `${id}-modal`;
  const dialogProps = {
    className: 'wp-block-navigation__responsive-dialog',
    ...(isOpen && {
      role: 'dialog',
      'aria-modal': true,
      'aria-label': (0, _i18n.__)('Menu')
    })
  };
  return (0, _element.createElement)(_element.Fragment, null, !isOpen && (0, _element.createElement)(_components.Button, {
    "aria-haspopup": "true",
    "aria-label": hasIcon && (0, _i18n.__)('Open menu'),
    className: openButtonClasses,
    onClick: () => onToggle(true)
  }, hasIcon && (0, _element.createElement)(_overlayMenuIcon.default, {
    icon: icon
  }), !hasIcon && (0, _element.createElement)("span", {
    className: "wp-block-navigation__toggle_button_label"
  }, (0, _i18n.__)('Menu'))), (0, _element.createElement)("div", {
    className: responsiveContainerClasses,
    style: styles,
    id: modalId
  }, (0, _element.createElement)("div", {
    className: "wp-block-navigation__responsive-close",
    tabIndex: "-1"
  }, (0, _element.createElement)("div", dialogProps, (0, _element.createElement)(_components.Button, {
    className: "wp-block-navigation__responsive-container-close",
    "aria-label": hasIcon && (0, _i18n.__)('Close menu'),
    onClick: () => onToggle(false)
  }, hasIcon && (0, _element.createElement)(_icons.Icon, {
    icon: _icons.close
  }), !hasIcon && (0, _element.createElement)("span", {
    className: "wp-block-navigation__toggle_button_label"
  }, (0, _i18n.__)('Close'))), (0, _element.createElement)("div", {
    className: "wp-block-navigation__responsive-container-content",
    id: `${modalId}-content`
  }, children)))));
}
//# sourceMappingURL=responsive-wrapper.js.map