Skip to content

Commit

Permalink
[RNMobile] Simplify bridge requestMediaPick methods (#18303)
Browse files Browse the repository at this point in the history 
* Merge bridge `Requeste media pick` methods into a single one, adding a source param.
This helps to handle the "others" option in the same way than any other option, plus adding the filters parameter.
This filter parameters is needed for the iOS "Other Apps" media source option.
This is also one step forward to declare all media source options from the client app.

* Move device sources to native bridge component

* Fix typo on media source name
  • Loading branch information
@etoledom
etoledom committed Nov 14, 2019
1 parent e9f5566 commit 639d3c4
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 45 deletions.
40 changes: 8 additions & 32 deletions packages/block-editor/src/components/media-upload/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@
*/
import React from 'react';
import {
requestMediaPickFromMediaLibrary,
requestMediaPickFromDeviceLibrary,
requestMediaPickFromDeviceCamera,
getOtherMediaOptions,
requestOtherMediaPickFrom,
requestMediaPicker,
mediaSources,
} from 'react-native-gutenberg-bridge';

/**
Expand All @@ -19,10 +17,6 @@ import { Picker } from '@wordpress/components';
export const MEDIA_TYPE_IMAGE = 'image';
export const MEDIA_TYPE_VIDEO = 'video';

export const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE = 'choose_from_device';
export const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA = 'take_media';
export const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY = 'wordpress_media_library';

export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
Expand All @@ -31,7 +25,6 @@ export class MediaUpload extends React.Component {
constructor( props ) {
super( props );
this.onPickerPresent = this.onPickerPresent.bind( this );
this.onPickerChange = this.onPickerChange.bind( this );
this.onPickerSelect = this.onPickerSelect.bind( this );

this.state = {
Expand Down Expand Up @@ -70,9 +63,9 @@ export class MediaUpload extends React.Component {

getMediaOptionsItems() {
return [
{ icon: this.getChooseFromDeviceIcon(), value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE, label: __( 'Choose from device' ) },
{ icon: this.getTakeMediaIcon(), value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA, label: this.getTakeMediaLabel() },
{ icon: this.getWordPressLibraryIcon(), value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY, label: __( 'WordPress Media Library' ) },
{ icon: this.getChooseFromDeviceIcon(), value: mediaSources.deviceLibrary, label: __( 'Choose from device' ) },
{ icon: this.getTakeMediaIcon(), value: mediaSources.deviceCamera, label: this.getTakeMediaLabel() },
{ icon: this.getWordPressLibraryIcon(), value: mediaSources.siteMediaLibrary, label: __( 'WordPress Media Library' ) },
];
}

Expand Down Expand Up @@ -104,32 +97,15 @@ export class MediaUpload extends React.Component {
}
}

onPickerSelect( requestFunction ) {
onPickerSelect( source ) {
const { allowedTypes = [], onSelect, multiple = false } = this.props;
requestFunction( allowedTypes, multiple, ( media ) => {
requestMediaPicker( source, allowedTypes, multiple, ( media ) => {
if ( ( multiple && media ) || ( media && media.id ) ) {
onSelect( media );
}
} );
}

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 );
} else {
const { onSelect, multiple = false } = this.props;
requestOtherMediaPickFrom( value, multiple, ( media ) => {
if ( ( multiple && media ) || ( media && media.id ) ) {
onSelect( media );
}
} );
}
}

render() {
let mediaOptions = this.getMediaOptionsItems();

Expand All @@ -142,7 +118,7 @@ export class MediaUpload extends React.Component {
hideCancelButton
ref={ ( instance ) => this.picker = instance }
options={ mediaOptions }
onChange={ this.onPickerChange }
onChange={ this.onPickerSelect }
/>
);

Expand Down
16 changes: 7 additions & 9 deletions packages/block-editor/src/components/media-upload/test/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
import { shallow } from 'enzyme';
import { TouchableWithoutFeedback } from 'react-native';
import {
requestMediaPickFromMediaLibrary,
requestMediaPickFromDeviceLibrary,
requestMediaPickFromDeviceCamera,
requestMediaPicker,
} from 'react-native-gutenberg-bridge';

/**
Expand Down Expand Up @@ -67,7 +65,7 @@ describe( 'MediaUpload component', () => {
} );

const expectMediaPickerForOption = ( option, allowMultiple, requestFunction ) => {
requestFunction.mockImplementation( ( mediaTypes, multiple, callback ) => {
requestFunction.mockImplementation( ( source, mediaTypes, multiple, callback ) => {
expect( mediaTypes[ 0 ] ).toEqual( MEDIA_TYPE_VIDEO );
if ( multiple ) {
callback( [ { id: MEDIA_ID, url: MEDIA_URL } ] );
Expand Down Expand Up @@ -101,22 +99,22 @@ describe( 'MediaUpload component', () => {
};

it( 'can select media from device library', () => {
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE, false, requestMediaPickFromDeviceLibrary );
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE, false, requestMediaPicker );
} );

it( 'can select media from WP media library', () => {
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY, false, requestMediaPickFromMediaLibrary );
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY, false, requestMediaPicker );
} );

it( 'can select media by capturig', () => {
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA, false, requestMediaPickFromDeviceCamera );
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA, false, requestMediaPicker );
} );

it( 'can select multiple media from device library', () => {
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE, true, requestMediaPickFromDeviceLibrary );
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE, true, requestMediaPicker );
} );

it( 'can select multiple media from WP media library', () => {
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY, true, requestMediaPickFromMediaLibrary );
expectMediaPickerForOption( MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY, true, requestMediaPicker );
} );
} );
10 changes: 6 additions & 4 deletions test/native/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ jest.mock( 'react-native-gutenberg-bridge', () => {
editorDidMount: jest.fn(),
editorDidAutosave: jest.fn(),
subscribeMediaUpload: jest.fn(),
requestMediaPickFromMediaLibrary: jest.fn(),
requestMediaPickFromDeviceLibrary: jest.fn(),
requestMediaPickFromDeviceCamera: jest.fn(),
getOtherMediaOptions: jest.fn(),
requestOtherMediaPickFrom: jest.fn(),
requestMediaPicker: jest.fn(),
mediaSources: {
deviceLibrary: 'DEVICE_MEDIA_LIBRARY',
deviceCamera: 'DEVICE_CAMERA',
siteMediaLibrary: 'SITE_MEDIA_LIBRARY',
},
};
} );

Expand Down

0 comments on commit 639d3c4

Please sign in to comment.