From 53d3f937598bd307135c45873745a69815df656a Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Fri, 16 Oct 2020 14:21:32 +0200 Subject: [PATCH 1/9] Add scrollable screens to bottom-sheet --- .../block-settings/container.native.js | 1 + .../src/components/inserter/menu.native.js | 12 ++- .../src/components/inserter/style.native.scss | 4 + .../bottom-sheet-navigation/README.md | 16 +++- .../navigation-container.native.js | 10 ++- .../navigation-screen.native.js | 36 +++++++-- .../styles.native.scss | 4 + .../src/mobile/bottom-sheet/index.native.js | 30 +++++--- .../bottom-sheet/range-cell.native.scss | 1 + .../src/mobile/link-picker/index.native.js | 74 ++++++++++--------- .../link-picker/link-picker-results.native.js | 2 +- .../src/mobile/link-picker/styles.native.scss | 18 ++++- .../link-settings-screen.native.js | 56 ++++++-------- .../format-library/src/link/modal.native.js | 3 +- .../format-library/src/link/modal.native.scss | 6 ++ test/native/__mocks__/styleMock.js | 3 + 16 files changed, 184 insertions(+), 92 deletions(-) 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 a316b2c86cf5f3..a91fc582d589de 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -27,6 +27,7 @@ function BottomSheetSettings( { onClose={ closeGeneralSidebar } hideHeader contentStyle={ styles.content } + withNavigation { ...props } > diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index c05ae07048b676..5a430617a4e911 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -133,11 +133,11 @@ export class InserterMenu extends Component { isVisible={ true } onClose={ this.onClose } hideHeader - isChildrenScrollable + withNavigation > - { ( { listProps } ) => ( + { ( { listProps, safeAreaBottomInset } ) => ( item.name } renderItem={ this.renderItem } { ...listProps } + contentContainerStyle={ [ + ...listProps.contentContainerStyle, + { + paddingBottom: + safeAreaBottomInset || + styles.list.paddingBottom, + }, + ] } /> ) } diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 19db583d514864..77456c9587d1dd 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -15,3 +15,7 @@ .columnPadding { padding: $grid-unit-20; } + +.list { + padding-bottom: 20; +} diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md index 4ad61cc91f66d8..1922d4f5f8637f 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md @@ -85,4 +85,18 @@ This prop is used as a Screen name. The component that should be rendered as content. - Type: React Element -- Required: Yes \ No newline at end of file +- Required: Yes + +### isScrollable + +This prop determines whether the screen should be wrapped into the ScrollView - this is needed if the screen contains FlatList or any other list inside. Thanks to that we do not nest List into the ScrollView with the same orientation. + +- Type: `Boolean` +- Required: No + +### fullScreen + +This prop determines if the screen should have full height of device. + +- Type: `Boolean` +- Required: No \ No newline at end of file diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js index 26c66a2d89e010..afa238b144d0c9 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js @@ -15,6 +15,7 @@ import { useCallback, Children, useRef, + cloneElement, } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; @@ -108,12 +109,19 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { const screens = useMemo( () => { return Children.map( children, ( child ) => { + let screen = child; const { name, ...otherProps } = child.props; + if ( ! main ) { + screen = cloneElement( child, { + ...child.props, + isNested: true, + } ); + } return ( child } + children={ () => screen } /> ); } ); diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js index b29f18ee86f512..10f594b964f1b2 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js @@ -6,7 +6,7 @@ import { useNavigation, useFocusEffect, } from '@react-navigation/native'; -import { View } from 'react-native'; +import { View, ScrollView, TouchableHighlight } from 'react-native'; import { debounce } from 'lodash'; /** @@ -20,8 +20,14 @@ import { useRef, useCallback, useContext, useMemo } from '@wordpress/element'; * Internal dependencies */ import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context'; +import styles from './styles.scss'; -const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { +const BottomSheetNavigationScreen = ( { + children, + fullScreen, + isScrollable, + isNested, +} ) => { const navigation = useNavigation(); const heightRef = useRef( { maxHeight: 0 } ); const isFocused = useIsFocused(); @@ -29,6 +35,8 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { onHandleHardwareButtonPress, shouldEnableBottomSheetMaxHeight, setIsFullScreen, + listProps, + safeAreaBottomInset, } = useContext( BottomSheetContext ); const { setHeight } = useContext( BottomSheetNavigationContext ); @@ -69,10 +77,28 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { setHeightDebounce( height ); } }; - return useMemo( () => { - return { children }; - }, [ children, isFocused ] ); + return isScrollable || isNested ? ( + { children } + ) : ( + + + + { children } + { ! isNested && ( + + ) } + + + + ); + }, [ children, isFocused, safeAreaBottomInset, listProps ] ); }; export default BottomSheetNavigationScreen; diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss index d783d85ffd6714..ec15871537452a 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss @@ -5,3 +5,7 @@ .backgroundDark { background-color: $modal-background-dark; } + +.scrollableContent { + padding-bottom: $grid-unit-20; +} diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 0bdc06bbc1e800..5dd86326f6f5a0 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -7,9 +7,9 @@ import { Platform, PanResponder, Dimensions, - ScrollView, Keyboard, StatusBar, + ScrollView, TouchableHighlight, } from 'react-native'; import Modal from 'react-native-modal'; @@ -284,9 +284,9 @@ class BottomSheet extends Component { contentStyle = {}, getStylesFromColorScheme, onDismiss, - isChildrenScrollable, children, withHeaderSeparator = false, + withNavigation, ...rest } = this.props; const { @@ -343,8 +343,6 @@ class BottomSheet extends Component { styles.content, hideHeader && styles.emptyHeader, contentStyle, - isChildrenScrollable && this.getContentStyle(), - contentStyle, isFullScreen && { flexGrow: 1 }, ], style: listStyle, @@ -353,7 +351,7 @@ class BottomSheet extends Component { automaticallyAdjustContentInsets: false, }; - const WrapperView = isChildrenScrollable ? View : ScrollView; + const WrapperView = withNavigation ? View : ScrollView; const getHeader = () => ( <> @@ -370,7 +368,6 @@ class BottomSheet extends Component { { withHeaderSeparator && } ); - return ( @@ -438,14 +435,25 @@ class BottomSheet extends Component { .onHandleHardwareButtonPress, listProps, setIsFullScreen: this.setIsFullScreen, + safeAreaBottomInset, } } > - + { withNavigation ? ( <>{ children } - + ) : ( + + <>{ children } + + ) } - { ! isChildrenScrollable && ( - + { ! withNavigation && ( + ) } diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss index ed7ecb16ab372b..e7af8b29fe984e 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -29,6 +29,7 @@ .container { flex-direction: row; align-items: center; + flex: 1; } .cellContainerStyles { diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 7bf2aa2a26ae2c..14630cf4938472 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -2,7 +2,7 @@ * External dependencies */ import { useState } from 'react'; -import { SafeAreaView, TouchableOpacity } from 'react-native'; +import { SafeAreaView, TouchableOpacity, View } from 'react-native'; import { lowerCase, startsWith } from 'lodash'; /** @@ -81,48 +81,50 @@ export const LinkPicker = ( { ); return ( - + - - { value !== '' && ( - - - + + + { value !== '' && ( + + + + ) } + + { !! value && ( + ) } - - { !! value && ( - - ) } + ); }; diff --git a/packages/components/src/mobile/link-picker/link-picker-results.native.js b/packages/components/src/mobile/link-picker/link-picker-results.native.js index ea25f0fb6778a2..83f1ccd92e7876 100644 --- a/packages/components/src/mobile/link-picker/link-picker-results.native.js +++ b/packages/components/src/mobile/link-picker/link-picker-results.native.js @@ -116,7 +116,7 @@ export default function LinkPickerResults( { { ...listProps } contentContainerStyle={ [ ...listProps.contentContainerStyle, - { paddingBottom: 0 }, + styles.list, ] } /> ) } diff --git a/packages/components/src/mobile/link-picker/styles.native.scss b/packages/components/src/mobile/link-picker/styles.native.scss index 5ff8542f229148..867c2d8eb6ceda 100644 --- a/packages/components/src/mobile/link-picker/styles.native.scss +++ b/packages/components/src/mobile/link-picker/styles.native.scss @@ -1,8 +1,6 @@ .omniCell { border-bottom-width: 1px; border-bottom-color: $light-gray-400; - padding-left: 16px; - padding-right: 16px; } .omniCellDark { @@ -29,3 +27,19 @@ .iconDark { color: $dark-tertiary; } + +.contentContainer { + padding-left: $grid-unit-20; + padding-right: $grid-unit-20; + flex: 1; +} + +.safeArea { + height: 100%; +} + +.list { + padding-left: 0; + padding-right: 0; + padding-bottom: $grid-unit-20; +} diff --git a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js index 569675a28176ab..b69d347e065c1f 100644 --- a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js +++ b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js @@ -3,7 +3,6 @@ */ import React from 'react'; import { useNavigation, useRoute } from '@react-navigation/native'; -import { View } from 'react-native'; /** * WordPress dependencies */ @@ -140,37 +139,30 @@ const LinkSettingsScreen = ( { return useMemo( () => { return ( <> - - - - - - - + + + ); diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index fe9261933c7ae2..278e75b386f06d 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -19,10 +19,10 @@ const ModalLinkUI = ( { isVisible, ...restProps } ) => { return useMemo( () => { return ( @@ -30,6 +30,7 @@ const ModalLinkUI = ( { isVisible, ...restProps } ) => { diff --git a/packages/format-library/src/link/modal.native.scss b/packages/format-library/src/link/modal.native.scss index 3462a913be7ff6..be63cf5ffbe821 100644 --- a/packages/format-library/src/link/modal.native.scss +++ b/packages/format-library/src/link/modal.native.scss @@ -8,3 +8,9 @@ padding-right: $block-edge-to-content; padding-top: $block-edge-to-content/2; } + +.content { + padding-left: $grid-unit-20; + padding-right: $grid-unit-20; + padding-bottom: 0; +} diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index 55fa4dd0a954c9..de672610c66eb0 100644 --- a/test/native/__mocks__/styleMock.js +++ b/test/native/__mocks__/styleMock.js @@ -93,4 +93,7 @@ module.exports = { defaultBlock: { marginTop: 16, }, + scrollableContent: { + paddingBottom: 20, + }, }; From e1d7d7d242321497cf84d913ae13a47bed6c4e60 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 20 Oct 2020 14:42:22 +0200 Subject: [PATCH 2/9] rename withNavigation to hasNavigation --- .../src/components/inserter/menu.native.js | 2 +- .../bottom-sheet/bottom-sheet-navigation/README.md | 2 +- .../components/src/mobile/bottom-sheet/index.native.js | 10 +++++----- packages/format-library/src/link/modal.native.js | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 5a430617a4e911..4f30ae4c69f353 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -133,7 +133,7 @@ export class InserterMenu extends Component { isVisible={ true } onClose={ this.onClose } hideHeader - withNavigation + hasNavigation > diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md index 1922d4f5f8637f..0ac10136284dc2 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md @@ -22,7 +22,7 @@ import { BottomSheet } from '@wordpress/components'; const BottomSheetWithNavigation = () => ( -  +            ( <> @@ -418,7 +418,7 @@ class BottomSheet extends Component { ) } { ! hideHeader && getHeader() } @@ -438,7 +438,7 @@ class BottomSheet extends Component { safeAreaBottomInset, } } > - { withNavigation ? ( + { hasNavigation ? ( <>{ children } ) : ( @@ -446,7 +446,7 @@ class BottomSheet extends Component { ) } - { ! withNavigation && ( + { ! hasNavigation && ( { isVisible={ isVisible } hideHeader onClose={ restProps.onClose } - withNavigation + hasNavigation > From c1ad703cde6cf46a31566753ccdc67e9e0ccf4a2 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 20 Oct 2020 13:41:37 +0200 Subject: [PATCH 3/9] fix slider spacing --- .../components/src/mobile/bottom-sheet/range-cell.native.js | 1 + .../components/src/mobile/bottom-sheet/range-cell.native.scss | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 6f082edb37ded6..303d6ad399bc1e 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -217,6 +217,7 @@ class BottomSheetRangeCell extends Component { activeOpacity={ 1 } accessible={ accessible } onPress={ this.onCellPress } + valueStyle={ styles.valueStyle } accessibilityLabel={ accessibilityLabel } accessibilityHint={ /* translators: accessibility text (hint for focusing a slider) */ diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss index e7af8b29fe984e..24bdf2351bbd5e 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -47,3 +47,7 @@ padding-top: 8px; padding-bottom: 8px; } + +.valueStyle { + height: 0; +} From 44c4990d2bcc3bd46883d7311c18d742e9e3abef Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 20 Oct 2020 15:11:22 +0200 Subject: [PATCH 4/9] add hasNavigation to the container.native --- .../src/components/block-settings/container.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a91fc582d589de..244aa2604e8f27 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -27,7 +27,7 @@ function BottomSheetSettings( { onClose={ closeGeneralSidebar } hideHeader contentStyle={ styles.content } - withNavigation + hasNavigation { ...props } > From d06c3e5d312998ade1b4c2ea13b3329131ea23f9 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 16 Oct 2020 15:16:32 +0200 Subject: [PATCH 5/9] Add navigation to link settings and add link picker screen --- .../block-settings/container.native.js | 16 ++++++- .../block-library/src/button/edit.native.js | 4 +- .../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 | 42 +++++++----------- .../link-settings-navigation.native.js | 44 +++++++++++++++++++ .../link-settings-screen.native.js | 36 +++++++++++++++ 9 files changed, 163 insertions(+), 33 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 244aa2604e8f27..df043fe3f3bee3 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 508a36a8130575..d437a8b12d28bb 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,7 +242,7 @@ 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 b809080b4a29fa..e10db29379399b 100644 --- a/packages/components/src/mobile/link-settings/index.native.js +++ b/packages/components/src/mobile/link-settings/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Platform, Clipboard } from 'react-native'; +import { Clipboard } from 'react-native'; /** * WordPress dependencies */ @@ -9,7 +9,7 @@ import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { isURL, prependHTTP } from '@wordpress/url'; import { useEffect, useState, useRef } from '@wordpress/element'; -import { link, external } from '@wordpress/icons'; +import { external } from '@wordpress/icons'; /** * Internal dependencies @@ -80,6 +80,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( '' ); @@ -115,12 +117,14 @@ function LinkSettings( { } }, [ editorSidebarOpened, isVisible ] ); - function onChangeURL( value ) { - if ( ! value && onEmptyURL ) { + useEffect( () => { + if ( ! urlValue && onEmptyURL ) { onEmptyURL(); } - setUrlInputValue( value ); - } + setAttributes( { + url: prependHTTP( urlValue ), + } ); + }, [ urlValue ] ); function onChangeLabel( value ) { setLabelInputValue( value ); @@ -177,20 +181,10 @@ function LinkSettings( { return ( <> { options.url && ( - ) } { options.linkLabel && ( @@ -231,11 +225,7 @@ function LinkSettings( { } return ( - + <> { getSettings() } @@ -248,7 +238,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 00000000000000..a71b53bf9a2fad --- /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 00000000000000..49f240c2074d02 --- /dev/null +++ b/packages/components/src/mobile/link-settings/link-settings-screen.native.js @@ -0,0 +1,36 @@ +/** + * 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; From e4c51a31b04109c213db274715f1fbcaea928121 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 20 Oct 2020 15:12:47 +0200 Subject: [PATCH 6/9] change withNavigation to the hasNavigation --- .../src/mobile/link-settings/link-settings-navigation.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index a71b53bf9a2fad..1ca459f5cb5023 100644 --- a/packages/components/src/mobile/link-settings/link-settings-navigation.native.js +++ b/packages/components/src/mobile/link-settings/link-settings-navigation.native.js @@ -19,7 +19,7 @@ function LinkSettingsNavigation( props ) { isVisible={ props.isVisible } onClose={ props.onClose } hideHeader - withNavigation + hasNavigation > Date: Mon, 2 Nov 2020 14:02:34 +0100 Subject: [PATCH 7/9] Add "hasPicker" prop to the LinkSettings to determine if open link picker --- .../block-library/src/button/edit.native.js | 1 + .../src/mobile/link-settings/index.native.js | 55 ++++++++++++++----- .../link-settings-screen.native.js | 4 +- 3 files changed, 46 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index d437a8b12d28bb..79e7f76363b409 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -248,6 +248,7 @@ class ButtonEdit extends Component { onClose={ this.dismissSheet } setAttributes={ setAttributes } withBottomSheet={ ! isCompatibleWithSettings } + hasPicker actions={ actions } options={ options } showIcon={ ! isCompatibleWithSettings } diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js index e10db29379399b..45b77916ad7a51 100644 --- a/packages/components/src/mobile/link-settings/index.native.js +++ b/packages/components/src/mobile/link-settings/index.native.js @@ -1,23 +1,21 @@ /** * External dependencies */ -import { Clipboard } from 'react-native'; +import { Clipboard, Platform } from 'react-native'; /** * WordPress dependencies */ import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { isURL, prependHTTP } from '@wordpress/url'; -import { useEffect, useState, useRef } from '@wordpress/element'; -import { external } from '@wordpress/icons'; +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'; @@ -89,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; } ); @@ -163,6 +168,13 @@ function LinkSettings( { setLinkRelInputValue( value ); } + function onChangeURL( value ) { + if ( ! value && onEmptyURL ) { + onEmptyURL(); + } + setUrlInputValue( value ); + } + async function getURLFromClipboard() { const clipboardText = await Clipboard.getString(); @@ -180,13 +192,30 @@ function LinkSettings( { function getSettings() { return ( <> - { options.url && ( - - ) } + { options.url && + ( onLinkCellPressed ? ( + + ) : ( + + ) ) } { options.linkLabel && ( { return useMemo( () => { return ( From 7d2b74dfb2184cf574bc175bcd9420d4179ff550 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Mon, 2 Nov 2020 14:30:04 +0100 Subject: [PATCH 8/9] refactor to less changes --- .../src/mobile/link-settings/index.native.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js index 45b77916ad7a51..243547500fb127 100644 --- a/packages/components/src/mobile/link-settings/index.native.js +++ b/packages/components/src/mobile/link-settings/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Clipboard, Platform } from 'react-native'; +import { Platform, Clipboard } from 'react-native'; /** * WordPress dependencies */ @@ -131,6 +131,13 @@ function LinkSettings( { } ); }, [ urlValue ] ); + function onChangeURL( value ) { + if ( ! value && onEmptyURL ) { + onEmptyURL(); + } + setUrlInputValue( value ); + } + function onChangeLabel( value ) { setLabelInputValue( value ); } @@ -168,13 +175,6 @@ function LinkSettings( { setLinkRelInputValue( value ); } - function onChangeURL( value ) { - if ( ! value && onEmptyURL ) { - onEmptyURL(); - } - setUrlInputValue( value ); - } - async function getURLFromClipboard() { const clipboardText = await Clipboard.getString(); From 3cdda64288fa969eb12968090a69d240203fcd81 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 3 Nov 2020 14:44:17 +0100 Subject: [PATCH 9/9] Add changelog note --- packages/react-native-editor/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 0b90cdb435b479..151ea5e7ac74e5 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,6 +11,8 @@ For each user feature we should also add a importance categorization label to i ## Unreleased +* [**] Button block - Add link picker to the block settings + ## 1.39.1 * [*] Heading block - Disable full-width/wide alignment [#26308]