From d65d36e578fb11847d629c272c3da35274378003 Mon Sep 17 00:00:00 2001 From: Drapich Piotr Date: Thu, 12 Nov 2020 14:13:32 +0100 Subject: [PATCH] [RNMobile] Add navigation to link settings and add link picker screen to block settings (#26206) * fix slider spacing * add hasNavigation to the container.native * Add navigation to link settings and add link picker screen * change withNavigation to the hasNavigation * Add "hasPicker" prop to the LinkSettings to determine if open link picker * Add changelog note --- .../block-settings/container.native.js | 16 +++- .../block-library/src/button/edit.native.js | 5 +- .../src/social-link/edit.native.js | 4 +- packages/components/src/index.native.js | 3 + .../mobile/bottom-sheet/link-cell.native.js | 4 +- .../link-picker/link-picker-screen.native.js | 43 +++++++++++ .../src/mobile/link-settings/index.native.js | 73 ++++++++++++------- .../link-settings-navigation.native.js | 44 +++++++++++ .../link-settings-screen.native.js | 38 ++++++++++ packages/react-native-editor/CHANGELOG.md | 1 + 10 files changed, 197 insertions(+), 34 deletions(-) create mode 100644 packages/components/src/mobile/link-picker/link-picker-screen.native.js create mode 100644 packages/components/src/mobile/link-settings/link-settings-navigation.native.js create mode 100644 packages/components/src/mobile/link-settings/link-settings-screen.native.js diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 244aa2604e8f2..df043fe3f3bee 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { InspectorControls } from '@wordpress/block-editor'; -import { BottomSheet, ColorSettings } from '@wordpress/components'; +import { + BottomSheet, + ColorSettings, + LinkPickerScreen, +} from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; /** @@ -13,6 +17,7 @@ import styles from './container.native.scss'; export const blockSettingsScreens = { settings: 'Settings', color: 'Color', + linkPicker: 'linkPicker', }; function BottomSheetSettings( { @@ -41,6 +46,15 @@ function BottomSheetSettings( { > + + + ); diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 508a36a813057..79e7f76363b40 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -19,7 +19,7 @@ import { RangeControl, ToolbarGroup, ToolbarButton, - LinkSettings, + LinkSettingsNavigation, } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; @@ -242,12 +242,13 @@ class ButtonEdit extends Component { }; return ( - ) } - { + const navigation = useNavigation(); + const route = useRoute(); + + const onLinkPicked = ( { url, title } ) => { + navigation.navigate( returnScreenName, { + inputValue: url, + text: title, + } ); + }; + + const onCancel = () => { + navigation.goBack(); + }; + + const { inputValue } = route.params; + return useMemo( () => { + return ( + + ); + }, [ inputValue ] ); +}; + +export default LinkPickerScreen; diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js index b809080b4a29f..243547500fb12 100644 --- a/packages/components/src/mobile/link-settings/index.native.js +++ b/packages/components/src/mobile/link-settings/index.native.js @@ -8,16 +8,14 @@ import { Platform, Clipboard } from 'react-native'; import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { isURL, prependHTTP } from '@wordpress/url'; -import { useEffect, useState, useRef } from '@wordpress/element'; +import { useEffect, useState, useRef, useContext } from '@wordpress/element'; import { link, external } from '@wordpress/icons'; -/** - * Internal dependencies - */ /** * Internal dependencies */ import BottomSheet from '../bottom-sheet'; +import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context'; import PanelBody from '../../panel/body'; import TextControl from '../../text-control'; import ToggleControl from '../../toggle-control'; @@ -80,6 +78,8 @@ function LinkSettings( { editorSidebarOpened, // Specifies whether icon should be displayed next to the label showIcon, + onLinkCellPressed, + urlValue, } ) { const { url, label, linkTarget, rel } = attributes; const [ urlInputValue, setUrlInputValue ] = useState( '' ); @@ -87,6 +87,13 @@ function LinkSettings( { const [ linkRelInputValue, setLinkRelInputValue ] = useState( '' ); const prevEditorSidebarOpenedRef = useRef(); + const { onHandleClosingBottomSheet } = useContext( BottomSheetContext ); + useEffect( () => { + if ( ! onLinkCellPressed ) { + onHandleClosingBottomSheet( onCloseSettingsSheet ); + } + }, [ urlInputValue, labelInputValue, linkRelInputValue ] ); + useEffect( () => { prevEditorSidebarOpenedRef.current = editorSidebarOpened; } ); @@ -115,6 +122,15 @@ function LinkSettings( { } }, [ editorSidebarOpened, isVisible ] ); + useEffect( () => { + if ( ! urlValue && onEmptyURL ) { + onEmptyURL(); + } + setAttributes( { + url: prependHTTP( urlValue ), + } ); + }, [ urlValue ] ); + function onChangeURL( value ) { if ( ! value && onEmptyURL ) { onEmptyURL(); @@ -176,23 +192,30 @@ function LinkSettings( { function getSettings() { return ( <> - { options.url && ( - - ) } + { options.url && + ( onLinkCellPressed ? ( + + ) : ( + + ) ) } { options.linkLabel && ( + <> { getSettings() } @@ -248,7 +267,7 @@ function LinkSettings( { ) } { actions && } - + ); } diff --git a/packages/components/src/mobile/link-settings/link-settings-navigation.native.js b/packages/components/src/mobile/link-settings/link-settings-navigation.native.js new file mode 100644 index 0000000000000..1ca459f5cb502 --- /dev/null +++ b/packages/components/src/mobile/link-settings/link-settings-navigation.native.js @@ -0,0 +1,44 @@ +/** + * Internal dependencies + */ +import BottomSheet from '../bottom-sheet'; +import LinkSettingsScreen from './link-settings-screen'; +import LinkPickerScreen from '../link-picker/link-picker-screen'; + +const linkSettingsScreens = { + settings: 'LinkSettingsScreen', + linkPicker: 'linkPicker', +}; + +function LinkSettingsNavigation( props ) { + if ( ! props.withBottomSheet ) { + return ; + } + return ( + + + + + + + + + + + ); +} + +export default LinkSettingsNavigation; diff --git a/packages/components/src/mobile/link-settings/link-settings-screen.native.js b/packages/components/src/mobile/link-settings/link-settings-screen.native.js new file mode 100644 index 0000000000000..c66892c9926c4 --- /dev/null +++ b/packages/components/src/mobile/link-settings/link-settings-screen.native.js @@ -0,0 +1,38 @@ +/** + * External dependencies + */ +import React from 'react'; +import { useNavigation, useRoute } from '@react-navigation/native'; +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; +/** + * Internal dependencies + */ +import LinkSettings from './'; + +const LinkSettingsScreen = ( props ) => { + const navigation = useNavigation(); + const route = useRoute(); + const { url = '' } = props.attributes || {}; + const { inputValue = url } = route.params || {}; + + const onLinkCellPressed = () => { + navigation.navigate( 'linkPicker', { inputValue } ); + }; + + return useMemo( () => { + return ( + + ); + }, [ props, inputValue, navigation, route ] ); +}; + +export default LinkSettingsScreen; diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index e1e28cd13117f..5bd2a2c4d4360 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased * [***] Adding support for selecting different unit of value in Cover and Columns blocks +* [**] Button block - Add link picker to the block settings ## 1.41.0