From 07b01f58cecbd18c35c6e450d8f0290e1d18c827 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Thu, 13 May 2021 21:24:15 -0500 Subject: [PATCH 1/4] WIP --- .../add-from-url-bottom-sheet.native.js | 59 +++++++++++++ .../components/media-upload/index.native.js | 83 ++++++++++++------- 2 files changed, 113 insertions(+), 29 deletions(-) create mode 100644 packages/block-editor/src/components/media-upload/add-from-url-bottom-sheet.native.js diff --git a/packages/block-editor/src/components/media-upload/add-from-url-bottom-sheet.native.js b/packages/block-editor/src/components/media-upload/add-from-url-bottom-sheet.native.js new file mode 100644 index 0000000000000..bffe1cba1e6da --- /dev/null +++ b/packages/block-editor/src/components/media-upload/add-from-url-bottom-sheet.native.js @@ -0,0 +1,59 @@ +/** + * External dependencies + */ +import { isEmpty } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { LinkSettingsNavigation } from '@wordpress/components'; +import { useState } from '@wordpress/element'; +import { isURL } from '@wordpress/url'; +import { useDispatch } from '@wordpress/data'; +import { store as noticesStore } from '@wordpress/notices'; + +const linkSettingsOptions = { + url: { + label: __( 'Insert from URL' ), + placeholder: __( 'Add link' ), + autoFocus: true, + autoFill: true, + }, +}; + +const AddFromUrlBottomSheet = ( { value, onClose, isVisible } ) => { + const [ url, setUrl ] = useState( value ); + const { createErrorNotice } = useDispatch( noticesStore ); + + function onCloseWithUrl() { + if ( ! isEmpty( url ) ) { + if ( isURL( url ) ) { + onClose( { url } ); + console.log(url); + + } else { + createErrorNotice( + __( 'Invalid URL. Please enter a valid URL.' ) + ); + onClose( {} ); + } + } else { + onClose( {} ); + } + } + + return ( + setUrl( attributes.url ) } + onClose={ onCloseWithUrl } + options={ linkSettingsOptions } + withBottomSheet + showIcon + /> + ); +}; + +export default AddFromUrlBottomSheet; diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index 5871d0e9a31c0..f088cb85ea388 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -1,11 +1,13 @@ +/** + * Internal dependencies + */ +import AddFromUrlBottomSheet from './add-from-url-bottom-sheet'; /** * External dependencies */ -import { Platform } from 'react-native'; +import { View, Platform } from 'react-native'; -import { delay } from 'lodash'; - -import prompt from 'react-native-prompt-android'; +import { delay, isEmpty } from 'lodash'; /** * WordPress dependencies @@ -46,6 +48,7 @@ export class MediaUpload extends Component { this.getAllSources = this.getAllSources.bind( this ); this.state = { otherMediaOptions: [], + isAddFromUrlBottomsheetVisible: false, }; } @@ -186,25 +189,29 @@ export class MediaUpload extends Component { } = this.props; if ( value === 'URL' ) { - prompt( - __( 'Type a URL' ), // title - undefined, // message - [ - { - text: __( 'Cancel' ), - style: 'cancel', - }, - { - text: __( 'Apply' ), - onPress: ( url ) => onSelectURL( url ), - }, - ], // buttons - 'plain-text', // type - undefined, // defaultValue - 'url' // keyboardType - ); + this.setState( { isAddFromUrlBottomsheetVisible: true } ); return; } + // if ( value === 'URL' ) { + // prompt( + // __( 'Type a URL' ), // title + // undefined, // message + // [ + // { + // text: __( 'Cancel' ), + // style: 'cancel', + // }, + // { + // text: __( 'Apply' ), + // onPress: ( url ) => onSelectURL( url ), + // }, + // ], // buttons + // 'plain-text', // type + // undefined, // defaultValue + // 'url' // keyboardType + // ); + // return; + // } const mediaSource = this.getAllSources() .filter( ( source ) => source.value === value ) @@ -221,7 +228,12 @@ export class MediaUpload extends Component { } render() { - const { allowedTypes = [], isReplacingMedia, multiple } = this.props; + const { + allowedTypes = [], + isReplacingMedia, + multiple, + onSelectURL, + } = this.props; const isOneType = allowedTypes.length === 1; const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE ); const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO ); @@ -270,13 +282,26 @@ export class MediaUpload extends Component { } const getMediaOptions = () => ( - ( this.picker = instance ) } - options={ this.getMediaOptionsItems() } - onChange={ this.onPickerSelect } - /> + + { this.state.isAddFromUrlBottomsheetVisible && ( + { + this.setState( { + isAddFromUrlBottomsheetVisible: false, + } ); + onSelectURL(url); + } } + isVisible={ this.state.isAddFromUrlBottomsheetVisible } + /> + ) } + ( this.picker = instance ) } + options={ this.getMediaOptionsItems() } + onChange={ this.onPickerSelect } + /> + ); return this.props.render( { From 8820ff9fec93d74b3aa11b43a9a8e9c187c3689d Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Fri, 14 May 2021 18:09:00 -0500 Subject: [PATCH 2/4] Removed isEmpty check since it doesn't differentiate error and empty --- .../add-from-url-bottom-sheet.native.js | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/media-upload/add-from-url-bottom-sheet.native.js b/packages/block-editor/src/components/media-upload/add-from-url-bottom-sheet.native.js index bffe1cba1e6da..6ea79c0b426a7 100644 --- a/packages/block-editor/src/components/media-upload/add-from-url-bottom-sheet.native.js +++ b/packages/block-editor/src/components/media-upload/add-from-url-bottom-sheet.native.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { isEmpty } from 'lodash'; - /** * WordPress dependencies */ @@ -27,18 +22,10 @@ const AddFromUrlBottomSheet = ( { value, onClose, isVisible } ) => { const { createErrorNotice } = useDispatch( noticesStore ); function onCloseWithUrl() { - if ( ! isEmpty( url ) ) { - if ( isURL( url ) ) { - onClose( { url } ); - console.log(url); - - } else { - createErrorNotice( - __( 'Invalid URL. Please enter a valid URL.' ) - ); - onClose( {} ); - } + if ( isURL( url ) ) { + onClose( { url } ); } else { + createErrorNotice( __( 'Invalid URL. Please enter a valid URL.' ) ); onClose( {} ); } } From 84163164654fcdce6e775ec48518a4cb26387e56 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Fri, 14 May 2021 18:10:45 -0500 Subject: [PATCH 3/4] formatted media-upload changes and removed unused code from prompt --- .../components/media-upload/index.native.js | 33 +++---------------- 1 file changed, 4 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index f088cb85ea388..8321d498e18e5 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -7,7 +7,7 @@ import AddFromUrlBottomSheet from './add-from-url-bottom-sheet'; */ import { View, Platform } from 'react-native'; -import { delay, isEmpty } from 'lodash'; +import { delay } from 'lodash'; /** * WordPress dependencies @@ -181,37 +181,12 @@ export class MediaUpload extends Component { } onPickerSelect( value ) { - const { - allowedTypes = [], - onSelect, - onSelectURL, - multiple = false, - } = this.props; + const { allowedTypes = [], onSelect, multiple = false } = this.props; if ( value === 'URL' ) { this.setState( { isAddFromUrlBottomsheetVisible: true } ); return; } - // if ( value === 'URL' ) { - // prompt( - // __( 'Type a URL' ), // title - // undefined, // message - // [ - // { - // text: __( 'Cancel' ), - // style: 'cancel', - // }, - // { - // text: __( 'Apply' ), - // onPress: ( url ) => onSelectURL( url ), - // }, - // ], // buttons - // 'plain-text', // type - // undefined, // defaultValue - // 'url' // keyboardType - // ); - // return; - // } const mediaSource = this.getAllSources() .filter( ( source ) => source.value === value ) @@ -285,11 +260,11 @@ export class MediaUpload extends Component { { this.state.isAddFromUrlBottomsheetVisible && ( { + onClose={ ( { url } ) => { this.setState( { isAddFromUrlBottomsheetVisible: false, } ); - onSelectURL(url); + onSelectURL( url ); } } isVisible={ this.state.isAddFromUrlBottomsheetVisible } /> From fa6841a2bc1048c65534a15a6d99e54d8220b355 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Fri, 14 May 2021 18:12:24 -0500 Subject: [PATCH 4/4] moved error notice logic to the bottom sheet component. --- packages/block-library/src/audio/edit.native.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 9311e80f9fc82..912c5e722aa8c 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -31,7 +31,6 @@ import { audio as icon, replace } from '@wordpress/icons'; import { useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; -import { isURL } from '@wordpress/url'; /** * Internal dependencies @@ -78,11 +77,7 @@ function AudioEdit( { function onSelectURL( newSrc ) { if ( newSrc !== src ) { - if ( isURL( newSrc ) ) { - setAttributes( { src: newSrc, id: undefined } ); - } else { - createErrorNotice( __( 'Invalid URL. Audio file not found.' ) ); - } + setAttributes( { src: newSrc, id: undefined } ); } }