Add buttonProps to MediaUploader (#48639)
* Add buttonProps to MediaUploader * Add storybook story to show new functionality * Move buttonProps to last position of spread
This commit is contained in:
parent
532f1beb02
commit
51f3807c2a
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Add buttonProps to MediaUploader
|
|
@ -23,6 +23,7 @@ export type MediaUploaderErrorCallback = ( error: ErrorType ) => void;
|
|||
type MediaUploaderProps = {
|
||||
allowedMediaTypes?: string[];
|
||||
buttonText?: string;
|
||||
buttonProps?: Button.Props;
|
||||
hasDropZone?: boolean;
|
||||
icon?: JSX.Element;
|
||||
label?: string | JSX.Element;
|
||||
|
@ -47,6 +48,7 @@ type MediaUploaderProps = {
|
|||
export const MediaUploader = ( {
|
||||
allowedMediaTypes = DEFAULT_ALLOWED_MEDIA_TYPES,
|
||||
buttonText = __( 'Choose images', 'woocommerce' ),
|
||||
buttonProps,
|
||||
hasDropZone = true,
|
||||
label = __( 'Drag images here or click to upload', 'woocommerce' ),
|
||||
maxUploadFileSize = 10000000,
|
||||
|
@ -89,9 +91,8 @@ export const MediaUploader = ( {
|
|||
event: React.MouseEvent< HTMLDivElement, MouseEvent >
|
||||
) => {
|
||||
const { target } = event;
|
||||
if (
|
||||
( target as HTMLButtonElement )?.type !== 'button'
|
||||
) {
|
||||
// is the click on the button from MediaUploadComponent or on the div?
|
||||
if ( ! ( target as HTMLElement ).closest( 'button' ) ) {
|
||||
openFileDialog();
|
||||
}
|
||||
} }
|
||||
|
@ -109,13 +110,14 @@ export const MediaUploader = ( {
|
|||
// @ts-expect-error - TODO multiple also accepts string.
|
||||
multiple={ multipleSelect }
|
||||
render={ ( { open } ) =>
|
||||
buttonText ? (
|
||||
buttonText || buttonProps ? (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={ () => {
|
||||
onMediaGalleryOpen();
|
||||
open();
|
||||
} }
|
||||
{ ...buttonProps }
|
||||
>
|
||||
{ buttonText }
|
||||
</Button>
|
||||
|
|
|
@ -2,9 +2,10 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import React, { createElement } from 'react';
|
||||
import { Card, CardBody, Modal, Notice } from '@wordpress/components';
|
||||
import { Modal, Notice } from '@wordpress/components';
|
||||
import { MediaItem } from '@wordpress/media-utils';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { cloudUpload } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
@ -121,23 +122,19 @@ export const Basic: React.FC = () => {
|
|||
const [ images, setImages ] = useState< File[] >( [] );
|
||||
|
||||
return (
|
||||
<Card size="large">
|
||||
<CardBody>
|
||||
<ImageGallery images={ images } />
|
||||
<MediaUploader
|
||||
MediaUploadComponent={ MockMediaUpload }
|
||||
onSelect={ ( file ) => setImages( [ ...images, file ] ) }
|
||||
onError={ () => null }
|
||||
onFileUploadChange={ ( files ) =>
|
||||
setImages( [ ...images, ...files ] )
|
||||
}
|
||||
onUpload={ ( files ) =>
|
||||
setImages( [ ...images, ...files ] )
|
||||
}
|
||||
uploadMedia={ mockUploadMedia }
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<>
|
||||
<ImageGallery images={ images } />
|
||||
<MediaUploader
|
||||
MediaUploadComponent={ MockMediaUpload }
|
||||
onSelect={ ( file ) => setImages( [ ...images, file ] ) }
|
||||
onError={ () => null }
|
||||
onFileUploadChange={ ( files ) =>
|
||||
setImages( [ ...images, ...files ] )
|
||||
}
|
||||
onUpload={ ( files ) => setImages( [ ...images, ...files ] ) }
|
||||
uploadMedia={ mockUploadMedia }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -145,22 +142,20 @@ export const DisabledDropZone: React.FC = () => {
|
|||
const [ images, setImages ] = useState< File[] >( [] );
|
||||
|
||||
return (
|
||||
<Card size="large">
|
||||
<CardBody>
|
||||
<ImageGallery images={ images } />
|
||||
<MediaUploader
|
||||
hasDropZone={ false }
|
||||
label={ 'Click the button below to upload' }
|
||||
MediaUploadComponent={ MockMediaUpload }
|
||||
onFileUploadChange={ ( files ) =>
|
||||
setImages( [ ...images, ...files ] )
|
||||
}
|
||||
onSelect={ ( file ) => setImages( [ ...images, file ] ) }
|
||||
onError={ () => null }
|
||||
uploadMedia={ mockUploadMedia }
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<>
|
||||
<ImageGallery images={ images } />
|
||||
<MediaUploader
|
||||
hasDropZone={ false }
|
||||
label={ 'Click the button below to upload' }
|
||||
MediaUploadComponent={ MockMediaUpload }
|
||||
onFileUploadChange={ ( files ) =>
|
||||
setImages( [ ...images, ...files ] )
|
||||
}
|
||||
onSelect={ ( file ) => setImages( [ ...images, file ] ) }
|
||||
onError={ () => null }
|
||||
uploadMedia={ mockUploadMedia }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -168,23 +163,50 @@ export const MaxUploadFileSize: React.FC = () => {
|
|||
const [ error, setError ] = useState< string | null >( null );
|
||||
|
||||
return (
|
||||
<Card size="large">
|
||||
<CardBody>
|
||||
{ error && (
|
||||
<Notice isDismissible={ false } status={ 'error' }>
|
||||
{ error }
|
||||
</Notice>
|
||||
) }
|
||||
<>
|
||||
{ error && (
|
||||
<Notice isDismissible={ false } status={ 'error' }>
|
||||
{ error }
|
||||
</Notice>
|
||||
) }
|
||||
|
||||
<MediaUploader
|
||||
maxUploadFileSize={ 1000 }
|
||||
MediaUploadComponent={ MockMediaUpload }
|
||||
onSelect={ () => null }
|
||||
onError={ ( e ) => setError( e.message ) }
|
||||
onUpload={ () => null }
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<MediaUploader
|
||||
maxUploadFileSize={ 1000 }
|
||||
MediaUploadComponent={ MockMediaUpload }
|
||||
onSelect={ () => null }
|
||||
onError={ ( e ) => setError( e.message ) }
|
||||
onUpload={ () => null }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const ButtonWithOnlyIcon: React.FC = () => {
|
||||
const [ error, setError ] = useState< string | null >( null );
|
||||
|
||||
return (
|
||||
<>
|
||||
{ error && (
|
||||
<Notice isDismissible={ false } status={ 'error' }>
|
||||
{ error }
|
||||
</Notice>
|
||||
) }
|
||||
|
||||
<MediaUploader
|
||||
maxUploadFileSize={ 1000 }
|
||||
buttonProps={ {
|
||||
icon: cloudUpload,
|
||||
iconSize: 32,
|
||||
variant: 'tertiary',
|
||||
'aria-label': 'Upload media',
|
||||
} }
|
||||
buttonText=""
|
||||
MediaUploadComponent={ MockMediaUpload }
|
||||
onSelect={ () => null }
|
||||
onError={ ( e ) => setError( e.message ) }
|
||||
onUpload={ () => null }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue