Skip to content

Commit

Permalink
Mobile: Implemented media options sheet (#13656)
Browse files Browse the repository at this point in the history
* Implemented media options sheet
  • Loading branch information
marecar3 authored Feb 14, 2019
1 parent baf733c commit b514fb6
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 52 deletions.
94 changes: 67 additions & 27 deletions packages/block-library/src/image/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
BlockControls,
InspectorControls,
BottomSheet,
Picker,
} from '@wordpress/editor';
import { __ } from '@wordpress/i18n';
import { isURL } from '@wordpress/url';
Expand All @@ -43,6 +44,10 @@ const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
const MEDIA_UPLOAD_STATE_FAILED = 3;
const MEDIA_UPLOAD_STATE_RESET = 4;

const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE = 'choose_from_device';
const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_PHOTO = 'take_photo';
const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY = 'wordpress_media_library';

const LINK_DESTINATION_CUSTOM = 'custom';
const LINK_DESTINATION_NONE = 'none';

Expand Down Expand Up @@ -173,6 +178,14 @@ class ImageEdit extends React.Component {
} );
}

getMediaOptionsItems() {
return [
{ icon: 'wordpress-alt', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE, label: __( 'Choose from device' ) },
{ icon: 'camera', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_PHOTO, label: __( 'Take a Photo' ) },
{ icon: 'format-image', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY, label: __( 'WordPress Media Library' ) },
];
}

render() {
const { attributes, isSelected, setAttributes } = this.props;
const { url, caption, height, width, alt, href } = attributes;
Expand All @@ -185,33 +198,23 @@ class ImageEdit extends React.Component {
} );
};

if ( ! url ) {
const onMediaUploadButtonPressed = () => {
requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
if ( mediaUri ) {
this.addMediaUploadListener( );
setAttributes( { url: mediaUri, id: mediaId } );
}
} );
};

const onMediaCaptureButtonPressed = () => {
requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
if ( mediaUri ) {
this.addMediaUploadListener( );
setAttributes( { url: mediaUri, id: mediaId } );
}
} );
};
const onMediaUploadButtonPressed = () => {
requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
if ( mediaUri ) {
this.addMediaUploadListener( );
setAttributes( { url: mediaUri, id: mediaId } );
}
} );
};

return (
<MediaPlaceholder
onUploadMediaPressed={ onMediaUploadButtonPressed }
onMediaLibraryPressed={ onMediaLibraryButtonPressed }
onCapturePhotoPressed={ onMediaCaptureButtonPressed }
/>
);
}
const onMediaCaptureButtonPressed = () => {
requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
if ( mediaUri ) {
this.addMediaUploadListener( );
setAttributes( { url: mediaUri, id: mediaId } );
}
} );
};

const onImageSettingsButtonPressed = () => {
this.setState( { showSettings: true } );
Expand All @@ -221,12 +224,18 @@ class ImageEdit extends React.Component {
this.setState( { showSettings: false } );
};

let picker;

const onMediaOptionsButtonPressed = () => {
picker.presentPicker();
};

const toolbarEditButton = (
<Toolbar>
<ToolbarButton
label={ __( 'Edit image' ) }
icon="edit"
onClick={ onMediaLibraryButtonPressed }
onClick={ onMediaOptionsButtonPressed }
/>
</Toolbar>
);
Expand Down Expand Up @@ -262,6 +271,36 @@ class ImageEdit extends React.Component {
</BottomSheet>
);

const mediaOptions = this.getMediaOptionsItems();

const getMediaOptions = () => (
<Picker
hideCancelButton={ true }
ref={ ( instance ) => 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_PHOTO ) {
onMediaCaptureButtonPressed();
} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) {
onMediaLibraryButtonPressed();
}
} }
/>
);

if ( ! url ) {
return (
<View style={ { flex: 1 } } >
{ getMediaOptions() }
<MediaPlaceholder
onMediaOptionsPressed={ onMediaOptionsButtonPressed }
/>
</View>
);
}

const showSpinner = this.state.isUploadInProgress;
const opacity = this.state.isUploadInProgress ? 0.3 : 1;
const progress = this.state.progress * 100;
Expand Down Expand Up @@ -300,6 +339,7 @@ class ImageEdit extends React.Component {
return (
<View style={ { flex: 1 } } >
{ getInspectorControls() }
{ getMediaOptions() }
<ImageBackground
style={ { width: finalWidth, height: finalHeight, opacity } }
resizeMethod="scale"
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,4 @@ export { default as EditorHistoryRedo } from './editor-history/redo';
export { default as EditorHistoryUndo } from './editor-history/undo';
export { default as InspectorControls } from './inspector-controls';
export { default as BottomSheet } from './mobile/bottom-sheet';
export { default as Picker } from './mobile/picker';
25 changes: 12 additions & 13 deletions packages/editor/src/components/media-placeholder/index.native.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
/**
* External dependencies
*/
import { View, Text, Button } from 'react-native';
import { View, Text, TouchableWithoutFeedback } from 'react-native';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Dashicon } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -15,19 +16,17 @@ import styles from './styles.scss';

function MediaPlaceholder( props ) {
return (
<View style={ styles.emptyStateContainer }>
<Text style={ styles.emptyStateTitle }>
{ __( 'Image' ) }
</Text>
<Text style={ styles.emptyStateDescription }>
{ __( 'Upload a new image or select a file from your library.' ) }
</Text>
<View style={ styles.emptyStateButtonsContainer }>
<Button title={ __( 'Device Library' ) } onPress={ props.onUploadMediaPressed } />
<Button title={ __( 'Take photo' ) } onPress={ props.onCapturePhotoPressed } />
<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
<View style={ styles.emptyStateContainer }>
<Dashicon icon={ 'format-image' } />
<Text style={ styles.emptyStateTitle }>
{ __( 'Image' ) }
</Text>
<Text style={ styles.emptyStateDescription }>
{ __( 'CHOOSE IMAGE' ) }
</Text>
</View>
<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPressed } />
</View>
</TouchableWithoutFeedback>
);
}

Expand Down
21 changes: 11 additions & 10 deletions packages/editor/src/components/media-placeholder/styles.native.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
.emptyStateContainer {
flex: 1;
height: 142;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
padding-left: 12;
padding-right: 12;
Expand All @@ -9,18 +13,15 @@

.emptyStateTitle {
text-align: center;
font-weight: 600;
padding-bottom: 12;
margin-top: 8;
margin-bottom: 10;
font-size: 14;
color: #2e4453;
}

.emptyStateDescription {
text-align: center;
}

.emptyStateButtonsContainer {
margin-top: 15;
margin-bottom: 15;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
color: #0087be;
font-size: 14;
font-weight: 500;
}
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ class BottomSheet extends Component {
backdropTransitionOutTiming={ 500 }
backdropOpacity={ 0.2 }
onBackdropPress={ this.props.onClose }
onBackButtonPress={ this.props.onClose }
onSwipe={ this.props.onClose }
swipeDirection="down"
>
Expand Down
5 changes: 3 additions & 2 deletions packages/editor/src/components/mobile/picker/index.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,17 @@ export default class Picker extends Component {
<View>
{ this.props.options.map( ( option, index ) =>
<BottomSheet.Cell
icon={ option.icon }
key={ index }
label={ option.label }
onPress={ () => this.onCellPress( option.value ) }
/>
) }
<BottomSheet.Cell
{ ! this.props.hideCancelButton && <BottomSheet.Cell
label={ __( 'Cancel' ) }
onPress={ this.onClose }
drawSeparator={ false }
/>
/> }
</View>
</BottomSheet>
);
Expand Down

0 comments on commit b514fb6

Please sign in to comment.