From 3db95b76b55905c0ed43a81c8ce7695cb52470e3 Mon Sep 17 00:00:00 2001 From: Drapich Piotr Date: Fri, 30 Aug 2019 09:05:11 +0200 Subject: [PATCH] MediaUpload and MediaPlaceholder unify props (#17145) --- .../components/media-placeholder/README.md | 16 ++- .../media-placeholder/index.native.js | 11 ++- .../src/components/media-upload/README.md | 10 +- .../components/media-upload/index.native.js | 99 ++++++++++--------- .../media-upload/test/index.native.js | 18 ++-- .../block-library/src/image/edit.native.js | 18 ++-- .../block-library/src/video/edit.native.js | 12 +-- 7 files changed, 105 insertions(+), 79 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md index 59795b5469c8cc..bde6c7598042ba 100644 --- a/packages/block-editor/src/components/media-placeholder/README.md +++ b/packages/block-editor/src/components/media-placeholder/README.md @@ -37,6 +37,7 @@ This property is similar to the `allowedTypes` property. The difference is the f - Type: `String` - Required: No +- Platform: Web ### addToGallery @@ -46,6 +47,7 @@ If false the gallery media modal opens in the edit mode where the user can edit - Type: `Boolean` - Required: No - Default: `false` +- Platform: Web ### allowedTypes @@ -57,6 +59,7 @@ This property is similar to the `accept` property. The difference is the format - Type: `Array` - Required: No +- Platform: Web | Mobile ### className @@ -64,6 +67,7 @@ Class name added to the placeholder. - Type: `String` - Required: No +- Platform: Web ### icon @@ -71,6 +75,7 @@ Icon to display left of the title. When passed as a `String`, the icon will be r - Type: `String|WPComponent` - Required: No +- Platform: Web | Mobile ### isAppender @@ -80,6 +85,7 @@ If false the default placeholder style is used. - Type: `Boolean` - Required: No - Default: `false` +- Platform: Web ### labels @@ -87,7 +93,7 @@ An object that can contain a `title` and `instructions` properties. These proper - Type: `Object` - Required: No - +- Platform: Web | Mobile ### multiple @@ -96,6 +102,7 @@ Whether to allow multiple selection of files or not. - Type: `Boolean` - Required: No - Default: `false` +- Platform: Web ### onError @@ -103,6 +110,7 @@ Callback called when an upload error happens. - Type: `Function` - Required: No +- Platform: Web ### onSelect @@ -111,6 +119,11 @@ The call back receives an array with the new files. Each element of the collecti - Type: `Function` - Required: Yes +- Platform: Web | Mobile + +The argument of the callback is an object containing the following properties: +- Web: `{ url, alt, id, link, caption, sizes, media_details }` +- Mobile: `{ id, url }` ### value @@ -118,6 +131,7 @@ Media ID (or media IDs if multiple is true) to be selected by default when openi - Type: `Number|Array` - Required: No +- Platform: Web ## Extend diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index e04361b71f3307..e224cce83c45e4 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -16,10 +16,11 @@ import { withTheme, useStyle } from '@wordpress/components'; import styles from './styles.scss'; function MediaPlaceholder( props ) { - const { mediaType, labels = {}, icon, onSelectURL, theme } = props; + const { allowedTypes = [], labels = {}, icon, onSelect, theme } = props; - const isImage = MEDIA_TYPE_IMAGE === mediaType; - const isVideo = MEDIA_TYPE_VIDEO === mediaType; + const isOneType = allowedTypes.length === 1; + const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE ); + const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO ); let placeholderTitle = labels.title; if ( placeholderTitle === undefined ) { @@ -52,8 +53,8 @@ function MediaPlaceholder( props ) { return ( { return ( { - requestMediaPickFromMediaLibrary( [ mediaType ], ( mediaId, mediaUrl ) => { - if ( mediaId ) { - this.props.onSelectURL( mediaId, mediaUrl ); - } - } ); - }; - - const onMediaUploadButtonPressed = () => { - requestMediaPickFromDeviceLibrary( [ mediaType ], ( mediaId, mediaUrl ) => { - if ( mediaId ) { - this.props.onSelectURL( mediaId, mediaUrl ); - } - } ); - }; - - const onMediaCaptureButtonPressed = () => { - requestMediaPickFromDeviceCamera( [ mediaType ], ( mediaId, mediaUrl ) => { - if ( mediaId ) { - this.props.onSelectURL( mediaId, mediaUrl ); - } - } ); - }; + onPickerPresent() { + if ( this.picker ) { + this.picker.presentPicker(); + } + } - const mediaOptions = this.getMediaOptionsItems(); + onPickerSelect( requestFunction ) { + const { allowedTypes = [], onSelect } = this.props; + requestFunction( allowedTypes, ( id, url ) => { + if ( id ) { + onSelect( { id, url } ); + } + } ); + } - let picker; + onPickerChange( value ) { + if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE ) { + this.onPickerSelect( requestMediaPickFromDeviceLibrary ); + } else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA ) { + this.onPickerSelect( requestMediaPickFromDeviceCamera ); + } else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) { + this.onPickerSelect( requestMediaPickFromMediaLibrary ); + } + } - const onPickerPresent = () => { - picker.presentPicker(); - }; + render() { + const mediaOptions = this.getMediaOptionsItems(); const getMediaOptions = () => ( picker = instance } + ref={ ( instance ) => this.picker = instance } options={ mediaOptions } - onChange={ ( value ) => { - if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE ) { - onMediaUploadButtonPressed(); - } else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA ) { - onMediaCaptureButtonPressed(); - } else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) { - onMediaLibraryButtonPressed(); - } - } } + onChange={ this.onPickerChange } /> ); - return this.props.render( { open: onPickerPresent, getMediaOptions } ); + + return this.props.render( { open: this.onPickerPresent, getMediaOptions } ); } } diff --git a/packages/block-editor/src/components/media-upload/test/index.native.js b/packages/block-editor/src/components/media-upload/test/index.native.js index 6eca7575ac408b..d1eec5a560b7b7 100644 --- a/packages/block-editor/src/components/media-upload/test/index.native.js +++ b/packages/block-editor/src/components/media-upload/test/index.native.js @@ -29,14 +29,14 @@ const MEDIA_ID = 123; describe( 'MediaUpload component', () => { it( 'renders without crashing', () => { const wrapper = shallow( - {} } /> + {} } /> ); expect( wrapper ).toBeTruthy(); } ); it( 'opens media options picker', () => { const wrapper = shallow( - { + { return ( { getMediaOptions() } @@ -51,7 +51,7 @@ describe( 'MediaUpload component', () => { const expectOptionForMediaType = ( mediaType, expectedOption ) => { const wrapper = shallow( { return ( @@ -72,12 +72,12 @@ describe( 'MediaUpload component', () => { callback( MEDIA_ID, MEDIA_URL ); } ); - const onSelectURL = jest.fn(); + const onSelect = jest.fn(); const wrapper = shallow( { return ( @@ -87,10 +87,12 @@ describe( 'MediaUpload component', () => { } } /> ); wrapper.find( 'Picker' ).simulate( 'change', option ); + const media = { id: MEDIA_ID, url: MEDIA_URL }; + expect( requestFunction ).toHaveBeenCalledTimes( 1 ); - expect( onSelectURL ).toHaveBeenCalledTimes( 1 ); - expect( onSelectURL ).toHaveBeenCalledWith( MEDIA_ID, MEDIA_URL ); + expect( onSelect ).toHaveBeenCalledTimes( 1 ); + expect( onSelect ).toHaveBeenCalledWith( media ); }; it( 'can select media from device library', () => { diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index a21d4bb72830f5..2d059b04c5ca41 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -84,9 +84,9 @@ class ImageEdit extends React.Component { if ( attributes.id && attributes.url && ! isURL( attributes.url ) ) { if ( attributes.url.indexOf( 'file:' ) === 0 ) { - requestMediaImport( attributes.url, ( mediaId, mediaUri ) => { - if ( mediaUri ) { - setAttributes( { url: mediaUri, id: mediaId } ); + requestMediaImport( attributes.url, ( id, url ) => { + if ( url ) { + setAttributes( { id, url } ); } } ); } @@ -178,9 +178,9 @@ class ImageEdit extends React.Component { } ); } - onSelectMediaUploadOption( mediaId, mediaUrl ) { + onSelectMediaUploadOption( { id, url } ) { const { setAttributes } = this.props; - setAttributes( { url: mediaUrl, id: mediaId } ); + setAttributes( { id, url } ); } onFocusCaption() { @@ -265,8 +265,8 @@ class ImageEdit extends React.Component { return ( @@ -363,8 +363,8 @@ class ImageEdit extends React.Component { ); return ( - { return getImageComponent( open, getMediaOptions ); } } diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index 9d004832d37f69..4b803ab9d97a95 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/packages/block-library/src/video/edit.native.js @@ -136,9 +136,9 @@ class VideoEdit extends React.Component { this.setState( { isUploadInProgress: false } ); } - onSelectMediaUploadOption( mediaId, mediaUrl ) { + onSelectMediaUploadOption( { id, url } ) { const { setAttributes } = this.props; - setAttributes( { id: mediaId, src: mediaUrl } ); + setAttributes( { id, src: url } ); } onVideoContanerLayout( event ) { @@ -165,8 +165,8 @@ class VideoEdit extends React.Component { const { videoContainerHeight } = this.state; const toolbarEditButton = ( - { return ( @@ -186,8 +186,8 @@ class VideoEdit extends React.Component { return (