@wordpress/block-editor
Version:
8 lines (7 loc) • 12.7 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/media-replace-flow/index.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport {\n\tFormFileUpload,\n\tNavigableMenu,\n\tMenuItem,\n\tDropdown,\n\twithFilters,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { useSelect, withDispatch } from '@wordpress/data';\nimport { DOWN } from '@wordpress/keycodes';\nimport {\n\tpostFeaturedImage,\n\tupload,\n\tmedia as mediaIcon,\n} from '@wordpress/icons';\nimport { compose } from '@wordpress/compose';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport MediaUpload from '../media-upload';\nimport MediaUploadCheck from '../media-upload/check';\nimport LinkControl from '../link-control';\nimport { store as blockEditorStore } from '../../store';\nimport { getComputedAcceptAttribute } from '../media-placeholder/utils';\n\nconst noop = () => {};\nlet uniqueId = 0;\n\nconst MediaReplaceFlow = ( {\n\tmediaURL,\n\tmediaId,\n\tmediaIds,\n\tallowedTypes,\n\taccept,\n\tonError,\n\tonSelect,\n\tonSelectURL,\n\tonReset,\n\tonToggleFeaturedImage,\n\tuseFeaturedImage,\n\tonFilesUpload = noop,\n\tname = __( 'Replace' ),\n\tcreateNotice,\n\tremoveNotice,\n\tchildren,\n\tmultiple = false,\n\taddToGallery,\n\thandleUpload = true,\n\tvariant,\n\tpopoverProps,\n\trenderToggle,\n\tclassName,\n} ) => {\n\tconst { mediaUpload, allowedMimeTypes } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst settings = getSettings();\n\t\treturn {\n\t\t\tmediaUpload: settings.mediaUpload,\n\t\t\tallowedMimeTypes: settings.allowedMimeTypes,\n\t\t};\n\t}, [] );\n\tconst errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;\n\n\tconst computedAccept = useMemo(\n\t\t() =>\n\t\t\tgetComputedAcceptAttribute(\n\t\t\t\tallowedTypes,\n\t\t\t\tallowedMimeTypes,\n\t\t\t\taccept\n\t\t\t),\n\t\t[ allowedTypes, allowedMimeTypes, accept ]\n\t);\n\n\tconst onUploadError = ( message ) => {\n\t\tconst safeMessage = stripHTML( message );\n\t\tif ( onError ) {\n\t\t\tonError( safeMessage );\n\t\t\treturn;\n\t\t}\n\t\t// We need to set a timeout for showing the notice\n\t\t// so that VoiceOver and possibly other screen readers\n\t\t// can announce the error after the toolbar button\n\t\t// regains focus once the upload dialog closes.\n\t\t// Otherwise VO simply skips over the notice and announces\n\t\t// the focused element and the open menu.\n\t\tsetTimeout( () => {\n\t\t\tcreateNotice( 'error', safeMessage, {\n\t\t\t\tspeak: true,\n\t\t\t\tid: errorNoticeID,\n\t\t\t\tisDismissible: true,\n\t\t\t} );\n\t\t}, 1000 );\n\t};\n\n\tconst selectMedia = ( media, closeMenu ) => {\n\t\tif ( useFeaturedImage && onToggleFeaturedImage ) {\n\t\t\tonToggleFeaturedImage();\n\t\t}\n\t\tcloseMenu();\n\t\t// Calling `onSelect` after the state update since it might unmount the component.\n\t\tonSelect( media );\n\t\tspeak( __( 'The media file has been replaced' ) );\n\t\tremoveNotice( errorNoticeID );\n\t};\n\n\tconst uploadFiles = ( event, closeMenu ) => {\n\t\tconst files = event.target.files;\n\t\tif ( ! handleUpload ) {\n\t\t\tcloseMenu();\n\t\t\treturn onSelect( files );\n\t\t}\n\t\tonFilesUpload( files );\n\t\tmediaUpload( {\n\t\t\tallowedTypes,\n\t\t\tfilesList: files,\n\t\t\tonFileChange: ( [ media ] ) => {\n\t\t\t\tselectMedia( media, closeMenu );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t} );\n\t};\n\n\tconst openOnArrowDown = ( event ) => {\n\t\tif ( event.keyCode === DOWN ) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.target.click();\n\t\t}\n\t};\n\n\tconst onlyAllowsImages = () => {\n\t\tif ( ! allowedTypes || allowedTypes.length === 0 ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn allowedTypes.every(\n\t\t\t( allowedType ) =>\n\t\t\t\tallowedType === 'image' || allowedType.startsWith( 'image/' )\n\t\t);\n\t};\n\n\tconst gallery = multiple && onlyAllowsImages();\n\n\tconst mergedPopoverProps = {\n\t\t...popoverProps,\n\t\tvariant,\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\tclassName={ className }\n\t\t\tcontentClassName={ clsx(\n\t\t\t\t'block-editor-media-replace-flow__options',\n\t\t\t\tvariant && `is-variant-${ variant }`\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tif ( renderToggle ) {\n\t\t\t\t\treturn renderToggle( {\n\t\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t\t'aria-haspopup': 'true',\n\t\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\t\tonKeyDown: openOnArrowDown,\n\t\t\t\t\t\tchildren: name,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ name }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<NavigableMenu className=\"block-editor-media-replace-flow__media-upload-menu\">\n\t\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\t\tgallery={ gallery }\n\t\t\t\t\t\t\t\taddToGallery={ addToGallery }\n\t\t\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\t\t\tvalue={ multiple ? mediaIds : mediaId }\n\t\t\t\t\t\t\t\tonSelect={ ( media ) =>\n\t\t\t\t\t\t\t\t\tselectMedia( media, onClose )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\ticon={ mediaIcon }\n\t\t\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Open Media Library' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\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<FormFileUpload\n\t\t\t\t\t\t\t\tonChange={ ( event ) => {\n\t\t\t\t\t\t\t\t\tuploadFiles( event, onClose );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccept={ computedAccept }\n\t\t\t\t\t\t\t\tmultiple={ !! multiple }\n\t\t\t\t\t\t\t\trender={ ( { openFileDialog } ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\topenFileDialog();\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ _x( 'Upload', 'verb' ) }\n\t\t\t\t\t\t\t\t\t\t</MenuItem>\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/>\n\t\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t\t\t{ onToggleFeaturedImage && (\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\ticon={ postFeaturedImage }\n\t\t\t\t\t\t\t\tonClick={ onToggleFeaturedImage }\n\t\t\t\t\t\t\t\tisPressed={ useFeaturedImage }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Use featured image' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ mediaURL && onReset && (\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\tonClose();\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{ __( 'Reset' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ typeof children === 'function'\n\t\t\t\t\t\t\t? children( { onClose } )\n\t\t\t\t\t\t\t: children }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t{ onSelectURL && (\n\t\t\t\t\t\t<form className=\"block-editor-media-flow__url-input\">\n\t\t\t\t\t\t\t<span className=\"block-editor-media-replace-flow__image-url-label\">\n\t\t\t\t\t\t\t\t{ __( 'Current media URL:' ) }\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<LinkControl\n\t\t\t\t\t\t\t\tvalue={ { url: mediaURL } }\n\t\t\t\t\t\t\t\tsettings={ [] }\n\t\t\t\t\t\t\t\tshowSuggestions={ false }\n\t\t\t\t\t\t\t\tonChange={ ( { url } ) => {\n\t\t\t\t\t\t\t\t\tonSelectURL( url );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsearchInputPlaceholder={ __(\n\t\t\t\t\t\t\t\t\t'Paste or type URL'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-replace-flow/README.md\n */\nexport default compose( [\n\twithDispatch( ( dispatch ) => {\n\t\tconst { createNotice, removeNotice } = dispatch( noticesStore );\n\t\treturn {\n\t\t\tcreateNotice,\n\t\t\tremoveNotice,\n\t\t};\n\t} ),\n\twithFilters( 'editor.MediaReplaceFlow' ),\n] )( MediaReplaceFlow );\n"],
"mappings": "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",
"names": ["blockEditorStore", "stripHTML", "clsx", "MediaUploadCheck", "MediaUpload", "mediaIcon", "LinkControl", "noticesStore"]
}