UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 6.65 kB
{ "version": 3, "sources": ["../../../src/navigation/edit/responsive-wrapper.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { close, Icon } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { getColorClassName } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport OverlayMenuIcon from './overlay-menu-icon';\nimport { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';\n\nexport default function ResponsiveWrapper( {\n\tchildren,\n\tid,\n\tisOpen,\n\tisResponsive,\n\tonToggle,\n\tisHiddenByDefault,\n\toverlayBackgroundColor,\n\toverlayTextColor,\n\thasIcon,\n\ticon,\n\toverlay,\n\tonNavigateToEntityRecord,\n} ) {\n\tconst currentTheme = useSelect(\n\t\t( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,\n\t\t[]\n\t);\n\n\tif ( ! isResponsive ) {\n\t\treturn children;\n\t}\n\n\t// Only apply overlay colors if there's no custom overlay template part.\n\tconst hasCustomOverlay = !! overlay;\n\n\tconst responsiveContainerClasses = clsx(\n\t\t'wp-block-navigation__responsive-container',\n\t\t! hasCustomOverlay && {\n\t\t\t'has-text-color':\n\t\t\t\t!! overlayTextColor.color || !! overlayTextColor?.class,\n\t\t\t[ getColorClassName( 'color', overlayTextColor?.slug ) ]:\n\t\t\t\t!! overlayTextColor?.slug,\n\t\t\t'has-background':\n\t\t\t\t!! overlayBackgroundColor.color ||\n\t\t\t\toverlayBackgroundColor?.class,\n\t\t\t[ getColorClassName(\n\t\t\t\t'background-color',\n\t\t\t\toverlayBackgroundColor?.slug\n\t\t\t) ]: !! overlayBackgroundColor?.slug,\n\t\t},\n\t\t{\n\t\t\t'is-menu-open': isOpen,\n\t\t\t'hidden-by-default': isHiddenByDefault,\n\t\t}\n\t);\n\n\tconst styles = ! hasCustomOverlay\n\t\t? {\n\t\t\t\tcolor: ! overlayTextColor?.slug && overlayTextColor?.color,\n\t\t\t\tbackgroundColor:\n\t\t\t\t\t! overlayBackgroundColor?.slug &&\n\t\t\t\t\toverlayBackgroundColor?.color &&\n\t\t\t\t\toverlayBackgroundColor.color,\n\t\t }\n\t\t: {};\n\n\tconst openButtonClasses = clsx(\n\t\t'wp-block-navigation__responsive-container-open',\n\t\t{ 'always-shown': isHiddenByDefault }\n\t);\n\n\tconst modalId = `${ id }-modal`;\n\n\tconst dialogProps = {\n\t\tclassName: 'wp-block-navigation__responsive-dialog',\n\t\t...( isOpen && {\n\t\t\trole: 'dialog',\n\t\t\t'aria-modal': true,\n\t\t\t'aria-label': __( 'Menu' ),\n\t\t} ),\n\t};\n\n\tconst handleToggleClick = () => {\n\t\t// If an overlay template part is selected, navigate to it instead of toggling\n\t\tif ( overlay && onNavigateToEntityRecord ) {\n\t\t\tconst templatePartId = createTemplatePartId(\n\t\t\t\tcurrentTheme,\n\t\t\t\toverlay\n\t\t\t);\n\n\t\t\tonNavigateToEntityRecord( {\n\t\t\t\tpostId: templatePartId,\n\t\t\t\tpostType: 'wp_template_part',\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\t\t// Otherwise, use normal toggle behavior\n\t\tonToggle( true );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isOpen && (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\taria-label={ hasIcon && __( 'Open menu' ) }\n\t\t\t\t\tclassName={ openButtonClasses }\n\t\t\t\t\tonClick={ handleToggleClick }\n\t\t\t\t>\n\t\t\t\t\t{ hasIcon && <OverlayMenuIcon icon={ icon } /> }\n\t\t\t\t\t{ ! hasIcon && __( 'Menu' ) }\n\t\t\t\t</Button>\n\t\t\t) }\n\n\t\t\t<div\n\t\t\t\tclassName={ responsiveContainerClasses }\n\t\t\t\tstyle={ styles }\n\t\t\t\tid={ modalId }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wp-block-navigation__responsive-close\"\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t<div { ...dialogProps }>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__responsive-container-close\"\n\t\t\t\t\t\t\taria-label={ hasIcon && __( 'Close menu' ) }\n\t\t\t\t\t\t\tonClick={ () => onToggle( false ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ hasIcon && <Icon icon={ close } /> }\n\t\t\t\t\t\t\t{ ! hasIcon && __( 'Close' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__responsive-container-content\"\n\t\t\t\t\t\t\tid={ `${ modalId }-content` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"], "mappings": "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", "names": [] }