UNPKG

@wordpress/editor

Version:
8 lines (7 loc) 9.13 kB
{ "version": 3, "sources": ["../../../src/components/preview-dropdown/index.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tMenuItemsChoice,\n\tVisuallyHidden,\n\tIcon,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { desktop, mobile, tablet, external, check } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { ActionItem } from '@wordpress/interface';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport PostPreviewButton from '../post-preview-button';\nimport { unlock } from '../../lock-unlock';\n\nexport default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {\n\tconst {\n\t\tdeviceType,\n\t\thomeUrl,\n\t\tisTemplate,\n\t\tisViewable,\n\t\tshowIconLabels,\n\t\tisTemplateHidden,\n\t\ttemplateId,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetDeviceType,\n\t\t\tgetCurrentPostType,\n\t\t\tgetCurrentTemplateId,\n\t\t\tgetRenderingMode,\n\t\t} = select( editorStore );\n\t\tconst { getEntityRecord, getPostType } = select( coreStore );\n\t\tconst { get } = select( preferencesStore );\n\t\tconst _currentPostType = getCurrentPostType();\n\t\treturn {\n\t\t\tdeviceType: getDeviceType(),\n\t\t\thomeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,\n\t\t\tisTemplate: _currentPostType === 'wp_template',\n\t\t\tisViewable: getPostType( _currentPostType )?.viewable ?? false,\n\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\tisTemplateHidden: getRenderingMode() === 'post-only',\n\t\t\ttemplateId: getCurrentTemplateId(),\n\t\t};\n\t}, [] );\n\tconst { setDeviceType, setRenderingMode, setDefaultRenderingMode } = unlock(\n\t\tuseDispatch( editorStore )\n\t);\n\tconst { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );\n\n\tconst handleDevicePreviewChange = ( newDeviceType ) => {\n\t\tsetDeviceType( newDeviceType );\n\t\tresetZoomLevel();\n\t};\n\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tif ( isMobile ) {\n\t\treturn null;\n\t}\n\n\tconst popoverProps = {\n\t\tplacement: 'bottom-end',\n\t};\n\tconst toggleProps = {\n\t\tclassName: 'editor-preview-dropdown__toggle',\n\t\ticonPosition: 'right',\n\t\tsize: 'compact',\n\t\tshowTooltip: ! showIconLabels,\n\t\tdisabled,\n\t\taccessibleWhenDisabled: disabled,\n\t};\n\tconst menuProps = {\n\t\t'aria-label': __( 'View options' ),\n\t};\n\n\tconst deviceIcons = {\n\t\tdesktop,\n\t\tmobile,\n\t\ttablet,\n\t};\n\n\t/**\n\t * The choices for the device type.\n\t * Duplicated in block-editor block-visibility constants and edit-site\n\t * use-viewport-sync. Update all three when adding new viewport types.\n\t *\n\t * @type {Array}\n\t */\n\tconst choices = [\n\t\t{\n\t\t\tvalue: 'Desktop',\n\t\t\tlabel: __( 'Desktop' ),\n\t\t\ticon: desktop,\n\t\t},\n\t\t{\n\t\t\tvalue: 'Tablet',\n\t\t\tlabel: __( 'Tablet' ),\n\t\t\ticon: tablet,\n\t\t},\n\t\t{\n\t\t\tvalue: 'Mobile',\n\t\t\tlabel: __( 'Mobile' ),\n\t\t\ticon: mobile,\n\t\t},\n\t];\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName={ clsx(\n\t\t\t\t'editor-preview-dropdown',\n\t\t\t\t`editor-preview-dropdown--${ deviceType.toLowerCase() }`\n\t\t\t) }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\ttoggleProps={ toggleProps }\n\t\t\tmenuProps={ menuProps }\n\t\t\ticon={ deviceIcons[ deviceType.toLowerCase() ] }\n\t\t\tlabel={ __( 'View' ) }\n\t\t\tdisableOpenOnArrowDown={ disabled }\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t<MenuItemsChoice\n\t\t\t\t\t\t\tchoices={ choices }\n\t\t\t\t\t\t\tvalue={ deviceType }\n\t\t\t\t\t\t\tonSelect={ handleDevicePreviewChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t{ isTemplate && (\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\thref={ homeUrl }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'View site' ) }\n\t\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isTemplate && !! templateId && (\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\ticon={ ! isTemplateHidden ? check : undefined }\n\t\t\t\t\t\t\t\tisSelected={ ! isTemplateHidden }\n\t\t\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tconst newRenderingMode = isTemplateHidden\n\t\t\t\t\t\t\t\t\t\t? 'template-locked'\n\t\t\t\t\t\t\t\t\t\t: 'post-only';\n\t\t\t\t\t\t\t\t\tsetRenderingMode( newRenderingMode );\n\t\t\t\t\t\t\t\t\tsetDefaultRenderingMode( newRenderingMode );\n\t\t\t\t\t\t\t\t\tresetZoomLevel();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Show template' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isViewable && (\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<PostPreviewButton\n\t\t\t\t\t\t\t\tclassName=\"editor-preview-dropdown__button-external\"\n\t\t\t\t\t\t\t\trole=\"menuitem\"\n\t\t\t\t\t\t\t\tforceIsAutosaveable={ forceIsAutosaveable }\n\t\t\t\t\t\t\t\taria-label={ __( 'Preview in new tab' ) }\n\t\t\t\t\t\t\t\ttextContent={\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Preview in new tab' ) }\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ external } />\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonPreview={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<ActionItem.Slot\n\t\t\t\t\t\tname=\"core/plugin-preview-menu\"\n\t\t\t\t\t\tfillProps={ { onClick: onClose } }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"], "mappings": "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", "names": [] }