Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
Nathan Silveira 2024-06-21 14:32:35 -03:00 committed by GitHub
parent 532f1beb02
commit 51f3807c2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 82 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/update-media-uploader-button Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Add buttonProps to MediaUploader

10
packages/js/components/src/media-uploader/media-uploader.tsx
View File

@ -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>

122
packages/js/components/src/media-uploader/stories/index.tsx
View File

@ -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 }
/>
</>
);
};