From 14802b96bc776efb9353d301f5dc642fb2babf18 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 22 May 2020 21:27:48 +1000 Subject: [PATCH 01/83] Implement link cell component for RN link picker experiment --- .../src/mobile/bottom-sheet/index.native.js | 2 + .../bottom-sheet/link-cell/index.native.js | 41 +++++++++++++++++++ .../link-cell/link-picker-results.native.js | 40 ++++++++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 packages/components/src/mobile/bottom-sheet/link-cell/index.native.js create mode 100644 packages/components/src/mobile/bottom-sheet/link-cell/link-picker-results.native.js diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index c1e25671e0c61..d8527ad7c3320 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -34,6 +34,7 @@ import PickerCell from './picker-cell'; import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import ColorCell from './color-cell'; +import LinkCell from './link-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; import { BottomSheetProvider } from './bottom-sheet-context'; @@ -424,5 +425,6 @@ ThemedBottomSheet.PickerCell = PickerCell; ThemedBottomSheet.SwitchCell = SwitchCell; ThemedBottomSheet.RangeCell = RangeCell; ThemedBottomSheet.ColorCell = ColorCell; +ThemedBottomSheet.LinkCell = LinkCell; export default ThemedBottomSheet; diff --git a/packages/components/src/mobile/bottom-sheet/link-cell/index.native.js b/packages/components/src/mobile/bottom-sheet/link-cell/index.native.js new file mode 100644 index 0000000000000..fe1e0311679ce --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/link-cell/index.native.js @@ -0,0 +1,41 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Platform } from '@wordpress/element'; +import { link } from '@wordpress/icons'; +import { withPreferredColorScheme } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import Cell from '../cell'; +import LinkPickerResults from './link-picker-results'; + +function LinkCell( { value, onChangeValue, onSubmit, onLinkPicked } ) { + return ( + <> + + { !! value && ( + + ) } + + ); +} + +export default withPreferredColorScheme( LinkCell ); diff --git a/packages/components/src/mobile/bottom-sheet/link-cell/link-picker-results.native.js b/packages/components/src/mobile/bottom-sheet/link-cell/link-picker-results.native.js new file mode 100644 index 0000000000000..8b0c9c3c3f1d0 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/link-cell/link-picker-results.native.js @@ -0,0 +1,40 @@ +/** + * External dependencies + */ +import { FlatList } from 'react-native'; +import { requestLinks } from 'react-native-gutenberg-bridge'; + +/** + * WordPress dependencies + */ +import { useState, useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import Cell from '../cell'; + +export default function LinkPickerResults( { query, onLinkPicked } ) { + const [ links, setLinks ] = useState( [] ); + + useEffect( () => { + requestLinks( query, ( newLinks ) => { + setLinks( newLinks ); + } ); + }, [ query ] ); + + return ( + ( + onLinkPicked( { url, title } ) } + /> + ) } + keyExtractor={ ( { url } ) => url } + /> + ); +} From 8ec1a9926adff519f2f480dc66d81fd32e45aa21 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 22 May 2020 21:28:38 +1000 Subject: [PATCH 02/83] Use link cell in link modal UI --- .../format-library/src/link/modal.native.js | 29 +++++++------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index f2edc774da53f..e31c91c94d48d 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -2,7 +2,6 @@ * External dependencies */ import React from 'react'; -import { Platform } from 'react-native'; /** * WordPress dependencies @@ -19,7 +18,7 @@ import { getTextContent, slice, } from '@wordpress/rich-text'; -import { external, link, textColor } from '@wordpress/icons'; +import { external, textColor } from '@wordpress/icons'; /** * Internal dependencies @@ -40,6 +39,7 @@ class ModalLinkUI extends Component { ); this.removeLink = this.removeLink.bind( this ); this.onDismiss = this.onDismiss.bind( this ); + this.onLinkPicked = this.onLinkPicked.bind( this ); this.state = { inputValue: '', @@ -73,6 +73,10 @@ class ModalLinkUI extends Component { this.setState( { text } ); } + onLinkPicked( { url: inputValue, title: text } ) { + this.setState( { inputValue, text } ); + } + onChangeOpensInNewWindow( opensInNewWindow ) { this.setState( { opensInNewWindow } ); } @@ -154,22 +158,11 @@ class ModalLinkUI extends Component { onClose={ this.onDismiss } hideHeader > - { - /* eslint-disable jsx-a11y/no-autofocus */ - - /* eslint-enable jsx-a11y/no-autofocus */ - } + Date: Thu, 25 Jun 2020 15:03:02 +1000 Subject: [PATCH 03/83] Add link cell component --- .../mobile/bottom-sheet/link-cell.native.js | 26 ++++++++++++ .../bottom-sheet/link-cell/index.native.js | 41 ------------------- .../mobile/bottom-sheet/styles.native.scss | 5 +++ 3 files changed, 31 insertions(+), 41 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/link-cell.native.js delete mode 100644 packages/components/src/mobile/bottom-sheet/link-cell/index.native.js diff --git a/packages/components/src/mobile/bottom-sheet/link-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-cell.native.js new file mode 100644 index 0000000000000..bb269b2245b4e --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/link-cell.native.js @@ -0,0 +1,26 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { link } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import Cell from './cell'; +import styles from './styles'; + +const { placeholderColor } = styles; + +export default function LinkCell( { value, onPress } ) { + return ( + + ); +} diff --git a/packages/components/src/mobile/bottom-sheet/link-cell/index.native.js b/packages/components/src/mobile/bottom-sheet/link-cell/index.native.js deleted file mode 100644 index fe1e0311679ce..0000000000000 --- a/packages/components/src/mobile/bottom-sheet/link-cell/index.native.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Platform } from '@wordpress/element'; -import { link } from '@wordpress/icons'; -import { withPreferredColorScheme } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import Cell from '../cell'; -import LinkPickerResults from './link-picker-results'; - -function LinkCell( { value, onChangeValue, onSubmit, onLinkPicked } ) { - return ( - <> - - { !! value && ( - - ) } - - ); -} - -export default withPreferredColorScheme( LinkCell ); diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 9320388f06510..c958f5ed4edd6 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -237,3 +237,8 @@ .arrowLeftIconDark { color: $dark-secondary; } + +// used in both light and dark modes +.placeholderColor { + color: #87a6bc; +} From ed47f53b1a0f71a2cd64ef5f7b569f9db44800e6 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 25 Jun 2020 15:10:05 +1000 Subject: [PATCH 04/83] Add link suggestion item cell component --- .../src/mobile/bottom-sheet/index.native.js | 2 + .../link-suggestion-item-cell.native.js | 88 +++++++++++++++++++ .../link-suggestion-styles.native.scss | 22 +++++ 3 files changed, 112 insertions(+) create mode 100644 packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js create mode 100644 packages/components/src/mobile/bottom-sheet/link-suggestion-styles.native.scss diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index d8527ad7c3320..fee21ba3c7205 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -35,6 +35,7 @@ import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import ColorCell from './color-cell'; import LinkCell from './link-cell'; +import LinkSuggestionItemCell from './link-suggestion-item-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; import { BottomSheetProvider } from './bottom-sheet-context'; @@ -426,5 +427,6 @@ ThemedBottomSheet.SwitchCell = SwitchCell; ThemedBottomSheet.RangeCell = RangeCell; ThemedBottomSheet.ColorCell = ColorCell; ThemedBottomSheet.LinkCell = LinkCell; +ThemedBottomSheet.LinkSuggestionItemCell = LinkSuggestionItemCell; export default ThemedBottomSheet; diff --git a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js new file mode 100644 index 0000000000000..3c46b061cb9d5 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js @@ -0,0 +1,88 @@ +/** + * External dependencies + */ +import { Text, View, StyleSheet } from 'react-native'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { postList, globe, page } from '@wordpress/icons'; +import { withPreferredColorScheme } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import Cell from './cell'; +import cellStyles from './styles.scss'; +import { + itemContainerStyle, + suggestionTitleStyle, + suggestionSummaryStyle, + suggestionContainerStyle, + hidden, +} from './link-suggestion-styles.scss' + +const { compose } = StyleSheet; + +const icons = { + URL: globe, + post: postList, + page: page, +}; + +// we use some Cell styles here with a column flex-direction +function LinkSuggestionItemCell( { + suggestion, + onLinkPicked, + getStylesFromColorScheme, +} ) { + const { title: contentTitle, url, type, isDirectEntry } = suggestion; + const title = isDirectEntry ? url : contentTitle; + const summary = isDirectEntry ? __( 'Add this link' ) : url; + + const pickLink = () => onLinkPicked( suggestion ); + + const cellTitleStyle = getStylesFromColorScheme( + cellStyles.cellLabel, + cellStyles.cellTextDark + ); + + const cellSummaryStyle = getStylesFromColorScheme( + cellStyles.cellValue, + cellStyles.cellTextDark + ); + + const titleStyle = compose( cellTitleStyle, suggestionTitleStyle ); + const summaryStyle = compose( cellSummaryStyle, suggestionSummaryStyle ); + + return ( + + ); +} + +export default withPreferredColorScheme( LinkSuggestionItemCell ); \ No newline at end of file diff --git a/packages/components/src/mobile/bottom-sheet/link-suggestion-styles.native.scss b/packages/components/src/mobile/bottom-sheet/link-suggestion-styles.native.scss new file mode 100644 index 0000000000000..946f3a799043d --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/link-suggestion-styles.native.scss @@ -0,0 +1,22 @@ +.suggestionTitleStyle { + text-align: left; + font-weight: bold; +} + +.suggestionSummaryStyle { + text-align: left; +} + +.itemContainerStyle { + justify-content: flex-start; + margin-top: 10; + margin-bottom: 10; +} + +.suggestionContainerStyle { + align-items: flex-start; +} + +.hidden { + display: none; +} \ No newline at end of file From c621a556916ebd8ecca015e4d29dff547352b11e Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 25 Jun 2020 15:12:31 +1000 Subject: [PATCH 05/83] Implement link picker results component via fetch function --- .../link-cell/link-picker-results.native.js | 40 -------------- .../link-picker/link-picker-results.native.js | 55 +++++++++++++++++++ 2 files changed, 55 insertions(+), 40 deletions(-) delete mode 100644 packages/components/src/mobile/bottom-sheet/link-cell/link-picker-results.native.js create mode 100644 packages/components/src/mobile/link-picker/link-picker-results.native.js diff --git a/packages/components/src/mobile/bottom-sheet/link-cell/link-picker-results.native.js b/packages/components/src/mobile/bottom-sheet/link-cell/link-picker-results.native.js deleted file mode 100644 index 8b0c9c3c3f1d0..0000000000000 --- a/packages/components/src/mobile/bottom-sheet/link-cell/link-picker-results.native.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * External dependencies - */ -import { FlatList } from 'react-native'; -import { requestLinks } from 'react-native-gutenberg-bridge'; - -/** - * WordPress dependencies - */ -import { useState, useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import Cell from '../cell'; - -export default function LinkPickerResults( { query, onLinkPicked } ) { - const [ links, setLinks ] = useState( [] ); - - useEffect( () => { - requestLinks( query, ( newLinks ) => { - setLinks( newLinks ); - } ); - }, [ query ] ); - - return ( - ( - onLinkPicked( { url, title } ) } - /> - ) } - keyExtractor={ ( { url } ) => url } - /> - ); -} 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 new file mode 100644 index 0000000000000..307e835484af1 --- /dev/null +++ b/packages/components/src/mobile/link-picker/link-picker-results.native.js @@ -0,0 +1,55 @@ +/** + * External dependencies + */ +import { FlatList } from 'react-native'; + +/** + * WordPress dependencies + */ +import { BottomSheet } from '@wordpress/components'; +import { useState, useEffect } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; + +export default function LinkPickerResults( { + query, + onLinkPicked, + directEntry, +} ) { + const [ links, setLinks ] = useState( [ directEntry ] ); + + const { fetchLinkSuggestions } = useSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + return { + fetchLinkSuggestions: getSettings() + .__experimentalFetchLinkSuggestions, + }; + }, [] ); + + useEffect( () => { + let isCancelled = false; + + fetchLinkSuggestions( query ).then( ( newLinks ) => { + if ( ! isCancelled ) { + setLinks( [ directEntry, ...newLinks ] ); + } + } ); + + return () => { + isCancelled = true; + }; + }, [ query ] ); + + return ( + ( + + ) } + keyExtractor={ ( { url, type } ) => `${ url }-${ type }` } + /> + ); +} From 1270065e2af9c7d8769fa5de4b5189761da60a6d Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 25 Jun 2020 15:28:24 +1000 Subject: [PATCH 06/83] Add link picker component --- packages/components/src/index.native.js | 1 + .../src/mobile/link-picker/index.native.js | 92 +++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 packages/components/src/mobile/link-picker/index.native.js diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 4168d198185ea..2febf5a953668 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -65,6 +65,7 @@ export { default as CycleSelectControl } from './mobile/cycle-select-control'; export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint'; export { default as Gradient } from './mobile/gradient'; export { default as ColorSettings } from './mobile/color-settings'; +export { LinkPicker } from './mobile/link-picker'; // Utils export { colorsUtils } from './mobile/color-settings/utils'; diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js new file mode 100644 index 0000000000000..536515ca24dbb --- /dev/null +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -0,0 +1,92 @@ +/** + * External dependencies + */ +import { useState } from 'react'; +import { View } from 'react-native'; +import { startsWith } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { link } from '@wordpress/icons'; +import { BottomSheet, } from '@wordpress/components'; +import { getProtocol, prependHTTP } from '@wordpress/url'; + +/** + * Internal dependencies + */ +import LinkPickerResults from './link-picker-results'; +import NavigationHeader from '../bottom-sheet/navigation-header'; + +// this creates a search suggestion for adding a url directly +export const createDirectEntry = ( value ) => { + let type = 'URL'; + + const protocol = getProtocol( value ) || ''; + + if ( protocol.includes( 'mailto' ) ) { + type = 'mailto'; + } + + if ( protocol.includes( 'tel' ) ) { + type = 'tel'; + } + + if ( startsWith( value, '#' ) ) { + type = 'internal'; + } + + return { + isDirectEntry: true, + title: value, + url: type === 'URL' ? prependHTTP( value ) : value, + type, + }; +}; + +export const LinkPicker = ( { + value: initialValue, + onLinkPicked, + onCancel: cancel, +} ) => { + const [ value, setValue ] = useState( initialValue ); + const directEntry = createDirectEntry( value ); + + // the title of a direct entry is displayed as the raw input value, but if we + // are replacing empty text, we want to use the generated url + const pickLink = ( { title, url, isDirectEntry } ) => { + onLinkPicked( { title: isDirectEntry ? url : title, url } ); + }; + + const onSubmit = () => pickLink( directEntry ); + + return ( + + + + { !! value && ( + + ) } + + ); +} From b02c759f16685c3d4df1e8da70e737399c706349 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 25 Jun 2020 15:29:04 +1000 Subject: [PATCH 07/83] Use link picker as subsheet in format library link modal --- .../format-library/src/link/modal.native.js | 116 +++++++++++++----- 1 file changed, 83 insertions(+), 33 deletions(-) diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index e31c91c94d48d..89ed5854301eb 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -9,7 +9,12 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; import { prependHTTP } from '@wordpress/url'; -import { BottomSheet, withSpokenMessages } from '@wordpress/components'; +import { + BottomSheet, + BottomSheetConsumer, + LinkPicker, + withSpokenMessages, +} from '@wordpress/components'; import { create, insert, @@ -39,12 +44,12 @@ class ModalLinkUI extends Component { ); this.removeLink = this.removeLink.bind( this ); this.onDismiss = this.onDismiss.bind( this ); - this.onLinkPicked = this.onLinkPicked.bind( this ); this.state = { inputValue: '', text: '', opensInNewWindow: false, + isFullScreen: false, }; } @@ -73,10 +78,6 @@ class ModalLinkUI extends Component { this.setState( { text } ); } - onLinkPicked( { url: inputValue, title: text } ) { - this.setState( { inputValue, text } ); - } - onChangeOpensInNewWindow( opensInNewWindow ) { this.setState( { opensInNewWindow } ); } @@ -146,44 +147,93 @@ class ModalLinkUI extends Component { } else { this.submitLink(); } + this.setState( { isFullScreen: false } ); } render() { const { isVisible } = this.props; - const { text } = this.state; + const { inputValue, isFullScreen, text } = this.state; return ( - - - - + + { ( { + currentScreen: subsheet, + onReplaceSubsheet: replaceSubsheet, + onHardwareButtonPress: setBackHandler, + shouldDisableBottomSheetMaxHeight: setMaxHeightEnabled, + } ) => { + + // subsheet depth is limited to 1 so we can revert to default + // back behavior when returning from the subsheet + const goBack = () => { + replaceSubsheet( null, {}, () => setBackHandler( null ) ); + this.setState( { isFullScreen: false } ) + } + + // we only set text to title if there was no initial text + const onLinkPicked = ( { url, title } ) => { + if ( ! text ) { + this.setState( { inputValue: url, text: title } ); + } else { + this.setState( { inputValue: url } ); + } + goBack(); + }; + + switch ( subsheet ) { + case 'picker': + return ( + + ); + default: + return ( + <> + { + setMaxHeightEnabled( false ); + this.setState( { isFullScreen: true } ); + replaceSubsheet( 'picker', {}, () => { + setBackHandler( goBack ); + } ); + } } + /> + + + + + ); + } + } } + ); } From 57fd2c6688ae4822251e2b080d1e044f1dd7d99e Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 25 Jun 2020 21:07:43 +1000 Subject: [PATCH 08/83] Support search API endpoint --- .../react-native-editor/src/api-fetch-setup.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react-native-editor/src/api-fetch-setup.js b/packages/react-native-editor/src/api-fetch-setup.js index 6a396732f4975..80bb6a18bddeb 100644 --- a/packages/react-native-editor/src/api-fetch-setup.js +++ b/packages/react-native-editor/src/api-fetch-setup.js @@ -1,6 +1,3 @@ -/** - * External dependencies - */ /** * WordPress dependencies */ @@ -11,6 +8,12 @@ import { fetchRequest } from '@wordpress/react-native-bridge'; */ import apiFetch from '@wordpress/api-fetch'; +const SUPPORTED_ENDPOINTS = [ + /wp\/v2\/(media|categories)\/?\d*?.*/i, + /wp\/v2\/search\?.*/i, + /wpcom\/v2\/gutenberg\/.*/i, +]; + const setTimeoutPromise = ( delay ) => new Promise( ( resolve ) => setTimeout( resolve, delay ) ); @@ -43,10 +46,7 @@ const fetchHandler = ( { path }, retries = 20, retryCount = 1 ) => { }; export const isPathSupported = ( path ) => - [ - /wp\/v2\/(media|categories)\/?\d*?.*/i, - /wpcom\/v2\/gutenberg\/.*/i, - ].some( ( pattern ) => pattern.test( path ) ); + SUPPORTED_ENDPOINTS.some( ( pattern ) => pattern.test( path ) ); export default () => { apiFetch.setFetchHandler( ( options ) => fetchHandler( options ) ); From c8adbb8a44087038ed84ffbd69fbe3ad06a259dd Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 26 Jun 2020 14:05:56 +1000 Subject: [PATCH 09/83] Use ListHeaderComponent HACK for nested flatlist in scrollview This should not be necessary, and there should be a better way to achieve the performance benefits from a flatlist nested with the same orientation of an ancestor, especially when the scroll dimension can be fixed. --- .../src/mobile/bottom-sheet/index.native.js | 55 +++++++++++-------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 916c3ac701e49..c015e1c25c87a 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -11,6 +11,7 @@ import { Keyboard, StatusBar, TouchableHighlight, + FlatList, } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; @@ -358,7 +359,7 @@ class BottomSheet extends Component { > { ! hideHeader && getHeader() } - - - - <>{ children } - - - - + ListHeaderComponent={ + <> + + + <>{ children } + + + + + } + > ); From 59943fce186cff1c7c559d5b52cf03395e041aef Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 6 Jul 2020 13:24:02 +1000 Subject: [PATCH 10/83] Revert "Use ListHeaderComponent HACK for nested flatlist in scrollview" This reverts commit c8adbb8a44087038ed84ffbd69fbe3ad06a259dd. --- .../src/mobile/bottom-sheet/index.native.js | 55 ++++++++----------- 1 file changed, 24 insertions(+), 31 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index c015e1c25c87a..916c3ac701e49 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -11,7 +11,6 @@ import { Keyboard, StatusBar, TouchableHighlight, - FlatList, } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; @@ -359,7 +358,7 @@ class BottomSheet extends Component { > { ! hideHeader && getHeader() } - - - - <>{ children } - - - - - } - > + > + + + <>{ children } + + + + ); From 4b9672812765e75ba44ed74e6ef6a5ef3a6cb6d0 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 10 Jul 2020 16:13:15 +0200 Subject: [PATCH 11/83] use optimised FlatList inside bottom-sheet --- .../src/components/inserter/menu.native.js | 31 +++++++----- .../src/mobile/bottom-sheet/index.native.js | 47 ++++++++++++------- 2 files changed, 49 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 43d96a8dafd04..7d1a9ce8c8faa 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -11,7 +11,7 @@ import { Component } from '@wordpress/element'; import { createBlock, rawHandler } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose } from '@wordpress/compose'; -import { BottomSheet } from '@wordpress/components'; +import { BottomSheet, BottomSheetConsumer } from '@wordpress/components'; /** * Internal dependencies @@ -127,21 +127,26 @@ export class InserterMenu extends Component { onClose={ this.onClose } contentStyle={ [ styles.content, bottomPadding ] } hideHeader + isChildrenScrollable > - ( - + + { ( { listProps } ) => ( + ( + + ) } + keyExtractor={ ( item ) => item.name } + renderItem={ this.renderItem } + { ...listProps } + /> ) } - keyExtractor={ ( item ) => item.name } - renderItem={ this.renderItem } - /> + ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 655e2d414dad6..9a65e6069bcda 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -269,6 +269,7 @@ class BottomSheet extends Component { contentStyle = {}, getStylesFromColorScheme, onDismiss, + isChildrenScrollable, children, ...rest } = this.props; @@ -317,6 +318,30 @@ class BottomSheet extends Component { styles.backgroundDark ); + const listProps = { + disableScrollViewPanResponder: true, + bounces, + onScroll: this.onScroll, + onScrollBeginDrag: this.onScrollBeginDrag, + onScrollEndDrag: this.onScrollEndDrag, + scrollEventThrottle: 16, + contentContainerStyle: [ + styles.content, + hideHeader && styles.emptyHeader, + contentStyle, + isChildrenScrollable && { + flexGrow: 1, + paddingBottom: + safeAreaBottomInset || styles.content.paddingRight, + }, + ], + style: isMaxHeightSet ? { maxHeight } : {}, + scrollEnabled, + automaticallyAdjustContentInsets: false, + }; + + const WrapperView = isChildrenScrollable ? View : ScrollView; + return ( { ! hideHeader && getHeader() } - this.isScrolling( true ) } - onScrollEndDrag={ () => this.isScrolling( false ) } - scrollEventThrottle={ 16 } - style={ isMaxHeightSet ? { maxHeight } : {} } - contentContainerStyle={ [ - styles.content, - hideHeader && styles.emptyHeader, - contentStyle, - ] } - scrollEnabled={ scrollEnabled } - automaticallyAdjustContentInsets={ false } + @@ -393,7 +408,7 @@ class BottomSheet extends Component { - + ); From 73026da5069beee449ac77595f2a0d620a7da2b1 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 14 Jul 2020 18:12:53 +1000 Subject: [PATCH 12/83] Implement basic pagination --- .../link-picker/link-picker-results.native.js | 82 ++++++++++++++----- .../editor/src/components/provider/index.js | 3 +- .../format-library/src/link/modal.native.js | 1 + 3 files changed, 63 insertions(+), 23 deletions(-) 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 307e835484af1..f30969b1dbbf8 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 @@ -6,50 +6,88 @@ import { FlatList } from 'react-native'; /** * WordPress dependencies */ -import { BottomSheet } from '@wordpress/components'; -import { useState, useEffect } from '@wordpress/element'; +import { BottomSheet, BottomSheetConsumer } from '@wordpress/components'; +import { useState, useEffect, useRef } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; +const perPage = 20; + export default function LinkPickerResults( { query, onLinkPicked, directEntry, } ) { const [ links, setLinks ] = useState( [ directEntry ] ); + const hasAllSuggestions = useRef( false ); + const nextPage = useRef( 1 ); + const pendingRequest = useRef(); + const clearRequest = () => ( pendingRequest.current = null ); const { fetchLinkSuggestions } = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); return { - fetchLinkSuggestions: getSettings() - .__experimentalFetchLinkSuggestions, + fetchLinkSuggestions: async ( { query: search } ) => + await getSettings().__experimentalFetchLinkSuggestions( + search, + { page: nextPage.current, perPage } + ), }; }, [] ); - useEffect( () => { - let isCancelled = false; + const fetchMoreSuggestions = async ( { currentSuggestions = links } ) => { + // return early if we've already detected the end of data + if ( pendingRequest.current || hasAllSuggestions.current ) { + return; + } + const request = fetchLinkSuggestions( { query } ); + pendingRequest.current = request; + const suggestions = await request; - fetchLinkSuggestions( query ).then( ( newLinks ) => { - if ( ! isCancelled ) { - setLinks( [ directEntry, ...newLinks ] ); + // only update links for the most recent request + if ( request === pendingRequest.current ) { + // since we don't have the response header, we check if the results + // are truncated to determine we've reached the end + if ( suggestions.length < perPage ) { + hasAllSuggestions.current = true; } - } ); + setLinks( [ ...currentSuggestions, ...suggestions ] ); + nextPage.current++; + } - return () => { - isCancelled = true; - }; + clearRequest(); + }; + + // prevent setting state when unmounted + useEffect( () => clearRequest, [] ); + + // any time the query changes, we reset pagination + useEffect( () => { + clearRequest(); + nextPage.current = 1; + hasAllSuggestions.current = false; + setLinks( [ directEntry ] ); + fetchMoreSuggestions( { currentSuggestions: [ directEntry ] } ); }, [ query ] ); return ( - ( - + { ( { listProps } ) => ( + ( + + ) } + keyExtractor={ ( { url, type } ) => `${ url }-${ type }` } + onEndReached={ fetchMoreSuggestions } + onEndReachedThreshold={ 0.1 } + initialNumToRender={ perPage } + { ...listProps } /> ) } - keyExtractor={ ( { url, type } ) => `${ url }-${ type }` } - /> + ); } diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index edbeaaace3395..5bc52dc5eaba6 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -41,10 +41,11 @@ import ConvertToGroupButtons from '../convert-to-group-buttons'; * @param {number} perPage * @return {Promise} List of suggestions */ -const fetchLinkSuggestions = async ( search, { perPage = 20 } = {} ) => { +const fetchLinkSuggestions = async ( search, { page, perPage = 20 } = {} ) => { const posts = await apiFetch( { path: addQueryArgs( '/wp/v2/search', { search, + page, per_page: perPage, type: 'post', } ), diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 89ed5854301eb..391b58ad55262 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -160,6 +160,7 @@ class ModalLinkUI extends Component { onClose={ this.onDismiss } hideHeader style={ { flex: isFullScreen ? 1 : undefined } } + isChildrenScrollable={ isFullScreen } > { ( { From adee81ad4f1724cf8256514b4f166caf2befed46 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Mon, 20 Jul 2020 13:48:40 +0200 Subject: [PATCH 13/83] fix android scroll on separator item --- .../src/components/inserter/menu.native.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 7d1a9ce8c8faa..6e53267297e72 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -1,7 +1,13 @@ /** * External dependencies */ -import { FlatList, View, TouchableHighlight, Dimensions } from 'react-native'; +import { + FlatList, + View, + TouchableHighlight, + TouchableWithoutFeedback, + Dimensions, +} from 'react-native'; import { pick } from 'lodash'; /** @@ -139,7 +145,11 @@ export class InserterMenu extends Component { numColumns={ numberOfColumns } data={ items } ItemSeparatorComponent={ () => ( - + + + ) } keyExtractor={ ( item ) => item.name } renderItem={ this.renderItem } From d64f8bfd3550a2b21f3cade3725f28b6cc569cbd Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 23 Jul 2020 16:02:53 +1000 Subject: [PATCH 14/83] Fix prettier issues --- .../link-suggestion-item-cell.native.js | 88 ++++++------ .../link-suggestion-styles.native.scss | 2 +- .../src/mobile/link-picker/index.native.js | 84 +++++------ .../format-library/src/link/modal.native.js | 136 ++++++++++-------- 4 files changed, 162 insertions(+), 148 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js index 3c46b061cb9d5..f7a1ab264165c 100644 --- a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js @@ -16,63 +16,63 @@ import { withPreferredColorScheme } from '@wordpress/compose'; import Cell from './cell'; import cellStyles from './styles.scss'; import { - itemContainerStyle, - suggestionTitleStyle, - suggestionSummaryStyle, - suggestionContainerStyle, - hidden, -} from './link-suggestion-styles.scss' + itemContainerStyle, + suggestionTitleStyle, + suggestionSummaryStyle, + suggestionContainerStyle, + hidden, +} from './link-suggestion-styles.scss'; const { compose } = StyleSheet; const icons = { - URL: globe, + URL: globe, post: postList, - page: page, + page, }; // we use some Cell styles here with a column flex-direction function LinkSuggestionItemCell( { - suggestion, - onLinkPicked, - getStylesFromColorScheme, + suggestion, + onLinkPicked, + getStylesFromColorScheme, } ) { - const { title: contentTitle, url, type, isDirectEntry } = suggestion; - const title = isDirectEntry ? url : contentTitle; - const summary = isDirectEntry ? __( 'Add this link' ) : url; + const { title: contentTitle, url, type, isDirectEntry } = suggestion; + const title = isDirectEntry ? url : contentTitle; + const summary = isDirectEntry ? __( 'Add this link' ) : url; - const pickLink = () => onLinkPicked( suggestion ); + const pickLink = () => onLinkPicked( suggestion ); - const cellTitleStyle = getStylesFromColorScheme( - cellStyles.cellLabel, - cellStyles.cellTextDark - ); + const cellTitleStyle = getStylesFromColorScheme( + cellStyles.cellLabel, + cellStyles.cellTextDark + ); - const cellSummaryStyle = getStylesFromColorScheme( - cellStyles.cellValue, - cellStyles.cellTextDark - ); + const cellSummaryStyle = getStylesFromColorScheme( + cellStyles.cellValue, + cellStyles.cellTextDark + ); - const titleStyle = compose( cellTitleStyle, suggestionTitleStyle ); - const summaryStyle = compose( cellSummaryStyle, suggestionSummaryStyle ); + const titleStyle = compose( cellTitleStyle, suggestionTitleStyle ); + const summaryStyle = compose( cellSummaryStyle, suggestionSummaryStyle ); return ( - ); } -export default withPreferredColorScheme( LinkSuggestionItemCell ); \ No newline at end of file +export default withPreferredColorScheme( LinkSuggestionItemCell ); diff --git a/packages/components/src/mobile/bottom-sheet/link-suggestion-styles.native.scss b/packages/components/src/mobile/bottom-sheet/link-suggestion-styles.native.scss index 946f3a799043d..1b35ee2354db1 100644 --- a/packages/components/src/mobile/bottom-sheet/link-suggestion-styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/link-suggestion-styles.native.scss @@ -19,4 +19,4 @@ .hidden { display: none; -} \ No newline at end of file +} diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 536515ca24dbb..be77bd3e39627 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -10,7 +10,7 @@ import { startsWith } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { link } from '@wordpress/icons'; -import { BottomSheet, } from '@wordpress/components'; +import { BottomSheet } from '@wordpress/components'; import { getProtocol, prependHTTP } from '@wordpress/url'; /** @@ -46,47 +46,47 @@ export const createDirectEntry = ( value ) => { }; export const LinkPicker = ( { - value: initialValue, - onLinkPicked, - onCancel: cancel, + value: initialValue, + onLinkPicked, + onCancel: cancel, } ) => { - const [ value, setValue ] = useState( initialValue ); - const directEntry = createDirectEntry( value ); + const [ value, setValue ] = useState( initialValue ); + const directEntry = createDirectEntry( value ); - // the title of a direct entry is displayed as the raw input value, but if we - // are replacing empty text, we want to use the generated url - const pickLink = ( { title, url, isDirectEntry } ) => { - onLinkPicked( { title: isDirectEntry ? url : title, url } ); - }; + // the title of a direct entry is displayed as the raw input value, but if we + // are replacing empty text, we want to use the generated url + const pickLink = ( { title, url, isDirectEntry } ) => { + onLinkPicked( { title: isDirectEntry ? url : title, url } ); + }; + + const onSubmit = () => pickLink( directEntry ); - const onSubmit = () => pickLink( directEntry ); - - return ( - - - - { !! value && ( - - ) } - - ); -} + return ( + + + + { !! value && ( + + ) } + + ); +}; diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 391b58ad55262..19bd47f8446b3 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -168,72 +168,86 @@ class ModalLinkUI extends Component { onReplaceSubsheet: replaceSubsheet, onHardwareButtonPress: setBackHandler, shouldDisableBottomSheetMaxHeight: setMaxHeightEnabled, - } ) => { + } ) => { + // subsheet depth is limited to 1 so we can revert to default + // back behavior when returning from the subsheet + const goBack = () => { + replaceSubsheet( null, {}, () => + setBackHandler( null ) + ); + this.setState( { isFullScreen: false } ); + }; - // subsheet depth is limited to 1 so we can revert to default - // back behavior when returning from the subsheet - const goBack = () => { - replaceSubsheet( null, {}, () => setBackHandler( null ) ); - this.setState( { isFullScreen: false } ) + // we only set text to title if there was no initial text + const onLinkPicked = ( { url, title } ) => { + if ( ! text ) { + this.setState( { + inputValue: url, + text: title, + } ); + } else { + this.setState( { inputValue: url } ); } + goBack(); + }; - // we only set text to title if there was no initial text - const onLinkPicked = ( { url, title } ) => { - if ( ! text ) { - this.setState( { inputValue: url, text: title } ); - } else { - this.setState( { inputValue: url } ); - } - goBack(); - }; - - switch ( subsheet ) { - case 'picker': - return ( - { + setMaxHeightEnabled( false ); + this.setState( { isFullScreen: true } ); + replaceSubsheet( 'picker', {}, () => + setBackHandler( goBack ) + ); + }; + + switch ( subsheet ) { + case 'picker': + return ( + + ); + default: + return ( + <> + - ); - default: - return ( - <> - { - setMaxHeightEnabled( false ); - this.setState( { isFullScreen: true } ); - replaceSubsheet( 'picker', {}, () => { - setBackHandler( goBack ); - } ); - } } - /> - - - - - ); - } - } } + + + + + ); + } + } } ); From 4f57f110a4f4268a82848c3079216407ecd6bd88 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 24 Jul 2020 12:00:08 +1000 Subject: [PATCH 15/83] Debounce fetch on query changes --- .../link-picker/link-picker-results.native.js | 75 +++++++++++-------- 1 file changed, 44 insertions(+), 31 deletions(-) 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 f30969b1dbbf8..ccc5627e46a4c 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 @@ -2,6 +2,7 @@ * External dependencies */ import { FlatList } from 'react-native'; +import { debounce } from 'lodash'; /** * WordPress dependencies @@ -10,7 +11,9 @@ import { BottomSheet, BottomSheetConsumer } from '@wordpress/components'; import { useState, useEffect, useRef } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; -const perPage = 20; +const PER_PAGE = 20; +const REQUEST_DEBOUNCE_DELAY = 400; +const MINIMUM_QUERY_SIZE = 2; export default function LinkPickerResults( { query, @@ -23,39 +26,47 @@ export default function LinkPickerResults( { const pendingRequest = useRef(); const clearRequest = () => ( pendingRequest.current = null ); - const { fetchLinkSuggestions } = useSelect( ( select ) => { + // a stable debounced function to fetch suggestions and append + const { fetchMoreSuggestions } = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); - return { - fetchLinkSuggestions: async ( { query: search } ) => - await getSettings().__experimentalFetchLinkSuggestions( + const fetchLinkSuggestions = async ( { search } ) => { + if ( MINIMUM_QUERY_SIZE <= search.length ) { + return await getSettings().__experimentalFetchLinkSuggestions( search, - { page: nextPage.current, perPage } - ), + { page: nextPage.current, PER_PAGE } + ); + } }; - }, [] ); - - const fetchMoreSuggestions = async ( { currentSuggestions = links } ) => { - // return early if we've already detected the end of data - if ( pendingRequest.current || hasAllSuggestions.current ) { - return; - } - const request = fetchLinkSuggestions( { query } ); - pendingRequest.current = request; - const suggestions = await request; + const fetchMore = async ( { + query: search, + links: currentSuggestions, + } ) => { + // return early if we've already detected the end of data or we are + // already awaiting a response + if ( pendingRequest.current || hasAllSuggestions.current ) { + return; + } + const request = fetchLinkSuggestions( { search } ); + pendingRequest.current = request; + const suggestions = await request; - // only update links for the most recent request - if ( request === pendingRequest.current ) { - // since we don't have the response header, we check if the results - // are truncated to determine we've reached the end - if ( suggestions.length < perPage ) { - hasAllSuggestions.current = true; + // only update links for the most recent request + if ( suggestions && request === pendingRequest.current ) { + // since we don't have the response header, we check if the results + // are truncated to determine we've reached the end + if ( suggestions.length < PER_PAGE ) { + hasAllSuggestions.current = true; + } + setLinks( [ ...currentSuggestions, ...suggestions ] ); + nextPage.current++; } - setLinks( [ ...currentSuggestions, ...suggestions ] ); - nextPage.current++; - } - clearRequest(); - }; + clearRequest(); + }; + return { + fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ), + }; + }, [] ); // prevent setting state when unmounted useEffect( () => clearRequest, [] ); @@ -66,9 +77,11 @@ export default function LinkPickerResults( { nextPage.current = 1; hasAllSuggestions.current = false; setLinks( [ directEntry ] ); - fetchMoreSuggestions( { currentSuggestions: [ directEntry ] } ); + fetchMoreSuggestions( { query, links: [ directEntry ] } ); }, [ query ] ); + const onEndReached = () => fetchMoreSuggestions( { query, links } ); + return ( { ( { listProps } ) => ( @@ -82,9 +95,9 @@ export default function LinkPickerResults( { /> ) } keyExtractor={ ( { url, type } ) => `${ url }-${ type }` } - onEndReached={ fetchMoreSuggestions } + onEndReached={ onEndReached } onEndReachedThreshold={ 0.1 } - initialNumToRender={ perPage } + initialNumToRender={ PER_PAGE } { ...listProps } /> ) } From 23078e51740e106d26a16d02ab749207e0dd1b1c Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 24 Jul 2020 12:18:57 +1000 Subject: [PATCH 16/83] Add gridicons as one-offs --- .../link-suggestion-item-cell.native.js | 9 +++++---- .../src/mobile/gridicons/index.native.js | 19 +++++++++++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 packages/components/src/mobile/gridicons/index.native.js diff --git a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js index f7a1ab264165c..07054fbc05ce6 100644 --- a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js @@ -7,7 +7,7 @@ import { Text, View, StyleSheet } from 'react-native'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { postList, globe, page } from '@wordpress/icons'; +import { globe } from '@wordpress/icons'; import { withPreferredColorScheme } from '@wordpress/compose'; /** @@ -22,13 +22,14 @@ import { suggestionContainerStyle, hidden, } from './link-suggestion-styles.scss'; +import { posts, pages, empty } from '../gridicons'; const { compose } = StyleSheet; const icons = { URL: globe, - post: postList, - page, + post: posts, + page: pages, }; // we use some Cell styles here with a column flex-direction @@ -58,7 +59,7 @@ function LinkSuggestionItemCell( { return ( + + +); +export const pages = ( + + + +); + +export const empty = ( + +); From 9e7a7566d48ffc497aee751efdafdf2390e6190c Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 27 Jul 2020 18:20:24 +1000 Subject: [PATCH 17/83] Use default instead of named import of styles in link suggestion item --- .../link-suggestion-item-cell.native.js | 23 ++++++++----------- .../link-suggestion-styles.native.scss | 6 ++--- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js index 07054fbc05ce6..b5997e8d99f12 100644 --- a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js @@ -15,13 +15,7 @@ import { withPreferredColorScheme } from '@wordpress/compose'; */ import Cell from './cell'; import cellStyles from './styles.scss'; -import { - itemContainerStyle, - suggestionTitleStyle, - suggestionSummaryStyle, - suggestionContainerStyle, - hidden, -} from './link-suggestion-styles.scss'; +import suggestionStyles from './link-suggestion-styles.scss'; import { posts, pages, empty } from '../gridicons'; const { compose } = StyleSheet; @@ -54,19 +48,22 @@ function LinkSuggestionItemCell( { cellStyles.cellTextDark ); - const titleStyle = compose( cellTitleStyle, suggestionTitleStyle ); - const summaryStyle = compose( cellSummaryStyle, suggestionSummaryStyle ); + const titleStyle = compose( cellTitleStyle, suggestionStyles.titleStyle ); + const summaryStyle = compose( + cellSummaryStyle, + suggestionStyles.summaryStyle + ); return ( diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 6eea1abf8db95..d54b4c03ffb9d 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -50,28 +50,19 @@ const linkSettingsScreens = { }; const ModalLinkUI = ( { isVisible, ...restProps } ) => { - const [ fullHeight, setFullHeight ] = useState( false ); return ( - + - + - + @@ -88,7 +79,6 @@ const LinkSettingsScreen = ( { value, isActive, activeAttributes, - setFullHeight, } ) => { const [ text, setText ] = useState( getTextContent( slice( value ) ) ); const [ opensInNewWindow, setOpensInNewWindows ] = useState( @@ -180,13 +170,12 @@ const LinkSettingsScreen = ( { useFocusEffect( useCallback( () => { - setFullHeight( false ); const { params = {} } = route; if ( ! text && params.text ) { setText( params.text ); } return () => {}; - }, [ route.params?.text, text, setFullHeight ] ) + }, [ route.params?.text, text ] ) ); return useMemo( () => { @@ -233,7 +222,7 @@ const LinkSettingsScreen = ( { }, [ inputValue, text, opensInNewWindow ] ); }; -const LinkPickerScreen = ( { setFullHeight } ) => { +const LinkPickerScreen = () => { const navigation = useNavigation(); const route = useRoute(); const onLinkPicked = ( { url, title } ) => { @@ -243,13 +232,6 @@ const LinkPickerScreen = ( { setFullHeight } ) => { } ); }; - useFocusEffect( - useCallback( () => { - setFullHeight( true ); - return () => {}; - }, [ setFullHeight ] ) - ); - const { inputValue } = route.params; return useMemo( () => { return ( @@ -259,5 +241,5 @@ const LinkPickerScreen = ( { setFullHeight } ) => { onCancel={ navigation.goBack } /> ); - }, [ inputValue, navigation ] ); + }, [ inputValue ] ); }; From 63e44a89534b8c094c113e25bb683283010537b4 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 25 Aug 2020 12:18:52 +0200 Subject: [PATCH 52/83] add fullHeight prop to navigation-screen --- .../navigation-container.native.js | 22 ++++++++++-- .../navigation-screen.native.js | 36 +++++++++++++++---- .../src/mobile/bottom-sheet/index.native.js | 25 ++++++++++++- 3 files changed, 73 insertions(+), 10 deletions(-) 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 a8b802d6cf2cb..463018435ffb3 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 @@ -63,6 +63,7 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { const [ currentHeight, setCurrentHeight ] = useState( context.currentHeight || 1 ); + const [ isFullScreen, setIsFullScreen ] = useState( false ); const backgroundStyle = usePreferredColorSchemeStyle( styles.background, @@ -90,6 +91,13 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { } }; + const setNavigationFullScreen = ( isFull ) => { + if ( isFull !== isFullScreen ) { + performLayoutAnimation( ANIMATION_DURATION ); + setIsFullScreen( isFull ); + } + }; + const screens = useMemo( () => { return Children.map( children, ( child ) => { const { name, ...otherProps } = child.props; @@ -105,9 +113,17 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { return useMemo( () => { return ( - + { main ? ( @@ -123,7 +139,7 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { ); - }, [ currentHeight ] ); + }, [ currentHeight, isFullScreen ] ); } export default BottomSheetNavigationContainer; 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 3c13517f1a0d2..b37e4960e49b9 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 @@ -21,18 +21,35 @@ import { useRef, useCallback, useContext, useMemo } from '@wordpress/element'; */ import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context'; -const BottomSheetNavigationScreen = ( { children } ) => { +const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { const navigation = useNavigation(); const heightRef = useRef( { maxHeight: 0 } ); const isFocused = useIsFocused(); const { onHandleHardwareButtonPress, shouldEnableBottomSheetMaxHeight, + setIsFullScreen, } = useContext( BottomSheetContext ); - const { setHeight } = useContext( BottomSheetNavigationContext ); + const { setHeight, setNavigationFullScreen } = useContext( + BottomSheetNavigationContext + ); + + const setHeightDebounce = useCallback( + debounce( ( height ) => { + setHeight( height, true ); + setNavigationFullScreen( false ); + }, 10 ), + [ setNavigationFullScreen ] + ); - const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [] ); + const setFullHeight = useCallback( + ( isFull ) => { + setIsFullScreen( isFull ); + setNavigationFullScreen( isFull ); + }, + [ setNavigationFullScreen, setIsFullScreen ] + ); useFocusEffect( useCallback( () => { @@ -45,17 +62,24 @@ const BottomSheetNavigationScreen = ( { children } ) => { onHandleHardwareButtonPress( null ); return false; } ); - if ( heightRef.current.maxHeight !== 0 ) { + if ( fullScreen ) { + setFullHeight( true ); + } else if ( heightRef.current.maxHeight !== 0 ) { setHeight( heightRef.current.maxHeight ); + setFullHeight( false ); } return () => {}; - }, [] ) + }, [ setFullHeight ] ) ); const onLayout = ( { nativeEvent } ) => { const { height } = nativeEvent.layout; + if ( heightRef.current.maxHeight !== height && isFocused ) { heightRef.current.maxHeight = height; - setHeightDebounce( height, true ); + if ( fullScreen ) { + return; + } + setHeightDebounce( height ); } }; diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 2a407d34cea61..583a77fa61db4 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -50,6 +50,8 @@ class BottomSheet extends Component { this ); + this.setIsFullScreen = this.setIsFullScreen.bind( this ); + this.onDimensionsChange = this.onDimensionsChange.bind( this ); this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this ); this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind( @@ -72,6 +74,7 @@ class BottomSheet extends Component { handleClosingBottomSheet: null, handleHardwareButtonPress: null, isMaxHeightSet: true, + isFullScreen: this.props.isFullScreen || false, }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -231,6 +234,16 @@ class BottomSheet extends Component { this.onShouldSetBottomSheetMaxHeight( true ); } + setIsFullScreen( isFullScreen ) { + if ( isFullScreen !== this.state.isFullScreen ) { + if ( isFullScreen ) { + this.setState( { isFullScreen, isMaxHeightSet: false } ); + } else { + this.setState( { isFullScreen, isMaxHeightSet: true } ); + } + } + } + onHardwareButtonPress() { const { onClose } = this.props; const { handleHardwareButtonPress } = this.state; @@ -275,6 +288,7 @@ class BottomSheet extends Component { isScrolling, scrollEnabled, isMaxHeightSet, + isFullScreen, } = this.state; const panResponder = PanResponder.create( { @@ -303,6 +317,12 @@ class BottomSheet extends Component { styles.bottomSheetHeaderTitleDark ); + let listStyle = {}; + if ( isFullScreen ) { + listStyle = { flexGrow: 1 }; + } else if ( isMaxHeightSet ) { + listStyle = { maxHeight }; + } const listProps = { disableScrollViewPanResponder: true, bounces, @@ -316,8 +336,9 @@ class BottomSheet extends Component { contentStyle, isChildrenScrollable && this.getContentStyle(), contentStyle, + isFullScreen && { flexGrow: 1 }, ], - style: isMaxHeightSet ? { maxHeight } : {}, + style: listStyle, scrollEnabled, automaticallyAdjustContentInsets: false, }; @@ -373,6 +394,7 @@ class BottomSheet extends Component { style={ { ...backgroundStyle, borderColor: 'rgba(0, 0, 0, 0.1)', + flex: isFullScreen ? 1 : undefined, ...style, } } keyboardVerticalOffset={ -safeAreaBottomInset } @@ -396,6 +418,7 @@ class BottomSheet extends Component { onHandleHardwareButtonPress: this .onHandleHardwareButtonPress, listProps, + setIsFullScreen: this.setIsFullScreen, } } > From 3f41b60d521ba649ea96219b5a702f4f89dd63c8 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 25 Aug 2020 12:27:01 +0200 Subject: [PATCH 53/83] Add setHeight to useCallback dependencies --- .../bottom-sheet-navigation/navigation-screen.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b37e4960e49b9..d0e974326c4e5 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 @@ -40,7 +40,7 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { setHeight( height, true ); setNavigationFullScreen( false ); }, 10 ), - [ setNavigationFullScreen ] + [ setNavigationFullScreen, setHeight ] ); const setFullHeight = useCallback( From 2443fb05b8d046e6a5ea9e70a0f4a62ad5023dc4 Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 25 Aug 2020 14:46:39 +0200 Subject: [PATCH 54/83] Fix issue with empty records in link picker list --- .../editor/src/components/provider/index.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 21f854ace4a3e..42920ae2d7ac6 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -81,12 +81,17 @@ const fetchLinkSuggestions = async ( } return Promise.all( [ posts, terms, formats ] ).then( ( results ) => { - return map( flatten( results ).slice( 0, perPage ), ( result ) => ( { - id: result.id, - url: result.url, - title: decodeEntities( result.title ) || __( '(no title)' ), - type: result.subtype || result.type, - } ) ); + return map( + flatten( results ) + .filter( ( result ) => !! result.id ) + .slice( 0, perPage ), + ( result ) => ( { + id: result.id, + url: result.url, + title: decodeEntities( result.title ) || __( '(no title)' ), + type: result.subtype || result.type, + } ) + ); } ); }; From 58b8a23dcc7974ffa86020ce289cebf3040b6356 Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 25 Aug 2020 16:59:17 +0200 Subject: [PATCH 55/83] fix some performance issues --- .../src/mobile/link-picker/index.native.js | 8 +++--- .../index.native.js | 22 ++++++++++------ .../format-library/src/link/modal.native.js | 25 +++++++++++-------- 3 files changed, 33 insertions(+), 22 deletions(-) diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index ee3b675372964..4d0934cacba3d 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { useState } from 'react'; +import { useState, useCallback } from 'react'; import { SafeAreaView } from 'react-native'; import { lowerCase, startsWith } from 'lodash'; @@ -57,11 +57,11 @@ export const LinkPicker = ( { // the title of a direct entry is displayed as the raw input value, but if we // are replacing empty text, we want to use the generated url - const pickLink = ( { title, url, isDirectEntry } ) => { + const pickLink = useCallback( ( { title, url, isDirectEntry } ) => { onLinkPicked( { title: isDirectEntry ? url : title, url } ); - }; + }, [] ); - const onSubmit = () => pickLink( directEntry ); + const onSubmit = useCallback( () => pickLink( directEntry ), [] ); const omniCellStyle = usePreferredColorSchemeStyle( styles.omniCell, diff --git a/packages/compose/src/higher-order/with-preferred-color-scheme/index.native.js b/packages/compose/src/higher-order/with-preferred-color-scheme/index.native.js index 3b393c2ecaf5c..c184d174a1e4c 100644 --- a/packages/compose/src/higher-order/with-preferred-color-scheme/index.native.js +++ b/packages/compose/src/higher-order/with-preferred-color-scheme/index.native.js @@ -4,19 +4,27 @@ import createHigherOrderComponent from '../../utils/create-higher-order-component'; import usePreferredColorScheme from '../../hooks/use-preferred-color-scheme'; +/** + * WordPress dependencies + */ +import { useCallback } from '@wordpress/element'; + const withPreferredColorScheme = createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { const colorScheme = usePreferredColorScheme(); const isDarkMode = colorScheme === 'dark'; - const getStyles = ( lightStyles, darkStyles ) => { - const finalDarkStyles = { - ...lightStyles, - ...darkStyles, - }; + const getStyles = useCallback( + ( lightStyles, darkStyles ) => { + const finalDarkStyles = { + ...lightStyles, + ...darkStyles, + }; - return isDarkMode ? finalDarkStyles : lightStyles; - }; + return isDarkMode ? finalDarkStyles : lightStyles; + }, + [ isDarkMode ] + ); return ( { onHandleClosingBottomSheet( () => { - submit(); + submit( inputValue ); } ); }, [ inputValue, opensInNewWindow, text ] ); @@ -155,18 +155,21 @@ const LinkSettingsScreen = ( { onClose(); }; - const removeLink = () => { + const removeLink = useCallback( () => { onRemove(); onClose(); - }; - - const submit = () => { - if ( inputValue === '' ) { - removeLink(); - } else { - submitLink(); - } - }; + }, [ onRemove, onClose ] ); + + const submit = useCallback( + ( submitValue ) => { + if ( submitValue === '' ) { + removeLink(); + } else { + submitLink(); + } + }, + [ removeLink ] + ); useFocusEffect( useCallback( () => { From 8cf4c0d4b2ebed0f08b08e3e1182b7701b7cf93c Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 26 Aug 2020 11:51:14 +0200 Subject: [PATCH 56/83] remove useCallbacks since it is slower and fix the focus loop --- .../src/mobile/bottom-sheet/cell.native.js | 4 ++-- .../src/mobile/link-picker/index.native.js | 10 ++++---- .../format-library/src/link/modal.native.js | 23 ++++++++----------- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 2859fe1fe3bd4..3d1375a20a041 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -40,8 +40,8 @@ class BottomSheetCell extends Component { ); } - componentDidUpdate() { - if ( this.state.isEditingValue ) { + componentDidUpdate( prevProps, prevState ) { + if ( ! prevState.isEditingValue && this.state.isEditingValue ) { this._valueTextInput.focus(); } } diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 4d0934cacba3d..8c1ffbc87489b 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { useState, useCallback } from 'react'; +import { useState } from 'react'; import { SafeAreaView } from 'react-native'; import { lowerCase, startsWith } from 'lodash'; @@ -57,11 +57,13 @@ export const LinkPicker = ( { // the title of a direct entry is displayed as the raw input value, but if we // are replacing empty text, we want to use the generated url - const pickLink = useCallback( ( { title, url, isDirectEntry } ) => { + const pickLink = ( { title, url, isDirectEntry } ) => { onLinkPicked( { title: isDirectEntry ? url : title, url } ); - }, [] ); + }; - const onSubmit = useCallback( () => pickLink( directEntry ), [] ); + const onSubmit = () => { + pickLink( directEntry ); + }; const omniCellStyle = usePreferredColorSchemeStyle( styles.omniCell, diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index b2f1c2d7d60f1..5fcde8e0663f2 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -155,21 +155,18 @@ const LinkSettingsScreen = ( { onClose(); }; - const removeLink = useCallback( () => { + const removeLink = () => { onRemove(); onClose(); - }, [ onRemove, onClose ] ); - - const submit = useCallback( - ( submitValue ) => { - if ( submitValue === '' ) { - removeLink(); - } else { - submitLink(); - } - }, - [ removeLink ] - ); + }; + + const submit = ( submitValue ) => { + if ( submitValue === '' ) { + removeLink(); + } else { + submitLink(); + } + }; useFocusEffect( useCallback( () => { From 4adec319019f26a9be445ae7e21dfa16b874aa07 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 26 Aug 2020 13:20:13 +0200 Subject: [PATCH 57/83] fix padding bottom --- packages/format-library/src/link/modal.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 5fcde8e0663f2..8350378c5b76a 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -209,7 +209,7 @@ const LinkSettingsScreen = ( { separatorType={ 'fullWidth' } /> - + Date: Wed, 26 Aug 2020 15:26:05 +0200 Subject: [PATCH 58/83] Fix for bottom insets --- .../src/mobile/bottom-sheet/index.native.js | 2 +- .../format-library/src/link/modal.native.js | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 30537fc00512c..b88f5f53d2c2a 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -260,7 +260,6 @@ class BottomSheet extends Component { getContentStyle() { const { safeAreaBottomInset } = this.state; return { - flexGrow: 1, paddingBottom: ( safeAreaBottomInset || 0 ) + styles.scrollableContent.paddingBottom, @@ -341,6 +340,7 @@ class BottomSheet extends Component { isFullScreen && { flexGrow: 1 }, ], style: listStyle, + safeAreaBottomInset, scrollEnabled, automaticallyAdjustContentInsets: false, }; diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 8350378c5b76a..15858501e631a 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -182,12 +182,10 @@ const LinkSettingsScreen = ( { return ( <> - - + ); - }, [ inputValue, text, opensInNewWindow ] ); + }, [ inputValue, text, opensInNewWindow, listProps.safeAreaBottomInset ] ); }; const LinkPickerScreen = () => { From 5437f0f35c8752c1206eae7a23e5cd2b88fb2bfb Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 26 Aug 2020 17:57:12 +0200 Subject: [PATCH 59/83] move styles to scss --- packages/format-library/src/link/modal.native.js | 7 +------ packages/format-library/src/link/modal.native.scss | 6 ++++++ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 15858501e631a..eaf183ef7a90f 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -181,12 +181,7 @@ const LinkSettingsScreen = ( { return useMemo( () => { return ( <> - + Date: Wed, 26 Aug 2020 18:02:33 +0200 Subject: [PATCH 60/83] add missing spacing on the top --- packages/format-library/src/link/modal.native.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/format-library/src/link/modal.native.scss b/packages/format-library/src/link/modal.native.scss index 8271e9a4f548c..3462a913be7ff 100644 --- a/packages/format-library/src/link/modal.native.scss +++ b/packages/format-library/src/link/modal.native.scss @@ -6,4 +6,5 @@ padding-bottom: 0; padding-left: $block-edge-to-content; padding-right: $block-edge-to-content; + padding-top: $block-edge-to-content/2; } From d6166e6695627c179150109b9ebd7cb617364900 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 26 Aug 2020 18:29:04 +0200 Subject: [PATCH 61/83] fix issue with wrong title when removing the old one --- .../format-library/src/link/modal.native.js | 26 ++++++------------- 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index eaf183ef7a90f..8e3a0c21ddbc0 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -2,23 +2,13 @@ * External dependencies */ import React from 'react'; -import { - useNavigation, - useRoute, - useFocusEffect, -} from '@react-navigation/native'; +import { useNavigation, useRoute } from '@react-navigation/native'; import { View } from 'react-native'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - useState, - useContext, - useCallback, - useEffect, - useMemo, -} from '@wordpress/element'; +import { useState, useContext, useEffect, useMemo } from '@wordpress/element'; import { prependHTTP } from '@wordpress/url'; import { @@ -168,15 +158,15 @@ const LinkSettingsScreen = ( { } }; - useFocusEffect( - useCallback( () => { + useEffect( () => { + const unsubscribe = navigation.addListener( 'focus', () => { const { params = {} } = route; if ( ! text && params.text ) { setText( params.text ); } - return () => {}; - }, [ route.params?.text, text ] ) - ); + } ); + return unsubscribe; + }, [ navigation, route.params?.text, text ] ); return useMemo( () => { return ( @@ -212,7 +202,7 @@ const LinkSettingsScreen = ( { style={ { height: listProps.safeAreaBottomInset, } } - > + /> ); }, [ inputValue, text, opensInNewWindow, listProps.safeAreaBottomInset ] ); From de1298c029103c26a325cdf9020238b68d3084e2 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 26 Aug 2020 18:46:49 +0200 Subject: [PATCH 62/83] Refactor: move screens to separate file --- .../link-picker-screen.native.js | 40 ++++ .../link-settings-screen.native.js | 180 +++++++++++++++ .../src/link/modal-screens/screens.native.js | 4 + .../format-library/src/link/modal.native.js | 207 +----------------- 4 files changed, 230 insertions(+), 201 deletions(-) create mode 100644 packages/format-library/src/link/modal-screens/link-picker-screen.native.js create mode 100644 packages/format-library/src/link/modal-screens/link-settings-screen.native.js create mode 100644 packages/format-library/src/link/modal-screens/screens.native.js diff --git a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js new file mode 100644 index 0000000000000..de3b05637dd40 --- /dev/null +++ b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js @@ -0,0 +1,40 @@ +/** + * External dependencies + */ +import React from 'react'; +import { useNavigation, useRoute } from '@react-navigation/native'; +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +import { LinkPicker } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import linkSettingsScreens from './screens'; + +const LinkPickerScreen = () => { + const navigation = useNavigation(); + const route = useRoute(); + const onLinkPicked = ( { url, title } ) => { + navigation.navigate( linkSettingsScreens.settings, { + inputValue: url, + text: title, + } ); + }; + + const { inputValue } = route.params; + return useMemo( () => { + return ( + + ); + }, [ inputValue ] ); +}; + +export default LinkPickerScreen; 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 new file mode 100644 index 0000000000000..b818c17cd51f7 --- /dev/null +++ b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js @@ -0,0 +1,180 @@ +/** + * External dependencies + */ +import React from 'react'; +import { useNavigation, useRoute } from '@react-navigation/native'; +import { View } from 'react-native'; +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useState, useContext, useEffect, useMemo } from '@wordpress/element'; +import { prependHTTP } from '@wordpress/url'; + +import { BottomSheet, BottomSheetContext } from '@wordpress/components'; +import { + create, + insert, + isCollapsed, + applyFormat, + getTextContent, + slice, +} from '@wordpress/rich-text'; +import { external, textColor } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import { createLinkFormat, isValidHref } from '../utils'; +import linkSettingsScreens from './screens'; + +import styles from '../modal.scss'; + +const LinkSettingsScreen = ( { + onRemove, + onClose, + onChange, + speak, + value, + isActive, + activeAttributes, +} ) => { + const [ text, setText ] = useState( getTextContent( slice( value ) ) ); + const [ opensInNewWindow, setOpensInNewWindows ] = useState( + activeAttributes.target === '_blank' + ); + + const { + shouldEnableBottomSheetMaxHeight, + onHandleClosingBottomSheet, + listProps, + } = useContext( BottomSheetContext ); + + const navigation = useNavigation(); + const route = useRoute(); + const { inputValue = activeAttributes.url || '' } = route.params || {}; + const onLinkCellPressed = () => { + shouldEnableBottomSheetMaxHeight( false ); + navigation.navigate( linkSettingsScreens.picker, { inputValue } ); + }; + useEffect( () => { + onHandleClosingBottomSheet( () => { + submit( inputValue ); + } ); + }, [ inputValue, opensInNewWindow, text ] ); + + const submitLink = () => { + const url = prependHTTP( inputValue ); + const linkText = text || inputValue; + const format = createLinkFormat( { + url, + opensInNewWindow, + text: linkText, + } ); + let newAttributes; + if ( isCollapsed( value ) && ! isActive ) { + // insert link + const toInsert = applyFormat( + create( { text: linkText } ), + format, + 0, + linkText.length + ); + newAttributes = insert( value, toInsert ); + } else if ( text !== getTextContent( slice( value ) ) ) { + // edit text in selected link + const toInsert = applyFormat( + create( { text } ), + format, + 0, + text.length + ); + newAttributes = insert( value, toInsert, value.start, value.end ); + } else { + // transform selected text into link + newAttributes = applyFormat( value, format ); + } + //move selection to end of link + newAttributes.start = newAttributes.end; + newAttributes.activeFormats = []; + onChange( { ...newAttributes, needsSelectionUpdate: true } ); + if ( ! isValidHref( url ) ) { + speak( + __( + 'Warning: the link has been inserted but may have errors. Please test it.' + ), + 'assertive' + ); + } else if ( isActive ) { + speak( __( 'Link edited.' ), 'assertive' ); + } else { + speak( __( 'Link inserted' ), 'assertive' ); + } + + onClose(); + }; + + const removeLink = () => { + onRemove(); + onClose(); + }; + + const submit = ( submitValue ) => { + if ( submitValue === '' ) { + removeLink(); + } else { + submitLink(); + } + }; + + useEffect( () => { + const unsubscribe = navigation.addListener( 'focus', () => { + const { params = {} } = route; + if ( ! text && params.text ) { + setText( params.text ); + } + } ); + return unsubscribe; + }, [ navigation, route.params?.text, text ] ); + + return useMemo( () => { + return ( + <> + + + + + + + + + ); + }, [ inputValue, text, opensInNewWindow, listProps.safeAreaBottomInset ] ); +}; + +export default LinkSettingsScreen; diff --git a/packages/format-library/src/link/modal-screens/screens.native.js b/packages/format-library/src/link/modal-screens/screens.native.js new file mode 100644 index 0000000000000..5561251c4b274 --- /dev/null +++ b/packages/format-library/src/link/modal-screens/screens.native.js @@ -0,0 +1,4 @@ +export default { + settings: 'linkSettings', + picker: 'linkPicker', +}; diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 8e3a0c21ddbc0..1458e1129f36b 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -2,54 +2,28 @@ * External dependencies */ import React from 'react'; -import { useNavigation, useRoute } from '@react-navigation/native'; -import { View } from 'react-native'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; -import { useState, useContext, useEffect, useMemo } from '@wordpress/element'; -import { prependHTTP } from '@wordpress/url'; -import { - BottomSheet, - LinkPicker, - withSpokenMessages, - BottomSheetContext, -} from '@wordpress/components'; -import { - create, - insert, - isCollapsed, - applyFormat, - getTextContent, - slice, -} from '@wordpress/rich-text'; -import { external, textColor } from '@wordpress/icons'; +import { BottomSheet, withSpokenMessages } from '@wordpress/components'; /** * Internal dependencies */ -import { createLinkFormat, isValidHref } from './utils'; - -import styles from './modal.scss'; - -const linkSettingsScreens = { - settings: 'linkSettings', - picker: 'linkPicker', -}; +import screens from './modal-screens/screens'; +import LinkSettingsScreen from './modal-screens/link-settings-screen'; +import LinkPickerScreen from './modal-screens/link-picker-screen'; const ModalLinkUI = ( { isVisible, ...restProps } ) => { return ( - + @@ -60,172 +34,3 @@ const ModalLinkUI = ( { isVisible, ...restProps } ) => { }; export default withSpokenMessages( ModalLinkUI ); - -const LinkSettingsScreen = ( { - onRemove, - onClose, - onChange, - speak, - value, - isActive, - activeAttributes, -} ) => { - const [ text, setText ] = useState( getTextContent( slice( value ) ) ); - const [ opensInNewWindow, setOpensInNewWindows ] = useState( - activeAttributes.target === '_blank' - ); - - const { - shouldEnableBottomSheetMaxHeight, - onHandleClosingBottomSheet, - listProps, - } = useContext( BottomSheetContext ); - - const navigation = useNavigation(); - const route = useRoute(); - const { inputValue = activeAttributes.url || '' } = route.params || {}; - const onLinkCellPressed = () => { - shouldEnableBottomSheetMaxHeight( false ); - navigation.navigate( linkSettingsScreens.picker, { inputValue } ); - }; - useEffect( () => { - onHandleClosingBottomSheet( () => { - submit( inputValue ); - } ); - }, [ inputValue, opensInNewWindow, text ] ); - - const submitLink = () => { - const url = prependHTTP( inputValue ); - const linkText = text || inputValue; - const format = createLinkFormat( { - url, - opensInNewWindow, - text: linkText, - } ); - let newAttributes; - if ( isCollapsed( value ) && ! isActive ) { - // insert link - const toInsert = applyFormat( - create( { text: linkText } ), - format, - 0, - linkText.length - ); - newAttributes = insert( value, toInsert ); - } else if ( text !== getTextContent( slice( value ) ) ) { - // edit text in selected link - const toInsert = applyFormat( - create( { text } ), - format, - 0, - text.length - ); - newAttributes = insert( value, toInsert, value.start, value.end ); - } else { - // transform selected text into link - newAttributes = applyFormat( value, format ); - } - //move selection to end of link - newAttributes.start = newAttributes.end; - newAttributes.activeFormats = []; - onChange( { ...newAttributes, needsSelectionUpdate: true } ); - if ( ! isValidHref( url ) ) { - speak( - __( - 'Warning: the link has been inserted but may have errors. Please test it.' - ), - 'assertive' - ); - } else if ( isActive ) { - speak( __( 'Link edited.' ), 'assertive' ); - } else { - speak( __( 'Link inserted' ), 'assertive' ); - } - - onClose(); - }; - - const removeLink = () => { - onRemove(); - onClose(); - }; - - const submit = ( submitValue ) => { - if ( submitValue === '' ) { - removeLink(); - } else { - submitLink(); - } - }; - - useEffect( () => { - const unsubscribe = navigation.addListener( 'focus', () => { - const { params = {} } = route; - if ( ! text && params.text ) { - setText( params.text ); - } - } ); - return unsubscribe; - }, [ navigation, route.params?.text, text ] ); - - return useMemo( () => { - return ( - <> - - - - - - - - - ); - }, [ inputValue, text, opensInNewWindow, listProps.safeAreaBottomInset ] ); -}; - -const LinkPickerScreen = () => { - const navigation = useNavigation(); - const route = useRoute(); - const onLinkPicked = ( { url, title } ) => { - navigation.navigate( linkSettingsScreens.settings, { - inputValue: url, - text: title, - } ); - }; - - const { inputValue } = route.params; - return useMemo( () => { - return ( - - ); - }, [ inputValue ] ); -}; From a9af080d5a7c64bdd4804685328c896c0e81837b Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 27 Aug 2020 19:02:48 +0200 Subject: [PATCH 63/83] Apply suggestions from design review --- .../src/mobile/bottom-sheet/index.native.js | 18 +++++++++-- .../src/mobile/link-picker/index.native.js | 31 ++++++++++++++++--- .../src/mobile/link-picker/styles.native.scss | 12 +++++++ .../link-settings-screen.native.js | 2 +- 4 files changed, 55 insertions(+), 8 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index b88f5f53d2c2a..798f0c73f0370 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -68,6 +68,7 @@ class BottomSheet extends Component { this.state = { safeAreaBottomInset: 0, + safeAreaTopInset: 0, bounces: false, maxHeight: 0, keyboardHeight: 0, @@ -141,13 +142,19 @@ class BottomSheet extends Component { } onSafeAreaInsetsUpdate( result ) { - const { safeAreaBottomInset } = this.state; + const { safeAreaBottomInset, safeAreaTopInset } = this.state; if ( this.safeAreaEventSubscription === null ) { return; } const { safeAreaInsets } = result; - if ( safeAreaBottomInset !== safeAreaInsets.bottom ) { - this.setState( { safeAreaBottomInset: safeAreaInsets.bottom } ); + if ( + safeAreaBottomInset !== safeAreaInsets.bottom || + safeAreaTopInset !== safeAreaInsets.top + ) { + this.setState( { + safeAreaBottomInset: safeAreaInsets.bottom, + safeAreaTopInset: safeAreaInsets.top, + } ); } } @@ -286,6 +293,7 @@ class BottomSheet extends Component { maxHeight, bounces, safeAreaBottomInset, + safeAreaTopInset, isScrolling, scrollEnabled, isMaxHeightSet, @@ -396,6 +404,10 @@ class BottomSheet extends Component { style={ { ...backgroundStyle, borderColor: 'rgba(0, 0, 0, 0.1)', + marginTop: + Platform.OS === 'ios' && isFullScreen + ? safeAreaTopInset + : 0, flex: isFullScreen ? 1 : undefined, ...style, } } diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 8c1ffbc87489b..912a13efdcd84 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -2,16 +2,17 @@ * External dependencies */ import { useState } from 'react'; -import { SafeAreaView } from 'react-native'; +import { SafeAreaView, TouchableOpacity } from 'react-native'; import { lowerCase, startsWith } from 'lodash'; /** * WordPress dependencies */ + import { __ } from '@wordpress/i18n'; -import { BottomSheet } from '@wordpress/components'; +import { BottomSheet, Icon } from '@wordpress/components'; import { getProtocol, prependHTTP } from '@wordpress/url'; -import { link } from '@wordpress/icons'; +import { link, closeCircleFilled } from '@wordpress/icons'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** @@ -65,11 +66,20 @@ export const LinkPicker = ( { pickLink( directEntry ); }; + const clear = () => { + setValue( '' ); + }; + const omniCellStyle = usePreferredColorSchemeStyle( styles.omniCell, styles.omniCellDark ); + const iconStyle = usePreferredColorSchemeStyle( + styles.icon, + styles.iconDark + ); + return ( + > + { value !== '' && ( + + + + ) } + { !! value && ( From afffc32c08e57a17dca4e502090917c0000f2fd6 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 28 Aug 2020 17:22:07 +0200 Subject: [PATCH 64/83] remove top handler from full screen bottom sheet android --- packages/components/src/mobile/bottom-sheet/index.native.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 798f0c73f0370..612b5d2aba971 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -409,11 +409,15 @@ class BottomSheet extends Component { ? safeAreaTopInset : 0, flex: isFullScreen ? 1 : undefined, + paddingTop: + Platform.OS === 'android' && isFullScreen ? 8 : 0, ...style, } } keyboardVerticalOffset={ -safeAreaBottomInset } > - + { ! ( Platform.OS === 'android' && isFullScreen ) && ( + + ) } { ! hideHeader && getHeader() } Date: Fri, 28 Aug 2020 18:49:19 +0200 Subject: [PATCH 65/83] fix import of styles --- packages/components/src/mobile/bottom-sheet/link-cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/link-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-cell.native.js index e360f0c0d5d26..c4ff2da87b76e 100644 --- a/packages/components/src/mobile/bottom-sheet/link-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/link-cell.native.js @@ -8,7 +8,7 @@ import { link, Icon, chevronRight } from '@wordpress/icons'; * Internal dependencies */ import Cell from './cell'; -import styles from './styles'; +import styles from './styles.scss'; const { placeholderColor } = styles; From 424c408e90d2a384d142d318b8a20ad9734482e3 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 28 Aug 2020 19:03:01 +0200 Subject: [PATCH 66/83] fix rest of imports --- packages/components/src/mobile/link-picker/index.native.js | 2 +- .../src/mobile/link-picker/link-picker-results.native.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 912a13efdcd84..58c210d894c3f 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -20,7 +20,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose'; */ import LinkPickerResults from './link-picker-results'; import NavigationHeader from '../bottom-sheet/navigation-header'; -import styles from './styles'; +import styles from './styles.scss'; // this creates a search suggestion for adding a url directly export const createDirectEntry = ( 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 1b9ce504e6799..c15786a45ecfe 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 @@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import styles from './styles'; +import styles from './styles.scss'; const PER_PAGE = 20; const REQUEST_DEBOUNCE_DELAY = 400; From 3565b0c6d65f3eda0c4952b2402d9fa3f485380e Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Mon, 31 Aug 2020 12:32:47 +0200 Subject: [PATCH 67/83] Add page param to docs --- packages/editor/src/components/provider/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 3ddc0019d3543..c00c2167871c1 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -42,6 +42,7 @@ import ConvertToGroupButtons from '../convert-to-group-buttons'; * @param {number} [searchArguments.isInitialSuggestions] * @param {number} [searchArguments.type] * @param {number} [searchArguments.subtype] + * @param {number} [searchArguments.page] * @param {Object} [editorSettings] * @param {boolean} [editorSettings.disablePostFormats=false] * @return {Promise} List of suggestions @@ -49,7 +50,7 @@ import ConvertToGroupButtons from '../convert-to-group-buttons'; const fetchLinkSuggestions = async ( search, - { page, isInitialSuggestions, type, subtype } = {}, + { isInitialSuggestions, type, subtype, page } = {}, { disablePostFormats = false } = {} ) => { const perPage = isInitialSuggestions ? 3 : 20; From fec19db9f3f963377020619138b0f63d227c2251 Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 1 Sep 2020 13:30:50 +0200 Subject: [PATCH 68/83] set type of suggestions to post --- .../src/mobile/link-picker/link-picker-results.native.js | 2 +- packages/editor/src/components/provider/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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 c15786a45ecfe..ea25f0fb6778a 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 @@ -41,7 +41,7 @@ export default function LinkPickerResults( { if ( meetsThreshold( search ) ) { return await getSettings().__experimentalFetchLinkSuggestions( search, - { page: nextPage.current, PER_PAGE } + { page: nextPage.current, type: 'post', perPage: PER_PAGE } ); } }; diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index c00c2167871c1..f08191c921aee 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -50,10 +50,10 @@ import ConvertToGroupButtons from '../convert-to-group-buttons'; const fetchLinkSuggestions = async ( search, - { isInitialSuggestions, type, subtype, page } = {}, + { isInitialSuggestions, type, subtype, page, perPage: perPageArg } = {}, { disablePostFormats = false } = {} ) => { - const perPage = isInitialSuggestions ? 3 : 20; + const perPage = perPageArg || isInitialSuggestions ? 3 : 20; const queries = []; From 67fba456cf15f4866199e8ec77a9d5c00f088e1a Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 1 Sep 2020 13:53:39 +0200 Subject: [PATCH 69/83] add cancel-circle-filled icon and use it in link picker --- .../src/mobile/link-picker/index.native.js | 4 ++-- packages/icons/src/index.js | 1 + packages/icons/src/library/cancel-circle-filled.js | 12 ++++++++++++ 3 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 packages/icons/src/library/cancel-circle-filled.js diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 58c210d894c3f..766a18e887370 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -12,7 +12,7 @@ import { lowerCase, startsWith } from 'lodash'; import { __ } from '@wordpress/i18n'; import { BottomSheet, Icon } from '@wordpress/components'; import { getProtocol, prependHTTP } from '@wordpress/url'; -import { link, closeCircleFilled } from '@wordpress/icons'; +import { link, cancelCircleFilled } from '@wordpress/icons'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** @@ -109,7 +109,7 @@ export const LinkPicker = ( { style={ styles.clearIcon } > diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 30b12d689a688..31d68c658a555 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -19,6 +19,7 @@ export { default as brush } from './library/brush'; export { default as button } from './library/button'; export { default as calendar } from './library/calendar'; export { default as camera } from './library/camera'; +export { default as cancelCircleFilled } from './library/cancel-circle-filled'; export { default as capturePhoto } from './library/capture-photo'; export { default as captureVideo } from './library/capture-video'; export { default as category } from './library/category'; diff --git a/packages/icons/src/library/cancel-circle-filled.js b/packages/icons/src/library/cancel-circle-filled.js new file mode 100644 index 0000000000000..092ac5534ce9e --- /dev/null +++ b/packages/icons/src/library/cancel-circle-filled.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const cancelCircleFilled = ( + + + +); + +export default cancelCircleFilled; From 062f8ae80f45ae1bd751d3b58a717190d74fd491 Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 1 Sep 2020 13:57:59 +0200 Subject: [PATCH 70/83] filter empty records --- packages/editor/src/components/provider/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index f08191c921aee..dce19779a1190 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -101,7 +101,9 @@ const fetchLinkSuggestions = async ( return Promise.all( queries ).then( ( results ) => { return map( - flatten( results ).slice( 0, perPage * queries.length ), + flatten( results ) + .filter( ( result ) => !! result.id ) + .slice( 0, perPage ), ( result ) => ( { id: result.id, url: result.url, From f2c15a38469d99b645fbb7b493f2a36d2e2956fb Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 2 Sep 2020 15:19:06 +0200 Subject: [PATCH 71/83] (Andorid): Hide keyboard before back, change icon color, remove top corners when full screen --- .../bottom-sheet-navigation/navigation-screen.native.js | 5 +++-- .../components/src/mobile/bottom-sheet/index.native.js | 5 +++-- .../src/mobile/bottom-sheet/styles.native.scss | 6 ++++++ .../components/src/mobile/link-picker/index.native.js | 2 +- .../components/src/mobile/link-picker/styles.native.scss | 2 +- .../src/link/modal-screens/link-picker-screen.native.js | 9 ++++++++- 6 files changed, 22 insertions(+), 7 deletions(-) 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 b4c080a309480..96fcb60557ae3 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 @@ -2,11 +2,11 @@ * External dependencies */ import { - useFocusEffect, useIsFocused, useNavigation, + useFocusEffect, } from '@react-navigation/native'; -import { View } from 'react-native'; +import { View, Keyboard } from 'react-native'; import { debounce } from 'lodash'; /** @@ -55,6 +55,7 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { useCallback( () => { onHandleHardwareButtonPress( () => { if ( navigation.canGoBack() ) { + Keyboard.dismiss(); shouldEnableBottomSheetMaxHeight( true ); navigation.goBack(); return true; diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 612b5d2aba971..0bdc06bbc1e80 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -409,8 +409,9 @@ class BottomSheet extends Component { ? safeAreaTopInset : 0, flex: isFullScreen ? 1 : undefined, - paddingTop: - Platform.OS === 'android' && isFullScreen ? 8 : 0, + ...( Platform.OS === 'android' && isFullScreen + ? styles.backgroundFullScreen + : {} ), ...style, } } keyboardVerticalOffset={ -safeAreaBottomInset } diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 09ef5109a859b..ed161876b7787 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -44,6 +44,12 @@ background-color: $background-dark-elevated; } +.backgroundFullScreen { + border-top-right-radius: 0; + border-top-left-radius: 0; + padding-top: 8; +} + .content { padding: 0 16px 0 16px; } diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 766a18e887370..7bf2aa2a26ae2 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -110,7 +110,7 @@ export const LinkPicker = ( { > diff --git a/packages/components/src/mobile/link-picker/styles.native.scss b/packages/components/src/mobile/link-picker/styles.native.scss index 27d64f3aac508..dedac4a6cca40 100644 --- a/packages/components/src/mobile/link-picker/styles.native.scss +++ b/packages/components/src/mobile/link-picker/styles.native.scss @@ -23,7 +23,7 @@ } .icon { - color: $toolbar-button; + color: $gray-lighten-10; } .iconDark { diff --git a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js index de3b05637dd40..3eebbee279e58 100644 --- a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js +++ b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js @@ -2,6 +2,7 @@ * External dependencies */ import React from 'react'; +import { Keyboard } from 'react-native'; import { useNavigation, useRoute } from '@react-navigation/native'; /** * WordPress dependencies @@ -19,19 +20,25 @@ const LinkPickerScreen = () => { const navigation = useNavigation(); const route = useRoute(); const onLinkPicked = ( { url, title } ) => { + Keyboard.dismiss(); navigation.navigate( linkSettingsScreens.settings, { inputValue: url, text: title, } ); }; + const onCancel = () => { + Keyboard.dismiss(); + navigation.goBack(); + }; + const { inputValue } = route.params; return useMemo( () => { return ( ); }, [ inputValue ] ); From 98684f134ddf562d815fc2c6711e3eefc75a7443 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 2 Sep 2020 17:41:06 +0200 Subject: [PATCH 72/83] hide keyboard first on Android --- .../link-picker-screen.native.js | 31 ++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js index 3eebbee279e58..4a99067ba70f4 100644 --- a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js +++ b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { Keyboard } from 'react-native'; +import { Keyboard, InteractionManager, Platform } from 'react-native'; import { useNavigation, useRoute } from '@react-navigation/native'; /** * WordPress dependencies @@ -20,16 +20,31 @@ const LinkPickerScreen = () => { const navigation = useNavigation(); const route = useRoute(); const onLinkPicked = ( { url, title } ) => { - Keyboard.dismiss(); - navigation.navigate( linkSettingsScreens.settings, { - inputValue: url, - text: title, - } ); + if ( Platform.OS === 'android' ) { + Keyboard.dismiss(); + InteractionManager.runAfterInteractions( () => { + navigation.navigate( linkSettingsScreens.settings, { + inputValue: url, + text: title, + } ); + } ); + } else { + navigation.navigate( linkSettingsScreens.settings, { + inputValue: url, + text: title, + } ); + } }; const onCancel = () => { - Keyboard.dismiss(); - navigation.goBack(); + if ( Platform.OS === 'android' ) { + Keyboard.dismiss(); + InteractionManager.runAfterInteractions( () => { + navigation.goBack(); + } ); + } else { + navigation.goBack(); + } }; const { inputValue } = route.params; From 13b1df7ca696d4cdc0f21c62587db6fd6a5e2148 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 3 Sep 2020 13:58:06 +0200 Subject: [PATCH 73/83] fix icon colors in cell.native --- packages/components/src/mobile/bottom-sheet/cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 3d1375a20a041..16dc36a12efdf 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -316,7 +316,7 @@ class BottomSheetCell extends Component { Date: Fri, 4 Sep 2020 13:41:15 +0200 Subject: [PATCH 74/83] Android fixes for animation --- .../navigation-container.native.js | 45 +++++++++++-------- .../navigation-screen.native.js | 25 +++-------- .../link-picker-screen.native.js | 25 ++++++----- 3 files changed, 46 insertions(+), 49 deletions(-) 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 463018435ffb3..65c84ef6e53ce 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 @@ -12,6 +12,7 @@ import { useState, useContext, useMemo, + useCallback, Children, useRef, } from '@wordpress/element'; @@ -63,7 +64,6 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { const [ currentHeight, setCurrentHeight ] = useState( context.currentHeight || 1 ); - const [ isFullScreen, setIsFullScreen ] = useState( false ); const backgroundStyle = usePreferredColorSchemeStyle( styles.background, @@ -78,25 +78,33 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { }, }; - const setHeight = ( height, layout ) => { - if ( currentHeight !== height && height > 1 ) { - if ( animate && layout && currentHeight === 1 ) { - setCurrentHeight( height ); - } else if ( animate ) { + const setHeight = useCallback( + ( height, layout ) => { + // The screen is fullHeight or changing from fullScreen to the default mode + if ( + ( typeof currentHeight === 'string' && + typeof height !== 'string' ) || + typeof height === 'string' + ) { performLayoutAnimation( ANIMATION_DURATION ); setCurrentHeight( height ); - } else { - setCurrentHeight( height ); + + return; } - } - }; - const setNavigationFullScreen = ( isFull ) => { - if ( isFull !== isFullScreen ) { - performLayoutAnimation( ANIMATION_DURATION ); - setIsFullScreen( isFull ); - } - }; + if ( currentHeight !== height && height > 1 ) { + if ( animate && layout && currentHeight === 1 ) { + setCurrentHeight( height ); + } else if ( animate ) { + performLayoutAnimation( ANIMATION_DURATION ); + setCurrentHeight( height ); + } else { + setCurrentHeight( height ); + } + } + }, + [ currentHeight ] + ); const screens = useMemo( () => { return Children.map( children, ( child ) => { @@ -115,14 +123,13 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { return ( { main ? ( @@ -139,7 +146,7 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) { ); - }, [ currentHeight, isFullScreen ] ); + }, [ currentHeight ] ); } export default BottomSheetNavigationContainer; 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 96fcb60557ae3..3e9a620582399 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, Keyboard } from 'react-native'; +import { View } from 'react-native'; import { debounce } from 'lodash'; /** @@ -31,31 +31,19 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { setIsFullScreen, } = useContext( BottomSheetContext ); - const { setHeight, setNavigationFullScreen } = useContext( - BottomSheetNavigationContext - ); + const { setHeight } = useContext( BottomSheetNavigationContext ); const setHeightDebounce = useCallback( debounce( ( height ) => { setHeight( height, true ); - setNavigationFullScreen( false ); }, 10 ), - [ setNavigationFullScreen, setHeight ] - ); - - const setFullHeight = useCallback( - ( isFull ) => { - setIsFullScreen( isFull ); - setNavigationFullScreen( isFull ); - }, - [ setNavigationFullScreen, setIsFullScreen ] + [ setHeight ] ); useFocusEffect( useCallback( () => { onHandleHardwareButtonPress( () => { if ( navigation.canGoBack() ) { - Keyboard.dismiss(); shouldEnableBottomSheetMaxHeight( true ); navigation.goBack(); return true; @@ -64,13 +52,14 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { return false; } ); if ( fullScreen ) { - setFullHeight( true ); + setHeight( '100%' ); + setIsFullScreen( true ); } else if ( heightRef.current.maxHeight !== 0 ) { + setIsFullScreen( false ); setHeight( heightRef.current.maxHeight ); - setFullHeight( false ); } return () => {}; - }, [ setFullHeight ] ) + }, [ setHeight ] ) ); const onLayout = ( { nativeEvent } ) => { if ( fullScreen ) { diff --git a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js index 4a99067ba70f4..30d0894281992 100644 --- a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js +++ b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js @@ -2,8 +2,9 @@ * External dependencies */ import React from 'react'; -import { Keyboard, InteractionManager, Platform } from 'react-native'; +import { Platform, Keyboard } from 'react-native'; import { useNavigation, useRoute } from '@react-navigation/native'; +import { delay } from 'lodash'; /** * WordPress dependencies */ @@ -22,29 +23,29 @@ const LinkPickerScreen = () => { const onLinkPicked = ( { url, title } ) => { if ( Platform.OS === 'android' ) { Keyboard.dismiss(); - InteractionManager.runAfterInteractions( () => { + delay( () => { navigation.navigate( linkSettingsScreens.settings, { inputValue: url, text: title, } ); - } ); - } else { - navigation.navigate( linkSettingsScreens.settings, { - inputValue: url, - text: title, - } ); + }, 100 ); + return; } + navigation.navigate( linkSettingsScreens.settings, { + inputValue: url, + text: title, + } ); }; const onCancel = () => { if ( Platform.OS === 'android' ) { Keyboard.dismiss(); - InteractionManager.runAfterInteractions( () => { + delay( () => { navigation.goBack(); - } ); - } else { - navigation.goBack(); + }, 100 ); + return; } + navigation.goBack(); }; const { inputValue } = route.params; From ce05e08f91d5c2dc68b26103ece52742876e0e65 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 4 Sep 2020 15:03:13 +0200 Subject: [PATCH 75/83] change the icon color --- packages/components/src/mobile/link-picker/styles.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/link-picker/styles.native.scss b/packages/components/src/mobile/link-picker/styles.native.scss index dedac4a6cca40..e2db1bda7fd45 100644 --- a/packages/components/src/mobile/link-picker/styles.native.scss +++ b/packages/components/src/mobile/link-picker/styles.native.scss @@ -27,5 +27,5 @@ } .iconDark { - color: #c3c4c7; + color: $dark-quaternary; } From 54192c64e1f1039cadb35a3afaf11881b17424f5 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Mon, 7 Sep 2020 12:44:50 +0200 Subject: [PATCH 76/83] remove old tests --- .../src/link/test/modal.native.js | 50 ------------------- 1 file changed, 50 deletions(-) diff --git a/packages/format-library/src/link/test/modal.native.js b/packages/format-library/src/link/test/modal.native.js index 616251f60e8d8..d75a7604d078a 100644 --- a/packages/format-library/src/link/test/modal.native.js +++ b/packages/format-library/src/link/test/modal.native.js @@ -12,54 +12,4 @@ describe( 'LinksUI', () => { const wrapper = shallow( ); expect( wrapper ).toBeTruthy(); } ); - - it( 'Links are removed when no text is in the URL field', () => { - // Given - const onRemove = jest.fn(); - const wrapper = shallow( - - ) - .dive() - .dive(); // -> dive() removes the HOC layer that was blocking access to ModalLinkUI - - // When - - // Close the BottomSheet - const bottomSheet = wrapper.find( 'BottomSheet' ).first(); - bottomSheet.simulate( 'close' ); - - // Then - - expect( onRemove ).toHaveBeenCalledTimes( 1 ); - } ); - - it( 'Links are saved when URL field has content', () => { - // Given - const onRemove = jest.fn(); - const wrapper = shallow( - - ).dive(); // -> dive() removes the HOC layer that was blocking access to ModalLinkUI - - // Mock `submitLink` for simplicity (we don't want to test submitLink itself here) - wrapper.instance().submitLink = jest.fn(); - - // When - - // Simulate user typing on the URL Cell. - const bottomSheet = wrapper.dive().find( 'BottomSheet' ).first(); - const cell = bottomSheet - .dive() - .find( 'WithPreferredColorScheme(BottomSheetCell)' ) - .first() - .dive(); - - cell.simulate( 'changeValue', 'wordpress.com' ); - - // Close the BottomSheet - bottomSheet.simulate( 'close' ); - - // Then - expect( onRemove ).toHaveBeenCalledTimes( 0 ); - expect( wrapper.instance().submitLink ).toHaveBeenCalledTimes( 1 ); - } ); } ); From 16c4e38892d81ebb45e872cc00543c1f80ffad9b Mon Sep 17 00:00:00 2001 From: Dratwas Date: Mon, 7 Sep 2020 13:20:20 +0200 Subject: [PATCH 77/83] remove unused file and some cleanup --- .../bottom-sheet/bottom-sheet-list-context.js | 16 ---------------- .../navigation-screen.native.js | 12 +++--------- 2 files changed, 3 insertions(+), 25 deletions(-) delete mode 100644 packages/components/src/mobile/bottom-sheet/bottom-sheet-list-context.js diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-list-context.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-list-context.js deleted file mode 100644 index a67ec2c6edb02..0000000000000 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-list-context.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * WordPress dependencies - */ -import { createContext } from '@wordpress/element'; - -// List context in BottomSheet is necessary for controlling the -// nested lists inside the bottom-sheet. -export const BottomSheetListContext = createContext( { - listProps: {}, - setIsChildrenScrollable: () => {}, -} ); - -export const { - Provider: BottomSheetListProvider, - Consumer: BottomSheetListConsumer, -} = BottomSheetListContext; 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 3e9a620582399..b29f18ee86f51 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 @@ -33,12 +33,9 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { const { setHeight } = useContext( BottomSheetNavigationContext ); - const setHeightDebounce = useCallback( - debounce( ( height ) => { - setHeight( height, true ); - }, 10 ), - [ setHeight ] - ); + const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [ + setHeight, + ] ); useFocusEffect( useCallback( () => { @@ -69,9 +66,6 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => { if ( heightRef.current.maxHeight !== height && isFocused ) { heightRef.current.maxHeight = height; - if ( fullScreen ) { - return; - } setHeightDebounce( height ); } }; From 5d1691d286dc24b4341b60dc2c127f7eba8ea2a1 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 10 Sep 2020 13:42:41 +0200 Subject: [PATCH 78/83] iOS close to cancel / Android arrow left icon to cancel icon --- .../mobile/bottom-sheet/navigation-header.native.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js index 9715f91a3d977..ff1aed85517fe 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js @@ -7,7 +7,7 @@ import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { check, Icon, chevronLeft, arrowLeft } from '@wordpress/icons'; +import { check, Icon, chevronLeft, arrowLeft, close } from '@wordpress/icons'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** @@ -56,10 +56,14 @@ function BottomSheetNavigationHeader( { style={ chevronLeftStyle } /> ); - backText = isFullscreen ? __( 'Close' ) : __( 'Back' ); + backText = isFullscreen ? __( 'Cancel' ) : __( 'Back' ); } else { backIcon = ( - + ); } From 57689dfc3ef21fc8898710f3a257d61bc8a25a1c Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 10 Sep 2020 22:45:59 +0200 Subject: [PATCH 79/83] Fix initial selection --- .../format-library/src/link/modal.native.js | 38 +++++++++++-------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 1458e1129f36b..bc287fc2b4942 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -5,7 +5,7 @@ import React from 'react'; /** * WordPress dependencies */ - +import { useMemo } from '@wordpress/element'; import { BottomSheet, withSpokenMessages } from '@wordpress/components'; /** @@ -16,21 +16,27 @@ import LinkSettingsScreen from './modal-screens/link-settings-screen'; import LinkPickerScreen from './modal-screens/link-picker-screen'; const ModalLinkUI = ( { isVisible, ...restProps } ) => { - return ( - - - - - - - - - - - ); + return useMemo( () => { + return ( + + + + + + + + + + + ); + }, [ isVisible ] ); }; export default withSpokenMessages( ModalLinkUI ); From 4a12d0b3f6f3e9647f5df0ac538628a182b599af Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 11 Sep 2020 16:12:21 +0200 Subject: [PATCH 80/83] change color of clear icon in link picker --- packages/components/src/mobile/link-picker/styles.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/link-picker/styles.native.scss b/packages/components/src/mobile/link-picker/styles.native.scss index e2db1bda7fd45..5ff8542f22914 100644 --- a/packages/components/src/mobile/link-picker/styles.native.scss +++ b/packages/components/src/mobile/link-picker/styles.native.scss @@ -27,5 +27,5 @@ } .iconDark { - color: $dark-quaternary; + color: $dark-tertiary; } From 84fa7fdda47e51be0558df90de41dbe2f7ca8689 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 16 Sep 2020 14:27:05 +0200 Subject: [PATCH 81/83] Back comment about supported endpoints --- packages/react-native-editor/src/api-fetch-setup.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/src/api-fetch-setup.js b/packages/react-native-editor/src/api-fetch-setup.js index eb428f9ece6a4..ee2a15e1a3f8a 100644 --- a/packages/react-native-editor/src/api-fetch-setup.js +++ b/packages/react-native-editor/src/api-fetch-setup.js @@ -4,6 +4,7 @@ import { fetchRequest } from '@wordpress/react-native-bridge'; import apiFetch from '@wordpress/api-fetch'; +// Please add only wp.org API paths here! const SUPPORTED_ENDPOINTS = [ /wp\/v2\/(media|categories)\/?\d*?.*/i, /wp\/v2\/search\?.*/i, From 4679f08c651271315656194b059a5fc057310035 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 18 Sep 2020 10:19:54 +0200 Subject: [PATCH 82/83] Update changelog --- packages/react-native-editor/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 5314bf34072dc..6e43122957fb6 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,6 +11,10 @@ For each user feature we should also add a importance categorization label to i ## Unreleased +## 1.38.0 + +[***] Add support for selecting user's post when configuring the link + ## 1.37.0 * [**] Add support for rounded style in Image block From a346bba7d39eba8b4c3cbb7b6d7d6341581349c2 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 18 Sep 2020 13:14:34 +0200 Subject: [PATCH 83/83] Add missing colors for link picker --- packages/base-styles/_colors.native.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/base-styles/_colors.native.scss b/packages/base-styles/_colors.native.scss index 626c2df80f09e..f8562178149f4 100644 --- a/packages/base-styles/_colors.native.scss +++ b/packages/base-styles/_colors.native.scss @@ -47,6 +47,7 @@ $gray-text: $gray-dark; $gray-text-min: darken($gray, 18%); //#537994 // Shades of gray +$gray-lighten-10: lighten($gray, 10%); // #a8bece $gray-lighten-20: lighten($gray, 20%); // #c8d7e1 $gray-lighten-30: lighten($gray, 30%); // #e9eff3 $gray-darken-20: darken($gray, 20%); // #4f748e @@ -82,6 +83,7 @@ $light-ultra-dim: #0000000a; //rgba(0, 0, 0, 0.04); // neutral (dark) - white is a base color in dark mode $dark-primary: #fffd; //rgba(255, 255, 255, 0.87); $dark-secondary: #fff9; //rgba(255, 255, 255, 0.6); +$dark-tertiary: #ffffff6d; //rgba(255, 255, 255, 0.43); $dark-quaternary: #ffffff3f; //rgba(255, 255, 255, 0.25); $dark-ultra-dim: #ffffff14; //rgba(255, 255, 255, 0.08);