UNPKG

@wordpress/block-library

Version:
103 lines (99 loc) 3.69 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = ResponsiveWrapper; var _clsx = _interopRequireDefault(require("clsx")); 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")); var _jsxRuntime = require("react/jsx-runtime"); /** * External dependencies */ /** * WordPress dependencies */ /** * Internal dependencies */ function ResponsiveWrapper({ children, id, isOpen, isResponsive, onToggle, isHiddenByDefault, overlayBackgroundColor, overlayTextColor, hasIcon, icon }) { if (!isResponsive) { return children; } const responsiveContainerClasses = (0, _clsx.default)('wp-block-navigation__responsive-container', { 'has-text-color': !!overlayTextColor.color || !!overlayTextColor?.class, [(0, _blockEditor.getColorClassName)('color', overlayTextColor?.slug)]: !!overlayTextColor?.slug, 'has-background': !!overlayBackgroundColor.color || overlayBackgroundColor?.class, [(0, _blockEditor.getColorClassName)('background-color', overlayBackgroundColor?.slug)]: !!overlayBackgroundColor?.slug, 'is-menu-open': isOpen, 'hidden-by-default': isHiddenByDefault }); const styles = { color: !overlayTextColor?.slug && overlayTextColor?.color, backgroundColor: !overlayBackgroundColor?.slug && overlayBackgroundColor?.color && overlayBackgroundColor.color }; const openButtonClasses = (0, _clsx.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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, { children: [!isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, { __next40pxDefaultSize: true, "aria-haspopup": "true", "aria-label": hasIcon && (0, _i18n.__)('Open menu'), className: openButtonClasses, onClick: () => onToggle(true), children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayMenuIcon.default, { icon: icon }), !hasIcon && (0, _i18n.__)('Menu')] }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { className: responsiveContainerClasses, style: styles, id: modalId, children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { className: "wp-block-navigation__responsive-close", tabIndex: "-1", children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...dialogProps, children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, { __next40pxDefaultSize: true, className: "wp-block-navigation__responsive-container-close", "aria-label": hasIcon && (0, _i18n.__)('Close menu'), onClick: () => onToggle(false), children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, { icon: _icons.close }), !hasIcon && (0, _i18n.__)('Close')] }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { className: "wp-block-navigation__responsive-container-content", id: `${modalId}-content`, children: children })] }) }) })] }); } //# sourceMappingURL=responsive-wrapper.js.map