diff --git a/packages/js/product-editor/changelog/add-41510 b/packages/js/product-editor/changelog/add-41510 new file mode 100644 index 00000000000..b7742945d27 --- /dev/null +++ b/packages/js/product-editor/changelog/add-41510 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +append a unique string to the filename if the settings are configured to do so diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx index 00a37c0d65f..8ebf9207a5a 100644 --- a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx @@ -10,13 +10,11 @@ import { chevronDown, chevronUp } from '@wordpress/icons'; * Internal dependencies */ import { DownloadsMenuProps } from './types'; -import { UploadFilesMenuItem } from '../upload-files-menu-item'; import { MediaLibraryMenuItem } from '../media-library-menu-item'; import { InsertUrlMenuItem } from '../insert-url-menu-item'; export function DownloadsMenu( { allowedTypes, - maxUploadFileSize, onUploadSuccess, onUploadError, }: DownloadsMenuProps ) { @@ -38,16 +36,6 @@ export function DownloadsMenu( { renderContent={ ( { onClose } ) => (
- { - onUploadSuccess( files ); - onClose(); - } } - onUploadError={ onUploadError } - /> - { diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx index 71e3b9f122a..4a917d2c126 100644 --- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx @@ -1,17 +1,14 @@ /** * External dependencies */ -import { ChangeEvent } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { createElement, useState } from '@wordpress/element'; import { trash } from '@wordpress/icons'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch } from '@wordpress/data'; import { recordEvent } from '@woocommerce/tracks'; import { ImageGallery, ImageGalleryItem } from '@woocommerce/components'; -import { uploadMedia } from '@wordpress/media-utils'; import { Button, - FormFileUpload, Modal, BaseControl, // @ts-expect-error `__experimentalInputControl` does exist. @@ -34,28 +31,14 @@ export interface Image { export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( { downloableItem, - maxUploadFileSize = 10000000, onCancel, onChange, onRemove, onSave, - onUploadSuccess, - onUploadError, } ) => { const { createNotice } = useDispatch( 'core/notices' ); const [ isCopingToClipboard, setIsCopingToClipboard ] = useState< boolean >( false ); - const [ isFileUploading, setIsFileUploading ] = - useState< boolean >( false ); - - const { allowedMimeTypes } = useSelect( ( select ) => { - const { getEditorSettings } = select( 'core/editor' ); - return getEditorSettings(); - } ); - - const allowedTypes = allowedMimeTypes - ? Object.values( allowedMimeTypes ) - : []; const { id = 0, file = '', name = '' } = downloableItem; @@ -96,21 +79,6 @@ export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( { setIsCopingToClipboard( false ); } - async function handleFormFileUploadChange( - event: ChangeEvent< HTMLInputElement > - ) { - setIsFileUploading( true ); - const filesList = event.currentTarget.files as FileList; - await uploadMedia( { - allowedTypes, - filesList, - maxUploadFileSize, - onFileChange: onUploadSuccess, - onError: onUploadError, - } ); - setIsFileUploading( false ); - } - return ( = ( { ) } - ( -
-

{ name }

- -
- ) } - /> + +
+

{ name }

+
- - -

- { createInterpolateElement( - __( - 'Supported file types: and more. View all', - 'woocommerce' - ), - { - Types: ( - - PNG, JPG, PDF, PPT, DOC, - MP3, MP4 - - ), - link: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - event.stopPropagation() - } - /> - ), - } - ) } -

-
- ) : ( - '' - ) - } - buttonText="" - allowedMediaTypes={ allowedTypes } - multipleSelect={ 'add' } - onUpload={ handleFileUpload } - onFileUploadChange={ handleFileUpload } - onError={ handleUploadError } - /> + { ! Boolean( downloads.length ) && ( +
+

+ { createInterpolateElement( + __( + 'Supported file types: and more. View all', + 'woocommerce' + ), + { + Types: ( + + PNG, JPG, PDF, PPT, DOC, MP3, MP4 + + ), + link: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + event.stopPropagation() + } + /> + ), + } + ) } +

+
+ ) } { Boolean( downloads.length ) && ( diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library-menu-item/media-library-menu-item.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library-menu-item/media-library-menu-item.tsx index 80dd80a6426..9378c513b5e 100644 --- a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library-menu-item/media-library-menu-item.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library-menu-item/media-library-menu-item.tsx @@ -1,17 +1,17 @@ /** * External dependencies */ - import { MenuItem } from '@wordpress/components'; import { createElement, useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { media } from '@wordpress/icons'; -import { MediaItem, MediaUpload } from '@wordpress/media-utils'; +import { MediaItem } from '@wordpress/media-utils'; /** * Internal dependencies */ import { MediaLibraryMenuItemProps } from './types'; +import { MediaLibrary } from '../media-library'; const MODAL_CLASS_NAME = 'woocommerce-media-library-menu-item__upload_files_modal'; @@ -39,8 +39,8 @@ export function MediaLibraryMenuItem( { [ uploadFilesModalOpen ] ); - function handleMediaUploadSelect( value: unknown ) { - onUploadSuccess( value as MediaItem[] ); + function handleMediaUploadSelect( value: MediaItem[] ) { + onUploadSuccess( value ); } function uploadFilesClickHandler( openMediaUploadModal: () => void ) { @@ -51,13 +51,16 @@ export function MediaLibraryMenuItem( { } return ( - ( + multiple="add" + uploaderParams={ { + type: 'downloadable_product', + } } + onSelect={ handleMediaUploadSelect } + > + { ( { open } ) => ( ) } - /> + ); } diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/index.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/index.ts new file mode 100644 index 00000000000..1849032dd77 --- /dev/null +++ b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/index.ts @@ -0,0 +1,2 @@ +export * from './media-library'; +export * from './types'; diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/media-library.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/media-library.tsx new file mode 100644 index 00000000000..5c013d5c73d --- /dev/null +++ b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/media-library.tsx @@ -0,0 +1,94 @@ +/** + * External dependencies + */ +import { useEffect, useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { MediaLibraryProps } from './types'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +declare const wp: any; + +export function MediaLibrary( { + allowedTypes, + modalTitle, + modalButtonText, + multiple, + className, + uploaderParams, + children, + onSelect, +}: MediaLibraryProps ) { + const mediaLibraryModal = useMemo( + function createMediaLibraryModal() { + const media = wp.media( { + title: modalTitle, + library: { + type: allowedTypes, + }, + button: { + text: modalButtonText, + }, + multiple, + states: [ + new wp.media.controller.Library( { + title: modalTitle, + library: wp.media.query(), + multiple, + priority: 20, + filterable: 'all', + } ), + ], + } ); + + return media; + }, + [ allowedTypes, modalTitle, modalButtonText, multiple ] + ); + + useEffect( + function initializeEvents() { + function handleSelect() { + const mediaItems = mediaLibraryModal + .state() + .get( 'selection' ) + .toJSON(); + + onSelect( mediaItems ); + } + + function handleReady() { + mediaLibraryModal.uploader.options.uploader.params = + uploaderParams; + } + + mediaLibraryModal.on( 'select', handleSelect ); + mediaLibraryModal.on( 'ready', handleReady ); + + return function unmountMediaLibraryModal() { + mediaLibraryModal.off( 'select', handleSelect ); + mediaLibraryModal.off( 'ready', handleReady ); + }; + }, + [ mediaLibraryModal, uploaderParams, onSelect ] + ); + + useEffect( + () => + function unmountMediaLibraryModal() { + mediaLibraryModal.remove(); + }, + [ mediaLibraryModal ] + ); + + function openMediaLibraryModal() { + mediaLibraryModal.$el.addClass( className ); + mediaLibraryModal.open(); + } + + return children( { + open: openMediaLibraryModal, + } ); +} diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/types.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/types.ts new file mode 100644 index 00000000000..08aa64b060a --- /dev/null +++ b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/types.ts @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import { MediaItem } from '@wordpress/media-utils'; + +export type ChildrenProps = { + open(): void; +}; + +export type MediaLibraryProps = { + allowedTypes?: string[]; + modalTitle?: string; + modalButtonText?: string; + multiple?: boolean | 'add'; + className?: string; + uploaderParams?: Record< string, string >; + children( props: ChildrenProps ): JSX.Element; + onSelect( selection: MediaItem[] ): void; +};